私がGUIツールだけでWordPressのテーマ開発をする理由

この記事は、「WordPress Advent Calendar 2016」の22日目の記事です。
昨日のねこみみ隊長さんは子テーマの話だったわけですが、今日はなんと、実際のテーマ開発の話なのですよ。
ねこみみ隊長様、素晴らしいパスをいただき、ありがとうございます！

で、ちゃんと技術的な話をしようと思ったのですが・・・なんとなく、そうじゃない話になりそうです・・・

初めましての方もいらっしゃると思いますので簡単に自己紹介いたします。
川井昌彦と申します。
京都府舞鶴市というかなりの地方都市で、フリーランスでWeb制作とかDTP制作とかをやっています。
元々は東京で24年くらい制作会社にいたのですが、親の都合で6年ほど前に帰郷しました。

Web制作のキャリアは19年目ですが、WordPressで制作を始めたのは5年くらい前。
そのころからWordBench京都に参加するようになって何度か登壇させていただいたりしたのですが、とうとう今年は「WordCamp Kansai 2016」でセッションスピーカーとして登壇させていただきました。

テーマ開発に必須となりつつあるコマンドラインツール

そんな私ですが、ここ数年、WordBenchなどの勉強会に参加するたびに、『WordPressで何か作るならコマンドライン必須でしょ』みたいな流れが強くなってきて、ちょっと違和感を感じています。
それと、『エディタは何を使ってるんですか？　Dreamweaver？（クスッ） 』みたいな、微妙に小ばかにされているような感じもあります。（私の個人的な感想です！）

最近のテーマ開発と言えば、仮想環境の構築、Sass・LESSの自動コンパイル、Gitによるバージョン管理、ブラウザプレビューなどが当たり前になり、それらを実現するためにコマンドラインによる操作を行わなければならないケースが増えています。
また、WP-CLI 1.0もリリースされて、WordPressのインストールやアップデートなどもコマンドラインからさくっと行うことができるようになりました。

そしてプログラマさんは皆さん、こう主張されます。

『デザイナーもコマンドラインでの操作を覚えたほうがいいよ。
　だって速いし、軽いし、いろんな操作をまとめて行えるし、操作がOSに依存しないし』

それはわかるんです。でも、

『黒い画面が怖いというのは慣れてないだけ』とか、

『コマンドラインのほうが簡単』とか、

『コマンドラインを覚えないのは甘え』

と言う強硬派の方の意見には、反論せずにはいられません。

なぜならGUIツールは私にとって、”楽をするツール”ではなく、“ユーザー補助機能”だからなんです。

コマンドラインツールが”嫌い”なのではなく、”苦手”ということ

いちおう申し上げておきますと、私はMS-DOS時代にコマンドラインでパソコン通信をしていましたし、会社員時代は社内Linuxサーバーの管理とかをコマンドラインでやっていました。
決してコマンドラインツールを扱えないわけではありません。
ただ、コマンドラインツールが、とても、とても、とても苦手なのです。

例えば、MySQLのエクスポートをする際、私はphpMyAdminなどのGUIツールを使います。
エクスポートするだけならmysqldumpでいいだろうとよく言われるのですが、実は私、mysqldumpコマンドが一発で通った経験がほとんどありません。
間違えるポイントは様々ですが、たいていどこかでタイプミスをします。
そのため、コマンドを打った後、間違っていないか何度も確認するんです。

一番苦手なのがディレクトリの移動です。
皆さんは、ディレクトリ名を全部覚えておられるのでしょうか？
私は、1階層移動するたびに、lsコマンドでディレクトリ名を確かめます。
だって、サイトごとにディレクトリ名も階層構造も違うじゃないですか。
サイトのドキュメントルートがhtdocsなのかpublic_htmlなのかwwwなのかwebなのか、複数ドメインの切り分け方も違いますよね。
さくらとエックスサーバーとヘテムルとZenLogicを行ったり来たりしていたら、完全に混乱します。
また、何階層も一気に移動しようとすると、これまたどこかでタイプミスをして、結局遅くなってしまいます。

あと私は、コマンドのオプションを間違えるのがすごく怖いんです。
そのオプションが無ければエラーになるだけで済みますが、間違えて指定したオプションが存在したらどうでしょう？
実際に何度かそういうポカをやってきているので、とても怖いです。
そのため私は、毎回ヘルプやリファレンスでコマンドとオプションを確認しているのですが、目が悪いので時々間違えます。
本当に怖いです。
最近はフォントを変えることを覚えたのでミスは減りましたが、やっぱり怖いです。

皆さん、どうやったらいちいちオプションまで覚えていられるんでしょうか？
秘密を教えてほしいです。
毎日使っていれば覚えるのかもしれませんが、月に1度くらいしか使わないコマンドなんで覚えられないですよね？
私は本当に、毎回コマンドを打つたびに、チートシートとかリファレンスを見ながら確認しているんです。
いえ、まずはリファレンスを探すところからですね。おそらく、それが一番時間を食ってると思います。
ほんと、バカみたいです。

『デザイナーの人はショートカットで操作するでしょ？　あれと一緒ですよ』っていう人もいます。
ごめんなさい。
私、ショートカットは全然覚えていません。普段はコピー・カット・ペースト・全選択くらいしか使いません。
ほとんどの操作はメニューから行います。
会社員時代にチームリーダーだったために、いろんなOSのいろんなツールを、しかも他人のマシンで並行して使わなければならなかったという特殊な環境にいたのも要因ですが・・・ショートカットが環境ごとに異なるような状況では、怖くて使えませんでした。

現在の状況がテキストだけで表示されるのも辛いです。
テキスト表示だけでディレクトリ構造やデータ構造が把握できる人って、本当にスゴイですよね。
かなりの記憶力と頭の中でテキストをビジュアルに変換する能力が要求される、ぶっちゃけ、相当に頭が良くないと使えないツールだと思います。

GUIは「ユーザー補助機能」である

私は、コマンドラインツールが使えない人というのは、例えば、運動神経が鈍いとか、目が悪いというのに近い面があるのではないかと思っています。
プログラマの人が何気なくできることが、どうしてもできない人が現実にいるということを、まずは知ってほしいです。

そんな私を助けてくれるのが、GUIツールなのです。
やりたいこととその対象が一覧表示され、マウスで選べる。
そして、現在の状況が、テキストではなくイメージで理解できる。
そうしたことによって、ミスがなく、ストレスのない作業を行うことができます。

本来やりたいことはテーマ開発であり、コマンドラインを使うことではありません。
GUIでできるなら、GUIでやればいいんです。
どうしてもGUIでできないことだけ、コマンドラインを使えばいいんです。
そして、少なくともテーマ開発では、そんなシーンは滅多にありません。
滅多にないことのために、通常業務でミスを犯すリスクを増やすことはありません。

GUIツールだけで作るテーマ開発環境とは

前置きが長くなりましたが（笑）、そんなコマンドライン超苦手の私のWordPressテーマ開発環境をご紹介したいと思います。
ちなみに、Windowsです。
Macが欲しかったのですが、自宅から半径100km以内にMacを扱っている店舗がなかったんです。
（最も近いMacを扱っているお店までは高速道路を使って1時間半です。もし故障したらと思うと怖くて使えないです）

• 仮想環境：XAMPP
  管理サイトごとにディレクトリを作成
  httpd-vhosts.confで、管理サイトごとにローカル用ドメインとディレクトリを関連付け
• Hosts File Manager
  HOSTSファイルを書き換えて、上記のローカル用ドメインでXAMPPにアクセスするよう設定
• バージョン管理：SourceTree
  作業をしていないリポジトリは外して、動作が重くならないように注意
• コードエディタ・CSSプリプロセッサ・ブラウザプレビュー・サイト管理：Dreamweaver CC 2017

『Dreamweaverかよ！』という声もあるかと思いますが、最近のDreamweaverは結構できる子です。

エディタはBracketsになりました。
ブラウザエンジンはWebkitで、HTMLはライブプレビュー画面内でリアルタイムプレビューができます。
QRコードを読み込ませるだけで、同一ネットワーク内のスマートフォン等で同時にプレビューできます。
index.phpをプレビューすることで、WordPressなどのCMSもライブプレビュー画面で動作します。
Sass・LESSの自動コンパイルもできます。Compass、Bourbonにも対応してます。
Bootstrap標準装備です。
メディアクエリーが、プレビュー画面でタブ表示されて簡単に切り替えられます。
PhotoshopのPSDファイルから、extractでアセット抽出出来たりします。

プログラマの方はAdobe製品をお持ちでない方も多いかもしれませんが、デザイナーにとっては、Adobe Creative Croud（Adobe CC）は必須だと思います。
（Adobe CCの個人版コンプリートプランは、AdobeのほとんどのアプリとTypeKitと20GBのオンラインストレージが使えます）

Photoshopの「コンテンツに応じる」と「境界線の調整」と同等の機能を持つ代替ツールはあるのでしょうか？
Illustratorと同等に日本語テキストが扱える代替ツールはあるのでしょうか？
InDesignの代替ツールはあるのでしょうか？
私にとって、今のところAdobe CCの代替になるツールはありません。
Adobe CCを契約していれば、Dreamweaverも使えます。
つまり、Adobe必須のデザイナーにとっては、Dreamweaverは最も出費が少ないツールであると言えるのです。

ちなみに、Adobe CCはAmazonなどでたまに12か月分が40%オフで販売されてたりします。
私は現在オンラインスクールに入学しているので学割で使っています。（学費込みでもAmazonより安いです）

でも、コマンドラインを使えるなら使ったほうがいい

今日の記事では、GUIツールでテーマ開発を行う方法やTipsを書こうかと思っていたのですが、それ以前の話が長くなりすぎました。
各ツールの細かい設定とか実際の使い方は、また機会があれば書きたいなと思います。
もしかしたら、WordBench京都とかでお話しさせていただくことがあるかもしれません。

で・・・ぐだぐだ書いてきましたが、理想を言えば、コマンドラインを使える方は、コマンドラインを使ったほうがいいと思います。
まだまだGUIツールでできないことも多くあります。
使える人にとっては、コマンドラインは速いし軽いし便利なツールであることに異論はありません。

ただ、使えない人は無理することはありません。
今は選択肢がたくさんあります。
自分に合った、そしてプログラマと協働できるツールをぜひ見つけてください。
人間は万能ではないです。得意なところに力を集中させたほうがいいと思います。

---

さて、明日は、Toro_Unitさんです。
いつもLT楽しませてもらっていますので、とっても楽しみです！
よろしくお願いします！