2006/05/05 Fri 17:59
先週から作っていたJavaScriptライブラリを公開します。Wikiライク、というよりもむしろはてなダイアリーライクな変換エンジンです。
wikirender.jsをロードし、wikiRender.render(String)にテキストデータを渡すと、ルールに従って整形した結果が返されます。整形ルール（記法）についてはデモページのフォームを参考にしてください。
document.getElementById('preview').innerHTML
= wikiRender.render( document.getElementById('input').value );
返されるのはDOMオブジェクトではなくHTMLタグを含んだ文字列なので、innerHTMLに入れてやる必要があります。ZEROBASEのDOMコードジェネレータなどと組み合わせればDOMエレメントとしても処理できるかもしれません。
wikiRender.interWikiNameオブジェクトにプロパティを追加することで、InterWikiNameを追加設定することができます。
wikiRender.interWikiName.WikiName = [
URI prefix, URI suffix, UTF8_encode_flag (boolean), encodeURIComponent_flag (boolean)
];
3番目の真偽値で値をUTF-8にエンコードするかどうか、4番目の真偽値ではそのエンコードにencodeURIComponent()関数を使うかどうかを選択します。4番目がfalseの場合はencodeURI()関数でエンコードされます。
デモページでは以下ようなInterWikiNameを設定しています。デモページで使用しているwikidemo.jsも参考にしてください。
wikiRender.interWikiName.GoogleSrchJa = [
"http://google.com/search?hl=ja&lr=lang_ja&ie=UTF-8&oe=UTF-8&q", "", true
];
wikiRender.interWikiName.AmazonJP = [
'http://amazon.jp/exec/obidos/ASIN/', '/bdp-22/ref=nosim', false
];
また、wikiRender.headingBaseプロパティの数値を変更することにより、Hタグの開始値を変更することができます。見出しは2段階まで使えるようになっており、デフォルトでは*でH1、**でH2に変換されます。
wikiRender.headingBase = 4;
デモページでは上のように設定しているので、*がH4、**がH5に変換されます。こちらもwikidemo.jsを参考にしてください。
Download: wikirender.js 0.0.1 (2006-05-05)
Download: wikirender.js 0.0.2 (2006-05-06)
ライセンスは、いわゆるMIT License (X11 License)とします。
Windows XP上のIE 6.0、Firefox1.5.0.2、Opera 8.54、Netscape 7.1で動作することを確認しました。
追記（05/06）：いくつかのバグを修正した0.0.2を公開しました。
そして、ゆうすけさんがJavaScriptライブラリ検索 - JSAN Searchを公開されていたのを発見し、検索してみたら案の定Wikiwygを大発見。まぁ、あっても自分で作るんですけどね。Wikiwygのスタンドアロン・デモを触ってみましたが、超カッコイイ。
2006/05/05 Fri 01:44
少しずつイベントモデルがわかってきました。ブラウザごとの違いも少しわかった、というかWindowsで最新のOpera、Firefox/Netscape、IEに対応すればいいのなら、IEだけwindow.eventを使ってやればいいということがわかりました。またwindow.onloadハンドラの中でイベント宣言をすれば、すべてのイベントも*.jsファイルに移せると。だたし実際に少し組んでみた感想としては、prototype.jsを使ってしまうほうが賢いだろうと思います。
というわけで、Wiki機能を実現するライブラリ（みたいなもの？）を作りはじめました。とりあえず基本的なHTMLマークアップ系（DHTMLで動作確認できるのでデバグがとても楽）は完成して、ToDoはInterWikiNameを付けるくらい（それ以上は後で考える）。ファイルI/Oをやってくれるサーバサイドスクリプトと組み合わせてAJAXなWikiが作れるようなものにしたいところ。
2006/04/26 Wed 03:48
いまここの更新はwikieditish.cgiを自前で改造して使ってるんだけど、「試験前の掃除欲」を向かわせる先としてリアルタイムプレビュー（できればWiki記法対応も）+遷移なし記事表示／編集を搭載したAjaxなWikieditishを作ろうと思い立ち、とりあえずプレビュー部分を作……ろうとして早速ハマった。
というのも、イベントハンドラまですべて*.jsファイルに逃がそうとがんばっていたら、どうにも動いてくれなくて悩みまくった。window.loadのタイミングでonkeyupハンドラ内で使っているgetElementByIdがエラーを吐くらしく、どう指定してやるんだかわからない（とりあえずdocument.onkeyup = onkeyupHてかんじにしたらFireFoxでは動いてる様子）。このあたりから、HTMLタグの属性部分でイベントハンドラを指定してしまったほうが、なにかとわずらわしいトラブルが減りそうな気がしている。でもエレガントじゃない。
Livedoor Readerやはてなブックマークなんかを見てみると、HTMLファイル内での指定もかなり使われてるみたいだし、ハマるよりは使ってしまえばいいのかなあ……でもはてなRSSはほとんど逃がしててイカス。これは監視するイベントの種類にも関係してそうだけど。
まぁあくまで「試験」があるわけなので、ひとまずペンディング。
2005/03/05 Sat 02:16
ブームに乗って、動的検索を作ってみました。ほとんど「Ajax を使った郵便番号検索」経由「Guide to Using XMLHttpRequest (with Baby Steps)」をそのまま流用させていただきました。キーワードをスペースで区切って複数入力したりは、もちろん（！）できません（スペースも含めて一つのパターンとして扱われます）。
かつてこのエントリーで公開していた検索フォームは、現在単独ページに移動しています。（2008年7月）
まずエントリーを探してきてXMLとして出力するCGI（Perl）を作り、それをJavaScriptで取りに行って検索しています。マッチングもクライアント側で行っているので、エントリーのメタデータ（XML）自体は固定ファイルでもかまわないわけですが、ひとまずPerlで動的に作り出しています（将来的にはwikieditish.cgiに静的生成を組み込む方向で）。
ただし、FireFoxから検索しようとするとエントリータイトルにエンティティが入っているエントリーをうまく処理できないらしく、エラーが出てしまったので、現在はタイトルにエンティティを含むエントリーが無いnewsカテゴリだけを対象にしています。全エントリーを対象とした場合でもIEからは検索できましたが、とりあえず保留。
FireFoxのエラーに対応するため自前のDTDまで作ってみたんですが、それでもエンティティが解決されないようで、かなりあやしい。とはいえDTDの書式あたりはまったく自信がないので、誰が悪いのかよくわかりません。これ以上の対応については勉強してからということで。
インターフェースをGoogle Suggestっぽくすることは考えてます。
参考・関連リンク
Guide to Using XMLHttpRequest (with Baby Steps)
Ajax を使った郵便番号検索
Dynamic HTML and XML: The XMLHttpRequest Object (Apple Developer Connection)
最速インターフェース研究会
Ajax: Web アプリケーション開発の新しいアプローチ
Google Suggest
追記（5/16）：XML生成時にエンティティをASCII文字に変換するよう変更。検索対象を全カテゴリに拡大しました。
2005/01/10 Mon 00:59
一昨日のこの記事を書いてから、外部リンクだけを別窓で開くかどうかを訪問者が選べる機能をなんとかつけられないかと検討してたんですが、とりあえず作ってみました。フォームにチェックが入るとリンクアンカーのhref属性の値（リンク先のURL）をパターンと照合し、設定値（ローカルのURL）にマッチしたもののtarget属性に"_self"を、それ以外には"_blank"を入れます。再びチェックを外すと全てに"_self"を入れます。利用する際はhttp://cu39.s57.xrea.com/の部分をそれぞれのURLに変えて下さい。
<head>
...
<script type="text/javascript">
<!--
// thanks to randomwalks.com
// and to http://www.sitepoint.com/article/standards-compliant-world
function externalLink(myArg) {
var regpat = "http://cu39.s57.xrea.com/";
var where;
if (myArg) where = "_blank";
else where = "_self";
for (var i=0; i<document.links.length; i++) {
if (document.links[i].href.match(regpat) == regpat) {
document.links[i].target = "_self";
} else {
document.links[i].target = where;
}
}
}
// -->
</script>
</head>
<body>
...
<form action="">
<div>
<input
type="checkbox"
style="margin-left:0em;padding-left:0em;border-width:0px;"
name="targetbox"
id="anchorcheck"
onclick="externalLink(this.checked);" />
<label for="anchorcheck" style="cursor:pointer;">
外部リンクを別窓で開く
</label>
</div>
</form>
...
</body>
自分でJavaScriptを書く（というか改造する）こと自体がはじめてだったのでけっこう苦労した……わりにはバグというか、問題があります。
- フォームにチェックを入れる
- 外部リンクをクリック
→ 別窓でリンクが開く（ここまではOK）
- http://cu39.s57.xrea.com/ 内の別の記事へのリンクをクリック
→ 同じ窓でリンクが開く
- BACK ボタンで戻る
→ まだフォームにチェックが入っている
- 外部リンクをクリック
→ 同じ窓でリンクが開く（NG）
とりあえずここまで。力尽きた……ひとまず正当なXHTML 1.0 Strictになりました。
追記：上の手順はローカルで試した結果だったんですが、サーバに上げてみたら手順4でBACKボタンを押したあと、チェックが入ってない状態に戻るみたいです。これはこれで中の記事を移動しながら読むときに都合が悪いけど、表示を裏切ってはいないからよしとしておこう。
FB.com
