SmallStyle


2006-05-21

_ Ajax を使った tDiary のプレビュー表示

同じようなのをちょこちょこ作りはじめてたら,HSBT さんに先を越されてしまった.ページ遷移なしでプレビュー表示できるのはなかなかいい感じ.でも,プラグイン部分も表示された方がいいよなぁと思ってしまう.

実はプラグイン部分も表示できるように tDiary の update.rb をたたいてプレビュー表示ができないかを試していたのですが,どうにもうまくいかずに挫折.というのも,レスポンスが文字列としてしか扱えないので,実際に利用したいプレビュー部分のみを切り出すのが面倒だったから.

xmlhttprequest のレスポンスの取得には,responseText か responseXML が使えるのですが,後者の場合はちゃんとした XML じゃないとパースができない.ちなみにレスポンスの mime-type が text/xml でないと何も取得できないのですが,overrideMimeType('text/xml') としてやることで無理矢理取得することができます.まぁ,できたところでエラーになってしまうのですが…

でも,やっぱりできないのはやっぱり気になるので無理矢理表示できるようにしてみた.で,とりあえずプレビュー時に返される HTML で日記プレビュー部分の <div class="day"> の開始位置と,<div class="footer"> の開始位置を indexOf で割り出して,その値をキーに substring で文字列を切り出して,innerHTML で表示という荒技でなんとかやってみた.

今のところ,テキスト入力やプラグイン関連もリアルタイムに更新されるようになっているので,入力していて書いたあとからさくさくとプレビューできるは結構気持ちいい.一文字ごとにサーバへリクエストをとばすのはちょっとうざいかなと思ったので,少々小細工がしてあります.

プレビューの表示位置とか,もうちょっといじってもよさそうですが,とりあえず公開してみます.

以前,公開したタグ生成プラグインと共存させる場合は,xmlhttprequest の部分は再利用できるので,共存版を.タグ生成プラグインを使っていない場合は,単体動作版をダウンロードしてください.

plugin ディレクトリに入れて追記画面で本文を入力すると,入力フォームの下にリアルタイムにプレビュー表示されます.一応,amazon プラグインなんかがうまく表示されているのは確認していますが,このプラグインが動かないとかあったらお知らせください.

_ 1 ヶ月点検

新車 1 ヶ月点検でディーラーへ.点検時のオイル無料交換券があったので,ちょうど走行距離も 1000 km 近かったので交換.

点検は 1 時間ほどで終了.特に問題点はなく,空気圧の調整などをして帰宅.

Tags: car
本日のツッコミ(全4件) [ツッコミを入れる]
_ TrackBack (2006-05-21 20:36)

http://www.hsbt.org/diary/20060521.html#p02<br>HsbtDiary<br>Ajaxを使ったtDiaryのプレビュー表示プラグイン(2)<br>ボタンを押さないでリアルタイムでパースするにはどうすればいいかなあと既存のデモを色々とSBMから引っ張り出して調べてみた。 text-hatena.js 公開 ppencode - JavaScript demo ふーむ、この二つを見た感じだと、tDiaryでの実現はHikidocをjsに移植するとかしないとダメ..

_ かわむらこうじ (2006-05-22 08:39)

何かどんどん豪勢な機能がついていくなーー。。<br>MIXIとの関連も見事・・・やるなー・・<br><br>ところで、新人二人の中に私の後輩君はいたかね?!

_ hb (2006-05-22 23:52)

思いついたらちょこちょこって感じで最近はやってます.<br>mixi の方は最新の日記のことかな?単純に RSS の Feed 読ませてるだけだからねぇ.<br><br>新人くんとは会話する暇もなくまだ発見できてないのさ.まぁ 1 人は別の大学なのは知っているのですがね.

_ TrackBack (2006-12-30 15:58)

http://miyaken.stbbs.net/diary/20061229.html#p03<br>だいあろぐ<br>tDiary のメンテナンス<br>鎌倉までドライブしようかと思っていたのだけれど、あまりに道路が混んでいたので取りやめてトンボ帰り。パソコンに向かって、しばらくほったらかしていた tDiary のメンテナンスをすることにした。 最新版にアップデートしたり、いくつか気になっていたプラグインを導入..


最近の日記