こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!

第11回のテーマは「ソフトウェア開発 ~個人からチームへ~」
放送内で使用されたスライドと、みゆっきノートを公開します。

放送内で使用された資料はこちら↓


みゆっきノートはこちら↓


放送を見逃された方は、
チャンネルのアーカイブ動画 で視聴いただけますので、是非ご覧下さい!

第12回みゆっき☆Thinkは、2月上旬の放送を予定しております。
是非、次回もご覧下さい!

はじめまして、ドワンゴモバイル事業のエンジニア、入木田と申します。
今回は12月19日(月)にアシアル株式会社とドワンゴ社で共同開催した「スマートフォンWebアプリ開発研修&ハッカソン」の様子をお届けします。

対象読者

  • スマートフォンWebアプリを作ってみたい方
  • HTML5で何ができるのか知りたい方
  • objective-Cに挫折したけど、スマートフォンアプリ作成の夢を諦めていない方

はじめに

スマートフォン、これを見ている方だったら、iPhone/Android、どちらかは持ってますよね。開発してる方もいらっしゃいますか?
objective-C,Java,どちらも一から作るとなると、結構な労力です。

ところで、HTML,JavaScriptは書いたことありますか?
Web系エンジニアやデザイナーなら、仕事で書いてるかもしれません。手軽ですよね。

スマートフォンにはブラウザも載ってるのはご存知だと思います。 実は、ブラウザアプリもなかなかあなどれません。

今まで携帯端末のブラウザアプリは、フォームアプリしか現実的ではありませんでしたが、スマートフォン(HTML5対応)が登場してからは、

  • 音、映像を乗せられる
  • 動的なグラフィックを描画できる
  • 位置情報を取得できる
  • ローカルに大きなデータを残せる
など、いろいろできるようになりました。

ちなみに、なぜスマートフォンはHTML5に対応しているかというと、 Webkit(オープンソース製品)をベースとしたブラウザを採用しているからです。

「携帯端末のアプリは、ブラウザのフォームアプリしか作ったことないよ」というあなた。HTML5に触れて、スマートフォン開発の可能性を拡げてみませんか?

今回は、スマートフォンWebアプリ開発研修と題して行った、HTML5を中心とした研修講座の様子をお伝えします。HTML5をあまり知らないという方は、載っているサンプルコードを実際に写経して、動かしてみてください。新たなアイデアが浮かぶかもしれません。

では、お楽しみください。

目次

  1. オーディオと映像
  2. 描画(canvas,svg)
  3. 位置情報
  4. ストレージ
  5. 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>

こちらの結果はこうなります。

html5training_img1.png
スマートフォンでも見ることができます。

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>

こちら動かすとこうなります。

html5training_img2.png

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>

こちら動かすとこうなります。

html5training_img3.png

ここで少し時間を取って、各々が好きな絵を描く時間がありました。みなさん面白い絵を描いていたようです。

ちなみに、HTML5からは、DOCTYPE宣言が

<!DOCTYPE html>
だけでOKになりました。

また、<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>

こちらを実行した結果は以下になります。

html5training_img4.png

ドワンゴ浜町本社の地図が表示されました。
※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>

こちらを実行した結果は以下になります。

html5training_img5.png

5.Lightning Talks

スマートフォンWebアプリ開発研修と並行して各自の選択制でハッカソンが行われていたのですが、そこでの成果発表を中心としたLightning Talksが最後にありました。

Lightning Talks 目次

  1. Short Social RPG : ドワンゴ 福田考行
  2. TwitterとWebSocketを組み合わせた何か : ドワンゴ 清水俊博
  3. HTML5とブラウザでスマホ向けミニゲームを作る : アシアル 久保田様
  4. iPhoneのSafariで動画をインライン再生をなんとかできないか試してみた : ドワンゴ 右京和馬
  5. SVGでファインマンダイアグラムを描く: ドワンゴ 小宮山純平
  6. お花サプライズ! : UT Startup Gym 飯塚様
  7. パラパラまんがツールiPhone :ドワンゴ 松前健太郎
  8. 散りばメーカー : ドワンゴ 入木田萌
  9. ベジェ曲線を描いてみた : ドワンゴ 塩谷啓
  10. ゲーム作った : ドワンゴ 齊藤宏多

1.Short Social RPG : ドワンゴ 福田考行

友達と一緒に遊ぶ、RPGを作ったり遊んだりできるWebサービスの紹介です。

html5training_img6.png

  • 1回のゲームは数時間~数日で終わる。
  • ソーシャルゲームのように時々5分ぐらいアクセスするだけで遊べる
という特徴を持つゲームを、現在制作中です。

ソースコード: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で動くネイティブアプリのイメージに変換してくれるサービスを開発しています。

html5training_img7.jpg

テレビで紹介され、その際はシューティングゲームをデモされたそうです。
製品サイト : http://monaca.mobi/

4.iPhoneのSafariで動画をインライン再生をなんとかできないか試してみた : ドワンゴ 右京和馬

iPhone向けSafariでは動画をインライン再生できないため、独自でイメージを利用した動画再生を行うJavaScriptの紹介です。

現在公開されているiPhone版HTML5ニコニコ動画開発の(趣味の範囲ではありますが)延長線上のものです。社外秘ですので、現時点では詳細は秘密にさせていただきます。

5.SVGでファインマンダイアグラムを描く : ドワンゴ 小宮山純平

SVGでファインマンダイアグラムを生成するアプリケーションの紹介です。

html5training_img8.png

次数を設定すると、このような模様が自動生成されます。

ソースコード: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上で、みんなでネット上で花を買い、誕生日にお花を届けるサービスの紹介です。

html5training_img9.jpg
サービス:https://hanasup.jp/

7.パラパラまんがツールiPhone : ドワンゴ 松前健太郎

フリーハンドで描いた絵から、簡単にパラパラまんがが作成できるアプリケーションの紹介です。

html5training_img10.png

アプリケーション(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で書いたものです。

html5training_img11.png

ソースコード : https://github.com/irimo/inlaysetstud

9.ベジェ曲線を描いてみた : ドワンゴ 塩谷啓

ベジェ曲線を描くアニメーションをHTML5で書いたものです。

html5training_img12.png

ソースコード:https://github.com/kwappa/bezier-renderer

10ゲーム作った : ドワンゴ 齊藤宏多

「デフラガ」という、PC版で既に公開されているゲームのスマートフォン版の紹介です。

html5training_img13.png

アプリケーション:http://kotas.jp/junk/defragger/smartphone.html
上記ゲームのPC(オリジナル)版:http://kotas.jp/junk/defragger/
ソースコード:https://github.com/kotas/defragger

まとめ

以上、研修の内容をお届けしました。

『HTML5』という言葉は知っているけれど、それ用の本は厚いし、なかなかとっかかりが掴めない、と思っていた方は、今回の内容で、だいぶ夢が拡がったのではないでしょうか。

これからは仕事でも、スマートフォン向けWebアプリの需要が確実に広がってきます。 まだ定石が無く、混沌とした分野です。 今から作っていれば、この【スマートフォン向けWebアプリ】分野の数年スパンの発展・発達を追うことができます。

趣が深く、楽しいと思いますので、是非始めてみてはいかがでしょうか。

関連リンク

スペシャルゲストとしてご参加いただいた UT Startup Gym のみなさんが記事を書いてくださいました。講座・ハッカソンの様子が紹介されています。

こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!

第10回のテーマは「チーム開発 ~脱ぼっちマインド~」
放送内で使用されたスライドと、みゆっきノートを公開します。

放送内で使用された資料はこちら↓


みゆっきノートは、みゆっきが期末テスト中のためアップロードを延期しています。
しばらくお待ち下さい。

期末テストが無事終わったので、アップロードしました。
みゆっきノートはこちら↓


> 放送を見逃された方は、
チャンネルのアーカイブ動画 で視聴いただけますので、是非ご覧下さい!

第11回みゆっき☆Thinkは年始のお休みの都合により、1/13(金)夜7時からの放送を予定しております。
是非、次回もご覧下さい!
こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!

第9回のテーマは「はじめて学ぶバージョン管理とGit」
放送内で使用されたスライドと、みゆっきノートを公開します。

放送内で使用された資料はこちら↓

みゆっきノートはこちら↓


見逃された方は、
チャンネルのアーカイブ動画で視聴いただけますので、是非ご覧下さい!

また、ニコニコ生放送のタイムシフト視聴について、 ニコニコ生放送の録画不具合の為、タイムシフト動画が途中でみれなくなるという状況になっております。
タイムシフト視聴をご利用の皆様には大変ご迷惑をお掛けいたしました。
対応として、アーカイブ動画を予定より早く公開させて頂きました。
今後とも、みゆっき☆Thinkをよろしくお願い致します。

第10回みゆっき☆Thinkは12/3(金)夜7時からの放送を予定しております。
是非、次回もご覧下さい!
こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!
10/7(金)に、第8回「Javascriptだけでつくるみゆびで!」を放送いたしました!
第6回、第7回でJavascriptについて学んだみゆっきが、
今回はJavascriptだけを使って、動画サービス「みゆびで!」を制作!
番組内では自らサービスについて解説し、
第6回第7回の講師からのコードレビューも受けたりもしました。

第8回でみゆっきが使用した資料とソースコードを公開しております。

みゆっきの頑張りをぜひご覧ください!

みゆっきのプレゼン資料はこちら!


みゆっきの作ったサービス「みゆびで!」のソースコードはこちら!
https://github.com/toriimiyukki/miyuvide

また、ニコニコ生放送のタイムシフト視聴について、
ニコニコ生放送の録画の不具合のため、視聴が正常に行えない状況になっておりました。
またそれにあわせて、アーカイブ動画のアップロードも遅れております。
大変申し訳ありませんが、もうしばらくお待ち下さい。

第9回みゆっき☆Thinkは11/4(金)夜7時からの放送を予定しております。
是非、次回もご覧下さい!!

こんにちは。ドワンゴの荒木です。

弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!

第7回のテーマは「本気で学ぶJavascript」

放送内で使用されたスライドと、みゆっきノートを公開します。

放送内で使用された資料はこちら↓

みゆっきノートはこちら↓



見逃された方は、
生放送のタイムシフト
もしくはチャンネルのアーカイブ動画でも視聴いただけますので、是非ご覧下さい!



第8回みゆっき☆Thinkは10/7(金)夜7時からの放送を予定しております。

次回は、第6回第7回で学んだ成果をみゆっき自身がお見せする回になります。

ご期待下さい!

こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!

8/5(金)第6回放送より、放送元を「ドワンゴ研究開発チャンネル」に変更いたしました!

第6回のテーマは「Node.jsってなあに?」
放送内で使用された資料のあるアドレスと、みゆっきノートを公開します。

放送内で使用された資料はこちら↓
http://miyukki.mesolabs.com/



見逃された方は、 生放送のタイムシフト
もしくはチャンネルのアーカイブ動画 でも視聴いただけますので、是非ご覧下さい!

次回、第7回みゆっき☆Thinkは9/2(金)夜7時からの放送を予定しております。
次回もよろしくお願いします!

こんにちは。ドワンゴの荒木です。
弊社若手エンジニア鳥居みゆっきと一緒に技術を学ぶ生放送「みゆっき☆Think」!
6/24(金)第5回「iPhoneとAndroidをならべてみたよ!」と題しまして、
第3回でiPhone、第4回でAndroidについて学んだみゆっきが、
今度は自分で作ったアプリを自ら解説しました!
タイムシフトでもご覧いただけますので、見逃された方はそちらをどうぞ!

今回は、みゆっきのプレゼン資料だけでなく、
みゆっきの作ったアプリのソースコードも公開しております。
みゆっきの頑張りをぜひご覧ください!

みゆっきのプレゼン資料はこちら!

ソースコードの公開場所のアドレスはこちら!
https://github.com/toriimiyukki/mChat


第3回、第4回の資料も公開し、当ブログ内にて案内ておりますので、
見逃した方はそちらも合わせてご覧ください!


次回「第6回みゆっき☆Think」は、7/29(金)に放送予定です。
是非、ご覧ください!

こんにちは。ドワンゴの荒木です。
鳥居みゆっきと一緒に技術を学ぶ生放送、「みゆっき☆Think」
5/27(金)に、第四回「こんどはiPhoneに触ってみよう!」を放送いたしました。
その放送内で使用されたスライドと、みゆっきのノートを公開します。

元ファイルはこちらです(PDF)。


生放送のタイムシフト番組でもご覧いただけますので、是非ご視聴ください!

次回「みゆっき☆Think」は、6/24(金)にAndroidとiPhoneの両方を使った授業になる予定です。
是非、ご覧ください!

こんにちは。ニコニコ事業本部の高橋です。
鳥居みゆっきと一緒に技術を学ぶ生放送、「みゆっき☆Think」。
先日放送しました第三回の資料を公開いたします。大変遅れてしまい、申し訳ありません。


恒例のみゆっきノートはこちらです



元ファイルはこちら(PDFです)


次回、5/27(金)みゆっき☆ThinkはiPhoneの授業です。
みなさま、是非お見逃しなく!

ドワンゴ研究開発ブログ

Powered by Movable Type 4.2rc5-ja

アイテム

  • html5training_img13.png
  • html5training_img12.png
  • html5training_img11.png
  • html5training_img10.png
  • html5training_img9.jpg
  • html5training_img8.png
  • html5training_img7.jpg
  • html5training_img6.png
  • html5training_img5.png
  • html5training_img4.png

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。