PicasaHtml - PhotoHtml の感動を Picasa でも！

PhotoHTMLと私 Singer Song iPhone
毎日@hiro45jp 師のbookmarkletを使ってるわけです。 一番使ってるのはAppHTMLとPhotoHTML。 特にPhotoHTMLのおかげで私のblogを書くスピードは格段に上がっています。 今日はどんな風に楽になっているのか？を具体的に書いてみようと思います。 使用するものは3つ。 １．Flickrのアカウント（フリーアカウントでOK） ２．Pictshare　 PictShare – multiple photos uploader 1.2App iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要 カテゴリ: ソーシャルネットワーキング 価格: ￥230 更新: 2011/02/11 ３．PhotoHTML

PhotoHtml って便利そうだなぁ。でも、私のブログは画像を Picasa に置いているしなぁ。Flickr に変更してもよいのだけど。。。

そう思いながら過ごしてきました。

そしてある日、Google Code で Picasa の API を見かけたことを思い出しました。

Picasa 向けに PhotoHtml と同等のものが作れるのではないだろうか。

そんな思いつきをきっかけに PicasaHtml は生まれました。

「PicasaHtml」とは？

Picasa から画像のリンクを取得するソフトウェアです。 @hiro45jp さんの PhotoHtml を参考にしています。

機能は以下の通りです。

• タグ指定と件数指定による画像の一括抽出
• 出力テンプレート（標準2パターン）の指定
• 出力テンプレートの定義ファイルの指定

フロントエンドは 4 種類あります。

• Windows/Mac/iPhone 汎用ブックマークレット

結果を別ウィンドウ(フローティング)表示（HTMLタグ＋プレビュー）するブックマークレット

• Textforce 用ブックマークレット

結果を Textforce に送って Quick Look 表示をするブックマークレット

• Mac 汎用サービスメニュー

結果をポップアップウィンドウに表示するサービスメニュー

• MarsEdit 用サービスメニュー

結果を MarsEdit のエディタに挿入するサービスメニュー

導入準備

ブログで使用する画像を置くアルバムを一般公開に設定してください。

「リンクを知っている全員」の設定ではリンクが取得できませんのでご注意ください。

フロントエンドの導入

設定が必要な項目は Picasa のユーザID です。

各フロントエンドの設定方法を以下に説明します。

Windows/Mac/iPhone 汎用ブックマークレット＆Textforce 用ブックマークレット

ブックマークレット内の userID という名前の変数に Picasa のユーザID を設定してください。

Mac 汎用サービスメニュー＆MarsEdit 用サービスメニュー

Automator で workflow ファイルを開き、userID という変数に Picasa のユーザID を設定してください。

実行例

Windows/Mac/iPhone 汎用ブックマークレット

ブックマークレットを起動すると、取得する画像の最大件数を入力する画面が表示されます。

次はタグの入力です。空でも構いません。

最後にテンプレート番号を入力します。

結果はプレビューつきのポップアップ画面です。 ×ボタンを押すと結果画面が閉じます。

Textforce 用ブックマークレット

Textforce 版も流れは同様です。

画像の最大件数入力画面

タグ入力画面

テンプレート番号入力画面

結果は Textforce に渡されて、Quick Look で表示されます。

Mac 汎用サービスメニュー

Mac 汎用サービスメニューも流れは同様です。(メンドクサクなってきたｗ)

MarsEdit 用サービスメニュー

MarsEdit 版は結果が MarsEdit のエディタに挿入されます。
(さすがにクドイので結果の画面だけ)

カスタマイズ

ブックマークレット、サービスメニューとも設定項目と意味は同じです。 設定方法はユーザIDと同じです。

fmt （html format）

出力テンプレートのパターン（標準で2パターン準備）を指定します。1だと「Flickr2Html」ライクな書式、2だと画像のみの書式(オリジナル画像のサイズを指定済み)になります。

max （max number of photos）

取得する画像数のデフォルト表示。「20」にしてます。

tag （photo tag）

タグ指定のデフォルト値は「空」にしてますが、いつも決まったデフォルトのタグがある方は指定して下さい。

tmp （template file）

「fmt」で指定される出力テンプレートを格納してあるファイル名のフルパスです。DropboxのPublicフォルダにファイルを置くのが楽ちん。PhotoHtml にならって私もそうしてます。

出力テンプレートについて

出力テンプレートは PhotoHtml と同様の仕組みで外出しにしてファイルから読み込むようにしています。デフォルトのテンプレートは Dropbox の Public フォルダに入れています。カスタマイズされる方は、ご自身のテンプレートファイルを指定して下さい。

テンプレートファイルは CSV 形式です。 といっても、一列しかないので実質はテキストファイルです。

編集にはいくつかの決められたルールがあります。

• ルール1：9行目の「この上に行を追加しないでください。」より上に行を追加しないでください
• ルール2：10行目以降を書式として認識します
• ルール3：10行目から好みの書式を1行で入れてください
• ルール4：'<' は '&lt;'、'>' は '&gt;' と記載してください
• ルール5：書式には「予約語」が使えます（例えば、${title}など）
• ルール6：書式は上から勝手に「1、2、…」という書式名になります（fmtで指定）
• ルール7：ファイルは「.csv」の拡張子をつけてください

ルール4 はお手数かと思いますが、9行目までに '<' と '>' はありませんので、お使いのテキストエディタの置換機能を利用すると比較的簡単に記述できると思います。

ちなみに、ルール4 は、 Yahoo! Pipes が HTML を認識した際に、HTML として無効な属性を削除したり、リンクが相対パスの場合に絶対パスに変換したりするようなので、これを回避するためのものです。

さいごに

PhotoHtml を自分の環境で使いたいというきっかけで作りましたが、すでに Picasa で運用していて Flickr への移行はちょっと…という方にも、@hiro45jp さんが作ってくださった素晴らしい仕組みを体験して欲しい、そんな想いがいまの私にはあります。

それでは、みなさま、Happy Blogging!

最新情報はこちら: Happy-Go-Lucky: MarsEdit

ツイート数を表示するウィジェットは TweetMeme にしよう♪

今日はブログ記事のツイート数を表示するウィジェットについてのお話です。

これまでは

使うようになったきっかけは忘れてしまいましたが、ブログ記事のツイート数の表示には Topsy を使っていました。しかし、表示が遅く、精度もイマイチ良くないと感じていました。

backtweets

そんなとき、以下の記事を読みました。

はてなダイアリーのツイートボタンと、記事のコメントをもれなくチェックするbacktweets - #RyoAnnaBlog エゴサーチは便利だが、公式の検索であるため、やはり抜けが多い。すべてのコメントをチェックする事ができない。なにか良いサービスはないか。今までずっと探してきて、ようやく発見したのがbacktweetsだ。

backtweets のトップページに、”Check out our Tweetcount Widgets" というリンクを発見しましたので、張り切ってこのブログに組み込んでみました。

Blogger で backtweets のウィジェットを表示するコードは以下の通りです(詳細はこちら)。

<script type='text/javascript'>
  tweetcount_url = '<data:post.url/>';
  tweetcount_title = '<data:post.title/>';
  tweetcount_src = 'RT @BackType:';
  tweetcount_via = false;
  tweetcount_links = true;
  tweetcount_size = 'large';
  tweetcount_background = 'DE7008';
  tweetcount_border = 'CCCCCC';
  tweetcount_text= 'F5DEB3';
</script>
<script src='http://widgets.backtype.com/tweetcount.js'
    type='text/javascript'/>

なかなか良さそうです。少し試した感じでは、Topsy より精度が高いようです。表示も Topsy より早いと思います。

しかし、Topsy で発見できていて、backtweets で発見できていないツイートもあるようでした。 backtweets はボタンの色を指定できるのが気に入ったのですが、残念です。

TweetMeme

そういえば、TweetMeme というのを使っている人を見たことがあるなと思い出しました。

試してみると、Topsy で発見できているツイートと backtweets で発見できているツイートの両方を発見できているようです。

Blogger に表示するコードは以下の通りです(詳細はこちら)。

<script type='text/javascript'>
  tweetmeme_url = '<data:post.url/>';
  tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js'
    type='text/javascript'/>

ということで、ツイート数の表示には TweetMeme を使うことにしました。

[MarsEdit] Zen Coding で高速 HTML コーディング！

さて、サービスメニュー第2弾は、MarsEdit 用 Zen Coding プラグイン(？)です。

Zen Coding とは

Zen Coding は HTML や XML、CSS を高速編集するためのライブラリです。

zen-coding - Project Hosting on Google Code Zen Coding — a new way of writing HTML and CSS code Follow us on Twitter @zen_coding Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. Zen Coding のプロジェクトサイトです。

たとえば、

div#page>div.logo+ul#navigation>li*5>a

を以下のように展開してくれます。
(以下のコードは今回のプラグインで生成しました。めんどくさいのでｗ)

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

Zen Coding の記法の詳細については こちら をご覧下さい。

Zen Coding のプロジェクトサイトではいろいろなエディタ向けのプラグインが公開されていますが、残念ながら MarsEdit 用のプラグインはありません。

そこで、Zen Coding v0.6 の Python 実装を組み込んだサービスメニューを MarsEdit 用に作成しました。

導入手順

1. サービスワークフローの Zip アーカイブをダウンロードする

こちらからダウンロードしてください。

2. Zip アーカイブを展開する

Zipアーカイブを展開すると "Zen Coding.workflow" ファイルが作成されます。

3. ワークフローファイルを /Users/(ログインアカウント)/Library/Services にコピーする

Finder で見ると以下のパスです。


4. キーボードショートカットを設定する

システム環境設定でキーボードショートカットを設定しましょう。

実行例

実行例は 2 つあります。

その1

MarsEdit のエディタを開いた状態で Zen Coding を起動すると、入力を求めるダイアログボックスが表示されますので、省略形を入力して OK ボタンを押してください。

ダイアログボックスに表示されている例を入力した場合、以下のような展開結果がエディタに挿入されます。

その2

選択したテキストにタグ付けをすることもできます。
ここでは番号なし箇条書きのマークアップをしてみましょう。

省略形として "ul>li*" と入力します。

すると、なんと！番号なし箇条書きのマークアップの完成です。

あとがき

ブログを書く場合に使用する HTML タグのほとんどは、階層構造をもたない単純なものになると思います。そのようなタグについては、MarsEdit のマークアップマクロで十分です。
(マークアップマクロの方が早いですし)

Happy-Go-Lucky: MarsEdit のマークアップマクロで簡単マークアップ マークアップマクロを使用することで素早く簡単にマークアップを行うことができます。

しかし、箇条書きやテーブルを使用する場合は、マークアップマクロよりも Zen Coding の方が素早くマークアップを行うことができます。
(現状では、テーブルは一行ずつマークアップすることになると思いますが。)

最初は記法を覚えるのに時間がかかるかもしれませんが、Zen Coding の記法は CSS のセレクタ構文のサブセット+αですので、CSS セレクタ構文がわかっている方ならすぐに覚えられると思います。

なお、ZenCoding v0.6 では、m行n列のテーブルを一発で展開することができませんが、現在 developer preview として公開されている v0.7 では "table>(tr>td*n)*m" と書くことができます。 v0.7 の正式版がリリースされたら、 MarsEdit プラグインにも組み込みたいと思っています。

[Firefox] Googleリーダーで全文表示+α

1月に Mac OS を Snow Leopard にアップグレードしてから、Reeder for Mac を使い始めました。 記事の表示スピードが速く、表示もキレイで気に入っています。

特に Readability は便利です。 全文配信をしていない RSS フィードを全文表示してくれますから。 元記事を表示するよりも早いらしいですよ。 ただし、すべてのフィード(サイト)で Readability が使用できるわけではないようです。

Mac では Reeder を愛用していますが、Windows で RSS を読むこともあります。 Windows では Firefox で Google リーダーにアクセスするのですが、全文配信していない記事が気になった場合は元サイトを開くことになり、それが面倒で読まないこともあるのです。

Google Reader Full Feed Mod

何とかならないものかと探してみたところ、 Google Reader Full Feed Mod という Greasemonkey スクリプトを発見しました。

Googleリーダーでアイテムの全文を表示します。 また、そのアイテムの元記事に次のページがある場合、次ページの全文を継ぎ足し表示できます。 Firefox 3.5以降に対応。

まさに探し求めていたものです。 しかも複数ページの場合に継ぎ足しまでしてくれます。 さらに、その記事の被ツイート数、はてブ数、delicious ブックマーク数も表示してくれます。

スクリプトのページから引用しつつ画面イメージと共にご紹介します。

基本

Googleリーダーの「リスト表示」モードでアイテムを開いたとき、もしくは「全文表示」モードでアイテムを選択したとき、アイテム名の右隣に表示されるアイコンをクリックするかキー（デフォルト：Zキー）を押すと、そのアイテムの全文を表示します。

継ぎ足し

次のページがある場合、再びアイコンをクリックするかキーを押す、もしくは下のほうへアイテムをスクロールすると、次ページの全文を継ぎ足し表示します。

注意点

初回利用時にwedataのLDRFullFeedデータベースとAutoPagerizeデータベースの全アイテムをJSON形式で取得して、キャッシュとして保存します。
このキャッシュがないと全文表示や継ぎ足し表示ができないため、初めて利用するときサーバーからキャッシュを読み込めなかった場合、wedataについてなどのページを一度開いてみて、wedataのサーバーが落ちていないか確認してください。
キャッシュを保持していればwedataのサーバーが落ちていても問題ありません。

about:configの「dom.storage.enabled」がfalseになっている場合はtrueにしてください。

残念ながら Google Chrome では動作しない

Works with Firefox 3.5+ with Greasemonkey.

とのことです。

まとめ

Readability と同様、すべてのページで全文表示ができるわけではありませんが、Firefox での RSS 閲覧が快適になると思います。

Firefox ユーザの方はぜひお試し下さい。

MarsEdit のプレビューにブログの CSS を適用する

MarsEdit のプレビューにブログの CSS を適用すると、記事を書きながらブログ上での表示を確認することができますよ、というお話です。

Preview Template を編集する

プレビュー画面の [Edit Template] ボタンを押すと、Preview Template の編集画面が表示されます。

内容は HTML ですので、ブログの CSS を反映させましょう。

このブログの CSS は単独のファイルになっていませんので、Blogger のテンプレート内から CSS を抜き出して Preview Template に反映させました。

あとがき

単純な話ですが、記事をアップする前にアップ後のイメージが確認できた方がよいですよね。

今回はそれだけの話です。

[Mac] どこからでも AppHtml を呼び出す - サービスメニュー版を作ってみたよ♪

MarsEdit などのブログエディタで記事を書いているときに Web ブラウザが起動していないこともありますよね。そんなときに AppHtml を使いたくなりました。でも、わざわざブラウザを起動するのは面倒です。

ということで、Bookmarklet をサービスメニューとして実装(移植)してみました。

導入手順

1. サービスワークフローの Zip アーカイブをダウンロードする

こちらからダウンロードしてください。

2. Zipアーカイブを展開する

Zip アーカイブを展開すると AppHtml.workflow ファイルが作成されます。

3. (必要に応じて) Linkshare のサイト ID とテンプレ内の書式No.のデフォルト値を設定する

Finder で AppHtml.workflow をダブルクリックしてください。 Automator が起動して、AppHtml.workflow の内容が表示されます。

Linkshare のサイト ID とテンプレ内の書式 No. を設定する場所は以下の画面の通りです。


4. ワークフローファイルを /Users/(ログインアカウント)/Library/Services にコピーする

Finder で見ると以下のパスです。


5. キーボードショートカットを設定する

システム環境設定でキーボードショートカットを設定しましょう。キーボードから AppHtml を呼び出せるようになります。

実行例

表示される画面は Bookmarklet 版と基本的には同じです。

AppHtml を起動するとアプリ名の入力画面が表示されます。

テキストボックスの内容は AppHtml 起動時のクリップボードの内容です。アプリ名をクリップボードにコピーしてから AppHtml を起動すれば OK ボタンをクリック(キーボードの場合は return)するだけです。

次に、テンプレ内の書式No. の入力画面が表示されます。

お好みの番号が入力された状態にして OK ボタンをクリック(キーボードの場合は return)してください。

しばらくすると、見つかったアプリ名の画面が表示されますので、結果の HTML に含める場合は OK を、含めない場合は Cancel ボタンを選択してください。

最後に結果画面が表示されます。

テキストボックスの内容をクリップボードにコピーして、ブログエディタなどにペーストしてください。

あとがき

今回のワークフローの Yahoo! Pipes へのリクエスト以降の処理は Python で実装しました。

最初は AppleScript と Python で実装しようとしていましたが挫折しました。 配布を考えると一つのファイルにしたくて、AppleScript 内に Python スクリプトを書いていたのですが、 引用符のエスケープがどうしてもうまくいかなくて(^^ゞ

まあ、しかし、今回のワークフローの実装を通して、AppleScript や Automator の面白さがわかってきました。(^^♪

最新情報はこちら: Happy-Go-Lucky: MarsEdit