狠狠撸
Submit Search
ずーるらんなー
?
1 like
?
855 views
Ryoma Sasaki
Follow
2014/3/15 関西FirefoxOS 勉強会 6th GIG 発表資料 XULRunner について
Read less
Read more
1 of 37
Download now
Download to read offline
More Related Content
ずーるらんなー
1.
ずーるらんなー 2014/03/15 Ryoma Sasaki
2.
自己紹介 ?株式会社ブリリアントサービス所属 ?組み込みエンジニア ?マイコン、Linux 、Androidなど ?趣味:格闘技 最近、柔術始めました 佐々木 良馬
/ @s53forco
3.
アジェンダ ?なぜGeckoなのか? ?XULRunnerの前に ?XULRunnerとは ?XULRunnerを使った デスクトップアプリケーションを作成しよう
4.
なぜGeckoなのか?
5.
説明するには、まずFirefox OSの アーキテクチャを知る必要がある
6.
Firefox OS アーキテクチャ 3つのレイヤーに分かれる Gaia UIを担当 JavaScript、HTML、CSSで記述されたWebアプリで構成 Gecko Webアプリの実行環境 JavaScript、HTML、CSSなどを解釈して描画を行う Gonk 下層レベルのOS Linuxカーネル、HAL層で構成
7.
Firefox OS アーキテクチャ 3つのレイヤーに分かれる Gaia ホーム画面、Settings画面などもGaiaで構成 GonkへのアクセスはWebAPIを介する Gecko アプリケーションランタイム レイアウトエンジンなどで構成 アプリケーションのためのWebAPIも含まれる Firefoxでも同じエンジンを使用 Gonk Androidで使われているLinuxに近い DalvicやWebkitなど不要なものを除外したもの デバイスドライバはAndroidのものを流用
8.
Geckoとは? Firefox OSの中枢とも言える存在 プラットフォームの理解には不可欠 Geckoとは? Firefox OSの中枢とも言える存在
9.
Gecko Geckoについて調べてみよう なにか発表できることはないか??
10.
Gecko ピンチ!!! Webで調べるが??? 情報が少ない!
11.
ディレクトリ構成 B2G - gecko - chrome
外観や操作性を規定 語源は金属のメッキ - dom WebAPIを提供 - hal HAL層 - layout レイアウト要素 - xpcom Mozillaのコンポーネント技術 - XULRunner Mozilla製品共通のランタイムパッケージ ???など ソースコードを落として中身を見てみる - storage ストレージ管理
12.
XULRunner この中から直感で決めたのが 「XULRunner 」 ※響きで決めました
13.
XULRunnerの前に
14.
XULRunnerに入る前に必要な知識がある XUL、XPCOMとは?
15.
XUL XML User Interface
Language MozillaアプリケーションのGUIをXMLで記述するための言語 Firefox本体や拡張機能のために使われている。 見た目はCSSで、動作はJSで作成される。 テキストやグラフィックス、レイアウトの変更が容易 Web系エンジニアは短期間で習得可能
16.
XPCOM Cross Platform Component
Object Model クロスプラットフォームなコンポーネント技術 Mozillaプロジェクトで開発 コンポーネント(機能を提供するクラス)を プラットフォームに依存せずに呼び出すことができる JSからはアクセスできないコンテンツがある場合に 利用したい機能をXPCOM形式でコンポーネントにして おくことでJSから利用することができる
17.
XULRunnerとは
18.
XULRunner XUL+XPCOMアプリケーションを 単独で起動するための Mozillaランタイムパッケージ ?配布されるパッケージを組み込むことで利用可能 ?Geckoレンダリングエンジンとして利用可能 ?XPCOMコンポーネントを複数含み、JS、Pythonなど から呼び出すことができる。
19.
XULRunner XULRunner XPCOMコンポーネント 1 XPCOMコンポーネント 2 XPCOMコンポーネント 3 クロスプラットフォーム 複数のOSへ対応 JavaScript Python Java Windows
MacOS X Linux 複数の言語から 相互呼び出し可能 XPConnect を使用してアクセス
20.
XULRunnerを使った デスクトップアプリケーション を作成しよう
21.
出展元: https://developer.mozilla.org/ja/docs/XULRunner
22.
Let's do it ?Windows環境で実施 ?XULRunnerをMozilla.orgからダウンロード ?設定ファイルの作成 ?アプリケーションの実行
23.
XULRunner のダウンロード
24.
ここからダウンロード: http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/
25.
Latest配下には「runtimes」「sdk」「source」とあるが、 今回は「runtimes」をダウンロードする Windows用を選択
26.
設定ファイルの作成
27.
フォルダ構成 /Appフォルダ /chrome /content - main.js - main.xul -
chrome.manifest /defaults /preferences - pref.js - application.ini /xulrunner ?XUL、HTMLファイルを content以下に配置 ?メインウィンドウとして使用 ?リソースのURI定義など ?プロファイルを指定 ?ブート設定を記載 ?xulrunnerパッケージ
28.
XULの作成 main.xulへ記述 <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"
type="text/css"?> <window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <caption label="Hello World"/> </window>
29.
chromeマニフェストの作成 chrome.manifestへ記述 content myapp file:content/ ?contentパッケージを登録する ?URI
chrome://パッケージ名/content/…によって 参照された場合のファイルパスを指定する
30.
プリファレンスの設定 pref.jsへ記述 pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul"); ?メインウィンドウであるXULファイルを指定する ?Firefoxのabout:configに相当する設定 toolkit.defaultChromeURI
?? アプリケーション実行時に開く デフォルトのウィンドウを指定 toolkit.defaultChromeFeatures ?? メインアプリケーションを開くときの 特性を指定
31.
ブート設定 application.iniへ記述 [App] Vendor=s53forco Name=My App Version=1.0 BuildID=20140315 Copyright=Copyright (c)
2014 s53forco ID=myapp@s53forco.com [Gecko] MinVersion=27.0.1 MaxVersion=27.0.1 ?アプリ名 ?アプリVersion ?ID ?minimum Gecko Version ?maximum Gecko Version ?xulrunner起動時に引数として渡す
32.
アプリケーションの実行
33.
アプリケーションの実行 コマンドプロンプトから実行 ..xulrunner/xulrunner.exe application.ini
34.
アプリケーションの実行 タイトル、ラベル、Window設定が 反映されていることが確認できた ただし、起動に失敗すると何も 起こらないためデバッグが大変??
35.
まとめ
36.
まとめ ?Geckoについて、まだWebに情報が少ない ?ひとりで勉強するのには限界がある コミュニティや勉強会に 参加することは非常に大切!!
37.
ご清聴ありがとうございました
Download