HTML5でFirefox OSアプリを作ろう

Innovation EGG 第一回発表資料 @cattaka_net

HTML5でFirefox OSアプリを作ろう
住友孝郎
@cattaka_net


自己紹介
●

住友孝郎(すみともたかお)

●

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

業務系Webアプリ開発

●

Androidアプリケーション開発

●

研究開発とか
–

ロボット的な何か

–

画像認識的な何か

–

Tizen IVI的な何か

住友孝郎
@cattaka_net


雑多にやってます


アジェンダ
●

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がインストールされていれば可能

●

通常のアプリのようにホームから起動もできる


アプリ開発におけるHTML5
HTML5と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

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

表示系

●

→ Video API & Audio API

→ HTMLのタグやフォーム
→ CSS
●

●

※ Web SQL Databaseは廃止
●

二次元描画
→ Canvas

●

通知系
→Notifications API

データベース
→ Indexed DB

GPS情報
→ GeoLocation API

●

●

リソースの管理
→ URIで指定

動画と音声

三次元描画
→ WebGL

●

フォント
→ WebFont


HTML5でできること


センサー類の値の取得
●

加速度センサー

●

近接センサー

●

環境光センサー

●

A-GPS


GeoLocation API
●

GeoLocation APIが使える

●

GPS座標が取得できる

●

できること
●

１ショットで取得

●

繰り返し継続的に取得

●

指定した時間内に過去に取得した座標を取る


Notifications API
●

Webページ外への通知の方法を定義

●

例）表示場所
–
–
–

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


Canvas
●

JavaScriptでも2D描画をゴリゴリできる

●

基本的な機能は粗方使える(四角や丸の描画)

●

setTransformのような変形も行える

●

toDataURL()で画像をURLとして保存できる
●

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

HTML

JavaScript

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

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();


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%;
}


セレクタの例
●

タグ
–

●

ID
–

●

セレクタに”#”＋IDを書く
#myButton { ... }

クラス
–

●

セレクタにタグ名をそのまま書く
button { ... }

セレクタに”.”＋クラス名を書く
.buttonClass { ... }

階層構造
–

–

セレクタをスペースで区切ると子孫要素が対象となる
#myButton .buttonClass { ... }
“>”で区切ると子要素が対象となる
#myButton > .buttonClass { ... }


HTMLとCSSの関係
HTML

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

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

あいうえお

あいうえお


CSSでできる意外なこと
●

画面サイズによるレイアウトの切り替え

●

エレメントの拡大縮小回転

●

アニメーション


画面サイズによるレイアウトの切り替え
●
●

●

MediaQueries
メディア特性の式により、使用されるCSSを切り替え
ることができる
従来はonLoad()内でJavaScriptで画面の幅から
ゴリゴリやる必要があった


MediaQueries
HTML

CSS

<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>

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

/* 画面が広いとき */
@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%;
}
}

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


エレメントの拡大縮小回転
●

Transform

●

要素の移動、回転、スケーリング、傾斜ができる

●

昔はJavaScriptを用いても困難だった

●

●

Canvasに文字を描画して変形しなければならな
かった
それはパフォーマンス的にも遅かった


Transform
HTML

CSS

<div id="outerblock">
#mytext {
<div id="mytext">
width: 10em;
<p>Androidの1.6、2.0、3.0、4.0は目に見えた変更が多く、
border: 1px solid #ff007f;
発表の度にワクワク（または大きな仕様変更に唖然と）したものだが、
transform:
4.0以降はそれが薄くなった気がする。
translate(150px,-10px)
しかし同時期を境にiOSからその雰囲気を感じるようになったので
rotate(20deg)
今こそiPhoneを買うべきなのかもしれない。</p>
skewX(-20deg);
</div>
}
</div>




アニメーション
●

Transition
●

状態遷移時の変化のアニメーションが行える
–

●

例）マウスカーソルを当てた時や押した時

Animation
●

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


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

CSS
#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;
}




Animation : animation
HTML

CSS

<div id="resizingBlock" class="outerBox">
</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; }
}

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

#movingBlock .animBox {
animation-name: movingKfs;
animation-duration: 1s;
}
@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; }
}




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も使う


部品を整理する
●

表示部

●

操作部

Startボタン

時

分

秒

Stopボタン

1/100秒

Resetボタン


具体的な構造
文字盤用ブロック

ボタン用ブロック


JavaScriptで動きを作る
●

３つのボタンに処理を入れる
●

Startボタン

●

Stopボタン

●

Resetボタン


静的な見た目を整える
●

背景色

●

部品の色

●

枠線

●

フォント


背景や枠線
CSSの指定
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 {
}
.panel-min, .panel-sec, .panel-frac,
.panel-separator-big {
font-size: 200%;
}


動的な見た目を整える
●

ボタンの表示
●
●

●

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

CSSでアニメーション
●

動作中は表示を動かす


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;
}


微調整
●

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


マニフェストファイル
●

アプリの情報を記載したファイル
●

アプリ名

●

起動用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 Simulator→
↓Firefoxブラウザ

アプリURL： 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技術だ


ご清聴ありがとうございました
住友孝郎
@cattaka_net

HTML5でFirefox OSアプリを作ろう

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Semelhante a HTML5でFirefox OSアプリを作ろう

Semelhante a HTML5でFirefox OSアプリを作ろう (20)

Mais de Takao Sumitomo

Mais de Takao Sumitomo (20)

HTML5でFirefox OSアプリを作ろう