ブログパーツ内でGoogleガジェットが文字化けしてしまったので、がんばって直しました 他

さて、何とかブログを書くシキイを下げようと奮闘中のskykですが。
とりあえず、ブログパーツなんかをいじってみようと思い立ちました。
それも、お仲間である立教立花組の皆様の更新がすぐわかっちゃうようにして、
自分にプレッシャーをかけよう、という。


ところが。
当然のことながらすんなりとはいかず、ちょっと苦労いたしましたので、せっかくだから経過をまとめてみることにしました。


「立教立花組の構成員ブログの更新履歴を表示するブログパーツを入れたい」というのが今回のお題です。
このお題にそって起こった出来事を時系列で記述しております。

はてなで使えるブログパーツは限られているが、Googleガジェットが使える

シンプル・機能的がウリのはてな、だからでしょうか。
こてこてのブログパーツは使えませんで、シンプルなものに限られます。
対応ブログパーツ一覧 - はてなダイアリーのヘルプ


20近いブログの更新履歴を表示するわけなので、リスト形式で表示できるフィードリーダーがいいだろうと、それっぽいものを探しますが……う〜ん、なさそう。
しかし、一番下に「Google Gadgets」の文字が!
これで一気に選択肢が増えました。
Google


「フィード リーダー」で検索をかけまして、ちょうどよいものを見つけました。
MyFeed
タイトル表示が可能で、大きさ設定や簡単なデザイン変更もできて、何よりシンプル!ワタシ好みです。

複数のフィードをまとめるには

しかし、MyFeedだとフィードを一個しか指定できない……
フィードを一個にまとめないといけません。
そこで、検索して出てきたのが、こちらのMix Feedです。
これを利用しまして、フィードをまとめてひとつにすることに成功しました。
『MixFeed』サービス終了のお知らせ
20個までのフィードをひとつにまとめることができます。

(追 はてなRSSリーダーに登録して、新規グループに入れ、そのグループのフィードをとれば、まったく同じことができます。すべての戦いが終わった後で指摘され、脱力いたしました……)

「My Feed」設定の実際

さて、勢い込んでいざ!設定!
My FeedにMix FeedでまとめたフィードのURLを入れて、タイトル・デザイン・大きさを設定し、スクリプトをゲット!
(ちなみに横×縦を210×600pixelで設定しています。)
早速、管理−デザイン−デザイン編集−詳細デザイン設定のページのフッタ欄、サイドバー設定箇所に貼り付けて、設定完了!
狙ったとおりの表示でホクホク。


ちなみに、タイトルのリンク先はスクリプトの中にup_titleurl=という部分がありまして、ここの=の右側に
「:」を「%3A」、「/」を「%2F」に置き換えた(URLエンコードというらしいが、ピリオドはエンコードされてない)リンク先URLをおいてあげればOKです。
こちらのWeb便利ツール/URLエンコード・デコードフォーム - TAG indexエンコードしちゃうと便利ですが、ピリオドも変更されちゃいますね。
初期設定ではここ、http://japanese.engadget.com/にリンクが貼ってありまして、
「;」で囲まれて「;up_titleurl=http%3A%2F%2Fjapanese.engadget.com%2F&」とかいてあります。


例) タイトルのリンク先をはてなに変えたい
1. はてなのURLをURLエンコードの表現に変える

http://www.hatena.ne.jp/ → http%3A%2F%2Fwww.hatena.ne.jp%2F

2. 「;」で囲まれた「;up_titleurl=http%3A%2F%2Fjapanese.engadget.com%2F&」部分を置き換える

;up_titleurl=http%3A%2F%2Fjapanese.engadget.com%2F& →
;up_titleurl=http%3A%2F%2Fwww.hatena.ne.jp%2F& 
      • 最後の「&」はアンパサンドといって、なくてもいいらしいけれどよくわからないので残しておきました。

GoogleガジェットがIEで文字化けすることがある

しかし!ここからが本番です。


うちのブラウザはFireFoxなので、一応IEでも表示確認をしたところ、
タイトルが完全に文字化け! なんちゃわかりません。


で、友人の協力も得ましてたどり着いたのがこちら。
はてなアイデア
要は、スクリプトの最後に「charset="UTF-8"」と書き加えればいいのです。
スクリプトは、

<script  src="http://gmodules.com/ig/ifr?url=http://mestalla. …

とはじまっていて、ザーッと右にスクロールしていくと、

… ;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

と終わっています。この終わりのところに

… ;country=ALL&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"
charset="UTF-8"></script>

と付け加えるわけです。


やった!IEでも文字化けがなくなった!
ところが。

RSSフィード文字コードが違うと、文字化けしたり表示されなかったりする

よくよくみていると、どうも一部のブログの更新履歴が表示されていない!
……なんだよ、もう一山あるのかよ!orz
そんで、この山がでかかった。


立教立花組の構成員はそれぞれ好きなブログ・ホスティング・サービスを勝手に使っております。
で、それぞれのブログサービスが扱っている日本語の文字コードが異なっているのです。
(参考:多国語で書けるブログはどこ?ブログ124サービス【文字コード】全チェック[絵文録ことのは]2005/05/09)
しかも、最高に紛らわしいことに、同じブログサービスでも、ブログの文字コードとフィードの文字コードが違ったりするらしい。


で、いろいろあったのだが、
gooブログが出しているフィードだけEUCのようで、これがちゃんと表示されない……ということが判明。
仕方がないので、gooが提供しているRSS作成サービスというやつに、ブログページを読ませてフィードを出しなおさせることにした。
http://fm.goo.ne.jp/
これをもう一度MixFeedに設定しなおして、完了!
ようやっとブログパーツの完成を見たのでした。


おしまい。


追記:5/2 23:00現在、はてなRSSでフィードをまとめたものを上に、MixFeedでまとめたものを下に並べて機能比較をしております。


追記2:5/3 23:00、機能比較終了。MixFeedのほうがうまく拾うようなので、MixFeedを残します。ちなみに、MyFeedの代わりにはてなモジュールRSSモジュールも試してみたけど、あの見た目はちょっと嫌いなのでやめました。