フレクトのHeroku Lab

ども、小西です。

最近アプリ開発はもっぱらPlay2 + Gruntの環境で行っています。

Playにはassetsコンパイルの機能もあるので当初はそれを使っていたんですが、SinglePageAppの場合、どうしてもJavaScriptのコード量が大きくなるのでファイル分割とかしたくなるんですよね。

それで思い立ってGruntを導入したわけですが、これがなかなかいけてます。(^^v

勢い余ってGrunt超入門というスライドも書いたのでこれから導入される方はご参考に。

http://shunjikonishi.github.io/slides/grunt-introduction/index.html

今のところ使っているのは主にjsの連結、ミニファイ、文法チェックぐらいですが、おいおいその他のタスクも導入していきたいと思います。

ていうか、自分でなんかタスク作りたいなぁ。。。

watchが軽くて超絶便利なので、汎用タスク以外にもプロジェクト固有タスクを作るとか色々と使い道がありそうです。

★ Heroku連携での課題

さて、このPlay2 + Grunt開発。

ローカル開発時には特に不満はないんですが、Herokuで動かす場合には一つ大きな課題を抱えていました。

というのは、HerokuのbuildpackではGruntタスクが動くわけではないのでGruntで生成するファイル(連結とミニファイを施行したファイル)は、そのままだとSlugに含まれないのです。

この課題を解決するための一番安直な方法として昨日まではGitリポジトリにGruntで生成したファイルもコミットしていたんですが、この方法は本来バージョン管理の対象ではないファイルまでGitに含めることになるのでイマイチです。

理屈としてはカスタムbuildpackでbuild時にGruntを実行すれば良いだけなので、絶対誰かもう作ってる奴いるだろうと思って探してみたんですが

• heroku-buildpack-nodejs-grunt
• heroku-buildpack-grunt-java

など、nodeやjavaの標準buildpackにGruntタスクの実行を追加したものは見つかりましたがscala版は見つかりませんでした。。。

ていうか、このやり方だと言語毎に専用のbuildpackが必要になるし、標準buildpack側に改修があった場合それに追随するのも面倒なのでイマイチだと思うんですよね。。。

このケースの場合buildpack-multiを使って標準のbuildpackとGruntタスクを実行するだけのbuildpackを自由に組み合わせることができた方が良いと思います。

★ 作ってみた

試しにbuildpackのmultiで

• heroku-buildpack-nodejs-grunt
• heroku-buildpack-scala

の二つを組み合わせてみたら問題なく、

• build時にGruntタスクを実行し、
• Dyno起動時にはscalaアプリを実行する（要Procfile）

アプリが作成できました。素晴らしい。(^^v

ただし、このままだとSlugの中に実行時には不要なNodeのランタイムが含まれてしまいます。(約30MB弱)

PlayのアプリはただでさえSlugサイズがでかいので、このオーバーヘッドは見逃せません。

なので、heroku-buildpack-nodejs-gruntをフォークして、

• 明らかに不要そうな行をコメントアウト
• 最後にnode_modulesフォルダと.npmフォルダを削除

しただけのbuildpackを作ってみました。

https://github.com/shunjikonishi/heroku-buildpack-with-grunt-task

buildpackの中身はあんまりちゃんと読んでないので、もうちょっと効率的な実装をすることも可能な気がしますけど、とりあえずちゃんと動いているようなので今回はこれでよしとします。

ご興味のある方は使ってみてくだされ。(^^v

昨日別件(Play起動時にGruntも実行する)で教えてもらったドキュメントです。

http://www.playframework.com/documentation/2.4.x/SBTCookbook

なんと、この文書の下の方に「Disable documentation」として、コンパイル時のScalaDocの生成を止める方法が記載されています。

やり方はbuild.sbtに以下を記述するだけ

sources in (Compile, doc) := Seq.empty

publishArtifact in (Compile, packageDoc) := false

このドキュメントは未リリースの2.4のものですが2.3でも問題なく動きます。

実測で2分くらい速くなりました。素晴らしい(^^v

なんとなくWebSocket APIの動作が思った通りにならなかったので、各種ブラウザのWebSocket接続リクエストのHeaderを調査しました。

このサイトではCookieを使ってないのでヘッダにCookieでてませんが、使っていれば普通にCookieが出力されます。

あと、Herokuのルータが付けてるヘッダ(x-forwarded-forなど)はカットしました。

★Chrome
cache-control: no-cache  
connect-time: 4  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
pragma: no-cache  
sec-websocket-extensions: permessage-deflate; client_max_window_bits, x-webkit-deflate-frame  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 1  
upgrade: websocket  
user-agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36  
via: 1.1 vegur  

★Firefox
accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
accept-encoding: gzip, deflate  
accept-language: ja,en-us;q=0.7,en;q=0.3  
cache-control: no-cache  
connect-time: 2  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
pragma: no-cache  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 0  
upgrade: websocket  
user-agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0  
via: 1.1 vegur  

★IE11
cache-control: no-cache  
connect-time: 1  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 0  
upgrade: Websocket  
user-agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko  
via: 1.1 vegur  

★Mac Safari
cache-control: no-cache  
connect-time: 1  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
pragma: no-cache  
sec-websocket-extensions: x-webkit-deflate-frame  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 1  
upgrade: websocket  
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.76.4 (KHTML, like Gecko) Version/7.0.4 Safari/537.76.4  
via: 1.1 vegur  

★Android
cache-control: no-cache  
connect-time: 0  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
pragma: no-cache  
sec-websocket-extensions: permessage-deflate; client_max_window_bits, x-webkit-deflate-frame  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 0  
upgrade: websocket  
user-agent: Mozilla/5.0 (Linux; Android 4.1.2; P-02E Build/JZO54K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Mobile Safari/537.36  
via: 1.1 vegur  

★iPad
cache-control: no-cache  
connect-time: 0  
connection: Upgrade  
Content-Length: 0  
Host: room-sandbox.herokuapp.com  
origin: http://shunjikonishi.github.io  
pragma: no-cache  
sec-websocket-extensions: x-webkit-deflate-frame  
sec-websocket-key: (snip)
sec-websocket-version: 13  
total-route-time: 0  
upgrade: websocket  
user-agent: Mozilla/5.0 (iPad; CPU OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53  
via: 1.1 vegur  

□□□□

ほとんど余計なヘッダはついてないですね。

Firefox以外はAccept, Appcept-Encoding, Accept-Languageはついていません。

なるほど。確かにHTMLページを返すことを目的としたプロトコルではないので付ける必要ないですね。

納得いきました。

ども、小西です。

昨日6月9日にビルボードライブ東京で行われたSalesforce1 Developers Community MAXというイベントでWebSocketの話をしてきました。

会場名をもう一回言うけどビルボードライブ東京だよ！Googleのインドアビューで見るとこんなだよ！！

なんでこんなところでテッキーな話を。。。と思ったけど見る側にしたら机もあって良かったのかも。(^^;

発表資料はこれ。

http://shunjikonishi.github.io/slides/websocket/index.html


持ち時間に対してとにかく内容を詰め込んだので置き去りにされた人も多かったかも。。。

あいすいません。m(_ _)m

資料はそれだけ見ればわかるように作ったつもりなので、気になる人は見てくだされ。
プレゼン中に口頭でのみ説明した内容もだいたい文章で入ってます。

春頃からこのブログでも何度もWebSocketの話題をとりあげていて、言いたいこともたくさんあったんだけど、だいたいこれで全部吐き出せたかな。(^^;

セキュリティの話とかWebSocketをAjaxの代替として使う話とかは他ではあまり見かけたことがない内容で個人的には結構満足してるけど、果たして一般受けするかどうかは謎。。。(^^;

以下今回のイベントでの個人的なトピックです。

★Happy HourにまさかのQuizar

今回Salesforceの岡本さんのご厚意(?)で、Happy Hourの余興で3月に作ったQuizarによるクイズゲームが行われました。優勝賞品はプレステ４！！

多分50人くらいが参加してたんじゃないかな？ぶっちゃけこれまでにそんな人数での実践をしたことはなかったんだけど、まぁ普通に動いて良かった。(^^;

ちなみにこれ元々は参加人数は最大50人に制限してたのを、200人まで参加可能なように会場でその場で修正しました。(^^;

作った当時はどの程度の同時接続を捌けるのかに関してあまり確信がなかったけど、その後にやったC10Kのテストの感触から言うとDynoを増やせば1000人とかでも普通に捌けるとは思います。(これが数万、数十万のオーダまでいけるようであれば、テレビとかでも使えそうだけどさすがにそれは自信ないなぁ。。。クライアントへのpushをもうちょっと賢くすればできるかもしれないけど。)

まぁ機会(と度胸)があれば試してみてください。(^^;
何にせよ会場の皆さんにWebSocketアプリを体感してもらえたのは良かったと思います。岡本さんありがとうございました。

Quizarは特に宣伝しているわけでもなく、この先大幅な機能追加が行われることもないと思うけど、ひっそりと営業中なので勉強会等をやる機会のある人は使ってみてください。
ご意見、プルリク等は歓迎します。(^^;

スターがいっぱいつくと開発／運営方針とかも変わるかもよ？(^^;

★@i556 HackChallenge癒しアプリケーション部門で優勝

同僚の@i556が見事優勝して10万円GET!!!

おめでとう！！！
そしてごちそうさま！(と、先に言ってみる)

作ったアプリはタスクを癒し系アイコン(タスクの達成度が高いほど癒し度アップ)でカレンダー上に表示してユーザーのモチベーションを上げるというもの(で、あってるよね？)

優勝者発表の前から猫には勝てると思っていたよ。
本当におめでとう。

ちなみにHeroku賞はまさかの該当者なし。。。
もうちょっと早くにお題出しとけよ。。。(--

自分のプレゼンでテンぱっててそれどころじゃなかったんだけど俺もなんか出しておけば良かった。(--

★REVEAL.jsの話

ちょろっと聞かれたけど、今回プレゼンに使ったREVEAL.js。はっきり言ってイケてる。
ていうか、プログラマが使うプレゼンツールとしては最強なんじゃなかろうか。
なにせ、基本マークダウンだけでプレゼンが作れて足りないところはHTMLとJavaScriptでどうにでもできるので。

興味のある人はサンプルサイトを覗いてみると良いと思う。
ストーンズの50年とかマジかっこよくてお勧め。

とりあえず試してみたい人は

https://github.com/shunjikonishi/slides

をcloneしてgrunt起動すれば動きます。
基本content.mdだけ編集すれば良いのでドキュメントとかまったく読まなくてもそれなりに使えると思う。

今回使ったプログラム要素は

• プレゼンの残り時間とスライド一枚当たりの時間を画面に表示
• iframeでアプリ埋め込み
• お絵描きのWebSocketサンプル埋め込み
• setIntervalのデモ
• js-sequence-diagramsの埋め込み(ただしブラウザのSVGのレンダリングにバグがあるのか表示が安定しなかったため本番ではイメージに差し替え)

など。
今朝になってトップにTwitterとFacebookのソーシャルボタンも追加してみた。(^^;

これ本当に何でもできるのでTwitterのTLを埋め込むとか、アイデア次第で色々なことができそう。
WebSocketを使えばそれこそ聴衆参加型のプレゼンもできるはず。
なんか思いついたらそのうちどこかでチャレンジしてみたい(^^;