フォローアップ：初めてのテーマディレクトリ申請と気をつけたポイント – WordBench東京 12月勉強会

youthkee
このエントリーをはてなブックマークに追加

wbtokyo201612_01
12/18に新宿のNHN テコラス株式会社で開催されたWordBench東京 12月勉強会「Xmas＆年末LT大会！」で「初めてのテーマディレクトリ申請と気をつけたポイント」という内容で登壇させていただきました。
その際の発表内容と補足事項をまとめたので、フォローアップとして掲載したいと思います。テーマ制作やテーマレビューに興味がある人に、何かの参考にしてもらえると嬉しいです。

テーマレビューのために気をつけたポイント

先月11月に私が公式ディレクトリに公開した「tsumugi」というテーマについては、こちらのエントリーで簡単に紹介しましたが、申請してからレビューが開始されるまで約5ヶ月の期間がかかりました。

これは当初聞いていた噂通りではあったのですが、テーマのレビュー（審査）を有志のボランティアで行っている体制の他、テーマレビュー自体がとても大変だという事情があります。

そこで、自らテーマレビューをやってみた経験を踏まえて、最初からレビュー対策をしておけば、少しでもスムーズに審査をパスできるのでは？と考えました。今回私が特に注意したポイント以下の3点になります。

  • テーマレビューと同じ環境を作る
  • スターターテーマを使う
  • CSSフレームワークを使う

テーマレビューと同じ環境を作る

wbtokyo201612_02

テーマの審査を行うレビュワーは、デバッグ用の環境を用意して、実際に動作を確認しながらテーマのチェックを行います。その際に使用するテスト用の投稿データ（テーマユニットテストデータ）や、テーマチェック用のプラグインなどもあるのですが、そういう便利なものがあるなら、テーマの制作段階で最初から入れてしまった方がいいでしょう。

さらに、レビュワーさんは、たいてい英語圏のWordPressユーザーなので、英語環境を基準にチェックを行うと予想できます。それであれば、テーマ制作者の方も、英語版のWordPressを立てて、そちらをベースに制作を進める方が理に適っています。

とはいえ、私たちは日本人なので、日本語の見栄えも当然気になりますから、ここでマルチサイト機能を利用することにしました。マルチサイトを使って、ローカルに日英2サイトを構築しておけば、1つのテーマを編集しながら効率的にデバッグ作業が行えるのです。

TIPS：VCCWでデバッグ環境を構築するには

私はローカル環境にVCCWを使っていますが、VCCWならこれらの面倒な環境構築も一発で行うことができます。VCCWでテーマユニットテストデータのインポートと、マルチサイトの有効化を行いたい場合は、site.ymlに以下の記述をしておけばOKです。

theme_unit_test: ture
theme_unit_test_uri: https://raw.githubusercontent.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml
multisite: true

※子サイト側のテーマユニットテストデータは、環境構築後に別途インポートしてください。

スターターテーマを使う

wbtokyo201612_03

次にスターターテーマとして、Automattic社が提供しているUnderscoresを使用しました。Underscoresは、WordPressの基本的な機能やタグが全部入っているので、それだけでも作りやすいのですが、テーマ制作者の間でも非常に有名な存在です。

そのため、申請されたテーマがUnderscoresを使っているかどうかは、レビュワーも見ればすぐに分かります。そういう場合には、diffツールでオリジナルのソースと差分を見ながらチェックすることが多いようです。

つまり、Underscoresをベースにして、余計な部分は触らずに、必要最小限の改修を行えば、レビュワーにとってはものすごく負担軽減になるはずです。これは、もちろんケースバイケースになると思いますが、通常のブログテーマを作る分にはこの手法で十分に事足りるのではないでしょうか？

TIPS：WP-CLIでUnderscoresをインストールするには

さて、Underscoresは公式サイトからzipファイルをダウンロードして使用することもできますが、WP-CLIというコマンドラインツールを使うと、さらに簡単に導入することができます。先ほど紹介したVCCWにも、WP-CLIが同梱されているので、ローカル上で以下のようなコマンドを実行するだけでOKです。

vagrant ssh
wp scaffold _s tsumugi --theme_name="tsumugi" --author="youthkee" --author_uri="http://littlebird.mobi/" --sassify --activate

CSSフレームワークを使う

wbtokyo201612_04

HTML側はUnderscoresが品質の担保になりますが、CSSにも著名なフレームワークを使うことをオススメします。「tsumugi」では、最もメジャーなCSSフレームワークであるBootstrapのバージョン4を使っています。

BootstrapのようなCSSフレームワークも、レビュワーの方は当然知っているので、それだけでも安心感がありますが、今回私はBootstrap本体とオリジナルのCSSを別ファイルに分ける形で制作しました。こうすることで、レビュワーさんはオリジナルのCSSだけをソースチェックすればよくなるので、格段に負担が軽くなるのです。

CSSファイルは、Bootstrapのスタイルを上書きしているtsumugi.cssの他に、Underscoresで元から定義されているstyle.cssの合計3つで構成されています。style.cssの方は、Underscoresのオリジナルとの変更点だけを確認すればいいので、レビューする際のチェックポイントが明確になりますよね。

TIPS：Bootstrap 4だと何が違うの？

Bootstrapの正式版は現在バージョン3ですが、次期バージョンのBootstrap 4もアルファ版として利用することができます。スマートフォン向けのブレークポイントが増えていたり、フォントサイズの調整がしやすいrem指定が導入されていたりと、便利なポイントが多いのも魅力です。詳しくは、以前Qiitaに投稿したエントリーにまとめてあるので、そちらも参考にしてみてください。

⇒Bootstrap 4の主な変更点とファーストインプレッション – Qiita

※こちらのエントリーは2016年3月時点で書かれたBootstrap 4 alpha 2に関する内容になります。2016年12月時点では、alpha 5がリリースされているので、最新の仕様については公式サイトのドキュメントや公式ブログを参照してください。

まとめ

wbtokyo201612_05

さて、実際のレビューではいくつか細々とした修正依頼が来て、さすがに一発OKではなかったのですが、根本的なバグや表示崩れと行ったクリティカルな問題がなかった点では、今回採用した制作フローがうまく機能したのではないかと思っています。

ライセンスの表記は、スクリーンショット等に含まれている写真などの権利も含めて書く必要があるとか、圧縮版のCSSを使用する場合は、圧縮前のファイルも同梱する必要がある、という指摘など個人的には目からウロコの内容も多かったので、非常に勉強になりました。（レビュワーさんの指摘をヒントに、慌てて実装した新機能もあったりします・・）

結果的にほぼ一回の戻しで対応が完了し、レビュー開始から4日間で承認までもらえたので、かなり審査がスムーズに行った方だと言っていいのではないでしょうか？今回紹介した各ポイントを含む、詳しい制作過程はGitHubに公開しているので、興味のある方はそちらもチェックしてみてください。

⇒制作過程 · littlebirdjp/tsumugi Wiki

WordBench東京 12月勉強会を終えて

今回は「Xmas＆年末LT大会！」ということで、最初からビールを飲みながら、ゆるい雰囲気で楽しめたのはすごくよかったと思います。さらに、ピザやケーキまで提供していただき、勉強をしながらクリスマスパーティ兼忘年会ムードも満喫できたので、かなりお得感のあるイベントだったのではないでしょうか？

会場となったNHN テコラス株式会社さんのオフィスは本当に広くてオシャレな空間でした。
会場となったNHN テコラス株式会社さんのオフィスは本当に広くてオシャレな空間でした。

今回のLTでは、5分間という時間制限がキッチリ守られていたので、時間が足りなくなってしまった人は最後までしゃべれないという厳しい一幕も・・。私は今回、時間配分だけはうまく調整できたのですが、そのためにどこを削ぎ落とすべきかは毎回悩みますし、もっと抑揚を持った伝え方をするべきだと思ったり、色々と課題は残りますね。

なんとこの日は、わぷー5周年を記念したケーキも登場！クリスマス気分で美味しくいただきました。
なんとこの日は、わぷー5周年を記念したケーキも登場！クリスマス気分で美味しくいただきました。

他の皆さんの発表も興味深い話がたくさんあったのですが、高野直子さんによるWordPress 4.7の最新トピックや、大串肇さんのそれを踏まえた生き残り戦略なども聞くことができたので、非常に有意義なイベントになりました。今後も機会があれば、こういう勉強会に参加や登壇をしてみたいと思います。

wbtokyo201612_08

次回のWordBench東京は、1月29日（日）に開催予定だそうなので、興味のある方は今後のイベントもぜひチェックしてみてください。

⇒WordBench東京 | Doorkeeper

WordPress関連記事