覚えた!ハマった!エンジニアの近況 第1回 高津戸編

ピクセルグリッドのフロントエンドエンジニアひとりひとりに最近の仕事(主に2011年度)を振り返ってもらい、仕事で大活躍したツールや、ハマりまくったできごと、これから注目したい技術、手がけてみたい仕事をざっくばらんに語ってもらいました。第1回目は高津戸です。

発行

著者 高津戸 壮 テクニカルディレクター
覚えた!ハマった!エンジニアの近況 シリーズの記事一覧

はじめに

このシリーズではピクセルグリッドのフロントエンドエンジニアひとりひとりに最近の仕事(主に2011年度)を振り返ってもらい、仕事で大活躍したツールや、ハマりまくったできごと、これから注目したい技術、手がけてみたい仕事をざっくばらんに語ってもらいました。

念のため申し添えておきますと、これはエンジニア個々人の感想、意見です。みなさんのお仕事の参考までに紹介しているため、会社の公式な見解ではありません。

質問事項

  • 最近、これがあって助かった!ベスト3
  • 最近、ハマりましたワースト3
  • これから、この技術をあれこれしてみたい
  • これから、こんな仕事をしてみたい

第1回目はJavaScriptをメインに担当することが多い高津戸です。

最近、これがあって助かった!ベスト3

1. Backbone.js

JavaScriptフレームワーク

Backbone.jsは、Model、Viewという雛形を使い、構造的にJavaScriptを書くことの出来るフレームワークです。

ちょっと大きめなサービスをJSベースで組む際に役立ちました。サーバーと逐一Ajaxでやりとりをする際、どのように書けばいいのかの指針となってくれました。

Backbone.jsをひとことで説明するのは難しいのですが、これと出会わなかったら複雑な処理をどのように構造化するのかにとまどい、コードがぐちゃぐちゃになっていたと思います。

2. HTML5 Boilerplate

HTML5のベストプラクティスが詰まったテンプレート

HTML5 Boilerplateとは、HTML5の鉄板(Boilerplate)である記述を1つのテンプレートに集約したもの。

これに出会うまでは、オレ式HTMLテンプレートベースの改良にかなりの時間をかけていました。けれど、それはここに全部まとまっていたんです。それにこのテンプレートは逐一更新されている。なので、自分テンプレートの改良はやめ、これをベースにすることにしました。

3. reveal.js

htmlをスライド表示するJavaScriptライブラリを含んだテンプレート

プレゼンテーションのスライド表示のためのJavaScriptライブラリを含んだテンプレートです。

このテンプレートを使えば、キーノートのようなスライドをHTMLベースで作ることができます。最近は講演などでスライドを作る際、これをベースに作っています。

これに出会うまでは、セミナー用のスライドを作り、改良するのにかなりの時間をかけていました。自分でテンプレートを作るという行為はそれ自体が勉強になり、楽しくはあったのです。ですが、毎回毎回その改良に時間をかけてしまっていたため、非効率と言えば非効率でした。

最近、ハマりましたワースト3

1. Android

今年はスマートフォン用サイトの案件が多かったです。その中で毎回毎回苦しめられたのがAndroidに標準搭載されている「ブラウザ」。

HTML5+CSS3が使えると夢をみたのは最初だけで、かなり貧弱で、しかも機種ごとにまちまちな実装になっているブラウザという認識。しかしながらスマートフォン向けに何かおもしろいことをしたいと考えるクライアントは多く、現実とのギャップを理解する、また説明するのに多くの時間を費やしたと思います。

そんでもって、クライアントが夢見た計画はHTMLではできないということで、仕事に繋がらないことも多かったです(最近はかなりマシにはなっていますが)。

2. viewport

スマートフォン向けサイトを作る上で欠かせないのがmeta要素で指定できるviewport。これが分からなければ、どのようにページをデザインしたらいいのかも分からないと言えるほど重要な概念です。

CSS Niteにてviewportをテーマに話そうと調べてみたものの、蓋を開けたらこれも泥沼。iOSとAndroidの差や、傾けたときにどうなるとか、Androidのバージョンごとの差などがありました。分かりづらい公式ドキュメントと実機での動作を比べながら、理解するのにかなりの時間を要しました。

3. シングルページなWebアプリ

シングルページなWebアプリを作る案件をこなすのに、かなり苦しみました。シングルページなWebアプリとは通常のページ遷移がほぼなく、ページの切り替えをhashchangeやHistory APIを使い、ダイナミックに行うというもの。

その案件が始まる前にちょっと真似事をやったことがあったので、できますよーと結構タイトなスケジュールで請け負いました。が、実際にやってみると、サーバー側のAPIも最適なものに変えなければならなかったり、フロント側のJSの設計も確固たるものが必要になったり、作りながらUIを改良したりで、予想より大幅に工数がかかりました。

結果的に2〜3ヶ月ほぼ休みなしの状態になってしまいました。なんとか終えられたものの、複数人で開発しなければならなかった、APIの設計も入念にチェックしなければならなかったなど、反省点の多い案件となりました。その反面、技術面、仕事の進め方については、会社としてとてもいい経験となりました。

これから、この技術をあれこれしてみたい

Node.js + シングルページなWebアプリの開発です。

具体的にいうと、昨年、個人的にポチってもうたーをGoogle App Engine(Python)で作ったんです。けれど現状は作っただけで放置状態になってしまっている上に、GAEが値上げされ、ちまちま財布が削られるので、せっかくだからNode.jsで作り直したいと思っています。

自分は基本的にJavaScriptをメインに書いているため、サーバー側もうまいことJSでやってみたいです。

これから、こんな仕事をしてみたい

シングルページなWebアプリ

これはさきほどお話したように、実際に作ってみてユーザー的にかなり快適なものであるし、設計面でもとても効率的であることを実感したからです。

コレを作るのには、ちょっとやそっとJavaScriptが書けるだけではダメで、設計のやり方や、タスクを割り振って仕事を進めなければならないと、実際に仕事をしてみて痛感しました。

この経験は貴重ですし、仕事としても大きくやりがいもあるので、社内でやり方を共有し、そんな仕事を多くこなしたいと思います。

JavaScriptを駆使したリッチなUIのサイト

ピクセルグリッドはJavaScriptの会社を標榜しているのですが、そうは言っても、あらゆる仕事が、チャレンジングで、凝ったUIを採用し、先進的な技術を常に使っている…というわけではないです。

僕が「おもしろいなー」と感じるのは、いろいろありますが、例えばそのひとつに、やったことのないようなUIを組んだりするということがあります。UI的にもおもしろく、JavaScript的にも、どうしたらできるのかと考え、試行錯誤しなければならないようなものです。

そういったものを作るのには、JavaScriptを書く僕だけではなく、デザインをする人も同様にそのようなことに興味を持ち、あれはできるのか、これはできるのかと、いろいろ相談しながら進める必要があります。

今後は、そのような仕事にチャレンジしていけたらなと思っています。