Your SlideShare is downloading. ×
  • Like
HTML5でFirefox OSアプリを作ろう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5でFirefox OSアプリを作ろう

  • 1,219 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,219
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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