アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 2

Size: px

Start display at page:

Download "アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 2"

ことこかみいしづ
7 years ago
Views:

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

2 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 2

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

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

5 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 5

6 ? HTML5 とは? HTML5 って今までの HTML4 と何が違う? Web ページを見ているだけだと分かりにくい HTML4 6 HTML5

7 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

8 HTML5 news 2012/8/16 Windows8 発売 Windows8 ストアアプリは HTML5/JavaScript で開発が可能 2012/12/17 W3C が HTML5 仕様策定完了勧告候補に 2013 年アプリをHTML5で開発するFirefoxOS Tizenがリリース ( 既にAndroid,iPhone はHTML5ハイブリッドアプリが流通 ) 2014 年 HTML5が勧告予定 HTML5 を取り巻く環境は整ってきている 8

9 HTML5 で Meteor でも HTML5 で Web アプリケーションを作るにはそれなりにコストがかかるそんなアナタに Meteor!! 開発を高機能 & 低コストで 9

10 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 10

11 Meteor とは? Meteor とは下記 7 つのコンセプトに開発が行われているフレームワークです Structuring your app Data and security Reactivity Live HTML Templates Smart packages Deploying 11 アプリケーションの構造化データ同期反応性動的 HTML テンプレート機能ライブラリ統合簡易なデプロイ

12 Meteor とは? 技術ベースは Node.js( サーバサイド JavaScript) データベースは MongoDB ( オープンソースのドキュメント志向データベース ) 言語サーバ / クライアントともに JavaScript で記述 12

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

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

15 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 15

16 チャットアプリデモデモ URL よろしければ URL もしくは QR コードからご参加ください 16

17 Meteor Reactivity 3 サーバーに同期 MongoDB 4 他クライアントに同期キャッシュ (minimongo) 1 発言 2 ローカルのキャッシュを更新 5 キャッシュ (minimongo) 発言が表示 17 キャッシュ (minimongo) 5 発言が表示

18 チャットデモでの使用技術 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

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

20 チャットデモのソース 20

21 HTML ファイル <body> {{> form}} {{> log}} </body> <template name= log > タグの内容を表示する <template name="log"> <div> {{#each logs}} Template.log.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.

22 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

23 チャットアプリを作ろうライブコーディング Hello World! 作成 (1 分 ) HTMLファイル編集 (4 分 ) JavaScriptファイル編集 (5 分 ) 23

24 Meteor は低コスト今回のチャットデモを作る場合比較項目 Meteor 以外 Meteor 開発対象アプリ同期処理 DB 処理サーバとクライアントの 2 つイベント発生時に動くような同期処理を実装別途 DB サーバを用意し接続処理を実装 1 つのみ実装する必要なし事前準備ほぼ不要で MongoDB への read/write が可能 24

25 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 25

26 アンケートアプリデモデモ URL 26

27 アンケートデモでの使用技術 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

28 マップアプリデモデモ URL 目的ある場所を目的としたユーザがリアルタイムに情報共有すること 28

29 アプリ画面イメージ 29

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

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

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

33 地図アプリでの使用技術 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

34 アプリ例大規模鬼ごっこアプリ子は鬼に定期的に自分の位置情報を提供鬼は子の動きから行動範囲を予測鬼達が連携して対象とする子を捕まえる ( 参考 :TOKIO の鉄腕ダッシュ ) 戦略的で大規模な鬼ごっこが実現できる 34

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

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

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

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

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

40 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 40

41 Meteor おさらい環境構築が容易 (DB 周りの設定が容易 ) インストール :$ curl install.meteor.com sh デプロイ :$ meteor deploy ot-sample-chat に公開外部 JavaScript ライブラリが使用できる d3.js などサーバと各クライアントとのデータ同期が容易 WebSocket を使った通信 MongoDB による同期低コストで高機能な Web 開発が可能 41

42 アジェンダ 1. 自己紹介 2.HTML5とは? 3.Meteorとは? 4.Meteorをさわってみよう 5.Meteorで本格アプリを作ってみよう 6.Meteorおさらい 7. まとめ 42

43 まとめ Meteor で作成したアプリは HTML5 対応ブラウザで動作可能クロスプラットフォームで動作可能低コストで高機能な Web 開発が可能! 43

44 オプトンラボご紹介今回ご紹介した技術ネタ以外にマネジメント系など多数紹介しておりますぜひご覧ください 44

45 チャットアプリ HTML チャットアプリ JavaScript 1

46 地図アプリ HTML 全 119 行 ( コメント含む ) 全体のレイアウト定義目的地のレイアウト定義ユーザのレイアウト定義入力 ( 名前発言 ) のレイア 2

47 発言一覧のレイアウト定位置情報のレイアウト定入力値代入のレイアウト定義 3

48 地図アプリ JavaScript 全 329 行 ( コメント含む ) 初期化処理約 10 行クライアント初期処理約 20 行目的地に関する処理約 40 行 4

49 ユーザに関する処理約 30 行入力処理に関する処理約 40 行 5

50 位置情報に関する処理約 25 行発言一覧に関する処理約 30 行 6

51 入力値代入に関する処理約 20 行共通処理 ( 噴出しやマーカーに関する google Map API) 約 80 行 7

52 8 サーバ処理 ( バッチ処理 ) 約 20 行

53 9

html5_ver2_kai.pdf

html5_ver2_kai.pdf LPI-Japan 事務局 HTML5 プロフェッショナル認定試験レベル 1/ レベル 2 出題範囲改定 (Ver2.0) について下記は 2016 年 11 月時点の情報であり今後予告なく変更の可能性があります 2017 年 3 月 1 日に HTML5 プロフェッショナル認定試験レベル 1 およびレベル 2 の出題範囲を改定します改定時期は変更になる場合がございますのでご了承ください改定日が決まりましたらご連絡いたします