iOS 8 の Safari で WebGL が動くようになったので、以前作った日本の地価の 3D で表示するやつをタッチ対応してみました。

Land Prices in Japan

ソースは GitHub にあります。

タッチ対応というのは、大体以下のような感じです。

• Viewport が動かないように調整。
• ドラッグで上下左右に動けるように。タッチデバイスかどうがで、タッチ系のイベントを使うかマウス系のイベントを使うかを切り替えています。
• ピンチでズームできるように。難しいかなと思ったんですが、gesturestart, gesturechange, gestureend イベントがあったので簡単でした。
• ダブルタップで視点を切り替えられるように。ダブルタップやダブルクリックのイベントというのは特にないので、touchstart の時に一個前のイベントの時刻と比較して判断しています。

早速買い換えた iPhone 6 Plus でぬるぬる動く上に、iPhone 5 でも余裕で動きます。直接触れるので、画面は小さいものの PC より楽しいなあと思いました。今後はモバイルでの WebGL が面白そうですね。

大分間が空きましたが、社内勉強会で Grunt と ES6 Modules について発表したので、このへんで書いておきます。

Introduction to Grunt

こっちは、デザイナー向けに Grunt を紹介したときの資料。これまでよくわからず使っていた Grunt の設定ファイルについてちゃんと調べました。Qiita のGrunt の設定オブジェクトの秘密 にも詳しく書いてます。やっとわかったマルチタスク。

しかし、勉強会では結局何ができるか、どう運用するかの話が中心で、設定ファイルの話はしませんでした。初めての人には、細かいことよりも、まずは何ができるかですよね。良い経験になりました。

Start ES6 Today

こっちは、あまりちゃんと調べられてなくて中途半端です。

結論としては、ES6 Modules はまだ早い。System.js とか使えば今でも使えそうだけど、それなら Browerify でいいかなというのが今の気分です。むしろ、class とか ES6 の他の文法を使いたい。Traceur Compiler や jsx --harmony でコンパイルできる AltJS と考えれば。

もともと Octopress/Jekyll 製だったこのブログを、Ruby を捨てて gulp でページを生成するように書き直しました。

shuhei.github.io / gulpfile.babel.js

ディレクトリ構成は Octopress そのまま。rake タスクではなく、gulp のタスクでサイトをビルド、デプロイします。

機能は本当に最小限で、記事ページ、静的ページと index, archive の生成だけです。

経緯

動機は Jekyll が重くビルドに時間がかかること。他のもっと良いのがないかなあと思っていたのですが、そもそも大した機能は必要ないので、今年の初めにはまっていた gulp で自作しました。

ビルドの部分は、ファイルを変換して書き出すという gulp でやりやすいタスクです。ただ GitHub Pages にデプロイする部分は git のコマンド実行が続くため面倒で、その部分だけ gulp で実装せずにRakefile をそのまま残していました。

どうも気持ち悪かったので、ついに重い腰を上げて書いてみました。当初 child_process を使って書いたのですが、gulp-shellを見つけて使うようにしたらすっきりしました。

操作

gulp でビルドします。

gulp

表示を確認しながら編集したいときは、以下でローカルにサーバが立ち上がり、ファイル変更時にビルドしなおしてくれます。

gulp watch

デプロイも gulp タスクです。

gulp deploy

感想

当たり前の感想ですが、gulp はデプロイのようなタスクには向いてないものの、 静的サイトの生成には悪くないなと思いました。

とは言え、サイト全体の情報を扱うのはやりにくいです。現在は index, archive のページを、各記事の stream から分岐して作っています。また、必要ないと思いサイドバーをつけていないのですが、つける場合には一旦全記事を読み込んでサイドバー向けの情報を作ってから各記事のページにくっつける必要があります。その辺は今後の課題ですかね。