カテゴリー「JavaScript」の48件の記事

2007.04.17

ブログパーツガーデンに、拙作ブログパーツが紹介されました。

2年間の地道な活動がココログのブログパーツ担当者に届いたのか、ブログパーツガーデンにデデーンと紹介されました。

Blog Parts Garden -ブログパーツガーデン お気に入りのブログパーツが見つかる。ブログを自分らしく彩るサイト


「作者からひとこと」を書いてくれとお願いされたので、書いたのですが、あれですね、難しいですね。

ちなみに、同じページで紹介されている「アクセス解析を表示できるブログパーツ」も超お勧めなので皆さん使ってみてはいかがでしょうか。
人気記事ランキングとかは初めて自分のブログを訪れた人の為にはとても良い機能だと思います。


Blog Parts Garden -ブログパーツガーデンは一見ココログ限定のサービスに見えますが、他のブログサービスでも使えるので活用してみてはいかがでしょうか(っていうか、このブログってココログ使っている人しか見ていなさそうですが…)。

個人的にはぷかぷかレイちゃんブログアクセサリーが気になるところです(笑

| | コメント (1) | トラックバック (0)

2007.04.12

ココログ最強検索(cocolog_ajax_search.js)をブログパーツ対応した。

カレンダーと同じように、検索の方もブログパーツ対応をした。
これで誰でも簡単に設置できるようになった。

設置方法等は以下のページをご覧下さい。

暴想: 自分のココログを全文検索するブログパーツ

| | コメント (0) | トラックバック (0)

2007.02.28

カレンダーで、いろんな人が動かなかったのを修正

すいません、結構いろいろと動かないケースがありました。
なんで動かなかったかというと、各記事がいつ書かれたかという情報を取得するために、記事の上にある「2007.02.26」を参照していたんですね。
これ。
Kore


でも、この日付の表示の方法って凄くいろいろな種類があって
2007/2/28
とか
2007/02/28
とか
2007/2/ 8
とか
2007年2月28日
とか
2007年2月28日(水)
とか、しまいには
27/feb/07
とか。
しるかよ!
みたいな。
なので、そもそもこの値を使わないようにしたというわけです。
なので、根本的な修正を行ったので、今度こそたいていの人は動くんじゃないかと。

「まだ俺のブログじゃうごかねぇぞ!」
という人がいたら「Shift + F5」をして再度確認してからコメント下さい。今はまだやる気があるので直します。

| | コメント (10) | トラックバック (0)

2007.02.27

密かに、閏年に対応。

ってか、この式で合っているのかな?
if( month == 2 && ( (year % 4 == 0 && year % 100 !=0) || year % 400 == 0 ) ){}

閏年 - Wikipedia

西暦年が、4で割り切れる年は閏年とする。
西暦年が、4で割り切れる年のうち、100で割り切れる年は平年とする。
西暦年が、100で割り切れる年のうち、400で割り切れる年は閏年とする。

| | コメント (3) | トラックバック (0)

2007.02.26

ココログ最強カレンダー(cocolog_ajax_calendar.js)をリリース

ココログのカレンダーに不満を持ったことはありませんか?
このブログパーツを自分のココログに設置すると、カレンダーが最高に便利で楽しいものに変化します。

百聞は一見にしかず、ということでこのブログの右サイドバーにあるカレンダーをご覧下さい。
←・→あたりをクリックすると前の月にさかのぼれるのがわかります。もちろん、記事を書いた日にはリンクが張られています。

このツールのポイントは
(1)十分に高速
(2)ココログユーザーなら誰でも簡単に設置可能
(3)日付をマウスオーバーすると、記事のタイトルが表示
(4)過去の固定リンクページにいくと、その記事が書かれた月のカレンダーが表示される
(5)「2007年1月」といった月のリンクをクリックすると、その月のアーカイブページを表示できる(もちろん、その月のカレンダーがそのときは表示される)
です。

とくに(4)は面白くて、例えば去年の5月に書いたこの記事をみてみてください。
暴想: そういや、クラブニンテンドーでプラチナ会員になったよ。
上記リンクのサイドバーカレンダーを見ると、2006年05月のカレンダーが表示されているのがわかります。
素晴らしい。

んで、このツールの使い方。
(1)テンプレートはリッチテンプレートを使ってください(リッチテンプレート以外だと動きませんリッチテンプレートというのは、このページで公開されているテンプレートたちのことを言います。)
(2)デザインの表示項目設定で、記事ヘッダーと記事のタイトル、フッターの設定をONにしてください(フッターはなんでもOK)。
Design

(3)デザインの表示項目設定から、カレンダーを表示する設定にして、好きな場所に設置してください。

(4)バックナンバーの設定で、カテゴリ別バックナンバーと月別バックナンバーをONにしてください
Backnumber

(5)トラックバックを受け付ける設定にしてください(申し訳ありませんが、トラックバックを閉じているブログはこのツールが動きません)。

(6)以下のボタンをクリックして、自分のブログに設置してください(このブログパーツ自体の設置場所はどこでもかまいません。)
(注)ココログに追加するときの確認欄が何も表示されずに真っ白ですが、それが仕様なので気にせずにそのまま追加してください。


以上です。

<暴想内のオススメ関連記事>
自分のココログを全文検索するJavaScript
自分のブログに投稿した写真を一覧表示するブログパーツ
他人のココログのサイト内検索を可能にさせるJavaScript::Bookmarklet
月別バックナンバーをプルダウンメニューにするJavaScript
カテゴリ別バックナンバーをプルダウンメニューにするJavaScript
タイトルと概要を表示するJavaScript

| | コメント (88) | トラックバック (24)

2007.02.09

cocolog_ajax_search.jsを修正した。

不具合とかじゃないけど、より正しい挙動になるように(1行だけ)修正。
特に機能追加とかはないですけど、この方がいい。

| | コメント (4) | トラックバック (0)

2006.11.10

cocolog_ajax_search.jsをバージョンアップした。

1年前くらいからやろうやろうと思ってずっとさぼっていたことなんだけど、スクリプトをコピペするときに2カ所修正する必要があったのを、必要なくした。

つまり、ただ単にスクリプトをコピペするだけで検索ボックスが設置できるようにした。

んで、お願いなんですが、なんだかいろんなサイトでこの検索ボックスの貼り付け方を解説してくださっている方が多いですが、「修正が必要です」ってのを記事から削除してください。

まあ、べつに修正しても動くから、無視してくれてもかまわないんですけどね、新しいユーザーに面倒な作業をやらせたくないので。

| | コメント (3) | トラックバック (0)

2006.11.03

再びcocolog_ajax_search.jsをバージョンアップした。

最近連日のようにバージョンアップしているけど、今回は結構よくなったと思う。

改善内容は、検索速度の劇的な向上。
って、これも最近毎回書いているないような気もするけれど、、。
今回は本当に速くなった。

試しに検索してみてください。


早くなった理由は先読みするようにしたから。
今までは、検索を実行した瞬間にバックナンバーをロードしていたけど、今回は検索キーワードを入力し始めた瞬間(テキストエリアにフォーカスした瞬間)にバックナンバーをロードし始めるようにした。

先読みはサーバー資源に気を遣わないといけないけれど、ほとんどの人がテキストエリアにフォーカスしたら検索するだろうから問題がないと思う。
もちろん、ブログにアクセスした瞬間に勝手に先読みすると行ったようなことはしていない(FirefoxのLiveHTTP Headersでも確認済み)。

どうでしょう。

(注)バグがありそうだから、見つけたら報告してくれると助かります。
特にIEの挙動とか怪しそう。

| | コメント (1) | トラックバック (1)

2006.11.01

cocolog_ajax_search.jsのバグを修正した。

この前公開していたものにバグがあったから修正した。
半角英数字が含まれている記事をうまく検索できない不具合だった。

アリスさんありがとうございます。

| | コメント (1) | トラックバック (0)

2006.10.27

cocolog_ajax_search.jsをバージョンアップした。

変更内容は、高速化。
以前と違って、処理ロジック的に高速化しているから本当の意味で早くなったと思う。
僕は体感的に早くなったけど、どうでしょう?


| | コメント (5) | トラックバック (0)

2006.08.15

cocolog_ajax_search.jsの致命的な不具合を修正

cocolog_ajax_search.jsに致命的な不具合があったので修正しました。
不具合の内容は、特定の文字を含む検索クエリーで検索するとブラウザがハングアップするというもの。
ごめんなさい。

んで、何でかよくわからないんだけど、自分のサイトにファイルをダウンロードして使っている人がいるようなので、そういう人は至急アップデートして下さい。

あと、今回から配布ファイルに著作権とライセンスを明記するようにしてみた。

Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

| | コメント (0) | トラックバック (0)

2006.08.05

cocologAjaxPhotoLoader.jsをバージョンアップ

この前公開した自分のバックナンバーの写真をすべて表示するブログパーツをバージョンアップした。

参考:
暴想: 自分のブログに投稿した写真を一覧表示するブログパーツ

これいいでしょー、と知り合いに見せたら、デザインがだめだ、flickrを見習え!と言われて、まあ、そうだよなぁ、と思ったからカッコよくした。
んで、写真をマウスオーバーすると拡大写真が見られるギミックもつけてみた。

自画自賛だけれども、なかなかいい感じのアプリになったと思う。

どうでしょう?

使い方は簡単。
自分のブログのマイリストのメモに以下のコードをコピペするだけ。

------------------------
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/prototype.js"></script>
<script src="http://java.cocolog-nifty.com/blog/files/javascript/cocologAjaxPhotoLoader.js"></script>
<a href="javascript:cocologAjaxPhotoLoader()">このブログに投稿されたすべての写真を一度に見る</a>
------------------------

| | コメント (1) | トラックバック (1)

2006.08.01

cocolog_ajax_search.jsをバージョンアップ

ブログ内検索の体感速度を劇的に向上させた。
時と場合によっては一瞬で検索されたかのように思えるくらいになっている。
あくまで体感速度だから、検索速度自体は全く変わらないどころか少し遅くなっているくらいなんだけどね。

ブラウザを完全リロードした後に、このブログの右サイドバーにある検索ボックスに例えば「ブログ」と入力して検索してみてください。
体感速度の劇的な向上を感じ取ってもらえると思います。

どうやっているのかというと、今までは全バックナンバーをすべてメモリ上にロードしてから検索をして、検索結果を出力していた。
そのため、待たされている感がどうしても強かった。
そこで、メモリ上にデータをロードしながらどんどんリアルタイムに検索をしていって、ヒットしたものから順番に検索結果に出力するようにした。
そうしたら、今回のように体感速度が向上したというわけだ。

あと、もう一個変更を加えていて、検索の処理がスタートしたと同時に、ブラウザのスクロールを一番上まで持ってくるようにした。
個人的には、この検索窓をブログサイドバーの一番上に持ってきて欲しいんだけど、下の方に設置している人が多い。だから、検索結果を見るためにいちいちスクロールする必要があった。なので、自動的に一番上まで移動するようにしてみた。

どうでしょうか?

この検索について、詳しくはこのエントリーを参照してください。
暴想: 自分のココログを全文検索するJavaScript

すでにこの検索ボックスを設置している人は特に何もする必要はありません。

| | コメント (0) | トラックバック (1)

2006.05.31

Blog Tattooでいくつかコメント

Googleで検索したら見つかった。

Blog Widget Provides an International Flavor
Blog Tattooで、国際的な雰囲気を提供してくれるとかなんとかと語っている。


あと、これとか。
“B.L. Ochman's weblog - Internet and corporate blogging strategy, and online marketing trends, with news and commentary: Widgets Are a Phenomenal Marketing Opportunity - Get With the Program”
Widgets全体の紹介として、Blog Tattooを取り上げている。
TypePad - Widgets一覧の中では割と目に付く方なのかもしれない。

| | コメント (0) | トラックバック (0)

2006.05.20

Blog Tattooを語っている米国人サイトを発見

MommyBlog: Worthless Widget

I chose a Random Kanji Creator. Now you can all learn Japanese.

funを目指して作ったのだけれども、learnという受け取られ方が一般的なのかもしれない。

Blog Tattooって名前は気に入っているけど、Random Kanji Creatorって名前の方がまあわかりやすいわな。

| | コメント (1) | トラックバック (0)

2006.05.17

米国SixApartのWIGET GALLERYにblog tattooが登録された!

暴想: Blog Tattooをリリース!以来音沙汰もなかったので、スルーされてしまっていたと思っていたら、登録されていました!
TypePad - Widgets - Blog Tattoo

ふははは、俺の書いたでたらめな英語がそのまま掲載されているし(笑)
ってか、米国のサイトに暴想のロゴがそのまま掲載されているし(笑)

ということで、暴想の米国進出への大いなる一歩を歩みましたとさ。
よし、こうなったら暴想を米国で一番有名な言葉に…。

SixApart WIGET GALLERY日本人登録者第一号なのかな??

んで、アクセス解析経由から調べたら、早速使ってくれている米国人を何人か発見。
r0tten's BLOG
The Road Not Taken
public musings of a mama
come undone

ということで、そろそろ漢字を追加登録しないと。
米国人に是非とも見せてやりたい漢字とかあったらコメント欄で募集中です。
よろしくお願いします。

| | コメント (4) | トラックバック (0)

2006.05.02

category_archive2pulldown.jsを修正(2)

徹底的に放置プレイをしていたら、再び修正して下さいました(笑)
大感謝です。
うちのサイトも、そのまま上書きしておきました。
ありがとうございました。
栗田隆喬のどうにもいいこと!: カテゴリー表示IE6対応最終版(?)

| | コメント (1) | トラックバック (0)

2006.04.24

category_archive2pulldown.jsを修正。

栗田隆喬さんが修正してくれました。
ありがとうございました!

栗田隆喬のどうにもいいこと!: カテゴリー表示スクリプトを勝手に修正

修正してもらっていたのをそのままこっちのサーバーにアップして上書きしました。

| | コメント (2) | トラックバック (2)

2006.04.12

Blog TattooをTypepad Widgets化した。

このページからインストールできる。
Blog Tattoo

でも、僕はTypepadのアカウントを持っていない。
誰か、ちゃんと動いているかどうかテストしてくれませんか? > Typepadのアカウントを持っている人。

| | コメント (5) | トラックバック (0)

Blog Tattooをリリース!

TypepadでTypePad - Widgetsというサービスがリリースされた。

そこで、今日突然「よっしゃ、ここはいっぱつ、米国人にバカウケするようなWigetsを作ってやろう」と思い立った。
で、思いついたのがこれ。
右のサイドバーに表示されています。

で、よし、Typepadのサイトに登録しよう♪と思ったら、登録の仕方がわからない。
うーん、developerページを探してみたけど、見つからない…。

ということで、米国TypepadのWigetsに登録する方法を知っている人がいたら教えてください。

| | コメント (5) | トラックバック (1)

集計結果

暴想: cocolog_ajax_search.jsがどれくらい使われているかを調査します。

の集計結果。
計175人が使っていた。
まあ、ファイルをダウンロードして使っている人もいるだろうから、約200人くらいというところか。

んで、PVが高いサイト順にランキングにして、ユーザーリストを作ってみた。
特に意味はない。

cocolog_ajax_search_users_list20060411.html

pure javascriptなアプリケーションでこれだけ沢山のユーザーが集まったと言うことに、ちょっとした驚きというかとまどいというか、新しさというか面白さを感じているこの頃。

| | コメント (1) | トラックバック (0)

2006.04.10

cocolog_ajax_search.jsがどれくらい使われているかを調査します。

タイトルの通りのことを実施させて貰います。
理由は、僕の好奇心のためです。
つまり、僕が「どれくらいのココログユーザーに利用して貰っているか」を知りたいという理由からです。

調べた結果はこのブログに記事として書こうかなぁと思っています。
調べる方法は、
http://java.cocolog-nifty.com/blog/files/javascript/cocolog_ajax_search.js
を自分のブログにコピペしているココログの数を数えるという方法です。

調べる内容は、コピペしているココログのURLを調査して、ドメインのユニーク数を数えます。
調査期間は1日から一週間程度の予定です。
URL以外は調べませんし、調べても意味ありませんし、もちろん個人情報とかとりませんし、取れません。

また、今後も似たようなことを繰り返すかもしれません。

よろしくお願いします。

| | コメント (0) | トラックバック (0)

2006.03.18

暴想ブックマーク - ver 0.3

ということで、バージョンアップしました。
段々まともになってきた。
変更点は以下の通り。
・日付情報の追加
・日付を検索対象にした
・リンクURLも検索対象にした
・空白のブックマークができないようにもう一回対処
・例外処理、エラー処理をちょっと追加

日付情報は滅茶苦茶重要なメタ情報だ。
そして、重要なメタ情報は検索できなくてはいけない。
例えば、昨日(3月16日)にブックマークしたアレを探したいという時には、検索窓に「-03-16」と入力すればいい。
こんな感じで、日付を文字列型の検索ボックスに入力して検索するスタイルは結構珍しいのではないかと思うけど、どうだろう?
でも、使ってみるとその便利さは一目瞭然だ。
よくあるプルダウン型の日付の絞り込みは不便すぎる。
今年を検索する場合は「2006-」と検索すればいい。
今月は「-03-」や「2006-03」だ。

次に、URLを検索。
ブックマークツールを作っていて気がついたのだけれども、URLというのはとても貴重なメタ情報だ。
例えば、昨日インプレスの記事で見たページをもう一回見たいなぁ、、でもタイトルとか忘れちゃった…ってときは「impress.co.jp」とかで検索すれば、インプレスの記事がダダダと出てくる。
凄く便利。
これって、結構良いのではないかと思ってはてなブックマークで実験してみたら同じ事ができた、、残念。
しかーし、この暴想ブックマークツールの検索はもっと便利だ。
それは、URL検索と記事タイトル検索が同時にできると言うこと。
例えば、インプレスで書かれたヨドバシに関する記事を読み直したいと思って検索するとする。ヨドバシ関連の記事は沢山ブックマークしてあって、その中からインプレスの記事だけを探したいのだ。
その場合、「impress.co.jp ヨドバシ」と検索すればいい。ちゃんと表示される。
例えば、ココログで書かれた記事でjavascriptに関するものがあったなぁ、どこだっけ、ブックマークした記憶だけはあるんだけど…、って場合は「cocolog-nifty.com javascript」って検索すればいい。
今実験したらはてなブックマークではできなかった。

ちなみに、これらの検索と同時にさっき紹介した日付検索も同時に使うことができる。
つまり、今月インプレスで書かれた任天堂(って言葉がタイトルや概要に含まれた)の記事を探したいっていう時は「2006-03 impress.co.jp 任天堂」とかって検索すればOK。
超便利。
全てのメタ情報を一つの検索窓から串刺し検索できるっていうわけだ。

というわけで、いつものようにご自由におためし下さい。

登録用ブックマークレットはこちら。
暴想ブックマーク ver0.3


結果の表示画面はここにあります。
ブックマークの結果ページ(ver 0.3)

| | コメント (0) | トラックバック (1)

2006.03.15

暴想ブックマーク - ver 0.2

というわけで、俺様ブックマークツールをバージョンアップした。
んで、ツールにちゃんと名前がないと何かと不便だよなぁと言うことで、単純に暴想ブックマークと命名してみた。
うーむ、もっと言い名前はないかな。
名前重要。

で、今回の変更点は以下の通り
・マウスで文字列を選択した状態でブックマークレットを実行すると、そのテキスト部分がメタ情報として一緒に登録されるようにした
・上記メタ情報も同時に検索されるようにした
・表示をul, liタグを利用して描画するようにした(ずいぶんと見やすくなった)
・空白のブックマークが作られないように修正

ブラウザ上でマウスを使って一緒に保存しておきたいなぁと思ったテキスト情報を選択しておくだけで、ブックマークレット実行時に自動的にブックマークツールに登録されます。
これは便利!

例えばこのサイトを見て下さい。
大河原克行の「パソコン業界、東奔西走」
このサイトの記事が面白いと感じてブックマークしようとしても従来のバージョンだと、“大河原克行の「パソコン業界、東奔西走」”としか登録されなくてまったく意味がわかりません。
ところが、この記事の副題である“ヨドバシ、ビックと真っ向勝負を挑むヤマダ電機”ってのを一緒に登録しておくととってもわかりやすくなる!

もちろん、タイトルだけでいいやって場合は従来通り何も考えずにブックマークレットを実行するだけでいい。

必要な時だけ、引用して保存しておきたいテキスト情報をマウスで選択するだけ。
シンプルだ。
ポップアップ画面とか出てこないし、コピペする必要もない。
適当でオッケー。
ということで、従来のコンセプトを一切崩すことなくメタ情報を追加することができた。

ということで、前回と同様自由に試してみて構わないので、色々と遊んでみて下さい。

登録用ブックマークレットはこちら。
暴想ブックマーク(なおゆき、読め)


結果の表示画面はここにあります。
ブックマークの結果ページ


#追記
まだ、空白ブックマークができることがあったので修正
http://以外で始まるURLは弾くように修正

| | コメント (5) | トラックバック (1)

2006.03.11

こんなブックマークツールはいかがでしょうか?

del.icio.usとかはてなブックマーク - ソーシャルブックマークとかが気になりつつもどうも使う気になれなかった。

なんかしっくりこない。
なんかめんどくさそう。

ってことで、だったら自分が一番欲しいと思うブックマークツールを作ってみようと思って作ってみている。

自分が欲しいものってどんなのだろうかと考えてみると

・できるだけ簡単にブックマークできる
・できるだけ余計なことを考えずにブックマークできる
・Webの閲覧リズムを阻害することなくブックマークできる
・できるだけ簡単に、高速に検索できる
・シンプル
・別にソーシャルじゃなくていい

という感じだ。
でもって、僕はタグ(タギング)については以下のように考えている。
暴想: タグ、タギングについての私見

ようは、自分でタグとか入力しなくていいし、させないインタフェースがもっとも素晴らしい。
メタ情報はツールが勝手に取得、生成してくれればいいし、それが正しい。


これらのことを全てまとめて第一弾のデモを作ってみた。

自分が気になったページをブックマークするには、以下のBookMarkletを利用する。
BookMark(なおゆき、読め)


使って貰えればすぐにわかるけど、ブックマークレットを実行しても何も起きない。
クリックしたらそれで終わりだ。

でもって、自分がブックマークした結果はこのページに表示される。
ブックマーク

シンプルだ。
検索ボックスがあって、あとはブックマークのリストが新着順に表示される。

まあ、いくら何でもシンプルすぎるし、これに付け加えたい機能は山ほどあるけれども、とりあえず僕が目指しているコアはこれにつきると思う。

ってなわけで、このデータベースというか、この実験ブックマークレットはお試しなので、気になった方はご自由に使ってみてください。
ってか、作りがいい加減なので簡単に破綻しちゃったり、壊れたりするかもだけど…。

意見、感想募集中です。

#ってか、今思ったんだけど、これが文字通り本当のソーシャルブックマークじゃね?

| | コメント (2) | トラックバック (1)

2006.02.25

適当なページの任意の文字をハイライトさせるJavaScript::BookMarklet

前に作った、暴想: JavaScriptでHTMLタグが含まれた文字列をハイライトする。を使えば、実現できるなぁと思いつつも、いまいち実用性が感じられなかったのでそのままにしておいたんですが、404 Blog Not Found:javascript - 任意のHTMLをインクルメンタル検索可能に!を読んで、自分も作ってみようと思ったので、作ってみた。

最初、インクリメンタル検索で作ったら、重たすぎる気がしたので、両方用意した。

非インクリメンタル検索バージョン
body_search

インクリメンタル検索バージョン
body_search_inc


SafariとFirefoxとIEで動くことを確認した。

| | コメント (0) | トラックバック (2)

2006.02.04

blog_json_ajax_search.jsをバージョンアップ

暴想: ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

lacoocanのMTに自分用として使ってみたら、色々と気になることが出てきたので修正した。
やっぱりさ、こういうのって自分で使ってみないと不具合に気がつかないよねっていうか、バージョンアップする気になれないよね(笑)

つーことで、以下のように修正した。

・ココログ以外(MTとか)だとSafariで文字化けるのを修正
・検索中に「now searching」って表示されるようにした

ちなみに、僕はMacユーザーだからSafariの文字化けとかあり得ないわけですよ。
で、文字化け対策として、テンプレートを以下のように書き換える必要があります。
-----------------------------------
<?xml version="1.0" encoding="utf8"?>
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}
-----------------------------------

まあ、つまり先頭に「<?xml version="1.0" encoding="utf8"?>」を付けて下さいって事です。

| | コメント (0) | トラックバック (1)

2006.01.12

JavaScriptでテンプレートとか

メモ

TrimPath - open source rich web applications and components

| | コメント (0) | トラックバック (0)

HTMLタグをページ上に浮き上がらせるJavaScript::BookMarklet

Modern Syntax : ページ上にHTMLタグを表示してくれるFirefox用プラグイン
という記事を読んでNew Firefox Extension: X-Ray | Design Memeを知ったわけですが、あー、なるほど、これは便利かもしれないなぁ、でも僕はFirefoxとか使わないからなぁ、Safariで使いたいなぁと思ったのでBookMarkletで似たようなモノを作ってみた(っていうか、パクリですね…、こりゃ…)。

ってか、思いつきで作った正規表現一発の2行しかない(実質一行の)JavaScriptコードなだけですが…。。。
原作の方のソースコードはまったく見ていないので何ともいえないですが、

For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em.
とか書いてあるので、ちゃんとタグによって処理を分けたりしているんだろうなぁ。。

↓BookMarkletはこちら。
html_tag_floater


ちなみに、このブックマークレットをこのブログに対して実際に実行してみたらこうなります。
html_tag_floater

あー、やっぱり色々表示がおかしいですね。

#変だったところを修正してみた。結構ちゃんと表示されるようになったと思う。

| | コメント (0) | トラックバック (0)

2006.01.11

Collection & Copy - X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧

メモ

Collection & Copy - X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧

| | コメント (0) | トラックバック (0)

2006.01.01

お正月専用JavaScript!? akeome.js

みなさん、あけましておめでとうございます。
今年もよろしくお願いいたします。

さて、誰も欲しいなんて思っていないと思いますが、お年玉代わりにJavaScriptを一本公開します。

akeome.js

です。

はい、今このサイトのトップページでいきなり画像が一枚表示されるようにしているJavaScriptそのものです。
いやぁ、うざいですねぇ。
こんなうざいのお正月以外でやったらクレームものです。

ということで、俺もそんなことやってみたいぜ!!ってな人がもしいたら使ってみて下さい。

ちょっと一発芸っぽくて面白いかもしれません。

11時半くらいに風呂に入っている時に思いついて、急いで作って何とか間に合った…(笑)

使い方は、サイドバーに次のコードを貼り付けて下さい。
すでに、onloadに追加しているひとは追加で書いて下さい。
show_akeome( 'http://java.cocolog-nifty.com/blog/images/akeome2006.jpg' );
のところを、自分の表示したい画像のアドレスに変更して下さい。

<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/akeome.js"></script>
<script type="text/javascript">
window.onload = function init() {
show_akeome( 'http://java.cocolog-nifty.com/blog/images/akeome2006.jpg' );
}
</script>

| | コメント (0) | トラックバック (0)

2005.12.29

JavaScriptでHTMLタグが含まれた文字列をハイライトする。

cocolog_ajax_search.jsで、検索結果のページで、検索文字列をハイライトするようにしているんですが、今までは単純にreplaceしているだけでした。

replaced_text = text.replace( new RegExp( '(' + keyword + ')', "ig"), '' + "$1" + '' );

しかーし、これだとHTMLタグの内側もガシガシと書き換えてしまうのでよろしくない。
うーむ、どうしたものかということで、次みたいにしてみた。
やっていることは、タグの内側だけ元に戻しているというイメージ。

replaced_text = text.replace( new RegExp( '(' + keyword + ')', "ig"), '' + "$1" + '' );
while( replaced_text.match( new RegExp( '(<[^>]+)(' + keyword + ')(.*?>)', "ig") ) ) {
replaced_text = replaced_text.replace( new RegExp( '(<[^>]+)(' + keyword + ')(.*?>)', "ig"), "$1$2$3" );
}

うわっ、すっげー力業…。
でも、たいていの場合うまくいっているっぽい。
もっとスマートな方法はないものかなぁ。



JavaScriptビジュアル・リファレンス

| | コメント (0) | トラックバック (0)

2005.12.06

英語で説明文を書いてみた

米国人に"oh, it's cool."とかと言われてみたいと思って、blog_ajax_json_search.jsの設定の仕方を英語化してみた
しかーし!このブログは日本人しか読んでいない!!少なくとも北米で読んでいる人はいないのだ。
それは、Google Analyticsで分析した結果明らかなのだ。
boso_map

どうすれば米国Typepadを使っている人に気づいてもらえるのだろうか。
About Six Apart - Mena's Cornerあたりにトラックバックでもしてみればいいのかしらん?(笑)

| | コメント (2) | トラックバック (0)

Blog Search Engine For Typepad Made From JavaScript

"javascript_ajax_json_search.js" made from JavaScript can search all entries on your Brog at accurately, adequately, and high speed.

The account of Typepad Pro is necessary though this script can be used very easily by only two steps.

Usage :
1 : Make a new template in your templateset.
ex)
name : search_data
file name : search_data.txt
template :
(Please change the part of the deficit to a figure that is bigger than the
number of total entries of your Brog.)

------------------------
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}
------------------------


2 : Set the search box in your sidebar.
Please set up the following HTML tag in the wherever you like of the sidebar.
It is necessary to rewrite the deficit by two places. (It is the file path, making the 1st step).

------------------------
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/prototype.js"></script>
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );"><input type="search" id="search_box" value=""><input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );" value="search"></form>

------------------------

Search result output in the between <div class="contents"></div> tags.
so, if you miss the tags, this search script can't output the search result.

License :
This script is freeware.
Off course, you can use typepad or somewhere.

| | コメント (0) | トラックバック (0)

2005.12.03

ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript

ココログベーシック、プラスの人はこっち。
暴想: 自分のココログを全文検索するJavaScript

つーことで、タイトルの通りのようなモノを作りました。
今回はココログプロを使っている人向けです。

前回作ったcocolog_ajax_search.jsだと、ココログのHTML構造に依存しているため、独自のテンプレートを使っている人はまったく動きませんでした。
しかし、今回のはココログプロの人でもオッケーです。
むしろ、今回の方が検索速度もぐっと速いはず。
そのかわり、HTMLのテンプレートをいじれないと使えないのでココログプロしか使えません。
逆に言えば、テンプレートさえ作れればココログ以外でも使えます。
米国Typepadとか、Typepad Japanとかブログ人とか。
その気になれば他のブログサービスでも使えるんじゃないでしょうか(わかんないけど)。


んで、使い方。
検索用の専用テンプレートを作ります。
新規テンプレートの作成で適当に名前を付けて、ファイル名も適当に例えば「search_data.txt」とかにしてください。
んで、以下のテンプレートをコピペして保存してもらえればOK。
あー、あと、lastn="3000"のところは、自分のブログの記事数より明らかに大きい数を設定しておいて下さい。
MTタグで全部のバックナンバーをロードっていう指定の仕方がわからなかったのでこうしてます(誰かやり方教えて下さい…)。
-----------------------------------
<?xml version="1.0" encoding="utf8"?>
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}
-----------------------------------
んで、検索ボックスを貼り付けたいところ、例えばsidebar.incあたりに以下の検索ボックス用HTMLを貼り付けて下さい。
ポイントとして、赤字の部分は自分のブログのディレクトリに合わせて変更して下さい。
まあ、ようはさっき作ったテンプレートのファイルのパスを書いて下さいって事です。
------------------------------------
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/prototype.js"></script>
<script type="text/javascript" src="http://java.cocolog-nifty.com/blog/files/javascript/blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );"><input type="search" id="search_box" value=""><input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );" value="検索"></form>
-----------------------------

で、最後に注意点が一つ。
これは迷ったんだけど、出力先。
最初に出現する
<div class="content"></div>
の間に出力するように作ってあります。
なので、これがないと検索できても検索結果が表示されません。
ってことで、独自にテンプレートをカスタマイズしている人でこれがないって言う人は適当に作って下さい。
ってか、もっというと、ちゃんと綺麗に検索結果を表示させるならば、真ん中の記事表示エリアを上記divで全体を囲ってあげる必要がある。
囲み方は、ココログベーシックの標準テンプレートみたいに、centerの内側に置いてあげる感じ。

この方式は僕もどうかと思うけど、まあ、しょうがないのでこういう風にしました。
何か意見をもらえれば参考にしますので、コメントがあったらよろしくです。

ところで、一個重要な問題として、僕はココログプロのアカウントを持っていないんですねぇ。
なので、Tigerさんあたりが使って動作確認をしてくれたりすると非常に助かるかもとかと言ってみるテスト(笑)


あー、ちなみに名前は「blog_ajax_json_search.js」という風にしてみました。
まあ、使っている技術そのままです。

ココログプロ使っていて、上に書いてあることがよくわかんないやって人はこれとか読むと良いと思う。

スタイルシート スタイルブック

| | コメント (32) | トラックバック (36)