Embed Size (px)
Citation preview
Introduction to Favmemofor Immature Engineers
2012/09/23
@a_bicky
自己紹介• Takeshi Arabiki
‣ 社会人２年目の底辺 Web エンジニア
‣ Twitter & はてな: @a_bicky & id:a_bicky
• 興味など機械学習、自然言語処理、R
• ブログあらびき日記 http://d.hatena.ne.jp/a_bicky/
Favmemo のこれまで
背景• きっかけ（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 としては良いかも）
Favmemo の特徴
構成• 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>
• ログインしているアカウント情報（Twitter ID と screen_name）を cookie で管理別アカウントで OAuth 認証を済ませた後に cookie にアカウント情報を保存することで、別タブで開いている Favmemo のアカウント情報も更新される
• 今まで PHP で $_SESSION としていた部分を $SESSION (= $_SESSION[$user_id]) に変える程度の改修（リクエストの際 QueryString に screen_name を付与してアカウントを判別）
マルチアカウント対応要望があったので導入（2012年7月末）
アカウント情報を JSON 形式で保存
開発環境とか
開発環境とか• 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) を使おうとしたけど、エミュレートできない動作があって断念（調査不足？）
Favmemo のこれから
主なTODO• フレームワークの使用
FulePHP か Ruby on Rails を使いたい（メンテナンス性の向上と後学のため）同時にデプロイ方法の変更とかテストの導入とか。これが終わったらβ版に昇格？
• 自動ログイン機能の実装
• モバイル対応ブラウザに対応させるか、Titanium を使ってアプリをリリース
• 検索ボックスのクエリ補完・推薦Trie の実装とか。自然言語処理の勉強として
• 広告の最適化amazon の広告を自然言語処理・機械学習的な要素を取り入れて CTR 向上したらおもしろそう（お金儲けが目的じゃないので自前でアルゴリズムを考えたい）
まとめ
まとめになってないけど…
• Favmemo は自己満的サービスだけど最近ユーザが増えた
• ページ遷移は嫌い
• フレームワークを使って大幅にリファクタリングしたい
• そのうち機械学習のサービス適用とかしてみたい
• まだいろいろやりたいことはあるのでゆるゆると続けていきたい
![INSTYTUT PODSTAWOWYCH PROBLEMÓW TECHNIKIprace.ippt.gov.pl/IFTR_Reports_2_2001.pdf · 2013-08-01 · Chaotic vibrations, an introduction for applied scientists and engineers [1],](https://img.pdfslide.tips/doc/110x75/5f0d15797e708231d438995f/instytut-podstawowych-problemw-2013-08-01-chaotic-vibrations-an-introduction.jpg)
