Introduction to Favmemo for Immature Engineers                 2012/09/23                  @a_bicky
自己紹介• Takeshi Arabiki   ‣   社会人2年目の底辺 Web エンジニア   ‣ Twitter & はてな: @a_bicky & id:a_bicky• 興味など  機械学習、自然言語処理、R• ブログ  あらびき日記...
Favmemo のこれまで
背景•   きっかけ(2010年9月末)    twilog の fav 版が欲しい!存在しないなら自分で作ろう!!•   モチベーション    1. Web 開発に必要な知識の習得    2. 機械学習のサービス適用(全然やれてない)    ...
略歴•   2010年10月31日: リリース(最初は年間100円の Domainking のレンタルサーバ)    Twitter のお気に入りをタグで管理するサービス Favmemo をリリースしました! - あらびき日記•   2010年...
現状•   登録ユーザ数約3,250(2012年9月22日現在)            ※ PV には XMLHttpRequest によるリクエストも含む         (タグの更新リクエストは含めない方が PV としては良いかも)
Favmemo の特徴
構成•   LAMP on さくら VPS    Linux のディストリビューションは Debian    P は PHP(Dotdeb リポジトリのものをインストール)    さくら VPS 移行時に nginx を使ってみようとしたけど ...
ページ遷移がない 一度ログインしてしまえば基本的にページ遷移がない↑ index.php の内容はこれだけ1. XHR で /updatedb.php にリクエストを送り、新しいツイートをデータベースに取り込む※ Chunked transfe...
ページ遷移がない!更新部分のみ XHR で取得    XHR で /get_favs.php の結果を取得し、この部分のみを更新する    ・AutoPager 機能では下にツイート(li 要素)を追加    ・検索やタグの選択によって表示項目...
ページ遷移がない!!「設定」などはポップアップウィンドウを表示ポップアップウィンドウの内容は pages.min.js で管理(通信が発生しないので高速に開ける)※ JavaScript に HTML をガンガン記述していて気持ち悪いのでもっと...
ページ遷移がない!!!タグの編集結果などは「タグ一覧」にリアルタイムに反映  JavaScript で数を増やしたり順番を変えたり(地味に大変)  ところで、運営者自身タグ付けしてないのがバレバレ…  今はタグ名を base64 エンコードなど...
Evernote 連携MASHUP AWARDS 6 に応募するためだけに導入•     Evernote にエクスポートするためだけに Favmemo を利用しているユーザもいるらしい•     Evernote との OAuth 認証には ...
マルチアカウント対応要望があったので導入(2012年7月末)•   ログインしているアカウント情報(Twitter ID と screen_name)を cookie で管理    別アカウントで OAuth 認証を済ませた後に cookie ...
開発環境とか
開発環境とか•   Mac の VMware Fusion にサーバとほぼ同じ構成の Debian をインストール    /etc/hosts に 172.16.199.5	 favmemo.local みたいに記述して favmemo.loc...
動作確認とか•   Mac の Safari, Firefox, Chrome, Opera で確認    古いバージョンでは確認しない。IE は VMware Fusion にインストールしてある Windows    の IE9 で IE7...
Favmemo のこれから
主なTODO•   フレームワークの使用    FulePHP か Ruby on Rails を使いたい(メンテナンス性の向上と後学のため)    同時にデプロイ方法の変更とかテストの導入とか。これが終わったらβ版に昇格?•   自動ログイン...
まとめ
まとめになってないけど…•   Favmemo は自己満的サービスだけど最近ユーザが増えた•   ページ遷移は嫌い•   フレームワークを使って大幅にリファクタリングしたい•   そのうち機械学習のサービス適用とかしてみたい•   まだいろいろ...
Upcoming SlideShare
Loading in …5
×

Introduction to Favmemo for Immature Engineers

3,134 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,134
On SlideShare
0
From Embeds
0
Number of Embeds
1,422
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Favmemo for Immature Engineers

  1. 1. Introduction to Favmemo for Immature Engineers 2012/09/23 @a_bicky
  2. 2. 自己紹介• Takeshi Arabiki ‣ 社会人2年目の底辺 Web エンジニア ‣ Twitter & はてな: @a_bicky & id:a_bicky• 興味など 機械学習、自然言語処理、R• ブログ あらびき日記 http://d.hatena.ne.jp/a_bicky/
  3. 3. Favmemo のこれまで
  4. 4. 背景• きっかけ(2010年9月末) twilog の fav 版が欲しい!存在しないなら自分で作ろう!!• モチベーション 1. Web 開発に必要な知識の習得 2. 機械学習のサービス適用(全然やれてない) 3. 社会貢献 4. お小遣い稼ぎ(あわよくば)
  5. 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. 6. 現状• 登録ユーザ数約3,250(2012年9月22日現在) ※ PV には XMLHttpRequest によるリクエストも含む (タグの更新リクエストは含めない方が PV としては良いかも)
  7. 7. Favmemo の特徴
  8. 8. 構成• LAMP on さくら VPS Linux のディストリビューションは Debian P は PHP(Dotdeb リポジトリのものをインストール) さくら VPS 移行時に nginx を使ってみようとしたけど Evernote との連携部 分で動かない部分があったので見送り• 規模の割には比較的 JavaScript 多め(但し発狂しそうな程汚いコード) ページ遷移が大嫌いなので・・・ jQuery を使用 UI 周りはそのうち Twitter Bootstrap とか使いたい
  9. 9. ページ遷移がない 一度ログインしてしまえば基本的にページ遷移がない↑ index.php の内容はこれだけ1. XHR で /updatedb.php にリクエストを送り、新しいツイートをデータベースに取り込む※ Chunked transfer encoding によってツイートの取り込み状況を表示cf. jQueryの$.ajaxで通信途中のresponseTextを取得する - あらびき日記2. XHR で /get_favs.php からツイートやタグ一覧の情報を取得してページの内容を書き換える※ 1回目の SELECT 文には何秒もかかっているのでスキーマや設定などを見直す必要あり
  10. 10. ページ遷移がない!更新部分のみ XHR で取得 XHR で /get_favs.php の結果を取得し、この部分のみを更新する ・AutoPager 機能では下にツイート(li 要素)を追加 ・検索やタグの選択によって表示項目が変わる場合は innerHTML を書き換える (jQuery history プラグインによって履歴を管理しているので「戻る」も可能)
  11. 11. ページ遷移がない!!「設定」などはポップアップウィンドウを表示ポップアップウィンドウの内容は pages.min.js で管理(通信が発生しないので高速に開ける)※ JavaScript に HTML をガンガン記述していて気持ち悪いのでもっと良い方法を考えたい(せめて MVC な感じに書き換えたい)
  12. 12. ページ遷移がない!!!タグの編集結果などは「タグ一覧」にリアルタイムに反映 JavaScript で数を増やしたり順番を変えたり(地味に大変) ところで、運営者自身タグ付けしてないのがバレバレ… 今はタグ名を base64 エンコードなどによって ID として有効な文字に変換したものを ID として付与し、変更のあったタグの li 要素を ID で取得して数を書き換えている ※ タグ名をキー、ツイートの数を値とした連想配列に情報を保持しておいて、毎回タグ一覧を一新 する方が楽でいいかもしれない
  13. 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. 14. マルチアカウント対応要望があったので導入(2012年7月末)• ログインしているアカウント情報(Twitter ID と screen_name)を cookie で管理 別アカウントで OAuth 認証を済ませた後に cookie にアカウント情報を保存することで、 別タブで開いている Favmemo のアカウント情報も更新される アカウント情報を JSON 形式で保存• 今まで PHP で $_SESSION としていた部分を $SESSION (= $_SESSION[$user_id]) に変える 程度の改修(リクエストの際 QueryString に screen_name を付与してアカウントを判別)
  15. 15. 開発環境とか
  16. 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. 17. 動作確認とか• Mac の Safari, Firefox, Chrome, Opera で確認 古いバージョンでは確認しない。IE は VMware Fusion にインストールしてある Windows の IE9 で IE7 と IE8 も確認(開発者ツールのドキュメントモードを使用)。IE6 はもう確 認していないから悲惨なことになっていそう。• テストは全然できてない! ユニットテストという言葉すら知らない時に開発したので PHP 側のテストはほとんどな い(一部 PHPUnit を使用)。 JavaScript のユニットテストは皆無(Jasmine とか使おうかと…)。 リニューアル時に結合テストのため Selenium (WebDriver) を使おうとしたけど、エミュ レートできない動作があって断念(調査不足?)
  18. 18. Favmemo のこれから
  19. 19. 主なTODO• フレームワークの使用 FulePHP か Ruby on Rails を使いたい(メンテナンス性の向上と後学のため) 同時にデプロイ方法の変更とかテストの導入とか。これが終わったらβ版に昇格?• 自動ログイン機能の実装• モバイル対応 ブラウザに対応させるか、Titanium を使ってアプリをリリース• 検索ボックスのクエリ補完・推薦 Trie の実装とか。自然言語処理の勉強として• 広告の最適化 amazon の広告を自然言語処理・機械学習的な要素を取り入れて CTR 向上したらおもし ろそう(お金 けが目的じゃないので自前でアルゴリズムを考えたい)
  20. 20. まとめ
  21. 21. まとめになってないけど…• Favmemo は自己満的サービスだけど最近ユーザが増えた• ページ遷移は嫌い• フレームワークを使って大幅にリファクタリングしたい• そのうち機械学習のサービス適用とかしてみたい• まだいろいろやりたいことはあるのでゆるゆると続けていきたい

×