One operation web clip support tool “Tcliper”.
WEB技術勉強会 第23回
   技術勉強会    回
RYUICHI TANAKA.
アジェンダ

背景
現状の問題と解決策
Proxyの方法
要件定義
技術要件
Greasemonkey
Perl
Ruby on Rails
今後の課題
背景

日々の情報収集はLDR+LDClip
自宅、イーモバでは快適環境
 LDRで収集→必要な情報はクリップ
    会社ッ
問題は…会社ッ!
 クリップが規制された!
 うちでやろう、冗談じゃない。
 Web屋は常にアンテナを張っておくことが重要
解決方法

×ブラウザのブックマーク
  論外。使い物にならない。
△規制されてないSBMを使う
  すでにあるBMを棚卸して統合するのはちょっ
  と面倒
○Proxyを使う
  自宅のサーバをProxy代わりにする
Proxyの方法

 Proxyといっても…
                    Livedoor
 会社PC




                   自宅経由でPOSTする
                   だけなんですけどね…
           自宅サーバ
要件定義

 最低限必要なことして…
  ワンアクションでクリップ
  クリップデータは自宅
  クリップデータは自宅に溜め込む
           自宅に
  ワンアクションでSMBに登録
  ワンアクションで   に


とにかく簡単に      情報をクリップする
          ばれずに
技術要件
    会社PC           自宅サーバ                 Livedoor




   Greasemonkey
                  Perl
                         Ruby on Rails


・クライアントはFirefox限定でGreasemonkey使用
・グリモンがWebサイトから情報を抽出し自宅サーバにPOST
 POSTされるプログラムにはPerlを使用(ただし将来はRoRに統合)
・溜め込んだ情報を一覧表示、登録、編集できるページを作成
 Ruby on Railsで作成。
Greasemonkey
UserScript定義
// @author summer-lights                                author:作者
// @name tcliper                                        name:アプリ名
// @namespace http://summer-lights.dyndns.ws/tcliper/   namespace:ユニークな値を記述
// @include *                                           include:実行場所
// @description tcliper                                 description:アプリの説明
// @version 1.0.0                                       version:バージョン

UserScript Tips
(function(){
                                                        名前の重複を防ぐため無名関数でラップ
})();

unsafeWindowオブジェクト                                      対象ページのwindowオブジェクト
GM_xmlhttpRequest({
  method: “post”,
  headers: {
    “Content-Type”:”application/x-www-form-urlencoded”               POSTの例
  },
  data: xxx,
  onload: function(){ … }
});
Greasemonkey
グリモンを有効にしておく




                     Qボタンを押すと
                     ワンアクションで
                     クリップ完了

 ・キーボードイベントをセットしておき、発動するとクリップする
 ・キーはUserScript上で変更可能(お好きなキーをどうぞ)
 ・TITLE、URL、選択文字列をPOST送信する
Perl
クリップデータを受信
use Common::DB;
use Common::ApiAuth;                       APIキー認証(自作モジュール)

…

my $auth = Common::ApiAuth->new({
  “apikey” => $apikey,
  “referer” => $referer
});

my $db = Tcliper::DB->new();               クリップデータを登録

$sql = “INSERT INTO tclipers …”;
@bind = ($title, $url, $comment, $date);

$db->register($sql, @bind);




                               ※将来的にPerlからRuby on Railsに統合予定?
tcliper@Ruby on Rails
クリップデータを表示、SBMに登録




          Paginate


                     タイトル

 サムネイル                      コメント
Railsをサブディレクトリ構成で公開する
Railsはアプリケーションサーバが必要になるため、Apache単独
動作するPHPやPerlと同じようにはいかない
            Apacheの場合                  mongrelの場合

                       test.pl               test/index.rhtml
           test.php
                                    test_controller

       /usr/local/apache2/htdocs        /home/rails

        http://localhost/test.php   http://localhost/index.rhtml
        でアクセスできる                    のようにしてもアクセスできない

Railsでは、通常「http://localhost:3000/」のような形でアクセスする。
サブドメイン方式「http://rails.localhost:3000/」にするのは比較的容易。
ただし、サブディレクトリ方式「http://localhost:3000/rails」にする
のは工夫が必要。
Railsをサブディレクトリ構成で公開する
tcliperの構成
     RailsだけどApacheで公開しているのと同じディレクトリ構成にする

                           /usr/local/apache2/htdocs


                                                                        tmap/
                                                       diarysys4/
         tcliperプロジェクト                                              searchsys/


 ②                                                      Apacheで公開している
                                                            プロジェクト


 ①
                 /usr/local/apache2/htdocs/tcliper

       Apacheのドキュメントルート以下にRailsプロジェクトディレクトリを配置

 ①Apache(Port80)経由でアクセス可能(200)。
 ②Apache(Port80)経由ではForbidden(403)。mongrel(Port3000)経由でアクセス可能
Railsをサブディレクトリ構成で公開する

                                                   ①mongrel経由では
                                                    http://localhost:3000/
                                                    になる
      tcliperプロジェクト
                                                   ②だが理想は、
 ①
                                                    http://localhost:3000/tcliper
                                                    でアクセスすること

                                                   ③なおかつ、複数のRails
 ②
               /usr/local/apache2/htdocs/tcliper    アプリを動作させる必要がある
                                                    (すでにサーバで別のRailsアプリ
        chocolab/
                     Choco.Labプロジェクト                が動作中)
                         (Ruby on Rails)
                    ③
結論から言うと…
 (1)mod_proxyの導入
              の
 (2)routes.rbの設定
             の
 (3)mongrel_cluster.ymlの設定
                       の
    (mongrel単体の場合、mongrelの起動オプションの設定と同義
             単体の
             単体 場合、        の起動オプションの設定と同義)
                              オプションの設定
でいける。
mod_proxy
 mod_proxyの設定をhttpd.confに記述
  <IfModule mod_proxy.c>
  ProxyRequests Off
  ProxyPass /tcliper/ http://192.168.0.103:3001/tcliper/
  ProxyPassReverse /tcliper/ http://192.168.0.103:3001/tcliper/
  # 他のRailsアプリも同様の記述をここにする
  </IfModule>


     http://mydomain.jp/tcliper(Port80)にアクセスすると、
     http://192.168.0.103:3001/tcliperにリバースしてくれる。

     ただし、当然ながらRailsアプリの実体は
      http://192.168.0.103:3001/
     にいるので、このままではアクセスできない。


※mod_proxy_balancerやPassenger、mod_railsなどで同様の設定が可能。このあたりの説明は以前の勉強会資料
 にて記述してあるので割愛。また、インストール方法についても省略。
routes.rb
config/route.rbの設定を変更する
 map.connect ‘’, :controller => ‘tcliper’, :action => ‘index’

Railsアプリのアクセス方法は通常、以下のようになる。(※)

                http://mydomain.jp/tcliper/index
        http://IPアドレス:ポート番号/コントローラ名/アクション名

上部で示した設定にすると、コントローラ名、アクション名を省略することができる
                       http://mydomain.jp/
リバースプロキシ状態では以下のようになる。
                   http://mydomain.jp/tcliper/
コントローラ名。アクション名を省略しないと、
              http://mydomain.jp/tcliper/tcliper/index
一見、これで終わりなようだが、まだ終わらない。Railsのアプリ自体は動作するが、静的ファイ
ル(public/)へのルーティングができていない。つまり、画像、JavaScript、CSSが読み込まれない。
※action名が「index」の場合、URLの指定、routes.rbの:actionの指定を省略できるが、あえてわかりやすいように
 するためにindexを記述している。
mongrel_cluster.yml
 mongrel_cluster.ymlの最後に以下の記述を追加
  prefix: /tcliper

     これにより、Rails内部のルートパスも書き換わるため、
     publicディレクトリにも正常にアクセスが可能になる。




※mongrel_clusterの導入についても以前の勉強会の資料を参照のこと
Rails開発は…
これまでPHP、Perlによる開発をしてきた立場からすると…


      開発は確かに楽  (コード量が少なくて済むのは確か)
                    (ローカル開発環境万歳)
                (
                (当然、習得のコストはかかるよ)     )
             (でも、フレームワークはやっぱ楽ですね)
        (CakePHPとかまんまRailsじゃん…と今ならそう思う)
                   (Catalystはよーわからん)

でも…


デプロイ超めんどい
ローカル開発環境とパスが違うので、書き換えする必要あり。
サブドメインでやる予定ありません。だからめんどい。
Rails開発Tips
少しでもデプロイを楽にしたい
   ⇒パスを自動的に書き換える設定を1か所に集約させる
①config/tcliper.yml(独自作成設定ファイル)
# System mode
                                                     modeがproductionならサーバ、
# [production] or [development]
mode: production                                     developmentならローカル。

②-1application_helper.rb(ここに記述していいのかどうか微妙だが)
(中略)
private
def env_config(mode = “production”)                  静的ファイルパスを
  static_root = “/tcliper/public”
  env = {
                                                     modeによって変更する。
    “production” => {                                処理はapplication_helperに記述。
      “path_to_js” => static_root + “javascripts”,
      …
    },
    “development” => {
      “path_to_js” => “javascripts”,
      …
    }
  }
  return env[mode]
end
Rails開発Tips
 ②-2 application_helper.rb(続き)
  def common_config
    config = YAML.load_file(“config/tcliper.yml”)         インスタンス変数にパスを
    my_config = env_config(config[“mode”])                格納してViewで使う
    @path_to_js = my_config[“path_to_js”]
    (中略)
  end


 ②-3 tcliper_controller.rb
  Class TcliperController < ApplicationController
    Include ApplicationHelper
                                                              application_helperを呼び出して
    Include TcliperHelper                                     パスの設定を実行する
    def index
      common_config
    (中略)
    end
  end


  ②-4 view/layouts/base.rhtml
  <html>
  <haad>                                                         HTML上で読み込む
    <%= javascript_include_tag @path_to_js + ‘common.js’ %>
    (中略)
  </html>

※実は、上記だけではすべて書き換わらない。rhtml、CSS上で直接画像を読み込むときのパスはいちいち書き換える
 必要あり。要するにめんどくさい。だが、それ以上にローカル開発環境の恩恵は大きいのが実情。
今後の課題
まだ、ため込んだクリップデータを表示しただけ。目的は達成できていない。
今後は、一発クリップ機能を実装予定。
  LDCからタグ一覧を引っ張ってくる
  ブックマークレットは使わない
    画面遷移により、一発でクリップはできないため
  認証連携が必要
    一発クリップにはLDの認証を越える必要がある
    案としては、Mechnize+ScraperかクロスサイトAjaxかLivedoor Auth連携のどれかでブラウザ
    に認証Cookieを保存する
    タイムアウト処理は…問題が起きたら考える
Firefoxアドオン移植
  そのうち
Perl→RoR移植
  すぐできそう
スーパー一発クリップ機能
  一覧表示をすっ飛ばして直接LDCにクリップ。わりとすぐできそう。ただし、タグ付と
  かできない気がする。

Web技術勉強会23回目

  • 1.
    One operation webclip support tool “Tcliper”. WEB技術勉強会 第23回 技術勉強会 回 RYUICHI TANAKA.
  • 2.
  • 3.
    背景 日々の情報収集はLDR+LDClip 自宅、イーモバでは快適環境 LDRで収集→必要な情報はクリップ 会社ッ 問題は…会社ッ! クリップが規制された! うちでやろう、冗談じゃない。 Web屋は常にアンテナを張っておくことが重要
  • 4.
    解決方法 ×ブラウザのブックマーク 論外。使い物にならない。 △規制されてないSBMを使う すでにあるBMを棚卸して統合するのはちょっ と面倒 ○Proxyを使う 自宅のサーバをProxy代わりにする
  • 5.
    Proxyの方法 Proxyといっても… Livedoor 会社PC 自宅経由でPOSTする だけなんですけどね… 自宅サーバ
  • 6.
    要件定義 最低限必要なことして… ワンアクションでクリップ クリップデータは自宅 クリップデータは自宅に溜め込む 自宅に ワンアクションでSMBに登録 ワンアクションで に とにかく簡単に 情報をクリップする ばれずに
  • 7.
    技術要件 会社PC 自宅サーバ Livedoor Greasemonkey Perl Ruby on Rails ・クライアントはFirefox限定でGreasemonkey使用 ・グリモンがWebサイトから情報を抽出し自宅サーバにPOST POSTされるプログラムにはPerlを使用(ただし将来はRoRに統合) ・溜め込んだ情報を一覧表示、登録、編集できるページを作成 Ruby on Railsで作成。
  • 8.
    Greasemonkey UserScript定義 // @author summer-lights author:作者 // @name tcliper name:アプリ名 // @namespace http://summer-lights.dyndns.ws/tcliper/ namespace:ユニークな値を記述 // @include * include:実行場所 // @description tcliper description:アプリの説明 // @version 1.0.0 version:バージョン UserScript Tips (function(){ 名前の重複を防ぐため無名関数でラップ })(); unsafeWindowオブジェクト 対象ページのwindowオブジェクト GM_xmlhttpRequest({ method: “post”, headers: { “Content-Type”:”application/x-www-form-urlencoded” POSTの例 }, data: xxx, onload: function(){ … } });
  • 9.
    Greasemonkey グリモンを有効にしておく Qボタンを押すと ワンアクションで クリップ完了 ・キーボードイベントをセットしておき、発動するとクリップする ・キーはUserScript上で変更可能(お好きなキーをどうぞ) ・TITLE、URL、選択文字列をPOST送信する
  • 10.
    Perl クリップデータを受信 use Common::DB; use Common::ApiAuth; APIキー認証(自作モジュール) … my $auth = Common::ApiAuth->new({ “apikey” => $apikey, “referer” => $referer }); my $db = Tcliper::DB->new(); クリップデータを登録 $sql = “INSERT INTO tclipers …”; @bind = ($title, $url, $comment, $date); $db->register($sql, @bind); ※将来的にPerlからRuby on Railsに統合予定?
  • 11.
    tcliper@Ruby on Rails クリップデータを表示、SBMに登録 Paginate タイトル サムネイル コメント
  • 12.
    Railsをサブディレクトリ構成で公開する Railsはアプリケーションサーバが必要になるため、Apache単独 動作するPHPやPerlと同じようにはいかない Apacheの場合 mongrelの場合 test.pl test/index.rhtml test.php test_controller /usr/local/apache2/htdocs /home/rails http://localhost/test.php http://localhost/index.rhtml でアクセスできる のようにしてもアクセスできない Railsでは、通常「http://localhost:3000/」のような形でアクセスする。 サブドメイン方式「http://rails.localhost:3000/」にするのは比較的容易。 ただし、サブディレクトリ方式「http://localhost:3000/rails」にする のは工夫が必要。
  • 13.
    Railsをサブディレクトリ構成で公開する tcliperの構成 RailsだけどApacheで公開しているのと同じディレクトリ構成にする /usr/local/apache2/htdocs tmap/ diarysys4/ tcliperプロジェクト searchsys/ ② Apacheで公開している プロジェクト ① /usr/local/apache2/htdocs/tcliper Apacheのドキュメントルート以下にRailsプロジェクトディレクトリを配置 ①Apache(Port80)経由でアクセス可能(200)。 ②Apache(Port80)経由ではForbidden(403)。mongrel(Port3000)経由でアクセス可能
  • 14.
    Railsをサブディレクトリ構成で公開する ①mongrel経由では http://localhost:3000/ になる tcliperプロジェクト ②だが理想は、 ① http://localhost:3000/tcliper でアクセスすること ③なおかつ、複数のRails ② /usr/local/apache2/htdocs/tcliper アプリを動作させる必要がある (すでにサーバで別のRailsアプリ chocolab/ Choco.Labプロジェクト が動作中) (Ruby on Rails) ③ 結論から言うと… (1)mod_proxyの導入 の (2)routes.rbの設定 の (3)mongrel_cluster.ymlの設定 の (mongrel単体の場合、mongrelの起動オプションの設定と同義 単体の 単体 場合、 の起動オプションの設定と同義) オプションの設定 でいける。
  • 15.
    mod_proxy mod_proxyの設定をhttpd.confに記述 <IfModule mod_proxy.c> ProxyRequests Off ProxyPass /tcliper/ http://192.168.0.103:3001/tcliper/ ProxyPassReverse /tcliper/ http://192.168.0.103:3001/tcliper/ # 他のRailsアプリも同様の記述をここにする </IfModule> http://mydomain.jp/tcliper(Port80)にアクセスすると、 http://192.168.0.103:3001/tcliperにリバースしてくれる。 ただし、当然ながらRailsアプリの実体は http://192.168.0.103:3001/ にいるので、このままではアクセスできない。 ※mod_proxy_balancerやPassenger、mod_railsなどで同様の設定が可能。このあたりの説明は以前の勉強会資料 にて記述してあるので割愛。また、インストール方法についても省略。
  • 16.
    routes.rb config/route.rbの設定を変更する map.connect ‘’,:controller => ‘tcliper’, :action => ‘index’ Railsアプリのアクセス方法は通常、以下のようになる。(※) http://mydomain.jp/tcliper/index http://IPアドレス:ポート番号/コントローラ名/アクション名 上部で示した設定にすると、コントローラ名、アクション名を省略することができる http://mydomain.jp/ リバースプロキシ状態では以下のようになる。 http://mydomain.jp/tcliper/ コントローラ名。アクション名を省略しないと、 http://mydomain.jp/tcliper/tcliper/index 一見、これで終わりなようだが、まだ終わらない。Railsのアプリ自体は動作するが、静的ファイ ル(public/)へのルーティングができていない。つまり、画像、JavaScript、CSSが読み込まれない。 ※action名が「index」の場合、URLの指定、routes.rbの:actionの指定を省略できるが、あえてわかりやすいように するためにindexを記述している。
  • 17.
    mongrel_cluster.yml mongrel_cluster.ymlの最後に以下の記述を追加 prefix: /tcliper これにより、Rails内部のルートパスも書き換わるため、 publicディレクトリにも正常にアクセスが可能になる。 ※mongrel_clusterの導入についても以前の勉強会の資料を参照のこと
  • 18.
    Rails開発は… これまでPHP、Perlによる開発をしてきた立場からすると… 開発は確かに楽 (コード量が少なくて済むのは確か) (ローカル開発環境万歳) ( (当然、習得のコストはかかるよ) ) (でも、フレームワークはやっぱ楽ですね) (CakePHPとかまんまRailsじゃん…と今ならそう思う) (Catalystはよーわからん) でも… デプロイ超めんどい ローカル開発環境とパスが違うので、書き換えする必要あり。 サブドメインでやる予定ありません。だからめんどい。
  • 19.
    Rails開発Tips 少しでもデプロイを楽にしたい ⇒パスを自動的に書き換える設定を1か所に集約させる ①config/tcliper.yml(独自作成設定ファイル) # System mode modeがproductionならサーバ、 # [production] or [development] mode: production developmentならローカル。 ②-1application_helper.rb(ここに記述していいのかどうか微妙だが) (中略) private def env_config(mode = “production”) 静的ファイルパスを static_root = “/tcliper/public” env = { modeによって変更する。 “production” => { 処理はapplication_helperに記述。 “path_to_js” => static_root + “javascripts”, … }, “development” => { “path_to_js” => “javascripts”, … } } return env[mode] end
  • 20.
    Rails開発Tips ②-2 application_helper.rb(続き) def common_config config = YAML.load_file(“config/tcliper.yml”) インスタンス変数にパスを my_config = env_config(config[“mode”]) 格納してViewで使う @path_to_js = my_config[“path_to_js”] (中略) end ②-3 tcliper_controller.rb Class TcliperController < ApplicationController Include ApplicationHelper application_helperを呼び出して Include TcliperHelper パスの設定を実行する def index common_config (中略) end end ②-4 view/layouts/base.rhtml <html> <haad> HTML上で読み込む <%= javascript_include_tag @path_to_js + ‘common.js’ %> (中略) </html> ※実は、上記だけではすべて書き換わらない。rhtml、CSS上で直接画像を読み込むときのパスはいちいち書き換える 必要あり。要するにめんどくさい。だが、それ以上にローカル開発環境の恩恵は大きいのが実情。
  • 21.
    今後の課題 まだ、ため込んだクリップデータを表示しただけ。目的は達成できていない。 今後は、一発クリップ機能を実装予定。 LDCからタグ一覧を引っ張ってくる ブックマークレットは使わない 画面遷移により、一発でクリップはできないため 認証連携が必要 一発クリップにはLDの認証を越える必要がある 案としては、Mechnize+ScraperかクロスサイトAjaxかLivedoor Auth連携のどれかでブラウザ に認証Cookieを保存する タイムアウト処理は…問題が起きたら考える Firefoxアドオン移植 そのうち Perl→RoR移植 すぐできそう スーパー一発クリップ機能 一覧表示をすっ飛ばして直接LDCにクリップ。わりとすぐできそう。ただし、タグ付と かできない気がする。