Webテクノロジーを使用して作成されたモバイルアプリケーションは、徐々に世界を獲得しています。 しかし、人気のあるプラットフォーム用のこのようなアプリケーションの作成には、バグの不明な履歴、動物園の画面サイズ、薄い場所を書き換えるだけでは解決できないパフォーマンスの問題など、多くの問題が伴います。
しかし、幸いなことに、このトピックは、そのようなアプリケーションを開発するという通常の悲劇で満たされることはありません。 今日以来、Firefox OS用のアプリケーションを開発する方法を実際の例で示します。FirefoxOSは、最新のWebテクノロジーのほとんどをサポートし、一般的に言えば、それらのために作成されたおかげです。
レシピ
料理には、次のものが必要です。
0）いくつかのサービスのApi、私たちの場合、それはPhotoFunia（広告のためにそれを考慮しないでください）。
1）角度js-基礎として
2） buildingfirefoxos.com/building-blocks-UIブロックの空白
3）jQueryとその他の好み
0）Api
実際のアプリケーションを表示したいので、実際のAPIを使用する必要があります。 PhotoFuniaは、退屈な自分撮りから面白い小さな写真を作成できるサイトです。 そのため、クライアント上で画像を操作する必要があります（もちろん、主な作業はサーバー上で行われます）。
1）角度js
角度は良いです。 もちろん、モバイルデバイスのパフォーマンスの観点からは傾向がありますが、データだけを実行するルーチンコード、要素の更新などから逃れることができます。 さらに、Angularアプリケーションは、多くの労力をかけずに簡単に構造化されます。
2）ビルディングブロック
ビルディングブロックは、Firefox OSのUI層であるGaiaソースコードから（部分的に）取られた既製の設計要素です。 これらの空白はjsを使用せず、そこにあるすべてのロジックは擬似セレクターによって実装されます。 この場合、すべてのコードはhtml5要素を使用して記述され、data- *属性を使用してブロックの役割を示します。
また、重要なことに気付きました。BuildingBlocksコードは、どのように試しても、自分で書いたコードよりも速くスムーズに動作します。 少なくともこれはリストに適用されます。 おそらく、特定の要素はネイティブに加速されます-これがどの程度真実かはわかりません。 そのため、可能であれば空白を使用してください。開発をスピードアップし、アプリケーションをネイティブのように見せて、よりスムーズにします。
3）jQueryおよびその他
一般的に言えば、jQueryを削除したいのですが、これはgithub.com/segdeha/jquery-pan-zoomピンチズームプラグインの依存関係です。 Zeptoはプラグインのフックに失敗しました。 幸いなことに、jQueryは必要な部分から構築できます。 したがって、私は容赦なく日常生活でシズルやその他の不要なものを取り除きました。
構造について少し
誰でも好きなようにアプリケーションの構造を使用します。 私の場合、次のようになります
/build/ /build.js /build.css /scripts/ /vendors/ /controllers/ /services/ /.../ /app.js /dictionary.js /config.js /styles/ /helpers/ /variables.less /mixins.less /main.less /header.less /... /images/ index.html
スクリプトとスタイルは、うなり声を使用してリアルタイムで構築されます。 そして、無言のリリースはすでにすべてを縮小します。 また、すべてのテンプレートをjsコードに変換するgrunt-angular-templatesを使用します。これはbuild.jsにも追加されます
初期ページのレイアウト
<!doctype html> <html ng-app="PhotoFunia" ng-csp> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <title>PhotoFunia</title> <link rel="stylesheet" href="build/build.css"/> </head> <body role="application"> <!-- , . , --> <section ng-controller="PreloaderController"> <div id="preloader" ng-hide="preloaderHide"> <div class="preloader-content"> <div class="logo"></div> </div> </div> </section> <!-- () --> <section data-type="sidebar" ng-include="VIEWS.DRAWER"></section> <!-- . id="drower" building blocks --> <section id="drawer" role="region" ng-view ng-class="{'menu-opened': drawerOpened}"></section> <!-- toast FF OS. http://buildingfirefoxos.com/building-blocks/status.html --> <section role="status" ng-controller="ToastController"> <p ng-if="text" ng-bind="text"></p> </section> <!-- --> <section ng-include="VIEWS.POPUP"></section> <script src="build/build.js"></script> </body> </html>
重要です
要素にng-cspがあることに気づいた人もいると思います。 このディレクティブには、コンテンツセキュリティポリシーのサポートが含まれています。FirefoxOS用のアプリケーションを作成することは必須です。 さらに、Angular自体に少しパッチを適用する必要があります！
行
window.XMLHttpRequest();
角度コードを探してい
window.XMLHttpRequest();
それを
window.XMLHttpRequest({mozSystem: true});
置き換え
window.XMLHttpRequest({mozSystem: true});
また、スタイルに手を加える必要があります-補助スタイルのangle.js。 すなわち-code.angularjs.org/1.2.16/angular-csp.css
jsについて
最初はcoffeescriptでコードを記述しますが、javascriptの類似物を紹介します。 おそらく、不正確さがどこかで発生する可能性があります-その後、それらを一緒に修正します。
また、すべてのステップで停止しないように、角度とjsについて十分に理解していることを願っています。 そうでなければ、誰も人生でこの記事を読むことはありません。
多言語
私たちのアプリケーションは多言語になります。 したがって、辞書、そのインタープリター、およびコードに単語を挿入するための何らかのディレクティブまたはフィルターが必要です。 多くの場合、角度付きの多言語化に関しては、あまり見栄えの悪いフィルターがいくつか表示されます。 たとえば、私は少し悲しくなります-グローバルスコープで辞書を使用してアクセスするだけで、毎回余分な関数を呼び出してそのような不便なコードを書くのはなぜですか？ たとえば、そのように。 私の仕事のすべての時間のために、この方法は私を失敗させませんでした。 実装しましょう。
私はそれが任意の入れ子になり、任意の数の言語をサポートしたいです。 問題ありません！
var DICTIONARY = { header: { search: { title: { ru: '', en: 'Search' }, favorites: { ru: '', en: 'Favorites' } } }, cancel: { ru: '', en: 'Cancel' } };
変数に直接アクセスしないようにするために（言語ではなく）構造があり、小さなパーサーを記述する必要があります。
App.run(['$rootScope', function ($rootScope) { var lang = 'ru'; // - :) $rootScope.m = (function() { var parse = function(obj, result) { result = result || {}; for (var key in obj) { var value = obj[key]; if (typeof value !== "object") return obj[lang]; result[key] = parse(value); } return result; }; return parse(DICTIONARY); })(); }]);
つまり、変数の値がオブジェクトではなくなる瞬間に再帰的に到達し、目的の言語で値を返します。 すべてが簡単で、ルートスコープに変数mがあり、安全に参照できます。
誰かがそのようなソリューションのパフォーマンスを疑いますが、私はこれがバケットの低下であることを保証できます。 一般に、変数にウォッチをハングさせないディレクティブを誰も作成する必要はありません。 だから、すべてが大丈夫です。
マークアップに戻る
引き出し（メニュー）を終了しましょう。 すでにjsの形式のフレームワークがあるとします。 メニューを提供するコントローラーがあり、APIを使用して、メニューに表示するカテゴリーのリストをすでに受け取りました。 その場合、メニューコードは非常に簡単です。
ご覧のとおり、index.htmlマークアップでは、Building Blocksのコードの一部を既に使用しています。 次に、Drawerコードを取得して、自分用に少し変更します。 buildingfirefoxos.com/building-blocks/drawer.html
<nav ng-controller="DrawerController"> <div class="empty-space"></div> <ul> <li> <a ng-click="go('/favorites'); closeDrawer()"> <span class="text" ng-bind="m.menu.favorite"></span> <span class="counter" ng-bind="favorite.get().length"></span> </a> </li> </ul> <h2 ng-bind="m.category.title"></h2> <ul> <li ng-repeat="cat in categories"> <a ng-click="openCategory(cat.key)"> <span class="text" ng-bind="cat.title"></span> <span class="counter" ng-bind="cat.count"></span> <span class="new-counter" ng-if="cat.new_count" ng-bind="'+'+cat.new_count"></span> </a> </li> </ul> </nav>
ご覧のとおり、メニューには2つのリストがあり、上部にはお気に入りへのリンクが1つしかありません（変数mを既に使用していることに気づいています）、選択した写真効果の数も横に表示されます。 実際、以下にカテゴリのリストがあります。
そして画像を完成させるために、別のページ-効果のリスト、つまりカテゴリページを作成します。
buildingfirefoxos.com/building-blocks/headers.html-ここでヘッダーを取得します
buildingfirefoxos.com/building-blocks/lists.html-ここにリストがあります
buildingfirefoxos.com/building-blocks/filters.html-ここでフィルター（タブ）
buildingfirefoxos.com/building-blocks/buttons.html-そしてボタン
そして、単純に、次のようなものを取得します。
<!-- , --> <header> <menu type="toolbar"> <!-- --> <a ng-click="go('/search')"> <span class="icon action-icon search"></span> </a> </menu> <!-- / (drawer) --> <a ng-click="closeDrawer()"><span class="icon icon-menu"></span></a> <a ng-click="openDrawer()"><span class="icon icon-menu"></span></a> <h1 ng-bind="category.title"></h1> </header> <div role="main" data-type="list" id="category"> <!-- , --> <ul role="tablist" data-type="filter" data-items="2"> <li role="tab" aria-selected="{{ sorting === 'new'}}"> <a ng-click="setSorting('new')" text="m.category.new"></a> </li> <li role="tab" aria-selected="{{ sorting === 'popular'}}"> <a ng-click="setSorting('popular')" text="m.category.popular"></a> </li> </ul> <!-- --> <ul class="effects"> <li ng-repeat="effect in effects" ng-click="openEffect(effect.key)"> <aside class="pack-end"> <img ng-src="{{CONFIG.DOMAIN + effect.icon}}"> </aside> <a> <p ng-bind="effect.title"></p> <p ng-if="effect.labels"> <span ng-repeat="label in effect.labels" ng-class="label" class="label"></span> </p> </a> </li> </ul> <!-- --> <div class="load-more" ng-if="isNeedMore && effects.length"> <button ng-click="showMore()" text="m.category.show_more"></button> </div> </div>
すべてが明確であることを願っています。 そして、次のことを理解する必要があります-既製のブロックを取り、それらから最も必要なものを切り取ります。 好きなようにねじれたりねじれたりすることがあります。
他のすべてのページは同じ方法で行われます。
Firefox OS APIについて
Firefox OSアプリケーションバージョン> = 1.3では、入力[ファイル]は機能しませんが、それと引き換えに、MozActivityの使用が提案されています。 作業も簡単になります。
これは、画像の受信方法です。
var pick = new MozActivity({ name: "pick", data: { type: ["image/*"], nocrop: true } }); pick.onsuccess = function() { var blob = pick.result.blob; // - };
共有は次のとおりです。
new MozActivity({ name: "share", data: { type: "image/*", number: 1, blobs: [blob] } });
そしてこのようなもの-保存：
var sdcard = navigator.getDeviceStorage("sdcard"); var request = sdcard.addNamed(blob, name); request.onsuccess = function() {}; request.onerror = function() {};
アプリケーションの準備ができたら、ビルドしてテストする必要があります。
ビルドするには-エミュレーターを使用できます。
Firefoxの新しいバージョンにデフォルトで統合されているApplication Managerを使用することをお勧めします。 developer.mozilla.org/en/docs/Mozilla/Firefox_OS/Using_the_App_Manager 。 ここでは、異なるバージョンのエミュレーターをインストールし、デバイスとデビットを接続できます！ これはとても便利です。
アプリケーションマニフェストも必要です。 見た目も非常に簡単です。
例を挙げます。
{ "name": "PhotoFunia", "description": "PhotoFunia is the best way to add a spark to your photos, make them special and more original.", "launch_path": "/index.html", "version" : "1", "type": "privileged", "developer": { "name": "", "email" : "" }, "default_locale": "en", "icons": { "256": "/images/app_icon_256.png" }, "permissions": { "device-storage:pictures": { "description": "Save result images", "access": "readwrite" }, "device-storage:sdcard": { "description": "Save result images", "access": "readwrite" }, "mobilenetwork": { "description": "Check for available connection" }, "systemXHR": { "description": "Need for internet connection" } } }
実際、必要なすべてのファイルを.zipアーカイブに入れ、検証のためにmarketplace.firefox.comに送信します 。 数日（そしておそらく夕方）に、アプリケーションが市場に登場します！
あれは何だった？
Firefox OSの開発は非常にシンプルで、面白くて楽しいことを伝えたかったのです！ もちろん、今のところ、これからお金を稼ぐことはできません。 しかし、あなたは私たちがお金のためにここにいると思うかもしれません。 したがって、IDEを選択してFirefox OS用のアプリケーションを作成してください！
Firefox OSにデバイスを持っている
私はすべての願い、そしてPMの間違いや欠点を受け入れます。