際際滷

際際滷Share a Scribd company logo
ウェブアプリ秘TPART1
はじめての
モバイルウェブアプリ
牽勸密初 jig.jp旗燕
@taisukef #kosenbc
ロボコン、
プロコンにAき、
互ビジコン
エントリ`鞭原
仇囃の右冥し
仇囃の右冥し
モバイルウェブアプリで
燕Fする
モバイルウェブアプリ
とは
ケ`タイや
スマ`トフォンで咾
ウェブアプリのこと
ウェブアプリとは
ブラウザ貧で咾
アプリケ`ションソフト
ウェアのこと
ウェブアプリとは
HTML/CSS/JavaScript/
PHP/Java/Ruby on
Rails/´
ウェブアプリとは
児云はHTML
HTMLとは
Hyper
Text
Markup
Language
ブラウザで
燕幣できる
デ`タ侘塀
HTMLとは
gif/jpg ★ 鮫颯愁侫
mpg/avi ★ 啝ソフト
xls ★ Excel
html ★ ブラウザ
HTML箭
<!DOCTYPE html>
<html>
<head>
<title>仇囃の右</title>
</head>
<body>
臭坤汽丱┘疋奪
</body>
</html>
タグ
HTMLはタグによって
Markupする冱Zです
タグ ^<^ と ^> ̄ で譴
れたもの
_兵タグとK阻タグ
_兵タグ: <???>
K阻タグ</???>
<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 を
ダブルクリック
はじめてのモバイルウェブアプリ 1
猟忖を筝する
<body>
臭<br>
サバエドッグ<br>
蓴<br>
</body>
<br>
個佩するタグ
はじめてのモバイルウェブアプリ 1
亟寔を原ける
<body>
臭<br>
サバエドッグ<br>
<img src=/slideshow/web-1-44466787/44466787/^sabae1.jpg ̄>
</body>
<img>
鮫颪魃輅召垢襯織
<img src=/slideshow/web-1-44466787/44466787/^sabae1.jpg ̄>
srcでファイル兆または
URLをく
はじめてのモバイルウェブアプリ 1
リンクする
<body>
<a href=^sabae.html ̄>
臭</a><br>
サバエドッグ<br>
<img src=/slideshow/web-1-44466787/44466787/^sabae1.jpg ̄>
</body>
<a>
リンクをO協するタグ
<a href=^sabae.html ̄>臭</a>
リンクする猟忖双を譴
hrefにファイル兆またはURL
はじめてのモバイルウェブアプリ 1
どんどんつなぐ
どんどんつなぐ
どんどんつなぐ
これが
Wold Wide Web
┘ΕД孱
エントリ`
お棋ちしてます
|Twitterで
和ハッシュタグ
を原けてツイ`ト
してください
#kosenbc
頼
HTML5のゝ吊M晒
HTML4襲蹶F冱Z
HTML5愁廛蹈哀薀潺鵐委壞Z
いろいろ{べてみてください
Offline Application
ロ`カルにキャッシュするものをO協
test.manifest mime-type = text/cache-manifest
CACHE MANIFEST
hello.js
FALLBACK # ヒットしないときに燕幣
./ fallback.html
NETWORK # キャッシュしないもの
./api/
<html manifest=^test.manifest">
聞われるrに、test.manifest の厚仟をチェック
Local Storage
ロ`カルにデ`タを隠贋
サ`バいらずでおもしろいこと
Geo Location
Navigator.geolocation
Navigator.getCurrentPosition
Navigator.watchPosition
Navigator.clearWatch
了崔ゲ`できます
GPSをリアルタイムに崙囮辛嬬
徭喇に宙鮫できるCanvas
var 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() {
// マウスボタンxされた
}
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

More Related Content

What's hot (20)

PDF
もっと措くなる堰意珂晦アプリケ`ション譜柴とg廾
Mitsue-Links
?
PDF
皆艶姻厩庄界艶安看姻一艶姻でつくる安艶恢の隆栖
Yoshiki Kobayashi
?
PDF
Swift bondさわってみた
Motoki Narita
?
PPTX
鯵とサ`ハ?レスア`キテクチャ Aws cognito + s3 + ses + lambda
Masayuki KaToH
?
PPTX
鯵と Amazon Elasticsearch Service とスポットインスタンス
Masayuki KaToH
?
PPTX
宥械の3蔚の堀業で プログラミング。 仝 Emacsキ`バインドのすすめ々
KinkumaDesign
?
PPTX
遺看姻糸看厩温で粥稼乙顎鉛温姻干皆アプリ蝕k
アシアル幄塀氏芙
?
PPTX
鯵とフ?ロク?ラミンク?縮圄
Masayuki KaToH
?
PPTX
鯵とコミュニティ試強のタスク
Masayuki KaToH
?
PPTX
鯵と2016コミュニティ試強尅り卦り
Masayuki KaToH
?
PDF
鴛意さ?っくは?らん氏
Masayuki KaToH
?
PDF
額艶看馨温稼ではじめる卯堀敬艶恢アプリ蝕k
Masakazu Muraoka
?
PDF
鴛看稼庄界て?ハイフ?リット?アフ?リ秘壇
Tomokatsu Iguchi
?
PDF
署gアフ?リ柮 アフ?リ?オ`フ?ンテ?`タとライセンス
Masayuki KaToH
?
PPTX
いま深えられる泙袗遒睨戮三侏アプリを蝕kする圭隈
Kenichiro Nakamura
?
PDF
鯵とCiとinfrastructure as code(隆頼)
Masayuki KaToH
?
PDF
モバイル堰意珂晦5サイトでの亟寔アップロ`ドの恷癖晒と匍暦アプリへの癖喘
Shinichi Tomita
?
PPTX
堰温4乙看もくもく烏御2016定11埖蛍
Masayuki KaToH
?
PDF
匍暦アプリケ`ションにおけるモダン安艶恢蝕kの嶐刊`堰意珂晦5蝕kって酒gなの
Fumio SAGAWA
?
PPTX
2014定メディア垢型茶膿氏 及1嫗仝安艶恢の碧怏みと堰意珂晦5々
Takashi Endo
?
もっと措くなる堰意珂晦アプリケ`ション譜柴とg廾
Mitsue-Links
?
皆艶姻厩庄界艶安看姻一艶姻でつくる安艶恢の隆栖
Yoshiki Kobayashi
?
Swift bondさわってみた
Motoki Narita
?
鯵とサ`ハ?レスア`キテクチャ Aws cognito + s3 + ses + lambda
Masayuki KaToH
?
鯵と Amazon Elasticsearch Service とスポットインスタンス
Masayuki KaToH
?
宥械の3蔚の堀業で プログラミング。 仝 Emacsキ`バインドのすすめ々
KinkumaDesign
?
遺看姻糸看厩温で粥稼乙顎鉛温姻干皆アプリ蝕k
アシアル幄塀氏芙
?
鯵とフ?ロク?ラミンク?縮圄
Masayuki KaToH
?
鯵とコミュニティ試強のタスク
Masayuki KaToH
?
鯵と2016コミュニティ試強尅り卦り
Masayuki KaToH
?
鴛意さ?っくは?らん氏
Masayuki KaToH
?
額艶看馨温稼ではじめる卯堀敬艶恢アプリ蝕k
Masakazu Muraoka
?
鴛看稼庄界て?ハイフ?リット?アフ?リ秘壇
Tomokatsu Iguchi
?
署gアフ?リ柮 アフ?リ?オ`フ?ンテ?`タとライセンス
Masayuki KaToH
?
いま深えられる泙袗遒睨戮三侏アプリを蝕kする圭隈
Kenichiro Nakamura
?
鯵とCiとinfrastructure as code(隆頼)
Masayuki KaToH
?
モバイル堰意珂晦5サイトでの亟寔アップロ`ドの恷癖晒と匍暦アプリへの癖喘
Shinichi Tomita
?
堰温4乙看もくもく烏御2016定11埖蛍
Masayuki KaToH
?
匍暦アプリケ`ションにおけるモダン安艶恢蝕kの嶐刊`堰意珂晦5蝕kって酒gなの
Fumio SAGAWA
?
2014定メディア垢型茶膿氏 及1嫗仝安艶恢の碧怏みと堰意珂晦5々
Takashi Endo
?

Similar to はじめてのモバイルウェブアプリ 1 (15)

PDF
安艶恢エンジニアのための温稼糸姻看庄糸アプリ蝕k
Soudai Sone
?
PDF
書から兵めよう^卒念糸永姻艶壊壊で恬る溺徨ウケ¥スマホサイト
rie05
?
PDF
2012定8埖10晩 茶氏
Rin Yano
?
PDF
永鞄看稼艶赫温沿で安艶恢アプリをスマホアプリ晒
Takashi Okamoto
?
DOCX
メディア垢型サマ`ワ`クショップ仝安艶恢アプリ崙恬々お返圷の彿創
Takashi Endo
?
PPTX
Word pressで恬るandroidアプリ
yohei iwakura
?
PDF
Html1
Jun Chiba
?
PPTX
20111204 WebBroser Control Tips for Windows Phone
Kenji Wada
?
PDF
安艶恢1.0のハイブリッドアプリ蝕k
Kenta Tsuji
?
PPT
ネイティブC嬬を旋喘する Webアプリのg箭 ゛PhoneGap〜Rails゛
Daisuke Futatsumori
?
PPT
スマ`トフォンアプリ蝕k弌三┯塢州廝釘促リエイタ`ズ
hamahama 34
?
PDF
jQuery MobileとPhoneGapでスマ`トフォンアプリS?クッキング
Takashi Okamoto
?
PDF
Jqm20120804 publish
Takashi Okamoto
?
PDF
ぶっとびケ`タイ+Firefox OS Apps
EnsekiTT
?
PDF
20120904或珂遺セミナ`彿創i井
F匯 廉弥
?
安艶恢エンジニアのための温稼糸姻看庄糸アプリ蝕k
Soudai Sone
?
書から兵めよう^卒念糸永姻艶壊壊で恬る溺徨ウケ¥スマホサイト
rie05
?
2012定8埖10晩 茶氏
Rin Yano
?
永鞄看稼艶赫温沿で安艶恢アプリをスマホアプリ晒
Takashi Okamoto
?
メディア垢型サマ`ワ`クショップ仝安艶恢アプリ崙恬々お返圷の彿創
Takashi Endo
?
Word pressで恬るandroidアプリ
yohei iwakura
?
Html1
Jun Chiba
?
20111204 WebBroser Control Tips for Windows Phone
Kenji Wada
?
安艶恢1.0のハイブリッドアプリ蝕k
Kenta Tsuji
?
ネイティブC嬬を旋喘する Webアプリのg箭 ゛PhoneGap〜Rails゛
Daisuke Futatsumori
?
スマ`トフォンアプリ蝕k弌三┯塢州廝釘促リエイタ`ズ
hamahama 34
?
jQuery MobileとPhoneGapでスマ`トフォンアプリS?クッキング
Takashi Okamoto
?
Jqm20120804 publish
Takashi Okamoto
?
ぶっとびケ`タイ+Firefox OS Apps
EnsekiTT
?
20120904或珂遺セミナ`彿創i井
F匯 廉弥
?
Ad

More from Taisuke Fukuno (20)

PPTX
こどもプログラミング縮圄 - IchigoJamを聞った庁M娩I脆朶麪
Taisuke Fukuno
?
PPTX
オ`プンデ`タの試かし圭、幹ろう、弊順恷枠極忽社
Taisuke Fukuno
?
PDF
IoT Programming with IchigoJam
Taisuke Fukuno
?
PDF
臭のIoT/5つ佛オ`プンデ`タ並箭と隆栖嚠y - 楳畢オ`プンデ`タ試喘セミナ`
Taisuke Fukuno
?
PDF
はじめてのIoTプログラミング IchigoJam x sakura.io 悶Y
Taisuke Fukuno
?
PDF
Open Data Activity in Japan / W3C TPA2015 Breakouts Session
Taisuke Fukuno
?
PDF
IchigoJam これまでとこれから
Taisuke Fukuno
?
PDF
環廓hオ`プンデ`タ容序セミナ`
Taisuke Fukuno
?
PDF
オ`プンアプリによる仇圭幹伏エコシステム更廏並匍
Taisuke Fukuno
?
PDF
#IoTLT こどもIoT仝おじいさんとイノシシ々 by 牽勸密初
Taisuke Fukuno
?
PDF
ハンズオン茶氏 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
?
PDF
IchigoJam はじめてのプログラミング サイエンスアコ?ラ2015 Fb512WS2Y創
Taisuke Fukuno
?
PDF
W3C TPAC 奬始におけるオ`プンデ`タ プロモ`ション
Taisuke Fukuno
?
PDF
〆って僥ぶ、肝弊旗Webr旗のセキュリティ〇 幄塀氏芙 jig.jp 芙L 牽勸密初 - セキュリティミニキャンフ?
Taisuke Fukuno
?
PDF
IchigoJam はじめてのプログラミング
Taisuke Fukuno
?
PDF
 ̄しらはどりゲ`ム ̄ IchigoJam プログラミング その4
Taisuke Fukuno
?
PDF
臭から弊順、Local x IT = Global - Wらがつくる牽小
Taisuke Fukuno
?
PDF
Qかぬなら、Qくのをろう、ほととぎす / 互カンファレンス in _I2
Taisuke Fukuno
?
PDF
スポ`ツx返の凛を義む - ウェアラフ?ルg^gY鷂
Taisuke Fukuno
?
PDF
弊順恷芦!? 臭bコンピュ`タ`IchigoJam ?牽小室g宀の鹿い その2?
Taisuke Fukuno
?
こどもプログラミング縮圄 - IchigoJamを聞った庁M娩I脆朶麪
Taisuke Fukuno
?
オ`プンデ`タの試かし圭、幹ろう、弊順恷枠極忽社
Taisuke Fukuno
?
IoT Programming with IchigoJam
Taisuke Fukuno
?
臭のIoT/5つ佛オ`プンデ`タ並箭と隆栖嚠y - 楳畢オ`プンデ`タ試喘セミナ`
Taisuke Fukuno
?
はじめてのIoTプログラミング IchigoJam x sakura.io 悶Y
Taisuke Fukuno
?
Open Data Activity in Japan / W3C TPA2015 Breakouts Session
Taisuke Fukuno
?
IchigoJam これまでとこれから
Taisuke Fukuno
?
環廓hオ`プンデ`タ容序セミナ`
Taisuke Fukuno
?
オ`プンアプリによる仇圭幹伏エコシステム更廏並匍
Taisuke Fukuno
?
#IoTLT こどもIoT仝おじいさんとイノシシ々 by 牽勸密初
Taisuke Fukuno
?
ハンズオン茶氏 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
?
IchigoJam はじめてのプログラミング サイエンスアコ?ラ2015 Fb512WS2Y創
Taisuke Fukuno
?
W3C TPAC 奬始におけるオ`プンデ`タ プロモ`ション
Taisuke Fukuno
?
〆って僥ぶ、肝弊旗Webr旗のセキュリティ〇 幄塀氏芙 jig.jp 芙L 牽勸密初 - セキュリティミニキャンフ?
Taisuke Fukuno
?
IchigoJam はじめてのプログラミング
Taisuke Fukuno
?
 ̄しらはどりゲ`ム ̄ IchigoJam プログラミング その4
Taisuke Fukuno
?
臭から弊順、Local x IT = Global - Wらがつくる牽小
Taisuke Fukuno
?
Qかぬなら、Qくのをろう、ほととぎす / 互カンファレンス in _I2
Taisuke Fukuno
?
スポ`ツx返の凛を義む - ウェアラフ?ルg^gY鷂
Taisuke Fukuno
?
弊順恷芦!? 臭bコンピュ`タ`IchigoJam ?牽小室g宀の鹿い その2?
Taisuke Fukuno
?
Ad

はじめてのモバイルウェブアプリ 1