SlideShare a Scribd company logo
1 of 57
HTML5 アプリ開発
HTML5 アプリ開発
● HTML5 で Web アプリ開発はこんな感じに
– HTML5 が強力になった分、JavaScript で書く量が増
える (飛躍的に!)
– 相対的にサーバー側のコードが減る
HTML5 時代の Web アプリ
今までの Web アプリ
サーバー ブラウザー
HTML5 アプリ開発
PHP など
JavaScript
HTML/CSS
サーバー ブラウザー
PHP など
JavaScript
HTML/CSS
JavaScript のコードが増えて
サーバー側のコードが減る
HTML5 時代の Web アプリ (BaaS 使う)
HTML5 アプリ開発
BaaS ブラウザー
JavaScript
HTML/CSS
● BaaS を使いこなせば、サーバー側のコードが
いらないなんてことも...
– フロントエンドの開発者は自分だけで完結するので
より有利になる!
HTML5 アプリ開発
● 当然問題もある
● JavaScript のコードが増えるということは...
– 小さな問題が積み重なって大きな問題になりやすい
– JavaScript ファイルをパースする時間が増大する
– どうやってデバッグするの?
– などなど...
HTML5 アプリ開発
というわけで
自分がやってみた時の注意点をつらつらと
アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
アジェンダ
● 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>
<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>
SPA で作る
{
“id”: “adi00348”,
“name”: “masakura”,
“company”: “codeArts ”株式会社
}
応答/JSON データ HTML生成
(JavaScript)
<table>
<tr><th>ユーザーID:</th><td>adi00348</td></tr>
<tr><th>ユーザー名:</th><td>masakura</td></tr>
<tr><th>所属:</th><td>codeArts 株式会社</td></tr>
</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 で作ろうとすると大変なので、フレーム
ワークを使いましょう
アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
フレームワークを使う
● JavaScript のコードが長くなるということは、
特に多人数での開発でごちゃごちゃなりやすい
● コードが長いと保守も大変だ!
● SPA をゼロからつくり上げるのも大変!
● というわけで MV* のフレームワークを導入し
ましょう
フレームワークを使う
● どれ使いましょう?
フレームワークを使う
● いずれ淘汰されるんでしょうけど、多様性って怖いね!
● ひとまず、実績や利用者が多いものがオススメ
– ちょっと前なら Backbone.js
– 今なら AngularJS
● どれがいいかはググると結構見つかるよ!
● でも、最後は肌に合うかどうかってのが大事!
● 将来のことも考えて選びましょう...
– 難しい...
アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
開発者ツールを使いこなす
● ブラウザーの開発者ツールを使いこなしましょう
– といっても、ウェブ屋さんだったら普通に使ってますよ
ね...
– 自分が教えてもらいたいくらいです
● https://developers.google.com/web/tools/chrome-devtools/
– 公式のマニュアル軽く読むだけでも勉強になる
● 今日は JavaScript コードのデバック関係の機能を実
演してみます
アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
コーディング時の注意
● コードが増える分問題が起きやすいので、コー
ディング規約も重要になる
● 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 ライブラリを使う
小林くん (仮名) のお話
HTML5 API ライブラリを使う
おお!
WebRTC を使えばブラウザーだけで
デスクトップ画面の配信ができるのか!
By 小林くん (仮名)
HTML5 API ライブラリを使う
これは使える!
By 小林くん (仮名)
HTML5 API ライブラリを使う
(カタカタカタカタ)
By 小林くん (仮名)
HTML5 API ライブラリを使う
なにこれすっげー面倒や...
By 小林くん (仮名)
HTML5 API ライブラリを使う
ちょっと見せてください
By まさくら
HTML5 API ライブラリを使う
ほんとだ、めんどくさい...
By まさくら
HTML5 API ライブラリを使う
そんな人たちに救世主が!
HTML5 API ライブラリを使う
● SkyWay とか PeerJS を使うと簡単!
– HTML5 Conference の仲さんのセッションが参考に
なるよ!
HTML5 API ライブラリを使う
なにこれ、簡単なんですけど...
By まさくら
HTML5 API ライブラリを使う
最初から HTML5 API は
こんな感じで簡単に使えるようにしてよ!
By まさくら
HTML5 API ライブラリを使う
と思ったらですね
HTML5 API ライブラリを使う
調べてみると、HTML5 API は
わざと面倒に作っているようです
HTML5 API ライブラリを使う
● Extensible Web という考え方で作られている
– https://extensiblewebmanifesto.org/ja/
– アプリ開発者が使いやすいようには作られているわ
けではない
HTML5 API ライブラリを使う
● 使いやすさの追求はライブラリの開発者に任せ
て、HTML5 API はそれを実現するための裏方
になる
HTML5 API (ブラウザー)
ライブラリ
アプリケーション
ブラウザーはしょっ
ちゅう
アップデートできない
けど強制アップデート
ライブラリは仕様変更
や機能追加ができる
アプリ開発者はライブ
ラリを選ぶことができ
る
HTML5 API ライブラリを使う
● 基本的に汎用性を高めようとすると低レベルに
なる
– = 使うのが難しくなる
HTML5 API (ブラウザー)
ライブラリ
アプリ
汎用性 難易度 レベル
簡単
難しい
低い
高い
高い
低い
HTML5 API ライブラリを使う
● 大体使いやすいライブラリがあるので、それを
使っちゃいましょう
– WebRTC → PeerJS や SkyWay
– WebGL → Three.js
– WebComponents → Polymer
● DOM 操作に jQuery を使ったほうが簡単だとい
うのと感覚は同じかも
HTML5 API ライブラリを使う
まとめとして...
楽に使えるライブラリを探してきて使いましょ
アジェンダ
● Single Page Application (SPA) で作ろう!
● フレームワークを使おう!
● 開発者ツールを使いこなそう!
● コーディング時の注意
● HTML5 API よりもライブラリを使おう!
● おまけ
おまけ
● 実装がまだ追いついてない規格も結構ある
● ブラウザーで結構実装差があったりする
● Can I use? でまずは確認だ!
おまけ
● 実装がまだだな HTML5 API を使うときは...
● こういうのもある
– Chrome Canary
– Firefox Developer Edition
まとめ
● 基本 SPA で作りましょう
– MV* フレームワーク使ったら簡単です!
● ブラウザーの開発者ツール超大事!
● JavaScript ははまりどころが多いです
– 規約とかノウハウ大事です
● HTML5 API を直接使うと面倒なことが多い
– 簡単に使えるライブラリ探しましょう
● 人より先を行きたい人はベータ版 (?) ブラウザーも使い
ましょう!
終わり
ご清聴ありがとうございました!

More Related Content

What's hot

WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
Chieko Aihara
 

What's hot (20)

Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
 
Web frontend performance tuning
Web frontend      performance tuningWeb frontend      performance tuning
Web frontend performance tuning
 
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
 
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶWord press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
 
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
 
YARAIYA! Opendata with WordPress
YARAIYA!  Opendata with WordPressYARAIYA!  Opendata with WordPress
YARAIYA! Opendata with WordPress
 
モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップ
 
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
 
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点
 
【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!【B-1】kintoneでお手軽コールセンター!
【B-1】kintoneでお手軽コールセンター!
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
とある Perl Monger の働き方
とある Perl Monger の働き方とある Perl Monger の働き方
とある Perl Monger の働き方
 
BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろうBuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
 
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
 
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
 
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
WordPressの多言語プラグイン「qTranslate」で、あなたのサイトも世界にデビュー♪
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
 

Viewers also liked

Viewers also liked (7)

Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
 
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発
 
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
 
なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?なぜ企業はWebアクセシビリティに取り組むのか?
なぜ企業はWebアクセシビリティに取り組むのか?
 
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWorkSPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
 
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみたBootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
 
Adobe Digital Insights: Mobile Landscape A Moving Target
Adobe Digital Insights: Mobile Landscape A Moving TargetAdobe Digital Insights: Mobile Landscape A Moving Target
Adobe Digital Insights: Mobile Landscape A Moving Target
 

Similar to HTML5 アプリ開発

達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)
masayoshi takahashi
 
コンパイラ指向ReVIEW
コンパイラ指向ReVIEWコンパイラ指向ReVIEW
コンパイラ指向ReVIEW
Masahiro Wakame
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Hideki Akiba
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
 

Similar to HTML5 アプリ開発 (20)

達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)
 
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
 
コンパイラ指向ReVIEW
コンパイラ指向ReVIEWコンパイラ指向ReVIEW
コンパイラ指向ReVIEW
 
FuelPHP活用事例
FuelPHP活用事例FuelPHP活用事例
FuelPHP活用事例
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
Talk: serverless-express
Talk: serverless-expressTalk: serverless-express
Talk: serverless-express
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
 
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
 
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術5 年続く 「はてなブックマーク」 アプリを継続開発する技術
5 年続く 「はてなブックマーク」 アプリを継続開発する技術
 
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
 
CLR/H第54回勉強会 ライトニングトーク
CLR/H第54回勉強会 ライトニングトークCLR/H第54回勉強会 ライトニングトーク
CLR/H第54回勉強会 ライトニングトーク
 
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツールこんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン 【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
 
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
 

Recently uploaded

Recently uploaded (9)

ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 

HTML5 アプリ開発

Editor's Notes

  1. それ以外にもこの構造にまつわる問題がいろいろと... どのページでもヘッダーやフッターの内容は変わらないですが、リクエストたびにブラウザーが何度も解釈するので時間の無駄が多い。