Skip to content

Instantly share code, notes, and snippets.

@syoichi
Last active December 18, 2015 14:19
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save syoichi/5796359 to your computer and use it in GitHub Desktop.
Save syoichi/5796359 to your computer and use it in GitHub Desktop.
Taberarelooのコードを読み、処理の流れを追う

私はTaberarelooのコードの全てを読んだ事はないので正確さに欠けますが書いてみます(ファイル名などはこのディレクトリより)。

polygon_planetさんのTomblooに関する意見と同じような意見ですが、まず、特定のサービスに関するExtractor(extractors.js)やModel(models.js)から読んでみるというのはどうでしょうか。これらの分野はUser Scriptなどと異なりTaberarelooの基本的な処理を構成する一部分なので何かと想像しやすいかもしれません(もちろんTaberarelooの処理の中心となるbackground.jsやcontent.jsから見ていくのも良いと思います)。 例として、私が関わった事があるものを挙げると、ExtractorについてはYouTube、ModelについてはGistが小さくてわかりやすいかもしれません。この単位であれば、パッチで実現できる規模でもある為、YungSangさんのパッチを読むというのも良いかもしれません。

正直言ってTumblrのExtractorとModelはもともと大きかったものが私のせいで複雑なものとなってしまっているので読むのはお勧めできません…。

読む際はChromeのデベロッパーツールでブレークポイントを使用して動きを追っていくとわかりやすいでしょう。 既にご存知かもしれませんが以下がその手順です。

YouTube Extractorの場合

  1. 任意のYouTubeの動画ページを開く
  2. コンテキストメニューから「要素を検証」をクリック、または「F12」を入力する
  3. 起動したデベロッパーツールで「Ctrl/Cmd + O」を入力し「extractors.js」と入力、「Enter」を入力
  4. 「Ctrl/Cmd + G」を入力し「1206」と入力、「Enter」を入力
  5. YouTube Extractorが出てくるので1218行目あたりをクリックしてブレークポイントを貼る
  6. そのまま動画ページにフォーカスを移しコンテキストメニューからTaberarelooのメニューの「Taberareloo」をクリック
  7. 少しするとブレークポイントを貼った1218行目で処理が止まる
  8. あとは周辺の任意の変数の情報を変数上でマウスオーバーして見たり、Consoleを活用して変数の情報を見たり関数を実行してみたり、Step Over(曲がった矢印ボタンをクリックしたり「F10」を入力)で処理の流れを追う
  9. その時点の全ての処理が終わるとTaberarelooのQuickPostFormが起動する

Gist Modelの場合

  1. Taberarelooをインストールしたら拡張機能のページ(chrome://extensions/)でデベロッパー モードを有効にする
  2. Taberarelooの項の「_generated_background_page.html」をクリックする
  3. 起動したデベロッパーツールで「Ctrl/Cmd + Shift/Opt + F」を入力し「name : 'gist',」と入力、「Enter」を入力
  4. 画像の黄色の部分をクリックscreenshot
  5. Gist Modelが出てくるので2130行目あたりをクリックしてブレークポイントを貼る
  6. プライベートで投稿したい場合は、2148行目のform['gist[public]'] = '1';form['gist[public]'] = '0';と編集し、「Ctrl/Cmd + S」を入力
  7. このまま使用中のChromeでGistに普通にログインする
  8. Gistのトップページ上などでTaberarelooからText/Quoteで任意の情報をGistへPost
  9. 少しするとデベロッパーツールが前面に出て、ブレークポイントを貼った2130行目で処理が止まる
  10. あとは周辺の任意の変数の情報を変数上でマウスオーバーして見たり、Consoleを活用して変数の情報を見たり関数を実行してみたり、Step Over(曲がった矢印ボタンをクリックしたり「F10」を入力)で処理の流れを追う
  11. その時点の全ての処理が終わるとGistへ投稿される

読んでいくとutils.jsやproto.jsのユーティリティメソッドが出てくるので適宜それらのファイルを参照して該当のメソッドの処理も確認すると良いでしょう。Taberarelooでは比較的新しいWeb標準のAPIを随所で活用しているので、それらのAPIについてはMozilla Developer Networkなどで検索すると良いでしょう。Chromeの拡張APIについては公式のdocumentationを見ると良いでしょう。

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment