• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5でFirefox OSアプリを作ろう
 

HTML5でFirefox OSアプリを作ろう

on

  • 977 views

Innovation EGG 第一回 <it系コミュニティ合同•未経験者向け勉強会> 10月26日(土)の発表資料です。

Innovation EGG 第一回 <it系コミュニティ合同•未経験者向け勉強会> 10月26日(土)の発表資料です。

Statistics

Views

Total Views
977
Views on SlideShare
977
Embed Views
0

Actions

Likes
4
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5でFirefox OSアプリを作ろう HTML5でFirefox OSアプリを作ろう Presentation Transcript

    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5でFirefox OSアプリを作ろう 住友 孝郎 @cattaka_net
    • Innovation EGG 第一回 発表資料 @cattaka_net 自己紹介 ● 住友 孝郎(すみとも たかお) ● 株式会社ブリリアントサービス所属 ● 業務系Webアプリ開発 ● Androidアプリケーション開発 ● 研究開発とか – ロボット的な何か – 画像認識的な何か – Tizen IVI的な何か 住友 孝郎 @cattaka_net
    • Innovation EGG 第一回 発表資料 @cattaka_net 雑多にやってます
    • Innovation EGG 第一回 発表資料 @cattaka_net アジェンダ ● Firefox OSとは ● アプリ開発におけるHTML5 ● 実際にアプリを作る ● Firefox Marketplaceへ公開
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OSとは
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OS ● Web技術を基礎とするOS ● HTML/CSS/JavaScriptでアプリが作れる ● JavaScriptでもJava並の速度がでる
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OSのこれまで ● 2011年7月 ● ● ● 研究レベルで発表 この頃はまだ名前は「Boot to Gecko(B2G)」でした 2012年7月 ● ● 「Firefox OS」に改名、 スクリーンショットが公開される 2013年4月 ● 開発者向けデバイス発売 – KeonとPeak
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OSのこれまで ● 2013年7月 ● ZTE「ZTE Open」販売開始 ● TCL「ALCATEL ONE TOUCH Fire」販売開始
    • Innovation EGG 第一回 発表資料 @cattaka_net 公式サイトのキーワード ● モバイル端末にもオープンWebを ● Web標準 ● HTML5 ● モバイルプラットフォーム
    • Innovation EGG 第一回 発表資料 @cattaka_net なぜFirefox OSか? ● 今までのアプリ開発 ● ● 過去の開発環境は情報の表示にかかる労力が大きい ● ● Java? Objective C? C#? 目に見えるものにたどり着くのに時間がかかる HTMLは情報の表示が一番強い(個人的主観) ● ● ● 目に見える部分が素早く作れる Firefox OSはHTML5でアプリを作る JavaScriptから広い範囲の機能を使える
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OSのアプリ開発で使うスキル ● プログラム言語 ● プラットフォーム ● プログラム構造 ● データ構造設計 ● UI設計 ● ビジュアルデザイン ● 通信 ● etc
    • Innovation EGG 第一回 発表資料 @cattaka_net 実機の入手
    • Innovation EGG 第一回 発表資料 @cattaka_net Dev Phone
    • Innovation EGG 第一回 発表資料 @cattaka_net Nexus Sなどにインストールする
    • Innovation EGG 第一回 発表資料 @cattaka_net Nexus Sなどにインストールする ● MDN(Mozilla Developer Network)に手順書 ● 対象端末 ● ● ビルド環境 ● ● Nexus S、Galaxy S2、Galaxy Nexus等 Ubuntu、Fedora、Mac等 ソースコード ● GitHubなどのリポジトリから取得する
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox OS Simulator
    • Innovation EGG 第一回 発表資料 @cattaka_net 対応状況の確認方法 ● HTML5 TEST ● ● http://html5test.com/ CSS3 TEST ● http://css3test.com/
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox Simulator ● Firefoxブラウザ上で動作 ● アドオンとして動作 ● 非常に軽快 ● ● ● Firefox OSのほとんどの 機能が利用可能 開発中のアプリを簡単に インストール可能 デバッグ用の機能も 順次追加
    • Innovation EGG 第一回 発表資料 @cattaka_net Android上で動かす ● Firefoxがインストールされていれば可能 ● 通常のアプリのようにホームから起動もできる
    • Innovation EGG 第一回 発表資料 @cattaka_net アプリ開発におけるHTML5 HTML5とCSS3
    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5
    • Innovation EGG 第一回 発表資料 @cattaka_net アプリ作りでのHTML5 ● HTMLは元々マークアップランゲージ ● AJAX以降、ブラウザ上でアプリを作るようになった ● しかしHTML+JavaScriptはいろいろ辛い – ● ブラウザ依存、機能不足 HTML5はアプリケーションプラットフォーム ● デバイスアクセス ● 2D/3Dグラフィック ● マルチメディア ● センサー類 ● USBやBluetooth
    • Innovation EGG 第一回 発表資料 @cattaka_net 各機能の対応状況 ● 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
    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5でできること
    • Innovation EGG 第一回 発表資料 @cattaka_net センサー類の値の取得 ● 加速度センサー ● 近接センサー ● 環境光センサー ● A-GPS
    • Innovation EGG 第一回 発表資料 @cattaka_net GeoLocation API ● GeoLocation APIが使える ● GPS座標が取得できる ● できること ● 1ショットで取得 ● 繰り返し継続的に取得 ● 指定した時間内に過去に取得した座標を取る
    • Innovation EGG 第一回 発表資料 @cattaka_net Notifications API ● Webページ外への通知の方法を定義 ● 例)表示場所 – – – ディスプレイの隅っこ ブラウザの一部 モバイルフォンのホーム画面
    • Innovation EGG 第一回 発表資料 @cattaka_net 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();
    • Innovation EGG 第一回 発表資料 @cattaka_net WebGL ● 3D描画もできる ● ちょっと敷居は高い、、 ● ライブラリはいくつかある ● three.js ● j3d ● SceneJS
    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5についてまとめ ● センサーなど昔はJavaScriptから触れなかった 情報がさわれるようになっている ● それらはAndroidやiPhoneと同等水準 ● 通常のアプリなら十分に作成可能
    • Innovation EGG 第一回 発表資料 @cattaka_net CSS3でできること
    • Innovation EGG 第一回 発表資料 @cattaka_net CSSとは ● Cascading Style Sheetsの略 ● W3Cで標準化されている ● HTMLにスタイル(見栄え)を追加する ● 仕様全ての完全な実装は事実上無い
    • Innovation EGG 第一回 発表資料 @cattaka_net HTMLとCSSの関係 ● HTMLで文章の論理構造を記述する ● CSSでスタイルを記述する ● 2つを繋ぐのはセレクタ ● タグ ● ID ● クラス ● 階層構造
    • Innovation EGG 第一回 発表資料 @cattaka_net CSSの表記法 ● セレクタ ● 宣言ブロック ● 宣言 – – プロパティ 値 p#id { color : #ff3300; width : 30%; height : 20%; }
    • Innovation EGG 第一回 発表資料 @cattaka_net セレクタの例 ● タグ – ● ID – ● セレクタに”#”+IDを書く #myButton { ... } クラス – ● セレクタにタグ名をそのまま書く button { ... } セレクタに”.”+クラス名を書く .buttonClass { ... } 階層構造 – – セレクタをスペースで区切ると子孫要素が対象となる #myButton .buttonClass { ... } “>”で区切ると子要素が対象となる #myButton > .buttonClass { ... }
    • Innovation EGG 第一回 発表資料 @cattaka_net 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; } あいうえお あいうえお
    • Innovation EGG 第一回 発表資料 @cattaka_net CSSでできる意外なこと ● 画面サイズによるレイアウトの切り替え ● エレメントの拡大縮小回転 ● アニメーション
    • Innovation EGG 第一回 発表資料 @cattaka_net 画面サイズによるレイアウトの切り替え ● ● ● MediaQueries メディア特性の式により、使用されるCSSを切り替え ることができる 従来はonLoad()内でJavaScriptで画面の幅から ゴリゴリやる必要があった
    • Innovation EGG 第一回 発表資料 @cattaka_net 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%; } } ※ブラウザによって対応状況がことなるの でいくつかのブラウザで試してください
    • Innovation EGG 第一回 発表資料 @cattaka_net エレメントの拡大縮小回転 ● Transform ● 要素の移動、回転、スケーリング、傾斜ができる ● 昔はJavaScriptを用いても困難だった ● ● Canvasに文字を描画して変形しなければならな かった それはパフォーマンス的にも遅かった
    • Innovation EGG 第一回 発表資料 @cattaka_net 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> サンプルコード http://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるの でいくつかのブラウザで試してください
    • Innovation EGG 第一回 発表資料 @cattaka_net アニメーション ● Transition ● 状態遷移時の変化のアニメーションが行える – ● 例)マウスカーソルを当てた時や押した時 Animation ● 繰り返しや複数回のアニメーションが行える
    • Innovation EGG 第一回 発表資料 @cattaka_net 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; } サンプルコード http://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるの でいくつかのブラウザで試してください
    • Innovation EGG 第一回 発表資料 @cattaka_net Animation : animation HTML CSS <div id="resizingBlock" 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; } } <div id="movingBlock" class="outerBox"> <div class="animBox">Animation</div> </div> #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; } } サンプルコード http://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるの でいくつかのブラウザで試してください
    • Innovation EGG 第一回 発表資料 @cattaka_net CSSのまとめ ● レイアウトについて ● ● アニメーションについて ● ● Media QueriesやFlex、Regionsを使えば、JavaScript を使わずにスマートに書ける transitionやanimationを使えば、JavaScriptを使わず にスマートに書ける JavaScriptを使わずにスマートに書ける
    • Innovation EGG 第一回 発表資料 @cattaka_net 実際にアプリを作る
    • Innovation EGG 第一回 発表資料 @cattaka_net アプリ作成の手順 ● 何がしたいか ● イメージを練る ● 外観を作る ● 動きを作る ● 整える
    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5アプリの構成 ● HTML ● ● JavaScript ● ● 画面の構成や論理的な構造を記述する 操作を記述する CSS ● 見せ方を記述する
    • Innovation EGG 第一回 発表資料 @cattaka_net お題:ストップウォッチ START STOP
    • Innovation EGG 第一回 発表資料 @cattaka_net 元ネタ:MufWatch ● 一番最初に作ったAndroidアプリ ● 操作、動き、見た目の勉強に使った
    • Innovation EGG 第一回 発表資料 @cattaka_net 何がしたいか ● 時間を計りたい ● 一時停止 ● リセット ● タイマー
    • Innovation EGG 第一回 発表資料 @cattaka_net イメージを練る ● イメージする ● 手段は何でもいい ● 手書き ● LibreOffice Draw ● Adobe Illustrator LibreOffice Drawで描いたスケッチ→
    • Innovation EGG 第一回 発表資料 @cattaka_net 外観を作る ● HTMLで作る ● 必要ならCSSも使う
    • Innovation EGG 第一回 発表資料 @cattaka_net 部品を整理する ● 表示部 ● 操作部 Startボタン 時 分 秒 Stopボタン 1/100秒 Resetボタン
    • Innovation EGG 第一回 発表資料 @cattaka_net 具体的な構造 文字盤用ブロック ボタン用ブロック
    • Innovation EGG 第一回 発表資料 @cattaka_net JavaScriptで動きを作る ● 3つのボタンに処理を入れる ● Startボタン ● Stopボタン ● Resetボタン
    • Innovation EGG 第一回 発表資料 @cattaka_net 静的な見た目を整える ● 背景色 ● 部品の色 ● 枠線 ● フォント
    • Innovation EGG 第一回 発表資料 @cattaka_net 背景や枠線 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; }
    • Innovation EGG 第一回 発表資料 @cattaka_net フォントの指定 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'; }
    • Innovation EGG 第一回 発表資料 @cattaka_net 動的な見た目を整える ● ボタンの表示 ● ● ● 押下時に色を変える disabledなら非表示 CSSでアニメーション ● 動作中は表示を動かす
    • Innovation EGG 第一回 発表資料 @cattaka_net 動的な見た目を整える 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; }
    • Innovation EGG 第一回 発表資料 @cattaka_net 動的な見た目を整える 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; }
    • Innovation EGG 第一回 発表資料 @cattaka_net 微調整 ● 画面サイズに合うように調節する
    • Innovation EGG 第一回 発表資料 @cattaka_net マニフェストファイル ● アプリの情報を記載したファイル ● アプリ名 ● 起動用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"] }
    • Innovation EGG 第一回 発表資料 @cattaka_net できた Firefox Simulator→ ↓Firefoxブラウザ アプリURL: http://mufwatch.fxos.cattaka.net/
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox Marketplaceへ公開
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox Marketplace ● オープンなアプリストア ● Firefox OSに限らずAndroidやブラウザも対象 ● Web技術で実装されている ● Marketplaceのソースも公開されている ● ベンダー非依存 ● アプリは公開前にレビューがある
    • Innovation EGG 第一回 発表資料 @cattaka_net レビュー ● コミュニティレビュー ● ● レビュー基準もレビュアーも公平なマーケット 簡単なチェック ● 動作確認と公序良俗に反しないか
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefox Marketplaceにログインする
    • Innovation EGG 第一回 発表資料 @cattaka_net Submit an Appを開き、 対象とURLを入力する
    • Innovation EGG 第一回 発表資料 @cattaka_net 間違っていると教えてくれる 90x90のアイコンが無かったので怒られた
    • Innovation EGG 第一回 発表資料 @cattaka_net アプリの情報を記入する
    • Innovation EGG 第一回 発表資料 @cattaka_net アプリの情報を記入する ● 入力項目(2013/10/24時点) ● Description ● Categories ● Privacy Policy ● Homepage ● Support Website ● Support Email ● Flash Support ● Screenshot
    • Innovation EGG 第一回 発表資料 @cattaka_net 登録完了
    • Innovation EGG 第一回 発表資料 @cattaka_net まだレビュー終わってません、、、 でも状況はわかる
    • Innovation EGG 第一回 発表資料 @cattaka_net Firefoxブラウザで動く
    • Innovation EGG 第一回 発表資料 @cattaka_net FirefoxOSシミュレーターで動く
    • Innovation EGG 第一回 発表資料 @cattaka_net 実機で動く
    • Innovation EGG 第一回 発表資料 @cattaka_net HTML5でアプリを作りましょう
    • Innovation EGG 第一回 発表資料 @cattaka_net これからはWeb技術だ
    • Innovation EGG 第一回 発表資料 @cattaka_net ご清聴ありがとうございました 住友 孝郎 @cattaka_net