Blogger にスターレイティング



投稿を読者に評価してもらうための星マーク。
いろんなサイトやブログで目にするこの仕組み（スターレイティング）を、簡単に Blogger に導入できるウィジェットが登場しています。

• outbrain - Content Ratings & Recommendations

導入はまず、上記リンクを開き、「Blogger」マークのボタンを押して、「Select a language」欄で表示言語を選択後「Get Widget Now!」ボタンを押します。すると、Blogger のウィジェット追加画面が出るので、追加するブログを選択して、タイトルを空欄にかえて「ADD WIDGET」ボタンを押します。これだけで終了。


評価レポート

必須というわけではないんですが、outbrain サイトでユーザー登録をすると、自分のブログにどのような評価がついたのか、レポートを見ることができます。





「Ratings」は最近つけられた個別の評価を、「Total」は投稿ごとの平均値を一覧で表示します。レポートの必要な方は、outbrain - Register からユーザー登録をどうぞ。


クラシックテンプレートや FeedFlare にも対応

ちなみに、この outbrain のスターレイティングは、Blogger のクラシックテンプレートや、FeefBurner の FeedFlare に導入することもできます。Blogger ユーザーにとっては、実にいたれりつくせりという感じです。クラシックテンプレート用はこちらから、FeedFlare 用はこちらからどうぞ。


ということで、読者の評価が知りたい！という方は、ぜひ一度お試し下さい。

現在、Firefox 利用時に、 Blogger の投稿編集画面のタイトル入力欄のラベルが正しく表示されないという問題が起きています。



「タイトル:」の文字が縦に並んでいるぐらいならたいしたことはないんですが、そのせいで「ボールド（太字）」「イタリック（斜体）」など、投稿編集に使う全てのボタンが押せなくなっています。つまり、Firefox を利用していると、新規投稿に画像もリンクもつけられないということ。早速

ブラウザの文字サイズをでかくするか、BloggerのUIを英語で表示させるようにすると機能するようになりました。

帰ってきた龍司流: MacでbloggerのWYSIWYGが動かなくなって

という解決策を発見された方もいますが、クリボウも一つ別の解決策を紹介しておきます。それが「タイトル:」ラベルを正しく表示させるユーザースクリプトを使う方法。単純なスクリプトなんですが、いつもどおりに Blogger を利用できるのがメリットです。導入は、下のリンクを Greasemonkey の入った Firefox で開き「インストール」ボタンを押すだけ。よかったら使ってみてください。

• fix_japanese_label.user.js

追記：

2008-04-22 にこの問題は修正されたようです。ようやく安心して投稿できるようになりましたね。

たくさんの人に利用してもらっている「カレンダーウィジェット」なんですが、いつの間にやら正しく動かなくなっていたようです。

いままであまり気にしてなかったのですが、今日になってカレンダーの日付をクリックしてもページが切り替わってない事に気が付きました。
でも、試しに自分のページにPOSTすると怪しげなJavaScriptが返ってきます。

取得したJavaScriptを実行できてないのかな～と JavaScriptの解説ページを見ながらコードを追う事3時間、実はエントリを1件ずつ表示させているときだけ動作しているということに気付きました。

tauchi.net: カレンダーの秘密

と書かれているように、記事単独ページ以外では、投稿のある日付をクリックしても、画面が切り替わらなくなっていたようです。Blogger の仕様が変わって、トップページ、アーカイブページ、ラベルページ、検索ページから画面切り替えのコードが利用できなくなったのが、原因のよう。

そこで、カレンダーウィジェットのコードを修正しました。ブログの本文書き換え用コード（ブログごとに異なる）を記事単独ページからとってきて、トップページやその他のページでも利用できるようにしています。ついでに、カレンダーをこれまでは検索結果から作っていたんですが、新しいコードでは JSON フィードから作ることにしました。そのため、表示もわずかに速くなっているはず。

ゴチャゴチャと書きましたが、ともかくちゃんと動くようになったということ。「使えないなあ」と諦めた人も、これから初めて導入する人も、ぜひぜひ「カレンダーウィジェット」をお試しください。すでに設置中の方は、ウィジェットを追加しなおす必要はないので、そのままご利用くださーい。

• クリボウの Blogger Tips: Blogger beta にもカレンダー

久しぶりに、新しいウィジェットを作成してみました。
参考にしたのはこちらです。

• すぐに忘れる脳みそのためのメモ: Blogger でソースコードに色付けをする - google-code-prettify
• Learning Log Book: Bloggerでシンタックス・ハイライト

今回のウィジェットは、ブログ内でコードを紹介するときに、自動的にハイライト表示するためのもの。Google の Code Prettify というツールを利用しています。Code Prettify で実際にどのようにコードが色分けされるのかは、デモページをご覧下さい。


導入方法

下の「Add to Blogger」をクリックすると、「ページ要素を追加」画面が開きます。ウィジェットを追加するブログを選択して、タイトルは空欄のまま、「ウィジェットを追加」ボタンを押してください。手順はこれだけです。

<style type="text/css"> @import "http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"; </style> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script> <script type="text/javascript"> function prettify() { prettyPrint(); } if (window.addEventListener) { window.addEventListener("load", prettify, false); } else if (window.attachEvent) { window.attachEvent("onload", prettify); } else { window.onload = prettify; }</script>

利用方法

投稿内で、色分けの対象にしたいコードを

<pre class="prettyprint">
（コード）
</pre>

のように記述するだけ。

< や > をコードとして表示したい場合には、それぞれ <、> に書き換えてください。面倒だという人は、下の変換ツールをどうぞ。

変換したいコードを上のテキストエリアに入力し、「変換」ボタンを押すと、下のテキストエリアに変換された文字列が表示されます。

注意：　JavaScript をオンにしてご利用下さい。

ということで、ぜひぜひご利用くださーい。


関連：

• Blogger beta の Widget 追加ボタンの作り方

ブログのサイドバーに、コメントをくれたユーザーのリストを表示するウィジェットが公開されています。
このウィジェットでは、コメントの多い順でユーザー名が表示され、リンクからそのユーザーの最新コメントにジャンプできるようになっています。

「クリボウの写真日記」のデータで作ってみると、こんな感じ。



ウィジェットの追加は、こちらのページからどうぞ。

• Blogger Buster: Top Commenter's Widget for Blogger Blogs!

「Create Your Top Commenter's Widget」フォームの「Widget Title」欄にリストのタイトル、「Blog url」欄にブログ URL を入力して（記入例: kuribo-photo.blogspot.com）、「Customize」→「Add to Blog」と順にボタンを押すと、Blogger の「ページ要素を追加」画面が開きます。
あとはそこから、「ウィジットを追加」ボタンを押すだけで、ウィジェットの追加が完了。

フォームの「Filter your name」欄に自分の Blogger ユーザー名を入力して、リストから自分の名前をはずすことも可能です。

このウィジェット、「Recent Comments」リストのそばに置くのもよさそうです。ということで、ぜひおためしくださーい。

YouTube に Blogger Help チャンネルが登場したというニュースが、Blogger Buzz に出ていました。

• Blogger Buzz: Blogger Help Videos

そのチャンネルがこちら。

• YouTube - BloggerHelp's Channel

現在公開されているビデオは、「Blogger ブログの作り方」、「カスタムドメインの設定方法」、「プライバシー設定の仕方」の 3 本。いずれも Blogger の基本的な設定です。
この数ヶ月中に、ビデオは続々と増えていくそうなので、今後に期待です。

Blogger 設定の仕方を、Blogger Help の記事 だけでなくビデオでも確認できるとなると、とても便利ですね。とはいえ、英語なのがやはり一番の難点…。

ということで、英語に拒否反応のあまりない人だけ、ぜひどうぞ。

bloggerユーザーなのですが、携帯から閲覧する際、ドコモからだと正しく表示されないようです。
ドコモの端末から閲覧することは可能なのでしょうか？

Blogger、Blogger in Draft の行き来が楽になるユーザースクリプト「Draft Link」

という質問コメントをいただいていました。
残念ながら Blogger には、携帯端末用に自動で変換されるというような仕組みはありません。
そこで携帯からの閲覧には、ブログを携帯用ページに変換する別のツールが必要になります。


Google Mobile Proxy

もうみなさんご存知だと思いますが、Google には PC 用のウェブページを携帯用に変換してくれるツールがあります。それが「Google Mobile Proxy」。使い方は、サイトにアクセスしてブログの URL を入力するだけ。

「クリボウの写真日記」を通してみたのがこちらです。リンク先や画像も、見事に携帯用に変換されています。ウェブページを直接変換しているので、シンプルなテンプレートのブログに最適だと思います。


Blogger Mobile Viewer

もう一つが、最近リバーストーンから登場した「Blogger Mobile Viewer」というツールです。

http://moblogger.r-stone.net/blogs/3423845782531267485

というように「http://moblogger.r-stone.net/blogs/」という URL の後に、自分のブログの ID 番号を付け足してアクセスすると、ブログが携帯用に表示されます。
こちらはブログそのものではなくて、ブログのフィードからページを作っている模様。テンプレート部分は全く表示されず、ブログタイトル、投稿タイトル、本文、コメントだけが見られます。画像は 300px までに縮小されるみたいです。コメント投稿も可能のようですが、未確認。

このブログだとこんな感じです。テンプレート部分がごちゃごちゃとしていて、Google Mobile Proxy だと内容がわかりにくくなってしまうブログには、こちらがいいかも。


ということで、更新の気になるブログには、これらのツールを使ってみてくださいね。
PC 使わないよという友人に、自分のブログの変換後の URL を教えるという手もありですね。

参考：

• リバーストーン｜ Company Blog: Blogger Mobile Viewer
• clmemo@aka: Google Mobile Proxy