Submit Search
Upload
20150118 firefoxos-handson-helloworld
•
7 likes
•
3,054 views
Noritada Shimizu
Follow
Firefox OS アプリ作成のためのハンズオン資料です。環境構築からHelloWorldまでをカバーします。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 74
Download now
Download to read offline
Recommended
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
schoowebcampus
Jenkins on-mac
Jenkins on-mac
yuichi takeda
iOS Traning #0
iOS Traning #0
yuichi takeda
個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話
Motoki Narita
Firefox os app dev
Firefox os app dev
dynamis
Firefox 4 and Mobile
Firefox 4 and Mobile
Makoto Kato
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
Tomokazu Kizawa
Firefox OS アプリ開発
Firefox OS アプリ開発
Yoshitomo Akimoto
Recommended
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
schoowebcampus
Jenkins on-mac
Jenkins on-mac
yuichi takeda
iOS Traning #0
iOS Traning #0
yuichi takeda
個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話
Motoki Narita
Firefox os app dev
Firefox os app dev
dynamis
Firefox 4 and Mobile
Firefox 4 and Mobile
Makoto Kato
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
Wndows 10 Fall Creators Update Insider Previewから見たアップデート内容
Tomokazu Kizawa
Firefox OS アプリ開発
Firefox OS アプリ開発
Yoshitomo Akimoto
Firefox Mobile
Firefox Mobile
Makoto Kato
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
Study Group by SciencePark Corp.
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
ssuser040811
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
Study Group by SciencePark Corp.
Build 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows Development
c-mitsuba
Xcode7時代のアプリ配布
Xcode7時代のアプリ配布
toyship
Sphinxの環境構築が再現できない問題をDockerで解決してみた
Sphinxの環境構築が再現できない問題をDockerで解決してみた
Study Group by SciencePark Corp.
SpeechPlatform with Kinect
SpeechPlatform with Kinect
Yoshinori Hayashi
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
Tomoki Hasegawa
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Masami Yabushita
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Noritada Shimizu
20140629 firefoxos-devenv
20140629 firefoxos-devenv
Noritada Shimizu
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Masami Yabushita
レガシーフリーOSに必要な要素技術 legacy free os
レガシーフリーOSに必要な要素技術 legacy free os
uchan_nos
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
はじめてのiOSアプリ開発 ①
はじめてのiOSアプリ開発 ①
Nagamine Hiromasa
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Kazuyuki Suzuki
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
Noritada Shimizu
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Noritada Shimizu
Building libc++ for toy OS
Building libc++ for toy OS
uchan_nos
More Related Content
What's hot
Firefox Mobile
Firefox Mobile
Makoto Kato
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
Study Group by SciencePark Corp.
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
ssuser040811
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
Study Group by SciencePark Corp.
Build 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows Development
c-mitsuba
Xcode7時代のアプリ配布
Xcode7時代のアプリ配布
toyship
Sphinxの環境構築が再現できない問題をDockerで解決してみた
Sphinxの環境構築が再現できない問題をDockerで解決してみた
Study Group by SciencePark Corp.
SpeechPlatform with Kinect
SpeechPlatform with Kinect
Yoshinori Hayashi
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
Tomoki Hasegawa
What's hot
(10)
Firefox Mobile
Firefox Mobile
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
(BizRobo!)対業務改善用大型変形合体ロボット開発計画
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
.NET CoreでのWindowsサービスの作り方と、Coreならではの便利な機能
Build 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows Development
Xcode7時代のアプリ配布
Xcode7時代のアプリ配布
Sphinxの環境構築が再現できない問題をDockerで解決してみた
Sphinxの環境構築が再現できない問題をDockerで解決してみた
SpeechPlatform with Kinect
SpeechPlatform with Kinect
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
Similar to 20150118 firefoxos-handson-helloworld
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Masami Yabushita
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Noritada Shimizu
20140629 firefoxos-devenv
20140629 firefoxos-devenv
Noritada Shimizu
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Masami Yabushita
レガシーフリーOSに必要な要素技術 legacy free os
レガシーフリーOSに必要な要素技術 legacy free os
uchan_nos
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
はじめてのiOSアプリ開発 ①
はじめてのiOSアプリ開発 ①
Nagamine Hiromasa
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Kazuyuki Suzuki
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
Noritada Shimizu
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Noritada Shimizu
Building libc++ for toy OS
Building libc++ for toy OS
uchan_nos
Firefox os hackathon
Firefox os hackathon
dynamis
デザイナーのためのXcode入門 先生:関根 元和
デザイナーのためのXcode入門 先生:関根 元和
schoowebcampus
論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10
Noritada Shimizu
Firefox OSについて
Firefox OSについて
BeMarble
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
エピック・ゲームズ・ジャパン Epic Games Japan
SwiftによるiOS開発再入門
SwiftによるiOS開発再入門
Tomoki Hasegawa
さわってみよう Firefox OS|デザイナーズハック004
さわってみよう Firefox OS|デザイナーズハック004
Chihiro Tomita
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
Similar to 20150118 firefoxos-handson-helloworld
(20)
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
20140629 firefoxos-devenv
20140629 firefoxos-devenv
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
レガシーフリーOSに必要な要素技術 legacy free os
レガシーフリーOSに必要な要素技術 legacy free os
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
はじめてのiOSアプリ開発 ①
はじめてのiOSアプリ開発 ①
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Building libc++ for toy OS
Building libc++ for toy OS
Firefox os hackathon
Firefox os hackathon
デザイナーのためのXcode入門 先生:関根 元和
デザイナーのためのXcode入門 先生:関根 元和
論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10
Firefox OSについて
Firefox OSについて
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
SwiftによるiOS開発再入門
SwiftによるiOS開発再入門
さわってみよう Firefox OS|デザイナーズハック004
さわってみよう Firefox OS|デザイナーズハック004
20120316 designerworkshoppublished
20120316 designerworkshoppublished
More from Noritada Shimizu
20160803 devrel
20160803 devrel
Noritada Shimizu
20160713 webvr
20160713 webvr
Noritada Shimizu
20160601 devtools
20160601 devtools
Noritada Shimizu
20150512 webgl-off-the-main-thread
20150512 webgl-off-the-main-thread
Noritada Shimizu
20160428 html5jwebplat
20160428 html5jwebplat
Noritada Shimizu
asm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web games
Noritada Shimizu
Mozilla とブラウザゲーム
Mozilla とブラウザゲーム
Noritada Shimizu
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
Noritada Shimizu
20151224-games
20151224-games
Noritada Shimizu
20151128 firefoxos-handson
20151128 firefoxos-handson
Noritada Shimizu
20151117 devtools
20151117 devtools
Noritada Shimizu
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
Noritada Shimizu
20150822 osc-shimane
20150822 osc-shimane
Noritada Shimizu
20150829 firefox-os-handson
20150829 firefox-os-handson
Noritada Shimizu
20150829 firefox-os
20150829 firefox-os
Noritada Shimizu
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
Noritada Shimizu
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Noritada Shimizu
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
Noritada Shimizu
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
Noritada Shimizu
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
Noritada Shimizu
More from Noritada Shimizu
(20)
20160803 devrel
20160803 devrel
20160713 webvr
20160713 webvr
20160601 devtools
20160601 devtools
20150512 webgl-off-the-main-thread
20150512 webgl-off-the-main-thread
20160428 html5jwebplat
20160428 html5jwebplat
asm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web games
Mozilla とブラウザゲーム
Mozilla とブラウザゲーム
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
20151224-games
20151224-games
20151128 firefoxos-handson
20151128 firefoxos-handson
20151117 devtools
20151117 devtools
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
20150822 osc-shimane
20150822 osc-shimane
20150829 firefox-os-handson
20150829 firefox-os-handson
20150829 firefox-os
20150829 firefox-os
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
Recently uploaded
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Recently uploaded
(10)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
20150118 firefoxos-handson-helloworld
1.
"Hello world!" on
Firefox OS N. Shimizu (chikoski@gmail.com / @chikoski) Firefox OS ハンズオン 2015/01/18
2.
もくじ • Firefox OS
アプリを作るために必要な準備 • Firefox OS Developer Edition のダウンロード • シミュレータの準備 • ADB / デバイスドライバの準備 • "Hello world!" アプリの作成
3.
@chikoski • 六本木にあるWeb系の会社で働いてます • フロント周り中心にやってます •
Web Audio API 周り • 関数とか好きです • サッカーネタ多め
4.
Firefox OS アプリ作成環境構築
5.
アプリ作成に必要な準備をしましょう • 次のソフトをインストールします • Firefox
Developer Edition • Firefox OS シミュレータ • Windowsの方はドライバもインストールします • 作成に「必要無い」こと • SDKのダウンロード • 開発者登録(アプリの公開には必要、無料)
6.
• 普通のFirefoxでも開発できますが、 開発者が必要とする機能が充実しているため、 こちらのほうが効率良く開発が行えます。 • https://mozilla.org/firefox/channel/
よりダウンロードできます
7.
Firefox のインストール https://www.mozilla.org/firefox/channel/ へアクセス
8.
Firefox のインストール(つづき) クリック
9.
Firefox のインストール(つづき) ボタンをクリックして、ダウンロード開始
10.
あとはOSの作法で インストールしましょう
11.
起動画面
12.
デフォルトブラウザの設定 「次回から確認しない」にチェックを入れておくと、 次からは確認されません。
13.
開発に必要な機能は WebIDEに集約されています
14.
WebIDE 詳細は下記のページを参照してください: https://developer.mozilla.org/ja/docs/Tools/WebIDE
15.
Web IDEの起動 ツールバーにあるアイコンをクリックして、起動
16.
WebIDEの初期設定として、 Firefox OSシミュレータを インストールしましょう
17.
シミュレータのインストール 「ランタムを選択」をクリックします。 クリック
18.
シミュレータのインストール(つづき) 「シミュレータをインストール」をクリックします。 クリック
19.
シミュレータのインストール(つづき) 「Firefox OS 2.1
シミュレータ」をインストールします。
20.
シミュレータのインストール(つづき) クリック 「閉じる」をクリックして終了です。
21.
シミュレータの起動 クリック シミュレータの欄にある"Firefox OS 2.1"をクリックして起動します。
22.
シミュレータ • ロケールはen-US • 日本語表示はできます •
Marketplaceからアプリの インストールも可能です
23.
シミュレータのホームボタン ここにあります
24.
ボタンで、端末の向きを切り替えます ここにあります
25.
以上で、開発の準備は完了です
26.
"HelloWorld"
27.
HelloWorldアプリの作成 画面左上にある「アプリを開く」をクリックします。 クリック
28.
HelloWorldアプリの作成(つづき) メニュー中の「新規アプリ」をクリックします。 クリック
29.
HelloWorldアプリの作成(つづき) テンプレートの中から"HelloWorld"を選択します。 クリック
30.
HelloWorldアプリの作成(つづき) プロジェクト名を入力します。ここではmyFirstAppとしました。 プロジェクト名を入力
31.
HelloWorldアプリの作成(つづき) "OK"ボタンをクリックして、テンプレートからアプリを作成します。 クリック
32.
HelloWorldアプリの作成(つづき) このように表示されたら、無事アプリが作られています。
33.
シミュレータ内で動かしてみましょう!
34.
HelloWorldアプリの起動 ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。 クリック
35.
注意: 初回起動時は次のように表示されます • スマートコレクションが 位置情報を利用するのを 許可するかどうかを確認する ダイアログが表示されます • これは初めてアプリを インストールする際に 表示されます。 •
2回目以降は表示されません
36.
起動されたHello Worldアプリ
37.
"HelloWorld"を改造しよう!
38.
"HelloWorld"を改造しよう ウィンドウの左にあるファイルのリストにある"index.html"をクリックします。 クリック
39.
"HelloWorld"を改造しよう(つづき) 右側にエディタが表示されます。ここでファイルを編集できます。
40.
"HelloWorld"を改造しよう(つづき) <body> <h1>こんにちは!せかい!</h1> </body> index.html の本文部分を上記のように書き換え、保存します。
41.
"HelloWorld"を改造しよう(つづき) 再読み込みボタンを押します。 キーボードショートカットは、Ctrl-r(もしくはCmd-r)です。 クリック
42.
"HelloWorld"を改造しよう(つづき) • 表示される文字が 変わりました! • このように再読み込みを 行うことで、変更内容を 即座に反映できます。
43.
"HelloWorld"にスタイルを追加しよう
44.
ここから先に行う変更はこちらからもご覧になれます: https://gist.github.com/chikoski/fffbf16faf32389decda
45.
ファイルの新規作成 • 画面左側のファイルブラウザで右クリック 画面左のファイルブラウザで右クリックして、「新規作成」を選びます。 キーボードショートカットはCtrl(Cmd) +
n です。
46.
ファイルの新規作成(つづき) ファイル名を変更します。 ここでは"app.css"とします。
47.
ファイルの新規作成(つづき) 空のファイルが作成されます。 画面右側のエディタ部分でCSSを書いて行きましょう。
48.
CSSの内容 body{ overflow: hidden; } h1{ font-size: 640%; border-style:
none; line-height: .9; transform: rotate(-15deg); margin-left: -0.2em; width: 130%; } 上記のように記述したら、保存 (Ctrl / Cmd + s)します。
49.
app.cssとindex.htmlとのリンク <title>Hello World</title> <style> body { border:
1px solid black; } </style> <title>Hello World</title> <link rel="stylesheet" href="app.css"> 左のようになっている部分を、右のように変更します。 変更したら保存します。
50.
再読み込み後の画面 • 文字の大きさと、 傾きが変わっています。 • またh1要素の枠線も 無くなっています。
51.
スタイルの確認 画面上部にあるスパナのアイコンをクリックして、開発ツールを表示させます。 クリック
52.
スタイルの確認(つづき) 画面下部に開発ツールが表示されます。
53.
スタイルの確認(つづき) 「インスペクタ」タブをクリックすると、要素とそのスタイルを確認できます。
54.
スタイルの確認(つづき) インスペクタ上で、要素をポイントすると シミュレータでその要素がハイライトされます。 ポイント
55.
センサーの値を使ってみよう!
56.
作成するもの 暗くすると、 色が変わる
57.
app.js を編集します window.addEventListener("load", function()
{ var threshold = 50; var className = "night"; var body = document.querySelector("body"); window.addEventListener("devicelight", function(event){ if(event.value < threshold){ body.classList.add(className); }else{ body.classList.remove(className); } }); });
58.
CSSも修正します body{ overflow: hidden; } body.night{ background-color: black; color:
white; } body要素に関するルールを上記のように修正します。
59.
再読み込みをして実験します Webカメラのあたりを 手で覆うと変化します
60.
アプリを実機に転送してみよう!
61.
実機の設定を開発用に変更します
62.
実機の設定変更 環境設定アプリを起動し、「端末情報」をタップします。 タップ
63.
実機の設定変更(つづき) 「その他の情報」をタップします。 タップ
64.
実機の設定変更(つづき) 「開発者メニュー」にチェックを入れます。 チェック
65.
実機の設定変更(つづき) 環境設定アプリのトップに「開発者」が表示されます。これをタップします。 タップ
66.
実機の設定変更(つづき) 「開発者ツール」の欄を「ADBと開発ツール」に変更します。 変更
67.
これでWebIDEと実機を 接続できるようになりました。
68.
スクリーンロックの無効化 スクリーンがロックされると、WebIDEとの接続がきれてしまします。 環境設定アプリでスクリーンロックを無効にしておきましょう。 タップ
69.
では実機とPCをUSBで接続しましょう
70.
ランタイムから実機を選びましょう クリック
71.
HelloWorldアプリを実機で起動 ウィンドウの上部中央にある、「▶」ボタンを押すとアプリが起動します。 他の使い方も、シミュレータの時と変わりません。 クリック
72.
まとめ
73.
まとめ • Firefoxをインストールすれば、開発環境の構築は ほぼ完了です • WebIDEを使ってアプリの作成、更新を行えます •
お好きなエディタをお持ちの場合は、そちらを 利用いただいても構いません • シミュレータ、実機に関わらずアプリの転送は 同じように行えます • HTML + CSS + JS でアプリを作成できます
74.
Have fun!
Download now