学習の経緯 一番の理由はフロント側に興味津々で早く触りたいと思ってたためです。 また、周りで触っているエンジニアさんも多かったこともあり、Reactを習得することを決意。 前提 CodeSandboxを使用 JSX記法のルール JSXとは JavaScript を拡張し、UI 要素を記述するのに HTML のようなタグ構文が使えるようにしたJavascriptの拡張構文のこと コード説明(下記参照) import React from "react"; React でコードを書くためのオマジナイ import ReactDom from "react-dom"; HTML にコンポーネントを反映するための記述 const App Hello! と Tom が出力される関数の定義 複数要素の場合は、returnを()で囲う必要がある 且つ、 return する HTML の内容は１つのタグ(<> </>)で囲う必要がある ReactDom.render(<App />, document.getElementById("root")); 画面に反映させるための記述 構文 : ReactDom.render(関数等(element), 反映させる場所(container)); index.js import React from "react"; import ReactDom from "react-dom"; const App = () => { return ( <> <h1>Hello!</h1> <p>Tom</p> </> ); }; ReactDom.render(<App />, document.getElementById("root")); コンポーネント UIの一部分となるビュー(View)を切り出したもの。 また、単にUIを切り出すだけでなく、新たにコードを含むことも可能で、プログラムとして再利用できる。 import React from "react"; Reactでコードを書くためのオマジナイ export default 記述することで他のファイルで使用することができる xxx.jsx React のコンポーネント専用に用意されている拡張子 xxx.jsでもエラーは起きないが、明示的に示すことができる 【コンポーネントの作成その①】 src/App.jsx import React from "react"; const App = () => { return <h1>Hello!</h1> }; export default App; App.jsxコンポーネントを使用するための記述 import は相対パスで記述する("./App") src/index.js import React from "react"; import ReactDom from "react-dom"; import App from "./App"; // 追加 ReactDom.render(<App />, document.getElementById("root")); 【コンポーネントの作成その②】 src/App.jsx import React from "react"; export const App = () => { return <h1>Hello!</h1> }; export const App = () => { 関数コンポーネント前にexportを記述する src/index.js import React from "react"; import ReactDom from "react-dom"; import { App } from "./App"; ReactDom.render(<App />, document.getElementById("root")); import { App } from "./App"; インポートは、分割代入をして記述する 命名規則 ファイル名・・・パスカルケースで記述する　 パスカルケース・・・先頭が大文字で始まり、単語の区切りを大文字とする記法のこと ○ App.jsx ✕ app.jsx ○ SomeComponents.jsx ✕ someComponets.jsx HTMLのタグ内で扱うイベント名・・・キャメルケースで記述する キャメルケース・・・先頭が小文字で始まり、単語の区切りを大文字とする記法のこと ○ onClickButton ✕ OnClickButton ✕ on-click-button CSS(スタイル)の当て方 HTMLの要素にstyles.cssを適用 jsxファイルの場合、classではなく、classNameとする <div className="クラス名"> HTMLの要素内に記述 値を記述する際の１つ目の{ }は、JavaScriptを記述するためのもので、２つ目の{ }は、オブジェクトを記述するためのもの プロパティーの値は必ずダブルコーテーション""もしくは、シングルコーテーション''で囲うこと <h1 style={{ color: "red" }}>Hello!</h1> 変数に定義する スタイル名はキャメルケースで記述する ○ fontSize ✕ font-size const App = () => { const contentStyle = { color: "blue", fontSize: "18px" }; return <h1 style={contentStyle}>Hello!</h1> Props コンポーネントに渡す引数のようなもの componentsディレクトリ直下に、コンポーネントファイルを作成 ■ 文字色とメッセージを渡すコンポーネントファイルの場合 　・ 画面にHello！(青色)とTom(ピンク色)を表示 src/components/ColorfulMessage.jsx import React from "react"; const ColorfulMessage = (props) => { console.log(props); // {color: "blue", message: "Hello!"}, // {color: "pink", message: "Tom"} const { color, message } = props; const contentStyle = { color, message }; return <h1 style={contentStyle}>{message}</h1>; }; export default ColorfulMessage; const ColorfulMessage = (props) => { 関数の引数(props)は、任意の文字でも問題ない(明示的にするため、propsとしている) const { color, message } = props; 記述量を減らすため、分割代入している しない場合、<h1>タグ内の{message}を{props.message}と記述する必要がある src/components/App.jsx import React from "react"; import ColorfulMessage from "./components/ColorfulMessage"; const App = () => { return ( <> <ColorfulMessage color="blue" message="Hello!" /> <ColorfulMessage color="pink" message="Tom" /> </> ); }; export default App; <ColorfulMessage color="blue" message="Hello!" />; コンポーネント名のタグを作成することでコンポーネントを使用することができる color="blue" message="Hello!" 動的に文字色とメッセージを変更するため、プロパティー値("blue"と"Hello!")をColorfulMessageコンポーネントに渡している porps名(color, message)は任意の文字を付けることができる ■ 親コンポーネントのタグにメーセージを記述する場合 　・ 画面にHello！(青色)とTom(ピンク色)を表示 src/components/ColorfulMessage.jsx import React from "react"; const ColorfulMessage = (props) => { console.log(props); // {color: "blue", children: "Hello!"} // {color: "pink", children: "Tom"} const { color, children } = props; const contentStyle = { color }; return <h1 style={contentStyle}>{children}</h1>; }; export default ColorfulMessage; {children} 親コンポーネントのタグで囲んでいる要素を表示することができる <ColorfulMessage color="blue">Hello!←ココ</ColorfulMessage> src/components/App.jsx import React from "react"; import ColorfulMessage from "./components/ColorfulMessage"; const App = () => { return ( <> <ColorfulMessage color="blue">Hello!</ColorfulMessage> <ColorfulMessage color="pink">Tom</ColorfulMessage> </> ); }; export default App; useState 各コンポーネントが持つ状態のことで、画面上に表示されるデータ等を保持している状態を指す。 Stateが変更されると再レンダリングされる 条件によって動的に変わる部分を定義することで、様々な状態の画面を表示することができる 親コンポーネントが再レンダリングされた場合、子コンポーネントも再レンダリングされる ■ 値を動的に更新するクリックイベントの場合 　・ ボタンをクリックする毎にnumの値が +1 され、更新後の値が画面に表示される src/components/App.jsx import React, { useState } from "react"; const App = () => { const onClickCountUp = () => { setNum(num + 1); }; const [num, setNum] = useState(0); return ( <> <button onClick={onClickCountUp}>カウントアップボタン</button> <p>{num}</p> </> ); }; export default App; import React, { useState } from "react"; useState を使用するため、分割代入で取り出している const [num, setNum] = useState(0); 構文 : const [<stateとして使用する変数名>, <値を更新するための関数名>] = useState(<初期値>); setNum(num + 1); 設定したい値を記述する ■ 要素を表示/非表示させるクリックイベントの場合 　・ ボタンをクリックすると、要素の値がfalseになることで非表示になり、再度クリックすると、要素の値がtrueになり Hello! が表示される（表示/非表示の繰り返し） import React, { useState } from "react"; const App = () => { const [showFlag, setShowFlag] = useState(true); const onClickGreeting = () => { setShowFlag(!showFlag); } return ( <> <button onClick={onClickGreeting}>on/off</button> <p>{showFlag && "Hello!"}</p> </> ); }; export default App; setShowFlag(!showFlag); 変数の先頭に!を付けることで、要素の値を切り替えている <p>{showFlag && "Hello!"}</p> showFlag が true の場合、 Hello! が表示されるように論理演算子を使用している useEffect レンダリングと副作用を切り離すことができる。 そのため、関数の実行タイミングをレンダリングされるまで遅らせることができる。 ■ カウントアップボタンをクリックし、3 の倍数時のみ、 Hello! を表示させ、且つ、on/offボタンのクリックイベントも反映させている場合 import React, { useEffect, useState } from "react"; const App = () => { const [num, setNum] = useState(0); const [showFlag, setShowFlag] = useState(false); const onClickCountUp = () => { setNum(num + 1); }; const onClickGreeting = () => { setShowFlag(!showFlag); }; useEffect(() => { if (num > 0) { if (num % 3 === 0) { showFlag || setShowFlag(true); } else { showFlag && setShowFlag(false); } } }, [num]); return ( <> <button onClick={onClickCountUp}>カウントアップボタン</button> <p>{num}</p> <button onClick={onClickGreeting}>on/off</button> <p>{showFlag && "Hello!"}</p> </> ); }; export default App; import React, { useEffect, useState } from "react"; useEffect を使用するため、分割代入で取り出している if (num > 0) { num の値が 0 以上の場合に表示させるための条件分岐 showFlag || setShowFlag(true); showFlag が　false の場合のみ、setShowFlag(true) を実行 setShowFlag(true) のみの記述の場合、state が必ず呼び出されることで再レンダリングされてしまい、「無限ループが起きてしまうから気をつけて」というエラーが表示される showFlag && setShowFlag(false); showFlag が true の場合、setShowFlag(false)　を実行 }, [num]); useEffect の第引数の配列に num を指定することで num の値が更新された場合のみ、実行させるように制御することができる 終わりに 触ってみた感想として、とても魅力的な言語だと感じました（語彙力とは）　 これからも継続的に学習していきます。 参考教材

PythonでAudioデータを使ったアプリを作っていきます。 手始めに、オーディオデバイスの情報を取得します 開発環境 ・Mac(Mac Book Air ２０１３） ・MacOS Big Sur(11.5) ・Python 3.9.1 ・PortAudio 19.7.0 ・PyAudio 0.2.11 参考 PyAudioのAPI仕様を参考にします 手順 １．オーディオデバイスの数を取得 ２．全オーディオデバイスに対して情報を取得 import pyaudio p = pyaudio.PyAudio() for i in range(0,p.get_device_count()): print(p.get_device_info_by_index(i)) 私のMacでは以下のような出力が得られました。 {'index': 0, 'structVersion': 2, 'name': 'Built-in Microphone', 'hostApi': 0, 'maxInputChannels': 2, 'maxOutputChannels': 0, 'defaultLowInputLatency': 0.0029478458049886623, 'defaultLowOutputLatency': 0.01, 'defaultHighInputLatency': 0.01310657596371882, 'defaultHighOutputLatency': 0.1, 'defaultSampleRate': 44100.0} {'index': 1, 'structVersion': 2, 'name': 'Built-in Output', 'hostApi': 0, 'maxInputChannels': 0, 'maxOutputChannels': 2, 'defaultLowInputLatency': 0.01, 'defaultLowOutputLatency': 0.007551020408163266, 'defaultHighInputLatency': 0.1, 'defaultHighOutputLatency': 0.017709750566893424, 'defaultSampleRate': 44100.0} オーディオ端子のマイク入力がindexの０番として認識されていますね。 ここで得た情報をもとに、オーディオアプリを作っていけそうです。 今回はここまで。

リピート入力認識の速度をあげる # 現在の設定は以下のコマンドで確認 $ defaults read -g InitialKeyRepeat # リピート入力認識を上げる $ defaults write -g InitialKeyRepeat -int 12 キーリピートの速度を上げる # 現在の設定は以下のコマンドで確認 $ defaults read -g KeyRepeat # キーリピートの速度を上げる $ defaults write -g KeyRepeat -int 1 Macの再起動 上記コマンドを実行後、Macを再起動後キーリピートが速くなる (補足)元に戻したい場合 # リピート入力認識速度を初期化 $ defaults delete -g InitialKeyRepeat # キーリピート速度を初期化 $ defaults delete -g KeyRepeat

MacにはデフォルトでApacheが入っている sudo apachectl start It works!と表示されます。 sudo apachectl stop sudo apachectl restart ハマるポイント Brewのapacheが入っていることがある。 無論勝手に入ることはないでしょうが、brewは簡単にコマンド一つで入れられますので。 勿論設定ファイルも複数あることになる。 以前私がハマったポイントは、いくら設定ファイルでPHPのsocketを有効(コメントアウトを外す)にしてもPHPが有効にならなくて気絶したことがありました。 必ず自分がどちらのApacheを使うのか。設定ファイルはどちらのapacheなのかを明確にして作業を進める必要があるでしょう。 対策 which httpd でどのApacheが今ターミナルで有効かを確認しましょう。 /usr/sbin/httpd もし別のApacheを使いたいのなら、 コンソールの直リンクをTerminalにベタばりする。 BashProflieなどでの参照の順番を変更する。 というやり方があります。 先に読まれたコマンドが実行されるっぽいです。 ドキュメントルートの場所 Library/WebServer/Documents Terminalで open Library/WebServer/Documents と打つとFinderで開けて楽。 Apacheを固定IPでローカルのWi-Fiにいる端末からアクセスできるようにする。 <IfDefine SERVER_APP_HAS_DEFAULT_PORTS> Listen 8080 </IfDefine> <IfDefine !SERVER_APP_HAS_DEFAULT_PORTS> # Listen 80 Listen 192.168.11.1:80 </IfDefine> Listenが80バンとか担っていると思うのでここを Listen 192.168.11.1:80 のように127.0.0.1ではないPCがWifi接続しているIPをしていする。 固定IPにする方法、 固定IPの確認方法は各自調べてみて。 再起動すると他のスマホとかからでもアクセスできるはず。 設定ファイル /etc/apache2/httpd.conf 編集 sudo vim /etc/apache2/httpd.conf Apacheの設定ファイル /etc/apahce2/httpd.conf 通常のアクセスログファイル /private/var/log/apache2/access_log エラーのログファイル /private/var/log/apache2/error_log セキュリティー的なこともあってエラー内容は表示されないのでエラーファイルのログでエラーがわかると開発効率が違う。 バーチャルホスト まず設定をオンにする。 コメントアウトするだけ。 バーチャルホストは親元のファイル、もしくは各自のhtaccessどちらかに書く。 ServerName localhost DocumentRoot /Users/username/Sites

はじめに 備忘録 PCはMac M1チップ 参考記事を読んでから実装するとわかりやすいと思います。 参考にした記事 【Ruby】Rubyのインストール手順と動作確認 Ruby on Rails の環境構築構築 bundlerで非推奨になった --path --binstubs - Qiita bundle exec はもういやだ - Qiita 特質事項 非推奨の--path vendor/bundle --binstubs=vendor/binを使わない方法で実装する rails 環境構築部のbundle execを省略する設定を有効にするために .rbenvに設定を加える必要がある (rbenvをインストールした後実行してください) $ mkdir -p ~/.rbenv/plugins $ cd ~/.rbenv/plugins $ git clone https://github.com/ianheggie/rbenv-binstubs.git railsのインストール時にドキュメントをスキップする際は下記を設定 (Rubyをインストールした後実行してください) echo "gem: --no-document" >> ~/.gemrc Homebrewのインストール Homebrewのバージョン確認と更新 brew -v brew update インストールされていなければ実行. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" コードが途中で切れてしまう場合、、公式からコピペ 1-1. Node環境の確認とインストール homebrewを使用してnodebrewのインストール brew install nodebrew nodeの安定バージョンをインストール nodebrew install stable nodebrewのバージョン一覧を確認 nodebrew ls インストールしたバージョンを指定して切り替える nodebrew use v14.15.3 nodeのパスを通す echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile' ターミナルの再起動 yarnのインストール npm install -g yarn nodeとnpmのバージョン確認 node -v npm -v バージョンを指定してnodeをインストール nodebrew install-binary <version> インストール可能なバージョンを確認 nodebrew ls-remote rbenvとrbenv-buildのインストール rbenvのインストール brew install rbenv rbenvのバージョン確認と更新 rbenv -v brew upgrade rbenv rbenv-buildのインストール brew install ruby-build rbenvのセットアップ (pathを通す) echo 'eval "$(rbenv init -)"' >> ~/.zshrc echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.zshrc 「~/.zshrc」を再読み込み source ~/.zshrc 正しくPATHが通っているか確認する echo $PATH /Users/username/.rbenv/shims:が追加されていればOK Rubyのインストール インストール可能なRubyのバージョンを確認 rbenv install -l 2.最新バージョンをインストール rbenv install version versionを数字に変更してinstall 標準で使うrubyのversionを指定 rbenv global version ディレクトリ毎に使用するversionを変更する方法は別途 標準で使うrubyを設定できたか確かめる ruby -v rubyが使えるかの動作確認 (動作確認は記事下部にて記載) インストール済みversion一覧 rbenv versions ruby on railseの環境構築 gemのインストールには、グローバルインストールとローカルインストールがある。今回は、ローカルにインストールして(ディレクトリ)ごとにgemやgemのバージョンを管理する構築方法 プロジェクトファイルを作成する mkdir sample ファイル内でbundleを初期化 bundle init Gemfileを編集する gemのインストール先をローカルに設定 bundle config set path 'vendor/bundle' bundle execを省略する設定 bundle binstubs --path=vendor/bin gemをインストール $ bundle install 新規Railsアプリケーションの作成 rails new . bundle configで確認 $ bundle config Settings are listed in order of priority. The top value will be used. path Set for the current user (/Users/hoge/.bundle/config): "vendor/bundle" bin Set for your local app (/Users/hoge/fuga/hege/.bundle/config): "vendor/bin" 補足事項 bundle execをつけることでディレクトリにインストールしたgemを利用できる bundle exec rails new sample　→ ローカルにインストールしたコマンド実行 rails new sample →　グローバルインストールされているシステム共通のコマンド 今回紹介したrailsの構築ではbundle execを省略できる設定を付与しているので、bundle execはいらない Rubyの動作確認 ディレクトリを作成 ディレクトリ内でファイルを作成「拡張子はrb」 内容を記述 put "Hello World" ターミナルでrubyを実行 ruby test.rb

Macアプリの審査が通ってリリースしたけど、自分のMacにインストールできない！ macOSアプリを作って無事リリースに漕ぎ着けましたが、実際にApp Storeからインストールしようとしたらうまくいきませんでした。 App Storeのインストールログはどこか、と思って調べたら以下のパスでした。 /var/log/install.log tail等で中身を確認して問題解決してください。 私の失敗理由 ちなみに私がインストールに失敗した理由は以下の通りでした。 今回作成したmacOS版はすでにリリースされているiOS版のデスクトップ版という位置付けで、まずはリリースをするという目的だったので、バージョンはiOS版より低いものでした。 で、ログの中に以下のようなメッセージを見つけました。 install.log(抜粋) ... 2022-01-19 10:05:35+09 mymac installd[1148]: PackageKit: Skipping component "com.example.myapp" (1.2.0-5.0.0-*) because the version 1.3.0-1.3.0-* is already installed at /Users/account/AndroidStudioProjects/my_app/ios/DerivedData/Runner/Build/Products/Debug-iphoneos/.XCInstall/MyApp.app. ... AndroidStudioで作っていたiOSアプリのビルドフォルダを削除していなかった、というお粗末な内容でしたが、ログファイルを確認したおかげで解決できました。

環境 MacOS 12.1 Python 3.10.0 TkinterでGUI作るぞ！！！ エラーは出ないのにGUIの画面真っ黒やん。 ボタンも文字も何も出てこない。。。 あかん。　何やっても解決しないぞ、これ と思って、別のライブラリを使って動かしたところ You are running a VERY old version of tkinter 8.5.9. You cannot use PNG formatted images for example. Please upgrade to 8.6.x え？　　バージョン古いの？？ 実は気づくタイミングがありました。 直そうとしていた時に Pythonの対話モードでバージョン確認したんですよ。 >>> tkinter.Tcl().eval('info patchlevel') '8.5.9' 完全に見落としました。 Tcl/tkが入ってて満足してました。　 MacOSでTkinter8.5系は表示バグの致命的欠陥があります。 よし！！　アップデートするか！！ ターミナルにて brew info tcl-tk と打つと tcl-tk: stable 8.6.12 (bottled) [keg-only] Not installed 入ってません。 なので brew install tcl-tk で 最新版をインストール Pythonはpyenv管理していたので pyenv uninstall 3.10.0 pyenv install 3.10.0 GUI表示されたー！！！！ まとめ Mac環境でTkinterのGUIが表示されないときはTcl-tkのバージョン確認しましょう。 pyenvで最新版のPythonをインストールしても -> https://www.python.org/ftp/python/3.10.0/Python-3.10.0.tar.xz Installing Python-3.10.0... <中略> python-build: use tcl-tk from homebrew Tcl-tkは、Homebrewを使うので、brewコマンドで確認しましょう 参考文献 Macのtkinter8.5でpngをまともに表示できない→PyenvのPython再インストールでtcl-tkをバージョンアップした

はじめに 先日、念願のMacbook Proを手に入れましてウキウキでセットアップを済ませ、さっそくリモートワーク用の会社端末にリモートデスクトップをしようと思った矢先に問題が発覚しました。 RDP接続先の端末で日本語入力への切り替えができない！！ 正確に言えばRDP接続先のWindowsで割り当てた「Control + Space」でのIME切り替えが機能しない。 購入したMacbookはUS配列なのですが、入力ソースの切り替えはデフォルトで同じく「Control + Space」がアサインされており、Mac側のショートカットが優先されてしまうので、リモートデスクトップクライアントアプリでキー入力されていない扱いとなっているようでした。 一応そのままでも回避策はあり、WindowsはデフォルトでUS配列キーボードの場合「Alt + `」でIME切り替えができます。なので、リモートデスクトップであってもMacから「Option + `」で代用することはできます。 でもやっぱり「Control + Space」で統一したい！！ Mac初心者ながら四苦八苦した結果の備忘録となります。 方針 私はリモートデスクトップにはMicrosoftのリモートデスクトップクライアントとParallels社のParallel Clientを使っています。 そのため、端的にこの2つのアプリを操作している間、Mac側の「入力ソースの切り替え」ショートカットよりも優先してキー入力をインターセプトし、「Control + Space」→「Option + `」に変換してキー入力として扱うことができれば、RDP接続中でも同じキー操作で日本語変換を行うことができそうです。 Karabiner-Elementsで解決できる Macをほとんど初めて触った私には馴染みありませんでしたが、キー入力（From）をトリガーにして様々なイベント（To）に変換することのできるツールでKarabiner-Elementsというド定番ソフトウェアがあるそうです（すばらしい）。 詳しい使い方は先人達がQiitaをはじめとして解説してくださっているので、そちらでご確認いただくとして、今回の「Control + Space」問題に関して言えば、「方針」の通り、リモートデスクトップアプリの操作中という条件付きでキー入力の変換ルールが実装できそうです。 ルール作成 & 適用 ポイントは2点です。 同時押しを定義する"modifiers"は"from"には"mandatory" or "option"の区別があるが、"to"には存在せず直記述する "conditions"の"type": "frontmost_application_if"にて特定アプリケーション（リモートデスクトップクライアント or Parallel Client）がフロントになっている時だけキー変換を機能させる 細かいルールの記法は公式ドキュメントを参照ください。 ルールファイルの配置場所と内容だけ記載します。 $ vim　~/.config/karabiner/assets/complex_modifications/[user_rule].json [user_rule].json { "title": "ユーザ定義の日本語環境向け設定", "rules": [ { "description": "Control+Spaceを押したときに、Option+`を送信する（RDC、Parallel Clientがフロントの場合）", "manipulators": [ { "type": "basic", "from": { "key_code": "spacebar", "modifiers": { "mandatory": [ "left_control" ] } }, "to": [ { "key_code": "grave_accent_and_tilde", "modifiers": [ "left_option" ] } ], "conditions": [ { "type": "frontmost_application_if", "bundle_identifiers": [ "^com\\.microsoft\\.rdc\\.osx", "^com\\.microsoft\\.rdc\\.macos", "^com\\.2X\\.Client\\.Mac" ] } ] } ] } ] } ルールの作成後、Karabiner-Elementsを起動し、 Complex modifications > Rules > Add rule > [作成した独自ルール] > Enable で有効化、 Deviceタブでキー変換を行う対象のキーボードにチェックが入っていることを確認して（入っていなければチェックをつけて）完了です。 総評 想定通り、RDP接続時でも「Control + Space」で日本語変換ができるようになりました！ なかなか解決方法に辿り着かず、いろいろ試行錯誤があった上で実現できたので記事にしてみましたが、英字配列のキーボードをお使いの方で「Control + Space」でIME切り替えを行う＋リモートデスクトップを行うという方は案外少ないんだろうか。 ちなみに、Karabiner-Elementsは定番ツールなだけあって、よくあるシチュエーションに対応したユーザ作成ルールが公式で共有されているので、今回はマッチするものは見つかりませんでしたが、ものによってはインポートするだけで問題解決したり効率化したりできそうです。 他にも利用できそうな幅があるのでまた良い使い方が見つかったら記事にしようかと思います。