Android
 Computer >> コンピューター >  >> システム >> Android

iOSとAndroidでクロスオリジン通信ブリッジを構築する方法

ある業務プロジェクトで、それぞれ異なるロジックとプログラミング言語を持つ複数のコンポーネントをメッセージで連携させる必要がありました。この経験から、さまざまなプラットフォームがどのように相互通信を実現しているのか、その方法をすべて理解したいと思うようになりました。

本記事の目的は、こうしたクロスオリジン通信ブリッジの仕組みを解説し、シンプルでありながら実用的なサンプルコードを通じて、その実現方法を紹介することです。

なお、記事中には「橋」にちなんだダジャレが多数登場します。
あらかじめご了承ください。

すぐにコードに触れたいという方は、記事の最後にGitHubリポジトリへのリンクを掲載していますので、そちらをご活用ください。

通常、あなたが書いたJavaScriptはブラウザ内で動作します。iOSではUIWebViewまたはWKWebView、AndroidではWebViewがそれに該当します。

iOSの方が扱いにくい場面の多いプラットフォームであるため、まずはiOS側の通信ブリッジから説明していきます。

ロンドン橋落ちる(iOS編)

iOS 8以降、AppleはUIWebViewの代わりにWKWebViewの使用を推奨しています。そのため、ここではWKWebViewにおけるブリッジのみを取り上げます。

WKWebViewからJavaScriptへメッセージを送信するには、次のメソッドを使用します。

- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^)(id, NSError *error))completionHandler;

一方、WKWebView内のJavaScriptからのメッセージを受信するには、以下の手順が必要です。

  1. WKWebViewConfigurationのインスタンスを作成する
  2. WKUserContentControllerのインスタンスを作成する
  3. 設定にスクリプトメッセージハンドラを追加する(ここがブリッジの要となる部分です)。この操作により、メッセージハンドラが window.webkit.messageHandlers.MSG_HANDLER_NAME というパスでwindowオブジェクトに登録されます
  4. ファイルの先頭に <WKScriptMessageHandler> を追加し、クラスにメッセージハンドラプロトコルを実装させる
  5. userContentController:didReceiveScriptMessage を実装する(このメソッドがJavaScriptからのメッセージ受信を処理します)

ブリッジを架けてみよう

例として、次のようなHTMLページを用意したとしましょう。

<html>
  <head>
    <title>Javascript-iOS Communication</title>
  </head>
  <body>
    <script>
      window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");
    </script>
  </body>
</html>

そして、ネイティブ側のコードでは、前述の手順を次のように実装します。

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

// 手順4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

これで完成です!JavaScriptとiOS間の完全な双方向通信が実現しました!

写真:Todd Diemer(Unsplash)

橋を渡る(Android編)

Androidの場合は、はるかにシンプルで扱いやすいのが特徴です。通信ブリッジを構築するために必要な手順は、わずか数ステップだけです。

  1. WebViewオブジェクトのインスタンスを作成する
  2. このWebView内でJavaScriptを有効にする(setJavaScriptEnabled)
  3. 独自のJavaScriptインターフェースを設定する(JavaScriptから見えるメソッドをここに定義します)
  4. JavaScriptに公開したいメソッドには、宣言の前に必ず @JavascriptInterface アノテーションを付ける

先ほどと同様に、次のようなHTMLファイルを作成したと仮定します。

さらに、以下のようなシンプルなAndroidアプリケーションを作成します。

これで完了です!

もうあなたは「ネイティブ通信の達人」と呼べる存在になっているでしょう!

リポジトリへのリンクはこちらです。

  • AndroidtoJS リポジトリ
  • iOStoJS リポジトリ

⚠️ iOSに関する重要な注意点 ⚠️

WKWebViewを破棄する段階になったら、スクリプトメッセージハンドラを必ず削除してください。これは極めて重要なポイントです。削除せずに放置すると、スクリプトメッセージハンドラがWKWebViewへの参照を保持し続け、新しいWKWebViewを作成するたびにメモリリークが発生してしまいます。

  1. Googleマップの音声ナビを変更する方法【Android・iOS対応】

    「風と波は、常に最も優れた航海者の味方となる」〜エドワード・ギボン まさにその通りですね。正しいナビゲーションがなければ、誰でも少し不安になってしまうものです。どんな旅に出るにしても、目的地へスムーズにたどり着くためには、効果的なナビゲーションの計画が欠かせません。友人とのロードトリップでも、渋滞を避けるための日々の通勤ルートの確認でも、ナビアプリは私たちの生活において重要な役割を果たしています。道標ごとに車を止めて住所を確認したり、見慣れない道で迷ったりしていた時代は、もう過ぎ去りました。テクノロジーは本当に長い道のりを歩んできたのです。 認めるかどうかは別として、ナビアプリと聞いて最初に

  2. AndroidとiOSでGmailのダークモードを有効にする方法【完全ガイド】

    近年、ダークモードへの関心が高まっており、多くのアプリが個別にダークモード対応を進めています。そんな中、最新のAndroid 10（Android Q）やAppleのiOS 13も、ダークモードテーマを正式に採用しました。 OS全体にダークモードを適用することは可能ですが、Gmailを含む一部のアプリでは手動での設定が必要です。Gmailのダークモードは、新OSの登場以来、iOSとAndroidの両ユーザーが最も待ち望んでいた機能の一つでした。Googleは最近、Android 10およびiOS 13向けにダークモードの提供を開始しており、数週間以内にすべてのユーザーが利用できるようになります