mimizukuを触ってみた

MW WP FORMHabakiriでおなじみのキタジマさんの新しいテーマmimizukuを触ってみました。



inc2734/mimizuku

触ってみた感想を一言で言うとすると、わかる人にはさくっと使いやすくて、わからない人はどこで躓いてるかもよくわからない可能性あるかもなと思いました。ちなみに僕は後者です。

いくつかの点について順に触れます。

導入

導入は、恐らく非常に簡単です。恐らくと書いたのは僕がそこで躓いたから。

まず、公式ディレクトリに公開されているHabakiriと異なり今回はGitHubでのみの公開です。まずここで、普段からGitを使いこなしていない人間にとっては既に雲行き怪しいです。僕は使ってみようと思ったもののGitHubのページを開いてさて最初に何をすればよいか、としばらく途方にくれました。

mimizukuは子テーマ開発用の親テーマであることは個人的に親交があるご本人から直接聞いていたのですが、とりあえず親テーマを入れねばなるまいと親テーマのファイル一式をダウンロードして解凍してみても、そのままではstyle.cssが存在しないため、そのままだと単独のテーマとして機能しません。

えーとこれは、もしかしていわゆるビルドってやつをやらないとなのか?と悩んだ末、小賢しくもjsonファイルなどを覗いてコマンドを色々試してみたりもしてみましたが当然ダメ。ここで初めて、あ、READMEを読もう、と思いつきました。

なぜそこが飛ばされていたかというと、全文英語だったからです。その程度です。なんちゃってフロントエンドエンジニアのメンタル及びリテラシーは。
しょうがないから拙い英語力を駆使して読んでみたところ、以下の記述が。

Mimizuku is a parent theme. So you should download the Mimizuku child theme. See
https://github.com/inc2734/mimizuku-child. If you build this child theme, aloso downloaded Mimizuku by composer.

どうやら子テーマ側でのビルドのスクリプトに親テーマのダウンロードとビルドが含まれているらしい。

そこで子テーマのページに移って今度は諦めて最初からREADMEを読んでみたところこちらにはInstallの文字が。おお、やっと…と思いつつ、コマンドラインから実行してみるものの、ものすっごい時間を食った末にタイムアウト、というのを何度か繰り返し、困りました。エラーメッセージを読んでみるも、jsonファイルに書かれてる内容のどこでタイムアウトになりまして、なんて書いてあるだけで、じゃあどうすれば解決するのかがよくわからない。

GitHubのissueでキタジマさんに質問してみたところ、以下のようなお返事が。

composer install の中でnpm install も行うようにしているため、npm install に時間がかかると composer がタイムアウトしてしまうようなのです。
下記の手順を試してみてください。

/mimizuku-child/vendor/ を削除
/mimizuku/ も削除
/mimizuku-child/composer.json の “process-timeout”: 600 を 10000 とか大きい数字にする
もう一度 composer install

試してみましたが僕の環境ではこれでも解決せず。

そこでcomposer.jsonを見てみたところ、installの中にビルドをまとめて書いてあるようでしたので、そのビルドの内容を全て個別に実行してみたところ無事にインストール完了。

どうやら単純に僕の環境が遅すぎることが原因だったようでした。

ちなみにそのことを報告後、”process-timeout”を0に設定して無制限となったようなのでタイムアウトは起こりづらくなったことと思います。

子テーマカスタマイズ

今回のmimizukuのコンセプトは恐らく年末のアドベントカレンダーでご本人からじっくりと語られることと思いますが、とにかく無駄をなくしたかったとのこと。確かに、清々しいほど何も無いです。

なので、カスタマイズしたい箇所は全て自分で用意して手を加えていく形になります。

ただ何も無いとは言いつつも、gulpfile.js、package.jsonなどは全てパッケージされて提供されているので、gulpを走らせるだけで開発環境が手に入ると考えるとスタートアップテーマとしてすごく助かるような気がします。

スタイルシート

CSSはメタ言語で書かれており、プリプロセッサは今回stylusです。

stylusを使わず別の言語で書きたい場合は自分で別の言語の環境を用意すればいいのだろうと思いますが、親テーマのstyle.stylを子テーマのstyle.stylにインポートする形で取り込んでいるので、stylusを使わない場合は親テーマ側で用意されているCSSやウェブフォントなどのコンポーネントが使用できないということになります。

親テーマにはBasisというキタジマさん開発のCSSフレームワークが含まれており、フレックスボックスの実装周りなどなかなか便利です。なのでできればstylusを使いたかった。

ということで調べてみたところ、記法はscss記法でも全然問題ないとのこと。条件分岐とか使うと結構違ってくるとのことでしたが、僕はもともとsassでもそこまでのコアな使い方はしていないので、これsass使う感覚でこのままいけるんちゃうの?と思ってそのまま普通にやってみたら、ほぼそのまま行けました。

僕の使い方でsassと違ったのは変数の扱い周りで、$をつけなくてよかったり、展開したものを連結したいときなど少しだけ調べましたが、基本はほぼそのままこれまでと同じ感覚でCSSを書くことができました。

親テーマ側での詳細度についても恐らく子テーマを想定して低めに書いてあるのだと思いますが、何も考えずにstyle.stylに既存クラスへのスタイルをゴリゴリ書いてもそのまま反映されるので助かります。

画面を構成するパーツ

今回のテーマのコンセプトの結構大きめの軸としてビューとレイアウトの分離を目指したとのことで、mimizukuで何か変えたいときにいじるところは主にビュー部分になるかと思います。

mimizukuではWordPressが基本的に使用するPHPファイルは全て表示用のファイルを呼び出す役目だけに特化しており、HTML構造などはviewやtemplate-partsなどのフォルダ内のファイルに記述します。

どれがどの表示に関連しているのかはやはり元のソースを見て呼び出されているファイルを特定し、子テーマフォルダにコピーして子テーマ側で編集という手順を踏みます。これは他のテーマと同様です。

PHPのバージョン

おまけとして、ここで躓く人なんてあんまり居ないと思いますが…

ローカルで開発を進めてデプロイしてみたら、サーバ上でだけうまく動きませんでした。それもテーマが一覧に出たり出なかったり、他のテーマファイルを選択してることになったりした後、管理画面にアクセスできなくなったりという不穏な動き。

これは、PHPのバージョンに拠るものでした。

僕はさくらを随分前に契約してそのままに使っているのですが、PHPのバージョンがなぜか5.4指定で固定されており、mimizukuの必要環境が5.6以上のため正常動作しなかったようです。PHPのバージョンは管理画面から変更できるのですぐに最新バージョンの指定にしたところ問題なく動作しました。

サーバのPHPのバージョンとか何もいじらなかったら常に最新になってるのでは的思い込みで、確認さえしていなかったので僕にとっては割と落とし穴でした。行き詰まってキタジマさんに聞いてみたらすぐにサーバのPHPのバージョンを確認するよう助言を貰って助かりました。それがなかったら意外とそこで長く躓いていたかも…

雑感

余計なものが何もないということで、自分で全てを決定できるサイトなら非常に使いやすいような気がしました。前作のHabakiriでは意外と痒いところに手が届く感あったんですが、痒くないのにあらかじめ孫の手があった場合にそれが少しひっかかる、なんてところもあったので、今回は潔い削ぎ落としっぷりだと思いました。

実際の案件に使えるかどうかの懸念点としては、まず、組み込まれているBasisがフレックスボックスを中心としたフレームワークということで、IE対応に向かない面があるということ(それでも古いバージョンへの対応はかなりされているようにはお見受けしますが)

でもそれは対応ブラウザを絞ることで対応可能というか、いいかげん古いIEがどうのこうの言うやつがみんな◯ねばいい!っていう話で、そもそもMSが相手にしてないってんだよ、という側面もあるので大丈夫かなと思いました。

もう一つは、この設計思想がWordPressのコアと今後どういう関係になっていくのかなということ。難しい話はよくわからんのですが、この設計思想はやや先鋭的、とのこと。

僕のような、ほんとにフロント寄りのコーダーがただ使う分にはテンプレートファイルが細かく分かれているスタートアップのベーステンプレートとしてすごく使いやすく感じます。僕はまだ試せていませんが開発環境のみならずテスト環境も同梱しているとのことで、テーマ開発にはすごく馴染みのよいものなのではないでしょうか。

よくわからないけど、よくわからないなら余計にわかってる人が作ったものを使うほうが、下手に自分で変なカスタマイズやっちゃうより安全だよなという気はします。

なので、今後の案件で活かしどころがあれば積極的に使ってみようかな、と考えています。