⚛️ 👨🏿‍⚕️ 🚒 モバイルWeb開発：HTML5 Androidアプリ 💓 😟 🤚🏼

エントリー

幸いなことに、モバイルアプリケーションを作成する方法は複数あります。あなたはサイトを作り、特別な方法でそれをパックし、出来上がり、ここにアプリケーションがあります！ phonegap.comプロジェクトがこの方法について提供するのはこのアプローチであり、この記事について説明します。

このアプローチの経済的実現可能性について議論する価値はないと確信しています。彼女は顔をしています。はい、平均的なWeb開発者よりも多くの知識が必要ですが、それでも、これはサイトです！これは理解できます！これは同じHTML、同じブラウザ、同じJavascriptです。開発者を見つけるのは、「ネイティブ」と言うほど難しくありません。そして、このソリューションのクロスプラットフォームの性質を掛け合わせると、万能薬のように見えることさえあります。もちろん、「ピル」が存在しないことは誰もが知っていますが、場合によってはそれが実際に最良の実践です

したがって、私の仕事は次のとおりでした。Android用のクライアントアプリケーションを開発します。アプリケーションはゲームです。クエスト。ゲームの本質は次のとおりです。面白くリラックスしたい人のグループはチームに分けられます。各チームにはスマートフォンが与えられます。スマートフォンアプリケーション。アプリケーションを開きます。アプリケーションはサーバーに接続し、そこから質問が来ます。チームごとに異なります。質問は、回答オプションを備えた普通の質問のように見えるかもしれません。たとえば、サンクトペテルブルクの街は何歳ですか？工学の城の正面玄関を見つけます。チームが移動し、入り口を見つけ、クリックします。所定の場所に配置され、座標がサーバーに移動します。サーバーからの答えは正しいかどうか。写真に関する質問もあります。たとえば、工学の城を背景に自分の写真を撮ります。合計で、すべての回答が評価され、その結果、チームの1つが勝ち、より多くのポイントを獲得します。要するに、すべて。

ステップ1-プロトタイプ

一般的に、タスクは私たちにとって明確です。参照条件がすでに作成されているとします。他に何？プロトタイプが必要です。ここにあります：

残念ながら、作者は悪意のあるリソースを画像ソースとして示しました。

ステップ2-レイアウト

次のステップ。あなたはそれらを引き出す必要があります。仕事に取り掛かると、次のことがわかりました。

残念ながら、作者は悪意のあるリソースを画像ソースとして示しました。

ステップ3-フレームワークを選択する

実際、それらの2つがあります。

1. Sencha Touch
http://www.sencha.com/products/touch

2. Jquerymobile
http://jquerymobile.com/

Sencha Touchを使用してください。フレームワークはExtJSに似ています。多数のクラス。それらを構成し、構成します-アプリケーションを取得します。 HTML要素にアクセスできますが、フレームワークレベルで要素を管理することは非常に賢明ではありません。大まかに言えば、要素の標準的な視覚表示を変更することは非常に困難です。ただし、サーバーからJSON形式でデータを取得するのは楽しいことです。

そしてその逆。 jquerymobileは要素へのアクセスであり、jqueryによって本質的に強化されています。タグが要素に追加されます。ロード後、これらのタグのフレームワークは要素をスタイルやその他の要素で補完します。しかし、サーバーからのJSONデータと友達を作ることに成功しませんでした。 Jquerymobileは、サーバーからのHTMLコードを予期します。もちろん、JSONを取得し、クライアント側でそれをHTMLコードに変換できます。これはSenchaが実際に行っています。しかし、これは良い習慣ではありません。これは、フレームワークのイデオロギーに反します。解決するのが非常に難しい多くの問題があります。

やめてなぜフレームワークが必要なのですか？実際、これはいわば、既成の要素ベースであり、既成のソリューションです。その目的は、アプリケーション（サイト）をネイティブアプリケーションに視覚的に似たものにすることです。これが必要ですか？いや PhoneGapはどうですか？そして彼は何ですか、彼はあなたが何を使うか気にしません。いいえ制限なし。それでは、通常のサイトのようにアプリケーションを作成して、終わりに対処しましょう！

ステップ4-レイアウト

レイアウトプロセス自体は標準と変わりません。確かに微妙な違いがあるので、それらについて話しましょう。最初のそのようなニュアンスはメタタグです。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

htmlコードのヘッダーにこの行がないと、アプリケーションは通常のサイトとして表示されます。ブラウザはズームしますが、アプリケーションにリアリズムは追加されません。

デスクトップブラウザとは異なり、携帯電話ブラウザ（おそらくすべてではない）は、フォーカスが設定される要素にフレームを追加します。 Google Chromeでは、次のフィールドにデータを入力した時点で、焦点を合わせると同様のフレームがデフォルトで表示されます。同様に扱われます。

 input:focus { outline: 0 none; } textarea:focus { outline: 0 none; } .Button:focus { outline: 0 none; }

そして、最新のニュアンスは位置です：修正されました。そして、普遍的な解決策がないため、これは本当に問題です。すべてはモバイルブラウザー自体にかかっており、そのような機能をサポートしていない、またはサポートしているが、完全にはサポートしていません。また、すべての場合に1つのソリューションでコントロールパネルを修正することもできません。たとえば、バージョン1.1までのjquerymobileは、ブラウザーが位置をサポートしていない場合：固定、エミュレートされたスクロール、および固定要素の位置を動的に変更します。これは一般にリアリズムを与えず、「氷がない」ように見えます。

このリンクには、位置をサポートするモバイルブラウザの説明があります：修正済み
bradfrostweb.com/blog/mobile/fixed-position
また、位置の作業をエミュレートするJavascriptライブラリへのリンクもあります：固定およびスクロールプロセス。残念ながら、それらのどれも満足のいくものとは言えません。

私の特定のケースでは、モバイルプラットフォームはAndroid 2.3としてリストされており、position：fixedをサポートしていますが、カスタムズームは機能しません。これはアプリケーションでは本質的に役に立ちません。ビューポートヘッダーで指定する

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

そして、スタイルを処方する

  .Header { background-color: white; background-image: none; border: none; text-shadow: none; border-bottom: white solid 3px; font-weight: bold; position: fixed; width: 100%; height: 62px; top: 0; left: 0; z-index: 100 }

以上です。

ステップ5-エミュレーター

組版してブラウザやモニターウィンドウを見るのは難しいことは明らかです。 320x480などの解像度のAndroidアプリケーションと、モニターの画面サイズは？エミュレーターが助けになります。最も簡単なエミュレーターは既にブラウザーにあります！ Google Chromeでページをロードし、Ctrl + Shift + Iを押すと、ブラウザーに開発者ツールが表示されます。右下隅に歯車のアイコンがあり、それをクリックします。次に、[上書き]タブを選択します。ここにはエミュレーターがあります。ユーザーエージェントを選択し、[デバイスメトリック]チェックボックスをオンにします。最初の段階ではこれで十分です。

残念ながら、作者は悪意のあるリソースを画像ソースとして示しました。

そして、PhoneGap自体からエミュレーターがあります！ emulate.phonegap.com
リップルと呼ばれます。これは、Google Chromeへの追加という形で提供されます。やった！私たちの機会は劇的に増加しました。アプリケーションでCordovaライブラリを使用してアプリケーションの機能を拡張する場合、たとえば電話カメラやコンパスを使用する場合、Rippleはこれらのプロセスをシミュレートする機会を提供します。

ええと、エミュレーターについて話していたので、Phonegapの指示に従えば、Eclipseと共にインストールされるエミュレーターについては言えません。
docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
このエミュレータは、すでに実際のデバイスのように動作します。このエミュレータで見つかったすべてのエラーは、すべてデバイスで同様に見つかりました。そしてもちろん、このエミュレーターの使用は操作上難しいと言わなければなりません。読み込みに時間がかかる、テキストを入力するのが難しい、など。最後の段階に適しています。アプリケーションが既にリストされている他のすべてのエミュレーターで既に正常に動作している場合。

ステップ6-プログラミング

この記事はプログラマー向けですが、すべてのコードをここに置くのはばかげています。一般的に説明します。 Webアプリケーションのプログラミングは、小さなサイトのプログラミングと本質的に変わりません。ここでは同じメソッドとアプローチですが、Javascriptで実装されています。同じMVC、同じパターン：シングルトン、リンカーなど。

こちらがフロントコントローラーです

 var App = { Init: function() { this.model = new Model(this.url); this.view = new View(); this.controller = new Controller({ model: this.model, view: this.view }); return this; }, Run: function(task, params) { if (typeof task == 'undefined') { this.controller.Login(); } else if (typeof this.controller[task] == 'undefined') { this.controller.Login(); } else { this.controller[task](params); } return this; }, Done: function() { return this; } } $(document).ready(function() { App.Init(); App.Run(); App.Done(); });

* javascriptには魔法のメソッドはありません。 PHPで__callを使用してApp.SomeSome（ '<parameters>'）を呼び出すことができる場合、App.Run（ 'SomeSome'、 '<parameters>'）を記述する必要があります

次にコントローラーの例を示します。

 var Controller = function(params) { this.view = params.view; this.model = params.model; } Controller.prototype = { Login: function() { this.view.Login(); }, LoginSubmit: function() { var that = this, value = this.model.GetLoginFormValue(), errors = this.model.GetLoginFormErrors(); if (errors !== false) { this.view.Login(value, errors); } else { this.model.SendToServer('teamLogin', value, function(err, data) { if (!err) { that.model.SetTeam(data); that.model.ListenServer(data.lastMessageId); that.Welcome(); } else { that.view.ShowPopup('error', data) } }); } }, Welcome: function() { var that = this; this.model.GetWelcomeContent(function(err, data) { if (!err) { that.view.Welcome(data); } else { that.view.ShowPopup('error', data); } }); }

これは小さなモデルの例です

 var Model = function(url) { this.url = url; } Model.prototype = { GetHelpChat: function(callback) { var url = 'helpChat?team='+this.team.teamId+'&hash='+this.team.hash; this.ReciveFromServer(url, function(err, data) { if (err) { callback(true, data); } else { callback(false, data); } }); },

これがビューの例です

 var View = function() { this.page = $('.Page'); } View.prototype = { TaskIndex: function(status, time, tasks) { var num = Util.GetRndNumber(); this.Show( Html.Header( Html.IconPanel(status), Html.TimePanel(time) ), Html.Content( Html.TaskPanel(tasks) ), Html.Footer( Html.ButtonPanelBottom('task') ) ); setInterval(Timer.Total, 1000); setInterval(Timer.Current, 1000); Util.SetScrollToTop(); },

実際、サイトがPHPで作成されている場合と同じです。基本的な原則を除いて、Javascriptは非同期言語であり、コールバックがなければ、そうではありません（もちろん特別なライブラリを使用しない限り）

また、ニュアンス、つまりスマートフォンのカメラでの作業についても説明します。箱から出して、javascriptはこれを行うことができません。 Cordovaライブラリーが助けとなり、PhoneGapが接続を提供します。そして、ここに携帯電話のカメラの操作の説明へのリンクがあります

http://docs.phonegap.com/en/2.2.0/cordova_camera_camera.md.html#Camera

高度なJavascript機能、特にカメラで作業する場合、ほとんどの問題が予想されました。無駄ではありません。私が最初に直面しなければならなかったことは、写真を撮った後、カメラが単に黒い画面を見せ、アプリケーションに戻らなかったことです。判明したように、これはデフォルトで写真が最高品質で撮影され、ファイルが大きかったという事実によるものです。電話自体の電力が低いため、アプリケーションに転送するプロセスにはかなりの時間がかかります。デモコードを変更する必要がありました

 navigator.camera.getPicture(OnSuccess, OnFail, { quality: 75, allowEdit: true, targetWidth: 280, targetHeight: 280, destinationType: destinationType.DATA_URL });

しかし、それだけではありませんでした。 getPictureメソッドはbase64でエンコードされた画像を返しますが、サーバーとクライアント間のデータはJSONPリクエストとして送信されます。
明らかに、GETリクエストを介してこのような量のデータを送信することは不可能です。ところで、サーバーの部分は、PHPで話したかどうかを覚えていません。はい、最善の解決策ではありません。WebSocketを忘れることができます。プロキシも行われません。おそらく、この問題の解決策は最も困難なものの1つでした。そして、解決策は次のとおりでした。時間が経つと標準クラスが拡大し、新しいメソッドが追加されます。そのため、XMLHttpRequestクラスには新しいイベントがあります。標準のonreadystatechangeに加えて、onloadイベントも登場しました。サーバーからの応答のハンドラーが「ハング」し、Content-Typeヘッダーでapplication / x-form-urlencodedを指定すると、ブラウザーはPOSTメソッドを使用してクロスドメインリクエストを行います。これはまさに必要なことです。ここに例があります

 var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function(e) { if (this.readyState == 4) { if (this.status == 200) { var r = JSON.parse(this.responseText); if (r.success) { callback(false, r.data); } else { callback(true, r.message); } } else { that.view.ShowPopupWindow('Error', msg.ERROR_CONNECTION); } } }

それでも、非常に重要なポイント。上記のコードは非同期のように見えますが、クロスドメインリクエストは、どのように実装されていても同期的です。

また、同一生成元ポリシーの問題も発生しました。この問題の解決策はサーバー側にあります。構成ファイルでは、クロスドメインリクエストの許可とエンドの処理が許可されます。

FormData APIも試しました
developer.mozilla.org/en-US/docs/Web/API/FormData?redirectlocale=en-US&redirectslug=Web%2FAPI%2FXMLHttpRequest%2FFormData
しかし、残念ながら、このAPI、携帯電話のブラウザはサポートしていません。

また、携帯電話を操作するための高度な機能が不要な場合は、加速度計、コンパス、カメラ、メディアなどもご注意ください。 cordovaライブラリの接続はオプションです（約300キロバイト）。ちなみに、ジオロケーションはそれなしで利用可能です。

ステップ7-デバッグ

これでアプリケーションの準備ができました。 Rippleエミュレーターで完全に設計および動作しました（エミュレーターに関するセクションを参照）。楽しい部分、つまり電話でのデバッグが始まります。しかし、最初に、Eclipseでエミュレーターでアプリケーションを実行してみてください。エミュレータ上で各アプリケーションが起動する前に、システムはプロジェクトのクリーンアップを要求します。プロジェクト->クリーン。それをすることを忘れないでください。 [実行]をクリックします。

エミュレーターをロードすると、LogCat Eclipseパネルに大量のメッセージが表示されます。発生する最初の質問は私たちのものですか？エラーのみ、特にコンソールのconsole.logにアプリケーションが表示するメッセージを表示するには、フィルターを構成する必要があります。 LogCatパネルの左側には、保存されたフィルターという別のブロックがあります。開くと、フィルタがまだないため、空のリストが表示されます。プラス記号をクリックして、ウィンドウを表示します

残念ながら、作者は悪意のあるリソースを画像ソースとして示しました。

写真のようにLog Tag Webコンソールに入力すると、Log ConsoleにWebアプリケーションからのメッセージが表示されます。

予想どおり、ブラウザーのエミュレーターはEclipseのエミュレーターにはほど遠いです。実際、以前はなかったエラーがありました。

残念ながら、作者は悪意のあるリソースを画像ソースとして示しました。

 JSCallback Error: Request failed with status 0 at :1180915830

エラーの調査を開始します。サーバーからデータを受信すると、明らかにエラーが発生します。このエラーは、ステータス0が近づいていることを示しています。Googleで解決策を探し始めました。
simonmacdonald.blogspot.ru/2011/12/on-third-day-of-phonegapping-getting.html
stackoverflow.com/questions/11230685/phonegap-android-status-0-returned-from-webservice

結論：サーバー応答の処理を続行するには、おそらく正しいステータスとしてステータス0を追加する必要があります。これらのJSCallbackメッセージの場所を探し、3740行目のcordova.jsファイル（cordova-2.1.0.js）で見つけます。

 function startXhr() { // cordova/exec depends on this module, so we can't require cordova/exec on the module level. var exec = require('cordova/exec'), xmlhttp = new XMLHttpRequest(); // Callback function when XMLHttpRequest is ready xmlhttp.onreadystatechange=function(){ if (!xmlhttp) { return; } if (xmlhttp.readyState === 4){ // If callback has JavaScript statement to execute if (xmlhttp.status === 200) { // Need to url decode the response var msg = decodeURIComponent(xmlhttp.responseText); setTimeout(function() { try { var t = eval(msg); } catch (e) { // If we're getting an error here, seeing the message will help in debugging console.log("JSCallback: Message from Server: " + msg); console.log("JSCallback Error: "+e); } }, 1); setTimeout(startXhr, 1); } // If callback ping (used to keep XHR request from timing out) else if (xmlhttp.status === 404) { setTimeout(startXhr, 10); } // 0 == Page is unloading. // 400 == Bad request. // 403 == invalid token. // 503 == server stopped. else { console.log("JSCallback Error: Request failed with status " + xmlhttp.status); exec.setNativeToJsBridgeMode(exec.nativeToJsModes.POLLING); } } };

if (xmlhttp.status === 200)をif (xmlhttp.status === 200 || xmlhttp.status === 0)およびif (xmlhttp.status === 200 || xmlhttp.status === 0) -効果はありません！

さらに、このエラーを1周してどのように過ごしたかはわかりません。何も助けにならないので、私は絶望する準備ができていたとしか言えません。とにかく、コードの一部をコメントアウトすることにしたまで、アプリケーションはクラッシュしました。そして見よ！エラーが消えました！コードの一部を返すと、エラーの原因となったコードの一部が見つかりました。

 var Util = { SetNewHash: function(hash) { /** *     Android 2.3!! */ //location.href = 'http://'+location.host+location.pathname+'#'+hash; },

ハッシュの変更がこのようなエラーにつながった理由は、私には謎のままです。誰かがこの問題について考えているなら-まあ。

ステップ8-実行

電話でアプリケーションを直接起動するには、設定に移動して、[開発]セクションを選択し、[USBデバッグ]の横のボックスをオンにします。次に、EclipseでRUNを押すと、環境は電話機がUSBに接続されていると判断します。これを既に実行し、デバイスでアプリケーションの実行を開始することを望みます。

モバイルWeb開発：HTML5 Androidアプリ