[Mac] TotalFinder で Finder をパワーアップ

私は普段、 Mac で込み入った作業をそれほどするわけではないので、Finder に大きな不満はありませんでした。

それでも、大分前のものですが以下のエントリは気になっていました。

Mac OS X の Finder を大幅強化する TotalFinder - Lifehacking.jp 分室
Finderにタブがつくだなんて！ まだまだラフなアプリですが、Finder にさまざまな追加機能を加えることを目的にしています。もっと安定したアプリをお望みの場合は PathFinder を試してみることをおすすめします。

PathFinder も気になりますが、 結局 TotalFinder を試験導入してみました。

TotalFinder brings tabs to your native Finder and more!
シングルライセンスは $15、3ライセンスパックは $30 です。

PathFinder ではなく、TotalFinder を試してみようと思った理由は以下の 2 つです。

1. PathFinder も TotalFinder も機能的にそれほど大きな違いはない。言い換えれば私は TotalFinder の機能で十分。
2. PathFinder は単独のアプリであるのに対し、TotalFinder は Finder のプラグインであるため、リソース使用量がより少ないのではないかという期待がある(未検証)。

TotalFinder の機能

Google Chrome のようなタブ

複数のフォルダを一つのウィンドウにまとめることができます。 Finder のウィンドウが多くなって目的のフォルダのウィンドウを探すのに時間がかかるということがなくなります。

2 つの Finder ウィンドウを並べて表示する Dual Mode

タブをダブルクリックするかキーボードショートカット ⌘U で、隣り合うタブの内容が並べて表示されます。 所謂二画面ファイラというヤツです。 ファイルのドラッグ＆ドロップが楽ですね。

フォルダをまとめて表示

Windows の Explorer のように、フォルダを上位にまとめ、その後にファイルが並ぶようにできます。 これは好みの問題でしょうかね。

設定画面は以下の通りです。 キーボードショートカット ⇧⌘; で ON/OFF を切り替えることができます。

不可視ファイルの表示

デフォルトでは表示されない不可視ファイル(システムファイル)の表示/非表示を切り替えることができます。

キーボードショートカットは ⇧⌘. です。

バイザー

これは気に入りました。

バイザーはシステムワイドな Finder ウィンドウです。 ホットキーで Finder ウィンドウの表示/非表示を切り替えることができます。

設定によって、バイザーからフォーカスが外れた際に自動的に非表示にすることも、表示されたままにすることもできます。

画像だけではわかりにくいので、動画を用意しました。

シュルシュルっと出てくるのがステキです。

その他の細かな機能

TotalFinder の導入よって、選択したファイルのパスをクリップボードへのコピーや、ファイル/フォルダのコピー＆ペースト(カット＆ペースト)も可能となります。

地味ですけど、便利な機能だと思います。

あとがき

所謂ファイラというのは、地味ですが作業効率に影響を与えるアプリケーションだと思います。 出来ることならばファイルという存在を意識しないで済めばよいのですが、現代の OS ではそうはいきません。 ファイル操作を快適にすることは地味に効いてくるはずなのです。

私は多分 TotalFinder を買いますね。 PathFinder も試してみたいとは思いますが。

Reader2Twitter が不調なので似たようなものを作ってみた

最近、Twitter の TL で Reader2Twitter(Google2Tweet)の調子が悪いというツイートをよく見かけます。 私も以前から Reader2Twitter が正常に動作したり、ツイートされずに後で Google リーダーの共有を追加した際にまとめてツイートされたりという状況を確認していました。

そこで、Yahoo! Pipes と FeedBurner で Reader2Twitter に似たものを作ってみました。

導入方法

Google リーダーの共有アイテムの Number ID を確認する

Google リーダーの共有設定の「カスタム URL を選択してください」セクションに表示されている URL 中の番号が Number ID です。

Yahoo! Pipes で加工した RSS フィードの URL を取得する

以下の手順でツイートする内容を設定した RSS フィードの URL を取得してください。

1. 共有アイテムの RSS を加工する Pipe のページ を開く
2. [NumberID] 欄にご自身の Number ID を入力する
3. [Format] 欄の内容をお好みで編集する(後述)
4. [Run Pipe] ボタンをクリックする
5. [Get as RSS] のリンクをコピーする

【[Format] 欄で使える予約語】

予約語	説明
${source}	サイトの名前
${title}	記事のタイトル
${comment}	Google リーダーで共有する際に入力したコメント

FeedBurner にフィードを登録する

FeedBurner の [新しいフィードを登録！] にフィードの URL を入力して [次へ>>] ボタンをクリックしてください。

[フィードタイトル] と [アドレス] は適当で構いません。

あとはひたすら [次へ>>] ボタンをクリックしてフィードの登録を完了させてください。

Twitter への投稿を設定する

次は Twitter への投稿設定です。

1. [集客支援]-[Socialize] を選択する
2. [Add Twitter account] ボタンをクリックして Twitter アカウントを登録する
3. その他の設定はデフォルトで OK(goo.gl による短縮 URL が付加されます)
4. [有効にする] ボタンをクリックする

以上で導入は完了です。 Google リーダーで共有アイテムを追加すると自動的に Twitter に投稿されるようになります。

あとがき

内部の解説もしようかと思ったのですが割愛します。 hiro45jpさんの Yahoo! Pipes 講座 を読めばわかりますよｗ

Zen Coding v0.7 for MarsEdit - Zen Coding がパワーアップ！

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

3/13 に Zen Coding v0.7 がリリースされました。

ということで、早速サービスメニューに組み込んでみました。

ダウンロード

今回のバージョンアップで以下の点が変更されています。

• グループの繰り返し
• テキストノードの指定
• 選択テキストに対する置換の強化
• 省略形のユーザ設定

グループの繰り返し

グループの繰り返しとは、複数の要素を '(' と ')' で括ったグループを指定回数だけ繰り返すものです。

dl>(dt+dd)*4

が以下のように展開されます。

<dl>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
</dl>

テキストノードの指定

Zen Coding への入力にテキストノードを指定することができるようになりました。

a[href=/]{Click here}

が以下のように展開されます。

<a href="/">Click here</a>

選択テキストに対する置換の強化

選択テキストの位置指定

選択したテキストの展開後の位置を $# で指定できるようになりました。

一行目
二行目
三行目

というテキストに対して、

ul>li*>span{$#}+{ }+a[title=$#]{$#}

は以下のように展開されます。

<ul>
	<li>
		<span>一行目</span> 
		<a href="" title="一行目">一行目</a>
	</li>
	<li>
		<span>二行目</span> 
		<a href="" title="二行目">二行目</a>
	</li>
	<li>
		<span>三行目</span> 
		<a href="" title="三行目">三行目</a>
	</li>
</ul>

箇条書きのマーカーを削除する trim フィルター

例えば、以下の記述を HTML マークアップする際に、

1. list item one
2. list item two
3. list item three

trim フィルター(|t)を指定すると1. などのマーカーを削除してくれます。

ol>li*|t

と指定すると以下のように展開されます。

<ol>
	<li>list item one</li>
	<li>list item two</li>
	<li>list item three</li>
</ol>

trim フィルターで認識するマーカーは "数字"/"#"/"-"/"*"/"・" です。

前後にスペースがあっても認識されます。

正規表現では

^([\s|\u00a0])?[\d|#|-|*|\u2022]+\.?\s*

です。

u2022(BULLET) はうまく動きませんでした。

省略形のユーザ設定

ホームディレクトリ(~/)に

my_zen_settings.py

というファイル名でユーザ定義の省略形を定義できるようになりました。

my_zen_settings.py の例は以下の通りです。

my_zen_settings = {
    'variables': {
        'myname': 'toshiya240'
    },
    'html': {
        'extends': 'common',
        'filters': 'html',
        'snippets': {
        },
        'abbreviations': {
            'a': '',
            'a:name': ''
        }
    }
}

ここはちょっと難しいですね。variables や snippets について説明しないと（；^ω^）

あとがき

今回のバージョンアップではグループの繰り返しと trim フィルタがブログ執筆の際には役立ちそうだと思います。

Zen Coding には省略形の展開以外にも機能があるのですが、MarsEdit の外部インターフェースが貧弱なので実装が難しいのが現状です。

他のエディタならばもう少し機能を盛り込むことができるかもしれません。 MarsEdit は外部エディタを起動することができるのでそんな方向性もアリかと思っていますが、 現状では Mac でそれほど多くの作業を行うわけではないので、 有償の高機能なエディタを購入する予定もありません。

無償のエディタで何か検討してみようかな...

あとがき2

今日はこの記事を書き始めたときに静岡県東部を震源とした地震が発生しました。

まずはアクションが必要か様子を窺い、緊急の対処が不要であることを確認してからこの記事の執筆を再開しました。

依然として予断を許さない状況ですが、冷静に対処したいと思います。

tweet している余裕は私にはありませんでした（；^ω^）

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 プラグインにも組み込みたいと思っています。