tech conf2009 eiji_shinohara

1

ぴたっと TV

楽天株式会社　開発部　広告サービス開発・運用課　篠原英治｜ 2009/10/24

←じゃないです

2

Introducing myself

• About me– 篠原英治 ( しのはらえいじ )– 29 歳 ( 独身 )

• Blog– http://shinodogg.com

• Twitter– shinodogg

• In Rakuten– Advertisement Service


3

My job is …

• Daily routine


4

Engineering

• 私のエンジニア的作業と言えば

– トラブル対応• インターネットで大規模にやってるといろいろ起こり

ます。

– 運用オペレーション• 本番環境を触れるのは正社員のエンジニアのみ。

– 誤解の無いように、、、• それはそれで、エキサイティングでヤリガイのある仕

事です。


5

I want to …

• そんな私ですが、、

– たまには

プログラムも書きたいですし、

– たまには

未経験の技術にも触れたいですし、、

– たまには

独りよがりなこと (?) もしたいですし、、、


6

Welcome to the Jungle

• 楽天にはジャングルという (ry – 自席に Ubuntu 端末あるからあんま使ってないけどね

ｗ– 今までジャングルでニコカレとか作りました


7

Developing new service

• 今回作ったのは　『 TV 的なもの』

– 最近テレビ見てないから、なんかテレビっぽいの作りたかった

– テレビ系のキーワードでググってたら・・・


8

Tamori (most famous MC in Japan)←じゃないです

9

What “Pitatto” means?

• で、『ぴたっと』って何？

–テレビといったら CM ↓–CM といったら広告　↓–広告といったら、、、


10

Ads by Rakuten

• 楽天ぴたっとアド


Google Adsense みたいな感じ

　 - 広告主が

　　　キーワードで広告を入札して

　 - ブログとか持ってる人が

　　　それ用のタグを自分のページに貼る

　 - 広告がクリックされたら課金

11

zawa zawa←じゃないです

　　　 ,-‐' ￣　　　　　　　　　　　　　　　　　 :::::::::::::: ゝ　／ _ 　　　　　　　　　　　　　　　　　　　　　　 :::::::::: ＼／ .‐' ／　　　　　　　　　　　　　　　　　　　　　ﾍ ::::::::: ヾ　／　　　　　　　 /: | 　 | 　　　　　　　　　　　　　 ::::::: ヽ　　これを使って・・・・・・・・./.... ／　　　　／ /:: 　 | 　 :|: | 　 :∧ 、　　　　　　　　　 ::::: ヾ. ／ / 　　　／ / /:: 　　 | 　 | : | 　 |:: ::| 、　　　　　　　　　 ::: ヽ　　テレビっぽいい何かイケテル. / 　　　／ : /./::: 　　　　 | :| 　 | |: __;:| 、　　　　　　　　 :::| 　　　　サービスをつくりたい・・・・・/... ／ .. ／＼ |/::: 　　　　　 |:|__, -||' 　 __,-l 、　　　　　　　 :::|／ / ／ :: 　＼ | ＼　　　　 _,- ‘| 　 __,-|‐’ 　 :::::: ＼ .. 　　　　　　 :::| 　 Google 　と　 Yahoo! 　を巻き込んでおけば、　 / | ＿＿＿＼ || 　　 |||: ＿二＿＿＿ _ :::::::| 　　　　　　 :::| 　　とりあえずソレっぽく見えるだろう。。.. 　　 | ￣￣￣ o 　 ≡ ￣￣￣ﾗ o ￣￣ :::::::|.../⌒i 　　　 :::| 　　ただし、　　 | 　｀ ‐ --‐/,::::::: 　　｀ ‐ ---‐ ‘´ 　 :::::::::| .|l⌒l:| 　　 :::| 　　ぴたっとアドのデータを使っていいか. 　　｜　　 ::/,::::::::::: 　　　　　　　　　 :::u:::::|..|l⌒l:| 　　 :::| 　　　おエライさんに聞いてない・・・. 　　｜　　 :/,::::::::::::::: 　　　 U 　　　　　 ::::::::::| || ６ : | 　　 ::::::|. 　　 │　 /,:::::::::::: ＿ ::) 　　　　　　　 :::::::::::::|.|__ ノ　　　 :::::| 　　でもジャングルだし・・・.. 　　　　 | .(.:: ' ＿＿＿＿＿＿　　　 :::::::::: ／ l 　　　　　　 ::::|　　　　　 | 　　（＿＿＿＿＿＿）　 ::::::::: ／ :::/ 　　　　　　　 :::| 　まぁ、いい・・・. 　　　　　 | 　　　　　　　　　　 ::::::::: ／ : 　 :::/ 　　　　　　　　 :::l　　　　　　 l 　　　━━　　　 :::::::: ／： : 　 ::/ 　　　　　　 ::::: 　　 :::l 　　今はとにかく　　　　　 / ｌ　　　　　　 ::::: ／：：　　 ::/ 　　　　　　 :::/ ＼　 :::::| 　　　モノを作るだけ　　　　　 /. 　ヽ　　　　 :::: ／：：：　　 :/ 　　　　　 :::::::/ 　　＼　 ::|.. 　　　　 / 　　　ヽ　　　 :: ／：：：：　　 ::;/ 　　　　　 :::::::/ 　　　　＼ :| 　　めんどくさいことは. 　　　 / 　　　　　ヽ : ／ | ：：：： : 　 ,-‐‘/ 　　　　　 :::::::/_,‐’ 　　　　〉 :| 　　　　誰か後からよろしくネｗ. 　　 / ／　　　　　 :: ／ |, -‐' ￣／ / 　　　　 :::::: ／　　　　　／ :: ＼. 　／ / 　　　　 ::: ／ | ￣　　　　　　 / 　　　　 :::: ／　 _,‐' 　　 . ／ :::::::::::　　 / 　　　 :::: ／ /| 　　　　　　 _// 　　　 :: ／ __, ‐' 　　／ ::::::::::::::::　 / 　　 ::::: ／　 / | 　　　 __, -‐' / 　　　／ ‐ ' 　　　　／ ::::::::::::::::::::::

12

Insight of Pitatto TV←じゃないです

•Google 急上昇ワード•Yahoo! 急上昇ワード•Kizasi ランキング

楽天ぴたっとアドデータ同期

許可取ってないので今はダミーッス･･･

ぴたっとアドで何円で、入札されてるか検索

キーワードと入札価格をApache に配置

Flash(swf)データ取得 /加工 /表示

13

DEMO

• Google＋ Y!＋Kizasi＋ぴたっとアド– お。なんか Mashup 的

• with Tamori– これ重要

• デモサイト (in Jungle)http://192.168.200.101/pitattotv/


14

can’t connect jungle. So…←じゃないです

番組開始

15


流行のキーワード with ぴたっとアドの入札価格カーソル合わせてクリック⇒ぴたっとアドのサイトへ

16


流れっぱなしだと疲れちゃうしね

17

Insight of Pitatto TV←じゃないです

『 Mｙ SQL』mysql> select * from keyword_price order by id;+-----+---------------------+-------+| id | keyword | price |+-----+---------------------+-------+| 25 | 岡本光太郎 | 1 | | 26 | パ・リーグ制覇 | 2 | | 27 | サンシャイン牧場 | 3 | | 28 | 愛川ゆず季 | 4 | | 29 | オール巨人 | 5 | | 30 | 中山エミリ | 6 | | 31 | 亀井大臣 | 7 | | 32 | 全高 1260mm | 8 | | 33 | 原口一博総務相 | 9 | | 34 | 木村方子 | 10 | | 35 | 古村比呂 | 11 | | 36 | 前田典子 | 12 | | 37 | 西村知美 | 13 |

『 HTML(swf呼び出し ) 』<div id ="head" class="position_head"><img src="techconf_head.jpg"></div><div id ="left" class="position_left"><img src="techconf_left.jpg"></div><div id ="right" class="position_right"><img src="techconf_right.jpg"></div><div id ="foot" class="position_foot"><img src="techconf_foot.jpg"></div><div id ="swf" class="position_swf"></div><script type="text/javascript"></script>

『 Apache 』[23/Oct/2009:11:07:48 +0900] "GET /67.txt HTTP/1.1" 200 45 "-" "Mozilla/5.0 [23/Oct/2009:11:07:50 +0900] "GET /69.txt HTTP/1.1" 200 39 "-" "Mozilla/5.0 [23/Oct/2009:11:07:52 +0900] "GET /71.txt HTTP/1.1" 200 36 "-" "Mozilla/5.0 [23/Oct/2009:11:07:54 +0900] "GET /73.txt HTTP/1.1" 200 63 "-" "Mozilla/5.0 [23/Oct/2009:11:07:56 +0900] "GET /75.txt HTTP/1.1" 200 39 "-" "Mozilla/5.0 [23/Oct/2009:11:07:56 +0900] "GET /tamori_cm.txt HTTP/1.1" 200 284 "-" "Mozilla/5.0 [23/Oct/2009:11:07:58 +0900] "GET /77.txt HTTP/1.1" 200 38 "-" "Mozilla/5.0 [23/Oct/2009:11:08:00 +0900] "GET /20.txt HTTP/1.1" 200 39 "-" "Mozilla/5.0

『キーワード取得バッチ起動』#!/bin/bashexport LANG=ja_JP.UTF-8CLASSPATH=./for i in $( ls ./ ); do CLASSPATH=$CLASSPATH:$idone

java -cp ${CLASSPATH} keyword.Executer

18

to be continued←じゃないです

続きはデモブースで

　　　△＼＿／△ 　　 / 　　　ヽリ　　丶　　　千客万来！　　 |;:: 　⌒　 _ 　⌒　 |⌒ ヽ　　 | 　＝　人　＝ | 从､ﾉ　　 | ＿＿＿＿＿／　 :;;| 　　 |──（福）─ ;;' 　ノ　（　（ ))) ）　　　　　 / 　／ヽ ' ／￣＼　 ,, 　ヘ　 |;;;;: ├: 千 :┤　　 ::;;| 　 |::: 　├ : 両 :┤　　 :::| 　＼（ , ＼＿／（／､､､

19

Environment

• はじめての ActionScript

– CREATIVE SUITE (Adobe の製品 ) ってのがあるけど高いのね・・

– Eclipse で ActionScript を書けるプラグイン•AXDT(http://axdt.org/)

–無料–ActionScript を swf にコンパイルできます–Eclipse上で swf を動作させることができま

す–デバッグ環境は非常に貧弱です


20

Environment

• はじめての開発環境


21

CODE – Java. I used NekoHTML

• 流行のキーワードの取得


// Google 急上昇ワードの取得DOMParser parser = new DOMParser();parser.parse("http://www.google.co.jp/m/services/trends/get");document = parser.getDocument();nodeList = document.getElementsByTagName("query");List<String> googleKeywordList = new ArrayList<String>();for (int i = 0; i < nodeList.getLength(); i++) {Element element = (Element) nodeList.item(i);String keyword = element.getTextContent();googleKeywordList.add(keyword);

}

22

CODE – ActionScript.

• 取得したデータをテレビに表示←じゃないです

loader.addEventListener(Event.COMPLETE, completeChildHandler);var date:Date = new Date();r = ((date.hours+date.minutes+date.seconds)%80+1).toString(); fileName = "http://192.168.200.101/pitattotv/" + r +".txt";var request:URLRequest = new URLRequest(fileName);loader.load(request);textField=new TextField();textField.autoSize = TextFieldAutoSize.LEFT;textField.background = true;textField.backgroundColor = 0xFFF0F5;textField.x = Math.floor(Math.random()*400);textField.y = Math.floor(Math.random()*250);trace("cnt=>"+cnt);addChildAt(textField, cnt);

23

For me←じゃないです

　　 ,―――- ､　 / 　 /~~~~~~~ ＼　 | 　 / 　／　　＼ | 　 (6 　　　 ( ･ ) 　 ( ･ ) | 　も　　　　　つ　｜　　　　　　　 | 　　　ｌｌｌ ||||||||| ｌｌ | 　　　いやー、　 | | 　　　＼＿ / / 　＜　プログラムって本当に楽しい／ | 　＼＿＿＿／＼　　　ものですねぇ

24

Developing Camp

• 合宿、熱い。– ぴたっと TV は合宿で実装しました。楽しかっ

た～！


25

Thank You

ご清聴ありがとうございました


tech conf2009 eiji_shinohara

Documents