はじめてのモバイルウェブアプリ 1
TRANSCRIPT
ウェブアプリ入門PART1
はじめてのモバイルウェブアプリ
福野泰介 jig.jp代表
@taisukef #kosenbc
ロボコン、
プロコンに続き、
高専ビジコン！
エントリー受付
地域の宝探し
地域の宝探し
モバイルウェブアプリで表現する！
モバイルウェブアプリとは？
ケータイやスマートフォンで動くウェブアプリのこと
ウェブアプリとは？
ブラウザ上で動く
アプリケーションソフトウェアのこと
ウェブアプリとは？
HTML/CSS/JavaScript/PHP/Java/Ruby on
Rails/…
ウェブアプリとは？
基本はHTML
HTMLとは？
HyperTextMarkupLanguage
ブラウザで表示できるデータ形式
HTMLとは？
gif/jpg →画像ソフトmpg/avi →動画ソフトxls → Excelhtml →ブラウザ
HTML例<!DOCTYPE html><html><head>
<title>地域の宝</title></head><body>鯖江：サバエドッグ</body></html>
タグ
HTMLはタグによってMarkupする言語です
タグ＝ “<“ と “>” で囲まれたもの
開始タグと終了タグ
開始タグ: <???>終了タグ：</???>
<h2>サンプル</h2>
<!DOCTYPE html>
HTMLであるという印
<html>…</html>
HTML全体を入れるタグ
<head>…</head>
ブラウザの本文ではない情報を書くタグ
<title>地域の宝</title>
タイトルを書くタグ<head>タグの中にいれる
<body>…</body>
ブラウザに表示するものを書くタグ
HTML例<!DOCTYPE html><html><head>
<title>地域の宝</title></head><body>鯖江：サバエドッグ</body></html>
表示してみよう
takara.htmlというファイルとして保存takara.html をダブルクリック
文字を変更する
<body>鯖江<br>サバエドッグ<br>梵<br></body>
<br>
改行するタグ
写真を付ける
<body>鯖江<br>サバエドッグ<br><img src=“sabae1.jpg”></body>
<img>画像を表示するタグ
<img src=“sabae1.jpg”>srcでファイル名または
URLを書く
リンクする
<body><a href=“sabae.html”>鯖江</a><br>サバエドッグ<br><img src=“sabae1.jpg”></body>
<a>リンクを設定するタグ
<a href=“sabae.html”>鯖江</a>
リンクする文字列を囲みHrefにファイル名またはURL
どんどんつなぐ
どんどんつなぐ
どんどんつなぐ
これが
Wold Wide Web（ウェブ）
エントリーお待ちしてます
質問Twitterで
下記ハッシュタグを付けてツイートしてください
#kosenbc
完
HTML5の劇的進化
HTML4＝表現言語HTML5＝プログラミング言語
いろいろ調べてみてください
Offline Applicationローカルにキャッシュするものを設定
test.manifest （mime-type = text/cache-manifest）CACHE MANIFESThello.jsFALLBACK # ヒットしないときに表示./ fallback.htmlNETWORK # キャッシュしないもの./api/
<html manifest=“test.manifest">使われる時に、test.manifestの更新をチェック
Local Storage
ローカルにデータを保存サーバいらずでおもしろいこと
Geo LocationNavigator.geolocationNavigator.getCurrentPositionNavigator.watchPositionNavigator.clearWatch
位置ゲーできますGPSをリアルタイムに制御可能！
自由に描画できるCanvasvar canvas = document.getElementById('canvas').getContext('2d');
canvas.strokeStyle = "rgb(255, 0, 0)";
canvas.beginPath();
canvas.moveTo(10, 10);
canvas.lineTo(100, 100);
canvas.closePath();
canvas.stroke();
http://fukuno.jig.jp/canvas-test.html
canvas.fillStyle = "rgb(0, 0, 255)";
canvas.fillRect(50, 10, 50, 50);
canvas.strokeStyle = "rgb(0, 255, 0)";
canvas.beginPath();
canvas.arc(40, 80, 20, 0, 2 * Math.PI, true);
canvas.stroke();
Canvas 落書きサンプルfield.onmousedown = function() {
// マウスボタン押された
};
field.onmousemove = function() {
// マウス動いた
};
field.onmouseup = function() {
// マウスボタン離された
}
http://fukuno.jig.jp/canvas-draw.html
モバイルで外で遊ぶ
• 残念ながらHT-03Aとか、XperiaはAndroid1.x
iPhone Android 1.x Android 2.x
Canvas O O O
Offline Application O X O
Local Storage O X O
Audio/Video O X O
Geo Location O X O