当ブログで使用しているテーマ『賢威』から先日、『賢威8』のスタンダード版が公開されました。
『賢威』を導入した時点でβ版は公開されていたのですが、開発者根性もあってか使用には踏み切れず『賢威7』をこれまで利用してきました。
テーマのアップデートという初めての節目(テーマの変更はあったがアップデートはしたことが無かった)を経て、ついに私もローカル環境を用意しようと決意しました。
これまで当ブログは運用中に本番ソースをカスタマイズしてきましたが、いずれも既に情報が出回っているモノだったために壁に突き当たることはありませんでした。
エンジニアとしてはあるまじき行為ではありますが、バグさえ発生しなければよかったのです。
しかし今回『賢威8』へのアップデートを行ってみて、出回っている情報をうまく拾うことが出来ず、「今すぐ何とかしたい」変更も思うようにできませんでした。
本番ソースを変更しては自サイトをプレビューして確認する方法だと、自分ではない赤の他人が崩れた画面を目にしてしまう可能性もある為、ローカルの環境を用意することに決めました。
今回の開発環境(ツール)
エディタ
まず何と言っても大事なのがエディタです。最悪エディタだけあればぶっつけ本番でも修正することが可能ですからね。
今回利用したのは『Microsoft』が提供する『VisualStudioCode』です。
『VisualStudioCode』を選んだ理由としては、
- コードがハイライトされるから。
- ソース管理ツール(SVNやGitなど)との連携が拡張機能を入れることで可能になるから。
- Eclipseなどと比べて動作が軽量でUIもシンプルだから。
- 既にインストールされていたから。
- 業務上で使用する機会が今後増えてくる可能性があるから。
といった感じです。さらに言うなれば、C#での開発が得意な私にとっては『VisualStudio』ライクな環境が開発しやすいから、です。
Web系の開発を行っていらっしゃる方であれば『Atom』などもいいでしょう。
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
動作環境(デバッグサーバ)
WordPressの開発環境としてはおそらくもっともメジャーな『LOCAL』を利用することにしました。
以前とある企業のECサイトの開発にボランティアで参加したことがありましたが、その際に使用した経験があり、迷わず選びました。
当時の動作はそれなりにCPUを喰っていたイメージがあったのですが、今回利用してみた感じではそんな兆候はなく、軽快な動作でした。
ソース管理およびタスク管理
ソース管理としては『VisualStudioCode』と同じ『Microsoft』製品である『VisualStudioTeamService』を利用することも考えましたが、仕事で使う機会も多い『BackLog』を利用することにしました。
タスク管理ツールとして提供されていることもあり、「ここをこうしたい」といった考えをまとめておくのにも役立ちますね。
さらに設定によってはそれらのメモと実際の開発をリンクさせることもできる優れものです。
プラント料金を確認すると、有料プランしかないように見えますが端っこの方に無料プランが存在します。
無料プランでは100MBのストレージを利用することが出来ます。
今回の開発環境では、WordPressテーマのみが管理対象となる為、100MBもあればいくつものテーマを同時に管理することも可能です。
ちなみに今回の開発対象となる『賢威8』では、容量7MB弱程度です。
デプロイ
ローカル環境で開発したソースを本番環境に適用させるためには、使用しているサーバにデプロイ(配置)する必要があります。
今回はFTPクライアントツールとしてメジャーな『FFFTP』を利用することにしました。
「FFFTP」定番FTPクライアントソフト
実際の構築手順
抜粋ではありますが軽く残しておこうと思います。
なお、今回の開発は私個人で行っていく為、ソース管理はSVNで行うことにしました。
複数人で行う場合は迷わずGitを選ぶのですが、個人であればどちらにしても大して変わらないので、マージ作業が無い分SVNが早いと考えました。
BackLogの設定
デフォルトではソース管理を行わない設定となっているため、上記のチェックを入れてSVNを有効化します。
VisualStudioCodeの設定
SVNとの連携を行うための拡張機能をインストールします。
今回は『SVN』というシンプルな名前の拡張機能を使用することにしました。
馴染みのある『TortoiseSVN』を選ばなかった理由としては、インストール件数が少なかったから、だけです。
ただし『VisualStudioCode』で『SVN』を利用するためには『ToitoiseSVN』をインストールする必要があります。
『ToitoiseSVN』のインストール手順に関しては省略しますが、『SVN』の説明にもある通り、『コマンドラインツール』のインストールを忘れないようにしましょう。デフォルト設定だとインストールされません。
ToitoiseSVNの設定
リポジトリのURLは『BackLog』上から確認することが出来ます。
拡張機能『SVN』の使用感
変更部分は『VisualStudio』同様にエディタ左端の行数表示付近がハイライトされます。
差分も見れます。
コミットはちょっとわかりにくいですが、上記のチェックマークをクリックすることで行えます。
その下にあるテキストボックスがコミットコメントの入力欄になります。
FFFTPで実際にデプロイ
UI的にはこんな感じです。左側がローカル環境、右側が本番環境です。
アップロードしてみたところ、サイズの表示が微妙に異なっています。
全体的にローカルよりも軽量になるようですね。
開発環境を構築してみて
めっちゃ簡単でした。いずれも軽量かつ高機能でいて使いやすいデザインが施されているため、プログラミングを一通り学ぶにもいい教材となり得るのではないでしょうか。
動作環境としての『nginx』辺りが秘匿されている点がちょっと物足りないかも知れませんが、現場でも通用するスキルが身につきそうです。
ひとまずは今後はこちらのローカル環境で開発を行い、本番に適用させていくことが出来るようになりました。
これまで妥協してきた点も含めていろいろいじっていきたいと思います。
以上です。
スポンサーリンク