BrowserSelector2 – やっぱりSafariじゃないブラウザで開きたい

Chrome for iOSのリリースをキッカケにサードパーティのブラウザ・アプリが流行るかも。先日のエントリで紹介したブラウザ選択スクリプトは短縮URLの展開や安全性をチェックするために外部サービスのWeb APIを使っていましたが、今度はシンプルにブラウザを選択する画面をつくってみました。

Browser Selector – 目的に合わせてブラウザアプリを選べるスクリプト

https://daisukeblog.com/?p=1828

iPhoneでURLをコピーするだけで安全かどうかをスキャンして結果を表示するスクリプト

https://daisukeblog.com/?p=1817

BrowserSelector2を使ってみる

Sparrow for iPhoneに届いた日本経済新聞からのメールです。読みたい記事のURLをコピーします。

やはりIconizerを使います。通知センターから引き出して”BrowserSelector2″をタップ。MyScriptsのスクリプトが実行され、コピーしたURLが表示され、各ブラウザアプリのアイコンが並んでいます。開きたいブラウザを選択します。

選択したブラウザが開きます。Chromeを選択したところです。

MyScriptsを使いjQuery Mobileで画面を作る

MyScriptsを使います。JavaScriptでコピーしたURLを加工し、jQuery Mobileで画面を作ります。アイコン画像はiTunesのアプリ共有画面やiExplorerで母艦からiPhoneへコピーしておきます。iExplorerはフォルダコピーが出来るのでお勧めです。

MyScripts 2.5
仕事効率化, ユーティリティ
App Storeで詳細を見る

コピーした内容がhttpで始まるURL以外は誤爆と見なして起動しないようにコントロールしています。また、アイコン画像はMyScripts.app下のDocumentsの中にimgというフォルダを作って格納しました。

#LIB

IS_HTML=true;

var rgex = /^http/;

if (TEXT.match(rgex)){

var openurl = TEXT.substring(4,TEXT.length);

htmlview(openurl);

} else {

"INFO: Your copy doesn't begin with http(s)";

}

function htmlview(url){

var html ="<!DOCTYPE html> \n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \n<title>Browser Selector</title> \n<link rel=\"stylesheet\" href=\"./jqm/jquery.mobile.css\" />\n<script src=\"./jquery.js\"></script>\n<script src=\"./jqm/jquery.mobile.js\"></script>\n<style type=\"text/css\">\n.icon{\n width:75px;\nborder-radius: 20px 20px 20px 20px;\n-webkit-border-radius: 20px 20px 20px 20px;\nbox-shadow: 1px 4px 6px 1px #999999;\n-webkit-box-shadow: 1px 4px 6px 1px #999999;\nmargin: 0px 15px 1px 5px;\n padding:0px;\n border:none;\n}</style>\n</head>\n<body>\n<div data-role=\"page\">\n<div data-role=\"header\">\n<h1>Select Browser</h1>\n</div>\n<div data-role=\"content\">\n<label for=\"textinput2\"><h4>URL you copied:</h4></label>\n<input id=\"textinput2\" placeholder=\"\" value=\"" + TEXT + "\" type=\"text\" />\n<p>\n<h4>Select a browser you want:</h4><p><center>\n <a href=\"sylfeed" +url+ "\"><img class=\"icon\" src=\"img/sylfeed.png\"></a><a href=\"web" + url + "\"><img class=\"icon\" src=\"img/icab.png\"></a><a href=\"puffin" + url + "\"><img class=\"icon\" src=\"img/puffin.png\"></a><a href=\"googlechrome" + url + "\"><p><img class=\"icon\" src=\"img/chrome.png\"></a><a href=\"merc" + url + "\"><img class=\"icon\" src=\"img/merc.png\"></a><a href=\"sleipnir" + url + "\"><img class=\"icon\" src=\"img/sleipnir.png\"></a></center></div> \n<div data-role=\"footer\">\n<h4>BLOG of Daisuke</h4>\n</div> \n</div>\n</body>\n</html>";

return html;

}

MyScripts用スクリプト『BrowserSelector2』の登録はこちら（iPhoneから開きます）

jQuery Mobileで画面デザインを考えると時間がかかるし大変ですね・・・デザイナーの方ってスゴいなぁってあらためて感じちゃいました。