今回は12月19日(月)にアシアル株式会社とドワンゴ社で共同開催した「スマートフォンWebアプリ開発研修＆ハッカソン」の様子をお届けします。
対象読者
- スマートフォンWebアプリを作ってみたい方
- HTML5で何ができるのか知りたい方
- objective-Cに挫折したけど、スマートフォンアプリ作成の夢を諦めていない方
はじめに
スマートフォン、これを見ている方だったら、iPhone/Android、どちらかは持ってますよね。開発してる方もいらっしゃいますか？
objective-C,Java,どちらも一から作るとなると、結構な労力です。
ところで、HTML,JavaScriptは書いたことありますか？
Web系エンジニアやデザイナーなら、仕事で書いてるかもしれません。手軽ですよね。
スマートフォンにはブラウザも載ってるのはご存知だと思います。 実は、ブラウザアプリもなかなかあなどれません。
今まで携帯端末のブラウザアプリは、フォームアプリしか現実的ではありませんでしたが、スマートフォン(HTML5対応)が登場してからは、
- 音、映像を乗せられる
- 動的なグラフィックを描画できる
- 位置情報を取得できる
- ローカルに大きなデータを残せる
ちなみに、なぜスマートフォンはHTML5に対応しているかというと、 Webkit(オープンソース製品)をベースとしたブラウザを採用しているからです。
「携帯端末のアプリは、ブラウザのフォームアプリしか作ったことないよ」というあなた。HTML5に触れて、スマートフォン開発の可能性を拡げてみませんか？
今回は、スマートフォンWebアプリ開発研修と題して行った、HTML5を中心とした研修講座の様子をお伝えします。HTML5をあまり知らないという方は、載っているサンプルコードを実際に写経して、動かしてみてください。新たなアイデアが浮かぶかもしれません。
では、お楽しみください。
目次
- オーディオと映像
- 描画(canvas,svg)
- 位置情報
- ストレージ
- Lightning Talks
1.オーディオと映像
HTML5が登場し、オーディオと映像の扱いが手軽にできるようになりました。 簡単なタグでオーディオ/映像の指定をすると、用意された 再生/停止/プログレスバー が描画されます。
従来のように、UIコンポーネントボタンを並べて、リスナーを紐付けて...、という手間がいりません。さくっとムービーをwebに乗せたい、という時にも便利です。
CSSを乗せる(jQueryが便利)こともできるので、おしゃれなプレーヤーにもできます。
オーディオ・映像 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>オーディオ・映像 テスト</title>
</head>
<body>
<h1>オーディオ・映像 テスト</h1>
<section>
<h2>オーディオを再生する</h2>
<audio controls>
<source src="./onmyoji.mp3" />
</audio>
</section>
<hr />
<section>
<h2>映像を再生する</h2>
<video width="640" height="480" controls>
<source src="./onmyoji.mp4" />
</video>
</section>
</body>
</html>
こちらの結果はこうなります。
スマートフォンでも見ることができます。
2.描画(canvas,svg)
canvasは、命令によってラスタ画像を描くものです。 svgは、ベクタデータを格納したXMLです。
2つの違いといいますと、 canvasは拡大すると、ギザギザが出てしまいますが svg はベクタ画像 (Illustratorのように、点の位置や長さをデータに持って画像を描くもの) なので、拡大しても線がきれいです。
また、svgで描画した文字列は、文字列としてコピペが可能です。
canvasやsvgをプログラムから操作すると、アニメーションやゲームが作れます。
canvas 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas テスト</title>
</head>
<body>
<h1>canvas テスト</h1>
<canvas id="a_canvas" width="640" height="480" border=4></canvas>
<script>
var canvas = document.getElementById("a_canvas");
var context = canvas.getContext("2d");
context.strokeStyle="orange";
context.fillStyle = "#ffffcc";
context.fillRect(50,50,210,80);
context.strokeRect(50,50,210,80);
context.strokeStyle="blue";
context.fillStyle = "black";
context.font = "50px 'Times New Roman'";
context.fillText("dwango",70,106);
context.strokeText("dwango",72,108);
</script>
</body>
</html>
こちら動かすとこうなります。
svg 例
<svg width="640" height="480" xmlns="http://www.w3org/2000/svg">
<rect x="0" y="0" width="400" height="400" fill="black" />
<polygon points="200,100 350,350 50,350" fill="red" stroke="black" />
<rect x="40" y="350" width="320" height="30" fill="white" />
<circle cx="200" cy="110" r="20" fill="white" />
<text x="10" y="180" style="font-family:Arial;font-size:28px;stroke:white;fill:black;">Santa Claus is coming to here!</text>
</svg>
こちら動かすとこうなります。
ここで少し時間を取って、各々が好きな絵を描く時間がありました。みなさん面白い絵を描いていたようです。
ちなみに、HTML5からは、DOCTYPE宣言が
<!DOCTYPE html>また、<script>タグのデフォルトタイプがJavaScriptになったので、JavaScriptを書くときの<script>タグの宣言は、従来のように
<script type="text/javascript"><script>3.位置情報
GPS機能が無い機器でも、位置情報が取得できるってご存知ですか？私は知りませんでした。
GPSはもちろん、携帯基地局/wifiスポット/IPアドレスから、位置情報が取得できます。
位置情報を生かしたアプリをつくるもよし、マーケティングのデータとして取得するもよし。
※位置情報の精度は厳密ではない場合があります。
位置情報 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>位置情報 テスト</title>
</head>
<body>
<h1>位置情報 テスト</h1>
<img id="map" width="640" height="480" src="" />
<script>
navigator.geolocation.getCurrentPosition(
function (position){
var url = "http://maps.google.com/maps/api/staticmap?center="
+ position.coords.latitude
+ ","
+ position.coords.longitude
+ "&zoom=16&size=640x480&sensor=false";
var map = document.getElementById('map');
map.src = url;
},
function (){
alert('失敗');
}
);
</script>
</body>
</html>
こちらを実行した結果は以下になります。
ドワンゴ浜町本社の地図が表示されました。
※httpサーバー上に置かないと動かないので、ファイル経由ではなく
xampp,vmware,サーバなどに置いて、そこからhttp経由で見てみてください。
4.ストレージ
ストレージのような機能は、cookieが、HTML5より前からありましたが、
それよりずっと大きい容量(5MB)をローカルに永続的に持てるストレージ機能が、HTML5から追加されました。
キーバリュー型のストレージです。
ウインドウ(タブ)を消すとデータが消えてしまうもの(sessionStorage)と、消してもデータが永続的に残るもの(localStorage)があります。
ストレージ 例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>storage テスト</title>
</head>
<body>
<h1>storage テスト</h1>
<script>
var storage = window.localStorage;
if(storage["counter"] == null){
storage["counter"] = 1;
} else {
storage["counter"]++;
}
document.write(storage["counter"] + "回目の訪問です。");
</script>
<br />
<input type="button" value="F5" onClick="location.reload();" />
</body>
</html>
こちらを実行した結果は以下になります。
5.Lightning Talks
スマートフォンWebアプリ開発研修と並行して各自の選択制でハッカソンが行われていたのですが、そこでの成果発表を中心としたLightning Talksが最後にありました。
Lightning Talks 目次
- Short Social RPG : ドワンゴ 福田考行
- TwitterとWebSocketを組み合わせた何か : ドワンゴ 清水俊博
- HTML5とブラウザでスマホ向けミニゲームを作る : アシアル 久保田様
- iPhoneのSafariで動画をインライン再生をなんとかできないか試してみた : ドワンゴ 右京和馬
- SVGでファインマンダイアグラムを描く: ドワンゴ 小宮山純平
- お花サプライズ！ : UT Startup Gym 飯塚様
- パラパラまんがツールiPhone :ドワンゴ 松前健太郎
- 散りばメーカー : ドワンゴ 入木田萌
- ベジェ曲線を描いてみた : ドワンゴ 塩谷啓
- ゲーム作った : ドワンゴ 齊藤宏多
1.Short Social RPG : ドワンゴ 福田考行
友達と一緒に遊ぶ、RPGを作ったり遊んだりできるWebサービスの紹介です。
- 1回のゲームは数時間～数日で終わる。
- ソーシャルゲームのように時々５分ぐらいアクセスするだけで遊べる
ソースコード：http://dl.dropbox.com/u/5110891/ShortRPG.zip
2.TwitterとWebSocketを組み合わせた何か : ドワンゴ 清水俊博
Node.jsとjQuery mobile、GeoLocation APIとTwitter OAuthを組み合わせて、 今この瞬間にその場にいる人のTwitterアカウントを、 相互にfollowしあう事のできるアプリケーションの紹介です。
現在執筆中のNode.js本のサンプルの、先行実演を行いました。 詳細はご紹介できませんが、本が出版されるのを楽しみにお待ちください、とのことです。
3.HTML5とブラウザでスマホ向けミニゲームを作る : アシアル株式会社 久保田様
HTML5講座を担当された講師の岡本さんが所属するアシアル社の製品を、久保田様が発表なさいました。 HTML5+JavaScriptで作ったアプリを、iPhone,Androidで動くネイティブアプリのイメージに変換してくれるサービスを開発しています。
テレビで紹介され、その際はシューティングゲームをデモされたそうです。
製品サイト : http://monaca.mobi/
4.iPhoneのSafariで動画をインライン再生をなんとかできないか試してみた : ドワンゴ 右京和馬
iPhone向けSafariでは動画をインライン再生できないため、独自でイメージを利用した動画再生を行うJavaScriptの紹介です。
現在公開されているiPhone版HTML5ニコニコ動画開発の(趣味の範囲ではありますが)延長線上のものです。社外秘ですので、現時点では詳細は秘密にさせていただきます。
5.SVGでファインマンダイアグラムを描く : ドワンゴ 小宮山純平
SVGでファインマンダイアグラムを生成するアプリケーションの紹介です。
次数を設定すると、このような模様が自動生成されます。
ソースコード：https://github.com/dekosuke/FeynmanDiagram/blob/master/src/feynman.py
サンプル：https://github.com/dekosuke/FeynmanDiagram/blob/master/data/display.html
6.お花サプライズ！ : UT Startup Gym 飯塚様
facebook上で、みんなでネット上で花を買い、誕生日にお花を届けるサービスの紹介です。
サービス：https://hanasup.jp/
7.パラパラまんがツールiPhone : ドワンゴ 松前健太郎
フリーハンドで描いた絵から、簡単にパラパラまんがが作成できるアプリケーションの紹介です。
アプリケーション(iPhoneから見られます)：http://kenmaz.net/html5/animemaker/
スライド：http://kenmaz.net/html5/animemaker/2011-12-19_dwango_hackathon_kenmaz.pdf
ソースコード：http://kenmaz.net/html5/animemaker/src.zip
8.散りばメーカー : ドワンゴ 入木田萌
過去にC++,PHPで書いてきた画像処理プログラムを、HTML5で書いたものです。
ソースコード : https://github.com/irimo/inlaysetstud
9.ベジェ曲線を描いてみた : ドワンゴ 塩谷啓
ベジェ曲線を描くアニメーションをHTML5で書いたものです。
ソースコード：https://github.com/kwappa/bezier-renderer
10ゲーム作った : ドワンゴ 齊藤宏多
「デフラガ」という、PC版で既に公開されているゲームのスマートフォン版の紹介です。
アプリケーション：http://kotas.jp/junk/defragger/smartphone.html
上記ゲームのPC(オリジナル)版：http://kotas.jp/junk/defragger/
ソースコード：https://github.com/kotas/defragger
まとめ
以上、研修の内容をお届けしました。
『HTML5』という言葉は知っているけれど、それ用の本は厚いし、なかなかとっかかりが掴めない、と思っていた方は、今回の内容で、だいぶ夢が拡がったのではないでしょうか。
これからは仕事でも、スマートフォン向けWebアプリの需要が確実に広がってきます。 まだ定石が無く、混沌とした分野です。 今から作っていれば、この【スマートフォン向けWebアプリ】分野の数年スパンの発展・発達を追うことができます。
趣が深く、楽しいと思いますので、是非始めてみてはいかがでしょうか。
関連リンク
スペシャルゲストとしてご参加いただいた UT Startup Gym のみなさんが記事を書いてくださいました。講座・ハッカソンの様子が紹介されています。
- ドワンゴの社内ハッカソンに行ってきた！ - IT戦記
http://d.hatena.ne.jp/amachang/20111220/1324362455 - ドワンゴの開発研修に行ってきたよ！ - tulog
http://d.hatena.ne.jp/tushuhei/20111219/1324307754