HTML5でFirefox OSアプリを作ろう

Innovation EGG 第一回発表資料 @cattaka_net

HTML5でFirefox OSアプリを作ろう

住友孝郎@cattaka_net


自己紹介● 住友孝郎(すみともたかお)

● 株式会社ブリリアントサービス所属

● 業務系Webアプリ開発

● Androidアプリケーション開発

● 研究開発とか

– ロボット的な何か

– 画像認識的な何か

– Tizen IVI的な何か



雑多にやってます


アジェンダ● Firefox OSとは● アプリ開発におけるHTML5● 実際にアプリを作る● Firefox Marketplaceへ公開


Firefox OSとは


Firefox OS● Web技術を基礎とするOS● HTML/CSS/JavaScriptでアプリが作れる● JavaScriptでもJava並の速度がでる


Firefox OSのこれまで● 2011年７月

● 研究レベルで発表● この頃はまだ名前は「Boot to Gecko(B2G)」でした

● 2012年７月● 「Firefox OS」に改名、

スクリーンショットが公開される

● 2013年４月● 開発者向けデバイス発売

– KeonとPeak


Firefox OSのこれまで

● 2013年7月● ZTE「ZTE Open」販売開始● TCL「ALCATEL ONE TOUCH Fire」販売開始


公式サイトのキーワード

● モバイル端末にもオープンWebを

● Web標準

● HTML5

● モバイルプラットフォーム


なぜFirefox OSか？● 今までのアプリ開発

● Java? Objective C? C#？● 過去の開発環境は情報の表示にかかる労力が大きい● 目に見えるものにたどり着くのに時間がかかる

● HTMLは情報の表示が一番強い(個人的主観)

● 目に見える部分が素早く作れる● Firefox OSはHTML5でアプリを作る

● JavaScriptから広い範囲の機能を使える


Firefox OSのアプリ開発で使うスキル

● プログラム言語● プラットフォーム● プログラム構造● データ構造設計● UI設計● ビジュアルデザイン● 通信● etc


実機の入手


Dev Phone


Nexus Sなどにインストールする


Nexus Sなどにインストールする● MDN(Mozilla Developer Network)に手順書● 対象端末

● Nexus S、Galaxy S2、Galaxy Nexus等

● ビルド環境● Ubuntu、Fedora、Mac等

● ソースコード● GitHubなどのリポジトリから取得する


Firefox OS Simulator


対応状況の確認方法● HTML5 TEST

● http://html5test.com/

● CSS3 TEST● http://css3test.com/


Firefox Simulator● Firefoxブラウザ上で動作

● アドオンとして動作● 非常に軽快

● Firefox OSのほとんどの機能が利用可能

● 開発中のアプリを簡単にインストール可能

● デバッグ用の機能も順次追加


Android上で動かす● Firefoxがインストールされていれば可能● 通常のアプリのようにホームから起動もできる


アプリ開発におけるHTML5HTML5とCSS3


HTML5


アプリ作りでのHTML5● HTMLは元々マークアップランゲージ

● AJAX以降、ブラウザ上でアプリを作るようになった● しかしHTML＋JavaScriptはいろいろ辛い

– ブラウザ依存、機能不足

● HTML5はアプリケーションプラットフォーム● デバイスアクセス● 2D/3Dグラフィック● マルチメディア● センサー類● USBやBluetooth


各機能の対応状況● MDNにあります

● https://wiki.mozilla.org/WebAPI

2013/07/19 HTML5&Androidなど勉強会 in 大阪 @cattaka_net

アプリ開発に必要なもの● 表示系

→ HTMLのタグやフォーム

→ CSS● リソースの管理

→ URIで指定● GPS情報

→ GeoLocation API● 通知系

→Notifications API

● 動画と音声

→ Video API & Audio API● データベース

→ Indexed DB

※ Web SQL Databaseは廃止

● 二次元描画

→ Canvas● 三次元描画

→ WebGL● フォント

→ WebFont


HTML5でできること


センサー類の値の取得

● 加速度センサー● 近接センサー● 環境光センサー● A-GPS


GeoLocation API

● GeoLocation APIが使える● GPS座標が取得できる● できること

● １ショットで取得● 繰り返し継続的に取得● 指定した時間内に過去に取得した座標を取る


Notifications API

● Webページ外への通知の方法を定義● 例）表示場所

– ディスプレイの隅っこ– ブラウザの一部– モバイルフォンのホーム画面


Canvas

● JavaScriptでも2D描画をゴリゴリできる● 基本的な機能は粗方使える(四角や丸の描画)● setTransformのような変形も行える● toDataURL()で画像をURLとして保存できる

● なんかやたら長いURLができる、、、

var canvas = document.getElementById('c1');var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(70, 70, 60, 0, Math.PI*2, false);ctx.stroke();var url = canvas.toDataURL();

<h2>fillRect()</h2><canvas id="c1" width="140" height="140"></canvas>

HTML JavaScript


WebGL

● 3D描画もできる● ちょっと敷居は高い、、● ライブラリはいくつかある

● three.js● j3d● SceneJS


HTML5についてまとめ● センサーなど昔はJavaScriptから触れなかった

情報がさわれるようになっている● それらはAndroidやiPhoneと同等水準● 通常のアプリなら十分に作成可能


CSS3でできること


CSSとは● Cascading Style Sheetsの略● W3Cで標準化されている● HTMLにスタイル(見栄え)を追加する● 仕様全ての完全な実装は事実上無い


HTMLとCSSの関係● HTMLで文章の論理構造を記述する● CSSでスタイルを記述する● ２つを繋ぐのはセレクタ

● タグ● ID● クラス● 階層構造


CSSの表記法● セレクタ● 宣言ブロック

● 宣言– プロパティ– 値

p#id { color : #ff3300; width : 30%; height : 20%;}


セレクタの例● タグ

– セレクタにタグ名をそのまま書く

button { ... }

● ID– セレクタに”#”＋IDを書く

#myButton { ... }

● クラス– セレクタに”.”＋クラス名を書く

.buttonClass { ... }

● 階層構造– セレクタをスペースで区切ると子孫要素が対象となる

#myButton .buttonClass { ... }– “>”で区切ると子要素が対象となる

#myButton > .buttonClass { ... }


#myGroup1 > .itemClass { color: #FF0000; }#myGroup2 > .itemClass { color: #0000FF; }

HTMLとCSSの関係

<div id=”myGroup1” class=”groupClass”> <div id=”myItem1” class=”itemClass”> あいうえお </div></div><div id=”myGroup2” class=”groupClass”> <div id=”myItem2” class=”itemClass”> かきくけこ </div></div>

あいうえお

あいうえお

HTML

CSS


CSSでできる意外なこと● 画面サイズによるレイアウトの切り替え● エレメントの拡大縮小回転● アニメーション


画面サイズによるレイアウトの切り替え● MediaQueries● メディア特性の式により、使用されるCSSを切り替え

ることができる● 従来はonLoad()内でJavaScriptで画面の幅からゴリゴリやる必要があった


MediaQueries

<div id="divFlexBox"><div id="item-1st" class="item-block">1st</div><div id="item-2nd" class="item-block">2nd</div><div id="item-3rd" class="item-block">3rd</div><div id="item-4th" class="item-block">4th</div><div id="item-5th" class="item-block">5th</div></div>

/* 画面が広いとき */@media (min-width: 400px) { #item-1st { width: 100%; } #item-2nd { } #item-3rd { width: 50%; flex-grow: 1; } #item-4th { } #item-5th { width: 100%; }}/* 画面が狭い時 */@media (max-width: 400px) { div#divFlexBox .item-block { width: 100%; }}

CSSHTML

サンプルコードhttp://goo.gl/6Pt5FS

※ブラウザによって対応状況がことなるのでいくつかのブラウザで試してください


エレメントの拡大縮小回転● Transform● 要素の移動、回転、スケーリング、傾斜ができる● 昔はJavaScriptを用いても困難だった● Canvasに文字を描画して変形しなければならな

かった● それはパフォーマンス的にも遅かった


Transform

<div id="outerblock"> <div id="mytext"> <p>Androidの1.6、2.0、3.0、4.0は目に見えた変更が多く、発表の度にワクワク（または大きな仕様変更に唖然と）したものだが、 4.0以降はそれが薄くなった気がする。しかし同時期を境にiOSからその雰囲気を感じるようになったので今こそiPhoneを買うべきなのかもしれない。</p> </div></div>

#mytext { width: 10em; border: 1px solid #ff007f; transform: translate(150px,-10px) rotate(20deg) skewX(-20deg);}

CSSHTML




アニメーション● Transition

● 状態遷移時の変化のアニメーションが行える– 例）マウスカーソルを当てた時や押した時

● Animation● 繰り返しや複数回のアニメーションが行える


Animation : transition

<div id="resizeBlock" class="outerBox"> <div class="animBox">Animation</div></div>

#resizeBlock .animBox { width: 10em; height: 2em; transition-property: all; transition-duration: 1s; transition-timing-function: linear; transition-delay: 0s;}

#resizeBlock .animBox:hover { width: 20em; height: 4em; transition-property: all; transition-duration: 3s; transition-timing-function: linear; transition-delay: 0s;}

CSSHTML




Animation : animation

<div id="resizingBlock" class="outerBox"> <div class="animBox">Animation</div></div>

<div id="movingBlock" class="outerBox"> <div class="animBox">Animation</div></div>

#resizingBlock .animBox { animation-name: resizingKfs; animation-duration: 1s; animation-play-state: running; animation-iteration-count: infinite;}@keyframes resizingKfs { from { width: 10em; } 50% { width: 20em; } to { width: 10em; }}

#movingBlock .animBox { animation-name: movingKfs; animation-duration: 1s; animation-play-state: running; animation-iteration-count: infinite;}@keyframes movingKfs { from { margin-left: 0em; margin-top: 0em; } 25% { margin-left: 15em; margin-top: 10em; } 75% { margin-left: 5em; margin-top: 10em; } to { margin-left: 20em; margin-top: 0em; }}

CSSHTML




CSSのまとめ● レイアウトについて

● Media QueriesやFlex、Regionsを使えば、JavaScriptを使わずにスマートに書ける

● アニメーションについて● transitionやanimationを使えば、JavaScriptを使わず

にスマートに書ける

● JavaScriptを使わずにスマートに書ける


実際にアプリを作る


アプリ作成の手順● 何がしたいか● イメージを練る● 外観を作る● 動きを作る● 整える


HTML5アプリの構成● HTML

● 画面の構成や論理的な構造を記述する

● JavaScript● 操作を記述する

● CSS● 見せ方を記述する


お題：ストップウォッチ

START STOP


元ネタ：MufWatch● 一番最初に作ったAndroidアプリ● 操作、動き、見た目の勉強に使った


何がしたいか● 時間を計りたい● 一時停止● リセット● タイマー


イメージを練る● イメージする● 手段は何でもいい

● 手書き● LibreOffice Draw● Adobe Illustrator

LibreOffice Drawで描いたスケッチ→


外観を作る● HTMLで作る● 必要ならCSSも使う


部品を整理する● 表示部● 操作部時分秒 1/100秒

Startボタン Stopボタン Resetボタン


具体的な構造

文字盤用ブロック

ボタン用ブロック


JavaScriptで動きを作る● ３つのボタンに処理を入れる

● Startボタン● Stopボタン● Resetボタン


静的な見た目を整える● 背景色● 部品の色● 枠線● フォント


背景や枠線

body { background-color: #70CC8D;}

.panel { width: 16em; margin: 0px auto 0px auto; background-color: #FFCC99; border-width: 0.2em; border-radius: 0.5em; border-color: #0184D1; border-style: solid; padding: 0.5em; text-align: center;}

CSSの指定


フォントの指定

@font-face { font-family: 'Digital'; src: url('fakeReceipt.ttf');}

.panel-hour, .panel-separator-min { font-family: 'Digital';}

.panel-min, .panel-sec, .panel-frac,

.panel-separator-big { font-size: 200%; font-family: 'Digital';}

CSSの指定


動的な見た目を整える● ボタンの表示

● 押下時に色を変える● disabledなら非表示

● CSSでアニメーション● 動作中は表示を動かす


動的な見た目を整える

.panel-button:active { background-color: #FFB499; border-width: 0.2em; border-radius: 0.5em; border-color: #FF950E; border-style: solid;}

.button-block-1 > .panel-button[disabled] { display: none;}

CSSの指定


動的な見た目を整える

@keyframes resizingKfs { from { width: 16em; } 50% { width: 16.5em; } to { width: 16em; }}

.panel-running { animation-name: resizingKfs; animation-duration: 1.0s; animation-play-state: running; animation-iteration-count: infinite;}

CSSの指定


微調整● 画面サイズに合うように調節する


マニフェストファイル● アプリの情報を記載したファイル

● アプリ名● 起動用URL● アイコン● etc

{ "name": "MufWatch", "description": "A simple stop watch", "launch_path": "/index.html", "developer": { "name": "Takao Sumitomo", "url": "https://www.cattaka.net/" }, <省略> "default_locale": "en-US", "icons": { "60": "/icon60.png", "120": "/icon120.png", }, "orientation": ["portrait","landscape"]}


できた

↓Firefoxブラウザ

Firefox Simulator→

アプリURL： http://mufwatch.fxos.cattaka.net/

http://mufwatch.fxos.cattaka.net/


Firefox Marketplaceへ公開


Firefox Marketplace● オープンなアプリストア● Firefox OSに限らずAndroidやブラウザも対象● Web技術で実装されている● Marketplaceのソースも公開されている● ベンダー非依存● アプリは公開前にレビューがある


レビュー● コミュニティレビュー

● レビュー基準もレビュアーも公平なマーケット

● 簡単なチェック● 動作確認と公序良俗に反しないか


Firefox Marketplaceにログインする


Submit an Appを開き、対象とURLを入力する


間違っていると教えてくれる

90x90のアイコンが無かったので怒られた


アプリの情報を記入する


アプリの情報を記入する● 入力項目(2013/10/24時点)

● Description● Categories● Privacy Policy● Homepage● Support Website● Support Email● Flash Support● Screenshot


登録完了


まだレビュー終わってません、、、

でも状況はわかる


Firefoxブラウザで動く


FirefoxOSシミュレーターで動く


実機で動く


HTML5でアプリを作りましょう


これからはWeb技術だ


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


Technology

HTML5でFirefox OSアプリを作ろう