Web技術勉強会23回目

1. One operation web clip support tool “Tcliper”.
WEB技術勉強会 第23回
技術勉強会 回
RYUICHI TANAKA.

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

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にクリップ。わりとすぐできそう。ただし、タグ付と
かできない気がする。