読者の皆さん、こんにちは！
最近多くの人が知っているように、mozillaはfirefox osをリリースしました。このプラットフォームにはすでにいくつかのスマートフォンが登場しています。 私はアプリケーションを書く記事や実際の例を見つけませんでした。 それで、MDNを掘り下げて、この欠点を補うことにしました。
Firefox OSの何がそんなに良いのですか？
firefox osは「ブラウザシステム」であるため、このモバイルシステムのアイデアは非常に革新的です。そのためのアプリケーションはhtml / cssで記述されています。 これの主なプラスは、追加の言語、フレームワークなどを学習することなく、Webアプリケーションを作成した人がWebアプリケーションを作成できることです。 また、開発者は既存のWeb開発をこのOSに簡単に移植できます。
どこから始めますか？
まず、firefox osエミュレータをインストールすることをお勧めします。 これには、firefox osシミュレーターと呼ばれるfirefoxプラグインが最適です。 こちらからダウンロードできます。
さあ始めましょう！
マニフェスト
エミュレーターをダウンロードしてインストールした後、アプリケーションの名前でフォルダーを作成することを提案します。フォルダーは実際に配置されます。 トレーニングアプリケーションは「Count sistems」と呼ばれます。 数値を異なる数値システムに変換し、それらを使用して算術演算も実行します。 私はすでにC ++でそのようなアプリケーションを書いたので、今度はhtml / jsでどのように見えるか見てみましょう。
フォルダーを作成したら、アプリケーションのマニフェストを作成しましょう。 マニフェストは、アプリケーションが何と呼ばれるか、アイコンがどこにあるかなどをOSに伝えるjsonファイルです。
このようなファイルのコードは次のようになります。
{ "name":"count systems",// "launch_path": "/index.html",// "developer": { "name":"RAZVOR",// "url":""// }, "description":"count systems app",// "icons":{ "128":"/icon.png"// } }
このファイルをmanifest.webappとして作成したフォルダーに保存します。
マークアップ
ほとんどWebアプリケーションを作成しているため、index.htmlファイルを作成します。 次のコードで：
<html> <head><script src="https://myapps.mozillalabs.com/jsapi/include.js"></script></head> <body><p>hello world</p></body> <script></script> </html>
ご覧のとおり、これについて特別なことはありません。
打ち上げ
エミュレーターを介してアプリケーションを実行するには、Firefoxツールで開きます-> Web開発-> Firefox OSシミュレーター
エミュレータタブが開きます。 その後、[ディレクトリの追加]をクリックしてmanifest.webappを選択します。
原則として、インストールせずにFirefox OSでアプリケーションを実行できますが、市場には最新のものがなく、エミュレーターはアプリケーション自体をインストールします。
実行するには、実行をクリックして更新を更新します。
トレーニングアプリを起動しましょう！
すべてを正しく行った場合、これが表示されます。
アプリケーション自体からアプリケーションをインストールする
以前にOSで言ったように、アプリケーションをインストールせずに実行できます。それらをインストールするには、APIに特別な機能があります。それを適用すると、コードは次のようになります。
<html> <head> <meta charset="UFT-8"> <script src="https://myapps.mozillalabs.com/jsapi/include.js"></script> <script src="jquery.js"></script> <link href="app.css" rel="stylesheet" type="text/css"> </head> <body><p>hello world</p></body> <script> var gManifestName = "manifest.webapp";// app=function(){ this.init=function(){ // } this.init(); }; $(document).ready(function(){ var request = navigator.mozApps.getSelf(); // request.onsuccess=function(){// if(request.result){// , alert(' '); a=new app(); }else{// $('<div>').appendTo('body').attr('id','inst_b').text('!').css({width:200,textAlign:'center',padding:5,background:'#222',color:'#ccc',borderRadius:'3px'}).click(function(){ var inst=navigator.mozApps.install(gManifestName);// inst.onsuccess=function(){alert(' ');$('#inst_b').remove();a=new app();};// inst.onerror=function(){alert(' :\n'+this.error.name)}// }); } }; request.onerror=function(){alert(':\n'+this.error.message)}// }); </script> </html>
したがって、インストールの面倒を見て、cssとjquryも追加したので、それらを対応する名前の下のアプリケーションフォルダーに入れることを忘れないでください。
Hello worldの後
これで、いくつかの機能をすでに理解しているはずです。 世界に挨拶しましたが、実際のアプリケーションの作成を開始できます。
コードをアップグレードしています。
html：
<html lang="ru"> <head> <title>Count systems</title> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="/app.css"> <script src="jquery.js"></script> </head> <body> <h1 class="center">Count systems</h1> <div class="feilds"> <p> </p><input type="text"/> <p> </p><input type="text"/> <p> </p><input type="text"/> <div class="error"></div> <div class="result"></div> <button class="submit">!</button> </div> </body> <script> var gManifestName = "manifest.webapp"; app=function(){ this.alp="abcdefghijklmnopqrstuvwxyz"; //this.e='1'; this.p={ ten_to:function(c,d){ var i=0,r=''; do{ v=c%d; c=(c-(c%d))/d; if(v>9){ r+=this.alp[v-10]; }else{ r+=v; } }while(c!=0); var r2=''; for(i=(r.length-1);i>-1;i--){ r2+=r[i]; } return r2; }, to_ten:function(c,d){ c=c.toString(); var v,r=''; for(var i=0;i<c.length;i++){ v=c[i]; if(v.match(/[0-9]/)!=v){ for(i in this.alp){ if(this.alp==v){ v=i+11; return false; } } } r+=v*d; } return r; } }; this.error=function(t){ $('.error').text(t); setTimeout(function d(){$('.error').text('').hide()},1000); }; this.wr_res=function(t){ $('.result').show().text(t); } this.init=function(){ $('body').load('/a.html'); $('.submit').click(function sub(){ $('.submit').hide(); a2=new app(); var fi=$('.feilds input'); fi.each(function(){ if($(this).val().length<1){ a2.error(' !'); return false; } }); var data={ c:fi[0].value, sis:fi[1].value, to_sis:fi[2].value }; with(data){ if(sis==10){ a2.wr_res(a2.p.ten_to(c,to_sis)); }else{ if(to_sis==10){ a2.wr_res(a2.p.to_ten(c,sis)); }else{ a2.wr_res(a2.p.ten_to(a2.p.to_ten(c,sis),to_sis)); } } } fi.change(function(){ $('.result').hide().text(''); $('.submit').show(); }); }); } this.init(); }; $(document).ready(function(){ var request = navigator.mozApps.getSelf(); request.onsuccess=function(){ if(request.result){ a=new app(); }else{ $('<div>').appendTo('body').text('!').css({width:200,textAlign:'center',padding:5,background:'#222',color:'#ccc',borderRadius:'3px'}).click(function(){ var inst=navigator.mozApps.install(gManifestName); inst.onsuccess=function(){alert(' ');a=new app();}; inst.onerror=function(){alert(' :\n'+this.error.name)} }); } }; request.onerror=function(){alert(':\n'+this.error.message)} }); </script> </html>
css：
.center{ width:250; margin:1 auto; } .feilds{ width:250px; margin:10 auto; border-radius:5px; box-shadow:inset 0 0 10px #ddd; padding:10px; } .submit{ width:100; padding:7; background-color:#222; color:#ccc; background-image:none !important; margin-top:15px; } .error{ width:100px; margin:0 auto; color:red; } .result{ width:100px; overflow:auto; margin:5 auto; border:1px solid #aaa; border-radius:4px; padding:6px; display:none; }
私はそれがどのように機能するのか、自分でそれを理解できると思います。これについて特別なことや新しいことは何もないからです。
APIのいくつかの機能
firefox osには、組み込みのhtml5 apiに加えて1つあります。 それから、ナビゲータークラスを使用しました。 次に、このクラスのいくつかの機能について説明します。
オンラインまたはオフライン
デバイスがネットワークに接続されているかどうかを確認するにはどうすればよいですか？ これを行うには、navigator.onLineメソッドが役立ちます。 trueが返された場合、ネットワークはそうですが、falseはそうではありません。 すべてがシンプルです。
デバイスの向き
次のように、向きに応じて異なるCSSを接続できます。
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
jsを使用して加速度計からデータを取得することもできます
window.addEventListener("deviceorientation", handleOrientation, true); function handleOrientation(orientData) { var absolute = orientData.absolute; var alpha = orientData.alpha; var beta = orientData.beta; var gamma = orientData.gamma; }
振動
振動の場合、次の機能を使用できます。
navigator.vibrate(1000);// 1000
マーケットプレイスにアプリケーションを配置します
テストアプリケーションを作成したら、市場に投入する人々に紹介します。 この操作は非常に簡単ですが、いくつかのニュアンスを知る必要があります。 最初に選択する必要があるのは、ソースコードを自分の場所または市場に投稿するかどうかです。 最初の場合は、サーバーまたはgithubを特別に構成する必要があります 。詳細はこちら 。 2つ目の方法を選択しました。このため、アプリケーションをzipでパッケージ化し、[アプリケーションの送信]-> [パッケージ化]-> [ファイルの選択]をクリックして選択するだけです。 マニフェストで問題がなければ、ステップ2に進みます。次のステップでは、説明を書いてスクリーンショットをアップロードする必要があります（500x600px未満の注意）。 すべてが順調に進み、おめでとうございます。アプリケーション全体を書いて投稿した経験があります。
最後に
私の記事があなたにとって有用であり、少し疲れていることを願っています。