SmallStyle

_ （再）ページ遷移なしで日記のプレビューを表示するプラグイン…のプロトタイプ

5 年前にそんなことができるプラグインを作ってはいたのですが，かなり実験的な要素が強くて人におすすめできたもんじゃないっていうくらいの出来だったのですが，jQuery の登場や tDiary の JavaScript 化という波に乗って，新しく書き直してみました．

ひとまず fork した async-preview ブランチに置いてあります．興味のある方はどうぞ．こういうときに GitHub は便利ですね．

• https://github.com/smallstyle/tdiary-contrib/commit/8ec6385aa206c8785ab83333b5bdefda5579dec0

このプラグインを使うと，通常のプレビューボタンを押したときと同じリクエストが非同期で送信され，日記のプレビュー部分の HTML エレメントを取り出して表示をしています．5 年前にやってることと基本は変わりないですねw．

今のところ編集領域の上に，「編集」と「プレビュー」の 2 つのボタンを用意していますが，それ以外の実装案としては，

• 既存のプレビューボタンの click イベントを横取りして，非同期で実行する
• そもそもユーザーのアクションなしで，定期的にプレビューを更新する

といったこともやってみたりしましたが，さて，どれがいいのだろうか…．

上記の 2 つは実装してボツにしたもので，1 つめの実装は，プレビューボタン押下後に，ボタン下部にプレビューを表示するようにしてみました．これはプレビュー後に，再度，編集しようと思うと，本文が長いと上に行ったり，下に行ったりと移動量が多く感じられたのでボツにしました．2 つめの実装も表示をどこにするかが重要で，文章が長くなってくると結局プレビューをみるためにスクロールする必要が出てくることと，タイピング時にちまちま動くのが，最初はいいかなと思っても，気が散ったりする感じがあったのでボツにしました．定期的にリクエストかけるのはサーバー側にも負荷になりますしね．

個人的にもっとも影響が大きいのは，この非同期プレビューを利用した場合に，校正プラグインの結果表示がやりにくい点です．日記のプレビュー時に，日本語としておかしな部分を指摘してくれるので，自分で作っといてなんですが，結構便利なんです．

こういった理由から，このプラグインの実装では上部に非同期プレビューのボタン，下部に従来のプレビューのボタンとわけて表示をさせています．まぁ，非同期プレビューのときにも校正結果の HTML エレメントを取得して，どこかしらに表示させればいいだけのことなんですが…．

設定画面の Ajax 化について，たださんが issue #41 で着手されているようなので，更新関係周りの仕様や動作が今後，変わってくる可能性があるのかな？

プラグインから外部サービスを呼び出す際に，API 側が jsonp に対応していると，クロスドメインの制限を超えて利用することが可能なので JavaScript 化しやすいですが，ものによっては XML でしか取得できないものなどもあるので，日記編集画面から個別のプラグインに対してリクエストを投げて，JSON なりXML なりで取得できる仕組みが将来的にできてくるとうれしいかな，と思ったりするのでした．

うーん，でもサーバーへの負荷を考えると，一度のプレビュー実行のときに，すべてのプラグインの処理をまとめて実行するのがいいのか，プラグインを個別に呼び出せるのがいいのか，どっちがいいんだろう．更新時やプレビュー時に外部サービスにアクセスするプラグインが増えてくると，個別に呼び出せたほうがよさそうな気もするけど．