VCCWを使ってWordPressの開発環境を整えて、WordMoveでhetemlにDeployする

個人的にWordPressを使った環境構築をする機会があったのでメモ。 環境構築はするけど、WordPressは殆ど触った事がない人間です。

開発環境構築

なぜVCCWか？

こちらのページが結構参考になりました。

VCCWとWockerの比較。wordpress開発の新しい選び方。 | codechord

WordPressの開発では、VCCWとWockerというメジャーなものが２つあって、前者はVagrantベース。後者はDockerベース(Vagrantの中でDockerを起動している)のよう。

VCCWはガッツリいろいろなものが揃っているのに対して、Wockerはシンプルで起動も軽量という特徴があります。

僕は両方使ってみた上での比較はしませんでしたが、WordMoveが最初から入ってるのでよさそう。という理由でVCCWを使って環境構築をする事にしました。

VCCWで環境構築

qiita.com

こちらを参考にやった。細かい説明は↑に書いてあるのでコマンドだけメモしておく。 Vagrant環境は既に構築している前提。

vagrant plugin install vagrant-hostsupdater
vagrant box add miya0001/vccw
git clone https://github.com/vccw-team/vccw.git wordpress-sample
cd wordpress-sample
vagrant up

※vagrant-hostsupdaterの機能で/etc/hostsに設定を入れるので、ルートのパスワードが途中で要求されます

これでしばらく待った後、以下のURLで見れるようになる。

http://vccw.dev/

めちゃ簡単だった。

カスタマイズ

これも先ほど上げた参考サイトに書いてあった。

http://qiita.com/naru0504/items/58011181f2c271808c7f#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B

cp provision/default.yml site.yml

コピーして出来たsite.ymlを編集していく。

• メモリの割当量
• ホスト名（ローカルで見るURL）
• 日本語化とタイトル
• ユーザとIDの変更（admin/adminで入れないようにしとく）

この辺を修正しました。

一通り終わったら、

vagrant reload --provision

これで設定が反映される。

WordMoveでhetemlにDeploy

WordMoveとはひとことで言うとめっちゃ便利です。

github.com

以下の２つのブログを読むとだいたいわかると思います。

firegoby.jp

torounit.com

rsyncかFTPか

WordMoveのDeployはrsyncとFTPの２種類出来るようになっています。

上であげた参考サイトにFTPを使った場合だと、

ただ、やりとりするファイルが多いと接続が切れたりする事があるようです。

こう書かれてあったので、出来ればrsyncでやれたら幸せだなぁと思っていました。しかし、残念ながら、hetemlではrsyncが動かないようでした。（僕が確認した今現在）

hetemlでrsyncが動くようにする

vagrantの中でrsyncをコンパイルしてバイナリを作って、それをheteml上で動かします。

vagrant ssh
cd /tmp
git clone git://git.samba.org/rsync.git
cd rsync
git checkout v3.0.9 # masterだと最新のautoconfを要求されたので一つ前のバージョンにした
./configure
make

これでrsyncというバイナリが作成されます。

heteml上では、自分のホームディレクトリにbinフォルダを作り、そこにパスを通して先ほど作成したrsyncを置きます。公開鍵をheteml上においたり、~/.ssh/configに設定したりしておくのは各自やっておくと便利です。

# hetemlの自分のホームディレクトリ
mkdir bin

# ↑で作成したbinフォルダにrsyncを置く
# 手順省略

# .bashrcに以下を追記
export PATH=$PATH:$HOME/bin

# 読み込み直し＆確認
source .bashrc
rsync --version # これでバージョンが出れば成功

以上でheteml上でrsyncが動くようになりました

WordMoveの設定

Movefileを編集します。僕の場合は以下のようになりました。

local:
  vhost: "http://vccw.dev"
  wordpress_path: "/var/www/wordpress"

  database:
    name: "wordpress"
    user: "wordpress"
    password: "wordpress"
    host: "localhost"

heteml:
  vhost: "http://hoge.heteml.jp/vccw-sample"
  wordpress_path: "/home/sites/heteml/path-to-your-folder/web/vccw-sample"

  database:
    name: "_heteml_user"
    user: "_heteml_user"
    password: "password"
    host: "hoge.heteml.jp"
    charset: "utf8"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"

  ssh:
    host: "hoge.heteml.jp"
    user: "hoge"
    port: 1234
    rsync_options: "--verbose"

※パスワードやユーザ名や、port番号などは適当なものに変更しています。また、sshは鍵を通しておく事で、パスワードを記述するがなくなるのでオススメです。

Movefileの設定について詳しく知りたい方は、僕が挙げた参考サイトに解説がのっていたり、VCCWをgit cloneした時にデフォルトで作成されているファイルに説明があるのでそれを参照してください。

hetemlはDBへのアクセスがsshを踏み台にしてDBアクセスしないとダメですが、これもよしなにWordMoveがやってくれているっぽいので感動しました。

Deploy

vagrantの中に入ってDeployします。

vagrant ssh
cd /vagrant
wordmove push -wtplv -e heteml

オプション周りはhelpを見てある程度ご察しください。基本的には、git管理されるであろう部分をそのままDeployのオプションに加えているイメージです。

Options:
  -w, [--wordpress], [--no-wordpress]
  -u, [--uploads], [--no-uploads]
  -t, [--themes], [--no-themes]
  -p, [--plugins], [--no-plugins]
  -l, [--languages], [--no-languages]
  -d, [--db], [--no-db]
  -v, [--verbose], [--no-verbose]
  -s, [--simulate], [--no-simulate]
  -e, [--environment=ENVIRONMENT]
  -c, [--config=CONFIG]
      [--no-adapt], [--no-no-adapt]
      [--all], [--no-all]

-eは、WordMoveで設定した名前みたいなものです。stagingとか、productionとか複数設定できるので、非常にべんりー

ちなみに、

wordmove pull --all -e heteml

こうすると、サーバ上のDBやらいろいろ全て取ってきて、いい感じに手元に反映してくれます。これで開発環境すらない環境でもさくっと開発環境が作れるかも！？但し、DBの容量が大きかったり、uploadsフォルダの中に結構ファイルが入ってると上手く動かないかもしれませんねぇ。

注意点としては、↑のコマンドのpullをpushに変えるとローカルの内容を全てサーバ上に反映してしまいます。DB周りはバックアップを取ってくれるらしいのですが、uploadsフォルダなどはどうなんでしょうね。この辺は、誤ってこういう事が置きないようにシェルスクリプトで指定したコマンドのみ実行するなどの対策をしておきたいところです。

一先ず、これでDeployも完了〜

git管理に追加する

VCCWでは、.gitignoreでWordPressのソースや、Movefileなど、無視するようになっています。git管理しとかないと、チームで共有出来ないので、以下のファイルについては無視しないようにしました。

Movefile
www
site.yml

また、WordPressのソース自体にも、.gitignoreがあって、.htaccessを無視するようにしていたので外しました。以下の場所にあります。

www/wordpress/.gitignore

.htaccessはApacheだけに作用するものなのでデフォルトで無視するようにしているんですかね？今回はhetemlでApacheなので無視しないようにしました。

以上で一通り終わり！

と思ったけど、VCCWがバージョンアップした時にこのやり方だと、ちょっと面倒くさいかも？という感じ。。

最後に

いかがでしたでしょうか？今までWordPress微妙にしか絡んでこなかったですが、WordMoveが便利過ぎてすごい！という感じになりました。今後もあまり絡む機会はないと思うけど、Deployの自動化などは出来そうであればやってみたいなぁと思います。

ステーィブ・ジョブズⅠ・Ⅱを読んだ

スティーブ・ジョブズ　I

スティーブ・ジョブズ　II

結構前にKindleで50%ポイント還元セールをやっていた時に買って、しばらく積読になっていたけど、やっと読む気になって読みきった。

とても長かった。途中、何度も挫折しそうになったけど、無事に読み終えてよかった。アップルを追い出されたり、ピクサーを立ち上げたところや、トイ・ストーリーが大ヒットしたところなどなど、微妙に知ってるけどちゃんと知らない事とかを知れてよかった。

途中、いろいろな登場人物が出てきて誰が誰だか見失ったりもした。。。

そんなこんなで最期は家族や親しい人に看取られてめでたしめでたしという感じだった。今から自分の最期を考える事なんてあんまりないけど、こんな感じの最後がいいなぁと思った。

久しぶりにこの言葉を思い出した。

“Stay hungry, stay foolish”

www.youtube.com

WEB+DB PRESS Vol.92に寄稿しました

WEB+DB PRESS Vol.92

gihyo.jp

特集１ 「Web開発新人研修」の、第6章「モバイルアプリ開発の特徴」を担当させて頂きました。

「Web開発新人研修」は僕を含む弊社ペパボのエンジニア7人が各章を担当して書いたものです。 ４月からWeb開発者になった方や、経験がまだ浅い方向けに、ハンズオンを中心に基礎的な部分を解説しています。

「Web開発新人研修」ということで僕が担当した章では、Web開発者から見たモバイルアプリ開発という視点で書きました。是非読んで頂けるとありがたいです！！！！！！１ 今回初めての執筆経験で、いろいろとテンションが上がっている今日このごろです。とりあえず、実家の親にはAmazonで買って送っときました。

今回、執筆のチャンスを与えてくださった、@june29さん、やりとりさせて頂いた技術評論社の池田さんどうもありがとうございました！！

Android Studioでエディタの画面だけをのこして他は最小化するショートカット

Hide All Tools Windowsという名前らしい

shift + ⌘ + F12

これでいけた。たぶんIntelliJとかも一緒だと思う。 ショートカットは各自の環境によって違うかもしれないので、shift２回押して確認した方がいいかもしれない。

これでよしっという気持ちでエディタだけにして、集中するきっかけを作ったり作ってなかったりしてる。

Android StudioでOffline workを使う

Android Studioでビルドしている時に、 まれに全然終わらない事がある。

そんな時は、

Preferences
→Build, Execution, Deployment
→Build Tools
→Gradle

ここのOffline workにチェックを入れると解決することがある。

kittoworks.hateblo.jp

なので最近は、ここにずっとチェックを入れっぱなしにしている。

でも、新たにdependenciesを追加した時には、ダウンロードされない。 なので以下のコマンドを実行する

./gradlew preBuild

これで必要なものが一通りダウンロードされるので便利。 いや、便利なのかな？

imagepoiというアプリを作った

https://github.com/mapyo/imagepoi

なぜ作ったか？

検証機でいろいろテストしてて、この画面でスクショを撮って自分のPCに移動させてissueに書きたい。という事があると思う。

そういう時に検証機でとったスクショをどうやってPCまでコピーするか？というのが一手間かかってしまう。エンジニアだと各自でいい感じに出来るのだけど、CSさんやちょっと検証機でアプリを触って見た人にとってはそれなりに敷居が高い。

なので

画像を共有するとslackの特定のちゃんねるにpoiっと画像がアップ出来るやつを作りました。

こんな感じでやれば行けるはずです。

git clone git@github.com:mapyo/imagepoi.git
cd imagepoi
cp gradle.properties.sample gradle.properties
vim gradle.properties
# tokenとchannelを設定してください

そして、ビルドして、apkをDeployGateとかで配布すればOK

Thanks

http://hack-it-iron.hatenablog.com/entry/2015/11/25/121549

この時のポテチでこれめっちゃ便利やん！と思って使おうとしたけど、この頃は仕様としてslackのbotユーザで画像をアップロード出来なかった（はず。。）ので諦めたけど、最近見てみたらアップできるようになってた。

とはいえ、slackにアップする部分はここに書いてあるやつを使わずに、自分で作ってみた。

そして

これ便利でしょー。って社内のディレクターさんに共有しにいったら、Pushbulletというイカしたサービスを使ってて、全くこれを使う必要がなかったので完全に出鼻をくじかれた気持ちになった。

今後

何か一通り動くものが出来たら満足してしまった。 画像を共有した時に画面が立ち上がるのでそうならないようにしたい。他にも、設定画面を作って後からtokenとかチャンネルを設定するように出来れば、Google Playとかにも公開できそう。そして、slackだけじゃなくて、例えばメールとか、画像をpoipoiどこかにアップ出来るようにしていきたい。

でも、既にそういうアプリありそう。そんな今日この頃。

Anker SoundBuds Sportを買った

Anker SoundBuds Sport (Bluetooth 4.0 防水イヤホン) 【8時間連続再生 / IPX4防水機能搭載 / 内蔵マイク搭載】 iPhone、Android各種対応 スポーツイヤホン (ブラック)

今日から使い始めたけど、なかなかいい感じ。

改善点としては、 小さくすると無音になるし、無音から１つ大きくするとちょっと音量が大きいなぁ。という状態になるので、もうちょっと細かく音量を設定できたらよさそう。

そもそもなんで買ったかというと、かなり前に

TSdrena Bluetooth 4.1ワイヤレスイヤホン(英国CSR社チップ搭載/apt-X対応) カナル型ヘッドセット/マイク搭載 HEM-BLYHG

これを買って使っていたのだけど、イヤーチップが取れてどこかにいってしまった。 予備のイヤーチップがどこかにあったはずなのだけど、見つけられなかったのだった。。。 これはこれでよかった。