レポート

「第41回 HTML5とか勉強会 ~事例に学ぶHTML5開発」活動報告

この記事を読むのに必要な時間:およそ 2 分

2013年8月26日,第41回の「HTML5とか勉強会」DeNAさんに会場をお借りして開催しました。今回のテーマは「事例に学ぶHTML5開発」ということで,HTML5を使ったアプリケーション開発で苦労した点や工夫した点について紹介したセッションがありました。本稿では,今回の内容についてレポートします。

画像

遊びで真面目にwri.peを作る

はじめにFrogAppsとトレタでCTOをしている増井雄一郎さんからブラウザ上で動作するメモ帳アプリwri.peについて紹介いただきました。

画像

wri.peとは

wri.peは増井さんが個人で開発したメモ帳アプリです。Markdown形式で記述することができて,アプリの操作もショートカットコマンドで行えるのが特徴です。ブラウザで動作するアプリで,iPhoneなどのスマートフォンからも使うことができます。

もともとは自分用に作っていたものを公開してみたところ,予想以上に反響が多く驚いたそうです。

開発期間と運用面について

基本的な機能は2日間で実装したそうですが,その後1ヶ月ほどかけてブラッシュアップしていき,現在も細かい修正などを行なっているとのことです。

wri.peはHeroku上で動かしており,その理由は「毎日自分で使うためにサーバの運用に時間を取られたくないから」と述べていました。

リリースに際してはプレスリリースも行ったそうで,レビュー記事やフィードバックなどの国内外からたくさんの反響があったとのことです。

講演では他にもデザイン面や自動テストについての紹介がありました。詳しくは講演動画でご覧ください。講演資料はこちらになります。

増井さんが書かれた技術的な解説記事もあわせてご覧ください。

HTML5でサイネージは作れる!!

続いてカヤック比留間和也さんからHTML5でサイネージを制作した事例について紹介いただきました。

画像

HTML5でサイネージを

サイネージをHTML5で作るにあたり,Web技術でどこまでできるのかチャレンジしてみたそうです。WebGLやCanvas,AudioやVideo,getUserMediaやFullscreen APIなどの技術を使ってクオリティの高い表現を目指したと言います。

Webサイト制作などではこれらの技術に対応していないブラウザもあるので採用するのは難しいですが,今回はサイネージということでGoogle Chromeだけで動くモノを作成したそうです。Google Chromeに特化した作成をしてみて「普段どれだけ技術的にできるのに断念しているか知ることができた」と述べていました。

サイネージならではの苦労と工夫

今回の事例では8時間の連続起動,ユーザが触れるコンテンツ,カメラで写真撮影してサーバにアップロードするといった仕様が求められたそうです。8時間連続起動しても大丈夫かどうかを確認するためにメモリ管理を徹底したり,事前に耐久テストをおこなったりといった苦労があったとのことです。ユーザが触れるコンテンツという点では,管理用のメニューなどを表示するボタンを設置してしまうとユーザに押されてしまうため,隠しコマンドを用意して対応したそうです。

問題が起きたら即座にアップデート

実際に設置してみたところ不具合が発生したそうですが,SVNでプロジェクトを管理することで遠隔で更新作業を行い,現場担当者がそれを反映するというやり方で不具合の修正を迅速に行なったと紹介していました。こういった点からも「Web技術とサイネージは相性が良い」と述べていました。

デモや事例の詳しい内容は講演動画をご覧ください。講演資料はこちらになります。

著者プロフィール

中島直博(なかじまなおひろ)

DMM.com Labo所属。

html5j/HTML5とか勉強会スタッフ。

フロントエンドエンジニアとして主にスマートフォン向けサービスの開発に従事。ツチノコの巣に迷い込んだひよっこ。

twitter:@nakajmg

コメント

コメントの記入