先日、WordPressテーマ「Cocoon」を作成しました。
これが何とか作れたのは、コーディングに関する面倒事をほぼほぼツールに任せることができたからです。
正直、自動化出来るところはツールなどに任せられないと、やってられないくらい、もはや必需品です。
というわけで、以下は「僕がWordpress開発をする上で大いに役立ってくれたツール・サービス集」です。
常識的なものもあるかもしれないけど、良い機会なので一度まとめておこうと思います。
目次
エディター
料理人にとっての包丁ばりに、良いエディターはプログラムをする上で重要。
Sublime Text
こういったエディターのオートコンプリート（入力補完）機能がなければ、正直コードを書く気すら起きません。まず関数名が覚えらんない。
入力感も良いし、Grep検索も速く見やすいです。プラグイン（パッケージ）が豊富。有料だけど、ほぼほぼ無料で使えます（※僕はライセンスを購入しています）。
参考 WordPress開発向けSublime Text3環境の構築方法まとめ
Visual Studio Code
こちらは無料のエディター。
VS Codeの方に、Sublime Textと同等のプラグインがあれば、迷わずこっちを使うくらい、サクサク軽快なエディターです。
今回は、Sublime Textはコード編集用、VS CodeはWordPressコアファイル参照用として利用しました。1つのエディターで両方ともやっちゃうと、わちゃわちゃになってしまうので、エディターによってそれぞれ用途を分けています。
プログラミング補助
プログラミングをする上で、面倒事を代わりにやってくれるツール・サービス。
Koala
無料のSCSS、Sass、LESSコンパイラ。
SCSSを使うだけでもかなり楽になります。僕は、SCSSを用いて1つのソースコードで、通常用、AMP用、管理画面用と3種のCSSをコンパイルさせました。それにより、ほぼほぼ重複コードを書かずに済みました。
加えてKoalaは、コマンド操作ではなくGUIでSCSS等からCSSファイルを自動生成してくれます。やっぱり、GUIだと直感的に設定できるのが利点。
ファイルの更新状態を自動で監視して、勝手にコンパイルもしてくれます。なので、コーディング後、操作しなくても勝手にCSSが生成されているのは楽。操作が必要だと、つい忘れちゃうので。
参考 KoalaというSCSS（SASS）開発補助ツールを使ってWordpressテーマの開発効率を手軽にアップする方法
codic
日本語から良い英語の変数名や関数名を提案してくれます。
プログラミングでネーミングに迷ったらとりあえず、このツールに聞いてみるといいかも。
参考 関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも
参考 ネーミング時にナイスな英語関数名を一発生成してくれるSublime Text拡張「SublimeCodic」の使い方
参考 Sublime Textでネーミングに悩んだ時などに！codicで英語関数名を手軽に取得する方法
正規表現チェッカー
正規表現のトライ＆エラー用。
エディターで書いてブラウザで動作確認しても良いけど、それをやっている間にこのツールだと3、4回は試せる。
正規表現チェックツールは、いろいろ使ってみたけど、結局これが一番使いやすかった。
バージョン管理
やはり、変更状態を管理できないと、後々面倒。
Sourcetree
GUIでGit管理が出来るバージョン管理ツール。
プロは、コマンド操作した方が速いのかもしれないけど、視覚的に状態を管理できるのは楽。
参考 GitツールSourceTreeでローカルリポジトリを管理する方法（コミット編）
GitHub
ソースをローカルだけに置いておくには、怖いので。バックアップ代わりも兼ねて。
非公開リポジトリを作成するには、月額700円だった。
参考 GitツールSourceTreeでリモートリポジトリを操作する方法
BitBucket
こちらは、非公開リポジトリも無料で使えるGitホスティングサービス。
ローカル開発環境
WordPress開発をするならば、ローカル環境がないと始まらない。
Local by Flywheel
手軽に複数のローカル環境を作成できる。しかもWindowsでも速い。サーバーソフトやPHPバージョンも変更可能。
参考 WordPressローカル環境「Local by Flywheel」が有能ツールだったので良いとこ言いたい
Bitnami
Local by Flywheelが利用できない環境の場合は、これがおすすめ。
参考 PCにWordpressローカル環境を「Bitnami」で作成する方法
SEOチェック
SEOは、目視でソースコード確認なんかしていたら、日が暮れてしまう。
PageSpeed Insights
ページ表示スピードチェック用。
利用するなら、外部リソース使用を除外した、外部リソース除外版を使用した方がより正確かも。
GTmetrix
ページ表示スピードについてより詳しく見たい場合は。
ただし、Google AdSense等の外部リソースの影響もそのまま結果に出てしまうため、テーマ自体のパフォーマンスを見るには、外的要因を排除して調べる必要があります。
モバイルフレンドリーテスト
HTML上にパーツを追加する毎に「これはモバイルフレンドリー的なデザインか？」と調べるのに便利。
目視だと面倒だし、曖昧になってしまうので。
構造化データテストツール
構造化データにエラーや警告がないか調べるツール。どういった、構造化データが使われているかもリスト化してくれます。
構造化データは、仕様がややこしいので、任せられるところは、ツール任せ。
HTML5バリデーター
HTML5マークアップにおかしな部分がないか、手軽にチェック。
タグの閉じ忘れなども手軽にチェック可能です。
HTML 5 Outliner
ページのアウトライン構造を手軽にチェック。
SEOチェキ
メタディスクリプション、メタキーワードがどのようにページ上で出力されているか調べるのが手軽。
あと、サイトが使用しているサーバーも分かって便利。他サイトのサーバー環境チェックに。
AMPチェック
AMPは仕様がややこしすぎるので目視でチェックなんて不可能。
AMPテスト
日本語対応のAMPテスト。
AMPページをGoogleに送信できたり、構造化データもチェックできる。ただし、解析時間がそれなりにかかるので、頻繁に使うのはちょっと億劫。
The AMP Validator
こちらは、URLを入力して結果（エラーや警告等）を表示してくれるシンプルなAMPバリデーターです。
機能がシンプルなので、結果が出るのも速いです。ただし、表示されるエラーメッセージ等は、英語になります。
AMPBench
こちらは、軽い上に詳細なデータをチェックすることが出来るAMPチェックツールです。
The AMP Validatorと構造化データテストツールを同時にチェックすることが可能なので、何回も調べる手間が省けます。ただし、英語ツールです。
レスポンシブチェック
レスポンシブチェックは、ブラウザーのデベロッパーツールでもできるけど、一気に様々なデバイスサイズをチェックしたい時などに。
Sizzy
暗色系の背景に、iPhone、iPad、Nexus、Galaxy端末サイズでレスポンシブチェックができて見やすい。
Responsinator
こちらは筐体もモックアップ風に表示してくれるチェックツール。
Multi Screen Resolution Test
こちらは端末1つ1つを念入りにチェックするのに向いたツールです。
デザイン
見た目に関するツール。
色見本と配色サイト
とりあえず色で迷ったら。
WEB色見本 原色大辞典
もっと簡易的な色見本でよければ。色のリンク先から様々なパターンのカラーコード取得も可能。
まとめ
最近主にWordpress開発で利用しているツール・サービスはこんな感じです。
面倒なことを、これらのツールに任せることが出来なければ、正直「何か作ろう」という気さえおきないような気がします。
