【Mac】ターミナル設定(iTerm2 + fish + fisherman)

■環境

macOS Sierra
iTerm2 3.1.3
fish 2.6.0
fisherman 2.13.2

■参考サイト

fish shell を使いたい人生だった
https://dev.classmethod.jp/etc/fish-shell-life/


ターミナルのシェルをfishにする手順です。
デフォルトである程度便利機能が入っているので、zshでカスタマイズするのが面倒な人におすすめです。

fish インストール

fishをインストールします。

$ brew install fish
$ fish -v
fish, version 2.6.0

fishのパスを確認する。

$ which fish
/usr/local/bin/fish

上記パスをシェル一覧に追記する

$ sudo vi /etc/shells
〜末尾にwhichコマンドで確認したパスを追記する〜

シェルをfishに変更する

$ chsh -s /usr/local/bin/fish

これで、ターミナルを再起動するとfishが立ち上がります。

fisherman インストール

fishermanというfishのプラグイン管理ツールがあります。

fishermanのgithubベージにインストールコマンドが載っています。
https://github.com/fisherman/fisherman

2017年10月時点でのコマンドは以下でした。

$ curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs https://git.io/fisher
$ fisher -v
fisherman version 2.13.2 ~/.config/fish/functions/fisher.fish

上記コマンド実行時にバージョン情報が出なかった場合は、一度ターミナルを再起動すると良いです。

fishのテーマ変更

fishはテーマを変更することで見栄えが変えられます。
どのようなテーマがあるかは、以下ページが参考になります。
https://github.com/oh-my-fish/oh-my-fish/blob/master/docs/Themes.md

私は「bobthefish」というテーマを利用しており、以下手順でインストールしています。

$ fisher install omf/theme-bobthefish
$ git clone https://github.com/powerline/fonts.git
$ fonts/install.sh
$ rm -rf fonts

上記コマンド実施後、iTerm2のプロファイルを設定します。
プロファイル設定画面にて「Text>Font>ChangeFont」をクリックしてください。

フォント設定画面になるので、『D2CordingForPowerline』を選択します。
フォントサイズも必要に応じて好きなサイズに変更してください。

これで、テーマの変更は完了です。

プラグイン追加

プラグインは色々ありますが
私が入れているプラグインを紹介しておきます。

z

過去の履歴からディレクトリを選択して遷移できるようになります。
【インストール方法】

$ fisher install z

【使い方】
z {文字列}まで入力してタブを押下する。
上記の{文字列}で履歴からディレクトリ検索をして遷移できる。
{文字列}を空にしておけば直近の履歴が表示される。

bd

親以上のディレクトリ(祖先ディレクトリ?)への遷移が簡単になる。
【インストール方法】

$ fisher install 0rax/fish-bd

【使い方】
$ bdと入力してタブを押すと、親ディレクトリの一覧が表示されるので
選択してエンターを押すだけで移動できる。

peco

コマンド履歴の検索が容易にできるようになる。

【インストール方法】

$ brew install peco
$ fisher oh-my-fish/plugin-peco

上記コマンド後、fishのコンフィグファイルへ以下を記載。

vim ~/.config/fish/config.fish
〜以下を追記(ファイルがなければ新規作成)〜
function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end

※「function fish_user_key_bindings」の定義が既にされているなら、
その中にbind〜の行だけ追記すれば良い。

【使い方】
「Ctrl + R」でコマンド履歴検索画面になる。
検索画面では直近のコマンドから選択することもできるし、文字列を入力すれば該当の文字列を含むコマンド履歴に絞ることもできる。

ghq

gitの管理が容易になるプラグイン

【インストール方法】

$ brew install ghq
$ fisher install yoshiori/fish-peco_select_ghq_repository

上記コマンド後、fishのコンフィグファイルへ以下を記載。

vim ~/.config/fish/config.fish
〜以下を追記(ファイルがなければ新規作成)〜
function fish_user_key_bindings
  bind \c] peco_select_ghq_repository  # 追加
end

※「function fish_user_key_bindings」の定義が既にされているなら、
 その中にbind〜の行だけ追記すれば良い。
 例えば、もし上記のpecoも導入しているのであれば、config.fishの記載は以下のようになる。

function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
  bind \c] peco_select_ghq_repository  # 追加
end
Share

Google Cloud Platformにインスタンス作成

参考

https://www.topgate.co.jp/category/gcp


インスタンス立ち上げ

① 左メニューの「Compute Engine」をクリックする。

②1分ほど読みこみ待ちになる。
 読み込み完了後、VMインスタンスの「作成」ボタンをクリックする。

③また、少々待ちが発生する。
 インスタンスの作成画面が表示されたら、名前に任意の名称、ゾーンは「asia-northeast1-a」を選択する。(東京リージョンらしい)

項目 設定値
名前 任意の名称をつける。
ゾーン 「asia-northeast1-a」を選択する。(東京リージョンらしい)
マシンタイプ 必要なスペックに合わせて選択する。安さ重視ならmicro。
ブートディスク 入れたいOSを選択する。
IDとAPIへのアクセス このインスタンスへ付与する権限のよう。とりあえずデフォルトのままにする。
ファイアウォール HTTPやHTTPSを使うならチェック
管理 とりあえずデフォルトのまま
ディスク とりあえずデフォルトのまま
ネットワーキング とりあえずデフォルトのまま
SSH認証鍵 自分のローカルPCの認証鍵を登録しておく

④ここまでできたら、一番下の「作成」ボタンをクリックする。
 しばらく処理待ちとなるが、処理が完了するとインスタンス生成され、グローバルIPも振られる
 
これでインスタンスの立ち上げは完了です。
SSH鍵登録をしたローカル環境からグローバルIPを指定してSSH接続できるようになっています。

ssh 999.999.999.999

※グローバルIPアドレスはインスタンス一覧画面で確認可能

Share

Atom IDEの環境構築(PHP、Go)

■環境

macOS Sierra 10.12.6
Atom 1.21.0-beta2

■参考にしたサイト

公式サイト
https://ide.atom.io/
はくたけ氏のブログ
http://tech.innovator.jp.net/entry/2017/09/14/165139
sayama0402さんのQiita
https://qiita.com/sayama0402/items/3bd8d905619c514179b7


ナウいエディタ「Atom」は、前から気になっていたのですが、

  • テキストエディタにしては重い
  • IDEにしては機能がすくない

という理由で、少し敬遠していました。

が、そのAtomからIDEが出たそうなので、試しに使ってみました。

■手順

①Atomの入手

以下サイトより、Atom 1.21.0(ベータ版)を入手してインストールする。
https://atom.io/beta

※いくつかの紹介ページを見ましたが、1.21.0が推奨されているようです。
 試しに1.20.0(安定板)でも試して見ましたが、確かに動きが怪しかったです。

②必須パッケージのインストール

Atomを起動したら、上部メニュー
Packages > Settings View > Install Packages/Themes
より、以下を検索してインストールする。

  • atom-ide-ui
  • ide-php
  • ide-go

③使って見る。

初めてgoのソースコードを開いた際には「ide-go」が依存するパッケージをインストールするか聞かれるので、
インストールします。
また、「linter」と「atom-ide-diagnostics」が競合している旨のメッセージが出るので、
そのメッセージの下にある「Disable linter」をクリックして、競合を解決します。

これで、実際に使い始められそうです。
定義ジャンプや補完機能は十分使えそうなレベルで動いてました。
また、他の無料IDE(EclipseやNetBeans)に比べると、起動が早かったです。

その他パッケージのインストール

IDEとは関係なく便利なパッケージが沢山あるので入れます。
以下、実際に入れて見たパッケージです。

■file-icons
各ファイルの拡張子に合わせてアイコンを変えてくれる。
ちなみに、Atomに新拡張子を紐付けさせるには、上部メニューより「Atom Beta>Config」をクリックし、
config.csonを編集する必要がある。

【例:以下の記載で「.inc」という拡張子をPHPファイルとして認識してくれる】

"*":
  core:
    customFileTypes:
      "source.php": [
        "inc"
      ]

『source.php』に該当する部分はPHPファイルを開いた状態で「cmd + opt + P」を押すとポップアップで表示される。
別拡張子のファイルでも同じ操作でできるはず。

■pigments
色コードを記載したら自動で該当の色でハイライトしてくれる。

■show-ideographic-space
全角スペースを見える化

■git-plus
ターミナルなしでgit操作ができる!だそうです。

■merge-conflict
gitのコンフリクト解消が楽になる。

■highlight-selected
選択した単語と同じ単語をソースコード上でハイライトしてくれる。
選択=ダブルクリックらしい。同じ変数を探す時などに便利。

■linter-php
構文チェックしてくれるパッケージ。
括弧の開閉数が不一致の時とか教えてくれる。
紐づくパッケージを諸々インストールしてねと出てくるので、それらもインストールする。
※AtomIDEにも標準で構文チェックパッケージ(?)が入っているらしく、それと競合すると警告が表示される。
 IDE標準のものはエラー検知をしてくれているのかよく分からなかったので、私は無効化してしまいました。
 (上記警告にDisableボタンが付いているので、それをクリックするだけ)

■project-manager
複数プロジェクトを管理するためのパッケージ。
プロジェクト切り替えが容易になる。
【管理対象のプロジェクトを増やす方法】
 対象としたいプロジェクトを開いた状態で上部メニューより「packages > Project Manager > Save Project」を選択
【管理対象プロジェクトの呼び出し】
 「Ctrl + Command + P」で一覧が表示されるので、そこで選択する。
 上部メニューより「packages > Project Manager > List Project」を選択しても同じ。

Share

【Mac】コマンドラインから写真の撮影日時などを確認する

■環境

macOS Sierra 10.12.6
exiftool 10.55


Macのコマンドラインから写真の撮影日時を確認する方法が知りたかったため調べてみました。
最終目標はファイル名に撮影日時を付与する事です。

exiftoolインストール

写真の情報を取り出すには、exiftoolというツールを使います。
brewでインストールできます。

brew install exiftool

写真の詳細情報を確認してみる

単純に

exiftool 対象ファイル

というコマンドでファイルの全詳細情報は取れます。
撮影日時だけに絞りたい場合は

exiftool -DateTimeOriginal 対象ファイル

とすれば絞れます。

が、

どうやら使っているカメラによって撮影日時情報が画像データに含まれていない場合や、
上記で指定した「Date/Time Original」以外のタグ名で存在する場合があるようです。

その場合は

exiftool 対象ファイル

で全情報を表示して、それっぽいのを選ぶしか無さそうです。

Share

【WordPress】テーマで指定されたCSSがうまく読み込めない

WordPressで他人が作成したテーマを使っているとCSSがうまく読み込めない時があります。
条件としては以下の両方に当てはまっている場合だと思います。

  • WordPressの管理画面と公開画面でドメインが違う
  • テーマ内にstyle.css以外のCSSファイルがあり、それをwp_enqueue_styleを使って読み込んでいる

このとき、ブラウザの開発ツールでコンソールを表示すると、以下のようなエラーが発生していると思います。

Access to Font at 'http://yourdomain1.com/wp-content/themes/sparkling/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://yourdomain2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yourdomain2.com' is therefore not allowed access.

クロスドメインなどが原因のようなのですが、手早く直したかったので
以下の修正をして直しました。

①wp_enqueue_styleをしている箇所をコメントアウトする。(テーマによるが、function.phpなどに記載あり)

// wp_enqueue_style( 'bs', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
// wp_enqueue_style( 'awe', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );

②htmlのheadタグ内にてCSS読み込み処理を記載する。(テーマによるが、header.phpなどに記載あり)
※以下例ではCDNを指定しています。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

これで正常にCSSが読み込まれ、ブラウザのコンソールからもエラーが消えました。

Share