ウェブ上でiOSアプリを書く簡単な方法

みなさんこんにちは。 少し前まで、ガブリエルはゲーム2048をくれました。 これは、ゲームのクローンが元のクローンよりも人気が出る最も驚くべきケースです。 Gabrielの成功の大部分は、オープンソースであり、出来ればMITライセンスです。 2万ポイント以上を獲得したため、結果を友達と共有したかったのですが、スクリーンショットを取得できませんでした。 アプリストアは、ゲームセンターまたはそのような何かを持つクローンの存在を調べました-空です。 そして、なぜだと思いましたか？

今後、アプリケーションとすべての「nishtyak」を作成するのに4日かかりました。 出力は、時々Web上で機能するユニバーサルコードであり、ios / androidに簡単に移植できます。 ただし、順番に見てみましょう。







既に理解しているように、私たちはWebテクノロジーでのネイティブアプリケーションの開発に焦点を当てます。 戦車にいる人にとっては、すべてが非常に簡単に機能します。 プロジェクトは、ネイティブSDKを使用して作成されます。その目的は、WebViewを画面全体に配置して、特定のhtmlを開くことです。 つまり アプリケーション全体が有線のアドレスバーを備えたブラウザになっていることがわかります。 これが良いか悪いかは、長い間議論できます。 ネット上ではこれについて多くのホリバーがあり、一部はhtml5を好み、一部はネイティブコードです。 私はこのように書いていますが、ここでは2048のソースをWebに持っているので、すべてをネイティブobjcに書き換えるのは愚かなことです。 そして、フロントエンド+サーバーでの作業が主なタスクである小さなアプリケーションについて話している場合、再びhtml5を実行できる場合、objcにとっては馬鹿げています。

wunderlistがWebテクノロジーでうまく機能しているとしましょう。 公式のGmailクライアントのように。



メイン職場の私たちのチームは、b2bプロジェクトを行っています。 これらは、最小限の出席で良い黒檀が行われるプロジェクトです。 だから、私たちと一緒に、1日あたりのユニキの最小値。 したがって、テクノロジーで「遊ぶ」ことができます。 IE8の下で一部のタイプセットをしている間、私たちは顧客にfirefoxまたはchromeのみであり、従業員のためにこれらのブラウザを無条件にインストールしたことを伝えました。 したがって、私たちは長い間あらゆる種類のhtml5ピースを使用しており、満足しています。 しかし、そのようなプロジェクトを作成するというアイデアが思い浮かんだとき、私は一般的に以下に説明するほとんどすべての技術を知っていて部分的に適用したという事実にもかかわらず、それがどれほど面白くて新しいかを想像することさえしませんでした。

環境から始めて、テクノロジーを調べてエラーについて議論し、結論を導きましょう。

1.環境。

WebView for mobileの父は間違いなくphoneGapです。 それは不十分に文書化されていません（文書化するものは何ですか？）そして非常に簡単です。 彼は何をしていますか？ Webテクノロジーに基づいてネイティブアプリケーションを作成できる他のフレームワークと同様に、phonegapはネイティブ機能をJSコードにプッシュし、その逆も同様です。 つまり 前に書いたように書き、モバイルデバイスにデザインを適合させ、カメラ、通知、連絡先、SMSなどを操作できるJSコールを用意します。 機能とプラットフォームのリストは、 特別ページにあります 。 Cordovaに基づいて構築されています。

また、 Senchaに目を向けることをお勧めします。彼らはもう少し進んで、JS経由で携帯電話/タブレットのネイティブチップにアクセスするだけでなく、ネイティブUIも提供する機会を与えます。 つまり 1つのアプリケーションを作成すると、AndroidとiOSの両方でネイティブのようになります。 ただし、senchaはextjsです。 コリアンダーと同じように、それに夢中になっている人と、それに耐えられない人がいます）しかし、一般的な理解のために、それを見ることをお勧めします。

また、 コルドバについて詳しく説明したいと思います。 Fongap、これは環境です。 有料サポート、アプリケーションを生成するためのクラウドサービスなどがあります。 Cordovaはプラットフォームです。 直接ネイティブモジュールとJSバインディング。



この場合、上記のいずれも使用しません。 まず、すべてをゼロからやり直したいと思いました。 私にとっては、柔軟性と速度の理想的な比率であるCordovaのみをさらに適用することにしました。 第二に、fongapまたはcordovaの環境をすばやく把握することができませんでした。 煎茶は言うまでもありません。 それらのすべては、埋め込まれたhtmlでアプリケーションを作成することを提案しました。次に、コードが外部サーバー上にあるときの状況を検討します。

なぜ外部サーバーなのか？ アプリストアでモデレートされたとき（通常は1週間かかります）ではなく、バグが見つかったときに更新できるアプリケーションを作成したかったのです。 順番に行きましょう。

1.1 TopCoat

ネットワークには、ネイティブUIを含むモバイルUIを作成するための多くのフレームワークがあります。 Senchaについてはすでに説明しましたが 、 PhoneJS 、 JQ Mobile 、 Intel AFなどにも注目する価値があります。 Googleが教えてくれます）

この場合、私はトップコートを選びました。 私はすでに別のプロジェクトで彼に会っていて、彼が本当に好きでした。 まず、これらはAndroidとiOSの両方で見栄えの良いカスタムUIではありません。 第二に、トップコートは非常にシンプルであるため、柔軟性があります。 Bootstrapの後、グリッドの欠如などを考慮すると、これは少し珍しいことでした。 しかし、あなたはすぐにそれに慣れます）

トップコートには、アイコンのアイコンを持つブランチがありますが、お勧めしません。 Font Awesomeが最高です。

1.2 iScroll

UPD：ユーザーradist2s は 、ネイティブに近いスクロールを実装する必要がある場合、iScroll全体は不要であると提案しました。 ちょうどzayuzatであることがわかります

-webkit-overflow-scrolling: touch;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

確かに、スワイプとスクロールはモバイルソリューションの特徴です。 iScrollは、ネイティブスクロールに非常に近いものを提供します。 IScroll4は、最新のiScroll5ほどネットワーク上で一般的ではありません。 したがって、新しいより高度で不注意。 オフサイトには多くの例があり、一般に、すべてが明確です。

1.3 Zepto

jQueryの置き換え、より高速なセレクター、モバイルアプリケーション向けです。 大規模なプロジェクトでは、膨大な数のプラグインのためjQueryを使用しますが、すぐに必要なのはセレクターだけです）

1.4 ロダッシュ

JS上の単なるヘルパーアドオン。 私たちはしばしばプロジェクトでbackbonejsを使用しますが、lodashは事実上必須です。 まあ、実際には、それはネイティブコードより遅くありません。 時々速くなります。

1.5 モーメント

JSで日付/時刻を操作します。 コメントがなければ、この頭痛のライブラリがなければ、何倍にもなります。



プロジェクトではBackboneを使用しませんでしたが、ここでは非常に要求されています。 繰り返しますが、マッチを保存します。 Backboneは、多かれ少なかれ複雑なアプリケーションで便利で不可欠ですが、ここでは役に立ちません。 少なくともそう思った）

rad-jsに注意するしかありません。これらは、モバイルアプリケーションの開発のために強化されたカスタムバックボーンオブジェクトです。 良いことですが、非常に洗練されています。 また、RADが多くの古いコードを使用していることも残念です。 たとえば、lodashではなく、古いiScrollとアンダーコアにしがみついています。 繰り返しますが、このプロジェクトでは、その使用は不要であるように思われました。

環境を整理しました。 MVCまたは同様のフレームワークはありません。アプリケーションのすべての機能は単純なjsオブジェクトに配置されます。 既製のcssフレームワークと、迅速な開発に必要なJSライブラリのセットがあります。

2.テクノロジー

過去2年間でテクノロジーとブラウザーがどのように成長したかは驚くべきことです。 2年前、私はウェブ技術とネイティブコードのどちらかを選びました。 大規模なプロジェクトでは、ネイティブコードを選択しました。 そしてその瞬間、それは正しい決断でした。 さて、ウェブ上のすべてを書き直して、ウェブをさらに発展させましょう。 しかし、それはすでに残念です。数千行のネイティブobj-cは大丈夫ではありません。 私は現実について沈黙しています。

2.1 LocalStorage

まあ、すべてがクリア、ストレージです。 特にテキスト/ jsオブジェクトに必要なので、5メートル以上。 ミーム/大根で少なくとも一度働いたことのある人は幸せになります。 5メートルでは不十分な場合、たとえば、ネイティブUserDataを介してストラップを作成できます。 オンラインで多くのソリューションがあります。 誰かがキャッシュをファイルにフォールドすることを提案し、誰かがUserDataを介して、誰かがWebSQLをお勧めします。 LocalStorageで十分です。

2.2 AppCache

おそらく、外部コードを使用してアプリケーションを作成しているのは、このテクノロジーのおかげだけです。 繰り返しますが、アプリケーションはローカルのhtmlファイルではなく、リモートサーバーでホストされます。 現時点で携帯電話にインターネットがない場合、外部サイトは開かないのは論理的です。 ここがappCacheが私たちを救う場所です。 この技術に出会わなかったアプリケーションキャッシュについての記事はたくさんあります。ぜひ読んでください。 意味は非常に簡単です。 特別なマニフェストファイルを使用して、キャッシュに配置する必要があるすべてのファイルをブラウザーに通知します。 美しさは、デバイスにインターネットがなくても、キャッシュにあるファイルが機能することです。 アプリケーション内のアプリケーションのロジックは単純です。

クライアントはアプリケーションを初めて起動し、webviewのコンテンツを吸い込み、webviewはアプリケーションをキャッシュします。 さらに、アプリケーションが起動されるたびに、マニフェストファイルの変更がチェックされます。 変更されている場合、キャッシュは完全に上書きされます。 変更がなかった場合、作業は続行されます。 したがって、ユーザーがインターネットを持っていない場合、キャッシュは更新せずに固執します。

したがって、Webテクノロジーに基づいたネイティブアプリケーションだけでなく、サーバーにコードを直接配置することもできます。 必要なものについては、上に書いた-即座のバグ修正と新しいチップの迅速な公開。

2.3 CSS3

そして、もちろん、ウェブキットのすべての機能を無視するのは愚かなことです。 一般に、ウェブ上でモバイルアプリケーションを作成する場合、超近代的でしばしば新しいテクノロジーをサポートする1​​つまたは2つのブラウザー用に作成することを忘れないでください。 つまり flexboxを使用し、アニメーションを自由に使用し、pngfixを忘れることをお勧めします）

このアプリケーションでは、ほとんどすべてのアニメーションはcss3に基づいています。 まず、数キロメートルのJSコードを書くよりも簡単で高速です。 第二に、アニメーション用のWebkitに含めることができるハードウェアアクセラレーションのおかげで、非常に高速に動作します。



おそらくこれで十分です）次に、Xcodeでプロジェクトを準備する必要があります。

すでに述べたように、すべてが非常にシンプルで、UIWebViewのフルスクリーンだけが必要で、それ以上は必要ありません。 JSONKitをプロジェクトに接続しました、なぜなら ソーシャルネットワークとの統合のためのネイティブパーサー+ VK-SDK、Facebook-SDKよりも高速です。 もちろん、ウェブ上で統合を行うことは可能でしたが、魅力のためにvk + facebookのネイティブサポートを作成したかったのです。 iOS SDKの機能を忘れないでください。 つまり Webテクノロジーはクールで強力ですが、ネイティブに実装するのが最適なタスクがあります。 ソーシャルネットワークとの統合は、そのようなタスクの1つです。

残っているのは、htmlコードとアプリケーションとの接続を確立することだけです。 ここでも、すべてが非常に簡単です。 投稿したWebViewは、コントローラーに委任する必要があります。

アプリケーションからWebへのメッセージは非常に単純で、どこからでも取得できます。

 [webView stringByEvaluatingJavaScriptFromString:@"alert(123);"]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Webからアプリケーションへのメッセージは次のように機能します。 適切に設計されたWebViewはすべての遷移を探知し、必要なリンクを作成し、shouldStartLoadWithRequestメソッドでそれらをインターセプトできます。

 <button ontouchend="window.location='vk:auth';"></button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSMutableURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *requestString = [[request URL] absoluteString]; if ([requestString isEqualToString:@"vk:auth"]) { [VKSdk authorize:@[VK_PER_FRIENDS, VK_PER_WALL] revokeAccess:YES forceOAuth:YES inApp:YES display:VK_DISPLAY_IOS]; return NO; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、必要なアドレスを傍受した場合は、NOを返すことを忘れないでください。そうしないと、Webバージョンはまだアドレスvk：authにアクセスしようとします。

それがすべてであり、ハードキャッシュしてオフラインで作業し、ネイティブアプリケーションと通信できるWebフェイスがあります。 幸せには他に何が必要ですか？ ）

将来のエラーと注意事項

次の記事では、外部コードでCordovaを使用する方法について説明します。 間違いなく、間違い＃1はシェルをXcodeで作成する決定でした。 しかし、繰り返しになりますが、タスクは、プロセスの詳細を理解するためにプロセスを研究することでした。 したがって、これはまったく間違いではありません。 参照を除き、シェルの使用はお勧めしません。 他のプロジェクトでは、コルドバほど優れたものはありません。 そして、彼女がプラグインの形でどのように実装できるかを彼女が知らないことすべて。

また、バックボーンを無視するのは間違いでした。 アプリケーションはすでに成長し始めています。バックボーンのようなmvcフレームワークをすぐに使用すれば、さらなる開発ははるかに簡単で理解しやすくなります。

特に、私はNSURLRequestのセットアップに苦労しました。 これは、実際に必要なURLを開くWebViewの要求オブジェクトです。 cachePolicyのパラメーターの1つは、キャッシュポリシーを渡す場所です。 標準のポリシー（ブラウザーのポリシーとほぼ同等）を使用できるとしましょう。たとえば、ヘッダーに関係なく、キャッシュからのみ取得して、要求をまったくキャッシュしないように指示することもできます。 NSURLRequestReloadIgnoringLocalAndRemoteCacheDataフラグについて読んだ後、使用することにしました。 アプリケーションは明らかに動作したので、そのままにしました。 そして、このフラグはios sdk））））では実装されていなかったことが判明しました



ゲーム自体については、モデレートのためにバイナリを送信した時点で、アプリストアには2048のゲームはありませんでしたが、公開時には60を超えるゲームがありました。最初はHTMLコードにモバイルアドセンスを組み込みました。 ただし、出版物自体の前に、私はそれを削除し、アプリケーションに支払いをしました。 これらの60以上のゲームはすべて無料で、内部に広告がありました。 変数を置き換えるカスタムの方法のようなもののようです。 私はこのゲームでお金を稼ぐ仕事をしていませんが、無料でサポートする意味もありません。 競合他社との主な違いは、GameCenterとの統合ではなく、ソーシャルネットワークとの統合です。 個人的には、空白のGameCenterプロフィールよりもVKontakteで友達の中で誰を追い越したかを見るのがおもしろいです。 さて、「ハッカー」をフォローする方が簡単です。なぜなら、 サーバーをベースにします。 ユーザーのグループにとってこのようなことがより面白く、ユーザーがゲームあたり33ルーブルを使うことを気にしない場合は、さらに発展させることができます。 グローバルレーティングを構築するためのアイデアがありました。 たとえば、男性または女性、成人または青年。 モスクワ州立大学またはMGIMOなど このデータはすべてソーシャルネットワークから収集されます。



いずれにせよ、これは単なる「ペンのテスト」です。 さまざまなサイズのアイコンを描画することで獲得したrrのほとんど。 異なるサイズの合計18のアイコン+ 13の開始画面。



UPD： AppStoreでのそのようなアプリケーションの合法性に関して、@ mifkiのコメントを読むことをお勧めします。すべてが彼の言うとおりであれば、アプリケーションはレビューを行うだけでよく、サイドのコードを使用するために削除されません。 しかし、 アラマントラ は 、外部のルアのために彼のアプリケーションが削除されたと主張しています。

また、以前はアプリケーションが外部スクリプトに対して許可されていなかったことがStackOverlowで確認されましたが、セキュリティポリシーが変更され、すべてが正常になりました。