前回の第6回 HTMLタグを使ってブログを書こう。では、TextExpanderを使ってHTML要素を効率よく書いていくことをお伝えしました。今回は素材のHTMLタグをどうやって取得するかを考えていきたいと思います。

どうやって素材のHTMLタグを取得する？

第4回 画像・動画素材の置き場を考えよう。でFlickrやYouTubeに素材を置きました。

この他にもアプリ紹介のリンクや他のブログを紹介したいなど、貼りつけたい素材はいろいろあると思います。

もちろん、FlickrやYouTubeにも素材をブログに貼りつけるための仕組みが準備されています。

Flickr-Grab the HTML Photo by feelingplace

Youtube共有 Photo by feelingplace

しかしっ！

iPhoneでこの画面にたどり着くにはとてつもなくたくさんのステップを踏む必要がありますし、アプリ紹介やブログ紹介のリンクだってアドレスをコピーして加工したりとこちらも手間がかかります。

正直、毎回こんなことをする必要があるならiPhoneでブログを書くなんて考えません。

それらの手間を省いて簡単にデータを取得することができるようにしたのが、ブックマークレットです。

ブックマークレットとは？

まさか、Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。なんて記事を書いたボクがブックマークレットとは何かを語るようになるとは夢にも思いませんでしたが、成り行き上確認しておきましょう。

ブックマークレットとは【bookmarklet】 – 意味/解説/説明/定義 ： IT用語辞典によると、

Webブラウザのブックマーク(お気に入り)に登録することのできる、JavaScriptで記述されたスクリプト。Webページの閲覧中にすぐ呼び出すことができ、ブラウザにちょっとした機能を追加するのに使われる。閲覧中のページに含まれる用語を選択して検索エンジンや辞書サイトで照会したり、閲覧中のページへのリンクを貼ったブログの投稿ページを呼び出したり、手作業で行うと数ステップかかる作業を一括で行ってくれるようなものが多い。

とあります。iPhoneに置き換えて考えてみると、標準の状態であればSafariのブックマークレットに登録して使うJavaScriptで書かれたプログラムということです。

という訳で今回はボクが普段利用させていただいているブックマークレットの活用法のご紹介と実際の活用例をみていきたいと思います。

まずはどんなブックマークレットを使っているのかだけでも列挙しておきましょう。

1. Flickrの画像を取得。
• PhotoHtml
• Flickr2HTML
2. YouTubeの動画を取得。
• YouTube2HTML
3. iPhoneアプリ紹介のリンクを取得。
• AppHtml
4. 他サイト紹介のリンクを取得。
• ShareHtml

以上の5つを使ってiPhoneでブログを書いています。この5つのブックマークレットのうち、PhotoHtml、AppHtml、ShareHtmlは普通のサラリーマンのiPhone日記の@hiro45jpさん作、残りのFlickr2HTML、YouTube2HTML、は拙作のブックマークレットになります。

ブックマークレットの登録はデスクトップであれば簡単にできます。

ブックマークレット登録 Photo by feelingplace

このように、リンクが貼ってあるのでそれをブックマークに登録するだけです。（YouTube2HTMLだけは方法が異なりますので、リンク先で確認をお願いします。）

それでは用途ごとに1つずつみていきましょう。

Flickrの画像を取得。

Flickrにアップした画像をまとめて取ってくるブックマークレットは2種類を併用しています。

1つはPhotoHtml、@hiro45jpさん作。

もう1つは拙作のFlickr2HTMLです。

2つのブックマークレットに大きな違いはないんですが、設定や挙動に違いがあるので表にまとめてみましょう。

条件	PhotoHtml	Flickr2HTML
FlickrのAPI-KeyやNSID	必要	不要
Flickrへのアクセス	不要	必要
取得条件	単一ページおよびタグ	単一ページ、セットおよびタグ
取得件数	上限500件（最新のものから取得。件数指定可能。）	上限20件（最新のものから自動取得。）

簡単にまとめるとこのようになります。

Flickrでの管理方法にもよりますが、
タグで管理している人はPhotoHtml、セットで管理している人は
Flickr2HTMLという使い分けをするのがいいのではないでしょうか。

それでは実際の挙動を確認していきたいと思います。

Flickr2HTMLでの取得。

ここではまず、PictShareとFlickr2HTML・Textforceの連携をみてみましょう。

まずはPictShareで画像をFlickrにアップします。（詳しい手順は第4回 画像・動画素材の置き場を考えよう。をご参照ください。）

PictShareを使ってFlickrへSetでアップロードします。

1000000833 Photo by feelingplace

アップロードが終了した後の画面がこちら。ここで”Open with Safari”をタップします。

1000000839 Photo by feelingplace

すると、Safariが立ち上がりデスクトップ版のFlickrの先程アップロードしたSetのページが表示されます。

1000000835 Photo by feelingplace

ここでFlickr2HTMLを起動！

1000000840 Photo by feelingplace

HTMLのテンプレートを選択するよう聞かれます。今回はデフォルトの1でOKをタップ。

1000000837 Photo by feelingplace

プロンプトが立ち上がりコードが表示されます。全てを選択してコピーします。その後、OKをタップすると、

1000000838 Photo by feelingplace

このようにTextforceが立ち上がります。後は好きなところにコピーするだけです。

1000000844 Photo by feelingplace

で、まとめて取得した画像はこちら。

1000000812 Photo by feelingplace

1000000813 Photo by feelingplace

このようにFlickrの画像を簡単に取得して好きな位置に貼りつけることができます。

PhotoHtmlでの取得。

続いてはPhotoHtmlの挙動を見ていきましょう。

ボクの場合、PhotoHtmlはInstagramでFlickrにマルチポストした画像取得専用にしています。

ポイントはタグの設定です。

このスクショはFlickr公式アプリでInstagramからマルチポストした画像を見たものなんですが、複数のタグが自動付加されているのがわかると思います。

1000000865 Photo by feelingplace

この中の1つ、”instagramapp”を事前にPhotoHtmlに仕込んでおいて起動します。

1000000881 Photo by feelingplace

ボクはInstagramに1日に1度も投稿してないので、取得数は7枚で十分です。

1000000882 Photo by feelingplace

先程仕込んだ”instagramapp”が表示されています。迷わずOKをタップ。

1000000883 Photo by feelingplace

テンプレートは”1″を選択。

1000000884 Photo by feelingplace

7枚を過去から順番に引っ張ってきます。

1000000885 Photo by feelingplace

必要なものだけをコピーします。複数必要な時はPastebotを起動しておくといいでしょう。

1000000886 Photo by feelingplace

あとはお好きなエディタで整えるだけです。

このようにご自身のFlickrの管理方法に合わせて、ブックマークレットを使い分けるとタップ数も減り入力の負担が減ると思います。

YouTubeの動画を取得。

続いてYouTubeの動画をします。

ここで使うのはYouTube2HTMLです。まずは貼りつけたい動画のページに行きます。

1000000855 Photo by feelingplace

ここでYouTube2HTMLを起動！今回はObject版のTextforce連携です。

1000000864 Photo by feelingplace

動画サイズを入力します。今回はデフォルトの480（単位はpx）でOKをタップ。

1000000856 Photo by feelingplace

プロンプトにコードが表示されるのでコピーしてOKをタップすると、

1000000857 Photo by feelingplace

このようにTextforceが立ち上がってきます。

1000000858 Photo by feelingplace

実際取得した動画がこちらです。

YouTube2HTMLはiframe版とobject版の2種類で出力が可能になっています。iframe版はYouTubeで現在取得できるコード。古い埋め込みコードを使用するにチェックをつけたものがobject版になります。これも必要に応じて使い分けましょう。

iPhoneアプリ紹介のリンクを取得。

おつぎはAppHtmlです。設定は最初に紹介した@hiro45jpさんのブログを参照してください。ボクが利用しているのはiPhoneでの利用がしやすいポップアップ版です。

Safariでインターネットを見ている状態でAppHtmlを起動します。

1000000891 Photo by feelingplace

すると、アプリの名前を入力するように促されるので入力します。今回はTextforceと入力します。

1000000892 Photo by feelingplace

利用するテンプレートは”2″を選択。

1000000893 Photo by feelingplace

入力したアプリがヒットすると、このようにコードが表示されます。

1000000894 Photo by feelingplace

Textforceに貼りつけてプレビューをするとこんな状態です。

1000000895 Photo by feelingplace

正しい使い方ではないかも知れませんが、AppHtmlでMac App Storeのアプリも取得することができます。今回はTextExpanderで試してみましょう。（デスクトップで試しましたが、iPhoneでも結果は同じです。）

AppHtmlテスト Photo by feelingplace

iPhoneアプリのTextExpanderはもちろん表示されますが、【1/4】とあるのがわかりますか？OKをして進めていくと…

AppHtmlテスト2 Photo by feelingplace

TextExpander for Macも出てきました。

AppHtmlテスト3 Photo by feelingplace

MacHtmlという専用のブックマークレットも@hiro45jpさんは準備してくださっているんですが、AppHtmlでも代用可能です。

他サイト紹介のリンクを取得。

ここではShareHtmlを使います。ShareHtmlはいくつもテンプレートが用意されているのですが、ボクが使っているのは1と7。

このテンプレートNo.を毎回入力するのは面倒なので、ブックマークレット内のテンプレートNo.をそれぞれ設定したものを準備してあります。

1000000902 Photo by feelingplace

どちらも起動すると、コメント入力を求められます。もちろん、任意なので必要に応じて入力してください。

1000000903 Photo by feelingplace

テンプレートNo.を入力するよう促されます。最初にも書きましたが、毎回修正するよりも最初にブックマークレット側で修正をしておくとOKをタップするだけなのでとても楽になります。

1000000904 Photo by feelingplace

コードが表示されるのでコピーして貼りつけます。

ちなみに、フォーマットNo.1はこちらで、

Bookmarklet | 普通のサラリーマンのiPhone日記

フォーマットNo.7はこちらになります。

Bookmarklet | 普通のサラリーマンのiPhone日記

2つを状況に応じて使い分けしています。

使用（仕様）上の注意と設定のポイント。

今回ご紹介した5つのブックマークレットは全てYahoo!Pipesというサービスを利用しています。

Yahoo! Pipes – Wikipediaによると、

Yahoo! Pipes（ヤフー　パイプス）は、Yahoo!によって提供されているウェブアプリケーションである。RSSフィードや外部のサービスなどの様々な情報をまとめたり、マッシュアップすることが出来る。

とあります。マッシュアップとか意味の分からない用語も含まれていますが、使う上で気をつけないといけないのは、ウェブアプリケーションだということ。つまり、インターネットに繋がった状態でないとこれらのブックマークレットが使えないということです。

こういった特性を理解しておけば、ボクのような地下鉄通勤者であれば、地下に潜る前に必要なデータをブックマークレットで取得しておいてお好みのエディタに貼りつけておき、電車に揺られながらじっくりと編集するということができます。

なお、Pipesについては@hiro45jpさんがPipesで解説してくださっていますし、Yahoo! Pipes講座のまとめページを作りました♪でPipesを活用してブックマークレットに仕上げる講座を開講してくださっています。

Pipesを活用したブックマークレットは他にもあり、@matubizさんのAmazonHtmlをご存じの方もいらっしゃるのではないでしょうか。

アマゾン商品紹介用ブックマークレット「AmazonHtml」復活。Ver 2.0へ！ | matuダイアリー

設定上のポイントとしては、実際の挙動を見ていく中でもいくつか書きましたが、それぞれのブックマークレットで設定できる項目を事前に自分用に直しておくことです。

こうすることでブックマークレットを起動してOKをタップしていくだけで済むので、毎回修正する手間が省けます。

今回のまとめ。

ブックマークレットを活用することで簡単にデータを取得できることはわかっていただけたかと思います。

iPhoneで今回紹介したブックマークレットを活用する時には、

• ブックマークレット内で設定できる項目を知ること。
• 自分が普段使うテンプレートNo.を知ること。
• もっとも使っている設定やテンプレートNo.をブックマークレット内に設定してしまうこと。

以上3点を行うことで1作業でのタップ数が減るので、繰り返し作業を行った時の負担を軽減することができます。

iPhoneだけでブログを書く時にはできるだけ入力に掛かる負担を減らしたほうが続けていこうという気になれるので、わかりにくい部分ではあるとは思うんですが、ぜひ試していただきたいなと思います。

それでは、次回第8回 ブログを更新しよう。をお楽しみに。

おまけ。

先回紹介しなかったTextExpanderの「省略形」を1つご紹介します。

ショートカットキー	省略形	スニペット
command+V（WindowsではCtrl+V）	,v	%clipboard

ええ、そうです。コピーをキーボードだけでできるようにしてしまうのです。

iPhoneのソフトフェアキーボードはとてもよくできているのですが、長押ししないとメニューが出てきません。

1000000822 Photo by feelingplace

こうしておくことでSafariとアプリを行ったり来たりする場合、例えばボクの場合だとSafariでブックマークレットを起動してからTextforceを立ち上げるようにしてあるんですが、TextforceとSafariを行ったり来たりするとTextforceではカーソル位置を覚えていてくれるので、ブックマークレットでデータを取得してから先程のTextExpanderの省略形を入力すればコピー可能になり、メニューが出ないってイラっとすることが少し減りました。