WebエンジニアにとってのIoT ~Physical Webが拓く未来~

第5回(最終回) Physical Webの応用と課題

この記事を読むのに必要な時間:およそ 4.5 分

第1回で技術の概要と展望を,第2回第3回で要素技術について,第4回で競合技術との差別化ポイントなどを解説させていただきました。それらの内容を踏まえたうえで最後となる今回は,さらなる応用の可能性と,それに伴う課題を挙げていきたいと思います。

応用を考えるにあたり,この技術の重要なポイントとなるのは次の2点です。

  • リアルワールドに情報やサービスのフックを増やしていく
  • そしてその情報やサービスは,URIから始まる

1. 情報発信のフックをどこにしかけられるか

これまでも少し触れてはいますが,UriBeaconとして振る舞うのは,典型的な独立可動タイプの小型ビーコンでなくても良いわけです。BLEチップさえ組み込んであれば機能は満たせるので,商業施設におけるマシン,デジタルサイネージ,家電などにも組み込んでいくことが可能です。

ビーコンというと,商業施設などの「場所」に特化した情報に意識が行ってしまいがちですが,第1回でも書いたとおり,ネームプレートやスマートフォンがその持ち主の情報を発信していても良いわけですし,家電製品が自身の「取扱説明書」のURLを発信しても良いでしょう。

どんなところに情報のフックを差し込むと便利か,自分の生活の中で改めて探してみると面白いかもしれません。

2. URLから始まるサービス

そして,受け取ったURIからサービスを開始するのですが,このURIは,まずはメタデータ,そしてコンテンツそれ自体の取得のために,2つのステップで利用されるのでした。

この2つのフェーズでもどのような応用が可能かを考えてみましょう。

2.1 メタデータ

メタデータとして有名な一例はOGPであり,実際に現在のリゾルバのサンプルでもそれは利用されているのでした。詳しくは第3回をご参照ください。

今回はOGP以外の別のメタデータ仕様を利用して,さらに利便性を向上できないか考えてみましょう。

Deep Linkを使った応用例

例えばDeep Linkはどうでしょうか。

Deep Linkは,モバイルアプリのための連動技術です。

GoogleはApp Indexing,FacebookはAppLinks,と言ったように様々な事業者が提唱しているDeep Linkのための仕様が存在します。より詳しくはそれぞれの詳細ページを参照されると良いでしょう。

今回はAppLinksを使ってみることにします。 まずHTML内に決められたmetaタグで必要な情報を埋めます。

<head>
    <meta property="al:ios:url" content="applinks://docs" />
    <meta property="al:ios:app_store_id" content="12345" />
    <meta property="al:ios:app_name" content="App Links" />
    <meta property="al:android:url" content="applinks://docs" />
    <meta property="al:android:app_name" content="App Links" />
    <meta property="al:android:package" content="org.applinks" />
    <meta property="al:web:url"
          content="http://applinks.org/documentation" />
</head>

プロパティ名を見るだけでもそれぞれが何を表しているのかわかるのではないのでしょうか。

このように,AppLinksではそれぞれのモバイルプラットフォームにおけるアプリ起動のための独自スキームURLや,ストア上で表示するためのアプリIDなどをHTML内にあらかじめ埋め込んでおくことで,このサイトに関連するアプリがそのプラットフォーム上に存在した場合に,それと連動させるための情報として利用することが出来ます。

MetaData ResolverがこのHTMLを回収した際に,これらのデータをパースし,第3回で紹介したJSON-LDによる拡張パートとして埋め込みます注1)⁠

注1)
この機能はもちろん公式サンプルのリゾルバにない機能ですので,自分でリゾルバを開発するか,サンプルを改修する必要があります。

あるいは最初からHTMLの中に次のように独自定義したJSON-LDとして埋め込んでおいても良いかもしれません注2)⁠

注2)
こちらであれば公式サンプルでも可能です。
<head>
  <script type="application/ld+json">
  {
      "@context": "http://example.org",
      "@type": "AppLinks",
      "android": [
          {
              "@type": "Android",
              "app_name": "App Links",
              "package": "org.applinks"
          }
      ],
      "ios": [
          {
              "@type": "iOS",
              "app_name": "App Links",
              "app_store_id": "12345",
              "url": "applinks://docs"
          }
      ],
      "web": {
          "@type": "Web",
          "url": "http://applinks.org/documentation"
      }
  }
  </script>
</head>

そうすると,リゾルバは次のようにMetadataを返します。

図1 リゾルバが返すMetadata

図1 リゾルバが返すMetadata

具体的なパケットの中身は次のようなJSONになるでしょう。

{"metadata":[
  {
    "id":"http://goo.gl/ZtHt41",
    "title":"Docs – App Links",
    "url":"http://applinks.org/documentation",
    "icon":"http://applinks.org/wp-content/themes/applinks/library/img/structure/favicon.png",
    "description":"",
    "json-ld":[
      {
        "@context": "http://example.org",
        "@type": "AppLinks",
        "android": [
            {
                "@type": "Android",
                "app_name": "App Links",
                "package": "org.applinks"
            }
        ],
        "ios": [
            {
                "@type": "iOS",
                "app_name": "App Links",
                "app_store_id": "12345",
                "url": "applinks://docs"
            }
        ],
        "web": {
            "@type": "Web",
            "url": "http://applinks.org/documentation"
        }
      }
    ]
  }
]}

スマートフォン側では,このレスポンスをチェックし,該当するネイティブアプリがあれば処理を移行したり,あるいはそのアプリがインストールされていなければ,そのプラットフォームにおけるストアの該当ページへ飛ばしたりするということが出来るようになるでしょう。

図2 該当のネイティブアプリがインストールされていれば,⁠アプリで開く」ボタンを用意,独自スキームを利用して処理の移譲

図2 該当のネイティブアプリがインストールされていれば,「アプリで開く」ボタンを用意,独自スキームを利用して処理の移譲

図3 該当のネイティブアプリがインストールされていなければ「ストアで開く」ボタンを用意

図3 該当のネイティブアプリがインストールされていなければ「ストアで開く」ボタンを用意

ビーコン→URI→Webサービスで完結するフローも魅力的ではありますが,コンテンツの種類によってはNativeアプリのほうが相性が良い場合もあるでしょう。Deep Linkによってその溝を埋めることも可能になります。

このように,メタデータを使ってサービスを向上させることが可能です。今回はDeep Linkによる例を見てみましたが,他にどんなメタデータがあると便利なのか,是非考えてみてください。

著者プロフィール

加藤亮(かとうりょう)

ソフトウェアエンジニア。

比較的プロトコルとフロントエンド寄り。

2014年7月よりリクルートテクノロジーズアドバンスドテクノロジーラボ所属。

コメント

コメントの記入