ご存知の方はご存知でしょうが、ちょっとつまずく時があるのでメモしておきます。
IPアドレス直叩きとMacの共有機能を使った方法です。

はじめに

Macと対象端末を同一のローカルネットワークに接続します。
いつの間にか切り替わっている時があるので、アクセスできない場合は真っ先に確認しましょう。
iPhoneではコントロールセンター内のWiFiアイコンを長押しすることで接続先を確認できます。

Macの共有機能を利用する場合

対象端末はiOSに限定されますが、IPアドレスが変更されてもアクセスできるため、管理しやすい方法です。
まず、 システム環境設定 → 共有 → （コンピュータ名の）編集 → ローカルホスト名 に任意の名前を設定します。
ここでは hanako （ hanako.local ）としました。

ローカルサーバを起動する

共有設定が済んだらローカルサーバを起動します。ここでは個人的に良く使うサーバの起動コマンドを取り上げてみました。
なお、ローカルサーバのデフォルトのホスト名は localhost ですが、このままでは端末からアクセスできません。先に設定した hanako.local とする必要がある点に注意してください。

PHP

MacにビルトインされているPHPのデバッグサーバを使うケースです。これが一番簡単ですね。

$ php -S hanako.local:8080 -t /Users/hanako/www/

webpack

webpack-dev-server では --host と --port でホスト名とポート番号を指定できます。

$ webpack-dev-server --content-base ./dist --watch-content-base --hot --inline --open --open-page index.html --host hanako.local --port 8080

Parcel

Parcelでは最近追加された --hmr-hostname でホスト名を、 --port でポート番号を指定できます。

$ parcel ./src/index.html --hmr-hostname hanako.local --port 8080

ポート番号では似たようなパラメータに --hmr-port がありますが、本件で使うのはこちらではありません。

React

create-react-apps ではあらかじめ環境変数に設定する形になります。

$ HOST="hanako.local" PORT=8080 react-scripts start

Vue

Vue CLIの vue-cli-service は内部的には webpack-dev-server らしく、設定の仕方も同じなんですが…

$ vue-cli-service serve --host hanako.local --port 8080

ネットワークエラーが出て起動できませんでした。正直Vue CLIは良くわからないので頑張ってください（ぶん投げ）。

ローカルサーバに接続する

後はもうお察しの通り、端末のブラウザから http://hanako.local:8080 にアクセスするだけです。
油断すると www.hanako.local のように www. を頭に付けられる時があるのでお気を付けください。

IPアドレスにアクセスする場合

MacのIPアドレスに直接アクセスする方法です。
言うまでもなく、あらゆる端末で利用できるのが強みですね（Kindleからでもアクセスできます）。
まず、下記コマンドでMacのIPアドレスを取得しましょう。

$ ipconfig getifaddr en0

機能しない場合は、下記コマンドの出力内にある en0: の inet 横に表記されているアドレスを探してください。

$ ifconfig

私の環境では 192.168.100.100 でした。
後はローカルサーバをデフォルト設定のまま起動し、 http://192.168.100.100:8080 のようにしてアクセスするだけです（ポート番号はサーバによって変わるので注意）。

はじめに

macの設定でググった時の備忘録メモです。

作業環境

mac

ピープ音をミュート

ピープ音ってこんな種類あったんですね。
カエルの鳴き声がゲコゲコだったら選んでたかなw
外付けのスピーカーとか内臓マイクで音拾うときもこの画面っぽい。

システム環境設定/サウンドエフェクト/通知音の音量:をいい感じに左へ

日本語を英語に

ついにこの時がきたか。。思い切って変更してみる。
無理だったら戻します！

システム環境設定/言語と地域/いい感じに英語にする

なぜ、ssh接続？

ラズパイを使う時、Mac / Linux / PC からネットワーク接続して使うと何かと便利です。専用のディスプレイ、キーボード、マウスを用意しなくて良いので、とても気軽。

その際、ssh接続だと毎回パスワードを入力しなくて良いのでさらに便利。セキュリティ面でも安心。気軽で便利で、かつ安心ということです。

クラスで使う時など、たくさんラズパイがあるときには必須。

前提

• Macからの接続（ローカル）
• Raspbian Stretchへの接続（リモート）
• パスワード認証によるローカル〜リモート間SSH接続ができている。
• リモートホスト名がhostname001の時、名前解決によりhostname001.localでアクセスできている。

ssh hostname001と打つだけで、ターミナル接続ができるようになります。

ローカル（Mac）で鍵ペアを作成する。

ssh-keygen -t rsa

~/.ssh/に作成される。
秘密鍵：id_rsa
公開鍵：id_rsa.pub

リモート（ラズパイ）に公開鍵を転送／登録

ssh-copy-id pi@hostname001.local

ssh-copy-idコマンドが無い場合、brew install ssh-copy-idでインストール。

.sshディレクトリ（存在しない場合は作成）とその中にauthorized_keysファイルが作成され、公開鍵id_rsa.pubが中に収容される。別の鍵がすでに存在する時は、authorized_keysに追記される。

同じ鍵を送ろうとすると、すでにありますと言って何もしない。素晴らしい。scpやsftpなどを使うより格段に楽で間違いも起きない。

公開鍵登録後、すぐに鍵による接続が可能になります。

エイリアスで接続できるようにする

エイリアスで接続できるようにすると、さらにさらに簡単接続。

ただし、scpコマンドなどssh関連コマンドで使われる他、Transmit5などのアプリでも使われる場合があるので、設定したことを忘れていると、今までできていた接続ができなくなって慌てます。

通常のコマンド行
ssh pi@itrobot001.local

エイリアス利用の場合、こんなに簡単。
ssh itrobot001

nano .ssh/config

CheckHostIP no

User pi
Port 22
IdentityFile ~/.ssh/id_rsa

Host itrobot*
    HostName %h.local

Host primbell*
    HostName %h.local

Host nao2g-server
    HostName %h.local

CheckHostIP no      known_hostsにIPアドレスを書き込まなくなる。IPアドレスが変わった時の面倒がなくなる。
User pi  コマンド行でユーザー名を省略できる。
Port 22  コマンド行でポート番号を省略できる。22以外の番号にしている時など便利。
Host     コマンド行のホスト名でフィルタリング。
Hostname ホスト名を指定する。
%h コマンド行で指定したホスト名が使われる。

パスワード認証を廃止したり、ルートログインを禁止したり、する？

セキュリティを考える場合、従来のパスワード認証を廃止、ルートでのログインを禁止などの設定をリモート（ラズパイ）のファイル編集にて行なうと良いです。設定に失敗すると、ネットワーク接続での作業が続行できなくなるので、慎重に。

sudo nano /etc/ssh/sshd_config

パスワード認証廃止。デフォルトはyes。
PasswordAuthentication no

ルートでログインできなくする。デフォルトはyes。
PermitRootLogin no


デフォルトでyesだが、明示的に公開鍵認証を可能にする。
PubkeyAuthentication yes

VScodeのvimの拡張機能を追加した状態で日本語のテキストを入力した後、ノーマルモードに戻った時に明示的に英数入力に切り替える操作が面倒だったので、
自動でに切り替える方法がないか調べたらドキュメントに設定方法の記載が見つかりました。
以下はMac向けですが他OSの設定方法もドキュメントに記載があります。

im-selectの準備

ドキュメント記載の方法ではim-selectというコマンドラインツールを使います。

インストール

以下のコマンドでインストールを行います。

curl -Ls https://raw.githubusercontent.com/daipeihust/im-select/master/install_mac.sh | sh

インストール後コマンドが実行できる状態になっていればOKです。

$ curl -Ls https://raw.githubusercontent.com/daipeihust/im-select/master/install_mac.sh | sh
* Downloading im-select...
* im-select is installed!

$ which im-select
/usr/local/bin/im-select

im-selectの使い方、動作確認

現在の入力状態(imkey)の確認

インストール後im-selectコマンドを実行すると現在の入力状態を表すパラメータ(imkey)が取得できます。
自分のgoogle日本語入力を使っている環境では以下の値が表示されました。このパラメータは各自の環境で異なったものになると思います。

# 英数入力状態の実行結果
$ im-select
com.google.inputmethod.Japanese.Roman

# 日本語入力状態の実行結果
$ im-select
com.google.inputmethod.Japanese.base

指定のimkeyへの切り替え

先程のパラメータを以下のようにim-selectに指定してあげることで入力状態の切り替えを行うことができます。
先程取得したパラメータを指定して入力状態の切り替えができればim-select側の準備は完了です。

# 英数入力へ切り替え
im-select com.google.inputmethod.Japanese.Roman

# 日本語入力へ切り替え
im-select com.google.inputmethod.Japanese.base

vscode側の切り替え設定

vim拡張機能には入力切り替え用に以下の設定項目があります。
それぞれ設定してあげることでim-selectコマンドの切り替えが実行され、ノーマルモードに切り替えた際に合わせて英数入力へ切り替わるようになります。

設定値	説明
vim.autoSwitchInputMethod.enable	インサートモードを抜けた際のコマンド実行の有効/無効
vim.autoSwitchInputMethod.defaultIM	デフォルト(ノーマルモード時)の入力状態を表すパラメータ
vim.autoSwitchInputMethod.obtainIMCmd	現在の入力状態のパラメータを取得するコマンドのフルパス
vim.autoSwitchInputMethod.switchIMCmd	入力状態の切り替えを行うコマンドのフルパス。 {im}部分には上記のデフォルト入力状態のパラメータが自動的に置換されて入力されます

今回の場合は以下のような設定値になります。

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "com.google.inputmethod.Japanese.Roman",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

設定画面では以下のような感じになると思います。

この設定を反映後、vimのインサートモードからノーマルモードの切り替えのタイミングで入力状態も英数入力へ切り替わっていれば設定完了です。

一覧

command + 〇 編

コマンド	説明
command + C	コピー
command + V	ペースト
command + F	ページ内検索
command + T	新しいタブを開く
command + W	タブを閉じる
command + Z	一つ前に戻る
command + I	URLにフォーカスを当てる
command + X	切り取り
command + R	リロード
command + Q	アプリケーションを終了する

control + 〇 編

コマンド	説明
control + 右	右隣のウィンドウに移動
control + 左	左隣のウィンドウに移動

command + shift + 〇 編

コマンド	説明
command + shift + T	直前に閉じたタブを開く
command + shift + 上	カーソル部分から列の先頭までを選択
command + shift + 下	カーソル部分から列の末尾までを選択
command + shift + 左	カーソル部分から行の先頭までを選択
command + shift + 右	カーソル部分から行の末尾までを選択
command + shift + F	タブを隠す

command + option + 〇 編

コマンド	説明
command + option + I	デベロッパーツールを開く （Chrome操作時）
command + option + U	ページのソースを開く （Chrome操作時）
command + option + P	プリント印刷のコンソール表示
command + option + 右	右隣のタブに移動
command + option + 左	左隣のタブに移動

番外編

コマンド	説明
command + shift + V	clipyのクリップボード表示

参考

• コピー＆ペーストをフル活用できるアプリ『Clipy』に惚れた！Macには絶対インストールしておきたいっ