Web技術勉強会12回目

1,137 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,137
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web技術勉強会12回目

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

×