HTML5で目指せ!
低コストで高機能なWEB開発
第14回 ITテクニカルセミナー
2013/5/31

HTMLアジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ2

自己紹介
名前：伊東 直喜
所属：株式会社オープントーン
金融ソリューション事業部
業界：銀行、TV業界 等の開発に関わってきました
言語：Java、C、C#、COBOL、Ruby
HTML、JavaScript など
メール：itou@opentone.co.jp

3

自己紹介
得意料理：極厚肉汁ハンバーグ
最近読んだ本：アジャイルサムライ 西村直人
弱点 ：腰4

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ5

HTML5とは？
?

HTML5って･･･
今までのHTML4と何が違う？

Webページを見ているだけだと分かりにくい…

HTML5

HTML46

HTML5でできること
HTML5で追加されるカテゴリの分類
カテゴリ

内容

セマンティックス

HTML5の新タグ、RDFa、マイクロデータ、マイクロフォー
マット

オフラインとストレージ

App Cache、Web Storage、Indexed Database
API、File API

デバイスアクセス

Geolocation API、マイク・カメラ、アドレス帳・カレン
ダー、端末の向き

接続性

WebSocket、Server-Sent Events

マルチメディア

audio、video要素、3D、グラフィックス、エフェクト SVG、canvas要素、WebGL、CSS3 3D

パフォーマンスと統合

Web Workers、XMLHttpRequest Level 2

CSS3

WOFFも含む
7

HTML5 news
2012/8/16

Windows8発売。Windows8ストアアプリは
HTML5/JavaScriptで開発が可能

2012/12/17 W3CがHTML5仕様策定完了
勧告候補に
2013年

2014年

アプリをHTML5で開発するFirefoxOS
Tizenがリリース（既にAndroid,iPhoneはHTML5ハイブリッドアプリが流通）
HTML5が勧告予定

HTML5を取り巻く環境は整ってきている8

HTML5でMeteor

でも、HTML5でWebアプリケーションを作るには、それなりにコストがかかる･･･

そんなアナタにMeteor!!

開発を「高機能」 ＆「低コスト」で
9

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ
10

Meteorとは？
Meteorとは、下記７つのコンセプトに開発が行われているフレームワークです。

Structuring your app →アプリケーションの構造化
Data and security →データ同期
Reactivity →反応性Live HTML →動的HTML
Templates →テンプレート機能
Smart packages →ライブラリ統合
Deploying →簡易なデプロイ
11Meteorとは？
・技術
ベースはNode.js(サーバサイドJavaScript)
データベースはMongoDB(オープンソースのドキュメント志向データベース）
・言語
サーバ／クライアントともにJavaScriptで記述
12

Meteorとは？
・メリット
環境構築が容易（DB周りの設定が容易）外部ライブラリが使用できる
サーバと各クライアントとのデータ同期が容易
・少しデメリット
まだ正式リリースされていない。
（しかし、もうじきリリースされる予定）
13

Meteor インストール
ターミナル上で以下のコマンドを打ち込むだけで、Meteorのインストールが完了します。
$ curl install.meteor.com | sh

すぐに使えます！

14

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ
15

チャットアプリ デモ
デモURL http://ot-sample-chat.meteor.com/
よろしければ、URLもしくはQRコードからご参加ください。

16

Meteor Reactivity③

サーバーに同期

MongoDB④他クライアントに同期

①

発言
②

キャッシュ

キャッシュ

(miniMongo)(miniMongo)

ローカルのキャッシュを更新⑤ 発言が表示17

キャッシュ(miniMongo)⑤ 発言が表示チャットデモでの使用技術
HTML5で追加されるカテゴリの分類
カテゴリ

内容

セマンティックス

HTML5の新タグ、RDFa、マイクロデータ、マイクロフォー
マット

オフラインとストレージ

App Cache、Web Storage、Indexed Database
API、File API

デバイスアクセス

Geolocation API、マイク・カメラ、アドレス帳・カレン
ダー、端末の向き

接続性

WebSocket、Server-Sent Events

マルチメディア

audio、video要素、3D、グラフィックス、エフェクト SVG、canvas要素、WebGL、CSS3 3D

パフォーマンスと統合

Web Workers、XMLHttpRequest Level 2

CSS3

WOFFも含む
18

WebSocket

・WebSocketでは双方向(サーバ/クライアント)からデータを送受信できる。（Meteor内部で実施）
・同じリアルタイム通信である、Ajax(Googleマップ等で使用）
では、クライアントからリクエストがない限り更新しない。

19

チャットデモのソース

20

HTMLファイル<body>{{> form}}{{> log}}</body><template name=“log”>タグの内容を表示する<template name="log"> 「Template.log.logs」オブジェクトと<div>
してアクセスできる{{#each logs}}<span>{{displayDate}} [{{name}}] {{talk}}</span><br />{{/each}}</div></template>21

JavaScriptファイル
降順

Template.log.logs = function() {return Logs.find({}, {sort: {date: -1}}).fetch();}Template.log.logsオブジェクトはMongoDBのLogsコレクションと永続化されています。
（nameやtalkなどのKEYを持っています）

Template.log.displayDate = function() {return new Date(this.date).toLocaleString()}
22

チャットアプリを作ろう
ライブコーディング

Hello World!作成 （１分）
↓HTMLファイル編集（４分）↓
JavaScriptファイル編集（５分）
23

Meteorは低コスト
今回のチャットデモを作る場合……
比較項目

Meteor以外

Meteor

開発対象 サーバとクライアントの2つ 1つのみ
アプリ
同期処理 イベント発生時に動くよう 実装する必要なし
な同期処理を実装
DB処理

別途DBサーバを用意し、 事前準備ほぼ不要で、接続処理を実装
MongoDBへのread/writeが可能
24

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ
25

アンケートアプリ デモ
デモURL http://ot-sample-enquete.meteor.com/26

アンケートデモでの使用技術
HTML5で追加されるカテゴリの分類
カテゴリ

内容

セマンティックス

HTML5の新タグ、RDFa、マイクロデータ、マイクロフォー
マット

オフラインとストレージ

App Cache、Web Storage、Indexed Database
API、File API

デバイスアクセス

Geolocation API、マイク・カメラ、アドレス帳・カレン
ダー、端末の向き接続性WebSocket、Server-Sent Events

マルチメディア

audio、video要素、3D、グラフィックス、エフェクト SVG、canvas要素、WebGL、CSS3 3D

パフォーマンスと統合

Web Workers、XMLHttpRequest Level 2

CSS3

WOFFも含む
27

マップアプリ デモ
デモURL http://ot-sample-map.meteor.com/
目的ある場所を目的としたユーザがリアルタイムに情報共有すること28

アプリ画面イメージ29

アプリ画面イメージ
登録されている目的地を表示

30

アプリ画面イメージ
発言情報を表示するマップ

31

アプリ画面イメージ
発言のログを表示

32

地図アプリでの使用技術
HTML5で追加されるカテゴリの分類
カテゴリ

内容

セマンティックス

HTML5の新タグ、RDFa、マイクロデータ、マイクロフォー
マット

オフラインとストレージ

App Cache、Web Storage、Indexed Database
API、File API

デバイスアクセス

Geolocation API、マイク・カメラ、アドレス帳・カレン
ダー、端末の向き

接続性

WebSocket、Server-Sent Events

マルチメディア

audio、video要素、3D、グラフィックス、エフェクト SVG、canvas要素、WebGL、CSS3 3D

パフォーマンスと統合

Web Workers、XMLHttpRequest Level 2

CSS3

WOFFも含む
33

アプリ例
大規模鬼ごっこアプリ
・子は鬼に定期的に自分の位置情報を提供
・鬼は、子の動きから行動範囲を予測
・鬼達が連携して対象とする子を捕まえる（参考：TOKIOの鉄腕ダッシュ）

戦略的で 大規模な鬼ごっこが実現できる
34

イメージ[鬼の端末]
皇居で鬼ごっこ

35

アプリ例
防災アプリ
・被害状況、トイレ貸出、施設の臨時提供などの情報発信
・社員同士の安否確認や情報共有など

36

アプリイメージ
橋崩壊のため通行不可

37

アプリイメージ
・市川警察署橋崩壊のため 帰宅困難者の方通行不可
受け入れします38

アプリイメージ
・市川警察署橋崩壊のため 帰宅困難者の方・ワイズマート受け入れします
通行不可
食糧・水
在庫多数

39

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ
40

Meteorおさらい
環境構築が容易（DB周りの設定が容易）→インストール:$ curl install.meteor.com | sh
デプロイ:$ meteor deploy ot-sample-chat⇒http://ot-sample-chat.meteor.comに公開

外部JavaScriptライブラリが使用できる→d3.jsなど
サーバと各クライアントとのデータ同期が容易→WebSocketを使った通信・MongoDBによる同期

低コストで高機能なWeb開発が可能
41

アジェンダ

１．自己紹介２．HTML5とは？
３．Meteorとは？
４．Meteorをさわってみよう
５．Meteorで本格アプリを作ってみよう
６．Meteorおさらい
７．まとめ
42

まとめ
Meteorで作成したアプリはHTML5対応ブラウザで動作可能

クロスプラットフォームで動作可能
低コストで高機能なWeb開発が可能！
43

オプトンラボご紹介
今回ご紹介した技術ネタ以外にマネジメント系など、多数紹介しております。
ぜひ、ご覧ください。
http://labs.opentone.co.jp/

44

チャットアプリ HTML

チャットアプリ JavaScript1

地図アプリ HTML 全119行（コメント含む）

全体のレイアウト定義

目的地のレイアウト定義

ユーザのレイアウト定義

入力（名前、発言）のレイア

2

発言一覧のレイアウト定

位置情報のレイアウト定

入力値代入のレイアウト
定義3

地図アプリ JavaScript 全329行（コメント含む）
初期化処理
約10行

クライアント初期処理
約20行

目的地に関する処理
約40行

4ユーザに関する処理
約30行

入力処理に関する処理
約40行

5

位置情報に関する処理
約25行

発言一覧に関する処理
約30行
6

約30行

入力値代入に関する処理
約20行

共通処理
（噴出しやマーカーに関するgoogle MapAPI）
約80行
7サーバ処理（バッチ処理）約20行
8

9