何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。
BEM
最初の拒絶反応から一転、もう BEM 無しに CSS 設計はできなくなりました。BEM の思想に対して記述の方式は色々ありますが、ぼくは
block__element--modifier
と接続する MindBEMding の書き方をしています。
Template engine (Jade)
静的サイトや CMS サイトのプロトタイプモデルとして html を 生成する際に重宝しています。ぼくは Jade を使用しています。閉じタグが要らないので超長い html 書くときとか俄然スイスイです。Markdown と組み合わせることもできます。
閉じタグ無いのが肌に合わない方には閉じタグを使う テンプレートエンジンを使ってみるとよいと思います。
Jade 以外だと Handlebars.js 辺り良よいかなと個人的には。
ホットなテンプレートエンジンは Template-Engine-Chooser! 辺りを参考にしています。
Sketch
http://bohemiancoding.com/sketch/
メジャーバージョンが2から3となり期間限定のセールなど、今年一番の動きがあったのではと思います。3 の初期はバグが多かったものの
- Pages
- Artboard
- Plugin
- Slice
辺りの機能がそれを補って余りある魅力でした。案件では使う場面を選ぶ印象ですが、ワイヤーからビジュアルまでをサクッと作って早々に html を起こすみたいな使い方にとてもよいです。
gulp.js
今年になってプラグインや情報など大分充実しました。制作の時間と手間がゴリゴリ短くなります。動かすまでが大変な場合もあるみたいですが、GitHub 読めば大丈夫です。ぼくは静的サイトと、CMS サイトの案件が殆どなので、両方で使いまわせる gulpfile.js 用意してオレオレスタータキットに含めて使っています。
BrowserSync
雑に言ってしまうと Livereload の上位互換みたいなものです。
- LAN 内でのアクセスとブラウザ同期
- Livereload と Injection
- VirtualBox 等ローカルサーバとの接続
- WAN への一時的な公開
などなど紹介だけで1記事大作となってしまいそうな高機能、ショートホープさんが記事を書いてくれています。Node.js ベースなので gulp と組み合わせて使っています。grunt 用のプラグインも。
Bower
‘Bower’ の ‘wer’ がキーボード上で並んでいるのでとても打ちやすいです。必要なフレームワークやプラグインを bower.json にまとめて $ bower install でまとめて取得、grunt や gulp と組み合わせて取得から開発環境への組み込みまで自動化すればハッピーです。都度ググって zip かき集めなくても良くなりました。
trash
https://www.npmjs.com/package/trash
Web 制作しているとコマンドラインでの操作が多くなりますが、ぼくのように短気だと $ rm -rf * とか気軽にやってしまって大変な事になります。そんなとき $ trash filename でファイルをその場で抹消せずにゴミ箱へ送ってくれる trash さんです。ゴミ箱から Finder の操作で元に戻すことも出来ます。tr で alias 作っておけば快適です。
fish-shell
黒い画面のコマンド操作を強力にサポートしてくれます。bash からわざわざ変えなくてもとか甘く見ていると足元をすくわれます。
詳しくは Bash to the Fisher を。
sass-globbing
https://rubygems.org/gems/sass-globbing
sass 4.0 で実装予定の機能を一部先取り出来ます。
@import filename/*
こんな感じでインポートがスイスイになります。場面ごとにファイルガンガン分けられるので git のコンフリクト削減にも貢献したり。
Vagrant
多くの人が VirtulaBox と組み合わせて使っていると思います。ぼくもその一人です。
ぼくは WordPress の案件に vccw や vvv、vagrant-lamp を使う程度でしたが、Box や Chef との組み合わせで色々な Linux マシンをコマンド1つで構築できるようになります。
Navicat
Sequel pro と同系のデータベース管理 GUI ツール。此方は有料のみですが使用感とても良い上に Windows 版もあります。
sql の実行、データの確認、書き換え、バックアップ、レストア、非常に楽です。
おわりに
全体的にフロント寄り? のあれこれが多くなりました。たった1年で Web 制作にかかる方法と時間が大きく変わったように思います。
個人的にはバックエンドさっぱりの年になったので来年はその辺り自動化して楽したいなと思いました。