Web技術勉強会23回目

1,553
-1

Published on

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,553
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web技術勉強会23回目

  1. 1. One operation web clip support tool “Tcliper”. WEB技術勉強会 第23回 技術勉強会 回 RYUICHI TANAKA.
  2. 2. アジェンダ 背景 現状の問題と解決策 Proxyの方法 要件定義 技術要件 Greasemonkey Perl Ruby on Rails 今後の課題
  3. 3. 背景 日々の情報収集はLDR+LDClip 自宅、イーモバでは快適環境 LDRで収集→必要な情報はクリップ 会社ッ 問題は…会社ッ! クリップが規制された! うちでやろう、冗談じゃない。 Web屋は常にアンテナを張っておくことが重要
  4. 4. 解決方法 ×ブラウザのブックマーク 論外。使い物にならない。 △規制されてないSBMを使う すでにあるBMを棚卸して統合するのはちょっ と面倒 ○Proxyを使う 自宅のサーバをProxy代わりにする
  5. 5. Proxyの方法 Proxyといっても… Livedoor 会社PC 自宅経由でPOSTする だけなんですけどね… 自宅サーバ
  6. 6. 要件定義 最低限必要なことして… ワンアクションでクリップ クリップデータは自宅 クリップデータは自宅に溜め込む 自宅に ワンアクションでSMBに登録 ワンアクションで に とにかく簡単に 情報をクリップする ばれずに
  7. 7. 技術要件 会社PC 自宅サーバ Livedoor Greasemonkey Perl Ruby on Rails ・クライアントはFirefox限定でGreasemonkey使用 ・グリモンがWebサイトから情報を抽出し自宅サーバにPOST POSTされるプログラムにはPerlを使用(ただし将来はRoRに統合) ・溜め込んだ情報を一覧表示、登録、編集できるページを作成 Ruby on Railsで作成。
  8. 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. 9. Greasemonkey グリモンを有効にしておく Qボタンを押すと ワンアクションで クリップ完了 ・キーボードイベントをセットしておき、発動するとクリップする ・キーはUserScript上で変更可能(お好きなキーをどうぞ) ・TITLE、URL、選択文字列をPOST送信する
  10. 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. 11. tcliper@Ruby on Rails クリップデータを表示、SBMに登録 Paginate タイトル サムネイル コメント
  12. 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. 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. 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. 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. 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. 17. mongrel_cluster.yml mongrel_cluster.ymlの最後に以下の記述を追加 prefix: /tcliper これにより、Rails内部のルートパスも書き換わるため、 publicディレクトリにも正常にアクセスが可能になる。 ※mongrel_clusterの導入についても以前の勉強会の資料を参照のこと
  18. 18. Rails開発は… これまでPHP、Perlによる開発をしてきた立場からすると… 開発は確かに楽 (コード量が少なくて済むのは確か) (ローカル開発環境万歳) ( (当然、習得のコストはかかるよ) ) (でも、フレームワークはやっぱ楽ですね) (CakePHPとかまんまRailsじゃん…と今ならそう思う) (Catalystはよーわからん) でも… デプロイ超めんどい ローカル開発環境とパスが違うので、書き換えする必要あり。 サブドメインでやる予定ありません。だからめんどい。
  19. 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. 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. 21. 今後の課題 まだ、ため込んだクリップデータを表示しただけ。目的は達成できていない。 今後は、一発クリップ機能を実装予定。 LDCからタグ一覧を引っ張ってくる ブックマークレットは使わない 画面遷移により、一発でクリップはできないため 認証連携が必要 一発クリップにはLDの認証を越える必要がある 案としては、Mechnize+ScraperかクロスサイトAjaxかLivedoor Auth連携のどれかでブラウザ に認証Cookieを保存する タイムアウト処理は…問題が起きたら考える Firefoxアドオン移植 そのうち Perl→RoR移植 すぐできそう スーパー一発クリップ機能 一覧表示をすっ飛ばして直接LDCにクリップ。わりとすぐできそう。ただし、タグ付と かできない気がする。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×