Introduction to Favmemo for Immature Engineers

Introduction to Favmemo
for Immature Engineers
2012/09/23

@a_bicky

自己紹介
• Takeshi Arabiki
‣ 社会人２年目の底辺 Web エンジニア

‣ Twitter & はてな: @a_bicky & id:a_bicky

• 興味など
機械学習、自然言語処理、R

• ブログ
あらびき日記 http://d.hatena.ne.jp/a_bicky/

背景
• きっかけ（2010年9月末）
twilog の fav 版が欲しい！存在しないなら自分で作ろう！！

• モチベーション
1. Web 開発に必要な知識の習得
2. 機械学習のサービス適用（全然やれてない）
3. 社会貢献
4. お小遣い稼ぎ（あわよくば）

略歴
• 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
リニューアル時にデモページを設けたのが良かったかも。腐女子層が多い？

現状
• 登録ユーザ数約3,250（2012年9月22日現在）

※ PV には XMLHttpRequest によるリクエストも含む
（タグの更新リクエストは含めない方が PV としては良いかも）

構成
• LAMP on さくら VPS
Linux のディストリビューションは Debian
P は PHP（Dotdeb リポジトリのものをインストール）
さくら VPS 移行時に nginx を使ってみようとしたけど Evernote との連携部
分で動かない部分があったので見送り

• 規模の割には比較的 JavaScript 多め（但し発狂しそうな程汚いコード）
ページ遷移が大嫌いなので・・・
jQuery を使用
UI 周りはそのうち Twitter Bootstrap とか使いたい

ページ遷移がない
一度ログインしてしまえば基本的にページ遷移がない

↑ index.php の内容はこれだけ
1. XHR で /updatedb.php にリクエストを送り、新しいツイートをデータベースに取り込む
※ Chunked transfer encoding によってツイートの取り込み状況を表示
cf. jQueryの$.ajaxで通信途中のresponseTextを取得する - あらびき日記
2. XHR で /get_favs.php からツイートやタグ一覧の情報を取得してページの内容を書き換える
※ 1回目の SELECT 文には何秒もかかっているのでスキーマや設定などを見直す必要あり

ページ遷移がない！
更新部分のみ XHR で取得

XHR で /get_favs.php の結果を取得し、この部分のみを更新する
・AutoPager 機能では下にツイート（li 要素）を追加
・検索やタグの選択によって表示項目が変わる場合は innerHTML を書き換える
（jQuery history プラグインによって履歴を管理しているので「戻る」も可能）

ページ遷移がない！！
「設定」などはポップアップウィンドウを表示

ポップアップウィンドウの内容は pages.min.js で管理（通信が発生しないので高速に開ける）
※ JavaScript に HTML をガンガン記述していて気持ち悪いのでもっと良い方法を考えたい
（せめて MVC な感じに書き換えたい）

ページ遷移がない！！！
タグの編集結果などは「タグ一覧」にリアルタイムに反映

JavaScript で数を増やしたり順番を変えたり（地味に大変）
ところで、運営者自身タグ付けしてないのがバレバレ…

今はタグ名を base64 エンコードなどによって ID として有効な文字に変換したものを ID
として付与し、変更のあったタグの li 要素を ID で取得して数を書き換えている
※ タグ名をキー、ツイートの数を値とした連想配列に情報を保持しておいて、毎回タグ一覧を一新
する方が楽でいいかもしれない

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>

マルチアカウント対応
要望があったので導入（2012年7月末）

• ログインしているアカウント情報（Twitter ID と screen_name）を cookie で管理
別アカウントで OAuth 認証を済ませた後に cookie にアカウント情報を保存することで、
別タブで開いている Favmemo のアカウント情報も更新される

アカウント情報を JSON 形式で保存

• 今まで PHP で $_SESSION としていた部分を $SESSION (= $_SESSION[$user_id]) に変える
程度の改修（リクエストの際 QueryString に screen_name を付与してアカウントを判別）

開発環境とか
• 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 とか試してみたいかも

動作確認とか
• Mac の Safari, Firefox, Chrome, Opera で確認
古いバージョンでは確認しない。IE は VMware Fusion にインストールしてある Windows
の IE9 で IE7 と IE8 も確認（開発者ツールのドキュメントモードを使用）。IE6 はもう確
認していないから悲惨なことになっていそう。

• テストは全然できてない！
ユニットテストという言葉すら知らない時に開発したので PHP 側のテストはほとんどな
い（一部 PHPUnit を使用）。
JavaScript のユニットテストは皆無（Jasmine とか使おうかと…）。
リニューアル時に結合テストのため Selenium (WebDriver) を使おうとしたけど、エミュ
レートできない動作があって断念（調査不足？）

主なTODO
• フレームワークの使用
FulePHP か Ruby on Rails を使いたい（メンテナンス性の向上と後学のため）
同時にデプロイ方法の変更とかテストの導入とか。これが終わったらβ版に昇格？

• 自動ログイン機能の実装

• モバイル対応
ブラウザに対応させるか、Titanium を使ってアプリをリリース

• 検索ボックスのクエリ補完・推薦
Trie の実装とか。自然言語処理の勉強として

• 広告の最適化
amazon の広告を自然言語処理・機械学習的な要素を取り入れて CTR 向上したらおもし
ろそう（お金けが目的じゃないので自前でアルゴリズムを考えたい）

まとめになってないけど…

• Favmemo は自己満的サービスだけど最近ユーザが増えた

• ページ遷移は嫌い

• フレームワークを使って大幅にリファクタリングしたい

• そのうち機械学習のサービス適用とかしてみたい

• まだいろいろやりたいことはあるのでゆるゆると続けていきたい

Introduction to Favmemo for Immature Engineers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to Favmemo for Immature Engineers

Similar to Introduction to Favmemo for Immature Engineers (20)

More from Takeshi Arabiki

More from Takeshi Arabiki (17)

Introduction to Favmemo for Immature Engineers