その後のその後

iOSエンジニア堤修一のブログ github.com/shu223

トップ>iOS>Web コンテンツ内にネイティブ iOS アプリを埋め込めるサービス『app.io』の使い方

この広告は、90日以上更新していないブログに表示しています。

2013-08-17

Web コンテンツ内にネイティブ iOS アプリを埋め込めるサービス『app.io』の使い方

app.io は、『ブラウザ内でネイティブ iOS アプリを動かせるようにする』サービスです。

イメージとしてはiOSシミュレータをそのままWebコンテンツに埋め込める と考えるとわかりやすいかもしれません。タップ等のインタラクションが効いて、もちろん通信もします。アプリのランディングページや、ブログの紹介記事に埋め込んだりすると良さそうです。

で、「導入にはさぞ複雑な手順が。。」と思いきや、実際にアプリを動作させるまでの手順はめちゃくちゃ簡単です。ファイルを1つアップするだけ。 以下で具体的に説明します。

導入手順

1. アプリをビルド

いつもの普通のビルドです。Xcode でターゲットとして「シミュレータ」を選択 し、ビルドします。

2. .appファイルをアップロード

"Upload Your App" から、

下記パスにある .app ファイルをzip で固めて アップロードします。

~/Library/Developer/Xcode/DerivedData/{アプリ名}/Build/Products/Debug-iphonesimulator/

以上！

Webコンテンツに埋め込む

左側のメニューにある "Embed" を選択すると、iFrame を使った埋め込みコードが生成されます。

アプリの向きも選択できます。

ちなみにこんなコード。

<iframesrc="https://app.io/XXXX?orientation=portrait&device=iphone5"height="607px"width="291px"frameborder="0" allowtransparency="true"scrolling="no"></iframe>

しくみ（憶測）

実際に試してみて、

アップするファイル（パッケージ）は .app だけ
ブラウザに表示される初期画面はアプリ固有のものではなく、タップするとロードが始まり、アプリが起動する
画質が低い

といった挙動を鑑みるに、.app を app.io のサーバ側にあるiOSシミュレータ上で動作させ、画面の情報を一定フレームレートでブラウザ側に送る というしくみになっていると思われます。

弱点

使ってみて気付いた中で最大の弱点は、

『設定』アプリにアクセスできない

という点です。ホームボタンを押すとアプリが終了するだけで、ホーム画面等にはアクセスできません。

そんなわけで、Social.framework, Accounts.framework を使用して Facebook や Twitter と連携するアプリ等、『設定』アプリでの設定がコア機能の前提となるアプリには不向きです。

無料でできること

無料ユーザーは、登録アプリは1つだけ、5000Play／月、シェアと埋め込みが可能です。

ちゃんと売りたいアプリのデモとして考えると、1ヶ月に5000回しかplayしてもらえないのは少ないような、でもPVじゃなくて動画の再生回数とかの水準で考えると（※）まずはこれぐらいでも良さそうな、微妙なラインですが、とにかく試すだけなら無料で十分かと思います。

（※）埋め込んだページを表示しただけではアプリの起動は開始されないので、PV = play回数ではない

Xcode プラグイン

app.io は Xcode のプラグインも提供しています。

.app をアップするだけ、という使い方があまりにも簡単だったのでプラグインの方は試してないのですが、上記画像から、Xcode に app.io にアップロードするメニューが加わる、というもののようです。

サービスを使いやすくするための補助ツールとしてオフィシャルに Xcode プラグインを提供する というのはあまり他サービスで見たことがなかったのでおもしろいと思いました。

アプリにパラメータを渡す

生成したアプリのURLにパラメータを渡すことで、ローカライズ 、位置情報の指定 、NSUserDefaults に値を渡す 、といったことも可能です。

http://docs.app.io/parameters/

ローカライズ

Thelanguage parameter lets you specify a ISO-639-1 language code for your app, if it has been localized. Defaults toen. For more information on language codes and what they correspond to, please see thisWikipedia entry
.

Options:en,fr,de,ja,nl,it,es,pt,pt-PT,da,fi,nb,sv,ko,zh-Hans,zh-Hant,ru,pl,tr,uk,ar,hr,cs,el,he,ro,sk,th,id,ms,en-GB,ca,hu,vi

Example Usage:https://app.io/example?language=ja

位置情報の指定

Thelocation parameter lets you specify the latitude and longitude provided to the app for geolocation purposes. Specify latitude and longitude in decimal format as a comma-separated string. Defaults to37.7859,-122.406509.

Example Usage:https://app.io/example?location=37.82,144.9832

NSUserDefaults に値を渡す

Theparams parameter lets you specify a JSON dictionary of key/value information to be provided to the app in the form of user defaults. These values will be loaded intoNSUserDefaults on app launch and will be available for use by calling[[NSUserDefaults standardUserDefaults] objectForKey:key] in your app. This is particularly useful for tracking App.io sessions with analytics libraries, or automatically logging in users and loading content. For more information onNSUserDefaults, see thedocumentation.

Important: This parameter must be specified as a URI-encoded JSON string. This is commonly done using the JavaScriptencodeURIComponent function. ThisJSFiddle can help you format your JSON correctly.

Options: A URI-encoded JSON dictionary.

Example Usage:https://app.io/example?params=%7B"foo"%3A"bar"%7D