TweetBookmarkletメーカー – iPhoneのSafariからタイトルとURLをツイートするBookmarkletをカンタン作成

Safariでブラウズ中のページをツイートしたい時に便利なのがBookmarklet。これを自分のTwitterクライアントにあわせてカンタンに作成できるのが @corneliuspapa さんの『TweetBookmarkletメーカー』です(URLスキームに対応していないアプリは残念ながらできません)。

TwitterのクライアントによってはSafariに「ブックマークレットを追加」するメニューが用意されていますが、開いているページのURLしかツイート出来なかったりするので自分のお気に入りのTwitterクライアントへ、ページタイトル、URLに加えてURL短縮サービスbit.ly、ヘッダー、フッターのカスタマイズが可能です。

TweetBookmarkletメーカー(Ver.1.3)はiPhoneから作成する際に半角スペースのエンコードが正しくないようで一部修正が必要になるのでそれを含めてご紹介します。

とりあえずBookmarkletを作成してブックマークに登録してみる

Echofonを例にiPhone上での作業手順を紹介しますが、iPadやPC上でも途中までは同じ手順で作成します。TweetBookmarkletメーカー のページを開きます。

TweetBookmarkletMaker
自分のTwitterクライアントに併せて選択します。bit.lyサービスやヘッダー・フッターは後述しますので、ここでは使用しないパターンを作るために「使わない」のまま「6. Bookmarkletを生成する」をタップします。

iPhoneで作業する場合「Bookmarklet名」はブックマーク登録する際に修正します(PCで作業する場合、登録時の挙動は使用するブラウザで異なります)。

Select Your Twitter Client
これでBookmarkletは生成されたので、ブックマークに登録するために「TweetBookmarklet」のリンクをタップします。

Create Your Bookmarklet
メニューボタンから「ブックマークに追加」を選択します。

Add Your Bookmarklet to Bookmark
ここでブックマーク名を修正します。Echofonへ連携することが分かるように適当に名前を付けます。同時に格納場所を選択して「保存」ボタンをタップします。

これではまだBookmarlketは動作しませんので、この後に編集が必要になります。

Modify Bookmark Name
そのままSafariで開いているページで「ブックマーク」を呼び出し「編集」ボタンをタップします。先ほど登録した「Tweet via Echofon」のBookmarkletを全選択してコピー。ここでは編集しやすいようにメモ帳を使用してみます。

Copy Bookmarklet
メモ帳にペーストし、下線部分を削除します。このTweetBookmarkletメーカー固有の問題としてiPhoneで生成した場合に半角スペースが”%2520″へエンコードされてしまうようなので、“25”を削除して”%20″に修正します。

編集前のBookmarklet
Modify Bookmarklet
編集後のBookmarklet
Copy modified Bookmarklet
編集を終えたBookmarkletをコピーして、Safariのブックマークの編集画面に戻ってペーストします。これでBookmarkletは使用可能になりました。

Paste modified Bookmarklet
ツイートできるようになっているか確認してみましょう。

適当なページをSafariで開きます
Apple iPhone4S
登録したBookmarkletをブックマークから選択します
Select Bookmark
くるりんぱ!Echofonのツイート画面が後ろから立ち上がります!
Echofon Tweet

Tips:ヘッダーやフッターを使用しない場合は半角スペースを削除

上記の例ではヘッダーやフッターを使用しないBookmarkletを作りましたが、ツイート画面で確認すると先頭と末尾に半角スペースが入っていることが分かります。Bookmarkletを次のように前後の半角スペースの部分(「+’%20’+」)を削除します。

TweetBookmarkletメーカーではヘッダー・フッターを使用しない場合にはスペースを削除してもらえると助かるのですが、次期バージョンアップに期待しましょう。

TweetBookmarkeltメーカーの進んだ使い方(その1):ヘッダーとフッターのテンプレート化

Bookmarkletを生成する際にツイート内容の前後に「RT」やハッシュタグを付けたりなど特定の文字列を挿入することが可能です。

ここでまた問題があります。iPhoneで作業すると”#”がうまくエンコードされずにBookmarkletのスクリプトが途切れてしまいます。iPhoneで作業する際にはヘッダーとフッターには”#”を含めずに生成し、上記の通り”%2520″を”%20″に修正する必要があります。ちなみに、iPadやPC側で作成すると問題ありません。

iPhoneで作業する場合は、ヘッダーとフッターを使わない状態でBookmarkletを生成して、自分で編集した方がラクかもしれません。以下のBookmarkletの”RT”、”#AppleJP”部分を置き換えていただくといいかもしれません。

TweetBookmarkeltメーカーの進んだ使い方(その2):bit.ly短縮サービスを使う

bit.lyの自アカウントでURL短縮が可能です。ユーザ名とAPIキーを入力するだけで、必要なスクリプトがBookmarkletに埋め込まれます。iPhoneで生成した場合に半角スペース”%2520″を”%20″に修正する作業は上記同様です。

bit.ly
Bookmarkletを実行するとbit.lyでURLが短縮される
Tweet via Echofon w/ bit.ly

利用できるのはURLスキームに対応しているTwitterクライアント

残念ながらお気に入りのTwitterクライアントにPost系のURLスキームが実装されないと使えないので、比較的人気が高いTweetlogixやTweetList(URLスキームはあるがPost系がない)、SOICHA/j(URLスキーム自体がない)はBookmarkletを使うことができません。

このBookmarkletメーカーが対応していないクライアント「SimplyTweet3」版を自作していたので残しておきます。このクライアント、日本ではほとんど使っているユーザがいないかも。

Twitterクライアントを選ぶポイント

AppStoreには多くのTwitterクライアントがあり、特長あるそれぞれのアプリがTwitterそのものを盛り上げる要素になっているように感じます。「選ぶ楽しさ」もありますし、その時々のアップデート内容によってもメインとなるクライアントを変えるユーザも多いのではないでしょうか。わたしはこのURLスキームの対応状況もクライアント選びの重要なポイントになりそうです。