Firefox で投稿編集ができない問題を修正する Greasemonkey スクリプト

現在、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 にもカレンダー

コードをハイライトする「Code Prettify」ウィジェット

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

• すぐに忘れる脳みそのためのメモ: 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 追加ボタンの作り方