こんにちは、Sleipnir Mobile 開発担当の宮本です。
皆さん、iOS では Web ページをアイコンにしてホーム画面に追加できるのをご存知でしょうか。いちいち Safari を起動してブックマークを開く必要もなく、ただアイコンをタップするだけで開けるようになります。
この機能ですが、やはり Safari で開くアイコンしか作成できません。Sleipnir Mobile ユーザーとしては、全然うれしくない機能です。悲しいですね。
ということで、今回はこれをなんとかしてみましょう！！
ブックマークレットで Sleipnir Mobile 用に変換！！
実は、ちょろっと JavaScript でページに修正を加えてやると、Sleipnir Mobile で開くアイコンが追加できるようになります。ページ修正用のブックマークレットを書いたので、Safari に追加しておいてください。通常版と Black Edition で少しコードが違うので、ご利用のクライアントに合ったものを使ってください。
ホーム画面に Sleipnir Mobile で開くアイコンを追加 (通常版)
javascript:(function(){function getIconHtml(){var href=document.location.protocol+"//"+document.location.host+"/apple-touch-icon.png";return ""};var title=document.title;var url="sleipnirblue"+location.href.slice(4);var icons=Array.prototype.slice.call(document.getElementsByTagName('link')).filter(function(link){return link.rel.indexOf('apple-touch')==0;}).map(function(link){return "<link rel='"+link.rel+"' href='"+link.href+"'>"}).join("");if(icons=='')icons=getIconHtml();location.href="data:text/html,%3Chead%3E%3Ctitle%3E"+encodeURIComponent(title)+"%3C%2Ftitle%3E%3Cmeta%20name%3D'viewport'%20content%3D'width%3Ddevice-width%2Cinitial-scale%3D1.0'%20%2F%3E%3Cmeta%20name%3D'apple-mobile-web-app-capable'%20content%3D'yes'%20%2F%3E%3Cmeta%20http-equiv%3D'content-type'%20content%3D'text%2Fhtml%3Bcharset%3Dutf-8'%20%2F%3E"+encodeURIComponent(icons)+"%3C%2Fhead%3E%3Cbody%20style%3D'display%3Anone%3B'%3E%3Ca%20id%3D'u'%20href%3D'"+encodeURIComponent(url)+"'%3E%3C%2Fa%3E%3Cscript%20type%3D'text%2Fjavascript'%3Eif(window.navigator.standalone)%7Bvar%20e%3Ddocument.getElementById('u')%3Bvar%20v%3Ddocument.createEvent('MouseEvents')%3Bv.initEvent('click'%2Ctrue%2Ctrue)%3Be.dispatchEvent(v)%3B%7D%3C%2Fscript%3E%3C%2Fbody%3E";})()
ホーム画面に Sleipnir Mobile で開くアイコンを追加 (Black Edition)
javascript:(function(){function getIconHtml(){var href=document.location.protocol+"//"+document.location.host+"/apple-touch-icon.png";return ""};var title=document.title;var url="sleipnirblack"+location.href.slice(4);var icons=Array.prototype.slice.call(document.getElementsByTagName('link')).filter(function(link){return link.rel.indexOf('apple-touch')==0;}).map(function(link){return "<link rel='"+link.rel+"' href='"+link.href+"'>"}).join("");if(icons=='')icons=getIconHtml();location.href="data:text/html,%3Chead%3E%3Ctitle%3E"+encodeURIComponent(title)+"%3C%2Ftitle%3E%3Cmeta%20name%3D'viewport'%20content%3D'width%3Ddevice-width%2Cinitial-scale%3D1.0'%20%2F%3E%3Cmeta%20name%3D'apple-mobile-web-app-capable'%20content%3D'yes'%20%2F%3E%3Cmeta%20http-equiv%3D'content-type'%20content%3D'text%2Fhtml%3Bcharset%3Dutf-8'%20%2F%3E"+encodeURIComponent(icons)+"%3C%2Fhead%3E%3Cbody%20style%3D'display%3Anone%3B'%3E%3Ca%20id%3D'u'%20href%3D'"+encodeURIComponent(url)+"'%3E%3C%2Fa%3E%3Cscript%20type%3D'text%2Fjavascript'%3Eif(window.navigator.standalone)%7Bvar%20e%3Ddocument.getElementById('u')%3Bvar%20v%3Ddocument.createEvent('MouseEvents')%3Bv.initEvent('click'%2Ctrue%2Ctrue)%3Be.dispatchEvent(v)%3B%7D%3C%2Fscript%3E%3C%2Fbody%3E";})()
では、やり方を説明します。
1. ホーム画面に追加したいページを Safari で開く
Sleipnir Mobile で見ているページを Safari で開けますね。
2. ブックマークレットを実行
Safari で開いたら、ブックマークレットを実行します。
アドレスバーの内容が変わって、画面が真っ白になります。本当は、真っ白ではなく「下のアイコンをタップしてホーム画面に追加してね」的な説明を表示したいのですが、面倒なので真っ白です。気が向いたら、修正版をアップしたいと思っています。
3. Safari のアクションから、ホーム画面に追加を選択
4. タイトルを良い感じに編集して、追加すれば完了♪
Safari ではアイコン画像がなければスクリーンショットを代わりに使ってくれるのですが、さすがにブックマークレットでそんなことをするのは厳しいので、ない場合は真っ白なアイコンです。
Sleipnir Mobile で開くブックマークレットを改善
ホームアイコンの追加ブックマークレットが通常版と Black Edition で違うのに、あれっ？と思った方がいるかもしれません。これまでの”Sleipnir Mobile で開く”ブックマークレットは通常版と Black Edition で共通のもので、どちらが開かれるかわかりませんでした。実は、1.8.3 でこれを修正していて、どちらかを指定して開けるようになっています。もちろん今までのブックマークレットは機能しますが、両方インストールしていて、どちらかを指定したい場合は下のブックマークレットを使ってください。
今見ているページを Sleipnir で開く (通常版)
javascript:location.href='sleipnirblue'+location.href.slice(4);
今見ているページを Sleipnir で開く (Black Edition)
javascript:location.href='sleipnirblack'+location.href.slice(4);
最後に
スクリーンショットは iPhone ですが、もちろん iPad でも動きます。
さらにパワフルになった Sleipnir Mobile をぜひ使ってみてください！
関連記事
