フェンリル

Developer's Blog

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

blog_img_110803.png

こんにちは!林です。

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

以下の図のように見ているウェブページを、ホーム画面にアプリのように置くことができる機能です。
blog_img_110803_2.png
ホームに置かれたアイコンをタップすると、Safari が起動し、そのウェブページを閲覧できる仕組みになっています。
頻繁に使うページをホームに置いておくと大変便利です。

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

使い方

設置方法は </head> の直前に1行、スクリプトタグを追加するだけです。
※ デフォルトでは、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);
	}
})();





Facebook コメント

コメント

【iPhone/iPad】ホームに置いたWebアイコンからSafari以外のアプリを開かせるJavaScriptを作りました (フェンリル | デベロッパーズブログ) | iPhone-feed.info2011年08月03日 19:06

[...] 【iPhone/iPad】ホームに置いたWebアイコンからSafari以外のアプリを開かせるJavaScriptを作りました (フェンリル | デベロッパーズブログ) [...]

ken2014年10月09日 22:31

すばらしいです。
ご教授ありがとうございます。

ところで、WEBページから、ボタンをクリックすると、ホーム画面に追加できるようなjavascript(jquery)はありませんでしょうか?

ブラウザの機能を促すのは、どうしても使いにくいです。

ご教授をお願い致します。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。