クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 2006-11

2006-11

Blogger beta にもカレンダー

ずっと前に、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

Blogger beta が JSON に対応

Posted at: 2006-11-23 Label: , 1

JSON

Blogger beta ブログの情報が JSON 形式で受け取れるようになりました。

JSON には、Blogger beta ブログのフィードの URL 末尾に ?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 属性で指定できる、ということがミソのようですね。この方式の例も、こちらにコードで示されているのでご確認下さい。


ブログでいろいろと面白いことができそう!と思いつつ、今のところ具体的には何も思いつかないクリボウなのでした…。「こんなの作ったよ」とか「こんなことに利用できない?」といったアイデアがあったら教えて下さいね。

Google Webmaster Tools が Atom 1.0 に対応?

先日 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 のラベルフィードを見つけるブックマークレット

先日、Blogger beta にラベル別投稿フィードが用意されている、という記事を書いたんですが、どうやら日本語のラベルでもフィードが作成されるようになったみたいです。

そこで今回作ってみたのは、ブログの投稿をラベルで絞りこんだ画面から、その内容のフィードに飛ぶブックマークレット。前回のようなツールを使わずに、簡単にフィードの URL が得られるので、重宝しそうな予感。

上のリンクをブックマーク(お気に入り)に追加して、ご利用下さい。

IE などで、フィードに直接飛ばれると困る(ダウンロード確認画面になったり)という場合には、文字入力ダイアログに URL を表示させるタイプをご利用下さい。

Blogger で表を書く方法

Posted at: 2006-11-17 Label: , 5

今回は、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 beta の Widget 追加ボタンの作り方

Blogger Help をウロウロしていて見つけたページ。

Blogger beta には、自作の Widget をほかのユーザーに簡単に導入してもらうための仕組みが用意されているとのこと。どうやら新しい機能のようです。世界中で様々な自作 Widget が出てきそうな予感。

まだ日本語化されていないようなので…、最初のページの大事そうなところだけ訳してみました。あいかわらずの拙い訳ですが、必要な方はどうぞ。


ウィジェット追加ボタン

まず最初にウィジェットを作成しておきます。その後、自作ウィジェットの内容やオプション情報を 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="&lt;a href='http://buzz.blogger.com/'&gt;Read the Latest Blogger News!&lt;/a&gt;"/>
  <input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
  <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> ではなく &lt;a&gt; という風にエスケープする必要があります。
  • 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;">
    &lt;div id='flickr_badge_wrapper'&gt;
    &lt;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'&gt;&lt;/script&gt;
    &lt;span id='flickr_badge_source_txt'&gt;More
    &lt;a href='http://www.flickr.com/photos/tags/puppy/'&gt;
    Flickr photos tagged with puppy&lt;/a&gt;&lt;/span&gt;
    &lt;br clear='all' /&gt;&lt;/div&gt;
  </textarea>
  <input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
  <input type="submit" name="go" value="Add Puppy Photos"/>
</form>

普通は、Flickr でバッジコードを得て、それを Blogger beta の HTML/JavaScript ウィジェットに入れるという登録方法をとるのですが、このようなボタンを作ることで同じことをしたがっている別のユーザーにも、簡単にウィジェットが追加してもらえるというわけです。


追記

あなたのウィジェット追加フォームで画像ボタンを使いたい場合には、次の画像を利用してください。

Add to Blogger
http://www.blogger.com/img/add/add2blogger_sm_w.gif

Add to Blogger
http://www.blogger.com/img/add/add2blogger_sm_b.gif

Add to Blogger
http://www.blogger.com/img/add/add2blogger_lg.gif


クリボウ補足

補足1 … このウィジェット追加フォームで追加できるウィジェットは、HTML/JavaScript ウィジェットです。他のウィジェットを拡張したようなウィジェットは、このフォームでは追加できないので注意が必要です。

補足2 … この記事ではボタンボタンといっていますが、たとえばタイトルを入力してもらうテキスト入力部をウィジェットフォーム内に作るということも可能です。input は name が一致していれば hidden でなくていい、というわけ。「Puppy Photos」のように textarea でもいいですし。

補足3 … フォームの送信ボタンを画像にする場合には、
<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 の rss.xml が Atom 1.0 な件

Posted at: 2006-11-12 Label: , 3

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

Blogger beta が日本語に対応

FTP 利用 Blogger が beta 移行可に

先日 Blogger beta に FTP 公開機能がついたという記事を書いたんですが、ようやく FTP 経由でブログを公開していた Blogger ユーザーも Blogger beta に移行できるようになりました。

このニュースについては、@aka さんが素早く記事にされているので、そちらをご覧下さい。

それでもまだ、全 Blogger ユーザーが beta に移行可能なわけではありません。Blogger Help によると、Blogger Plus、チームブログ、携帯端末と関連付けられているブログは、まだ移行できないそうです。

もしやと思って表示言語を英語にして Blogger ダッシュボードを見てみると、クリボウも Bookmarks に携帯電話を関連付けてありました。どうやら携帯電話からの投稿を実験したまま、忘れていたようです。その関連付けを削除すると、やっとのことで待望の Blogger beta 移行リンクが出ました。

携帯で記事を投稿していてブログを beta に移行できないという方は、ダッシュボード(英語)から携帯端末の関連付けを一度はずしてみるとよさそうです。


Blogger beta が日本語対応に

so-ta さんのコメントで最初に知ったんですが、Blogger beta のダッシュボードが日本語に対応したようです。

一週間前に「日本語はもう少し待たないといけないようです」と書いたばかりなんですが、思ったより早かったですね。今回日本語に対応したのはこちら。

クリボウとしては、Blogger Help が日本語化されたのが一番嬉しいです。

ブログ内の情報が自動的に日本語になるのは、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 のラベルフィード

Posted at: 2006-11-06 Label: , 18

3つのフィード

Blogger beta ブログでは、以下の3つのフィードが用意されています。

  • ブログ投稿フィード
  • ブログコメントフィード
  • 投稿別コメントフィード
これらのフィードについては @aka さんがとても詳しい記事を書かれているので、そちらをぜひご覧下さい。


ラベルフィード

クリボウもこの3つだけだと思っていたんですが(Blogger Help でも3つだけ)、最近このサイトで4つ目のフィードの存在を知ったので、ご報告。「ラベルフィード」という、ラベル別の投稿フィードです。このフィードを使うと「あのブログの、これこれのラベルの記事だけをフィードリーダーで確認」なんてことができちゃいます。今のところ日本語タグのフィードは作れないみたいですが。

ラベルフィードの 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 をオンにしてご利用下さい。

ブログ URL
ラベル名
タイプ 
フィード 
 
  
ラベルフィード

Blogger beta に FTP 公開機能

Posted at: 2006-11-03 Label: , 5

Blogger beta の管理画面が、フランス語、イタリア語、ドイツ語、スペイン語に対応しました。日本語はもう少し待たないといけない様子。

それよりも大きなニュースは、Blogger beta にようやく FTP 経由で別サーバーに公開する機能がついたこと。なんとラベル機能もサポートするそうです。これにはびっくり。

このブログはまだ移行できないようので、テスト用につくった beta ブログを FTP で上げようと「Setting > Publishing」画面を見てみると、このような記述がありました。

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 っぽく

1

Firefox を 2.0 にしたものの、1.5 の方が良かったかも…という人用の、ちょっとしたメモです。


タブの「閉じる」ボタンをはずす

2.0 ではタブごとに「閉じる」ボタンがついているんですが、はずしたり、以前のように右端にひとつだけ設置したりすることが可能です。





テーマを 1.5 に戻す

「戻る」「進む」「更新」などのツールバーのボタンが今回一新されましたが、1.5 と同じテーマも 2.0 用に配布されています。これを導入するとタブバー上の妙な光沢もなくなって、いい感じです。




以前使っていた拡張機能を無理やり 2.0 対応に

「拡張機能が使えなくなった…」というときには、次のページの「2.0 に対応させる方法」が有効かもしれません。少し無理やりな気もしますが…。




フィードに本来のスタイルを適用する

2.0 からは、スタイルが設定されていようがいまいが、フィードに Firefox のスタイルが適応されるんですが、スタイルが指定されているものには本来のスタイルを適用する、ということも可能です。




以上、興味があるのをお試し下さいませ。他にもあったら教えて下さいね。

Halloween Blogger

Posted at: 2006-11-01 Label: 4



Blogger のロゴにキバが生えています…。あ、ハロウィーンなんですね。

以前には犬のイメージもありました。

たまにこういうのがあると、楽しいですね。

© 2005-2014 Kuribo. Powered by Blogger.