iPhoneのホームに、「Sleipnirで開くボタン」を設置するブックマークレットとか。

ページ

 

iPhoneのホームに、「Sleipnirで開くボタン」を設置するブックマークレットとか。

2013年7月27日土曜日
iPhoneのホームに、「Sleipnirで開くボタン」を設置するブックマークレットとか。

こんにちは、@kissatenです。普段から、iPhoneのブラウザにはSleipnirを利用させていただいています。Sleipnirのディベロッパーさんのブログに、Sleipnirで開くようにボタンを作るブックマークレットが紹介されていました。ボタンを押すだけで、好きなサイトをSleipnirで開くことができるのです。そのブックマークレットをお借りして紹介します。


ブックマークレット

こちらのサイト


こちらのサイトにブックマークレットが載っていました。いかにそのブックマークレットを紹介。

ブックマークレット

Sleipnir通常版
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 ""}).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";})()

SleipnirBK
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 ""}).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のバージョンによって使用するブックマークレットは違います。有料版はSleipnirBK(下)の方です。

ブックマークレットの作り方


Safariでの作業となります。作業手順を以下のようにします。

  1. 適当なサイト(「喫茶店の部屋」とか)をブックマークに入れる
  2. ブックマーク一覧から、「編集」を押す
  3. 上記コードをコピーして貼り付ける



ブックマーク一覧はコチラのボタン。左下に編集があるのでそれを押す。



「編集」を押して、適当なブックマークを編集します。そして、URLが書かれているところに先ほどコピーしたものを入れます。タイトル部分には「Sleipnirのボタンを作る」とでも書いておきますか。

ブックマークレットを使ってみる


実際に、Sleipnirで開きたいサイトでブックマークレットを使用してみると、真っ白な画面が現れる。それを「ホーム画面に追加」ボタンを押すと、Sleipnirでブックマークレットを利用したサイトを開くことができる。


ちなみに、Safariで作ったものと、Sleipnir用のボタンはアイコンが一緒。そりゃそうだと思った。Sleipnirを主に使うのでSleipnir用のものをたくさん用意しておこう。ちなみに、

まとめ

ブックマークレット

正直、ブックマークレットの登録方法を説明するのがめんどいなと思った。それならば、ブックマークレット用の記事を書いてもいいなと。

紹介したアプリ


無料版と有料版が有ります。僕は有料版の黒いSleipnirです。

管理人の一言:

ブックマークレットってやっぱり便利。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事