Home > 2006-11
2006-11
ずっと前に、Blogger にもカレンダーという記事を書いたんですが、今日はその Blogger beta 版です。まずこちらの記事をお読み下さい。
日付の表示が 火曜日, 11月 21, 2006 みたいな設定じゃないと使えない＞＜
という難はあるものの、素晴らしいアイデアが満載のカレンダーです。ポイントを挙げてみると…
- 画面上に表示されている投稿以外も、カレンダーに表示できる
- ブログのアーカイブページの形式を変更する必要がない
- 日付を選択すると、その日に書かれた投稿を画面遷移なしで表示する
- 日付ごとの投稿データは、Blogger beta のブログ内検索で取得
- 同一ページ内への結果表示は、Blogger beta の書き換えスクリプトを使用
クリボウ式カレンダー
今回は完全に便乗しているので、クリボウのオリジナリティというものはないに等しいんですが、一応区別してクリボウ式と名づけておきます。最初(′З｀) さんのものを 2006-11-24 形式のデートヘッダーにも対応させようと思ったんですが、コードが難解で見事に挫折…。ならばと Bloglendar ベースから JSCalendar ベースにして最初から書いてみました。挙動は(′З｀) さんのものと全く同じ…はずです。こちらは、今のところ 2006-11-24 形式のデートヘッダーにしか対応していません。
 | このカレンダーの導入方法はというと… 上のボタンを押して、ウィジェット追加画面で「ウィジットを追加」ボタンを押すだけ。うーん、こういう時にウィジェット追加ボタンは便利ですね。 |
 | 左の画像のような、英語表記版もあります。こちらはクリボウの Blogger beta 実験ブログに貼り付けてあるので、実際にクリックして確かめてみて下さい。 上のボタンを押し、ウィジェット追加画面で「ウィジットを追加」ボタンを押すと導入できます。 |
更新（2006-11-27） - デフォルトの日付変更
青い印が最後にエントリーした日付ではなく現在の日付についていたほうがうれしいんですが、一般的にはどうなんでしょうか？
カレンダーが表示されたときに、最初に印がついている日付のことですね。たしかに、今日の日付に印がついている方がわかりやすいですね。…ということで早速変更しました。ご意見ありがとうございました。
追記（2006-11-27） - カレンダーのサイズ変更
前から設置したかったので、念願かなって☆という感じです（・ω・*）ただ、このカレンダーが 「ねこ日記」 にはとサイズが大きめで・・・
| カレンダーの横幅は、Blogger beta 管理画面「テンプレート ＞ ページ要素」からカレンダーウィジェットの「編集」リンクをクリック、 #calendar-container {width:200px;} の赤字部分を編集することで、変更することが出来ます。 同じようにカレンダーのサイズで困っている方は、ぜひお試し下さい。ちなみに右の画像は、「160」にしてみたものです。 |  |
追記（2006-11-30） - カレンダーのテーマ変更
JSCalendar には、デフォルトの Aqua を含め 10 種類のテーマがあります。
カレンダーに適用されるテーマを変更するには、Blogger beta 管理画面「テンプレート ＞ ページ要素」からカレンダーウィジェットの「編集」リンクをクリック、
@import url("http://tools.kuribo.info/jscalendar-1.0/skins/aqua/theme.css");
の赤字部分を、好みのテーマの CSS ファイル名（ナントカ.css）に書き換えて下さい。
Aqua aqua/theme.css | Winter calendar-blue.css |
Blue calendar-blue2.css | Summer calendar-brown.css |
Green calendar-green.css | Win2k-1 calendar-win2k-1.css |
Win2k-2 calendar-win2k-2.css | Win2k-cold-1 calendar-win2k-cold-1.css |
Win2k-cold-2 calendar-win2k-cold-2.css | System calendar-system.css |
JSON
Blogger beta ブログの情報が JSON 形式で受け取れるようになりました。
?alt=json を加えるだけでアクセスすることができます。http://*****.blogspot.com/feeds/posts/full?alt=json
http://*****.blogspot.com/feeds/*****/comments/full?alt=json
みたいなコメント情報でも使えますし、http://*****.blogspot.com/feeds/posts/full/-/*****?alt=json
以前お伝えしたラベルフィードでも使えます。これらの JSON の具体的な扱い方についてはこちらをご覧下さい。
JSON-in-Script
フィード URL の末尾につけるパラメータを
?alt=json-in-script&callback=***** にすると、もっと簡単にデータを取ってくることができます。上記の JSON だと別ドメインからはデータが取れませんが、これなら問題なし。callback パラメータには、データを受け取ったときに呼び出す JavaScript の関数名を指定します。http://*****.blogspot.com/feeds/posts/full?alt=json-in-script&callback=*****
http://*****.blogspot.com/feeds/*****/comments/full?alt=json-in-script&callback=*****
http://*****.blogspot.com/feeds/posts/full/-/*****?alt=json-in-script&callback=*****
これらの URL がそのままスクリプト要素の src 属性で指定できる、ということがミソのようですね。この方式の例も、こちらにコードで示されているのでご確認下さい。
ブログでいろいろと面白いことができそう！と思いつつ、今のところ具体的には何も思いつかないクリボウなのでした…。「こんなの作ったよ」とか「こんなことに利用できない？」といったアイデアがあったら教えて下さいね。
先日 Blogger beta の rss.xml が Atom 1.0 な件という記事を書きましたが、その後 Apartment No.9 の waits さんからコメントをいただきました。
昨日位からWebmasterTools直ってますね。
rss.xmlはATOM Feedと認識されるみたいだけど、rss.xml、atom.xml共にエラーは出てないみたいです。
たしかに、ブログのルートの rss.xml はまだ Atom のままですが、Google Webmaster Tools（Google Sitemaps）でエラーは出なくなっていますね。
Blogger beta の Atom のバージョンが、Blogger で利用されている 0.3 に戻ったのかな？と思って（Atom 0.3 はサイトマップファイルとしてサポートされているので）確かめてみましたが、やはり 1.0 でした。
まだヘルプにも記述されていないので、はっきりとしたことはわからないんですが、どうやら Google Webmaster Tools でサイトマップファイルとして利用できるファイル形式に Atom 1.0 も加わるようですね。（最近 Yahoo! や MSN とサイトマッププロトコルを共同サポートしていくと発表されましたが、それと少しは関係しているのかな？）
そうだとすると…、Google Webmaster Tools に最初から Blogger beta の atom.xml を登録しておいてもいいわけです。Blogger でのサイトマップ設定が、Blogger beta に移行してもそのまま使えるというわけ。少しずつ beta 移行への敷居も低くなってきているようですね。
関連：Blogger beta と Google Webmaster Tools (Google Sitemaps)
関連：Blogger でも Google Sitemaps
先日、Blogger beta にラベル別投稿フィードが用意されている、という記事を書いたんですが、どうやら日本語のラベルでもフィードが作成されるようになったみたいです。
そこで今回作ってみたのは、ブログの投稿をラベルで絞りこんだ画面から、その内容のフィードに飛ぶブックマークレット。前回のようなツールを使わずに、簡単にフィードの URL が得られるので、重宝しそうな予感。
IE などで、フィードに直接飛ばれると困る（ダウンロード確認画面になったり）という場合には、文字入力ダイアログに URL を表示させるタイプをご利用下さい。
- Label Feed （ダイアログ版）
今回は、Blogger で table を使って表を書く方法です。久々に Blogger、Blogger beta 共通の話題。
| 英語（アメリカ合衆国） | 日本語（日本） |
|---|---|
| About Me | 自己紹介 |
| View my complete profile | 詳細プロフィールを表示 |
| Labels | ラベル |
| Blog Archive | ブログのアーカイブ |
| Subscribe to: Posts (Atom) | 登録: 投稿 (Atom) |
| Subscribe to: Post Comments (Atom) | 登録: コメントの投稿 (Atom) |
| Newer Post | 次の投稿 |
| Older Post | 前の投稿 |
こういう感じの表がパパパッと（多分）かけちゃいます。ちなみにこの表は、Blogger beta の日本語化で、ブログ内の情報がどう日本語になったのかを書き出してみたもの。
テーブルタグを書きます
まずは、Blogger（beta も可）の新規投稿画面もしくは投稿編集画面で「HTML の編集」タブを選んで
<table border="1"><td>TABLE</td></table>
と記入。HTML 的にこれはおかしいんですが、「作成」タブを選んだあと、再び「HTML の編集」タブに戻ってみると…
<table border="1"><tbody><tr><td>TABLE</td></tr></tbody></table>
と足りないタグを補ってくれています。Blogger 賢いですね。
| TABLE |
これだけだと、上記のような一つのセルしかないテーブルになります。
テーブルを編集する
セルの追加や削除、セル内の文字列変更といったテーブルの編集については、HTML タグをいじる必要が全くありません。「作成」タブを選んでテーブルを表示させ、セルをクリックしてみるとこのような表示に変わります。
この見慣れない丸や三角、四角の意味は次のとおり。
 | … ドラッグ＆ドロップすることで、セルの大きさを変更します。 |
 | … クリックすると、その方向に一列（一行）挿入されます。 |
 | … クリックすると、その列（行）が削除されます。 |
| （セル内） | … クリックすると、そのセルにカーソルが移動。文字列を変更することができます。 |
行や列の挿入をすると、追加されたセルにカーソルが自動的に移ります。Tab キーや Shift + Tab で入力セルを移動することも可能です。
こういった Blogger の Table 編集、使いこなせると便利そうですね。最初のテーブルタグを書かずにすんだら、もっともっと便利なんですが…。
おまけ
テーブルの枠線やパディングの設定は、やはり HTML でないと設定できません。興味がある人は、こちらを参考にしてください。
Blogger Help をウロウロしていて見つけたページ。
- Blogger Help: How do I create new widgets for other people to add to their layouts?
- Blogger Help: How do I add third-party page elements to my layout?
まだ日本語化されていないようなので…、最初のページの大事そうなところだけ訳してみました。あいかわらずの拙い訳ですが、必要な方はどうぞ。
ウィジェット追加ボタン
まず最初にウィジェットを作成しておきます。その後、自作ウィジェットの内容やオプション情報を Blogger に送るためのフォームをウェブサイトに作ります。Blogger beta ユーザーがあなたのページでその「送信」ボタンを押すと、自身のブログにウィジェットを追加するページに飛ぶ、というわけです。
たとえば、Blogger Buzz へのリンクを表示するだけのウィジェットだとこんな感じ。（いきなりウィジェットが追加されるわけではないので、試しに押してみて下さい。）
このボタンはコードで示すと
<form method="POST" action="http://beta.blogger.com/add-widget">
<input type="hidden" name="widget.title" value="Blogger Buzz"/>
<input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>Read the Latest Blogger News!</a>"/>
<input type="hidden" name="widget.template" value="<data:content/>" />
<input type="hidden" name="infoUrl" value="http://buzz.blogger.com"/>
<input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/>
<input type="submit" name="go" value="Add Blogger Buzz Widget"/>
</form>
となります。<input type="hidden" name="widget.title" value="Blogger Buzz"/>
<input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>Read the Latest Blogger News!</a>"/>
<input type="hidden" name="widget.template" value="<data:content/>" />
<input type="hidden" name="infoUrl" value="http://buzz.blogger.com"/>
<input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/>
<input type="submit" name="go" value="Add Blogger Buzz Widget"/>
</form>
フォーム詳細情報
ウィジェット追加ボタンのフォームで用いられる項目の詳細は、次のとおりです。
form action="http://beta.blogger.com/add-widget"
（必須）このフォームはアクションに指定された URL にデータを送信します。method は POST が推奨。ウィジェット自体が小さければ GET でも可です。widget.title
（オプション）ユーザーがレイアウトを変更するときに表示されるウィジェットのタイトルです。100 文字まで。HTML も使用可です。widget.content
（必須）ユーザーのブログに表示される、ウィジェットの実際の内容です。<html>と<body>とを除いた全てのコードが利用可能。ただし、たとえばリンクなら<a>ではなく<a>という風にエスケープする必要があります。widget.template
（オプション）ウィジェットのテンプレートです。ウィジェットタグのガイドラインにしたがってください。ここではグローバルなデータタグを利用することが出来ます。ここに何も指定がないときには、<data:title/> <data:content/>のデータタグが指定され、ウィジェットタイトルと内容とがそのまま表示されるウィジェットになります。infoURL
（オプション）ウィジェットの説明や、追加情報を記載したページの URL を指定することが出来ます。これはウィジェットを追加する画面の「more info」（日本語では「ヘルプ」）リンクとして表示されます。logoURL
（オプション）ここで指定された URL の画像が「more info」（「ヘルプ」）リンクの横に表示されます。画像の大きさは 100x100 ピクセルまで。
Flickr「子犬」タグの写真を表示させるウィジェット
基本的なボタンの作り方がわかったところで、もう少し面白い例を。下のボタンは、Flickr に新しく登録された「子犬」タグの写真をブログに表示するウィジェットを追加するもの。
コードで示すとこんな感じです。
<form method="post" action="http://beta.blogger.com/add-widget">
<input type="hidden" name="infoUrl" value="http://flickr.com"/>
<input type="hidden" name="logoUrl" value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>
<input type="hidden" name="widget.title" value="Puppies!"/>
<textarea name="widget.content" style="display:none;">
<div id='flickr_badge_wrapper'>
<script type='text/javascript'
src='http://www.flickr.com/badge_code_v2.gne?show_name=1&
count=3&display=latest&size=t&layout=x&source=all_tag&
tag=puppy'></script>
<span id='flickr_badge_source_txt'>More
<a href='http://www.flickr.com/photos/tags/puppy/'>
Flickr photos tagged with puppy</a></span>
<br clear='all' /></div>
</textarea>
<input type="hidden" name="widget.template" value="<data:content/>" />
<input type="submit" name="go" value="Add Puppy Photos"/>
</form>
<input type="hidden" name="infoUrl" value="http://flickr.com"/>
<input type="hidden" name="logoUrl" value="http://www.flickr.com/images/flickr_logo_gamma.gif"/>
<input type="hidden" name="widget.title" value="Puppies!"/>
<textarea name="widget.content" style="display:none;">
<div id='flickr_badge_wrapper'>
<script type='text/javascript'
src='http://www.flickr.com/badge_code_v2.gne?show_name=1&
count=3&display=latest&size=t&layout=x&source=all_tag&
tag=puppy'></script>
<span id='flickr_badge_source_txt'>More
<a href='http://www.flickr.com/photos/tags/puppy/'>
Flickr photos tagged with puppy</a></span>
<br clear='all' /></div>
</textarea>
<input type="hidden" name="widget.template" value="<data:content/>" />
<input type="submit" name="go" value="Add Puppy Photos"/>
</form>
普通は、Flickr でバッジコードを得て、それを Blogger beta の HTML/JavaScript ウィジェットに入れるという登録方法をとるのですが、このようなボタンを作ることで同じことをしたがっている別のユーザーにも、簡単にウィジェットが追加してもらえるというわけです。
追記
あなたのウィジェット追加フォームで画像ボタンを使いたい場合には、次の画像を利用してください。
http://www.blogger.com/img/add/add2blogger_sm_w.gif
http://www.blogger.com/img/add/add2blogger_sm_b.gif
http://www.blogger.com/img/add/add2blogger_lg.gif
クリボウ補足
補足１ … このウィジェット追加フォームで追加できるウィジェットは、HTML/JavaScript ウィジェットです。他のウィジェットを拡張したようなウィジェットは、このフォームでは追加できないので注意が必要です。
補足２ … この記事ではボタンボタンといっていますが、たとえばタイトルを入力してもらうテキスト入力部をウィジェットフォーム内に作るということも可能です。input は name が一致していれば hidden でなくていい、というわけ。「Puppy Photos」のように textarea でもいいですし。
補足３ … フォームの送信ボタンを画像にする場合には、
<input type="submit" name="go" value="Add to Blogger"/>
の代わりに
<input type="image" name="go" src="http://www.blogger.com/img/add/add2blogger_sm_w.gif" alt="Add to Blogger"/>
のように書くといいです。うーん、あまり原文に忠実には翻訳できませんでした…。日本語されたら本物のヘルプを必ずご確認下さいませ。
Blogger beta ブログのトップにあるフィード
http://*****.blogspot.com/rss.xml
が Atom になっています。つまり
http://*****.blogspot.com/atom.xml
にアクセスしたときと同じ形式のものが返ってくるというわけ。これで何が困るかというと、Google Webmaster Tools（Google Sitemaps）に RSS を登録している場合にエラーが出てしまうこと。ご存知のとおり、beta の Atom は 1.0 で、サイトマップファイルとしては使用できないからです。
Webmaster Tools を使って Google にブログをクロールさせているところも多いと思います。早いところ元の RSS 2.0 に戻って欲しいですね。
関連：Blogger beta と Google Webmaster Tools (Google Sitemaps)
関連：Blogger でも Google Sitemaps
FTP 利用 Blogger が beta 移行可に
先日 Blogger beta に FTP 公開機能がついたという記事を書いたんですが、ようやく FTP 経由でブログを公開していた Blogger ユーザーも Blogger beta に移行できるようになりました。
それでもまだ、全 Blogger ユーザーが beta に移行可能なわけではありません。Blogger Help によると、Blogger Plus、チームブログ、携帯端末と関連付けられているブログは、まだ移行できないそうです。
もしやと思って表示言語を英語にして Blogger ダッシュボードを見てみると、クリボウも Bookmarks に携帯電話を関連付けてありました。どうやら携帯電話からの投稿を実験したまま、忘れていたようです。その関連付けを削除すると、やっとのことで待望の Blogger beta 移行リンクが出ました。携帯で記事を投稿していてブログを beta に移行できないという方は、ダッシュボード（英語）から携帯端末の関連付けを一度はずしてみるとよさそうです。
Blogger beta が日本語対応に
so-ta さんのコメントで最初に知ったんですが、Blogger beta のダッシュボードが日本語に対応したようです。
一週間前に「日本語はもう少し待たないといけないようです」と書いたばかりなんですが、思ったより早かったですね。今回日本語に対応したのはこちら。
- Blogger beta ダッシュボード
- Blogger Help の Blogger beta 関連項目
- Blogger beta ブログの Navbar
- Blogger beta ブログ内のサイドバータイトルやリンク（参考：6 x 3）
- Blogger beta プロフィール
ブログ内の情報が自動的に日本語になるのは、Blogger beta 標準テンプレートを使っている場合だけかもしれません。ブログ内の情報が日本語になっては困るという方は、Blogger beta 管理画面「テンプレート ＞ フォーマット」で「言語」という項目を「英語（アメリカ合衆国）」にすることで元に戻すことができます。
エンコード設定がなくなった
ここまで Blogger beta への移行について書いておきながら、どうして beta に移行しないの？とつっこまれそうなので書いておくんですが…。
実はこのブログ、Shift_JIS で書いているので、そのまま beta に移行するわけには行かないのです。Blogger beta は今のところ UTF-8 しかサポートしていないためです。「テンプレート ＞ フォーマット ＞ エンコード」で「Shift_JIS」を選択してもそれを無視して UTF-8 で公開されてしまう問題が beta 発表当時からあり、実験ブログでも度々テストしているんですがいつも決まって無理なのです。
今回の「FTP 公開 Blogger も beta に移行できる」というニュースを見て、もう一度確かめてみたんですが、なんと今度は「テンプレート ＞ フォーマット」から文字エンコードの設定項目自体がなくなっています。UTF-8 以外のサポートはしないつもりなのか、はたまたちゃんとサポートできるようにして復活させるのか…、Blogger がどう考えているのかは分からないんですが、今のところは後者を期待して beta への移行をしないでいる、というわけです。
なので、「FTP 公開 ブログの Blogger beta 移行記」が書けないのです。ううう…、残念。
３つのフィード
Blogger beta ブログでは、以下の３つのフィードが用意されています。
- ブログ投稿フィード
- ブログコメントフィード
- 投稿別コメントフィード
ラベルフィード
クリボウもこの３つだけだと思っていたんですが（Blogger Help でも３つだけ）、最近このサイトで４つ目のフィードの存在を知ったので、ご報告。「ラベルフィード」という、ラベル別の投稿フィードです。このフィードを使うと「あのブログの、これこれのラベルの記事だけをフィードリーダーで確認」なんてことができちゃいます。今のところ日本語タグのフィードは作れないみたいですが。
ラベルフィードの URL は
http://beta.blogger.com/feeds/BLOGID/posts/TYPE/-/LABEL
赤字部分をブログの ID ナンバー、青字部分をフィードタイプ（全文 full もしくは要約 summary）、緑字部分をラベル名に、それぞれ差し替えてアクセスしてください。URL はもう一種類用意されています。こちらの方がブログ ID を調べる手間がいらず、使いやすいかと。
http://***.blogspot.com/feeds/posts/TYPE/-/LABEL
赤字部分をブログの URL、青字部分をフィードタイプ（全文 full もしくは要約 summary）、緑字部分をラベル名に、それぞれ差し替えてください。ちなみに、どちらの URL も Atom 1.0 形式です。URL 末尾に
?alt=rss とつけると RSS 2.0 になるので、利用するサービスの種類に応じて使い分けてくださいませ。ラベルフィード URL 作成装置
…とはいえ、やっぱり面倒くさそうなので（特に空白などのエンコードが）、ラベルフィードの URL を得るための、ちょっとしたツールを作成しました。JavaScript をオンにしてご利用下さい。
Blogger beta の管理画面が、フランス語、イタリア語、ドイツ語、スペイン語に対応しました。日本語はもう少し待たないといけない様子。
それよりも大きなニュースは、Blogger beta にようやく FTP 経由で別サーバーに公開する機能がついたこと。なんとラベル機能もサポートするそうです。これにはびっくり。
Hint:If you want to publish to an external FTP server, you will have to turn off ACLs and use a Classic Template.
ACLs が何の略かわからないんですが、多分アクセス制限を解除してクラシックテンプレートに変更すべし、ということのようです。FTP だと、レイアウト可能なテンプレートはやっぱり無理なようですね。
ともかく、Blogger beta に FTP 公開機能がついたことで、今後全ての Blogger ユーザーが Blogger beta に移行できるようになります。Blogger beta のベータがとれる日も近そうですね。
Firefox を 2.0 にしたものの、1.5 の方が良かったかも…という人用の、ちょっとしたメモです。
タブの「閉じる」ボタンをはずす
2.0 ではタブごとに「閉じる」ボタンがついているんですが、はずしたり、以前のように右端にひとつだけ設置したりすることが可能です。
テーマを 1.5 に戻す
「戻る」「進む」「更新」などのツールバーのボタンが今回一新されましたが、1.5 と同じテーマも 2.0 用に配布されています。これを導入するとタブバー上の妙な光沢もなくなって、いい感じです。
以前使っていた拡張機能を無理やり 2.0 対応に
「拡張機能が使えなくなった…」というときには、次のページの「2.0 に対応させる方法」が有効かもしれません。少し無理やりな気もしますが…。
フィードに本来のスタイルを適用する
2.0 からは、スタイルが設定されていようがいまいが、フィードに Firefox のスタイルが適応されるんですが、スタイルが指定されているものには本来のスタイルを適用する、ということも可能です。
以上、興味があるのをお試し下さいませ。他にもあったら教えて下さいね。
Blogger のロゴにキバが生えています…。あ、ハロウィーンなんですね。
たまにこういうのがあると、楽しいですね。
