【iPhone/iPad】ホームに置いたWebアイコンからSafari以外のアプリを開かせるJavaScriptを作りました

こんにちは！林です。

今回は、iPhone アプリ開発者 / ウェブ開発者向けの記事です。
みなさんは、iPhone の Safari にある「ホーム画面に追加」という機能をご存知でしょうか。

以下の図のように見ているウェブページを、ホーム画面にアプリのように置くことができる機能です。

ホームに置かれたアイコンをタップすると、Safari が起動し、そのウェブページを閲覧できる仕組みになっています。
頻繁に使うページをホームに置いておくと大変便利です。

この機能を利用して、
アイコンから任意のアプリ(※1) を起動する JavaScript
を作成しました。
※1 URI スキームに対応しているアプリのみ対応しています。

使い方

設置方法は </head> の直前に１行、スクリプトタグを追加するだけです。
※ デフォルトでは、Sleipnir Mobile で開くようになっています。

 
<script type="text/javascript" src="http://www.bearfactory.jp/labs/js/iphone-openapps.js"></script>

オプション

HTML5 で追加された data 属性をオプション項目として利用することで Sleipnir Mobile 以外のアプリやアドレスを設定することができます。
以下、オプションの使用例です。

 
<script data-openapps-scheme="hatenabookmark" data-openapps-uri="http://www.sleipnirstart.com/" type="text/javascript" src="http://www.bearfactory.jp/labs/js/iphone-openapps.js"></script>

 
<script data-openapps-schemeuri="ghttp://www.sleipnirstart.com/" type="text/javascript" src="http://www.bearfactory.jp/labs/js/iphone-openapps.js"></script>

1. data-openapps-scheme : アプリを開くための URI スキームを入力する。
   2と組み合わせ可。
   指定しない場合の値 : sleipnir
   （例：ghttp、hatenabookmark、sleipnir）
2. data-openapps-uri : アプリを開くときに任意のURIを指定する。
   1と組み合わせ可。
   指定しない場合の値 : そのページの URI
   （例：http://www.sleipnirstart.com/）
3. data-openapps-schemeuri : 開く URI を全て指定する。
   こちらは、1,2と併用はできません。指定している場合優先されます。
   指定しない場合の値 : なし
   （例：ghttp://www.sleipnirstart.com/）

まとめ

使い方は以上となります。設置するだけならば、Sleipnir Mobile で開くようになります。
このページにもそのスクリプトを追加していますので、iPhone でホーム画面に追加していただければ、Sleipnir Mobile で開くことを確認できます。（ページ自体が大きいため切り替わるまで時間がかかります。シンプルなページだと一瞬です。）

スクリプトが実行している処理の流れは、
アイコンをタップする → Safari を起動する → Safari が外部アプリを勝手に起動する
です。
こちらのスクリプトを利用することで、サイト内のどこからホームへ追加しても、トップを開くようにするなど応用を利かすことができます。
アプリ間連携とはまた違った利用シーンがあるかもしれませんね。何かのお役に立てればと思います。
以下にソースコードを公開していますのでご自由に扱っていただければと思います。

ソースコード（二次配布・改変は自由です）

// JavaScript Document
(function(){
	var openAppFunc = function(){
		var scrObj = document.getElementsByTagName("script");
		var uriScheme = "sleipnir";
		var uriJump = this.location.href;
		var uriSchemeJump;
		for(var i=0,l=scrObj.length,a,b;i<l;++i){
			if( scrObj[i].getAttribute("data-openapps-schemeuri") ){
				uriSchemeJump = scrObj[i].getAttribute("data-openapps-schemeuri");
				break;
			}
			if( !a && scrObj[i].getAttribute("data-openapps-scheme") ){
				uriScheme = scrObj[i].getAttribute("data-openapps-scheme");
				a = true;
			}
			if( !b && scrObj[i].getAttribute("data-openapps-uri") ){
				uriJump = scrObj[i].getAttribute("data-openapps-uri");
				b = true;
			}
			if(a && b) break;
		}
			
		var metaObj1 = document.createElement("meta");
		metaObj1.name = "apple-mobile-web-app-capable";
		metaObj1.content = "yes";
		var metaObj2 = document.createElement("meta");
		metaObj2.name = "apple-mobile-web-app-status-bar-style";
		metaObj2.content = "black";
		var headObj = document.getElementsByTagName("head")[0];
		headObj.appendChild(metaObj1);
		headObj.appendChild(metaObj2);
		if(window.navigator.standalone){
			var aObj = document.createElement("a");
			if(uriSchemeJump){
				aObj.href = uriSchemeJump;
			}else if( uriScheme === "hatenabookmark" ){
				aObj.href = "hatenabookmark:/entry?url=" + encodeURIComponent(uriJump);
			}else{
				aObj.href = uriJump.replace(/^http/, uriScheme);
			}
			aObj.id = "openApp";
			var bodyObj = document.getElementsByTagName("body")[0];
			bodyObj.appendChild(aObj);
		
			var a=document.createEvent("MouseEvents");
			a.initEvent("click",true,true);
			document.getElementById("openApp").dispatchEvent(a)
		}
	}
	
	if(window.addEventListener && RegExp(" AppleWebKit/").test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent)){
		window.addEventListener('load', openAppFunc, false);
	}
})();