- 投稿日：2020-05-17T22:32:43+09:00
【VSCode】Laradockでデバッグできるようにしようぜ!!【Mac】
VSCodeの拡張機能を使ってデバッグ環境を作る方法を解説します。
拡張機能のダウンロード
予め
PHP Debugという拡張機能をインストールしておきます。.envの書き換え
laradockディレクトリ下の
.envを下記の2つの変数をfalseからtrueに書き換えます。WORKSPACE_INSTALL_XDEBUG=true PHP_FPM_INSTALL_XDEBUG=trueXdebugの書き換え
- laradock/php-fpm/xdebug.ini
- laradock/workspace/xdebug.int の変数を下記のように書き換えます。
xdebug.inixdebug.remote_host=docker.for.mac.localhost xdebug.remote_connect_back=0 xdebug.remote_port=9001 xdebug.idekey=Listen for XDebug xdebug.remote_autostart=1 xdebug.remote_enable=1 xdebug.cli_color=1 xdebug.profiler_enable=0 xdebug.profiler_output_dir="~/xdebug/phpstorm/tmp/profiling" xdebug.remote_handler=dbgp xdebug.remote_mode=req xdebug.var_display_max_children=-1 xdebug.var_display_max_data=-1 xdebug.var_display_max_depth=-1containerの再構築
docker-compose up -d --build nginx mysql
--buildオプションで起動します。イメージがある状態でも再度ビルドしてcontainerを立ち上げてくれます。Visual Studio Codeの設定
プログラム実行の設定（デバッグの設定）を行うのが
.vscode/launch.jsonファイルです。作業ディレクトリのlaunch.jsonファイルを作成して、下記を記述します。user_app_nameのところには自分のappディレクトリの名前をいれてください。
vscode/launch.json{ "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9001, "pathMappings": { "/var/www": "${workspaceFolder}/user_app_name" }, "log": true } }デバッグの実行
ソースの行番号の左側を押して、ブレークポイントを設定。
サイドバーのデバッグのボタンを押して、[Listen for XDebug]を選択し、RUNの△を押せば準備完了。ブレークポイントのところで止まるようになります。
参考
- PHP on Laradock w/ Visual Studio Code(VS Code)でデバッグ環境 (特にon Mac) - Qiita
- VSCodeでMacOSにC言語デバッグ環境を構築 | だえうホームページ
- Vagrant + Virtualbox + Docker + Laradoc + Laravel + VSCode + XDebug の 環境を設定したメモ。 - Qiita
- docker+laravel+VSCode+Xdebugという開発環境を作る - Qiita
- 脱print文！Visual Studio Code + LaradockでPHPのコードを快適デバッグ - bitA Tech Blog
- 投稿日：2020-05-17T18:24:59+09:00
AtCoderでC++を行う最低限環境構築の仕方
前振り
AtCoderを始めて、ずっとコードテストを使っていたのですが、AtCoder Beginner Contest 165の解説動画を見て、「え、C++ってWindowsじゃなくても実行できるの？！」と驚き、最低限の環境を作ってみました。
前提
#include <bits/stdc++.h>を使うのでgcc系のコンパイラを入れます。
- PCはMacです。
- テキストエディタとしてATOMを使用します。
- 最低限の環境なので使いやすさなどは考慮しておらず、macでAtCoderのC++コードを実現することを目標としています。
gccを入れる
Macのターミナルを開いて、homebrew(パッケージ管理システム)でコンパイラであるgccをインストールします。
terminal$ brew install gccpathを変更する
gccを入れた状態では、
- /usr/bin/g++ (clang)
- /usr/local/bin/g++-9 (gcc)
の二つのコンパイラが存在していて、この状態でg++コマンドを打ってもclangが呼び出される。
/usr/local/bin/にg++(gcc)のシンボリックリンクを作成し、g++コマンでgccを実行するようにする。terminal$ ln -s /usr/local/bin/g++-9 /usr/local/bin/g++stdc++.hを使えるようにする
gccをインストールすると、/usr/local/下の奥にstdc++.hがあり、コンパイラが認識出来る場所に配置する必要がある。
そこで、/usr/local/下にフォルダを作成し、stdc++.hファイルをコピーして配置する。terminal$ cd /usr/local/ $ mkdir /usr/local/include/bits $ cp ./Cellar/gcc/9.2.0/include/c++/9.2.0/x86_64-apple-darwin18/bits/stdc++.h /usr/local/include/bits/実行手順
1. ファイル作成
ファイル保存場所に移動し、空ファイルを作成する。
$ cd Desktop/ $ atom hello.cpp2. プログラム記述
今回は簡単に以下のプログラムを記述しました。
hello.cpp#include <bits/stdc++.h> using namespace std; int main(void) { cout << "hello world" << endl; return 0; }3. コンパイル・実行
ファイル名を指定しなければ a.out というファイルがコンパイルによって作成される。
a.out を実行する。terminal$ g++ hello.cpp $ ./a.out hell worldファイル名を指定したい場合は以下のようにコンパイルすればよい。
terminal$ g++ hello.cpp -o world.out参考
- 投稿日：2020-05-17T15:57:36+09:00
Macで￥を\に設定する方法
結論
'¥'マークキーを押した時にデフォルトで'\'(バックスラッシュ)にする方法を紹介します。
環境
・MacBook Air (13-inch, Early 2015)
・macOS Catalina バージョン 10.15.4方法
1.システム環境設定のキーボードを選択
2.入力ソースタブ下方の「"¥"キーで入力する文字」を'\'に設定補足
逆に'¥'記号を打ちたい時は"えん"で変換すれば出てきます。
入力機会の多い方を設定するのが無難かもしれません。+αで便利な設定
1.¥キーの設定の下にある"数字を全角入力"を外しておくと入力モードに依らずに半角数字が入力できる
2.タイピングが早い方は入力ソースタブ上方の"ライブ変換"を外しておくとタイピングしやすいかも
- 投稿日：2020-05-17T15:11:32+09:00
フロントエンドエンジニアのMac初期設定を全部まとめる
はじめに
この記事の対象者
- Macユーザー
- 最適なMac設定を模索しているWeb系エンジニア（※フロントメイン）
環境
- MacBook Pro
(13-inch, 2017, Four Thunderbolt 3 Ports)
- プロセッサ: 3.1 GHz デュアルコアIntel Core i5
- メモリ: 16 GB 2133 MHz LPDDR3
- Mac OS Catalina バージョン10.15.4
なぜこの記事を書いたのか
まず一つ目はMacの初期設定をする機会が意外に多く、しかもそれに馬鹿にならない工数を取られていると気付いたからです。 昨年度は2社からそれぞれMacBook Air
二つ目は、自分のMacの設定がこれで良いのか気になったです。Macは毎日使うものであり、もはや自分の身体の延長といっても過言ではないので、可能な限り最適化したいです。なので、是非この記事をお読み頂けた方々のご意見もコメントで教えて頂ければ幸いです。
全体の流れ
こんな感じで進めると効率が良いと思います。
人間はJavaScriptと違ってマルチスレッドなので、インストールの待ち時間を上手に利用して並行して作業を進めましょう。
- Macを初期化する(新品の場合は省略)
- MacOSが最新か確認(新品の場合は省略)
- まず最初にMacの設定をカスタマイズ
- (↑と並行して)アプリをダウンロード
- 環境構築
- (↑と並行して)VS codeをカスタマイズ
- Launchpadを整理
Macの設定をカスタマイズ
Mac爆速化
カーソル移動速度をマックスに
「システム環境設定（歯車アイコンです）/トラックパッド」 と移動して、「軌跡の速さ」のバーを右端に引っ張って最大速度にします。仕事できる人はみんなMaxにしているイメージです。
キーボードをMaxに
「システム環境設定（歯車アイコンです）/キーボード」 と移動して、「キーのリピート」のバーを右端に引っ張って最大速度にします。及び、「リピート入力認識までの時間」のバーを右端に引っ張って最も短くします。特に後者の「リピート入力認識までの時間」はターミナル操作の時に非常にラクにな流ので、強く勧めます。
目に優しくする
実は脳は疲れません。デスクワークをしていて「疲れた」と感じるのは、主に、「目が疲れている」のが原因です。
特にエンジニアは家族や恋人の顔よりディスプレイを見る時間の方が長いと言っても過言ではないでしょう。
よって、PCやスマートフォンの設定は最大限目に優しい環境にするのがおすすめです。常にダークモードにする
「システム環境設定アプリ（歯車アイコンです）/一般」と移動して、「外観モード: ダーク」を選択します。以前は「オート」にしていたのですが、常にダークモードで統一することで作業時間が伸びました。
常にNight Shiftを最大適用する
「システム環境設定アプリ（歯車アイコンです）/ディスプレイ」と移動して、「Night Shift」の各項目を下記のように設定することで24時間常に適用されるようにします。
スケジュール: カスタム
開始: 4:00
終了: 3:59
色温度: 右端まで引っ張って最大限「暖かく」する
NightShiftは物凄く目の負担が減るので、24時間の導入を強くお勧めします。
最初は黄色ががった画面に驚くかもしれませんが、数十分で慣れます。ただし、デザイナーの方は細かい色彩感覚が重要なので、話が違うかもしれません。フロントエンドエンジニアとしてはNightShift適用下でもCSS書くのに不便を覚えたことはありません。非光沢の画面保護シールを貼る
Macには必ず画面保護シールを貼ることをお勧めします。
指紋等汚れが付きにくくなって綺麗なディスプレイを保てるのと、画面光を抑えるためです。特にアンチグレア（非光沢）のシールを使っていたのですが、光沢画面であるMacに移行してからはっきりと目が疲れやすくなったと感じました。
ちなみにブルーライトカットの方はそれ単体での効果を実感できたことがないので、特に期待していません。
極上 ブルーライトカット 超高精細アンチグレア Macbook Air 2020 液晶保護フィルム 国内正規品 メーカー30日保証付 Agrado (Air13 Pro13 A1706/1708/1989/1932/2159)Finderのサイドバーに常にホームディレクトリが表示されるようにする
Finder/環境設定/サイドバー/サイドバーに表示する項目
「Finder(青と白2色の顔アイコンです)」を開いてから、画面上右端の「Finder」をクリックしてから「サイドバー/サイドバーに表示する項目」から「ホームディレクトリ」（家アイコンです。ご自身のユーザー名になっています）にチェックを入れます。すると、Finderのサイドバーに常にホームディレクトリが表示されるようになります。デフォルトで表示されるようになっていないのが不思議です。
ホームディレクトリ直下に「dev」ディレクトリを作成
Finderのサイドバーにホームディレクトリが表示されるようになったので、そのままホームディレクトリに開発用のディレクトリを作成します。私はホームディレクトリ直下に「dev」というディレクトリを作成して、そこに全てのプロジェクトを入れています。
ちなみに、以前はホームディレクトリ直下に「Stock」というディレクトリも作り、そこに開発と直接関係のない資料やファイル等を入れるようにしていたのですが、現在はそれらは全てicloud上で管理するようにしました。Launchpadを整理
まず、「その他」フォルダは最も使用頻度が低いので、最上段左端に設置します。
そして、頻繁に使用するアプリ以外（すなわち9割のアプリ）を「その他」フォルダにまとめて入れてしまいます（削除ではないのは、Macにデフォルトで入っているアプリを削除するのは多少面倒だからです）。
アプリ
各種アプリを入れていきます。ちなみに、Macにアプリをダウンロードする際のブラウザはSafariを使用すると最もスムーズだと思います。ハードウェアに合わせて開発されているので当たり前ですね。
Chrome
必須なので脳死で入れましょう。
ただし、個人的には検証ツールでHTML・CSSをチェックする際はFirefoxが最も使いやすいです。また、ブラウジング等普段使いにもFirefoxやBraveといったブラウザの方が使いやすいです。
しかしそれでもChromeは必須なのは、Nuxt.jsやGastby.js等でホットサーバーを立ち上げる際は基本的にChromeを使うべきだからです。例えば、以前Nuxt.jsをBraveブラウザ上で立ち上げた際に謎のエラーが発生して数時間溶かしたことがあったのですが、原因がBraveブラウザのAd Block機能がNuxt.jsの一部をブロックしていることでした。
現在はデフォルトではChromeでホットサーバーを立ち上げて、HTML・CSSのエラーを特定する際をFirefoxを使うようにしています。Firefox
好みですが、ブラウザアプリは2つあった方が何かと効率的です（Safariは検証ツールがないので使わない）。
ブラウザの選択肢も数多くありますが、個人的にはFirefoxが最も優れていると思います。特に検証ツールでHTML・CSSをチェックする際はFirefoxだと秒でエラー箇所を特定できます。VSCode
テキストエディタも選択肢が数多くありますが、もはやVS Codeがデファクトスタンダートではないでしょうか。
VS codeのカスタマイズは開発環境を構築してから行うと効率が良いので、まずはインストールするだけです。DeepL
人類史を塗り替えるほど高性能な翻訳ツールです(国内でも、翻訳の仕事が実際になくなり始めています)。
ブラウザからも利用できますが、あまりに頻繁に使うのでアプリを入れました。
英語のドキュメントを読む際や、外国人エンジニアとやり取りする際に非常に便利です。インストールが終わったら、Deep Lを起動して、その指示に従い画像のようにDeep Lにコンピュータの制御を確認してください。すると、テキストを選択してから「Command + C」を二回打つと即座にDeep Lが選択箇所を翻訳してくれます。
Discord
国内の開発者コミュニティはSlackばかりですが、世界では基本的にDiscordが主流です。
おすすめのチャンネルも貼っておきます。
- Nuxt.js
- Vue.js
- Vuetify
- Gastby.jsそして、先に紹介したDeepLとDiscordを組み合わせたときの威力がすごい。
DeepL×Discordのコンボでかなりエンジニアとしての地力が上がりました。僕にとってDiscordはオアシスなので本当は教えたくないですが・・・。Spotify
元々Apple Musicを２年間使っていて、Amazon Prime Music
また、地味にMac上での音楽ファイルの管理にも今まで工数が取られていました。数年悩んだ末に辿り着いた結論は、「そもそもローカルで音楽ファイルを管理するべきではない」です。人生の中で馬鹿にならない時間が浮くので、Spotify導入はおすすめです。
Figma
デザインツールです。デザイナーの方からワイヤーフレーム頂く時にFigmaが最も多いです。頻繁に確認するので、アプリをインストールしました。
ただし、自身でワイヤーフレーム作るときはCanva使っています。Canvaは圧倒的に速く作れるし、学習コストも低いのでおすすめです。Messanger
仕事や準仕事の連絡は、Messangerが最も多いと思います。
リファラルで案件を繋いでもらったり、投資家の方を紹介してもらう時等に重宝しています。
日本で主流なメッセンジャーアプリはPCからだと使いづらいことが多いですが、Messangerは使いやすいですね。スマホが普及する前からのサービスだからでしょうか。Zoom
Covid19（コロナウイルス感染症）収束の見通しも経たない中、Zoomは必須です。
ビデオ通話アプリの中でZoomが特に優れているということもないと思うのですが、一度国内で最もメジャーになってしまった地位はそう簡単に覆らないと思います。開発環境構築
Command Line Tools for XCodeをインストール
MacOSでHomebrewやgitを使うには、Command Line Tools for XCodeが必要です（紛らわしいですが、iPhoneアプリ開発のための統合環境「XCode」とはイコールの関係ではありません）。
単体でインストール※することも可能ですが、gitを使おうとするとメッセージウィンドウが表示されるので、その指示に従うのが最も簡単で確実です。
git --versionとターミナルから入力すると、「git使うにはCommand Line Tools for XCodeが必要だよ〜」というメッセージと共に、下記のようなウィンドウが表示されるはずです。
Command Line Tools for XCodeは容量が大きく、優良なWifi環境下でもインストールに数十分かかるので、Command Line Tools for XCode単体でのインストールを勧めます。私の失敗談ですが、VS codeからgit拡張機能とまとめてCommand Line Tools for XCodeをインストールしようとしたら、重すぎてインストールが始まっていないと錯覚してしまいました。
※CUIでインストールする場合は
xcode-select --installです。gitをインストール
Command Line Tools for XCodeがインストールできたら、そのままgitも使えるようになっているはずです。
git --versionで確認してください。
gitのバージョンが表示された方は、ログインに移ります。
下記コマンドで自身がgitに登録しているメールアドレスとユーザー名を入力してください。
git config --global user.email "hogehoge@gmail.co,"
`git config --global user.name "hogehoge"もしCommand Line Tools for XCodeをインストールしてもgitが使えない場合は、後述のhomebrewをインストールしてから
brew install gitを入力してください。`JavaScript ES6の開発環境
homebrew, nodebrew, node.jsをまとめてインストールします。
ProgateさんのES6の開発環境を用意しよう！（macOS）がこれ以上ないほど分かりやすいので、是非参考にしてください。環境構築系はProgateの記事（「レッスン」とは別のコンテンツです）が素晴らしいです。homebrewをインストール
homebrewがインストールされているか確認します。
brew -vインストールされてなかったら
/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
と入力します。
途中でEnterキーを押してください。インストールが終了したら再度
brew -vで確認しましょう。homebrewのバージョンが表示されたらOKです。nodebrewをインストール
brew install nodebrew
と入力して、インストールが終了したら
nodebrew -v
で確認してください。最後に「nodebrew use v 〜」が表示されたらOKです。node.jsをインストール
echo $SHELL
と入力して、実行結果が /bin/zsh の場合、以下のコマンドを実行してください。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc source ~/.zshrc※Mac OS Catalinaからデフォルトはzshのはずです。
インストールの準備ができたら以下の3つのコマンドを1つずつ順番に実行します。
nodebrew setup
nodebrew install-binary stable
nodebrew use stableインストールが終了したら最後に
node -v
で確認しましょう。「v14.2.0」のように表示されたらOKです。yarn
npmよりyarnの方が速いので、なるべくyarnを使うことをおすすめします。ただし、共同開発の場合はそのプロジェクトに合わせるのが無難です。
homebrewを使ってインストールします。
brew install yarnインストールが成功しているかどうか確認します。
yarn --version
「1.22.4」のように表示されたらOKです。Vue.js CLIをインストール
VueやNuxtを使う方はインストールしましょう。
yarnを使ってインストールします。
yarn global add @vue/cli一応最新のバージョンにアップグレードしておきます。
yarn global upgrade --latest @vue/cliインストールが成功しているかどうか確認します。
vue -V
「@vue/cli 4.3.1」のように表示されていたらOKです。Gastby.js CLIをインストール
Gastby.jsはWebメディアやブログを構築する際に便利なReactベースのフレームワークです。Vue, Nuxt, Hugo, Wordpress, Vuepress等一通り触りましたが、一番お気に入りです。
公式ドキュメントがnpmなので、npmを使ってダウンロードします。
npm install -g gatsby-cliインストールできている確認します。
gatsby -v
「Gatsby CLI version: 2.12.21」のように表示されていたらOKです。Hugo CLIをインストール
HugoはWebメディアやブログを構築する際に便利なGo言語ベースのフレームワークです。
Wordpressのようなテーマが豊富にあるので、こちらも使いやすいです。homebrewを使ってインストールします。
brew install hugoContentful
Contentfulは今世界で最もメジャーなHeadless CMSです。
色々な方法で扱えるのですが、個人的にはCommand Lineから操作するのが最もしっくりくるので、そのために必要なcliをインストールしています。
yarn global add contentful-cliインストールできている確認します。
contentful -v
「1.3.31」のように表示されていたらOKです。VS Codeをカスタマイズ
まずは日本語化
拡張機能からJapanese Language Packをインストールしましょう。
必須拡張機能を追加
こちらの記事(Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット)からさらに絞り込みました。
また、より詳しい設定の手順等はそちらの記事をご参照ください。GitLens — Git supercharged
VS Codeから直接、git操作が簡単にできるようになります。
エンジニアライフが一変するほど便利な拡張機能です。
今までは義務感でcommitしていたのですが、今はcommitメッセージを書くのが楽しくて仕方ないです。
git pushやgit pullもまばたきするより簡単です。Auto rename tag
ペアとなるHTMLタグを自動でrenameしてくれます。
Auto close tag
HTMLの終了タグを自動で追加してくれます。
brackets pair colorizer
カッコ毎に色を分けてハイライトしてくれます。こちらを入れてから、VueやNuxtで(){}のネストを多用しても混乱することがなくなりました
Vetur
選択したコンポーネントやファイル名について、「Vueファイルのどこで定義されたか」や「定義しているコード」を表示してくれます。また、どこでも定義されていないのに使われている変数名を特定するのにも役立ちます。
JavaScript(ES6)
JavaScript(ES6) 用のSnippets拡張機能です。
Snippetsとはよく使うコードを自動で予測・保管する機能のことです。コードを一文字一文字全て書かなくても良いのは本当に楽ですし、コードのミスも減ります!open in brawser
HTMLファイルをブラウザで開けるようになります。
partial diff
コードの比較が圧倒的にしやすくなります。特にクリップボードから比較できるのが非常に便利です（それまでは比較のためだけにファイルを一時的に作成したりしていました・・・）。
vuetify vscode
Vuetify用のSnippets拡張機能。
ES lint
コードを強力に整形してくれます。必須です。
npm
npp用の補助ツール。一応入れています。
VS Code基本設定を変更
下記のように設定しています。こちらはおそらく今後変えることはないです。
Files: Auto Save = AfterDelay
Files: Auto Save Delay = 1000
Fontsize = 14
TabSize = 2
Rendor = white Space All
Editor: Word Wrap = on付録
Macに入れなくなったアプリ
デジタルでもミニマリストになるべきだと思っていて、頻繁に使うもの以外はなるべくアプリとして入れないようにすることをおすすめします。
参考までに、「過去にMacに入れていたが今は入れなくなったもの」を列挙します。Kindle
MacのKindleアプリはWindows版と比べられないほど優れていて感動しました。しかし、そもそもPCから電子書籍読まないなと。雑誌等誌面が大きめのものならMacで読むと良いかなとも思ったのですが、電子書籍リーダーと雑誌の相性が致命的に悪いのでダメでした。
余談ですが、Kindle UnlimitedBrave
JavaScriptの生みの親にして、Firefox開発の初期メンバーでもあるブレダンアイクが現在開発しているブラウザです。自動であらゆる広告を強力にブロックしてくれますし、速度もChromeより早いです。また、UIがChromeと酷似しているので（そもそもChroniumベース）、慣れた感覚のまま使えます。使っているだけでtip（独自のトークン）が自動発効されるのもユニークでした。
一時期メインで使っていたんですが、Mac移行を機に止めました。
まず、開発用途で使うと未知のバグが発生する可能性があります（特にNuxt.js)。
そして何より、ブラウザが3つもあるとどれを使うか迷って小さな意思決定コストが生じていたんですね。
FirefoxとChromeの二刀流で運用するのが最適かと思います。Dropbox
iCloudの方が使いやすいです。
ごく稀に昔Dropboxに入れたファイルを参照したくなる時ありますが、その時はブラウザから使えば良いなと。Evernote
デフォルトのメモアプリの方が使いやすいです。
ごく稀に昔Evernoteに入れたファイルを参照したくなる時ありますが、その時はブラウザから使えば良いなと。BEAR
デフォルトのメモアプリの方が使いやすいです。あとクラウド管理もしづらいのがネック。
LINE
MacからLINE見れると便利なんですが、PC版はとにかく使い勝手が悪いです。
そもそも昨今連絡ツールが増えすぎでストレスになっているので、意識的にLINEを使う頻度を減らしています。Microsoft Office各種
GoogleスプレットシートやPagesの方が使いやすいです。
以前はまとめて入れていましたが、全く使わなくなりました。職場によってはまだ必要かもしれませんね。Number
Excelより使いやすくて感動しましたが、今はGoogleスプレットシートに統一しました。
KEYNOTE
PowerPointより使いやすいですが、そもそもスライドをなるべく使わないようになりました。Amazonではスライドを禁止にしているのは有名な話ですが、やはり生産性が落ちると思います。
今は滅多にないですが、スライドを作るとしたらCanvaを使っています。テンプレートが豊富なので、爆速&脳死でそこそこのクオリティのものを作れます。TODOIST
デフォルトのリマインダーアプリの方が使いやすいですし、そもそも個人用のタスクアプリが不要だと思います。
直近数時間以内のタスクは紙のメモ、それ以降はカレンダーアプリで管理していますが、生産性が上がった実感があります。TRELLO
デフォルトのリマインダーアプリの方が使いやすいですし、そもそも個人用のタスクアプリが不要だと思います。
直近数時間以内のタスクは紙のメモ、それ以降はカレンダーアプリで管理していますが、生産性が上がった実感があります。プロジェクトの管理ツールとしても、githubの方が使いやすいと感じます。
XMind
最も代表的なマインドマップアプリです。
マインドマップアプリ全般に言えますが、サクサク感がなく重いです。
マインドマップは紙のノートでラフに作るのが最も効率良いです。Mindly
マインドマップアプリ（有料）です。UIは綺麗なのですが、細かいところに手が届きません。
マインドマップは紙のノートでラフに作るのが最も効率良いです。参考文献
直接の関係はないですが、思想的には下記の本から強く影響を受けています。おすすめです。
デジタル・ミニマリスト 本当に大切なことに集中する
内容全部神です。逆説的ですが、エンジニアこそデジタル・ミニマリストを取り入れるべきだと思います。
スマホをやめたら生まれ変わった
こちらの本に「スマートフォンのホーム画面上のアイコンは30個以内にする」というルールが紹介されていて、Macでも似たような考え方を適用できるなと。
- 投稿日：2020-05-17T15:11:32+09:00
【全部入り】フロントエンドエンジニアのMac初期設定
はじめに
この記事の対象者
- Macユーザー
- 最適なMac設定を模索しているWeb系エンジニア（※フロントメイン）
環境
- MacBook Pro
- プロセッサ: 3.1 GHz デュアルコアIntel Core i5
- メモリ: 16 GB 2133 MHz LPDDR3
- Mac OS Catalina バージョン10.15.4
なぜこの記事を書いたのか
まず一つ目はMacの初期設定をする機会が意外に多く、しかもそれに馬鹿にならない工数を取られていると気付いたからです。 昨年度は2社からそれぞれMacBook Air
二つ目は、自分のMacの設定がこれで良いのか気になったです。Macは毎日使うものであり、もはや自分の身体の延長といっても過言ではないので、可能な限り最適化したいです。なので、是非この記事をお読み頂けた方々のご意見もコメントで教えて頂ければ幸いです。
全体の流れ
こんな感じで進めると効率が良いと思います。
人間はJavaScriptと違ってマルチスレッドなので、インストールの待ち時間を上手に利用して並行して作業を進めましょう。
- Macを初期化する(新品の場合は省略)
- MacOSが最新か確認(新品の場合は省略)
- まず最初にMacの設定をカスタマイズ
- (↑と並行して)アプリをダウンロード
- 環境構築
- (↑と並行して)VS codeをカスタマイズ
- Launchpadを整理
Macの設定をカスタマイズ
Mac爆速化
カーソル移動速度をマックスに
「システム環境設定（歯車アイコンです）/トラックパッド」 と移動して、「軌跡の速さ」のバーを右端に引っ張って最大速度にします。仕事できる人はみんなMaxにしているイメージです。
キーボードをMaxに
「システム環境設定（歯車アイコンです）/キーボード」 と移動して、「キーのリピート」のバーを右端に引っ張って最大速度にします。及び、「リピート入力認識までの時間」のバーを右端に引っ張って最も短くします。特に後者の「リピート入力認識までの時間」はターミナル操作の時に非常にラクにな流ので、強く勧めます。
目に優しくする
実は脳は疲れません。デスクワークをしていて「疲れた」と感じるのは、主に、「目が疲れている」のが原因です。
特にエンジニアは家族や恋人の顔よりディスプレイを見る時間の方が長いと言っても過言ではないでしょう。
よって、PCやスマートフォンの設定は最大限目に優しい環境にするのがおすすめです。常にダークモードにする
「システム環境設定アプリ（歯車アイコンです）/一般」と移動して、「外観モード: ダーク」を選択します。以前は「オート」にしていたのですが、常にダークモードで統一することで作業時間が伸びました。
常にNight Shiftを最大適用する
「システム環境設定アプリ（歯車アイコンです）/ディスプレイ」と移動して、「Night Shift」の各項目を下記のように設定することで24時間常に適用されるようにします。
スケジュール: カスタム
開始: 4:00
終了: 3:59
色温度: 右端まで引っ張って最大限「暖かく」する
NightShiftは物凄く目の負担が減るので、24時間の導入を強くお勧めします。
最初は黄色ががった画面に驚くかもしれませんが、数十分で慣れます。ただし、デザイナーの方は細かい色彩感覚が重要なので、話が違うかもしれません。フロントエンドエンジニアとしてはNightShift適用下でもCSS書くのに不便を覚えたことはありません。非光沢の画面保護シールを貼る
Macには必ず画面保護シールを貼ることをお勧めします。
指紋等汚れが付きにくくなって綺麗なディスプレイを保てるのと、画面光を抑えるためです。特にアンチグレア（非光沢）のシールちなみにブルーライトカットの方はそれ単体での効果を実感できたことがないので、特に期待していません。
極上 ブルーライトカット 超高精細アンチグレア Macbook Air 2020 液晶保護フィルム 国内正規品 メーカー30日保証付 Agrado (Air13 Pro13 A1706/1708/1989/1932/2159)Finderのサイドバーに常にホームディレクトリが表示されるようにする
Finder/環境設定/サイドバー/サイドバーに表示する項目
「Finder(青と白2色の顔アイコンです)」を開いてから、画面上右端の「Finder」をクリックしてから「サイドバー/サイドバーに表示する項目」から「ホームディレクトリ」（家アイコンです。ご自身のユーザー名になっています）にチェックを入れます。すると、Finderのサイドバーに常にホームディレクトリが表示されるようになります。デフォルトで表示されるようになっていないのが不思議です。
ホームディレクトリ直下に「dev」ディレクトリを作成
Finderのサイドバーにホームディレクトリが表示されるようになったので、そのままホームディレクトリに開発用のディレクトリを作成します。私はホームディレクトリ直下に「dev」というディレクトリを作成して、そこに全てのプロジェクトを入れています。
ちなみに、以前はホームディレクトリ直下に「Stock」というディレクトリも作り、そこに開発と直接関係のない資料やファイル等を入れるようにしていたのですが、現在はそれらは全てicloud上で管理するようにしました。Launchpadを整理
まず、「その他」フォルダは最も使用頻度が低いので、最上段左端に設置します。
そして、頻繁に使用するアプリ以外（すなわち9割のアプリ）を「その他」フォルダにまとめて入れてしまいます（削除ではないのは、Macにデフォルトで入っているアプリを削除するのは多少面倒だからです）。
アプリ
各種アプリを入れていきます。ちなみに、Macにアプリをダウンロードする際のブラウザはSafariを使用すると最もスムーズだと思います。ハードウェアに合わせて開発されているので当たり前ですね。
Chrome
必須なので脳死で入れましょう。
ただし、個人的には検証ツールでHTML・CSSをチェックする際はFirefoxが最も使いやすいです。また、ブラウジング等普段使いにもFirefoxやBraveといったブラウザの方が使いやすいです。
しかしそれでもChromeは必須なのは、Nuxt.jsやGastby.js等でホットサーバーを立ち上げる際は基本的にChromeを使うべきだからです。例えば、以前Nuxt.jsをBraveブラウザ上で立ち上げた際に謎のエラーが発生して数時間溶かしたことがあったのですが、原因がBraveブラウザのAd Block機能がNuxt.jsの一部をブロックしていることでした。
現在はデフォルトではChromeでホットサーバーを立ち上げて、HTML・CSSのエラーを特定する際をFirefoxを使うようにしています。Firefox
好みですが、ブラウザアプリは2つあった方が何かと効率的です（Safariは検証ツールがないので使わない）。
ブラウザの選択肢も数多くありますが、個人的にはFirefoxが最も優れていると思います。特に検証ツールでHTML・CSSをチェックする際はFirefoxだと秒でエラー箇所を特定できます。VSCode
テキストエディタも選択肢が数多くありますが、もはやVS Codeがデファクトスタンダートではないでしょうか。
VS codeのカスタマイズは開発環境を構築してから行うと効率が良いので、まずはインストールするだけです。DeepL
人類史を塗り替えるほど高性能な翻訳ツールです(国内でも、翻訳の仕事が実際になくなり始めています)。
ブラウザからも利用できますが、あまりに頻繁に使うのでアプリを入れました。
英語のドキュメントを読む際や、外国人エンジニアとやり取りする際に非常に便利です。インストールが終わったら、Deep Lを起動して、その指示に従い画像のようにDeep Lにコンピュータの制御を確認してください。すると、テキストを選択してから「Command + C」を二回打つと即座にDeep Lが選択箇所を翻訳してくれます。
Discord
国内の開発者コミュニティはSlackばかりですが、世界では基本的にDiscordが主流です。
おすすめのチャンネルも貼っておきます。
- Nuxt.js
- Vue.js
- Vuetify
- Gastby.jsそして、先に紹介したDeepLとDiscordを組み合わせたときの威力がすごい。
DeepL×Discordのコンボでかなりエンジニアとしての地力が上がりました。僕にとってDiscordはオアシスなので本当は教えたくないですが・・・。Spotify
元々Apple Musicを２年間使っていて、Amazon Prime Music
また、地味にMac上での音楽ファイルの管理にも今まで工数が取られていました。数年悩んだ末に辿り着いた結論は、「そもそもローカルで音楽ファイルを管理するべきではない」です。人生の中で馬鹿にならない時間が浮くので、Spotify導入はおすすめです。
Figma
デザインツールです。デザイナーの方からワイヤーフレーム頂く時にFigmaが最も多いです。頻繁に確認するので、アプリをインストールしました。
ただし、自身でワイヤーフレーム作るときはCanva使っています。Canvaは圧倒的に速く作れるし、学習コストも低いのでおすすめです。Messanger
仕事や準仕事の連絡は、Messangerが最も多いと思います。
リファラルで案件を繋いでもらったり、投資家の方を紹介してもらう時等に重宝しています。
日本で主流なメッセンジャーアプリはPCからだと使いづらいことが多いですが、Messangerは使いやすいですね。スマホが普及する前からのサービスだからでしょうか。Zoom
Covid19（コロナウイルス感染症）収束の見通しも経たない中、Zoomは必須です。
ビデオ通話アプリの中でZoomが特に優れているということもないと思うのですが、一度国内で最もメジャーになってしまった地位はそう簡単に覆らないと思います。開発環境構築
Command Line Tools for XCodeをインストール
MacOSでHomebrewやgitを使うには、Command Line Tools for XCodeが必要です（紛らわしいですが、iPhoneアプリ開発のための統合環境「XCode」とはイコールの関係ではありません）。
単体でインストール※することも可能ですが、gitを使おうとするとメッセージウィンドウが表示されるので、その指示に従うのが最も簡単で確実です。
git --versionとターミナルから入力すると、「git使うにはCommand Line Tools for XCodeが必要だよ〜」というメッセージと共に、下記のようなウィンドウが表示されるはずです。
Command Line Tools for XCodeは容量が大きく、優良なWifi環境下でもインストールに数十分かかるので、Command Line Tools for XCode単体でのインストールを勧めます。私の失敗談ですが、VS codeからgit拡張機能とまとめてCommand Line Tools for XCodeをインストールしようとしたら、重すぎてインストールが始まっていないと錯覚してしまいました。
※CUIでインストールする場合は
xcode-select --installです。gitをインストール
Command Line Tools for XCodeがインストールできたら、そのままgitも使えるようになっているはずです。
git --versionで確認してください。
gitのバージョンが表示された方は、ログインに移ります。
下記コマンドで自身がgitに登録しているメールアドレスとユーザー名を入力してください。
git config --global user.email "hogehoge@gmail.co,"
`git config --global user.name "hogehoge"もしCommand Line Tools for XCodeをインストールしてもgitが使えない場合は、後述のhomebrewをインストールしてから
brew install gitを入力してください。`JavaScript ES6の開発環境
homebrew, nodebrew, node.jsをまとめてインストールします。
ProgateさんのES6の開発環境を用意しよう！（macOS）がこれ以上ないほど分かりやすいので、是非参考にしてください。環境構築系はProgateの記事（「レッスン」とは別のコンテンツです）が素晴らしいです。homebrewをインストール
homebrewがインストールされているか確認します。
brew -vインストールされてなかったら
/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
と入力します。
途中でEnterキーを押してください。インストールが終了したら再度
brew -vで確認しましょう。homebrewのバージョンが表示されたらOKです。nodebrewをインストール
brew install nodebrew
と入力して、インストールが終了したら
nodebrew -v
で確認してください。最後に「nodebrew use v 〜」が表示されたらOKです。node.jsをインストール
echo $SHELL
と入力して、実行結果が /bin/zsh の場合、以下のコマンドを実行してください。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc source ~/.zshrc※Mac OS Catalinaからデフォルトはzshのはずです。
インストールの準備ができたら以下の3つのコマンドを1つずつ順番に実行します。
nodebrew setup
nodebrew install-binary stable
nodebrew use stableインストールが終了したら最後に
node -v
で確認しましょう。「v14.2.0」のように表示されたらOKです。yarn
npmよりyarnの方が速いので、なるべくyarnを使うことをおすすめします。ただし、共同開発の場合はそのプロジェクトに合わせるのが無難です。
homebrewを使ってインストールします。
brew install yarnインストールが成功しているかどうか確認します。
yarn --version
「1.22.4」のように表示されたらOKです。Vue.js CLIをインストール
VueやNuxtを使う方はインストールしましょう。
yarnを使ってインストールします。
yarn global add @vue/cli一応最新のバージョンにアップグレードしておきます。
yarn global upgrade --latest @vue/cliインストールが成功しているかどうか確認します。
vue -V
「@vue/cli 4.3.1」のように表示されていたらOKです。Gastby.js CLIをインストール
Gastby.jsはWebメディアやブログを構築する際に便利なReactベースのフレームワークです。Vue, Nuxt, Hugo, Wordpress, Vuepress等一通り触りましたが、一番お気に入りです。
公式ドキュメントがnpmなので、npmを使ってダウンロードします。
npm install -g gatsby-cliインストールできている確認します。
gatsby -v
「Gatsby CLI version: 2.12.21」のように表示されていたらOKです。Hugo CLIをインストール
HugoはWebメディアやブログを構築する際に便利なGo言語ベースのフレームワークです。
Wordpressのようなテーマが豊富にあるので、こちらも使いやすいです。homebrewを使ってインストールします。
brew install hugoContentful
Contentfulは今世界で最もメジャーなHeadless CMSです。
色々な方法で扱えるのですが、個人的にはCommand Lineから操作するのが最もしっくりくるので、そのために必要なcliをインストールしています。
yarn global add contentful-cliインストールできている確認します。
contentful -v
「1.3.31」のように表示されていたらOKです。VS Codeをカスタマイズ
まずは日本語化
拡張機能からJapanese Language Packをインストールしましょう。
必須拡張機能を追加
こちらの記事(Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット)からさらに絞り込みました。
また、より詳しい設定の手順等はそちらの記事をご参照ください。GitLens — Git supercharged
VS Codeから直接、git操作が簡単にできるようになります。
エンジニアライフが一変するほど便利な拡張機能です。
今までは義務感でcommitしていたのですが、今はcommitメッセージを書くのが楽しくて仕方ないです。
git pushやgit pullもまばたきするより簡単です。Auto rename tag
ペアとなるHTMLタグを自動でrenameしてくれます。
Auto close tag
HTMLの終了タグを自動で追加してくれます。
brackets pair colorizer
カッコ毎に色を分けてハイライトしてくれます。こちらを入れてから、VueやNuxtで(){}のネストを多用しても混乱することがなくなりました
Vetur
選択したコンポーネントやファイル名について、「Vueファイルのどこで定義されたか」や「定義しているコード」を表示してくれます。また、どこでも定義されていないのに使われている変数名を特定するのにも役立ちます。
JavaScript(ES6)
JavaScript(ES6) 用のSnippets拡張機能です。
Snippetsとはよく使うコードを自動で予測・保管する機能のことです。コードを一文字一文字全て書かなくても良いのは本当に楽ですし、コードのミスも減ります!open in brawser
HTMLファイルをブラウザで開けるようになります。
partial diff
コードの比較が圧倒的にしやすくなります。特にクリップボードから比較できるのが非常に便利です（それまでは比較のためだけにファイルを一時的に作成したりしていました・・・）。
vuetify vscode
Vuetify用のSnippets拡張機能。
ES lint
コードを強力に整形してくれます。必須です。
npm
npp用の補助ツール。一応入れています。
VS Code基本設定を変更
下記のように設定しています。こちらはおそらく今後変えることはないです。
Files: Auto Save = AfterDelay
Files: Auto Save Delay = 1000
Fontsize = 14
TabSize = 2
Rendor = white Space All
Editor: Word Wrap = on付録
Macに入れなくなったアプリ
デジタルでもミニマリストになるべきだと思っていて、頻繁に使うもの以外はなるべくアプリとして入れないようにすることをおすすめします。
参考までに、「過去にMacに入れていたが今は入れなくなったもの」を列挙します。Kindle
MacのKindleアプリはWindows版と比べられないほど優れていて感動しました。しかし、そもそもPCから電子書籍読まないなと。雑誌等誌面が大きめのものならMacで読むと良いかなとも思ったのですが、電子書籍リーダーと雑誌の相性が致命的に悪いのでダメでした。
余談ですが、Kindle UnlimitedBrave
JavaScriptの生みの親にして、Firefox開発の初期メンバーでもあるブレダンアイクが現在開発しているブラウザです。自動であらゆる広告を強力にブロックしてくれますし、速度もChromeより早いです。また、UIがChromeと酷似しているので（そもそもChroniumベース）、慣れた感覚のまま使えます。使っているだけでtip（独自のトークン）が自動発効されるのもユニークでした。
一時期メインで使っていたんですが、Mac移行を機に止めました。
まず、開発用途で使うと未知のバグが発生する可能性があります（特にNuxt.js)。
そして何より、ブラウザが3つもあるとどれを使うか迷って小さな意思決定コストが生じていたんですね。
FirefoxとChromeの二刀流で運用するのが最適かと思います。Dropbox
iCloudの方が使いやすいです。
ごく稀に昔Dropboxに入れたファイルを参照したくなる時ありますが、その時はブラウザから使えば良いなと。Evernote
デフォルトのメモアプリの方が使いやすいです。
ごく稀に昔Evernoteに入れたファイルを参照したくなる時ありますが、その時はブラウザから使えば良いなと。BEAR
デフォルトのメモアプリの方が使いやすいです。あとクラウド管理もしづらいのがネック。
LINE
MacからLINE見れると便利なんですが、PC版はとにかく使い勝手が悪いです。
そもそも昨今連絡ツールが増えすぎでストレスになっているので、意識的にLINEを使う頻度を減らしています。Microsoft Office各種
GoogleスプレットシートやPagesの方が使いやすいです。
以前はまとめて入れていましたが、全く使わなくなりました。職場によってはまだ必要かもしれませんね。Number
Excelより使いやすくて感動しましたが、今はGoogleスプレットシートに統一しました。
KEYNOTE
PowerPointより使いやすいですが、そもそもスライドをなるべく使わないようになりました。Amazonではスライドを禁止にしているのは有名な話ですが、やはり生産性が落ちると思います。
今は滅多にないですが、スライドを作るとしたらCanvaを使っています。テンプレートが豊富なので、爆速&脳死でそこそこのクオリティのものを作れます。TODOIST
デフォルトのリマインダーアプリの方が使いやすいですし、そもそも個人用のタスクアプリが不要だと思います。
直近数時間以内のタスクは紙のメモ、それ以降はカレンダーアプリで管理していますが、生産性が上がった実感があります。TRELLO
デフォルトのリマインダーアプリの方が使いやすいですし、そもそも個人用のタスクアプリが不要だと思います。
直近数時間以内のタスクは紙のメモ、それ以降はカレンダーアプリで管理していますが、生産性が上がった実感があります。プロジェクトの管理ツールとしても、githubの方が使いやすいと感じます。
XMind
最も代表的なマインドマップアプリです。
マインドマップアプリ全般に言えますが、サクサク感がなく重いです。
マインドマップは紙のノートでラフに作るのが最も効率良いです。Mindly
マインドマップアプリ（有料）です。UIは綺麗なのですが、細かいところに手が届きません。
マインドマップは紙のノートでラフに作るのが最も効率良いです。参考文献
直接の関係はないですが、思想的には下記の本から強く影響を受けています。おすすめです。
デジタル・ミニマリスト 本当に大切なことに集中する
内容全部神です。逆説的ですが、エンジニアこそデジタル・ミニマリストを取り入れるべきだと思います。
スマホをやめたら生まれ変わった
こちらの本に「スマートフォンのホーム画面上のアイコンは30個以内にする」というルールが紹介されていて、Macでも似たような考え方を適用できるなと。
- 投稿日：2020-05-17T11:45:18+09:00
macのターミナルを変えた話
参考
https://qiita.com/kinchiki/items/57e9391128d07819c321
自分がやったことのメモ
ターミナルのテーマ
"Iceberg"を導入した。
というかすでに導入してたっぽい。シェルをbashからzshへ変更
macにデフォルトで入っている
/bin/zshではなく、
ひとまず、最新を導入した。(1) zshをインストール
$ brew update $ brew install zsh(2)
/etc/shellsにzshのパス/usr/local/bin/zshを追加。/bin/bash /bin/csh /bin/ksh /bin/sh /bin/tcsh /bin/zsh # 追加 /usr/local/bin/zsh(3) ログインシェルを変更
$ chsh -s /usr/local/bin/zshプロンプトを変更
(1) 以下のコマンド２つを実行
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto" $ setopt EXTENDED_GLOB for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}" done(2)
zstyle ':prezto:module:prompt' theme 'sorin'のthemeの箇所をpureにします。
:prezto:module:promptという文字列をエディタで検索して、Promptの設定場所を探してください。~/.zpreztorc# # Prompt # # Set the prompt theme to load. # Setting it to 'random' loads a random theme. # Auto set to 'off' on dumb terminals. zstyle ':prezto:module:prompt' theme 'pure'(3)
'syntax-highlighting' \と'autosuggestions' \を'prompt' \の上に記載する# Set the Prezto modules to load (browse modules). # The order matters. zstyle ':prezto:load' pmodule \ 'environment' \ 'terminal' \ 'editor' \ 'history' \ 'directory' \ 'spectrum' \ 'utility' \ 'completion' \ 'syntax-highlighting' \ 'autosuggestions' \ 'prompt' \nodeを入れている場合
環境パスを通す
nodeが使えるように環境パスを通す。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profilezshを初めて使う場合に、nodeのバスが通っていないので、npmとか使えなくなるので通します。
zshの場合
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
- 投稿日：2020-05-17T11:40:41+09:00
[メモ]macOSをアップデートした時、ターミナルの表示がおかしくなる対処法
事象
macOSを
Mojave → Catalinaにアップデートした時、
ターミナルがうまく動かなかったので行ったことを示す.やったこと
1.シェルを
zh → bashに変更$ chsh -s /bin/bash2.下記のファイルをインストール
・git-prompt.sh
・git-completion.bash$ curl -o "/usr/local/etc/bash_completion.d/git-prompt.sh" https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh $ curl -o "/usr/local/etc/bash_completion.d/.git-completion.bash" https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash3..bashrcを編集
source /usr/local/etc/bash_completion.d/git-prompt.sh source /usr/local/etc/bash_completion.d/git-completion.bash GIT_PS1_SHOWDIRTYSTATE=true # default:cyan / root:red if [ $UID -eq 0 ]; then PS1='\[\033[31m\]\u@\h\[\033[00m\]:\[\033[01m\]\w\[\033[31m\]$(__git_ps1)\[\033[00m\]\\$ ' else PS1='\[\033[36m\]\u@\h\[\033[00m\]:\[\033[01m\]\w\[\033[31m\]$(__git_ps1)\[\033[00m\]\\$ ' fi # "-F":ディレクトリに"/"を表示 / "-G"でディレクトリを色表示 alias ls='ls -FG' alias ll='ls -alFG'メモ
.bash_profile
→ ログイン時に読み込まれるファイル.bashrc
→ bashを入力したときに読み込まれるファイル
- 投稿日：2020-05-17T10:44:48+09:00
ShellScript: rs（reshape）コマンドを利用し，場合分けなしで（ifを使わず）に中央値を求める．
要約
データを1列に並べる．ソートする．それぞれのデータを複製して2つずつにする．
rsで2列にする．1列目の最後データと2列目の頭のデータとの平均が中央値である．中央値を求める% cat test.csv \ | tr ',' '\n' # 1列に並べる | sort -n \ # 昇順に並べる | sed 'p' \ # 複製 | rs -t r 2 \ # 列方向2列 | awk '(NR==1){n1=$2}END{n2=$1; print (n1+n2)/2}' # 2つの数の平均はじめに
- 中央値の定義は以下[1]．
- 具体例1：5つの数（1, 2, 3, 4 ,5 ）の中央値は3．
- 具体例2：4つの数（1, 2, 3, 4）の中央値は2と3の平均の2.5．
awkなどを用いて簡単に求まるが，基本的には場合分けを要する[3][4][5]．- (1)データの個数を数える，(2)場合分けをする，という作業のため，パイプラインで左から右への処理をしづらく，煩わしく感ずるのだと思う[2]．
- 文字列を並べ替える
rsを利用して，左から右へのデータの流れで中央値を求めてみた．中央値（中央値、英: median）とは，代表値の一つで，有限個のデータを小さい順に並べたとき中央に位置する値．たとえば5人の人がいるとき，その5人の年齢の中央値は3番目に年寄りな人の年齢である．ただし，データが偶数個の場合は，中央に近い2つの値の算術平均をとる．（https://ja.wikipedia.org/wiki/%E4%B8%AD%E5%A4%AE%E5%80%A4
中央値 - Wikipedia）環境
- macOS: 10.15.4
- zsh: 5.7.1
準備
(0) 紙とペンを用いた方法．
9個（奇数個）の数の中央値の求める方法を考える．9個の数を小さい順に1列に紙に書く．1番小さい数と1番大きい数が重なるように紙を1回折る．紙を広げて折り目がついている数が中央値である．同様に，10個（偶数個）の数の場合を考える．折り目に最も近い2つの数の平均が中央値である．これと同じことを
rsを利用してやる．(1)
jotコマンドで練習用のデータを準備する．jot使用例．オプション-rで乱数を作成している．% jot -r 3 54 4 34(2)データを1列に並べる．
- jotコマンドでは勝手に1列に並ぶので省略．
- 通常は
trやsedで区切り文字を改行に置換して1列に並べる．置換を利用して1列に並べる．echo '1 2 3' | tr ' ' '\n' 1 2 3(3) 数を昇順に並べる．
sort -nを使う．- 例えば"11"を"1"と"1"との文字列ではなく，数値の"11"として読むのに，
-nが必要．% echo '1\n2\n11' 1 2 11 % echo '1\n2\n11' | sort 1 11 2 % echo '1\n2\n11' | sort -n 1 2 11(4) それぞれの数値を複製する．
sed 'p'を使う．sedのpコマンドは "print"の意味．pだけの場合，入力行をそのまま出力する．sedは全ての入力行を出力するというのがデフォルトの操作[7]．同じデータが2つ並ぶ必要はないので，通常は-nで入力行の自動出力を抑制する．今回はあえて-nをつけず，2つ並ばせる．% echo '1 2' | sed 'p' 1 2 1 2 % echo '1 2' | sed -n 'p' 1 2(5) 縦方向で2列にする．
rsを用いる．-tで縦方向にする．-Cで区切り文字を指定しない場合，スペース2個が区切り文字となる．r 2とすると，行指定なし，2列となる．% jot 5 | rs -t r 2 1 4 2 5 3(6) 1列目の最後の数と2列目の最初の数の平均をとる．
- 様々な方法が考えられる（下記）．
手順概要
- データを1列に並べる（
tr ' '\n')- 昇順に並べる（
sort -n）- 複製（
sed 'p'）- 列方向2列（
rs -t r 2）- 1列目の最後の数と2列目の最初の数との平均（
awkなど）．rsコマンドを利用して中央値を求める．
数値の個数が奇数の場合．
jot 5で1から5の数値を準備する．中央値は3．- 下記のように，1列目最後と2列目の最初の数値の平均で中央値が求まる．
%jot 5 | sort -n | sed 'p' | rs -t r 2 1 3 1 4 2 4 2 5 3 5数値の個数が偶数の場合．
jot 6で1から6の数値を準備する．中央値は3と4の平均の3.5．- 奇数の時と同じやり方，すなわち1列目最後と2列目最初の数の平均で中央値を求めえることができる．
- すなわち，"要素数を数える作業"と"偶奇の場合分け"とを回避できた．
%jot 6 | sort -n | sed 'p' | rs -t r 2 1 4 1 4 2 5 2 5 3 6 3 61列目の最後の数と2列目の最初の数を取り出して平均をとる．
awkを用いた方法．
- これが一番素直でなかろうか．
- 変数
n1とn2にそれぞれの数を代入し，ENDブロックで計算．- 以降は見通しを良くするため適宜改行する．
% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | awk '(NR==1){n1=$2}END{n2=$1;print "median: "(n1+n2)/2}' median: 3.5 # 結果必要な数だけ取り出して計算は他でする．
- 上記の
awkを用いた方法では変数に代入する際，視線はの動きは右から左である．- 今回このようなことを試みた動機としては，"左から右への流れのまま中央値を求めたい"であったので，変数に代入する際の右から左への動きがなんとなく嫌である．
- そこで，数値を取り出すだけして，計算は後で行う方法を考えた．
awkで2つの数を取り出す．
# awkを用いて必要な数だけ取り出す． % jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | awk '(NR==1){print $2}END{print $1}' 4 # 2列目の最初の数 3 # 1列目の最後の数sedで2つの数を取り出す．
- 上記の
awkの方法では(NR==1)で1行目の情報を得て，ENDブロックで最終行の情報を得ていて，非対象でなんとなく嫌である．- そこで，2列に並べた文字列をさらに行方向に線対称に回転させる（
tail -rまたはtac）．- さらに，
tr -sで区切り文字を改行に置換（-sは連続する文字を置換するする際に用いる）．すると1行目と最終行が目的の数となる．それをsedで取り出す[8]．% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | tail -r \ | tr -s ' ' '\n' \ | sed -n '1p;$p' 3 #結果 4 #結果取り出した2つの数を用いて計算する．
逆ポーランド記法
- 左から右の流れで計算できる方法，すなわち後置記法（逆ポーランド記法）を使ってみた．
- 逆ポーランド記法は
dcで行える．- 末尾の
pは"print"の意味らしい．- 小数点以下をどこまで表示するか（精度）を
kで指定せねばならないらしい．- 今回は0以上の整数のみを扱うので小数点第1位まで表示する．
dc使用例echo '1 2 + p' | dc 3 # 結果 % echo '1 2 + 2 / p' | dc 1 # 小数点以下が切り捨てられる． echo '1 2 + 1k 2 / p' | dc 1.5 # 1kオプションで小数点第一位まで表示された
- 取り出した2つの数の後ろに
+ 1k 2 / pを追加した文字列をdcコマンドにパイプで渡す．文字列の末尾に文字列を追加する．
- 様々な方法がある．例として以下を挙げる．
その1:<<()を用いる
% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | tail -r \ | tr -s ' ' '\n' \ | sed -n '1p;$p' \ | <<(echo '1k + 2 / p') | dc 3.5 #結果その2:ヒアストリング
<<<を用いる~~略~~ | <<< '+ 1k 2 / p' | dcその3:sedを用いる
- 最終行の末尾に文字列を追加する．
- sedの区切り文字/と割り算の/が同じでエラーがでる．前者を別の文字にするか，後者をバックスラッシュ\でエスケープする．~~略~~ | sed '$ s/^.*$/& + 1k 2 \/ p/' | dcその4:sed a（add）を用いる
-a（addの意味）を用いて最終行の下に行を追加．
- macのsed場合，aコマンドの後に改行が必要[9]．
- linuxのsedでは改行が不要のようである[10][11]．
- ただし，以下の記事を参考にしてやると，1行で書けた[[12]]．
（https://qiita.com/kkdd/items/725e53572bc69e4b51b7
sed による置換で改行\nを出力する - Qiita）~~略~~ | sed '$a \'$'\n + 1k 2 / p' | dc# MACのsedではaコマンドは通常は改行が必要 ~~略~~ | sed '$ a \ + 1k 2 / p'考察
中央値の求め方はしばしば話題になる．しかし，
ifを用いない方法は見かけなかった．そこで，今回やってみた．四分位数も同様の操作で求めることができる．ただし，四分位数は定義が複数あり，ややこしくなるため今回は扱わなかった．
awk + ifを用いた通常の方法と比較して，1.5倍時間がかかる．rsにどうしても時間がかかる．100万個のデータで約5秒要する．まとめ
rsを利用し，場合わけせずに中央値を求めた．参考
[1]https://ja.wikipedia.org/wiki/%E4%B8%AD%E5%A4%AE%E5%80%A4
中央値 - Wikipedia
[2]https://stackoverflow.com/questions/41750008/get-median-of-unsorted-array-in-one-line-of-bash
Get median of unsorted array in one line of BASH - Stack Overflow．
[3]https://orebibou.com/2016/03/linuxunix%E3%81%AE%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%A7%E5%B9%B3%E5%9D%87%E3%83%BB%E4%B8%AD%E5%A4%AE%E5%80%A4%E3%83%BB%E6%9C%80%E5%A4%A7%E3%83%BB%E6%9C%80%E5%B0%8F%E3%82%92%E6%B1%82/
Linux/UNIXのコンソールで平均・中央値・最大・最小を求める | 俺的備忘録 〜なんかいろいろ〜
[4]https://stackoverflow.com/questions/6166375/median-of-column-with-awk
bash - median of column with awk - Stack Overflow
[5]https://unix.stackexchange.com/questions/13731/is-there-a-way-to-get-the-min-max-median-and-average-of-a-list-of-numbers-in
bash - Is there a way to get the min, max, median, and average of a list of numbers in a single command? - Unix & Linux Stack Exchange
[6]https://kunst1080.hatenablog.com/entry/2014/02/15/180842
jotコマンドについて調べてみた - くんすとの備忘録
[7]Dale Dougherty, Arnold Robbins,1997年，sed & awkプログラミング 改訂版，O'REILLY，福崎俊博（訳），p21，2.3.3.2 入力行の自動表示の抑制．
[8]http://shuzo-kino.hateblo.jp/entry/2015/09/17/235436
sedで最初と最後の行を表示する - Bye Bye Moore
[9]Dale Dougherty, Arnold Robbins,1997年，sed & awkプログラミング 改訂版，O'REILLY，福崎俊博（訳），p97，5.5 追加，挿入，変更．
[10]https://qiita.com/tukiyo3/items/f75561a0cfbb7c2eedc9
sedで最終行に挿入 - Qiita
[11]https://orebibou.com/2016/07/sed%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9C%80%E5%88%9Dor%E6%9C%80%E5%BE%8C%E3%81%AE%E8%A1%8C%E3%81%AB%E6%8C%BF%E5%85%A5%E8%BF%BD%E8%A8%98%E3%81%99%E3%82%8B/
sedでファイルの最初or最後の行に挿入(追記)する | 俺的備忘録 〜なんかいろいろ〜
- 投稿日：2020-05-17T10:44:48+09:00
ShellScript: rs（reshape）コマンドを利用し，場合分けなしで（ifを使わず）中央値を求める．
要約
データを1列に並べる．ソートする．それぞれのデータを複製して2つずつにする．
rsで2列にする．1列目の最後データと2列目の頭のデータとの平均が中央値である．中央値を求める% cat test.csv \ | tr ',' '\n' # 1列に並べる | sort -n \ # 昇順に並べる | sed 'p' \ # 複製 | rs -t r 2 \ # 列方向2列 | awk '(NR==1){n1=$2}END{n2=$1; print (n1+n2)/2}' # 2つの数の平均はじめに
- 中央値の定義は以下[1]．
- 具体例1：5つの数（1, 2, 3, 4 ,5 ）の中央値は3．
- 具体例2：4つの数（1, 2, 3, 4）の中央値は2と3の平均の2.5．
awkなどを用いて簡単に求まるが，基本的には場合分けを要する[3][4][5]．- (1)データの個数を数える，(2)場合分けをする，という作業のため，パイプラインで左から右への処理をしづらく，煩わしく感ずるのだと思う[2]．
- 文字列を並べ替える
rsを利用して，左から右へのデータの流れで中央値を求めてみた．中央値（中央値、英: median）とは，代表値の一つで，有限個のデータを小さい順に並べたとき中央に位置する値．たとえば5人の人がいるとき，その5人の年齢の中央値は3番目に年寄りな人の年齢である．ただし，データが偶数個の場合は，中央に近い2つの値の算術平均をとる．（https://ja.wikipedia.org/wiki/%E4%B8%AD%E5%A4%AE%E5%80%A4
中央値 - Wikipedia）環境
- macOS: 10.15.4
- zsh: 5.7.1
準備
(0) 紙とペンを用いた方法．
9個（奇数個）の数の中央値の求める方法を考える．9個の数を小さい順に1列に紙に書く．1番小さい数と1番大きい数が重なるように紙を1回折る．紙を広げて折り目がついている数が中央値である．同様に，10個（偶数個）の数の場合を考える．折り目に最も近い2つの数の平均が中央値である．これと同じことを
rsを利用してやる．(1)
jotコマンドで練習用のデータを準備する．jot使用例．オプション-rで乱数を作成している．% jot -r 3 54 4 34(2)データを1列に並べる．
- jotコマンドでは勝手に1列に並ぶので省略．
- 通常は
trやsedで区切り文字を改行に置換して1列に並べる．置換を利用して1列に並べる．echo '1 2 3' | tr ' ' '\n' 1 2 3(3) 数を昇順に並べる．
sort -nを使う．- 例えば"11"を"1"と"1"との文字列ではなく，数値の"11"として読むのに，
-nが必要．% echo '1\n2\n11' 1 2 11 % echo '1\n2\n11' | sort 1 11 2 % echo '1\n2\n11' | sort -n 1 2 11(4) それぞれの数値を複製する．
sed 'p'を使う．sedのpコマンドは "print"の意味．pだけの場合，入力行をそのまま出力する．sedは全ての入力行を出力するというのがデフォルトの操作[7]．同じデータが2つ並ぶ必要はないので，通常は-nで入力行の自動出力を抑制する．今回はあえて-nをつけず，2つ並ばせる．% echo '1 2' | sed 'p' 1 2 1 2 % echo '1 2' | sed -n 'p' 1 2(5) 縦方向で2列にする．
rsを用いる．-tで縦方向にする．-Cで区切り文字を指定しない場合，スペース2個が区切り文字となる．r 2とすると，行指定なし，2列となる．% jot 5 | rs -t r 2 1 4 2 5 3(6) 1列目の最後の数と2列目の最初の数の平均をとる．
- 様々な方法が考えられる（下記）．
手順概要
- データを1列に並べる（
tr ' '\n')- 昇順に並べる（
sort -n）- 複製（
sed 'p'）- 列方向2列（
rs -t r 2）- 1列目の最後の数と2列目の最初の数との平均（
awkなど）．rsコマンドを利用して中央値を求める．
数値の個数が奇数の場合．
jot 5で1から5の数値を準備する．中央値は3．- 下記のように，1列目最後と2列目の最初の数値の平均で中央値が求まる．
%jot 5 | sort -n | sed 'p' | rs -t r 2 1 3 1 4 2 4 2 5 3 5数値の個数が偶数の場合．
jot 6で1から6の数値を準備する．中央値は3と4の平均の3.5．- 奇数の時と同じやり方，すなわち1列目最後と2列目最初の数の平均で中央値を求めえることができる．
- すなわち，"要素数を数える作業"と"偶奇の場合分け"とを回避できた．
%jot 6 | sort -n | sed 'p' | rs -t r 2 1 4 1 4 2 5 2 5 3 6 3 61列目の最後の数と2列目の最初の数を取り出して平均をとる．
awkを用いた方法．
- これが一番素直でなかろうか．
- 変数
n1とn2にそれぞれの数を代入し，ENDブロックで計算．- 以降は見通しを良くするため適宜改行する．
% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | awk '(NR==1){n1=$2}END{n2=$1;print "median: "(n1+n2)/2}' median: 3.5 # 結果必要な数だけ取り出して計算は他でする．
- 上記の
awkを用いた方法では変数に代入する際，視線はの動きは右から左である．- 今回このようなことを試みた動機としては，"左から右への流れのまま中央値を求めたい"であったので，変数に代入する際の右から左への動きがなんとなく嫌である．
- そこで，数値を取り出すだけして，計算は後で行う方法を考えた．
awkで2つの数を取り出す．
# awkを用いて必要な数だけ取り出す． % jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | awk '(NR==1){print $2}END{print $1}' 4 # 2列目の最初の数 3 # 1列目の最後の数sedで2つの数を取り出す．
- 上記の
awkの方法では(NR==1)で1行目の情報を得て，ENDブロックで最終行の情報を得ていて，非対象でなんとなく嫌である．- そこで，2列に並べた文字列をさらに行方向に線対称に回転させる（
tail -rまたはtac）．- さらに，
tr -sで区切り文字を改行に置換（-sは連続する文字を置換するする際に用いる）．すると1行目と最終行が目的の数となる．それをsedで取り出す[8]．% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | tail -r \ | tr -s ' ' '\n' \ | sed -n '1p;$p' 3 #結果 4 #結果取り出した2つの数を用いて計算する．
逆ポーランド記法
- 左から右の流れで計算できる方法，すなわち後置記法（逆ポーランド記法）を使ってみた．
- 逆ポーランド記法は
dcで行える．- 末尾の
pは"print"の意味らしい．- 小数点以下をどこまで表示するか（精度）を
kで指定せねばならないらしい．- 今回は0以上の整数のみを扱うので小数点第1位まで表示する．
dc使用例echo '1 2 + p' | dc 3 # 結果 % echo '1 2 + 2 / p' | dc 1 # 小数点以下が切り捨てられる． echo '1 2 + 1k 2 / p' | dc 1.5 # 1kオプションで小数点第一位まで表示された
- 取り出した2つの数の後ろに
+ 1k 2 / pを追加した文字列をdcコマンドにパイプで渡す．文字列の末尾に文字列を追加する．
- 様々な方法がある．例として以下を挙げる．
その1:<<()を用いる
% jot 6 \ | sort -n \ | sed 'p' \ | rs -t r 2 \ | tail -r \ | tr -s ' ' '\n' \ | sed -n '1p;$p' \ | <<(echo '1k + 2 / p') | dc 3.5 #結果その2:ヒアストリング
<<<を用いる~~略~~ | <<< '+ 1k 2 / p' | dcその3:sedを用いる
- 最終行の末尾に文字列を追加する．
- sedの区切り文字/と割り算の/が同じでエラーがでる．前者を別の文字にするか，後者をバックスラッシュ\でエスケープする．~~略~~ | sed '$ s/^.*$/& + 1k 2 \/ p/' | dcその4:sed a（add）を用いる
-a（addの意味）を用いて最終行の下に行を追加．
- macのsed場合，aコマンドの後に改行が必要[9]．
- linuxのsedでは改行が不要のようである[10][11]．
- ただし，以下の記事を参考にしてやると，1行で書けた[[12]]．
（https://qiita.com/kkdd/items/725e53572bc69e4b51b7
sed による置換で改行\nを出力する - Qiita）~~略~~ | sed '$a \'$'\n + 1k 2 / p' | dc# MACのsedではaコマンドは通常は改行が必要 ~~略~~ | sed '$ a \ + 1k 2 / p'考察
中央値の求め方はしばしば話題になる．しかし，
ifを用いない方法は見かけなかった．そこで，今回やってみた．四分位数も同様の操作で求めることができる．ただし，四分位数は定義が複数あり，ややこしくなるため今回は扱わなかった．
awk + ifを用いた通常の方法と比較して，1.5倍時間がかかる．rsにどうしても時間がかかる．100万個のデータで約5秒要する．まとめ
rsを利用し，場合わけせずに中央値を求めた．参考
[1]https://ja.wikipedia.org/wiki/%E4%B8%AD%E5%A4%AE%E5%80%A4
中央値 - Wikipedia
[2]https://stackoverflow.com/questions/41750008/get-median-of-unsorted-array-in-one-line-of-bash
Get median of unsorted array in one line of BASH - Stack Overflow．
[3]https://orebibou.com/2016/03/linuxunix%E3%81%AE%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%A7%E5%B9%B3%E5%9D%87%E3%83%BB%E4%B8%AD%E5%A4%AE%E5%80%A4%E3%83%BB%E6%9C%80%E5%A4%A7%E3%83%BB%E6%9C%80%E5%B0%8F%E3%82%92%E6%B1%82/
Linux/UNIXのコンソールで平均・中央値・最大・最小を求める | 俺的備忘録 〜なんかいろいろ〜
[4]https://stackoverflow.com/questions/6166375/median-of-column-with-awk
bash - median of column with awk - Stack Overflow
[5]https://unix.stackexchange.com/questions/13731/is-there-a-way-to-get-the-min-max-median-and-average-of-a-list-of-numbers-in
bash - Is there a way to get the min, max, median, and average of a list of numbers in a single command? - Unix & Linux Stack Exchange
[6]https://kunst1080.hatenablog.com/entry/2014/02/15/180842
jotコマンドについて調べてみた - くんすとの備忘録
[7]Dale Dougherty, Arnold Robbins,1997年，sed & awkプログラミング 改訂版，O'REILLY，福崎俊博（訳），p21，2.3.3.2 入力行の自動表示の抑制．
[8]http://shuzo-kino.hateblo.jp/entry/2015/09/17/235436
sedで最初と最後の行を表示する - Bye Bye Moore
[9]Dale Dougherty, Arnold Robbins,1997年，sed & awkプログラミング 改訂版，O'REILLY，福崎俊博（訳），p97，5.5 追加，挿入，変更．
[10]https://qiita.com/tukiyo3/items/f75561a0cfbb7c2eedc9
sedで最終行に挿入 - Qiita
[11]https://orebibou.com/2016/07/sed%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9C%80%E5%88%9Dor%E6%9C%80%E5%BE%8C%E3%81%AE%E8%A1%8C%E3%81%AB%E6%8C%BF%E5%85%A5%E8%BF%BD%E8%A8%98%E3%81%99%E3%82%8B/
sedでファイルの最初or最後の行に挿入(追記)する | 俺的備忘録 〜なんかいろいろ〜
- 投稿日：2020-05-17T10:43:23+09:00
MacBook ProのTouch Barに新型コロナウイルスの情報を表示する
はじめに
MacBook Pro(Touch Bar付き)をお使いの皆さまに送る記事です。
BetterTouchToolが必要です。
以下の記事が参考になるので、持っていない方は是非入手してみてください。
お前らのTouch Barはダサい新型コロナウイルス関連の情報に限らず、Webに掲載されているものであれば、いろいろと表示することができますので、興味のある方は是非チャレンジしてみてください。
どんな感じになるの？
「北海道 新型コロナウイルスまとめサイト」に掲載されている内容をTouch Barに表示します。
全国版も行けるんじゃないかなーと思っているのだけど、自分が住んでいない地域を出してもしょうがないので、今のところ対応しているのは北海道のみです。記事にするなら東京の方が良かったかな。
この状況が早く落ち着いてくれればいいですね。
なお、curlコマンドでごにょごにょしているので、Python等の環境は不要です。
タッチバーに表示されている数字は、左から順に、
- 陽性累計
- 死亡累計
- 陽性率%
- 日陽性数
- 日死亡数
一番左の「CoronaVirus COVID-19」をタッチすると、以下の画面が開きます。
ダウンロード先
設定ファイルは、私のGitHubに置いてあるので、ご自由にお使いください。
https://github.com/akikinyan/BTT-Hokkaido-CoronaVirus番外編
ネタ切れが早いので、私のTouch Barを晒しておきます。
IoT機器の状態表示
気になるあの数字を表示しています。
事務所に設置しているIoT機器の情報を取得して表示しています。
「空」-[空]- の表示は、トイレの空室状況。
使われているときは「満」になります。ハイフンのところは滞在時間。
詳しくは書けないのだけど、滞在時間の長いトイレの神が現れたら、ごにょごにょ状態になります。
こう言うのがあると、ほんと助かりますよね。その隣の温度と湿度は、事務所のフロアに設置しているIoTの温度計から取っています。
VSCode
VSCodeをよく使うので、npm関係のコマンドがボタン一つで打てるようにしました。
設定するときは、キーマップを開いて
キー設定を流し込んで
keybindings.json// 既定値を上書きするには、このファイル内にキー バインドを挿入します [ { "key": "ctrl+shift+n", "command": "workbench.action.terminal.sendSequence", "args": { "text": "npm run start\u000d" } }, { "key": "ctrl+shift+b", "command": "workbench.action.terminal.sendSequence", "args": { "text": "npm run build\u000d" } }, { "key": "ctrl+shift+c", "command": "workbench.action.terminal.sendSequence", "when": "terminalFocus", "args": { "text": "\u0003" } } ]BetterTouchToolの方を設定します。
VSCode宛に送らなくても大丈夫な気がするんだけど、今はこうしてます。
Chrome
ブラウザの設定。
私はSafariを使っておらず、普段からChromeです。
TipTapって操作を知らなかったのだけど、覚えたらめっちゃ便利ですね。
それでは、良いTouch Barライフを！
- 投稿日：2020-05-17T10:27:42+09:00
MacOSのVSCodeでC++デバッグを行う際、`"externalConsole":true`を設定してもターミナルが立ち上がらない問題と、その解決策
TL;DR
VSCodeがTerminalを開く権限がないのが本質的な原因っぽいです。その上、デバッグに用いるVSCodeのC++アドオン(
vscode-cpptools)経由の場合、何故かVSCodeにTerminal開く権限を与えるダイアログが出ないらしく、今回はデバッグと別の手段でターミナルを起動させ、Permissionを与える必要があります。具体的には、
https://github.com/microsoft/vscode-cpptools/issues/5079
に則り、以下のtaskをtasks.jsonに追加。{ "label": "Open Terminal", "type": "shell", "command": "osascript -e 'tell application \"Terminal\"\ndo script \"echo hello\"\nend tell'", "problemMatcher": [] }コマンドパレット(
⌘+Shift+P)でタスクを実行(>Run Tasksでサジェスト)、先程tasks.jsonに追記したOpen Terminalを実行
→「VSCodeがTerminal開こうとしてるけど、開いてOK?」という旨のダイアログが出る
（画像はissueからの借り物）
OKで、VSCodeがTerminalを開く権限を得ます。
- 投稿日：2020-05-17T10:27:42+09:00
MacOSのVSCodeでC++デバッグを行う際、` "externalConsole":true `を設定してもターミナルが立ち上がらない問題と、その解決策
TL;DR
VSCodeがTerminalを開く権限がないのが本質的な原因っぽいです。その上、デバッグに用いるVSCodeのC++アドオン(
vscode-cpptools)経由の場合、何故かVSCodeにTerminal開くPermissionを与えるダイアログが出ないらしいです。厄介。
というわけで、デバッグと別の手段でターミナルを起動させ、Permissionを与えることで、解決を図ってみましょう。VSCode公式のC++アドオンのissue(https://github.com/microsoft/vscode-)cpptools/issues/5079
に則って作業していきます。
まずは以下のtaskをtasks.jsonに追加。{ "label": "Open Terminal", "type": "shell", "command": "osascript -e 'tell application \"Terminal\"\ndo script \"echo hello\"\nend tell'", "problemMatcher": [] }コマンドパレット(
⌘+Shift+P)でタスクを実行(>Run Tasksでサジェスト)、先程tasks.jsonに追記したOpen Terminalを選択
→「VSCodeがTerminal開こうとしてるけど、開いてOK?」という旨のダイアログが出る
（画像はissueからの借り物）
OKで、VSCodeがTerminalを開く権限を得ます。
これにより、VSCode上のデバッガから入力ターミナルを開くことが可能となります。開発環境
問題が起きた開発環境はこんな感じでした。
- MacBook Air (Retina, 13-inch, 2019)
- MacOS 10.15.4
- VSCode Version 1.45.0
- ms-vscode.cpptools 0.28.0
記事を立てた経緯
競プロの過去問を解く際、セグフォがしつこく出て消耗することが増えたため、VisualStudioのデバッガのように、BreakPointやウォッチやらがVSCodeのGUI上でできないかな？と思い、色々調べてデバッグ環境を構築することにしました。
ところで、VSCodeでは、デバッグ出力はすべて専用のDebug Consoleに出力され、標準入力はできません。1プログラムに標準入力を与える場合、デバッグの詳細を記述する2launch.jsonに、タイトルでも登場した以下のKeyValueを追記する必要があります。{ ... "externalConsole":true, ... }ところが、自分の環境の場合、これを記述してもターミナルが立ち上がらず、プログラムが標準入力待ちのコマンドから一生前に進まない状態になってしまいました。
システム環境設定→セキュリティーとプライバシーを見に行ったり、別画面の端っこにダイアログが出ていないか目を皿にして探したりしても何も見つかりません。
そんなわけで、ネットで色々調べた所、先程のissueを発見した次第です。先程の方法で、「ターミナルを出すだけなら」上手くいくと思います。デフォルトだと、デバッグ後にターミナルが即落ちして出力が見えなかったりするっぽく、追加で色々設定しなきゃいけないみたいですね。
うーん、面倒くさい…（小声）3
入力フォームはありますが、デバッグ時専用のコマンドを入力するためのもののようです。Chrome上でJSのデバッグするとき見たく、変数入れたら値が帰ってきたりするのかな？私はドシロートなのでわかりません。 ↩
これも、
launch.jsonは「デバッグの詳細を記述する」もんだと私が勝手に思っているだけで、本当はもっと色々書けるのかもしれません。ウソつきがしたいわけではないのです。ただまちがいをするだけなのです……（気になる点はぜひぜひコメントでご指摘ください。加筆修正いたします。） ↩ほならね、それこそIDE使えって話でしょ？でもIDEを競プロに使おうとするとプロジェクトを乱立しなきゃいけなくてダルい…問題(某競プロ界のスゴい人もおっしゃってたような気がしますね)少なくとも、VSCoderとしてやっていくなら、ある程度は自分でmakefile弄ってconfig.jsonを編集・保守する覚悟の準備をしておかなければならない、ということは間違いないでしょう。 ↩
- 投稿日：2020-05-17T10:27:42+09:00
MacOSのVSCodeでC++デバッグを行う際、 externalConsole:true を設定してもターミナルが立ち上がらない問題と、その解決策
原因と解決策(TL;DR)
VSCodeがTerminalを開く権限がないのが本質的な原因っぽいです。その上、デバッグはVSCodeのC++アドオン(
vscode-cpptools)経由で行うのですが、VSCodeがTerminalを開くPermissionがない場合に、Permissionを与えるか否か尋ねるダイアログが出てほしいところ、何故か出ないらしいです。厄介。ただ、デバッグと別の手段でVSCodeからターミナルを起動させようとすれば、Permissionを与えるか否か尋ねるダイアログは普通に出るっぽいです。
ということで、今回はその一例として、TasksからTerminalを起動し、その過程でPermissionを与えることで、VSCode上のデバッガからもTerminalを起動できるようにしましょう。VSCode公式のC++アドオンのissue(https://github.com/microsoft/vscode-)cpptools/issues/5079
に則って作業していきます。
まずは以下のtaskをtasks.jsonに追加。{ "label": "Open Terminal", "type": "shell", "command": "osascript -e 'tell application \"Terminal\"\ndo script \"echo hello\"\nend tell'", "problemMatcher": [] }コマンドパレット(
⌘+Shift+P)でタスクを実行(>Run Tasksでサジェスト)、先程tasks.jsonに追記したOpen Terminalを選択
→「VSCodeがTerminal開こうとしてるけど、開いてOK?」という旨のダイアログが出る
（画像はissueからの借り物）
OKで、VSCodeがTerminalを開く権限を得ます。
これにより、VSCode上のデバッガからも、Terminalを開くことが可能となります。開発環境
問題が起きた開発環境はこんな感じでした。
- MacBook Air (Retina, 13-inch, 2019)
- MacOS 10.15.4
- VSCode Version 1.45.0
- ms-vscode.cpptools 0.28.0
記事を立てた経緯
競プロの過去問を解く際、セグフォがしつこく出て消耗することが増えたため、VisualStudioのデバッガのように、BreakPointやウォッチやらがVSCodeのGUI上で管理できないかな？と思い、色々調べてデバッグ環境を構築することにしました。
ところで、VSCodeでは、デバッグ出力はすべて専用のDebug Consoleに出力され、標準入力はできません。1プログラムに標準入力を与える場合、デバッグの詳細を記述するための設定ファイルである2launch.jsonに、タイトルでも登場した以下のKeyValueを追記する必要があります。{ ... "externalConsole":true, ... }ところが、自分の環境の場合、これを記述してもターミナルが立ち上がらず、プログラムが標準入力待ちのコマンドから一生前に進まない状態になってしまいました。
システム環境設定→セキュリティーとプライバシーを見に行ったり、別画面の端っこにダイアログが出ていないか目を皿にして探したりしても何も見つかりません。
そんなわけで、ネットで色々調べた所、先程のissueを発見した次第です。あとがき
先程の方法で、「ターミナルを出すだけなら」上手くいくと思います。デフォルトだと、デバッグ後にターミナルが即落ちして出力が見えなかったりするっぽく、追加で色々設定しなきゃいけないみたいですね。
うーん、面倒くさい…（小声）3
入力フォームはありますが、デバッグ時専用のコマンドを入力するためのもののようです。Chrome上でJSのデバッグするとき見たく、変数入れたら値が帰ってきたりするのかな？私はドシロートなのでわかりません。 ↩
これも、
launch.jsonは「デバッグの詳細を記述する」もんだと私が勝手に思っているだけで、本当はもっと色々書けるのかもしれません。ウソつきがしたいわけではないのです。ただまちがいをするだけなのです……（気になる点はぜひぜひコメントでご指摘ください。加筆修正いたします。） ↩ほならね、それこそIDE使えって話でしょ？でもIDEを競プロに使おうとするとプロジェクトを乱立しなきゃいけなくてダルい…問題(某競プロ界のスゴい人もおっしゃってたような気がしますね)少なくとも、VSCoderとしてやっていくなら、ある程度は自分でmakefile弄ってconfig.jsonを編集・保守する覚悟の準備をしておかなければならない、ということは間違いないでしょう。 ↩
- 投稿日：2020-05-17T10:05:31+09:00
【備忘録】Macで円記号（¥）とバックスラッシュ（\）を入れ替える
Macの日本語（JIS）キーボードで，円記号（\¥）とバックスラッシュ（\）を入れ替える方法を書きます．
検証環境
- マシン: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
- OS: macOS Catalina バージョン 10.15.4
結論
この方法では，IMEの環境設定や動作の影響を受けず，円記号（¥）のバックスラッシュ（\）を入れ替えることができます．プログラミングやTeXなどで，円記号よりもバックスラッシュを使うことが多い方は，このような設定をしておくと便利です．
手順
~/Library/KeyBindings/DefaultKeyBinding.dictという名前のテキストファイルを作成し，設定内容を記述します．一旦ログアウトし，再ログインすると，キーの入れ替えが有効になります．% mkdir ~/Library/KeyBindings # ディレクトリを作成していない場合 % vim ~/Library/KeyBindings/DefaultKeyBinding.dictDefaultKeyBinding.dict{ "¥" = ("insertText:", "\\"); "~\\" = ("insertText:", "¥"); }参考文献
- 投稿日：2020-05-17T01:13:17+09:00
React Native for macOS でサンプルアプリを動かす
React Native for macOS
MicrosoftがReact NativeをフォークしてパッチをあてたReact Native for Windowsに加えて、 React Native for macOSをGitHubで公開しました。
Get Started with macOSの手順でスケルトンアプリと、 rssreaderの2つを動かしてみました。
React Native for macOSでmacアプリを起動させる
すでにReact Nativeの開発環境が整っていれば、簡単にアプリを起動させることができます。
Get Started with macOS を読みながら進めます。
環境
Tools バージョン macOS Catalina 10.15.4 Xcode 11.4.1 node 12.14.1 npx 6.14.2 yarn 1.21.1 pod 1.9.1 watchman 4.9.0 react-native init でプロジェクトを作成
今回は
RNMacosSampleというプロジェクトで進めます。npx react-native init RNMacosSample --version 0.61.5エラーなく終了し、最後に以下の表示が出れば成功です。
RNMacosSampleディレクトリが作成されます。% npx react-native init RNMacosSample --version 0.61.5 This will walk you through creating a new React Native project in /Users/shoken/git/sample Using yarn v1.22.4 Installing react-native@0.61.5... # ----省略---- ✨ Done in 9.44s. info Installing required CocoaPods dependencies Run instructions for iOS: • cd "/Users/shoken/git/RNMacosSample" && npx react-native run-ios - or - • Open RNMacosSample/ios/RNMacosSample.xcworkspace in Xcode or run "xed -b ios" • Hit the Run button Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "/Users/shoken/git/RNMacosSample" && npx react-native run-androidmacOS extension をインストール
プロジェクトディレクトリに移動して、 macOS用のライブラリをインストールします。同時にPodもインストールされます。
cd RNMacosSample npx react-native-macos-initエラーなく終了し、最後に以下の表示が出れば成功です。
% npx react-native-macos-init npx: installed 114 in 6.575s Reading application name from package.json... Reading react-native version from node_modules... Reading react-native version from node_modules... # ----省略---- Generating Pods project Integrating client project [!] Please close any current Xcode sessions and use `RNMacosSample.xcworkspace` for this project from now on. Pod installation complete! There are 29 dependencies from the Podfile and 26 total pods installed. Run instructions for macOS: • npx react-native run-macos - or - • Open macos/RNMacosSample.xcworkspace in Xcode or run "xed -b macos" • yarn start:macos • Hit the Run buttonreact-native run-macos でアプリを起動
npx react-native run-macosReact Nativeアプリと同様に、Terminalの別ウィンドウでMetro Bundlerが起動して、
RNMacosSampleアプリが起動したら成功です！
rssreaderアプリを起動させる
次に、リポジトリにPull Requestが送られているrssreaderを動かしてみます。
リポジトリをclone
git clone git@github.com:qmatteoq/react-native-windows-samples.gitrssreaderディレクトリに移動
cd react-native-windows-samples/samples/rssreaderrssreaderアプリを起動
yarn install cd macos && pod install && cd .. npx react-native run-macos起動しました！
公開予定のReact Native for macOSの公式ブログ記事
リポジトリに5月更新のブログドラフト記事がPull Requestで送られていたので近日中に公開されそうです。
React Native for macOS, and more!
注意: 公式ドキュメント通りに進めるとエラー
2020年5月17日時点で、公式ドキュメントのGet Started with macOSにあるコマンドでは一部エラーになります。
一番最初の Install React Native for macOS に記載されている
npx react-native init <projectName> --version 0.61を実行するとエラーになります。% npx react-native init sampleProject --version 0.61 This will walk you through creating a new React Native project in /Users/shoken/git/sample Using yarn v1.22.4 Installing 0.61... yarn add v1.22.4 info No lockfile found. [1/4] ? Resolving packages... error An unexpected error occurred: "https://registry.yarnpkg.com/0.61: Not found". info If you think this is a bug, please open a bug report with the information provided in "/Users/shoken/git/sample/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. Error: Command failed: yarn add 0.61 --exact at checkExecSyncError (child_process.js:621:11) at execSync (child_process.js:657:15) at run (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:294:5) at createProject (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:249:3) at init (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:200:5) at Object.<anonymous> (/Users/shoken/.nodebrew/node/v12.14.1/lib/node_modules/react-native-cli/index.js:153:7) at Module._compile (internal/modules/cjs/loader.js:955:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10) at Module.load (internal/modules/cjs/loader.js:811:32) at Function.Module._load (internal/modules/cjs/loader.js:723:14) { status: 1, signal: null, output: [ null, null, null ], pid: 1725, stdout: null, stderr: null } Command `yarn add 0.61 --exact` failed.バージョン指定にパッチバージョンまで指定すると成功します。
- npx react-native init <projectName> --version 0.61 + npx react-native init <projectName> --version 0.61.5上記修正はPull Request 出したので、マージ待ちです。
