今年も残すところあと数日で2018年が終わろうとしています。そこで今年を振り返って、これ勉強して効率が上がった！今まで使っていたツールを乗り換えたら捗るようになった！今まで時間がかかっていた作業が半分の時間でできるようになった！といったようなことを書いていきたいと思います。
普段僕はウェブディレクターとして動いていますが、ディレクションしながらCSS, JSといったコードはわりと書く方で、WordPressはアクションフックやフィルターフックを利用したカスタマイズ程度は行っています。そんな前提ですが被るような部分があると、お役に立つかなと思います。
目次
タスク管理の決定版 – Asana
これは本当に革命でした。
Asanaと書いてアサナと読みます。僕が普段働いているシェアオフィスにいるNさんに教えてもらいました。今までGoogleカレンダーでタスク管理をしていました。今思うとなんでカレンダーでタスク管理していたんだろうって思うんですが、数年間その方法で慣れていたのと、プロジェクト管理ツールがいくつか乱立しており、どれがいいのかなあと考えていて切り替えるタイミングを逃していました。
ある時プロジェクトを進行する際にNさんにAsanaでしませんか？と提案され、使ってみるとめちゃくちゃ使いやすかったんですね。いままでプロジェクト管理ツールを使ってプロジェクト進行した経験がなかったので、最初はよくわからなかったんですが、使ってみるとタスクを本当に簡単に作成できるし、かゆいところに手が届く設計になっていて、今自分は何をやるべきか？がこれ以上ないくらいわかりやすく整理されました。
使い始めてすぐに個人のプロジェクトを立ち上げ自分専用のタスク管理として利用。Googleカレンダーでのタスク管理から乗り換えるのに時間はかかりませんでした。
今まで使っていたGoogleカレンダーは単純に予定管理として利用し、タスクはAsanaに登録しています。普通に考えてカレンダーをタスクとして使うなよ・・・と自分にいいたい。Asanaのおかげで劇的に仕事が捗るようになりました。Nさんありがとうございます！
参考：Asana を使ってチームの仕事、プロジェクト、タスクをオンラインで管理 · Asana
バージョン管理システム – Git
Git（ギット）を学ぼうかどうかで悩んでいたら、絶対に損はしないので休みを利用するなりして学ぶことを強くおすすめします。
実はいままでさらっと使ってみたりはしたのですが、得られるメリットよりも理解するまでにかかる時間や理解したところで活かせる環境がないのではと考え、正直前向きではありませんでした。
進行するプロジェクトでバージョン管理が必要となり、相当今更感はありましたが、今年にはいってようやく重い腰を上げてGitを使い始めました。
たくさんメリットがありすぎて上げきれない程ですが、例えばバージョン管理ツールというだけあって簡単に昔の状態に戻れます。「間違えたから戻りたい」「以前書いたコードってなんだっけ？」というときに重宝します。また、ブランチといって本番や開発などリリースごとに分岐を作れる機能があって、公開日時の認識違いがあり公開した後に取り下げたいというのが実際ありましたが、ブランチで本番と開発を分けて管理していたため本番に適用後でもブランチを戻すだけで瞬時に以前の状態に戻れたという経験があり、そのときは本当に助けられました。
覚え方としては、できるならばコマンドでGitを覚えていくのが結果楽だと思ういます。インターフェース的に受け付けないという場合は、Sourcetreeなどおすすめです。コマンドもたまに使ってますが、今でもSourcetreeをメインで使っています。
脱FTPによる安全な反映
Gitを使うことで副作用的なメリットにFTPを使わないようになったことがあります。どういうことかというと、FTPやFTPSといったFTPプロトコルを使用しないでサーバーに反映するワークフローに変わったのです。
サーバーにsshで接続した上で、リモートリポジトリからpullすることでファイル自体をアップロードするのではなく、反映したファイルのみを自動検知して反映する仕組みになります。こうすることでアップし忘れや他の人がアップした内容を上書きしたりされたりといったヒューマンエラーが起こりにくい状態を作ることができます。
運用ルールにより使える使えないあると思いますし、僕自身各サーバ環境によるため完全に切り替えられているわけではないですが、利用できる環境の場合は積極的に利用しています。自分一人で進行するプロジェクトでも十分使う価値ありです。FTPを使わないことでセキュリティ的にも安心！
参考：サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
強力な案件進行ツール – Backlog
ウェブサイト制作やシステム開発、複数人で進行するプロジェクトなど、今まではすべての仕事はメールでのやり取りで進めていました。しかしメールは過去に遡るのに向いておらず、一つのメールに複数のタスクが入り混じっていたり、誰かが見逃していたり、連絡したのに忘れていたりというようにプロジェクトを進行していく上でベストな方法ではありませんでした。
そこで今年からプロジェクト進行ツールとしてBacklogを使うことにしました。使ってからというもの、これ無しでは仕事をしたくない程仕事が格段にやりやすくなりました。メリットは上げたらきりがありませんが、「課題」と呼ばれるタスクを登録していくことで作業ごとに課題が作られ、今誰がその課題を進めるべきかなのかや相手は確認したのかしてないのかが把握でき、ファイル添付や過去の文章の引用、Gitと連携すると課題登録作業を行わずに課題とGitとの紐づけができるなど、課題ベースにするべきことが並ぶので、あと残りまでにどのくらい作業があるのか、今誰が大変なのか、納期に対して進捗状況はどの程度なのか、作業は進んでいるのか進んでいないのか、といったような今までメールだとわかりづらかったことや確認に手間取ることが簡単に把握できるようになったのです。
「今誰がボールを持っているのか？」という状況を関係者が把握しているのは非常に大事で、「連絡してくれると思っていた」「あなたがやるものだと思っていた」などと不毛なやりとりが発生することは少なくありません。
また、ディレクターの立ち位置だとデザイナーさんが作成したデザインをクライアントに確認して、またそのフィードバックをデザイナーさんに送って・・・とうような右から左へ流すだけの作業もたまにありますが、そういうような場合はデザイナーさんからクライアントへ直接課題を渡すことで無駄な作業がなくなりますし、直接やりとりすることで円滑に進むことが多いように感じました。
頑張った感を見える化する「バーンダウンチャート」
プランによって使えるようになる機能の一つに、バーンダウンチャートというのがあります。これは課題が完了していくとチャートが下がっていき、最終的に課題が0になると完了で残りいくつの課題があるかというのを表示してくれるのですが、誰かが課題実施を頑張ると「○○さんが良い仕事！」と表示してくれます。ゲーム感覚で面白い機能です。
他にもいいねにあたるスター機能やスタンダード以上で使えるガントチャート、ファイル共有やWikiなど、プロジェクト進行が円滑にすすむ機能がたくさんあり、これさえあればもうメールはいらないと本気で思える程です。実際、メールを使う頻度は減ってきています。まだ使っていなくてプロジェクト進行に悩んでいる人は是非お試しあれ！
参考：タスク管理、ファイル共有もできるプロジェクト管理ツールBacklog
効率良く再現性の高いコーディングを実現するCSSフレームワーク
何で今まで使ってこなかったんだろうと思うほど、一度使ったら離れられません。
CSSフレームワークやフロントエンドフレームワークと呼ばれる、ウェブサイトやアプリ等で使われる要素（パーツ）ごとにCSSが定義されており、簡単に利用できるようになっているツールのことです。よく知られているのはTwitter社のBootstrapでしょうか。
BootstrapがまだVer2くらいの頃に一度利用しましたが、その頃はメリットを完全に理解できず、一度使ってそのままになっていました。2017年末頃からUIkitというCSSフレームワーク、その後にフロントエンドフレームワークのFoundationを学び、今はFoundationをよく使うようになりました。
今やスマホからの流入が多くなっている業種も多く、モバイルファーストで構築する必要性がどんどん高くなっています。そんななか、PC, タブレット, スマホと異なるデザインを作成するのは工数もかかり予算も膨らんでしまうため、このようなフレームワークを利用し骨組みを作ってから必要なデザインをするなどするようにワークフローも変わってきています。実際にそのように進めているプロジェクトも多いです。また、個人のマークアップに左右されないため安全でメンテナンス性の高いコードとなります。CSSフレームワークになれると使ったほうが効率良くコードをかけるようになります。
参考：The most advanced responsive front-end framework in the world. | Foundation
CSSはSassで書くことで効率と可読性アップ
これも、なんで今まで避けてきたのか自分を呪いたいほどです。
当たり前のことなんですが、CSSは今まで普通にCSSとして書いていました。Sassの書き方を知ってしまうと、もうCSSに戻れません。
CSSは階層が深くなってくると、同じ親セレクターを要素ごとに書かなければならず、キーカラーなどが決まっていても毎回書く必要がありますし、何回も使い回す同じスタイルもコピペで書かなければいけず変更があれば全部治す必要があり、本当に無駄な作業が多いです。
Sassの場合、これらはすべて解決します。親セレクタは一度書いて階層化できるし、カラーや決まったpx数など、事前に変数として定義することで変更があれば変数側だけ変えれば一括変更できます。また、同じスタイルも事前に定義ができる上、「ここだけ変えたい」という場合にも対応できます。
さらに、前述のFoundationにはSass版があり各パーツの定義自体をSassで変更できたり、事前にFoundationに用意されたスタイルがあり、これをSass内に再利用することができます。また、メディアクエリも細かく指定でき簡単に対応できます。
一度環境づくりを行う必要はありますが、設定さえしてしまえば超簡単だし、今やSassが使えないと考えると寒気がします。
参考：Sass: Syntactically Awesome Style Sheets
WordPressのローカル開発環境の決定版 – VCCW
WordPressなどのCMSをローカルで開発する場合、MAMPやXAMPPといった仮想ウェブサーバーにデータベースやPHPなどの一式の開発環境を構築してくれるオープンソースのツールを使うことが多いと思います。
今年になり、前々から気になっていたVCCWを試してみることに。WordPressに特化しており、後述のWordMoveが標準でついてくるためローカル開発環境からステージング環境等への反映が簡単に可能になります。
MAMPをメインで使っていましたが、WordPress開発案件はVCCWがメインになりました。なんせWP-CLIが使えるので、コマンドでいろいろと定形作業ができたりラクなんです。
サイトごとに初回の構築はやや時間がかかりますが、一旦構築してしまえばあとは開発時に立ち上げたり停止したりするだけで、全く気になりません。強いて言うなら仮想環境を動かすのに少々メモリを食うため、パソコンのパフォーマンスが悪いと表示速度やレスポンスに多少影響があります。
参考：VCCW – A WordPress development environment.
WordPressサイトを反映する際に超絶ラクになるツール – Wordmove
データベースとウェブデータを一式エクスポートし、反映先の環境でインポートするような反映方法にはもう戻れません。
WordmoveはWordPressをローカル環境から本番環境または開発環境等へ反映するデプロイツールです。コマンド一発でDBもウェブデータも一式反映してくれ、DB内の文字列の置換もしてくれるので本当にラクです。しかも差分のみの反映のため、時間も早い。オプションでテーマだけ、アップロード画像は抜かす、dbは抜かす、というようなことが可能です。
前述のVCCWに導入済みのため導入の敷居は低く、便利すぎて今までのDBエクスポート→インポート＆ウェブデータアップロード＆DBの文字列置換・・・とやっていた方法がとても大変な作業に見えてきます。
参考：welaika/wordmove: Multi-stage command line deploy/mirroring and task runner for WordPress
HTMLをPHPのように扱えるHTMLテンプレートエンジン
PHPのようにというと語弊があるかもしれませんが、例えばHTMLページを作成する上で、ヘッダーやサイドバー、フッターなどの共通部分を各ページからは呼び出して共通のファイルとして管理したり、変数を定義してページ内で自由に利用したり、条件ごとに記述を変えたりなど、HTMLだけではできなかったことが可能になります。
これを実現しているのがHandlebars.jsというHTMLテンプレートエンジンです。これを使うようになってから、HTML案件が効率よく作業できるようになりました。また、WordPressテーマを作成する際にも重宝します。
そして、さらに力を発揮するのが、前述のFoundationにPaniniというツールが用意されており、これは基本的にHandlebars.jsと同じものが搭載されています。そのため、Foundationをインストールすると（BasicではなくZURB templateとして）もれなくPaniniがついてくるため、すなわちHandlebars.jsを利用することができるということです。
ちなみにFoundationをZURB templateとしてインストールすると作成したHTMLやSass、画像などを保存したタイミングで各ファイルを生成してくれる自動化のgulpが実行されるため、保存するだけでSassはcss形式に自動でコンパイルされ効率よく開発できます。
参考：Handlebars.js: Minimal Templating on Steroids
まとめ：技術は新しいものが絶え間なくやってくる
技術よりのご紹介がメインでしたが、この業界はすぐに新しくより効率的で便利な技術が世界中からやってくるため、一度学んでもまた学ぶ必要があります。気になる技術がたくさんありますが、まだ僕も学びきれていないことばかりなのが現状です。
もっと効率的なのがあるよ！などありましたら、FacebookでもTwitterでもいいのでこっそり教えていただけると喜びます。
最後まで読んでいただきありがとうございました。それでは最後になりましたが、良いお年をお迎えください。
