Web技術勉強会第1回目

1,561 views

Published on

Web技術勉強会第1回目の資料です。http://devel.de.c.dendai.ac.jp/study/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,561
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web技術勉強会第1回目

  1. 1. Web 技術勉強会 1 回目 ~ Javascript でインクリメンタルなタグ検索と初めての AWS ~ Ryuichi TANAKA Study:http://devel.de.c.dendai.ac.jp/study/ Blog:http://blog.livedoor.jp/mapserver2007/
  2. 2. 1つ目の内容 Javascript で インクリメンタルタグ検索
  3. 3. Javascript で インクリメンタルタグ検索 <ul><li>自宅のサーバで動かしているプログラム ( ブログ ) の拡張が今回のお話です </li></ul>・結構昔から作り続けてる プログラムです ・ PHP で出来ています ・ DB は MySQL5 です
  4. 4. はてなブックマーク タグ一覧 (http://b.hatena.ne.jp/t) がやりたい 一文字入力する度に絞り込む
  5. 5. 機能実装 – アレンジと妥協 <ul><li>この機能を実装したい。ただし、以下のように仕様変更 </li></ul><ul><li>絞込み ( 該当しないタグを消去 ) はしない=自作プログラムではタグがあまり多くないため </li></ul><ul><li>代わりに該当するするタグをハイライト表示 </li></ul>
  6. 6. それらしくできた
  7. 7. 使い方 // 検索対象領域 , 検索フォーム ID, コールバック関数 var field = {tag : ‘tag_all_list’, grep : ‘tag_regexp’, func : 'setTagEvents'}; // これで準備完了 var grep = new TagGrep(field); // obj.grep は’ tag_regexp’ Event.observe($(obj.grep), 'keyup', this.hilite.bindAsEventListener(this), false); Event.observe($(obj.grep), 'focus', this.hilite.bindAsEventListener(this), false); 呼び出し方 一文字入力するたびに発動させるには
  8. 8. それぞれのフィールド名 tag_regexp tag_all_list setTagEvents ( クリック時に発動 )
  9. 9. 2つ目の内容 初めての AWS (Amazon Web Service)
  10. 10. AWS で書籍検索 <ul><li>同じく自作プログラム(ブログ)に書籍 検索機能を付ける </li></ul>・機能要件 ・画面遷移無し ・登録時は BB コードに変換 ・既存のエントリ登録方法に沿った実装
  11. 11. BBコードとは? BB コードの記述例: [strong] 強調 [/strong]  ->  <b> 強調 </b> 「 amazon 」の BB コード書式 [amazon]title= タイトル ,author= 著者 , image= 画像 URL,price= 価格 ,url= 詳細 URL[/amazon] 独自拡張 BB コード 一般的な BB コード
  12. 12. amazon 機能実装 エントリ記述画面にタグを付ける (QuickTagPlus.js を拡張したもの ) 検索するとサムネイルを表示 (Ajax)
  13. 13. 表示させてみる [amazon]title=Google を支える技術 ~ 巨大システムの内側の世界 (WEB+DB PRESS プラスシリーズ ),author= 西田 圭介 ,image= http://ecx.images-amazon.com/images/I/51m8phYZbyL._SL160_.jpg,price= ¥ 2394, url=http://www.amazon.co.jp/gp/redirect.html%3FASIN=4774134325%26tag=ws% 26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4774134325% 253FSubscriptionId=02GA6TH96EC9SQKGEJ82[/amazon]
  14. 14. 終わり ご清聴ありがとうございました

×