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

このエントリーをはてなブックマークに追加 Pocket

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

これまでは

Topsy.jpg

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

backtweets

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

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

backtweets.jpg

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 というのを使っている人を見たことがあるなと思い出しました。

TweetMeme.jpg

試してみると、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 コーディング!

このエントリーをはてなブックマークに追加 Pocket
Fastest writer on the world.jpg

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

Zen Coding とは

zen-coding-logo.png

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

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

<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. こちらからダウンロードしてください。

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

  5. ワークフローファイルを /Users/(ログインアカウント)/Library/Services にコピーする
  6. Finder で見ると以下のパスです。

    ServicesPath2.jpg
  7. キーボードショートカットを設定する
  8. システム環境設定でキーボードショートカットを設定しましょう。

    KeyboardShortcut2.jpg

実行例

実行例は 2 つあります。

その1

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

ZenCodingInputDialog.jpg

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

MarsEditZenCodingExample.jpg

その2

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

MarsEditZenCodingExample2.jpg

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

MarsEditZenCodingExample3.jpg

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

MarsEditZenCodingExample4.jpg

あとがき

ブログを書く場合に使用する 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リーダーで全文表示+α

このエントリーをはてなブックマークに追加 Pocket
google-reader-logo.png

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

特に Readabifirefox-256.pnglity は便利です。 全文配信をしていない 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キー)を押すと、そのアイテムの全文を表示します。
GoogleReaderFullMod1.jpgGoogleReaderFullMod2.jpg

継ぎ足し

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

注意点

初回利用時に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 を適用する

このエントリーをはてなブックマークに追加 Pocket
MarsEdit3Icon128.png

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

Preview Template を編集する

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

MarsEdit_Preview.jpg

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

MarsEdit_PreviewTemplate.jpg

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

あとがき

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

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

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

このエントリーをはてなブックマークに追加 Pocket

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

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

導入手順

  1. サービスワークフローの Zip アーカイブをダウンロードする
  2. こちらからダウンロードしてください。

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

  5. (必要に応じて) Linkshare のサイト ID とテンプレ内の書式No.のデフォルト値を設定する
  6. Finder で AppHtml.workflow をダブルクリックしてください。 Automator が起動して、AppHtml.workflow の内容が表示されます。

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

    AppHtml.workflow.jpg
  7. ワークフローファイルを /Users/(ログインアカウント)/Library/Services にコピーする
  8. Finder で見ると以下のパスです。

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

    AppHtml_Shortcut.jpg

実行例

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

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

InputAppName.jpg

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

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

InputTemplateNumber.jpg

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

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

AppResult.jpg

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

AppHtmlResult.jpg

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

あとがき

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

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

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

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

MarsEdit のマークアップマクロで簡単マークアップ

このエントリーをはてなブックマークに追加 Pocket

R-style さんで進行中の 【企画】「あなたのBlog術教えてください!」企画第二回 にエントリしてみようと思います。

こちらの記事と同様、エディタの使い方です。

今回はブログエディタ MarsEdit で HTML マークアップを簡単にしてしまおうというお話です。

マークアップマクロ

MarsEdit にはマークアップマクロという機能があります。マークアップマクロは HTML テキスト編集モードで使用するものです。

エントリ編集画面を選択した状態で、MarsEdit のメニューから Format > Edit を選択すると以下の画面が表示されます。

MarkupMacros.jpg

デフォルトでは、これだけのマクロが定義されています。では、Paragraph マクロの内容を見てみましょう。Paragraph マクロを選択して Edit ボタンをクリックしてください。

ParagraphMacro.jpg

Paragraph マクロは p タグを挿入するだけです。

それなら TextExpander と同じじゃないか!となりますが、マークアップマクロでは、マクロ実行時に選択されているテキストをマクロ内に含めることができるのです。

マクロ編集画面下部の [Insert Placeholder] から「selected text」を選択すると、選択されたテキストを指定するキーワードが挿入されます。

ParagraphMacro2.jpg

では、Paragraph マクロを実行してみましょう。以下のようにテキストが選択された状態で Paragraph マクロを実行すると、

SelectedText.jpg

一瞬で p タグを付けることができるのです。

SelectedText2.jpg

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

マークアップマクロにはキーボードショートカットを設定することができます。 やはりマウスよりキーボードの方が早く操作できます。

マークアップマクロの編集画面で [Shortcut] 欄をクリックして、お好みのキーをタイプしてください。

ParagraphMacro3.jpg

なお、テキストの選択もキーボードで行ったほうが断然はやいです。以下のエントリをご覧下さい。

マクロ内に改行を含めたい場合

マクロ内に改行を入れようとして return キーをタイプしても、OK ボタンを押したことになり、マクロ編集画面が閉じてしまいます。

option キーを押しながら return キーを押せば、マクロ内に改行を入れることができます。

OrderedListMacro.jpg

私のマークアップマクロ

こんな感じです。

MarkupMacros2.jpg

まとめ

マークアップマクロを使用することで素早く簡単にマークアップを行うことができます。

お気に入りのテキストエディタで文章を書いた後にマークアップをする、というプロセスに適しているでしょう。

MarsEdit はマクロ以外に、AppleScript で機能拡張ができるようです。こちらは今後ゆっくりと調べていきたいと思います。

bit.ly短縮URLリンク作成ブックマークレット

このエントリーをはてなブックマークに追加 Pocket

@sta7ka さんがつぶやいていたので作ってみました。

bit.ly API による URL の短縮は Yahoo! Pipes で実装しています。bit.ly の API キーは秘密にしておいた方がよさそうだからです。

使用手順

  1. こちらのパイプをコピーしてください。
  2. パイプをコピーしたら、bit.ly のログインIDとAPIキーを Private String モジュールに入力してください。bitly_login+apiKey.jpg
  3. ブックマークレットをブックマークしてください。
  4. ブックマークレット内の「p = 'PIPES’」の部分をコピーしたパイプのURLに置換してください。
  5. ブックマークレットを実行すると、リンクテキストが表示されます。linkResult.jpg

結果はこんな感じになります。→ Happy-Go-Lucky

パイプはこれをコピーして少しだけ弄っただけですけどね( ̄ー ̄)ニヤリ