みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

Macの開発環境を整える 2019 春(MAMP・Cyberduck・Docker・Go・rbenv・bandler・ImageMagick・MySQLの導入)

昨年末に最低限の環境を整えたのですが、もろもろ開発を進めるに当たって追加で色々導入したので、導入手順をまとめておきます。

kimizuka.hatenablog.com

MAMP

www.mamp.info

PHPのサイトをリニューアルするために導入しました。
ローカルでMySQL、Apache、PHPを簡単に動かせるので便利ですね。
ただMySQLのバージョンがMAMPのバージョンに固定されているため、こちらのページ から3.5.2をダウンロードしました(5.5系のMySQLを使いたかったため)。

www.mamp.info

PHPのバージョンは「MAMP > 環境... > PHP」から選択できますが、GUI上にはインストールされているものの新しいもの2つしか表示されないので、/Applications/MAMP/bin/phpの中に入っているディレクトリを、適当にリネームしましょう。

f:id:kimizuka:20190308112739p:plain

僕の場合は、5.2.17を使いたかったので、7.0.8と5.2.17以外のディレクトリにすべて_をつけています。

f:id:kimizuka:20190308112747p:plain


Cyberduck

SFTPでのファイルアップロードのために導入しました。
学生の頃は愛用していまして、アイコンが好きなので使わなくてもDockに置いておいた時期もあります。

Cyberduck

Cyberduck

  • David Kocher
  • 仕事効率化
  • ¥2,940

学生の頃は無料で使わせていただいておりましたが、いままでの感謝を込めてこの度購入しました。

cyberduck.softonic.jp

無料版はこちらです。


Docker

便利だという噂は聞いていたのですが、いまだになんなのかは良くわかっていません。
開発で必要になったので導入しました。

hub.docker.com

良くわからないまま雰囲気で「Docker Desktop for Mac」を導入したものの、問題なく動いております。


Go

開発に必要になったのでhomebrewをつかって導入しました。

brew install go

で、すべてデフォルトの設定にしたため、~/go/というディレクトリができました。ちょっと気になりますが、まあ良しとしましょう。

echo 'export GOPATH=${HOME}/go' >> ~/.bash_profile
echo 'export PATH=$GOPATH/bin:$PATH' >> ~/.bash_profile

で、GOPATHとPATHを通せばOKです。


rbenv ruby-build

複数のRubyのバージョンを切り替える必要が出てきたためrbenvとruby-buildを導入しました。

brew install rbenv ruby-build

のあとに、

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

でOKです。


ruby

旧バージョンのrubyが必要になったためインストールしました。

rbenv install -l

でインストール可能なバージョンの一覧を確認し、

rbenv install 2.2.2

という感じでインストールできます。

rbenv global 2.2.2

で、グローバルのバージョンを切り替え。

rbenv local 2.2.2

で、ローカルのバージョンを切り替えです。

bandler

gem install bundler

で導入できるはずなんですが、2.2.2のRubyが必要だったため、

ERROR:  Error installing bundler: bundler requires Ruby version >= 2.3.0.

というエラーに悩みました。

rbenv global 2.2.2
gem install bundler -v "1.16.4"

とバージョンを指定して導入しました。


ImageMagick


開発に必要になったので導入しました。

brew install imagemagick

でOKです。余談ですが、ImageMagickを調べていたらこんな記事に出くわしました。

blog.cybozu.io


MySQL

導入に一番苦戦しました。
5.6系を導入したかったので、

brew install mysql@5.6
echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile

で良いはずなんですが、

mysql.server start

で、起動しようとすると、

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
. ERROR! The server quit without updating PID file.

的なエラーが出て、なかなか起動できず、アンインストールとインストールを繰り返していたのですが、

/usr/local/var/mysql

を削除してから、再インストールしたところ無事に起動できるようになりました。



環境構築にほぼ丸1日掛けてしまいましたが、今回はこんな感じです。

Navigator.getUserMediaではなくMediaDevices.getUserMediaをつかう

時代に合わせて修正しました。
IEは未対応ですが、マイクロソフト自身がIEの使用を辞めるよう要請しているとのことなので問題ないでしょう。(?)

japanese.engadget.com

Navigator.getUserMedia(非推奨)

const medias = {
  audio: false,
  video: true
};
const video = document.getElementById("video");

navigator.getUserMedia(medias, successCallback, errorCallback);

function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(err) {
  alert(err);
};

MediaDevices.getUserMedia(IE未対応)

const medias = {
  audio: false,
  video: true
};
const video = document.getElementById("video");
const promise = navigator.mediaDevices.getUserMedia(medias); // promiseが返ってくる

promise.then(successCallback)
       .chatch(errorCallback);

function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(err) {
  alert(err);
};

コールバックを渡すのではなく、promiseを返すようになったのがいまっぽいですね。
併せて下記2つの記事と、

kimizuka.hatenablog.com
kimizuka.hatenablog.com

下記2つのリポジトリを修正しました。

github.com
github.com

AndroidStudioのエミュレータ内のブラウザがウェブに繋がらないときの対策

Android Studioからではなく、コマンドラインからDNSサーバを指定して起動すれば解決しました。

/Users/#{ユーザー名}/Library/Android/sdk/emulator/emulator -avd #{エミュレータの名前} -dns-server 8.8.8.8

といった具合です。
とりあえずシェルスクリプトをバッチファイルにして保存しておいたので、次回からは楽々で起動できそうです。