読者です 読者をやめる 読者になる 読者になる

機能の仕様について、考えていくうちに、ふと疑問にぶち当たる。でもまぁいいや。

と思い、はてなダイアリーの、日記を書く画面で、ボタンを押せばぱっと、太字タグが出てきたり、する
かっこいいボタン画像は、自分で作ったのか、どこかネットにおちている素材を流用したのかが気になる。

もし、はてなダイアリーの太字タグなどの画像アイコンが、フリーだったら自分で作る手間が省けるからだ。
で、わからんので、日記を書くときの画面を右クリックしてソースを表示してみることにした。
多分、アイコンのところは、

<span id="text-decoration-buttons"></span>

ここで定義している。ということは、スタイルシートか。でも、スタイルシートがほとんど定義されていない。
(自分が定義したとことのみ。)
ということは、javascriptで定義しているのか。
でも、javascritは、大量に定義されている。

<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>
<script type="text/javascript" src="/js/cookie.js"></script>
<script type="text/javascript" src="/js/splitter.js"></script>

<script type="text/javascript" src="/js/local_storage.js"></script>
<script type="text/javascript" src="/js/edittips.js"></script>
<script type="text/javascript" src="/js/myfoto.js"></script>
<script type="text/javascript" src="/js/color_picker.js"></script>
<script type="text/javascript" src="/js/textinput_selection.js"></script>
<script type="text/javascript" src="/js/diary_edit.js"></script>
<script type="text/javascript" src="/js/listbox.js"></script>
<script type="text/javascript" src="/js/category.js"></script>
<script type="text/javascript" src="/js/fontsize.js"></script>
<script type="text/javascript" src="/js/preview.js"></script>
<script type="text/javascript" src="/js/campaign.js"></script>
<script type="text/javascript" src="/js/tooltip.0.2.js"></script>
<script type="text/javascript" src="/js/events/edit.js"></script>

多すぎ。
しょうがないので、一つ一つ調査。
あった。
http://d.hatena.ne.jp/js/diary_edit.js
のEvent.observe(window, 'load', function()関数で、innerHTMLとして定義されている。
しかし、ソースを読んでも、およそjavascritには見られない$('text-decoration-buttons').innerHTML=
となっている。さっぱりわからん。javascriptにそんな定義あったっけ?

で、さらに調査。http://d.hatena.ne.jp/js/diary_edit.js
の1行目に、

// This script requires color_picker.js and textinput_selection.js.
// require prototype.js

となっていた。
そいえば、prototype.jsって、大量に定義されている中にあったな。
次に、prototype.jsについて調査する。
http://d.hatena.ne.jp/js/prototype-1.4.0.js
よんでもさっぱりわからん。
で、ぐぐってみた。

http://www.sergiopereira.com/articles/advjs.html
最初これがヒット。英語で読む気がうせる。
日本語はないの?そしたらあった。
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Whatsthat

prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。

ををを。熱い!もしかして、ajax支援ライブラリか!?と思い、さらにぐぐる
http://blog.nomadscafe.jp/archives/000569.html
次に発見したのはこれ。

prototype.jsJavaScriptのライブラリ(中身はJavaScriptです)で、これを使うとJavaScriptを組むのがかなり楽になるというものです。話題のAjaxのプログラミングも簡単にできます。

やっぱりAjaxだ!Ajaxプログラミングを簡単にできるという甘い誘惑が・・。
学校WeblogシステムにもAjaxを組み入れてやろうか。

でも組み入れるべきところは・・・。特にないなぁ。
M永先生がキリ番ゲットとかいっていたので、カウンタが、更新しないとまわらないところを、
ブラウザを開いている間は常に番号をチェックするようにAjaxしてやろうかな。

本当に簡単なAjaxプログラムの方法も教えてくれている。
コピペするだけで、Ajaxを体験できる。

下に参考リンクがある。
http://shibuya.pm.org/slides/200511/prototype_js.ppt
はてなダイアリーの伊藤さんの発表資料。ちょっとフランクな書き方だが、とても分かりやすい。
必読。

さらに、なんとはてなでは、会議を動画で提供してくれていたのである。
http://hatena.g.hatena.ne.jp/hatenatech/20050929/1128057760
早速ダウンロードして技術勉強会を聞いてみる。
一線を退いた私としては、これほど勉強になることはない。
なんとなく分かってきた。

最初の調べた動機とは少し変わってきたが、このprototype.jsというのをWeblogシステムのどこかに、
組み込んでみたいと強く感じた。

ちなみにダウンロードは、ここ。
http://prototype.conio.net/