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

1. Web 技術勉強会 1 回目 ～ Javascript でインクリメンタルなタグ検索と初めての AWS ～ Ryuichi TANAKA Study:http://devel.de.c.dendai.ac.jp/study/ Blog:http://blog.livedoor.jp/mapserver2007/

2. 1つ目の内容 Javascript で インクリメンタルタグ検索

4. はてなブックマーク タグ一覧 (http://b.hatena.ne.jp/t) がやりたい 一文字入力する度に絞り込む

6. それらしくできた

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. それぞれのフィールド名 tag_regexp tag_all_list setTagEvents ( クリック時に発動 )

9. 2つ目の内容 初めての AWS (Amazon Web Service)

11. BBコードとは？ BB コードの記述例： [strong] 強調 [/strong] -> <b> 強調 </b> 「 amazon 」の BB コード書式 [amazon]title= タイトル ,author= 著者 , image= 画像 URL,price= 価格 ,url= 詳細 URL[/amazon] 独自拡張 BB コード 一般的な BB コード

12. amazon 機能実装 エントリ記述画面にタグを付ける (QuickTagPlus.js を拡張したもの ) 検索するとサムネイルを表示 (Ajax)

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