ページ

2015年10月17日土曜日

第46回WordBench大阪「ローカル開発環境のあれこれは俺達に聞け!」に参加して

今日は何度か訪れている JUSO Coworking でWordBench大阪勉強会が開催です。
今日は筆者も利用しているMAMPの有料版「MAMP Pro」の使用感について話しを聞けるということ、また、WP Total Hacks等有名プラグインの開発者である宮内氏の新しいプラグイン「Content Template Engine」(WordPressのコンテンツエリアでTwigテンプレートエンジンを使用可能にする)という濃い内容です。来週月曜からアメリカにいくためバタバタしているのですが、是非これは聞いておかねば!!ってことで十三までやってきました。

プログラム


MAMPとは?


WindowsやMacintoshのローカル環境に、開発環境(Apache+PHP, MySQL)を構築してくれる便利なソフトです。起動している時だけ動きます。つまりはWordPressなどウェブサーバー、データベース・サーバー(MySQL)が必要なCMS(コンテンツ・マネジメント・システム)もWindowsやMacintoshでネット接続せずに動作させることができるということです。テストには持って来いですよね!無償版MAMPでも十分使えるのですが、有料版ではどのような違いがあるのでしょうか。それを聞きたくてきました!

筆者がMAMPにであったのは、2013年2月に開催された第14回WordBench大阪でのローカル環境を使ったハンズオンのサポートをしたことが切っ掛けでした。そのときには、MAMP環境で作成したWordPressを本番環境へ移行するにはどうするのだ・・・ということをしていたものでした。この移行は、第32回WordBench大阪において説明されたWP-CLIツールを使った方法がとても便利で現在も愛用しています。

以下、聞いた内容のメモです。※から始まるのは筆者の見解や追加補足情報やコメントです。

セッション1 MAMP Proで簡単につくるWordPress開発環境(深沢氏)




※話しを聞いて、仕事で使うためMAMP Proを持っている端末の数だけ購入することを決意しました。超便利です、、もっと速く話しを聞けていればよかったなぁ。

ローカル開発環境の必要性は? 


WordPressってサーバーにあげないと動いてくれない。
これは、Webサーバー、データベース(MySQL)、PHPの3つの機能を必要とするから。つまりはサイト構築する時にファイルを変更するたびに定められた方法でサーバーにアップロードが必要になり、非常に手間となる。それ以外にも
  • 機能開発
  • WordPressやプラグインのバージョンアップ
  • 不具合の検証
  • プラグインやテーマの開発
を本番環境でやるのは許されないことが多い。許されていたとしても、問題発生してサイトがとまったらそのだ

あなたのパソコンの中に仮想のサーバーを作ればいいじゃない?


パソコンのとあるフォルダ以下をサーバーにしてしまえばいいじゃない?

でも作るの難しそう・・・


WordPressに特化したローカル開発環境作成技術はいろいろある。
  • VCCW(VAGRANTベース)-- セッション2の宮内氏が開発
  • Wocker(Dockerベース) -- WordBench大阪世話人のカイト氏が開発
  • XAMPP
  • MAMP
VCCWやWockerについては、2015年5月に開催された第41回WordBench大阪で紹介されたので参加したときの備忘録ブログをみると分かるかもしれません。

MAMP PROは、7,247円(2015.10.15)


10/17現在は、7,278円だった(https://sites.fastspring.com/mamp/product/mamp-pro?language=en&tags=en)

支払う価値はあるのか?
※筆者がしっているMAMP無償版との違いを列挙してみる
  • ホストごとに管理できる(任意のドメインで動作させることができるようだ)
    • 無償版は、localhost:ポート名(デフォルトは localhost:8888)  と固定である。
    • PROは好きな場所にすきなドメインで動作させることが出来る
  • ドメインごとにPHPのバージョンを切り替えることができる(MAMP PRO 3.0)
  • Apacheのモジュールを選択できる
  • ログもメニューから簡単にアクセスできる
  • 各種設定ファイルのテンプレートを編集できる
    • ファイル→テンプレートを編集
  • Dynamic DNSにも対応
    • ※一般的なインターネットプロバイダから割り当てられているIPアドレスは動的に変化する。その動的に変化するIPアドレスをその都度ホストに適宜割り当てる技術。これによって固定のグローバルIPアドレスなくしてウェブサイトを公開できる。
  • Postfix(SMTPサーバー)も立ち上げることができる
  • WordPressのインストール
    • MySQLでDBを1つ作成→フォルダを1つ作成→ホストからドメインを1つ追加→ドキュメントルートに作成したフォルダを選択
        これだけで ドメイン名のウェブサイトができちゃっている。
    • WordPressを、作成したフォルダへ展開し、wp-config.php でデータベース名の変更、ユーザーとパスワードは「root」を入れる
    • これでサイトへアクセスすると、おなじみのWordPressのインストール画面が出てくる

この便利さは?


本番環境に移行するのが簡単だ。ドメインがそのままなのでMySQLのデータをいじらなくてもよいからだ。 しかも、複数サイトが作れてしまう。
※wp-config.phpをいじるだけで済みそう。

さらに便利な機能がPRO 3.0にはある!!


  1. ホスト追加
  2. サーバー名(ホスト名)設定
  3. ドキュメントルートを設定
  4. 追加モジュール(PRO 3.0の新機能)で、DrupalやWordPressのインストールが簡単にできちゃう
  5. SMTPサーバー(postfix)も立ち上げられちゃうよ!

できないこと


プラグイン開発時にWordPressのいろいろなバージョンをいくつかチェックした場合がある。MAMPではWordPressのバージョンを行き来する機能はない。そういう場合には、VCCWやWockerなどの高機能システムを使うことになるでしょう。

※ライセンスは?



の一部抜粋
---
the Licensee shall be entitled to install the software at one workplace (PC or another computer to be used simultaneously by one person).
---
を適当に意訳すると、
---
ライセンスは、1つの職場でインストールできる(1人のユーザーによってPCや他のパソコンで同時に利用できる)。
---
つまりは、ユーザーライセンスのようだ。一応職場で購入するときには問い合わせておいたほうがいいかな。ただ1つの職場といっているので、職場を掛け持ちしているようなケースでは職場ごとにライセンスは別途必要だということでしょう。

セッション2 え?まだMAMPで消耗してんの? (宮内氏)


※なかなか挑発的なタイトルになってる。
※黒い画面 = Macではターミナルのこと。以下はターミナルアプリでの実行となる
アプリケション→ユーリティリティにターミナルはある



  • Windowsは無視
  • 黒い画面ですが、簡単
  • 簡単に無かったことにできるからメンテナンス不要
    • パソコンを再起動したら全部消える

※以下、MacOSX標準の機能で実行できる(古すぎるMacOSXは知らない)。

python -m SimpleHTTPServer

Serving HTTP on 0.0.0.0 port 8000 ...

と出てくる。コマンドを叩いたフォルダが localhost:8000 のウェブサイトになる。コマンドを終了したら、サーバーは停止する。PHPやデータベースはないので、それらを使っていないツールを試したり、静的HTMLのチェックが簡単にできるよ。

終了は、Ctrl-Cで終了。

npm install -g http-server
http-server -c1 -o


Node.jpを使ったウェブサーバー
フロントエンドのテストの自動化に便利

※Node.jpの事前インストールが必要。

※実際には、 npm install -g http-server をしてソフトを入れた後、一旦ターミナルを終了して再起動してください。パスを通すためです。このインストールは1度のみでOKです。筆者環境では、sudo npm install -g http-server をしなきゃインストールエラーになった。これは、 Node.js をsudoで入れてしまっている悪い例だから、一旦Nodeを削除して入れなおしたほうがいいということ。


http-server -c1 -o を叩いたフォルダが、127.0.0.1:8080 になります。

終了は、Ctrl-Cで終了。

php -S localhost:8000


PHPが有効なウェブサイト localhost:8000ができる。
PHP5.4で実装された機能。MySQLも対応している。
これを叩いたフォルダにWordPressを展開してアクセスするとインストーラーが起動してしまうよ。

※注意点:MySQLをHomebrewとかでゴニョゴニョ開発環境を構築している人は、ソケットではまる可能性ありということ。
   
http://qiita.com/kon_yu/items/056281eb3a017d7051ec 参照
あるいはMAMPなどが他のツールが起動しているとダメな場合がある。
WP-CLIと組み合わせると、自動でWordPress導入まで実現しちゃう。

終了は、Ctrl-Cで終了。

以上紹介したものを削除するには


Ctrl-Cで実行したコマンドを終了し、フォルダを削除すればいい

データベースのバックアップは?


WP-CLIがインストールされていれば、
WordPressをインストールしたフォルダにて、

wp db export 

wpdev.sqlが出来る

データベースの復元は?


WordPressをインストールしたフォルダにて、

wp db import wpdev.sql

(wpdev.sqlも移動しておいて)

でよい。

外部から確認させたい?「ngrok 8080」

localhost:8080 でウェブサイトが外部から閲覧できるような環境で立ち上がります。

※先に、Homebrewをインストールし、brew install ngrokでインストールしておきましょう。
※MacOS 10.11では、Error: Suspicious failure ということでインストールできなかった。まぁbrewが新バージョンじゃないからかもしれない。
※詳細は、http://liginc.co.jp/web/programming/156484 あたりか?


メール送信環境を整えよう MailCatcher


※先に gem のインストールが必要

Macの外にでようとしているメールを全部キャッチして、ここで吸収してくれる。
起動しているときだけ有効。


セッション2−2 WordPressプラグイン「Content Template Engine」について(宮内氏)


WordPressのコンテンツエリアでTwigテンプレートエンジンを使用可能にするプラグインということ。

WP-CLI超有名な開発者(ダニエルさん)からプルリクがきたという、すごいプラグイン。

※セッション2の方を気合入れすぎて、こちらのスライドは間に合わなかったてこと (^^;

カスタムフィールドに設定したデータを独自ショートコード({{◯◯}})でコンテンツエリアにはりつけられる。

ビジュアルエディタを無効化(各投稿とか)できる。コンテンツエリアを管理者以外には見せない機能ができる(つまりデータはカスタムフィールドだけでいじれっていえる)。

※これは便利そうだ!! これテンプレートでやったことあるけど大変だったんだよなぁ。

Advanced Custom Field プラグインにも対応している!!


毎回同じフォーマットを使いたい!!


{{ include_post('ID番号') }}

で特定投稿データのコンテンツを入れることができる。

デフォルトはエスケープしている


HTMLタグは、HTMLとして実行されるのではなく単なる文字として表示される。
セキュリティリスクを軽減できる。

Advanced Custom Field の Repeaterフィールドを利用した可変カスタムフィールドのデータをコンテンツエリアの表示


※Advanced Custom Fieldのバグで、タイトルを入れずに公開して項目足りずにエラーがでるとやり直さねばならない。

テーブル形式のデータを容易にいれることができる。変な風にいじらせずに。

{ % for fruit in post.acf.fruits %}
{{ fruits.name }}
{ % endfor %}

※これは、投稿の Advanced Custom Fieldのfruitsグループ内にある、fruitというカスタムフィールドのnameラベルのデータをループ表示させているということかな。

テーマに依存しないのが特徴



0 件のコメント:

コメントを投稿