home > Twitter

iPhone/iPadのブラウンジングをもっと便利にするブックマークレット

iPhone/iPadのブラウジングをもっと便利にするブックマークレット

iPhone/iPadのSafariはシンプルで使いやすくて良いのですが、PC版で機能拡張を入れてカスタマイズしている人にとっては少々ものたりなさを感じることがあると思います。そんなものたりなさを解消する便利なブックマークレットを紹介します。

ブックマークレットってなに?

JavaScriptで書かれた短いプログラムで、ブラウザのブックマークを利用して呼び出すことからブックマークレット(bookmarklet)と呼ばれています。JavaScriptが使えるブラウザであれば利用できます。

ブックマークレットの登録方法

  1. まずは使いたいブックマークレットのコードをコピーします。
  2. 適当なページをブックマークします。
  3. ブックマークの編集機能で中身を編集します。
    (”http://”から始まっているところを”javascript:”からのコードに変更)
  4. ブックマークをわかりやすい名前に変更して完了です。

iPhone/iPadで使える便利なブックマークレット

独断と偏見で選んだオススメのブックマークレットがこちらです。
他にも便利なブックマークレットがあれば教えてください。

1. Twitterに投稿する

ページタイトルと短縮URLが自動挿入された投稿ページが別Windowで開きます。

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

2. Evernoteに投稿する

Webページのクリッピング画面がページ内に開きます。

javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/E4Haz4OTliyC?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)

3. Instapaperに投稿する

あとでじっくりこのページを読みたい!そんなときこれを使えば1クリックでInstapeperに登録します。

javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/E4Haz4OTliyC?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)

4. ページ内をキーワード検索する

目的の情報がページのどこに書かれているのか探したい!そんなときにこれを使えば、ページ内のキーワードのヒット数が表示され、同時に該当キーワードがハイライト表示されます。

javascript:void%28s%3Dprompt%28%27%E3%81%93%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%A4%9C%E7%B4%A2%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20%E4%BB%B6%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B

5. ページのソースを表示する

いま見ているページのソースが気になる!ってことってありますよね。そんなときこれを使えば別Windowでソースを表示します。心ゆくまでソースを確認できます。

javascript:(function(){    var w = window.open('about:blank'),         s = w.document;    s.write('<!DOCTYPE html><html><head><title>Source of ' + location.href + '</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');    s.close();     var pre = s.body.appendChild(s.createElement("pre"));    pre.style.overflow = 'auto';    pre.style.whiteSpace = 'pre-wrap';    pre.appendChild(s.createTextNode(document.documentElement.innerHTML));})();

6. 次のページを自動的に開く

検索結果ページなどでページ送りがあるときにこれを使うと次ページがいま見ているページの下部につぎ足されて表示されるようになります。AutoPagerize+Minibuffer+LDRizeの機能が1つになっています。

javascript:(function(a,s){s=document.createElement('script');s.charset='UTF-8';s.type='text/javascript';s.src=a.shift();document.body.appendChild(s);if(a.length)arguments.callee(a);})(['http://ss-o.net/userjs/minibuffer.safari.user.js','http://ss-o.net/userjs/oAutoPagerize.js','http://ss-o.net/userjs/ldrize.safari.user.js']);

7. アスタリスクで隠された内容を調べる

ブラウザに保存されていて「****」のように伏せ字化された文字列の内容を表示します。パスワードを忘れてしまったときなど役に立つときがあるかも?

javascript:(function(){%20%20var%20F=document.getElementsByTagName('input'),%20a=[];%20%20for%20(var%20i=0,l=F.length;i<l;i++){%20%20%20%20if(F[i].type.toLowerCase()%20!=%20'password')%20continue;%20%20%20%20a[a.length]%20=%20(F[i].id||F[i].name)%20+%20':'%20+%20F[i].value;%20%20}%20%20alert(a.length%20?%20a.join('\n')%20:%20'No%20Password');})()

参考にした記事

iPhone用GPSロガー”RunKeeper”でサイクリング・マラソン管理

iPhone用GPSロガー"RunKeeper"でサイクリング・マラソン管理

サイクリング時のGPSログ管理としてiTrailを愛用していましたがトレーニングデータをWebサイトと連動して管理できるRunKeeper Free(無料)が良さげなのでポチってみました。

RunKeeperはサイクリング、マラソン、ウォーキング時の移動履歴をGPSを使って自動記録してくれるアプリです。経過時間、移動距離、時速、ペース、消費カロリーといったデータを記録できます。iTrailと比べると標高データが取得できないところは劣りますが、そのかわりにWebサイト”RunKeeper“とデータ連動できるのが魅力です。TwitterやFacebookにデータを自動投稿することもできます。

Webサイトでは走行データの閲覧だけでなく、週間・月間での集計、データの修正まで行えます。iTrail同様、.gpx、.kml形式でログデータをエクスポートしてGoogle Earthなどで走行データを再生することもできます。

デザインもベターなので今後はRunKeeperを使っていこうと思います。

RunKeeperの使い方

  1. 起動後、Start画面右上のGPSランプがグリーンになるまで待機
  2. Active Typeでトレーニングの種類を選んだら「Start Activity」をタップ
  3. カウントが始まったのを確認したら画面をオフ
  4. ひたすら走る!
  5. 休憩する場合は「Pause」をタップ、「Resume」でトレーニング再開
  6. トレーニング終了は「Stop」をタップ
    (自動的にデータがWebサイトに転送されます)

RunKeeper Webサイト

RunKeeper 参考画面


RunKeeper Proの機能

RunKeeperにはPro版がありますが、1,200円と決して安くはありません。Free版との違いは下記の5点です。マラソンをする人には音声ガイドはありかもしれませんが、サイクリングの場合は走行中に音楽聴いたり、画面を見たりしないのでFree版で充分かなと思います。

  1. Training Workouts
    トレーニングメニューの作成機能
  2. Audio Cues
    走行距離、経過時間の音声ガイド機能
  3. Geo-Tagged Pictures
    トレーニング中に撮影した写真を地図上に表示する機能
  4. iPod Controls
    トレーニングスタート時に自動的に音楽が再生される機能
  5. No Ads
    広告が非表示になります。

RSSリーダー”Byline 3.0″がステキ過ぎる

RSSリーダー"Byline 3.0"がステキ過ぎる

Google Readerと同期できるRSSリーダーの定番アプリBylineが3.0になりました。いろいろなRSSリーダーを試してきましたがもう浮気しないで済みそうな完成度です。(450円)

3.0では15もの新機能が追加されたのですが、その中でも次の3つが個人的にストライクです。

  1. 記事を左右のスワイプで移動可
    今までは記事の移動ボタンが画面右上にあって片手での操作に難があったのですが、それをスワイプで前後に移動できるようになりました。片手でスイスイ操作できてナイスです。
  2. Twitter, Instapaper, Read It Laterとの連携
    他のアプリに浮気する理由になっていた外部サービスとの連携も可能になりました。Twitterへの投稿時にURLが短縮されないのが惜しいです。海外製アプリなのではてなブックマークとの連携機能はありませんが、Twitterを使ってはてなブックマークすることはできます。
  3. Instapaper Mobilizer(モバイルデザイン)での高速同期
    購読フィードがたくさんあるとどうしても同期に時間がかかってしまっていましたが、モバイルデザインでキャッシュすることで同期の高速化が図られています(要設定)。PC表示には記事の右上のボタンで切替ます。

Byline 参考画面

Byline 3.0の新機能

  1. 簡単なスワイプジェスチャによる素早いアイテムの閲覧を実現しました。
  2. フォルダ毎に加え、個別のフィード毎の閲覧が可能になりました。
  3. Twitter, Instapaper, Read It Laterとの連携機能が追加されました。
  4. アイテムにスターを付けたり、未読/既読の設定をする編集モードが一覧ビューに追加されました。
  5. 同期速度、キャッシュ速度を改善しました。また、Instapaper Mobilizerを使ってモバイル向けデザインでWebページをキャッシュする事が可能になりました。
  6. 統計的解析により、記事本文が意図的に削られているフィードのみを自動的に選別してキャッシュできるようになりました。
  7. 個別のフィードごとにWebページキャッシュを有効にしたり無効にしたりを設定できるようになりました。
  8. バッテリーが半分以上残っている場合、画面をロックしてもキャッシュを実行し続けるようになりました。
  9. 「メインフォルダ」機能を追加しました。「メインフォルダ」として指定されたフォルダ内のフィードのみを同期することができます。
  10. 最大1000件まで一度に表示する事が可能になりました。
  11. 「未開封にする」ボタンをアイテム表示画面に追加しました。
  12. アイテムのリンクをクリップボードにコピーする機能を追加しました。
  13. アイテムをメールで送信する際に、全文をメールに含めるようになりました。また、Byline内から送信できるようになりました。
  14. Google リーダー内でフィード名を変更した場合、その変更した名前を表示するようになりました。
  15. アプリのアイコンとその他のグラフィックをさらに洗練させました。