HTML5 アプリ開発

HTML5 アプリ開発
● HTML5 で Web アプリ開発はこんな感じに
– HTML5 が強力になった分、JavaScript で書く量が増
える (飛躍的に!)
– 相対的にサーバー側のコードが減る

HTML5 時代の Web アプリ
今までの Web アプリ
サーバーブラウザー
PHP など
JavaScript
HTML/CSS
サーバーブラウザー
PHP など
JavaScript
HTML/CSS
JavaScript のコードが増えて
サーバー側のコードが減る

HTML5 時代の Web アプリ (BaaS 使う)
BaaS ブラウザー
JavaScript
HTML/CSS
● BaaS を使いこなせば、サーバー側のコードが
いらないなんてことも...
– フロントエンドの開発者は自分だけで完結するので
より有利になる!

● 当然問題もある
● JavaScript のコードが増えるということは...
– 小さな問題が積み重なって大きな問題になりやすい
– JavaScript ファイルをパースする時間が増大する
– どうやってデバッグするの?
– などなど...

というわけで
自分がやってみた時の注意点をつらつらと

アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!

SPA で作る
● Single Page Application (SPA) で作ります
– HTML ファイルは一つのみ
– 新しいページヘジャンプするのではなく、画面の一
部分のみを書き換えます

SPA で作る
ブラウザーサーバー
リクエスト
応答/HTML
リクエスト
ページ
応答/HTML
ページ
● 今までの Web アプリ
はこんな感じ
– サーバー側で HTML
を生成して、ブラウ
ザーがそれを表示する
– ページはリクエストの
たびに作り直される
– デメリットが結構多い
処理
HTML生成
処理
HTML生成

SPA で作る
ユーザーID: adi00348
ユーザー名: masakura
所属: codeArts 株式会社
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>
<div class=”header>
<h1>ユーザー情報: masakura</h1>

</div>
<div class=”main”>
<table>
<tr><th>ユーザーID:</th><td>adi00348</td></tr>
<tr><th>ユーザー名:</th><td>masakura</td></tr>
<tr><th>所属:</th><td>codeArts 株式会社</td></tr>
</table>
</div>
<div class=”sidebar”>

</div>
<div class=”footer”>

</div>
</body>
</html>
左の表を表示したいだけなのに、実際にはこん
なにたくさんのデータがインターネットを流れ
る
● デメリット
– 通信量が多い
– 毎回ヘッダー・フッター
をブラウザーが解釈する
– スクロール位置がリセッ
トされる
– etc...

SPA で作る
ブラウザーサーバー
リクエスト
応答/データ
リクエスト
● SPA だとこんな感じ
– サーバー側は処理結果
を返すだけ
– ブラウザー側で
HTML を生成し、
ページの一部を差し替
える
– ページはずーっと同じ
処理ページ
HTML
生成
HTML
差替
HTML
生成
HTML
差替
応答/データ
処理

ブラウザー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>
<body>
<div class=”header>
<h1>ユーザー情報: masakura</h1>

</div>
<div class=”main”>
<table>
</table>
</div>
<div class=”sidebar”>

</div>
<div class=”footer”>

</div>
</body>
</html>
SPA で作る
{
“id”: “adi00348”,
“name”: “masakura”,
“company”: “codeArts ”株式会社
}
応答/JSON データ HTML生成
(JavaScript)
<table>
</table>
差し替える
サーバー
● メリット
– 通信量が減る
– 毎回ページ全体が解釈されな
い
– スクロール位置がリセットさ
れない
– JavaScriptファイルの解釈が
一度で済む
– etc...

SPA で作る
● カンのいい方は SPA だと URL が切り替わらな
いでしょ? と気がつくかもしれません
– History API で対処します
– HTML5 Conference 2015 in 鹿児島の高見先生のセッ
ションが参考になる!
– https://www.youtube.com/watch?v=ejlb8CX2UgM
– 5:01:30 あたりから

SPA で作る
● アプリを作る場合は SPA で作ることを検討し
てみてください
● GitHub のように SPA でないものもありますの
で、必ず SPA が正解というわけでもないよう
です
● SPA で作ろうとすると大変なので、フレーム
ワークを使いましょう

フレームワークを使う
● JavaScript のコードが長くなるということは、
特に多人数での開発でごちゃごちゃなりやすい
● コードが長いと保守も大変だ!
● SPA をゼロからつくり上げるのも大変!
● というわけで MV* のフレームワークを導入し
ましょう

● どれ使いましょう?

● いずれ淘汰されるんでしょうけど、多様性って怖いね!
● ひとまず、実績や利用者が多いものがオススメ
– ちょっと前なら Backbone.js
– 今なら AngularJS
● どれがいいかはググると結構見つかるよ!
● でも、最後は肌に合うかどうかってのが大事!
● 将来のことも考えて選びましょう...
– 難しい...

開発者ツールを使いこなす
● ブラウザーの開発者ツールを使いこなしましょう
– といっても、ウェブ屋さんだったら普通に使ってますよ
ね...
– 自分が教えてもらいたいくらいです
● https://developers.google.com/web/tools/chrome-devtools/
– 公式のマニュアル軽く読むだけでも勉強になる
● 今日は JavaScript コードのデバック関係の機能を実
演してみます

コーディング時の注意
● コードが増える分問題が起きやすいので、コー
ディング規約も重要になる
● Google JavaScript Style Guide
– http://google.github.io/styleguide/javascriptguide.xml

● JavaScript コード検査ツールも重要
– エディターにリアルタイム検査プラグインを組み込
むのオススメ
– JSHint + JSCS 使ってましたけど、ESLint がこの間
正式リリースされました! オススメ!

● 突然ですが、以下のコードの実行結果どうなる
と思いますか?
var document = 'hoge';
console.log(document);

● 結果は “#document” と表示されます (document
オブジェクトが表示される)
– これを知ったときはかなり驚きました...

● Strict モードを有効にすると、こういったバグ
になりやすい挙動をある程度防ぐことができる
– 他にも違いがあります
– https://developer.mozilla.org/ja/docs/Web/JavaScript/Stri
ct_mode
● ファイルの先頭に 'use strict;' と書くだけ!
'use strict';
var document = 'hoge';
console.log(document);

● ちゃんとエラーになる!

● Strict モードを有効にするのは必須!
● ただし、既存のコードを Strict モードを有効に
すると阿鼻叫喚になるので注意してね!
– 挙動が違うんだもの...

● ECMAScript 5 ではスコープが関数しかない
● スコープを作るために関数を作らないといけな
い
● 名前のない関数を作ってその場で呼び出すのが
通例になっている
(function () {
'use strict';
// ここに処理を書く...
})();

● スコープって何?
– 変数などが有効な範囲
– 以下の二つのコードは同じスコープになるので title
変数が B さんので上書きされてしまう
// B さんが書いたコード
var title = 'hogehoge';
var displayMyTitle = function () {
alert(title);
};
// A さんが書いたコード
var title = 'html5jk #1'
var displayTitle = function () {
alert(title);
};
$(document).on('click', '#button1', function () {
displayTitle();
});

● 無名関数の即時実行を使うとちゃんと動く
// B さんが書いたコード
(function () {
var title = 'hogehoge';
var displayMyTitle = function () {
alert(title);
};
})();
// A さんが書いたコード
(function () {
var title = 'html5jk #1'
var displayTitle = function () {
alert(title);
};
$(document).on('click', '#button1', function () {
displayTitle();
});
})();

● Windows で非ウェブ系の人はちょっと気をつけ
て!
– 文字コードは UTF-8 (BOM なし)
– 改行コードは LF のみ
– Atom とか Sublime Text のようなウェブ屋さんがよ
く使うエディター使えばそんなに問題にならないは
ず

アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
● おまけ

HTML5 API ライブラリを使う
小林くん (仮名) のお話

おお!
WebRTC を使えばブラウザーだけで
デスクトップ画面の配信ができるのか!
By 小林くん (仮名)

これは使える!

(カタカタカタカタ)

なにこれすっげー面倒や...

ちょっと見せてください
By まさくら

ほんとだ、めんどくさい...
By まさくら

そんな人たちに救世主が!

● SkyWay とか PeerJS を使うと簡単!
– HTML5 Conference の仲さんのセッションが参考に
なるよ!

なにこれ、簡単なんですけど...
By まさくら

最初から HTML5 API は
こんな感じで簡単に使えるようにしてよ!
By まさくら

と思ったらですね

調べてみると、HTML5 API は
わざと面倒に作っているようです

● Extensible Web という考え方で作られている
– https://extensiblewebmanifesto.org/ja/
– アプリ開発者が使いやすいようには作られているわ
けではない

● 使いやすさの追求はライブラリの開発者に任せ
て、HTML5 API はそれを実現するための裏方
になる
HTML5 API (ブラウザー)
ライブラリ
アプリケーション
ブラウザーはしょっ
ちゅう
アップデートできない
けど強制アップデート
ライブラリは仕様変更
や機能追加ができる
アプリ開発者はライブ
ラリを選ぶことができ
る

● 基本的に汎用性を高めようとすると低レベルに
なる
– = 使うのが難しくなる
HTML5 API (ブラウザー)
ライブラリ
アプリ
汎用性難易度レベル
簡単
難しい
低い
高い
高い
低い

● 大体使いやすいライブラリがあるので、それを
使っちゃいましょう
– WebRTC → PeerJS や SkyWay
– WebGL → Three.js
– WebComponents → Polymer
● DOM 操作に jQuery を使ったほうが簡単だとい
うのと感覚は同じかも

まとめとして...
楽に使えるライブラリを探してきて使いましょ

おまけ
● 実装がまだ追いついてない規格も結構ある
● ブラウザーで結構実装差があったりする
● Can I use? でまずは確認だ!

おまけ
● 実装がまだだな HTML5 API を使うときは...
● こういうのもある
– Chrome Canary
– Firefox Developer Edition

まとめ
● 基本 SPA で作りましょう
– MV* フレームワーク使ったら簡単です!
● ブラウザーの開発者ツール超大事!
● JavaScript ははまりどころが多いです
– 規約とかノウハウ大事です
● HTML5 API を直接使うと面倒なことが多い
– 簡単に使えるライブラリ探しましょう
● 人より先を行きたい人はベータ版 (?) ブラウザーも使い
ましょう!

終わり
ご清聴ありがとうございました!

HTML5 アプリ開発

More Related Content

What's hot

Viewers also liked

Similar to HTML5 アプリ開発

HTML5 アプリ開発

Editor's Notes