Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web技術勉強会第1回目

1,616 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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. 終わり ご清聴ありがとうございました

×