JSON は、Web サイトをモバイル アプリケーションに変える 7 行のコードを実現します

この記事では、Jasonette を使用して Web ビューとネイティブ コンポーネントを統合し、Web サイトをモバイル アプリケーションに変える真の「ハイブリッド」アプリケーションを構築する方法を紹介します。困っている友人は参考にしていただければ幸いです。

Web サイトをモバイル アプリケーションに変えるために必要なのは、上記の 7 行のオレンジ色の JSON コードだけであると言ったら、あなたは信じますか?モバイル アプリと同じ動作を実現するために、フレームワーク API を使用して Web サイトを書き直す必要はまったくありません。すでに既存の Web サイトがある場合は、URL を参照するだけで、それをネイティブ アプリとして「パッケージ化」できます。

これに基づいて、JSON コードの内容をわずかに調整するだけで、すべてのネイティブ API、ネイティブ UI コンポーネント、およびネイティブ ビュー遷移 (ビュー遷移) に直接アクセスできます。

最も単純化された効果の例を以下に示します。

これからわか​​るように、GitHub.com を埋め込みました。 Web ページですが、インターフェイス上の残りのレイアウトは、ナビゲーション バーや下部のタブ バーなどのネイティブ UI コンポーネントです。また、Web サイトを書き換えるために API を使用する必要はなく、ネイティブの切り替え効果を自動的に得ることができます。

具体的な方法を紹介する前に、「見た目はクールですが、ネイティブ アプリケーション フレームワーク内で Web ページを表示する以外に、このテクノロジの重要性は何ですか?

Ask Great!これがこの記事のポイントです。Web ビューとアプリケーションの間にシームレスな双方向通信を作成するだけで、親アプリケーションが Web ビュー内で JavaScript 関数をトリガーできるようになり、Web ビューが JavaScript 関数を呼び出すことができるようになります。ネイティブ API。

例:

## このビューには次のものが含まれることに注意してください:

#ネイティブナビゲーション バー、および組み込みの切り替え機能

• #QR コードを生成できる Web アプリケーションを埋め込む Web ビュー

• #ネイティブを含める下部のテキスト入力コンポーネント

• 上記のすべては、JSON コードのプロパティをわずかに調整することで実現できます。

最後に、「別のコンテンツを入力」を使用することに注意してください。テキスト入力領域に入力すると、それに応じて QR コードが変更されます。入力されたテキストにより、QR コード ジェネレーター Web アプリケーション内の JavaScript 関数がトリガーされ、QR コード画像が再生成されます。開発フレームワークは、「Web ビューとネイティブ アプリケーションをシームレスに統合する」という問題を根本的に解決しようと試みてきました。これらのフレームワークは完全にネイティブ、つまり完全に HTML5 のアプローチに焦点を当てているためです。

モバイルの将来について議論するとき、誰かの意見を聞くたびにアプリの場合、「HTML5 とネイティブのアプローチのどちらが勝つのでしょうか?」というようなことを聞​​くでしょう。 「そのような発言です。

ネイティブと HTML が共存できるとは誰も考えていないようで、両者のコラボレーションと最終的な実現は簡単ではないようです。

この記事では、あなた:

Web エンジンとネイティブ コンポーネントの統合がより良いアプローチであることが多い理由

##HTML とネイティブのシームレスな統合が有効な理由難しいのは、その実装方法です。

• ## さらに重要なのは、このようなテクノロジを使用して独自のアプリケーションを迅速に構築する方法です。

  ## ネイティブ アプリケーションで HTML を使用する理由は何でしょうか。
• ##先に進む前に、まず、この方法が良いか悪いか、また、この方法の使用が適切な場合を考えてみましょう。

1. Web ネイティブ関数の使用

• アプリケーション アプローチでコンテンツの一部を実装するには、Web エンジンを使用する方が適切な場合があります。たとえば、WebSocket はネイティブ Web 関数です。この場合、WebSocket を「エミュレート」するサードパーティ ライブラリをインストールする代わりに、組み込みの Web エンジン (iOS の WKWebView および Android の WebView) を使用する方が適しています。
##追加のコードをインストールする必要はありません。無料のツールを使用する方が良いのではないでしょうか?これは次の理由にもつながります。大きすぎるバイナリ ファイルを避ける

#一部の関数では、巨大なサードパーティ ライブラリの使用が必要になる場合があり、そのような関数をすぐに使用する必要がある場合があります。たとえば、QR コード画像ジェネレーターをネイティブに組み込むためです。場合によっては、バイナリ ファイルのサイズが大きくなるサードパーティ ライブラリのインストールが必要になる場合がありますが、Web ビュー エンジンを使用し、単純な 3. 信頼できるモバイル ライブラリの欠如

一部の最先端のテクノロジでは、当分の間利用できない可能性があります。安定した信頼性の高いモバイル端末実装

はありません。

幸いなことに、これらのテクノロジーのほとんどには Web 実装があるため、最も効率的な統合方法は JavaScript ライブラリを使用することです。

4. 一部がネイティブ、一部が Web ベースのアプリケーションを構築する

多くの初心者開発者は、Web サイトをモバイル アプリケーションに移植したいと考えていますが、 Web サイトの一部が複雑すぎて各モバイル プラットフォームに合わせてすぐに書き直すことができない場合、イライラしたりイライラしたりするのが一般的です。

たとえば、モバイル アプリにすぐに変換できない非常に複雑な Web ページがあるとしますが、サイトの残りの部分は簡単に変換できます。

この状況に直面して、アプリケーションのコンテンツのほとんどが何らかのメソッドを通じてネイティブな方法で構築されている場合、特に複雑なページを HTML の形式でアプリケーションに直接統合するのは非常に簡単ではないでしょうか。 ？ 素晴らしい。

#これはどのようにして達成されるのでしょうか?

A. Jasonette

Jasonette は、マークアップ言語に基づいてクロスプラットフォームのネイティブ アプリケーションを構築するためのオープン ソース メソッドです。

このテクノロジーは Web ブラウザーのように見えますが、HTML マークアップ言語を Web ページに解釈するのではなく、JSON マークアップを iOS および Android 上のネイティブ アプリに解釈します。

すべての Web ブラウザがまったく同じコードを持っていますが、必要に応じてさまざまなタイプの HTML タグを解釈することで、さまざまなタイプの Web アプリケーションをユーザーに提供するのと同じように、すべての Jasonette アプリケーションはまったく同じライブラリを備えており、異なる解釈が可能です。必要に応じて JSON タグの種類を変更し、アプリケーションを作成します。開発者は、コード自体に触れる必要はまったくなく、タグを記述し、コードをリアルタイムでネイティブ アプリケーションに「変換」するだけで、独自のアプリケーションを開発できます。

Jasonette の中心的な役割はネイティブ アプリケーションを構築することですが、この記事の焦点は、HTML をコア ネイティブ エンジンに統合する方法を紹介することです。一緒に見てみましょう。

B. Jasonette Web コンテナ

ネイティブ アプリケーションは優れていますが、それでも Web 機能を使用する必要がある場合があります。

しかし、Web ビューとネイティブ アプリケーションの統合は面倒なプロセスです。シームレスな統合要件:

• Web ビューはネイティブ レイアウトの一部として統合される必要があります。Web ビューはネイティブ レイアウトの一部としてアプリに含まれ、同じで動作する必要があります。他のネイティブ UI コンポーネントと同様に、一貫性が保たれます。そうしないと、見た目が不格好になり、ユーザーが実際に Web サイトにアクセスしているかのように感じてしまいます。

• 親アプリケーションは子 Web コンテナを制御できる: 親アプリケーションは、子 Web ビューを自由に制御できる必要があります。

• 子 Web コンテナは親アプリケーションのネイティブ イベントをトリガーできます。子アプリケーションは、親アプリケーションのイベントをトリガーしてネイティブ API を実行できる必要があります。

これは大変な作業なので、最初のステップから始めましょう。Web コンテナをネイティブ レイアウトに直接埋め込み、バージョン 1 として公開します。

JSON Web コンテナ、JSON 内の HTML がネイティブ アプリケーション コンポーネントになります。

これだけでも非常に実用的ですが、対話できないため、依然として一定の制限があります。

親アプリケーションは子 Web コンテナを制御できず、子コンテナは親アプリケーションにイベント通知を送信できないため、Web コンテナは外部の世界から完全に隔離されます。

C. Jasonette Web コンテナ 2.0: インタラクティブ化

バージョン 1 をリリースした後、Web コンテナにインタラクティブ性を追加するという 2 番目の問題に取り組み始めました。

以下では、以前に作成した静的 Web コンテナにインタラクティブ機能を追加して、より強力にする方法を紹介します。

実装: インタラクティブな Web コンテナ

1. URL による読み込み

質問

以前のバージョン 1 では、Web コンテナを背景ビュー コンポーネントとして使用するには、まず $jason.body.background.type を "html" に設定し、次に $jason を設定する必要がありました。 .body ハードコードされた HTML テキストを .background.text プロパティの下に追加します。例:

一般的に、ユーザーは Web URL を直接使用してインスタンスを作成することを好む傾向があります。 HTML コード全体を 1 行のコードとしてハードコーディングするのではなく、コンテナ化します。

解決策

Web コンテナ 2.0 では url 属性が追加されました。たとえば、ローカル HTML を file:// の形式で埋め込むことができます (ローカル HTML から公開できます)。付随するアプリケーション HTML ファイルの読み込み):

# または、たとえば次のようにリモート http[s]:// URL を埋め込むこともできます (リモート HTML から読み込むことができます)。

2. 親アプリケーションと Web コンテナ間の双方向通信

##問題

以前は、Web コンテナはコンテンツを表示するためにのみ使用でき、操作することはできませんでした。これは、次のすべてが不可能であることを意味します:

Jasonette から Web コンテナーへの通信: Jasonette から Web コンテナー内の JavaScript 関数を呼び出します。

• Web コンテナから Jasonette への通信: Web コンテナ コード内からネイティブ API を呼び出します。

現時点では、Web コンテナのコンテンツのみを表示できます。これは Web ページに埋め込まれた iframe のようなもので、iframe 内のコンテンツにはメイン ページからはまったくアクセスできません。

解決策:

Jasonette の最大の目標は、クロスプラットフォームのモバイル アプリケーションを記述できる標準化されたマークアップ言語を設計することです。したがって、親アプリケーションと子 Web コンテナ間の双方向通信を包括的に記述できるマークアップ言語が必要です。

これを行うために、親アプリケーションと子 Web コンテナーの間で JSON-RPC ベースの通信パイプラインを使用します。 Jasonette ではすべてが JSON オブジェクトを通じて表現されるため、通信プロトコルとして JSON-RPC 標準形式を使用するのは非常に自然で合理的な方法になります。

JavaScript 関数が Web コンテナを呼び出すには、$agent.request という名前の操作を宣言する必要があります:

$agent.request は、JSON-RPC リクエストをトリガーして Web コンテナに送信するネイティブ API です。 API を使用するには、オプション オブジェクトをパラメータとして渡す必要があります。

オプション オブジェクトは、実際には Web コンテナに送信される JSON-RPC リクエストです。各属性の意味は次のとおりです。

• id: Web コンテナは、エージェントと呼ばれる基礎となるアーキテクチャ上に構築されており、一般に、複数のエージェントを使用できます。独自の一意のIDを持ちます。ただし、Web コンテナは特別なタイプのエージェントであり、ID として $webcontainer のみを使用できるため、ここでは ID を使用する必要があります。

• method: 呼び出される JavaScript 関数の名前。

• params: JavaScript 関数に渡されるパラメータの配列。

したがって、全体的に見ると、使用されるタグは次のようになります。

このタグの文字列は、実際には次のようになります。発言:

ビューがロードされるとき ($jason.head.actions.$load)、JSON-RPC リクエスト ($agent.request) を Web コンテナ エージェントに送信します。特定のリクエストはオプションで指定されます。の。

Web コンテナは $jason.body.background で定義されており、file://index.html という名前のローカル ファイルがロードされます。

次に、login という名前の JavaScript 関数を見つけて、params の下に 2 つのパラメータ (「alice」と「1234」) を渡します。

上記は、親アプリケーションが子 Web コンテナの JavaScript 関数呼び出しをトリガーする方法を説明しています。また、その逆を実行して、Web コンテナにネイティブをトリガーさせることもできます。親アプリケーションの API。

詳細については、エージェントのドキュメントを参照してください。

エージェントのドキュメント: https://docs.jasonette.com/agents/

Example
引き続き上記の概要に戻りますQR コード ジェネレーターの例:

• 下部のテキスト入力コンポーネントは 100% ネイティブです。

• QR コードは、Web アプリケーションとして実行される Web コンテナによって生成されます。

• ユーザーがコンテンツを入力して「生成」を押すと、Web コンテナ Agent 内の $agent.request オペレーションが呼び出され、その後 JavaScript 関数「qr」が呼び出されます。

具体的な例については、
https://github.com/Jasonette/Jasonpedia/blob/gh-pages/webcontainer/agent/fn/index.json を参照してください。

3. スクリプト インジェクション

問題

最初の HTML を完成させる必要がある場合があります。 Web コンテナへのロード 最後に、JavaScript コードが Web コンテナに動的に挿入されます。

カスタム Web ブラウザ アプリケーションを構築するとします。独自のカスタム JavaScript を各 Web ビューに挿入して、Web ブラウザの動作に似た Web ビューの動作をカスタマイズしたい場合があります。拡大。

Web ブラウザを構築する必要がない場合でも、コンテンツが当社によって制御されていない URL に対してカスタム動作を実装する場合は、スクリプト インジェクションを使用する必要があります。ネイティブ アプリケーションと Web コンテナは、$agent API を介してのみ通信できますが、HTML コンテンツを変更できない場合、$agent インターフェイスは動的インジェクションを通じてのみ Web コンテナに追加できます。

解決策

前述したように、Web コンテナ $jason.body.background もエージェントです。つまり、通常のエージェントとまったく同じように使用できます。 $agent.inject メソッド。

4. URL クリックの処理

以前は、Web コンテナは次の 2 つの方法でのみリンク クリック操作を処理できました。

• 読み取り専用: Web コンテナを読み取り専用として扱い、すべてを無視します。タッチイベントやスクロールイベントなど。現時点では、以下で説明するように、通常のブラウザのように動作するように明示的に指示されない限り、すべての Web コンテナは読み取り専用です。

• 通常のブラウザの動作: 通常のブラウザと同様に、ユーザーはページを操作できます。これには宣言が必要で、アクション属性として "type": "$default" を設定します。

問題

どちらも「全か無か」の解決策です。

• 「読み取り専用」の場合、Web コンテナはすべてのユーザー操作を無視します。

• 「通常のブラウザの動作」の場合、Web コンテナはブラウザと一貫した動作をします。リンクをクリックすると、ページが更新されて通常の Web ページと同様にリンクのコンテンツが表示されますが、クリックをハイジャックして他のネイティブ API を呼び出すことはできません。

解決策

新しい Web コンテナを使用すると、任意のアクションを $jason.body.background Web コンテナに関連付けることができます。リンクのクリックなどのイベントを処理します。

例を見てみましょう:

ここでは「トリガー」を追加します。これは、ユーザーが Web コンテナ内のリンクをクリックすると、Web ビューによって直接処理されるのではなく、displayBanner 操作がトリガーされることを意味します。

さらに、displayBanner オペレーションを見ると、変数 $jason がここに表示されていることがわかります。この例では、クリックされたリンクは $jason 変数を介して渡されます。たとえば、「https://google.com」という URL をクリックすると、$jason は次の値を取得します:

これは、確認できることを意味します。 $jason.url の値により、さまざまなアクションが選択的にトリガーされます。

別の例として、カスタム Web ブラウザの実装を見てみましょう:

URL に文字列サインインが含まれているかどうかを確認します。 、結果に基づいて 2 つの異なる操作を実行します。

• #サインインが含まれている場合は、新しいビューを開いて、ログイン操作をネイティブに完了します。

• サインインが含まれていない場合、"type": "$default" 操作が直接実行され、通常のブラウザーと同様の動作が実現されます。

#使用デモ

カスタム Web ブラウザの構築

新しいバージョンの Web コンテナの次の機能を利用することで、興味深い操作を実現できます。

• url 属性による自己読み込みを実現し、完全なコンテナとして機能します。注目のブラウザ。

• さまざまな URL に基づいてリンクのクリック操作を選択的に処理します。

数十行の JSON コードを使用してカスタム Web ブラウザを構築することもできます。すべてのリンクのクリックがハイジャックされる可能性があるため、$jason.url をチェックし、結果に基づいて必要なアクションを実行できます。

たとえば、次の例です。

##上の図からわかるように、クリック後の動作は、リンクは通常の閲覧とは異なります。 デバイスは同じです ("type": "$default")。

下の図からわかるように、リンクをクリックすると、ネイティブな方法で別の JASON ビューに切り替えることができます。

これらはすべて、$jason.url の値に基づいて選択的にトリガーできます。

ステップ 1: visit という名前の操作を Web コンテナーにアタッチします:

ステップ 2: $jason.url の値に基づいて実行します。 visit 内の関連操作

次のコードでは、$jason.url が、latest、show、ask などのコンテンツ (すべてのトップレベルのメニュー項目リンク) と一致するかどうかを確認します。一致する場合、"type": "$default" を設定すると、Web コンテナーは通常のブラウザーのように動作します。

モードが一致しない場合は、ネイティブ $href 変換を通じて新しいビューを開き、クリックされたリンクをパラメーターとして渡すことができます。

この Web ブラウザの完全な JSON マークアップを参照してください (わずか 48 行!):

https://github.com/Jasonette / Jasonpedia/blob/gh-pages/webcontainer/agent/hijack.json

「ハイブリッド」アプリケーションを瞬時に構築する

「ハイブリッド」アプリケーションについて話すとき、主にネイティブ アプリケーション フレームワーク内にカプセル化された HTML Web アプリケーションを指します。

しかし、これはここで言及されているアプリケーションではありません。ここでのいわゆる「ハイブリッド」とは、真のハイブリッド アプリケーション、つまり、複数のネイティブ ビューと複数の Web ベース ビューを同時に含めることができるアプリケーションを指します。この種のアプリケーションでは、ビューに複数のネイティブ UI コンポーネントと、同じネイティブ レイアウトでレンダリングされた Web コンテナーを含めることができます。

Web ビューとネイティブ ビューの織り交ぜは可能な限りシームレスであり、ユーザーがまったく区別できないようにする必要があります。

#この例では、jasonbase.com のコンテンツを Web コンテナーに表示し、それをホームページ ビューとして使用するアプリを作成しました。

Jasonbase は、私が開発した無料の JSON ホスティング サービスで、Jasonette アプリケーションで使用される JSON マークアップを簡単にホストできるようにします。

もちろん、これはそれ自体が Web サイトですが、リンクをクリックした後に Web ページを開く代わりに、ネイティブ $href 変換を通じてネイティブ JASON ビューが表示されるように、これを Jasonette に埋め込みました。

Jasonbase.com のコードに一切触れずにこのアプリケーションを構築できます。

Web サイトを Web コンテナとして Jasonette に埋め込み、リンクのクリック操作のネイティブ処理をハイジャックするだけで、ネイティブ API のトリガーやネイティブ アプリケーションの実行など、ネイティブ アプリケーションのさまざまな機能を実現できます。変換。

完全なコードはここにあります: https://github.com/Jasonette/Jasonpedia/blob/gh-pages/webcontainer/agent/hybrid.json

# #結論

私の意見では、これが素晴らしいのは、すべてがフレームワーク レベルで適切に処理されることです。最も困難な作業はすべて舞台裏で行われます。

#アプリ開発者は、次のことを最初から実装するために時間と労力を無駄にする必要はありません:

#Web ビューをネイティブ レイアウトに埋め込む

• アプリケーションが Web ビューで関数を呼び出せるように JavaScript ブリッジを作成します

• Web ビューがネイティブ イベントをトリガーできるようにネイティブ イベント処理アーキテクチャを作成します親アプリケーションの

• ソリューション全体で、以下で構成される抽象化が作成されます。

宣言型マークアップ言語: 埋め込み方法を記述するために使用されます。 Web ビューのネイティブ アプリケーション。

• 通信プロトコル (JSON-RPC): アプリケーションとその子 Web ビュー間の非常に単純な通信用。

• この方法ですべての問題が解決できるとは思いませんが、私自身の使用例から判断すると、控えめに言っても良い解決策だと思います。

私は非常に最先端のテクノロジーを使用してアプリケーションを構築しようとしていますが、最先端のテクノロジーであるため、モバイル側には安定した信頼性の高い実装がありません (プロトコルの性質上、実装が明確ではありません)。最終的にモバイル版が存在するかどうか）達成）。幸いなことに、これらのテクノロジーは JavaScript で実装されているため、アプリケーションへの統合は簡単かつ簡単です。

全体的に、このテクニックは素晴らしく、これまでの結果に非常に満足しています。最新バージョンのドキュメントにはすでにすべての新機能が含まれており、誰でも詳しく調べて試してみることができます。

声明: 能力が大きければ大きいほど、負わなければならない責任も大きくなります

最後に言いたいのは、この新しいテクノロジーは確かに非常に強力ですが、私はアプリケーションを開発するときは、ユーザー エクスペリエンスの観点から、より包括的なトレードオフを行う必要があります。

このテクノロジーを使用して、完全に Web ビューで構成されるアプリケーションを構築する人もいるかもしれませんが、最終的には、アプリケーションは実際には単なる Web サイトであり、専用アプリケーションを開発するという本来の目的に反しています。

強調しておきたいのは、すべてのアプリに HTML コンポーネントとネイティブ コンポーネントの両方を含めるべきではないと私は考えているということです。このアプローチは、特定の状況に直面している多くの人にとってより役立つと思いますが、行き過ぎないように注意してください。

概要: 上記がこの記事の全内容です。コードは非常に簡単なので、試してみてください。皆様の学習にお役に立てれば幸いです。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアル

、

jQuery ビデオ チュートリアル、bootstrap チュートリアルをご覧ください。

以上がJSON は、Web サイトをモバイル アプリケーションに変える 7 行のコードを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。