Embed Size (px)
DESCRIPTION
Citation preview
Web技術勉強会第12回～自作ブログ「DIARYSYS4」開発報告2～
Ryuichi TANAKAStudy:http://devel.de.c.dendai.ac.jp/study/
Blog:http://blog.livedoor.jp/mapserver2007/
前回に引き続き開発結果報告
• 前回までの進捗率
• 開発開始から約4週間
– 進度は予定通り。だが、大半が管理機能の実装なので実際のところ画面ではほとんど進んでいるように見えない^^;
40%
実装した機能
• トップ画面– Widget(TMAP、LivedoorClip、Yahoo!トピックス)(100%)
• 管理画面– エントリ管理(10%)
• DBから引っ張ってくるだけ
– Widget管理(95%)• Widgetの表示設定関係。ほぼ完成
– 新規エントリ(75%)• QuickTagsPlusのamazon拡張、リアルタイムプレビューは完成。タグ管理機能は途中(30%)
• 認証– Livedoor Authを利用した認証(100%)
今回の内容
• 今回も実装の報告＋α
– 機能実装は、単発で組めるので負担になりにくいので。
• 今回実装した機能
– ファイルアーカイブ機能• 画面遷移なしファイルアップローダ
• jQuery.tablesorter
• jQuery.carousel
• Imagerライブラリ
• QuickTagsPlus拡張
ファイルアーカイブ機能
• 保存してあるファイルを一括して閲覧、編集
– どこにでもありそう。だけど、これまで実装していなかったので、今回実装してみる。
– これまでは、恥ずかしながら、WinSCPでファイルをアップロードしていた…。
– だけど、実装するからには、例によって新しい要素を入れたい。
Ajaxっぽいアップロード
• Ajaxっぽいアップロードがしたい
– ライブラリを探すも、なかなか眼鏡にかなうものがない
– よさそうなものはあったが、カスタマイズがしにくい、ソースの記述方法がDIARYSYSとあまりに違うので組み込みにくい、などの理由から却下。
• 「Ajaxっぽい」のならOK…ということは
– 別に非同期でやる必要はないことに気が付く
– じゃあ、どうする？
iframeを利用する
• iframeをターゲットにアップロードする
見えないところにiframe
iframeを使うと画面遷移がない
submitを押すと必ず画面遷移が起きるaction=“test.pl” test.pl
A B
iframeをターゲットにすることで、見かけ上の遷移はなくなる
action=“test.pl”
test.plA
B
アップロード完了後Javascriptを実行
• Ajaxっぽく見せるため、コールバックを実行
• コールバックさせることで、見かけ上はAjaxっぽく見える。
– DIARYSYS4の実装では、コールバック後にさらにJSONPを実行している
# アップロード処理が終った後以下を実行print “<script>callback(“.to_json($data).”);</script>”;
ファイルアーカイブ機能をエントリ登録画面と連動させる
クリック
表示
アップロードした画像のサムネイル
ファイルアーカイブ機能をエントリ登録画面と連動させる
クリックするとBBコードを出力
リアルタイムプレビュー
jQuery.tablesorter
・だいぶ綺麗になる・ヘッダ部分をクリックするとソートしてくれる・導入が非常に簡単
jQuery.carousel
・左右にあるボタンを押すとスクロールしてくれる・導入が比較的に簡単
Imager
サムネイル画像
・サムネイル画像は、ファイルアップロード時に生成・Imagerライブラリを使うと簡単にできる
＋α – 開発合宿のテーマ
• 候補
– DIARYSYS4の拡張• エントリ登録・表示周り
– 現在続けている開発を続行する形
• 外部ブログ同期機能
– まずは、WWW::HatenaDiaryを使う？
– その後、WWW::LivedoorBlogを作る？
– 泥臭くやればたぶんできるだろう
– まずは単独で作り、その後DIARYSYS4に移植
