Your SlideShare is downloading. ×
0
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Web技術勉強会23回目
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web技術勉強会23回目

1,481

Published on

Web技術勉強会23回目

Web技術勉強会23回目

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,481
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×