title

平 成 27 年 度 技 術 研 究 会 モバイルアプリをHTML5で 作 る メンバー 九 州 NSソリューションズ 峰 松 佑 一 朗 オーイーシー 中 原 史 博 オーイーシー 築 城 早 樹 子 富 士 通 九 州 システムサービス 鹽 見 飛 鳥 九 州 東 芝 エンジニアリング 安 部 里 美 九 州 東 芝 エンジニアリング 田 中 宏 美 ゴードービジネスマシン 大 山 雅 也 大 分 大 学 大 学 院 野 見 山 大 史 大 分 大 学 大 学 院 武 谷 充 謙 大 分 大 学 大 学 院 翁 長 拓 也

インデックス 1.HTML5でできるようになったこと 2.レスポンシブWebデザイン 3.モバイル 端 末 の 特 徴 とHTML5の 関 連 4. 開 発 環 境 Monacaについて 5.アプリのデモ 6.アプリの 機 能 説 明 7.まとめ 2

HTML5でできるようになったこと

HTML4.0 HTML5とWebアプリケーション ブラウザ HTML CSS Java Script HTML5 ブラウザ HTML JavaScript ライブラリ 入 力 補 助 カレンダー 入 力 チェック アニメーション プラグイン 映 像 / 音 グラフィック 位 置 情 報 データ 保 存 ソケット 通 信 サーバ データ ベース データ 保 存 データ 処 理 CSS(アニメーション) データベース JavaScript 入 力 チェック 映 像 / 音 位 置 情 報 データ 保 存 入 力 補 助 カレンダー グラフィック ソケット 通 信 データ 処 理 4

グラフィックを 扱 うAPI Canvas(2D Context) HTMLで 自 由 にピクセル 単 位 でグラフィック 描 画 できる HTMLの 要 素 のみで 描 くことはできない JavaScriptを 使 用 する 必 要 がある 他 のHTML5のAPIを 使 用 できる 5

位 置 情 報 を 扱 うAPI Geolocation API ユーザの 位 置 情 報 を 扱 うためのAPI 無 線 LAN Wifi GPS 等 から 位 置 情 報 を 取 得 することが 可 能 ユーザのネット 接 続 環 境 次 第 で 情 報 取 得 の 精 度 時 間 が 異 なる セキュリティとプライバシーに 配 慮 した 仕 様 となっており ユーザがブラウザの 確 認 ウィンドウで 位 置 情 報 の 利 用 許 可 を 選 択 する 型 式 6

WebStorage SessionStorage 一 回 限 りのセッションで 有 効 なストレージ ブラウザを 開 いている 間 だけデータが 保 持 される 例 ) Amazonの この 商 品 を 買 った 人 はこんな 商 品 も 買 って います という 表 示 項 目 のページ 番 号 管 理 に 使 用 LocalStorage データを 永 続 的 に 保 存 するストレージ ブラウザを 閉 じてもデータが 保 持 される 例 ) YouTubeの 音 量 の 設 定 7

その 他 のAPI Web Workers 同 時 に 複 数 のプログラムを 並 行 処 理 できる Video & Audio 専 用 の 要 素 を 書 くだけで 簡 単 に 映 像 音 声 を 扱 える File API ローカルファイルを 扱 える Drag and Drop API 表 示 している 画 像 や 文 字 をつかんで 移 動 させる Web Socket 直 接 サーバと 通 信 のやり 取 りができる Indexed Database ローカルでデータベースが 扱 える HTML5 Web Messaging 異 なるドメイン 同 士 での 通 信 ができる 8

<input> input 要 素 の 新 属 性 (1) 追 加 されたinput 要 素 type 属 性 の 値 type 属 性 tel search url email datetime date month week time datetime-local number range color 概 要 電 話 番 号 入 力 検 索 語 入 力 URL 入 力 E-MAILアドレス 入 力 日 付 時 間 入 力 (UTC) 日 付 月 入 力 週 入 力 時 間 入 力 日 付 時 間 入 力 (ローカル) 数 値 入 力 数 値 入 力 (スライダーUI) 色 入 力 9

<input> input 要 素 の 新 属 性 (2) 追 加 されたinput 要 素 の 属 性 属 性 pattern placeholder autocomplete list required 概 要 正 規 表 現 パターンを 指 定 して 送 信 時 に 検 証 入 力 例 やヒントを 表 示 入 力 補 完 機 能 datalist 要 素 を 参 照 し 入 力 候 補 を 表 示 必 須 入 力 項 目 を 示 す 要 素 で 送 信 時 に 検 証 10

レスポンシブWebデザイン

レスポンシブWebデザイン 通 常 HTMLやCSSのファイルを 複 数 用 意 し 各 デバイ スに 最 適 なものを 割 り 当 てている スマートフォン サイト PCサイト 12

レスポンシブWebデザイン デバイスの 種 類 やサイズに 応 じて 表 示 内 容 が 最 適 な 状 態 に 自 動 で 変 化 するように 設 定 された 一 つのファイルを 利 用 する レスポンシブWebデザイン 13

レスポンシブWebデザイン ブラウザや 画 面 サイズを 判 断 基 準 にし CSSのデザイン 内 容 を 切 り 替 える スマートフォンの 場 合 PC 等 の 大 きな 画 面 の 場 合 14

レスポンシブWebデザイン ブラウザや 画 面 サイズを 判 断 基 準 にし CSSのデザイン 内 容 を 切 り 替 える 縦 方 向 に 再 配 置 一 部 コンテンツ の 非 表 示 スマートフォンの 場 合 PC 等 の 大 きな 画 面 の 場 合 15

モバイル 端 末 の 特 徴 とHTML5の 関 連

モバイル 端 末 の 特 徴 どこでも 使 える 持 ち 運 べる Web Storage カメラがある Canvas File API HTML Media Capture GPS 機 能 Geolocation API タップ フリック 画 面 が 小 さい 画 面 が 変 わる レスポンシブWebデザイン 17

モバイルアプリ 作 成 前 提 条 件 HTML5の 新 要 素 を 使 用 Androidでも iosでも 使 える(ハイブリッドアプリ) お 店 登 録 アプリを 作 成 お 店 についてのコメントと 評 価 を 登 録 できる お 店 で 撮 った 写 真 が 登 録 できる お 店 の 場 所 を 登 録 できる 18

ハイブリッドアプリとは HTML5を 使 ってモバイルアプリを 開 発 する 手 法 の 一 つ アプリの 画 面 としてWebViewというネイティブの コンポーネントを 使 い その 中 でHTMLの 画 面 を 表 示 するモバイルアプリがハイブリッドアプリである 19

ハイブリッドアプリと ネイティブアプリ ハイブリットアプリ HTML5を 使 って 開 発 するアプリ ネイティブアプリ 従 来 の 純 粋 なJavaやObjective-Cで 開 発 するアプリ 20

ハイブリットアプリのメリット クロスプラットフォーム 各 OSに 共 通 のコンポーネントを 用 いるため HTMLやCSS JavaScriptでどのOSでも 共 通 に 動 作 するアプリを 記 述 す ることが 可 能 Web 標 準 の 知 識 をモバイルアプリ 開 発 に 適 用 可 能 HTMLやCSS JavaScriptといったweb 開 発 では 必 須 の 言 語 でモバイルアプリを 開 発 することが 可 能 JavaScriptから 各 OSのAPIを 呼 び 出 すことが 可 能 ハイブリッドアプリ 開 発 用 のフレームワークを 使 うことで カメラや センサーなどのモバイル 端 末 でのみ 利 用 できる APIをJavaScriptから 呼 び 出 すことが 可 能 21

ハイブリットアプリのデメリット 高 速 な 描 画 処 理 ネイティブでOpenGL 等 を 使 ってバリバリに 高 速 描 画 させ ているゲームなどをハイブリッドアプリで 実 現 しようとす ると 厳 しい 可 能 性 が 高 い 端 末 のスペックを 最 大 限 引 き 出 すような 処 理 HTMLのレンダリングエンジン 上 で 動 くという 性 質 上 ネ イティブアプリと 比 べると 苦 手 である 22

開 発 環 境 Monacaについて

開 発 環 境 Monacaとは アシアル 株 式 会 社 が 提 供 する スマートフォン 向 け アプリの 開 発 環 境 の 呼 称 クラウド 上 でAndroidやiOSなどのモバイルアプリ 開 発 を 行 なうためのツールである 24

Monacaの 特 徴 HTML CSS JavaScriptでiOS Android 用 の ハイブリッドアプリが 作 れる 完 成 品 がハイブリットアプリのためiOS Android 用 でわざわざ 作 り 直 す 必 要 がないアプリ 開 発 が 可 能 通 常 アプリを 作 る 場 合 開 発 環 境 の 構 築 が 面 倒 だが クラウド 上 に 開 発 環 境 があるため 面 倒 な 設 定 の 必 要 がない ブラウザで 開 発 実 機 でデバッグ ブラウザで ビルドといった 感 じでスムーズに 開 発 できる 25

アプリのデモ

お 店 マップ( 画 面 遷 移 ) リンク 押 下 一 覧 画 面 参 照 画 面 登 録 画 面 更 新 押 下 登 録 画 面 へ 押 下 27

画 面 説 明 ( 一 覧 画 面 ) 一 覧 表 示 地 図 表 示 28

画 面 説 明 ( 登 録 画 面 ) 29

画 面 説 明 ( 参 照 画 面 ) 30

アプリの 機 能 説 明

お 店 マップ( 登 録 画 面 ) input typeの 新 属 性 日 付 <input type="date" > 32

お 店 マップ( 登 録 画 面 ) input typeの 新 属 性 必 須 <input type="text" id="title" required > 33

お 店 マップ( 登 録 画 面 ) input typeの 新 属 性 オートコンプリート <input type="text" id="category" autocomplete="on" list="category_list"> id="category_list"> <datalist <option value=" 洋 食 "> <option value="バイキング"> <option value="カフェ"> <option value=" 居 酒 屋 "> <option value="バー"> </datalist> 34

お 店 マップ( 登 録 画 面 ) input typeの 新 属 性 プレースホルダ <textarea id="comment" placeholder="ここに 入 力 してください "></textarea> 35

お 店 マップ( 登 録 画 面 ) input typeの 新 属 性 スライダー <input type="range" max="5" min="1" step="1"> 36

お 店 マップ( 登 録 画 面 ) Camera API カメラを 起 動 ギャラリーから 写 真 を 選 択 選 択 37

お 店 マップ( 登 録 画 面 ) Geolocation API 現 在 地 ( 緯 度 / 経 度 )の 取 得 Google Maps API 地 図 の 表 示 取 得 した 現 在 位 置 に マーカーを 表 示 38

お 店 マップ( 一 覧 画 面 ) Storage < 登 録 画 面 > < 一 覧 画 面 > 保 存 取 り 出 し LocalStorage 39

お 店 マップ( 一 覧 画 面 ) Storage < 一 覧 画 面 > < 参 照 画 面 > 選 択 したキー を 保 存 SessionStorage キーをもとに LocalStorageから 情 報 を 取 り 出 す LocalStorage 40

お 店 マップ( 一 覧 画 面 ) Storage < 地 図 での 一 覧 表 示 > 41

お 店 マップ( 参 照 画 面 ) Canvas グラフの 描 画 <div id="detail_canvas"> <canvas id="canvas"> </canvas> </div> 42

お 店 マップ( 一 覧 画 面 ) Media Queries(CSS3) 画 面 サイズに 応 じてスタイルシートを 切 り 替 える < 幅 が 狭 いとき> < 幅 が 広 いとき> 43

まとめ

まとめ モバイルアプリをHTML5で 作 る HTML5について モバイル 端 末 の 機 能 の 活 用 見 やすい 画 面 表 示 を 実 現 デバイスAPIの 利 用 でカメラ GPSを 使 用 input タグの 新 要 素 により 多 様 な 入 力 フォームを 作 成 レスポンシブWebデザインによるレイアウト 変 更 ハイブリッドアプリ 開 発 について ios Android 向 けのアプリ 開 発 が 容 易 HTML5やJavaScript CSSを 用 いて 開 発 一 つのソースで ios Android 用 アプリを 作 成 Monacaは 環 境 構 築 実 機 でのデバッグが 容 易 45

モバイルアプリをHTML5で 作 る アプリ 開 発 に 当 たって まとめ OSやブラウザによる 検 証 が 必 要 端 末 による 画 面 表 示 の 差 異 デバイス 機 能 が 正 常 に 動 作 しない 端 末 が 存 在 未 経 験 者 でも 手 軽 に 開 発 可 能 モバイルアプリ 開 発 経 験 者 はゼロ Web 開 発 の 知 識 だけで 開 発 可 能 サンプル ドキュメントが 充 実 HTML5を 利 用 したハイブリッドアプリ 開 発 は モバイルアプリの 開 発 を 容 易 に 実 現 46

ご 清 聴 ありがとうございました 47

参 考 文 献

参 考 文 献 クラウドでできるHTML5ハイブリッドアプリ 開 発 永 井 勝 則 著 アシアル 株 式 会 社 10 日 でおぼえるHTML5 入 門 教 室 古 籏 一 浩 著 株 式 会 社 翔 泳 社 HTML5.jp(http://www.html5.jp/) HTMLクイックリファレンス(http://www.htmq.com/index.htm) Monacaドキュメント(http://docs.monaca.mobi/cur/ja/) HTML5リファレンス(http://www.tagindex.com/html5/index.html) AjaxTower GoogleMaps 入 門 (http://www.ajaxtower.jp/googlemaps/) HTML5とかアプリ 開 発 入 門 (http://www.atmarkit.co.jp/fwcr/design/index/index_html5appli.html) Bootstrap (http://getbootstrap.com/) Foundation(http://foundation.zurb.com/) フレームワーク 比 較 (http://webnaut.jp/css-framework-comparative-chart/)

参 考 文 献 カメラ 動 作 (http://d.hatena.ne.jp/gungnir_odin/20111219/1324294775) Chart.js(http://www.chartjs.org/) Chart.js 入 門 (http://qiita.com/kazu56/items/17acf7ad2d87d6b28173)