1. Web技術勉強会第12回
～自作ブログ「DIARYSYS4」開発報告2～
Ryuichi TANAKA
Study:http://devel.de.c.dendai.ac.jp/study/
Blog:http://blog.livedoor.jp/mapserver2007/

2. 前回に引き続き開発結果報告
• 前回までの進捗率
40%
• 開発開始から約4週間
– 進度は予定通り。だが、大半が管理機能の実装なので
実際のところ画面ではほとんど進んでいるように見え
ない^^;

3. 実装した機能
• トップ画面
– Widget(TMAP、LivedoorClip、Yahoo!トピックス)(100%)
• 管理画面
– エントリ管理(10%)
• DBから引っ張ってくるだけ
– Widget管理(95%)
• Widgetの表示設定関係。ほぼ完成
– 新規エントリ(75%)
• QuickTagsPlusのamazon拡張、リアルタイムプレビューは完成。タグ管
理機能は途中(30%)
• 認証
– Livedoor Authを利用した認証(100%)

4. 今回の内容
• 今回も実装の報告＋α
– 機能実装は、単発で組めるので負担になりにくいので。
• 今回実装した機能
– ファイルアーカイブ機能
• 画面遷移なしファイルアップローダ
• jQuery.tablesorter
• jQuery.carousel
• Imagerライブラリ
• QuickTagsPlus拡張

5. ファイルアーカイブ機能
• 保存してあるファイルを一括して閲覧、編集
– どこにでもありそう。だけど、これまで実装していなかっ
たので、今回実装してみる。
– これまでは、恥ずかしながら、WinSCPでファイルをアッ
プロードしていた…。
– だけど、実装するからには、例によって新しい要素を入
れたい。

6. Ajaxっぽいアップロード
• Ajaxっぽいアップロードがしたい
– ライブラリを探すも、なかなか眼鏡にかなうものがない
– よさそうなものはあったが、カスタマイズがしにくい、
ソースの記述方法がDIARYSYSとあまりに違うので組
み込みにくい、などの理由から却下。
• 「Ajaxっぽい」のならOK…ということは
– 別に非同期でやる必要はないことに気が付く
– じゃあ、どうする？

7. iframeを利用する
• iframeをターゲットにアップロードする
見えないところにiframe

8. iframeを使うと画面遷移がない
A B
submitを押すと必ず
action=“test.pl” 画面遷移が起きる test.pl
iframeをターゲット
A にすることで、見かけ上
test.pl の遷移はなくなる
B
action=“test.pl”

9. アップロード完了後Javascriptを実行
• Ajaxっぽく見せるため、コールバックを実行
# アップロード処理が終った後以下を実行
print “<script>callback(“.to_json($data).”);</script>”;
• コールバックさせることで、見かけ上はAjaxっぽく
見える。
– DIARYSYS4の実装では、コールバック後にさらに
JSONPを実行している

10. ファイルアーカイブ機能をエントリ登録画面
と連動させる
クリック
表示
アップロードした画像の
サムネイル

11. ファイルアーカイブ機能をエントリ登録画面
と連動させる
クリックすると
BBコードを出力
リアルタイムプレビュー

12. jQuery.tablesorter
・だいぶ綺麗になる
・ヘッダ部分をクリックするとソートしてくれる
・導入が非常に簡単

13. jQuery.carousel
・左右にあるボタンを押すとスクロールしてくれる
・導入が比較的に簡単

14. Imager
サムネイル画像
・サムネイル画像は、ファイルアップロード時に生成
・Imagerライブラリを使うと簡単にできる

15. ＋α – 開発合宿のテーマ
• 候補
– DIARYSYS4の拡張
• エントリ登録・表示周り
– 現在続けている開発を続行する形
• 外部ブログ同期機能
– まずは、WWW::HatenaDiaryを使う？
– その後、WWW::LivedoorBlogを作る？
– 泥臭くやればたぶんできるだろう
– まずは単独で作り、その後DIARYSYS4に移植