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