カレンダースクリプトヨコヨコタイプ実験

ヨコヨコタイプ作ってみた
表示位置が問題かな

http://tirasi.no.ura.googlepages.com/koyomi_yokoyoko.js

スタイルシートをWidgetで変更する実験

元のテンプレートが違うとおかしくなるかも
ちょっと無謀だったかな
ちなみにテンプレートはTicTac

検索をWidget化してみる実験

検索スクリプトをWidget化してみた

Widget内スタイルシートを試してみる
しかしスタイルシート自体はかなり手抜き＞＜

カレンダースクリプトの対応日付フォーマットをちょっと増やしてみる実験

ちょっと追加

対応したかもしれない日付フォーマット
　yyyymmdd系
　　20061204

　em dd yyyy系
　　Dec 4,2006
　　December 4,2006
　　December 04,2006
　　Monday,December 4,2006
　　Monday,December 04,2006

とりあえず日本語表示では西暦、月、日があれば表示できるかな

Widgetのスタイルシートについて

追加したWidgetのスタイルシートは
HTML編集でHEADに挿入するのはちょっと面倒
Javascriptでなんとかすればスクリプトを弄らなければならない
といろいろと悩んでたわけですが
クリボウ氏のブログを見たらこんなのがあった
クリボウの Blogger Tips: Blogger beta にもカレンダー
の追記（2006-11-30） - カレンダーのテーマ変更
Widget内でスタイルシートを設定するとは！！
これならやたら長いHEAD内を弄ることも無くJavascriptも弄ることも無い
Widget内の変更だけでいけるし
テンプレートの変更の時もHEAD弄る必要が無くなる
これは(・∀・)ｲｲ!!

カレンダースクリプトの対応日付フォーマットをもう少し増やしてみる実験

もう少し対応日付フォーマットを増やしてみた
あまりテストしてないけど…

対応したかもしれない日付フォーマット
　yyyy mm dd系
　　2006/11/30
　　2006年11月30日
　　2006-11-30
　mm dd yyyy系
　　木曜日, 11月 30,2006
　　11/30/2006
　　11.30.2006
　　11月 30,2006
　dd mm yy系
　　30.11.06
　dd mm yyyy系
　　30 11月 2006
　　30 11月,2006
　yy mm dd系
　　06/11/30

以下未対応
　yyyymmdd系
　　20061130
　曜日だけ系
　　木曜日
　西暦無し系
　　木曜日, 11月 30

yyyymmdd系もそのうち対応できるかも


あとちょっと気づいた点
http://jikkenshitsu.blogspot.com/search?updated-max=2006-09-02T23%3A59%3A59%2B09%3A00&max-results=5
とかの
2006-09-02の部分なんだけど
yyyy-mm-ddだけじゃなく
yyyy-m-dとかでもいいみたい
つまり月と日は0とか付けてわざわざ2桁にする必要がなく
2006-9-2でOKっぽい
yyyy-mm-d
yyyy-m-ddもあり。

カレンダースクリプトの対応日付フォーマットを増やしてみる実験

対応したかもしれない日付フォーマット
　yyyy mm dd系
　　2006/11/30
　　2006年11月30日
　　2006-11-30
　mm dd yyyy系
　　木曜日, 11月 30,2006
　　11/30/2006
　　11.30.2006
　　11月 30,2006

以下未対応
　dd mm yy系
　　30.11.06
　dd mm yyyy系
　　30 11月 2006
　　30 11月,2006
　yy mm dd系
　　06/11/30
　yyyymmdd系
　　20061130
　曜日だけ系
　　木曜日
　西暦無し系
　　木曜日, 11月 30

たぶん
dd mm yyyy系の日付フォーマットだと
mm dd yyyy系と勘違いしておかしくなる予感
でも、日本人で
日、月、西暦の順番で表示される日付を使ってる人っているのかな？

カレンダースクリプトの処理の順番を変えてみる実験

なんとなく表示が速くなったような気がするようにしてみた
気がするだけで実は早くなってません＞＜
カレンダーだけ最初に作ってリンクの部分を後から作るようにしただけだったり…
逆に時間をかけてリンクの部分にエフェクトかけるのも面白いかも

http://tirasi.no.ura.googlepages.com/koyomi.js
http://tirasi.no.ura.googlepages.com/koyomi.css

カレンダーのスクリプトコードをUTF-8に変えてみる実験

カレンダースクリプトの文字エンコード変更で
Shift-JISに変えてたんだけどUTF-8に戻した。

カレンダーをWidget化してみる実験
のカレンダーWidgetもUTF-8にした。

クリボウ氏のブログにうちのカレンダーの事が載ってる

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


（*ﾉωﾉ）あぷー

検索スクリプトにJSONを使ってみる実験

またまたクリボウ氏のブログから
クリボウの Blogger Tips: Blogger beta が JSON に対応
どうやらブログエントリーをJSON形式で取得できるようになったらしい
なので検索スクリプトでrss（xml）を取得している所をJSONで取得するようにしてみた

パラメータでJSON-in-Scriptとcallbackを使うことによって
データを受け取ったとき関数を実行することができるらしい
ぶっちゃけ関数名でデータを囲ってるだけなんだけど

まあこれによってXMLHttpRequestを使わずにデータを取得できるようになった
もしかするとニンテンドーDSとかでも検索できるのか？
持って無いけどね＞＜


http://tirasi.no.ura.googlepages.com/kensaku.js

カレンダーをWidget化してみる実験

クリボウ氏のブログにWidgetの作り方（？）が載ってたのでカレンダーをWidget化してみた
クリボウの Blogger Tips: Blogger beta の Widget 追加ボタンの作り方

相変わらす日付の表示が
火曜日, 11月 21, 2006
みたいな設定じゃないと使えない＞＜
スタイルシートはBloglendarのがそのまま使えるけど
自分でHEADに挿入しないとダメ…

BloggerのFeedのcontent-type

XMLHttpRequestでresponseXMLを使って
xmlファイルを取得しようとすると
Firefoxでは取得できたのにIEでは取得できなかった
なぜ取得できないか結構悩んだけど
ここをみたら原因がわかった
ajax - Content-Type: 許容判定

Bloggerの各xmlのcontent-typeが
rssは
application/rss+xml
atomは
application/atom+xml
となっていて
IEではcontent-typeが
text/xml
か
application/xml
でないとresponseXMLを使って取得することができないらしい

あきらめてresponseTextを使おう…

文字テスト

（）　♥♡
"<>&♥
/\.*+?|()[]{}$^
～♡
>>

一時アクセス停止

Blogger Status
12:30PM (PST)って日本時間で何時だろ？

実体参照の変換方法

部分更新スクリプトのブログのtitleを設定するところで
GETしたレスポンスのタイトルが実体参照に変換されててそのまま
document.title
とかに入れちゃうと&#とか表示されてちょっと困った
いろいろ調べると
実体参照に変換するJavascriptサンプルとかはいっぱいあるのに
逆に展開する方のスクリプトがなかなか見つからなかった
最終的にこのサイトをみつけた
Hawk's Laboratory » prototype.js 1.4.0を読む：string.js
このサイトの中頃にある
escapeHTML: function() {
var div = document.createElement('div');
var text = document.createTextNode(this);
div.appendChild(text);
return div.innerHTML;
},

unescapeHTML: function() {
var div = document.createElement('div');
div.innerHTML = this.stripTags();
return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
},
このスクリプトがなかなかいい感じ
prototypeのスクリプトなのかな？
innerHTML→TextNode→nodeValue
これで変換できるとは裏技みたいな感じです
ちょっとためになったのでメモっときます。

部分更新の実験

アンカーリンク
ブログのアーカイブのツリーの不具合
ブラウザーのタイトル
バックリンク
のところをちょっと変えたり付け加えたり。

バックリンクテスト

チラシの裏　実験室: test
ばっくりんくてすとです

Bloggerの日本語化

日本語になったのは良いが
英語表示に慣れてたせいかなんか戸惑う…

ダッシュボードすっきりし杉
設定にある文字が大きすぎる気がする…

Operaで表示してみる実験

Operaをいれてみる機会があったのでちょっと表示してみた
ラベルのリンクがうまくいかないのと
カレンダーが最初に表示された月から動かない…

通信部分のスクリプト（general.js）を弄ってみた
うまく動いてる気がする。

ついでにFirefoxでも安定してきた
リンクをめっちゃクリックしてもエラーがでなくなった。

Blogger日本語化？

この前も日本語化してた気がするんですが
新しい投稿、ホーム、前の投稿、その他いろいろ日本語化されてますね
個人的には日付の並び方を何とかして欲しいんですが…

IEのherf文字化け追加実験

ラベルの名前がアルファベットに半角スペースとか入ってるとこないだの方法ではうまくいかなかった

UTF-8→URLエスケープ（元のURL）→unescape（hrefで取得したURL？）→escape=元のURL（うまくいかないことがある）

文字によってunescapeされる時とされない時があるのかな？

unescapeは1回でも2回でも結果は同じなので
最後のescapeをする前にunescapeすることにしてみた

UTF-8→URLエスケープ（元のURL）→unescape（ブラウザがしたりしなかったり？）→unescape（強制的にしてみる）→escape=元のURL

ちょっと気になったこと

テンプレートに追加したスクリプトは
設定のTemplateのPage ElementsとFonts and Colorsでも実行される件
Page Elementsが機能しなくなって焦った＞＜
設定の時は追加したスクリプトは動かないようにした方がいいかも
スクリプトによるけどね。

次に気になったこと
記事に初めの所にアンカーが埋め込まれてるけど
このアンカーへのリンクってどこで使われてるんだろ？
ソース見ない限り知る術が無いような気がする…

も１つ
idがBlog1のタグの中にさらにidがBlog1のタグができることがある
特にOlder Postsとかでページを更新した時とか

IEのhrefの文字化けによるリンク不具合の実験

部分更新スクリプトでラベルのリンクがうまく取得できなかったのでちょっと調べてみた

ラベルを日本語にするとURLに日本語が含まれることになるけど
ソースを見ると既に日本語の所はURLエンコードされてる
Firefoxだと問題はないけどIEだと問題が出るようだ
最初スクリプトが間違ってたのかと思ったけど
IE系ブラウザでスクリプトでリンクのhrefを取得するとこの時点で既に文字化けしてた
いろいろ検索してみたところこんなサイトを発見
alert window への日本語表示
具体的な対処方法が載ってなかったけど
なんとなくエンコード、デコードの順番の問題かなと思った
UTF-8の日本語をURLエンコードしてるとIEではそれを変な風にデコードしてしまうって事なのかな？
今IE系のブラウザのMaxthonを使ってるけど
Bloggerの日本語ラベルリンクを真ん中クリックで他のタブで開くと
URLの最後の方が文字化けしてうまくリンクを開けない
その辺と関係がありそうだ
そういえばwikipediaとかはてなダイアリーキーワードとかも中クリックの時はうまく開けなかった気がする
次に文字化けしたURLを
[ サンプル ] _ encoder / decorder（文字列の符号化・復号化）
でエンコードしてみた
そしたらソースにあったURLと同じになった
つまり
UTF-8→URLエスケープ（元のURL）→unescape（hrefで取得したURL？）→escape=元のURL
と戻すことができたのかな
escapeするだけだと今度はFirefoxで表示した時おかしくなるのでその辺はブラウザによって処理分けする必要があるかな
OperaとかSafariとかIE7じゃどうなるかわかんないけどね
とりあえずIE6とFirefoxだけみれればいいかな

IEの時だけescapeするようにしてみたら部分更新スクリプトがうまく動くようになった！

更新高速化実験

アーカイブとかラベルのリンクでも部分更新するようにしてみた

カレンダーはこのスクリプトにまだ対応させてないので外しといた
結構サクサク動いてる気がする。

<script charset='Shift-JIS' src='http://tirasi.no.ura.googlepages.com/general.js' type='text/javascript'/>


追記
IEだと日本語ラベルの所がおかしくなる＞＜

カレンダーのリンクを部分更新にしてみる実験

カレンダーのリンクをクリックした時、
ページ全体が更新されるのではなく
記事の部分だけを更新するようにしてみた。
といっても、リンクのonclickに"Older Posts"と同じ関数を付けただけ
でも表示の切り替えが速くくて(･∀･)イイ
カレンダーに月の切り替えも付けてみたんだが
古い方の月に行くのはいいんだけど
新しい月に行く方がうまくいかない
updated-maxを指定しないで
updated-minとmax-resultsだけ指定すると
範囲は最新の記事からupdated-minで
表示される記事はその範囲の新しい記事からmax-results分となり
結局最新max-results分の記事しか表示されない…
なんかいい方法ないかな？

<script charset='Shift-JIS' src='http://tirasi.no.ura.googlepages.com/koyomi.js' type='text/javascript'/>

indexページの"Newer Posts"と"Older Posts"を自前で処理する実験

indexページで"Newer Posts"と"Older Posts"をクリックした時の処理を自前の処理に差し替えてみた
自前といってもwidgetsの関数を使わせてもらってるけど…
これでページが更新されたタイミングがわかるため
部分更新でもカレンターの更新ができるようになった
目次の方はまだスクリプトに組み込んでない。

<script charset='Shift-JIS' src='http://tirasi.no.ura.googlepages.com/bloginit.js' type='text/javascript'/>

Revert widget templates to default を押してみた

EditHTMLにあるRevert widget templates to defaultを押してみた
テンプレートのwidget内を書き換えた所は元に戻ったけど
headとかはそのままだった。


昨日"Newer Posts"と"Older Posts"が日本語表示されてたような…
気のせいか…。

widgetsの関数を使って書き換えてみる実験

ページの部分更新をwidgets.jsにある関数を使って書き換えてみる実験です。
なんとなくw_ca()という関数を使うのがよさげ

w_ca(a,b,c)
a = POSTするアドレス
b = POSTするパラメータの配列
c = コールバック関数

だいたい関数の引数はこれであってるかと思います。

こんな関数を作ってみました

function setblogposts(url)
{
var a = "http://" + document.domain;
var b = ["action","nextposts","widgetId","Blog1","widgetType","Blog","responseType","js","path",url];
var c = function(e){return true};
w_ca(a,b,c);
}

引数のurlに表示したいurlをいれます

urlは
http://****.blogspot.com/search?updated-min=***&updated-max=***&max-results=*
というのが有効で他のは使えないのかもしれません
updated-minとupdated-maxは表示する記事の日付の範囲を指定します
これは片方だけでもＯＫです
日付は
2006-11-04T11:11:00+09:00
こんな感じでURLエンコードするといいでしょう
日付の範囲からURLを生成する関数を作ると便利かもしれません
最後の所のmax-results=*の*の部分なんですが
これを例えば5に設定すると記事が5件表示されます
Older Postsとかのリンクもこのmax-resultsの値に書き換わってしまうので注意が必要です。

cのコールバック関数のeにはXMLHttpRequestが返ってくるので
e.responseTextを使うと書き換え用のJavascriptが取り出せます
コールバックの戻り値がtrueの場合は自動的に表示が更新され
falseの場合は表示は更新されません
なので

function(e){
try{
eval(e.responseText);
}catch(e){
}
--この辺に書き換え後の処理--
return false;
};

こんな風に自前で更新させ事後処理とか追加するのもいいかもしれない。

ページの部分更新についての実験

ページの切り替えを調べてたら
ページのホストURL（？）に適当なパラメーターを追加してPOSTすると
ページの一部を書き換えるJavascriptが返ってくることがわかった

このページの記事の所を部分更新する場合
POST先は
http://jikkenshitsu.blogspot.com/
で
パラメーターは
action=nextposts
widgetId=Blog1
widgetType=Blog
responseType=js
path=http://jikkenshitsu.blogspot.com/search?updated-max=2006-10-30T21%3A52%3A00%2B09%3A00&max-results=5
みたいな感じで送ると良いみたい

これをXMLHTTPとかでPOSTして返ってきたresponseTextをevalで実行すればページの一部が書き換わるはず
これはなかなか面白いですね
パラメーターについてはこれからいろいろ試してみる必要ありです。

カレンダーを改造してみる実験

bloglendarを改造してみた

表示する月はページの一番最初にある記事の月を表示するようにした

テンプレートにタグを埋め込むのをやめた
これは('A`)マンドクサイから

設定の日付を日本語のにした
っていうかこの辺を変えるにはスクリプト弄らないとだめだけど
デフォは"土曜日, 10月 28, 2006"みたいなやつ
ここからカレンダーの日付を作成する
これによってテンプレートにタグを埋め込む必要がない
なのでテンプレートによっては使えないかも
相変わらず汎用性がない…

カレンダーの日付からのリンクはアンカーではなく各日付の記事にリンク
この方が普通のブログのカレンダーっぽい気がする

設置メモ

HEAD内に
<link href='http://****/bloglendar.css' rel='stylesheet' type='text/css'/>
<script charset='Shift-JIS' src='http://****/bloglendar.js' type='text/javascript'/>
<script charset='Shift-JIS' src='http://****/bloglendar-main.js' type='text/javascript'/>

カレンダーを付けたい所に
<div id='bloglendar'><!-- Bloglendar here --></div>

だいたい予定通りの動作をするようになったかな
もう少し弄ってうまく動くかテストしないと
後ちゃんと綺麗にスクリプトを書かないとダメかな…

テンプレート変更実験

テンプレートを変更するとどうなるかやってみた
ヘッダ内に書いたものは全部消えた＞＜
でもwidget内の変更はそのまま引き継がれるようですね
ヘッダにスクリプトの追加タグを書き直したら元に戻った
以外にもテンプレ変更しても目次スクリプトが機能してるから
Blog Posts widget（？）内を変更してるようなテンプレじゃなきゃ結構使えそうです
今度はwidgetのリセットでもしてみるか。

カレンダースクリプトの文字エンコード変更

なぜかFirefoxでみるとカレンダーが表示されなくなったので
bloglendar.jpをShift-JISにしてあげなおした
<script src="http://****/bloglendar.js" type="text/javascript" charset="Shift-JIS" />
ヘッダーの所も変えた
このカレンダーもちょっと弄ってみようかな？

目次実験続き

IEでも表示されるようにした
ソースを簡略化してみた
かなり簡略化したので汎用性がないかも
テンプレート変えたら使えなくなったりして

サイドバーにページの目次をつけてみる実験

ページ全体の更新ができるようになったので
サイドバーにページ内にある記事タイトルを表示して
アンカーにリンクするスクリプトを作ってみた
ヘッダーに
<script charset='UTF-8' src='http://tirasi.no.ura.googlepages.com/blogmenu.js' type='text/javascript'/>
表示したい所に
<div id='blogmenu'><!-- Blogmenu here --></div>
を追加
Firefoxでうまくいったと思ったら
IEでの表示がうまくいってない…undefinedって…＞＜
めんどうなので明日直すか
今日はもう寝る。

'Newer Posts','Older Posts'のリンクで強制的にページ全体を更新させる実験

ページの下の方にある'Newer Posts'と'Older Posts'のリンクは
クリックすると古い記事にさかのぼって見たりすることができるのですが
indexページの場合これをクリックすると記事の所だけ更新されてるような気がします
これをページ全体を更新するようにしたいと思う。
いろいろやってみた結果
テンプレートの
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
と
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
の青く表示されてる部分を削除するとうまくいった。
なぜわざわざ全体を更新させるかというと
例えばトップページから'Older Posts'で記事をさかのぼっていくと
記事のところだけ更新されるのでブログタイトルの所（ここでは'（超）実験室'の所）がリンクにならず
さらに'Newer Posts'と'Older Posts'の間に'Home'がでてこないので
ブログトップへ戻るリンクがない（ブラウザでリロードすれば直ぐ戻れるんだけど…）
まあそれはいいとして
Javascriptとかで拡張してるとその拡張がページに反映されない
これは結構人によっては重要かも
カレンダーにしてもLightboxにしても最初のindexページはいいとして
'Older Posts'で移動するとぜんぜん機能しなくなったりします…たぶん…
実験的にカレンダーをindexページでも表示するように戻してみたけど
ちゃんと反映するようになった
（月をまたいでるページはちょっと問題ありかな…カレンダーはアーカイブページだけで使った方がいいかも）
サイドバー（？）にいっぱいいろんなものを表示してる人は遅くなるのでやらない方がいいかも
でもキャッシュから表示するからそんなでもないのかな？
記事の所だけ更新させてJavascriptもちゃんと反映するスマートな方法とかあればいいんだけど
これで問題なければまあいいか。

アドレスバーとかに表示されるアイコンの変更

Firefoxとかのアドレスバーとかタブのところに表示されるアイコンを変えてみる
これはzikite氏の
Blogger Beta Tips: ブログのアイコンを変える
に書いてあったので簡単だった
あと、クリボウ氏の所はアニメーションするのでソースを覗いてみたら
gifもつかえるようだった
で、HEADの所に
<link href='http://****/****.ico' rel='shortcut icon' />
<link href='http://****/****.gif' rel='icon' type='image/gif' />
こんな感じで追加してみた。

追記
クリボウ氏のTipsもありました
クリボウの Blogger Tips: アニメ GIF を自分のサイトの Favicon に
コメントありがとうございますm(_ _)m

アーカイブページの時だけカレンダーを表示する実験

トップページとかで前のページとかに行くとカレンダーがまともに動かなくなるので
月間アーカイブの時だけカレンダーを表示するようにしてみた
ぶっちゃけ
テンプレートのスクリプト追加の所で条件分岐させて
元からスクリプトを追加するかしないかみたいな感じで
<b:if cond='data:blog.pageType == "archive"'>
<link href='http://****/bloglendar.css' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://****/bloglendar.js' type='text/javascript'/>
<script charset='UTF-8' src='http://****/bloglendar-main.js' type='text/javascript'/>
</b:if>
ヘッダー内のスクリプト等を追加する所の部分を挟むようにした
カレンダー自体はExpand Widget Templatesにチェックチェックを入れて
Blog Archiveの所に埋め込んだ
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<div id='bloglendar'><!-- Bloglendar here --></div>
<b:if cond='data:style == "HIERARCHY"'>
ついでにスタイルシートをクリポウ氏のをパクッた
カレンダーがコンパクトになっていい感じ。

Blogger betaにカレンダーを付ける実験結果

表示されてるページの範囲しか反映されないんだね
これはちょっとだめかな
オリジナルもこんな表示なのか？
Older Postsとか押すと反映されないし…

月間アーカイブを表示したときだけ
カレンダーを表示するようにできないか
今度実験しよう。

Blogger betaにカレンダーを付ける実験

Bloggerにカレンダーを付ける方法をネットで調べてみると
クリボウの Blogger Tips: Blogger にもカレンダー
というのが見つかるけど
これの説明はBlogger beta用じゃないようで
このままではカレンダーは付けられない
ネックは
<BlogDateHeader>
<div class="blogDate" title="<$BlogDateHeaderDate$>"></div>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
というところで
そこを
<b:if cond='data:post.dateHeader'>
<div class='blogDate' expr:title='data:post.dateHeader'></div>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
にすると良いみたい
スクリプト追加の所は
charset="<$BlogEncoding$>"
って所を削除すると良いかも
他の所は変わりなく
これでうまくいくかな？

ちょーが付く実験室

みれなくなったりして
その時は削除＞＜

実験しいよう

あばばっばば

実験ウ王

あｗせｄｒｆｔｇｙふじこ

じっけん

ねぇさんじっけんです

実験

おめでとうおめでとう
おたんじょうびおめでとお

実験なのだ

実験

カレンダー実験用

実験

実験機

実験

カレンダー実験用

実験用です

実験くん

実験用

てｓｔｓ

( *‘ω‘ *)
(*‘ω‘ *)
（*ノωノ）
(′З｀)
(_□_　)
（＾ω＾）