• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web技術勉強会第1回目
 

Web技術勉強会第1回目

on

  • 2,108 views

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

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

Statistics

Views

Total Views
2,108
Views on SlideShare
2,078
Embed Views
30

Actions

Likes
0
Downloads
1
Comments
0

4 Embeds 30

http://blog.livedoor.jp 12
http://devel.de.c.dendai.ac.jp 10
http://study.de.c.dendai.ac.jp 6
http://s.deeeki.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web技術勉強会第1回目 Web技術勉強会第1回目 Presentation Transcript

    • Web 技術勉強会 1 回目 ~ Javascript でインクリメンタルなタグ検索と初めての AWS ~ Ryuichi TANAKA Study:http://devel.de.c.dendai.ac.jp/study/ Blog:http://blog.livedoor.jp/mapserver2007/
    • 1つ目の内容 Javascript で インクリメンタルタグ検索
    • Javascript で インクリメンタルタグ検索
      • 自宅のサーバで動かしているプログラム ( ブログ ) の拡張が今回のお話です
      ・結構昔から作り続けてる プログラムです ・ PHP で出来ています ・ DB は MySQL5 です
    • はてなブックマーク タグ一覧 (http://b.hatena.ne.jp/t) がやりたい 一文字入力する度に絞り込む
    • 機能実装 – アレンジと妥協
      • この機能を実装したい。ただし、以下のように仕様変更
      • 絞込み ( 該当しないタグを消去 ) はしない=自作プログラムではタグがあまり多くないため
      • 代わりに該当するするタグをハイライト表示
    • それらしくできた
    • 使い方 // 検索対象領域 , 検索フォーム 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); 呼び出し方 一文字入力するたびに発動させるには
    • それぞれのフィールド名 tag_regexp tag_all_list setTagEvents ( クリック時に発動 )
    • 2つ目の内容 初めての AWS (Amazon Web Service)
    • AWS で書籍検索
      • 同じく自作プログラム(ブログ)に書籍 検索機能を付ける
      ・機能要件 ・画面遷移無し ・登録時は BB コードに変換 ・既存のエントリ登録方法に沿った実装
    • BBコードとは? BB コードの記述例: [strong] 強調 [/strong]  ->  <b> 強調 </b> 「 amazon 」の BB コード書式 [amazon]title= タイトル ,author= 著者 , image= 画像 URL,price= 価格 ,url= 詳細 URL[/amazon] 独自拡張 BB コード 一般的な BB コード
    • amazon 機能実装 エントリ記述画面にタグを付ける (QuickTagPlus.js を拡張したもの ) 検索するとサムネイルを表示 (Ajax)
    • 表示させてみる [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]
    • 終わり ご清聴ありがとうございました