週刊「しょうもないWebアプリをつくる」 Vol.2 – 鏡

はじめに

週刊「しょうもないWebアプリをつくる」は、僕@kadoppe が(ほぼ)毎週「しょうもないWebアプリ」をつくって公開するという企画です。

創刊号を投稿してから、なんと2週間も経ってしまいました。タイトルに「週刊」という文字が書いてありますが、あれは嘘ですね。ごめんなさい。

隔週で書くのが自分のペースとしてちょうどいいのではないかと感じつつも、一旦は「週刊」のまま、努力目標として書いていきたいと思います。

それでは、今週つくった「しょうもないWebアプリ」を紹介したいと思います。

002: 鏡

Webカメラを搭載しているノートPCの画面を「鏡」にするWebアプリケーションをつくりました。アプリには以下のリンクからアクセスできます。

kdp-mirror

以下、スクリーンショットです。アクセスすると「This is a mirror.」という文字が表示されます。シンプルな見た目です。配色は気に入っています。

kdp-mirror

ページ表示後、カメラの使用許可を求めるダイアログが表示されます。特に問題なければ許可してください。

kdp-mirror-2

すると、ノートPCを眺めている自分の顔が画面上に大きく映しだされます。鏡なので、ちゃんと文字が左右反転した状態で映しだされていますね。

kdp-mirror-3

ソースコードはGitHubで公開しています(kadoppe/kdp-mirror)。また、Herokuアカウントをお持ちの方は、以下のボタンをクリックすることで、いつでもあなただけの「鏡」を公開することができます。

Deploy

それでは、アプリの開発につかった技術や、つまづいたところなどをカンタンに紹介していきたいと思います。

カメラへのアクセス: getUserMedia

カメラへのアクセスにはWebRTCのgetUserMediaというメソッドを使っています。対応ブラウザであれば、HTMLにVideo要素を配置し、JavaScriptからgetUserMediaメソッドを呼び出すだけで、簡単にカメラの映像にアクセス・表示することができます。

実装にあたって、以下の記事を参考にさせていただきました。ソースコードを使って詳しく解説されているので、ぜひ読んでみてください。
HTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編 | HTML5Experts.jp

getUserMediaの対応ブラウザですが、まだまだ広く普及しているとは言えない状態です。Can I useによると、IEやSafari(iOS含む)では利用できないとされており、対応しているブラウザでもベンダープレフィックスが必要になっています。

can-i-usehttp://caniuse.com/#feat=stream

そういった事情もあり、今回の「鏡」はPCのFirefox or Chromeでの動作のみをサポートしています。本当はスマートフォンでも動くようにして、手鏡として使えるようにしたかったのですが、それは次回以降のお楽しみにとっておきます。

鏡=左右反転

上述のgetUserMediaをつかって表示した映像は、そのままだと「鏡」ではありません。鏡にするためには、カメラが取得した映像を左右反転して表示してあげる必要があります。

左右反転にするために、Video要素に対して以下のCSSプロパティを適用しています。

X軸方向にマイナス1倍して表示=左右反転して表示、というわけです。

CoffeeScript

前回に引き続き、今回もNode.js + Expressの組み合わせをつかっています。ただし今回は、素のJavaScriptではなく、AltJSのひとつであるCoffeeScriptを使ってWebアプリをつくってみました。

以下のコマンドでプロジェクトにCoffeeScriptをインストールし、

bin/wwwファイルの先頭に以下のコードを追記することで、サーバサイドのJavaScriptコードをCoffeeScriptで書けるようになります。

また、クライアントサイドのJavaScriptコードもCoffeeScriptで書けるようにするため、connect-assets というnpmモジュールを使っています。

connect-assetsはRailsのAsset Pipelineと同様の機能を提供するためのモジュールです。ブラウザからCoffeeScriptで書かれたコードにアクセスがあった場合、それを自動的にJavaScriptに変換してブラウザに返す、といったことを実現するために使っています。

他には、テストコードもCoffeeScriptで書いてみました。詳しくはGitHubのリポジトリにアップしているソースコードをご参照ください。

なお、CodeClimateの静的解析はCoffeeScriptにまだ対応していないらしく、スコアが「0.0」として表示されてしまいます。

Code Climate

対応予定はあるみたいなので、首を長くして待ちましょう。

Code Climate for Coffeescript coming soon.

app.coffee vs. app.json

今回、サーバサイドのメインコードのapp.coffee、Herokuボタンを配置するために必要なapp.jsonという2つのファイルがらみでハマったポイントがありました。

起動スクリプトやテストコード内で以下のコードを書いていたのですが、appの中身がUndefinedになってしまい、Webアプリの起動やテストコードの実行が失敗してしまう問題が発生しました。

原因は、app.coffeeapp.jsonのファイル名がバッティングしていたこと。これらのファイルが同じディレクトリに存在していた場合、上記のコードでは本来読み込んで欲しいapp.coffeeではなく、app.jsonを読み込んでしまいます。

JavaScriptをつかっていた前回のWebアプリだと、app.jsapp.jsonが同じディレクトリに存在していたのですが、この場合はapp.jsが読み込まれるので問題にならなかったみたい。

今回は暫定対処として、app.coffeeserver.coffeeにリネームし、問題が発生しないようにしました。コードを保存するディレクトリを変える、というのも手ですね。

IntelliJ IDEA (WebStorm)での初めての開発

idea

普段はVimを使ってWebアプリケーションの開発をしているのですが、今回思い切ってIntelliJ IDEAでの開発に移行してみました。

JavaやRubyなどの他の言語にも対応しており、いろんな開発シーンで共通のツールを使って開発をすることに魅力を感じたので、自己投資だと思ってライセンスを購入。VimやEclipseなど、言語や開発対象によってツールを都度切り替えるのにストレスを感じていたのでした。

以下、使ってみた感想。

  • 起動に時間はかかるが、サクサク動く。
  • 内蔵ターミナルが違和感なく使える。(普段はiTerm2を利用)
  • Express をつかったWebアプリケーションのひな形プロジェクトを簡単に作成できる。

まだまだ使いこなせているとは言い難いですが、徐々にいろんな開発環境をこちらに移行できればと考えています。

おわりに

以上、「しょうもないWebアプリ」第2号「鏡」の紹介でした。スマートフォンでの動作をサポートしていないなど、アプリとしての改善ポイントはあるので、今後「鏡2」を紹介する日が来るかもしれません。

新しいことや知らないことを、調べたり試行錯誤したりしながら、少しずつ自分の知識や経験を広げていく作業はとても気持ちがいいものですね。今後も続けていきたいと思います。

ここまで読んでいただいた方、貴重なお時間を本当にありがとうございました。ご意見・ご感想、ご質問やアドバイスなど、この記事のコメントやTwitterアカウント @kadoppe までいただけるとすごく嬉しいです。

あと、つくってほしいもの、つかってほしい技術などリクエストも受け付けています(切実)。

それでは、また来週お会いしましょう。