More Related Content Similar to Introduction to Favmemo for Immature Engineers (20) More from Takeshi Arabiki (17) Introduction to Favmemo for Immature Engineers2. 自己紹介
• Takeshi Arabiki
‣ 社会人2年目の底辺 Web エンジニア
‣ Twitter & はてな: @a_bicky & id:a_bicky
• 興味など
機械学習、自然言語処理、R
• ブログ
あらびき日記 http://d.hatena.ne.jp/a_bicky/
4. 背景
• きっかけ(2010年9月末)
twilog の fav 版が欲しい!存在しないなら自分で作ろう!!
• モチベーション
1. Web 開発に必要な知識の習得
2. 機械学習のサービス適用(全然やれてない)
3. 社会貢献
4. お小遣い稼ぎ(あわよくば)
5. 略歴
• 2010年10月31日: リリース(最初は年間100円の Domainking のレンタルサーバ)
Twitter のお気に入りをタグで管理するサービス Favmemo をリリースしました! - あらびき日記
• 2010年11月2日: @ropross さんにより類似サービス favolog リリース
“類似” と表現すると失礼?とりあえず存在価値が一気に低下・・・
• 2010年11月9日: MASHUP AWARDS 6 に応募
Favmemo の機能を追加して MASHUP AWARDS 6 に応募してみた - あらびき日記
• 2011年12月28日: リニューアル(10月の時点でさくら VPS に移行)
Favmemoリニューアルしました!! - あらびき日記
• 2012年8月末: Twitter で話題になりユーザ数が6倍程度に増加
cf. http://favstar.fm/users/daaahlia/status/240459122556936192
リニューアル時にデモページを設けたのが良かったかも。腐女子層が多い?
6. 現状
• 登録ユーザ数約3,250(2012年9月22日現在)
※ PV には XMLHttpRequest によるリクエストも含む
(タグの更新リクエストは含めない方が PV としては良いかも)
8. 構成
• LAMP on さくら VPS
Linux のディストリビューションは Debian
P は PHP(Dotdeb リポジトリのものをインストール)
さくら VPS 移行時に nginx を使ってみようとしたけど Evernote との連携部
分で動かない部分があったので見送り
• 規模の割には比較的 JavaScript 多め(但し発狂しそうな程汚いコード)
ページ遷移が大嫌いなので・・・
jQuery を使用
UI 周りはそのうち Twitter Bootstrap とか使いたい
9. ページ遷移がない
一度ログインしてしまえば基本的にページ遷移がない
↑ index.php の内容はこれだけ
1. XHR で /updatedb.php にリクエストを送り、新しいツイートをデータベースに取り込む
※ Chunked transfer encoding によってツイートの取り込み状況を表示
cf. jQueryの$.ajaxで通信途中のresponseTextを取得する - あらびき日記
2. XHR で /get_favs.php からツイートやタグ一覧の情報を取得してページの内容を書き換える
※ 1回目の SELECT 文には何秒もかかっているのでスキーマや設定などを見直す必要あり
10. ページ遷移がない!
更新部分のみ XHR で取得
XHR で /get_favs.php の結果を取得し、この部分のみを更新する
・AutoPager 機能では下にツイート(li 要素)を追加
・検索やタグの選択によって表示項目が変わる場合は innerHTML を書き換える
(jQuery history プラグインによって履歴を管理しているので「戻る」も可能)
12. ページ遷移がない!!!
タグの編集結果などは「タグ一覧」にリアルタイムに反映
JavaScript で数を増やしたり順番を変えたり(地味に大変)
ところで、運営者自身タグ付けしてないのがバレバレ…
今はタグ名を base64 エンコードなどによって ID として有効な文字に変換したものを ID
として付与し、変更のあったタグの li 要素を ID で取得して数を書き換えている
※ タグ名をキー、ツイートの数を値とした連想配列に情報を保持しておいて、毎回タグ一覧を一新
する方が楽でいいかもしれない
13. Evernote 連携
MASHUP AWARDS 6 に応募するためだけに導入
• Evernote にエクスポートするためだけに Favmemo を利用しているユーザもいるらしい
• Evernote との OAuth 認証には window.open で新しいウィンドウを表示
※ 以前は iframe を使っていたけど Evernote 側がクリックジャッキング対策としてヘッダに
X-Frame-Options: SAMEORIGIN を付けるようになって使えなくなった
認証が完了したら以下のような感じの完了ページを出すことで再度 Evernote へのエクスポートを
試みてウィンドウを閉じる
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.opener.retry();
window.close();
</script>
</head>
</html>
14. マルチアカウント対応
要望があったので導入(2012年7月末)
• ログインしているアカウント情報(Twitter ID と screen_name)を cookie で管理
別アカウントで OAuth 認証を済ませた後に cookie にアカウント情報を保存することで、
別タブで開いている Favmemo のアカウント情報も更新される
アカウント情報を JSON 形式で保存
• 今まで PHP で $_SESSION としていた部分を $SESSION (= $_SESSION[$user_id]) に変える
程度の改修(リクエストの際 QueryString に screen_name を付与してアカウントを判別)
16. 開発環境とか
• Mac の VMware Fusion にサーバとほぼ同じ構成の Debian をインストール
/etc/hosts に 172.16.199.5
favmemo.local みたいに記述して favmemo.local でアクセスでき
るようにしている。Twitter のコールバック URL も favmemo.local にしてある。
• JavaScript のデバッグは Firebug + FirePHP
今は Chrome のディベロッパーツールの方が秀逸な気がするので FirePHP 相当のものを探
し中(webug は使い物にならなかった)
• 画像の作成は Inkscape
最初は Ubuntu で作成したので Mac で開くとフォントの違いから表示が乱れる。設定を
いじるのも面倒なので今も Ubuntu の Inkscape で編集。そろそろ Mac で編集したい。
Ajax で使う「読み込み中」を意味する画像の作成は次のサイトがオススメ
Preloaders.net - AJAX loading GIF and APNG spinners, bars and 3D animations generator
• エディタは Emacs
WebStorm とか試してみたいかも
17. 動作確認とか
• Mac の Safari, Firefox, Chrome, Opera で確認
古いバージョンでは確認しない。IE は VMware Fusion にインストールしてある Windows
の IE9 で IE7 と IE8 も確認(開発者ツールのドキュメントモードを使用)。IE6 はもう確
認していないから悲惨なことになっていそう。
• テストは全然できてない!
ユニットテストという言葉すら知らない時に開発したので PHP 側のテストはほとんどな
い(一部 PHPUnit を使用)。
JavaScript のユニットテストは皆無(Jasmine とか使おうかと…)。
リニューアル時に結合テストのため Selenium (WebDriver) を使おうとしたけど、エミュ
レートできない動作があって断念(調査不足?)
19. 主なTODO
• フレームワークの使用
FulePHP か Ruby on Rails を使いたい(メンテナンス性の向上と後学のため)
同時にデプロイ方法の変更とかテストの導入とか。これが終わったらβ版に昇格?
• 自動ログイン機能の実装
• モバイル対応
ブラウザに対応させるか、Titanium を使ってアプリをリリース
• 検索ボックスのクエリ補完・推薦
Trie の実装とか。自然言語処理の勉強として
• 広告の最適化
amazon の広告を自然言語処理・機械学習的な要素を取り入れて CTR 向上したらおもし
ろそう(お金 けが目的じゃないので自前でアルゴリズムを考えたい)
21. まとめになってないけど…
• Favmemo は自己満的サービスだけど最近ユーザが増えた
• ページ遷移は嫌い
• フレームワークを使って大幅にリファクタリングしたい
• そのうち機械学習のサービス適用とかしてみたい
• まだいろいろやりたいことはあるのでゆるゆると続けていきたい