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

More Related Content

What's hot

CMSとPerlで遊ぼう
CMSとPerlで遊ぼうCMSとPerlで遊ぼう
CMSとPerlで遊ぼう
Daiki Ichinose
 
Webサーバ勉強会03
Webサーバ勉強会03Webサーバ勉強会03
Webサーバ勉強会03
oranie Narut
 
10分でわかるFuelPHP @ 2011/12
10分でわかるFuelPHP @ 2011/1210分でわかるFuelPHP @ 2011/12
10分でわかるFuelPHP @ 2011/12
kenjis
 
FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1
Fumito Mizuno
 
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
Satoshi Ohkubo
 
Lisp Tutorial for Pythonista : Day 4
Lisp Tutorial for Pythonista : Day 4Lisp Tutorial for Pythonista : Day 4
Lisp Tutorial for Pythonista : Day 4
Ransui Iso
 
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014 FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
Mika Kane
 
PaaSの作り方 Sqaleの場合
PaaSの作り方 Sqaleの場合PaaSの作り方 Sqaleの場合
PaaSの作り方 Sqaleの場合
hiboma
 
C#次世代非同期処理概観 - Task vs Reactive Extensions
C#次世代非同期処理概観 - Task vs Reactive ExtensionsC#次世代非同期処理概観 - Task vs Reactive Extensions
C#次世代非同期処理概観 - Task vs Reactive Extensions
Yoshifumi Kawai
 
10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
 10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1 10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
kenjis
 
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
Tsuyoshi Yamada
 
メタメタプログラミングRuby
メタメタプログラミングRubyメタメタプログラミングRuby
メタメタプログラミングRuby
emasaka
 
Mod mrubyについて
Mod mrubyについてMod mrubyについて
Mod mrubyについて
Ryosuke MATSUMOTO
 
CPANの依存モジュールをもう少し正しく検出したい
CPANの依存モジュールをもう少し正しく検出したいCPANの依存モジュールをもう少し正しく検出したい
CPANの依存モジュールをもう少し正しく検出したい
charsbar
 
Zabbix API
Zabbix APIZabbix API
Zabbix API
Shuhei Hayashibara
 
MySQL Casual Talks in Fukuoka vol.2
MySQL Casual Talks in Fukuoka vol.2MySQL Casual Talks in Fukuoka vol.2
MySQL Casual Talks in Fukuoka vol.2
学 松崎
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
Takuya Ueda
 
Everyday Life with clojure.spec
Everyday Life with clojure.specEveryday Life with clojure.spec
Everyday Life with clojure.spec
Kent Ohashi
 
今日から使い始めるChef
今日から使い始めるChef今日から使い始めるChef
今日から使い始めるChef
Masahiro NAKAYAMA
 

What's hot (20)

CMSとPerlで遊ぼう
CMSとPerlで遊ぼうCMSとPerlで遊ぼう
CMSとPerlで遊ぼう
 
Webサーバ勉強会03
Webサーバ勉強会03Webサーバ勉強会03
Webサーバ勉強会03
 
10分でわかるFuelPHP @ 2011/12
10分でわかるFuelPHP @ 2011/1210分でわかるFuelPHP @ 2011/12
10分でわかるFuelPHP @ 2011/12
 
FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1FuelPHP Osu Nagoya vol.1
FuelPHP Osu Nagoya vol.1
 
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
OrePAN と cpanm を使ったCPAN モジュールの部分ミラーの運用管理 :Yokohama.pm #8
 
Lisp Tutorial for Pythonista : Day 4
Lisp Tutorial for Pythonista : Day 4Lisp Tutorial for Pythonista : Day 4
Lisp Tutorial for Pythonista : Day 4
 
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014 FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
FuelPHP - フレームワーク4本勝負 @PHPカンファレンス関西2014
 
PaaSの作り方 Sqaleの場合
PaaSの作り方 Sqaleの場合PaaSの作り方 Sqaleの場合
PaaSの作り方 Sqaleの場合
 
C#次世代非同期処理概観 - Task vs Reactive Extensions
C#次世代非同期処理概観 - Task vs Reactive ExtensionsC#次世代非同期処理概観 - Task vs Reactive Extensions
C#次世代非同期処理概観 - Task vs Reactive Extensions
 
10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
 10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1 10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
10分でわかるFuelPHP @ 2013/04 FuelPHP入門ハンズオン vol.1
 
Scala on Hadoop
Scala on HadoopScala on Hadoop
Scala on Hadoop
 
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
"Bits from the Apache Maintainers / Upcoming apache2 2.4 transition" を読んでみた
 
メタメタプログラミングRuby
メタメタプログラミングRubyメタメタプログラミングRuby
メタメタプログラミングRuby
 
Mod mrubyについて
Mod mrubyについてMod mrubyについて
Mod mrubyについて
 
CPANの依存モジュールをもう少し正しく検出したい
CPANの依存モジュールをもう少し正しく検出したいCPANの依存モジュールをもう少し正しく検出したい
CPANの依存モジュールをもう少し正しく検出したい
 
Zabbix API
Zabbix APIZabbix API
Zabbix API
 
MySQL Casual Talks in Fukuoka vol.2
MySQL Casual Talks in Fukuoka vol.2MySQL Casual Talks in Fukuoka vol.2
MySQL Casual Talks in Fukuoka vol.2
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
 
Everyday Life with clojure.spec
Everyday Life with clojure.specEveryday Life with clojure.spec
Everyday Life with clojure.spec
 
今日から使い始めるChef
今日から使い始めるChef今日から使い始めるChef
今日から使い始めるChef
 

Viewers also liked

Web技術勉強会 20120609
Web技術勉強会 20120609Web技術勉強会 20120609
Web技術勉強会 20120609
龍一 田中
 
Web技術勉強会5回目(Slide Share用)
Web技術勉強会5回目(Slide Share用)Web技術勉強会5回目(Slide Share用)
Web技術勉強会5回目(Slide Share用)
龍一 田中
 
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
龍一 田中
 
Web技術勉強会 20110611
Web技術勉強会 20110611Web技術勉強会 20110611
Web技術勉強会 20110611
龍一 田中
 
Web技術勉強会第1回目
Web技術勉強会第1回目Web技術勉強会第1回目
Web技術勉強会第1回目
龍一 田中
 
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドするWeb技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
龍一 田中
 
Web技術勉強会11回目
Web技術勉強会11回目Web技術勉強会11回目
Web技術勉強会11回目
龍一 田中
 
Popcillo
PopcilloPopcillo
Popcillo
ferebunda
 
Web技術勉強会 第30回
Web技術勉強会 第30回Web技術勉強会 第30回
Web技術勉強会 第30回
龍一 田中
 
Web技術勉強会 第37回
Web技術勉強会 第37回Web技術勉強会 第37回
Web技術勉強会 第37回
龍一 田中
 
Web技術勉強会2回目(Slide Share用)
Web技術勉強会2回目(Slide Share用)Web技術勉強会2回目(Slide Share用)
Web技術勉強会2回目(Slide Share用)
龍一 田中
 
Web技術勉強会 20120728
Web技術勉強会 20120728Web技術勉強会 20120728
Web技術勉強会 20120728
龍一 田中
 
Web技術勉強会 第18回
Web技術勉強会 第18回Web技術勉強会 第18回
Web技術勉強会 第18回
龍一 田中
 
Intro Ch 01 A
Intro Ch 01 AIntro Ch 01 A
Intro Ch 01 A
profesorgarfias
 
Web技術勉強会 20111112
Web技術勉強会 20111112Web技術勉強会 20111112
Web技術勉強会 20111112
龍一 田中
 
Web技術勉強会 第31回
Web技術勉強会 第31回Web技術勉強会 第31回
Web技術勉強会 第31回
龍一 田中
 
Popcillo
PopcilloPopcillo
Popcillo
ferebunda
 
Web技術勉強会 第38回
Web技術勉強会 第38回Web技術勉強会 第38回
Web技術勉強会 第38回
龍一 田中
 

Viewers also liked (19)

Web技術勉強会 20120609
Web技術勉強会 20120609Web技術勉強会 20120609
Web技術勉強会 20120609
 
Web技術勉強会5回目(Slide Share用)
Web技術勉強会5回目(Slide Share用)Web技術勉強会5回目(Slide Share用)
Web技術勉強会5回目(Slide Share用)
 
Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門Web技術勉強会 20130525 - Google Cloud Messaging入門
Web技術勉強会 20130525 - Google Cloud Messaging入門
 
Web技術勉強会 20110611
Web技術勉強会 20110611Web技術勉強会 20110611
Web技術勉強会 20110611
 
Web技術勉強会第1回目
Web技術勉強会第1回目Web技術勉強会第1回目
Web技術勉強会第1回目
 
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドするWeb技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
Web技術勉強会 20120114 - JenkinsでJava/PHP/Ruby/JavaScriptをビルドする
 
Web技術勉強会11回目
Web技術勉強会11回目Web技術勉強会11回目
Web技術勉強会11回目
 
Popcillo
PopcilloPopcillo
Popcillo
 
Web技術勉強会 第30回
Web技術勉強会 第30回Web技術勉強会 第30回
Web技術勉強会 第30回
 
Web技術勉強会 第37回
Web技術勉強会 第37回Web技術勉強会 第37回
Web技術勉強会 第37回
 
Web技術勉強会2回目(Slide Share用)
Web技術勉強会2回目(Slide Share用)Web技術勉強会2回目(Slide Share用)
Web技術勉強会2回目(Slide Share用)
 
Web技術勉強会 20120728
Web技術勉強会 20120728Web技術勉強会 20120728
Web技術勉強会 20120728
 
Ppt0000000
Ppt0000000Ppt0000000
Ppt0000000
 
Web技術勉強会 第18回
Web技術勉強会 第18回Web技術勉強会 第18回
Web技術勉強会 第18回
 
Intro Ch 01 A
Intro Ch 01 AIntro Ch 01 A
Intro Ch 01 A
 
Web技術勉強会 20111112
Web技術勉強会 20111112Web技術勉強会 20111112
Web技術勉強会 20111112
 
Web技術勉強会 第31回
Web技術勉強会 第31回Web技術勉強会 第31回
Web技術勉強会 第31回
 
Popcillo
PopcilloPopcillo
Popcillo
 
Web技術勉強会 第38回
Web技術勉強会 第38回Web技術勉強会 第38回
Web技術勉強会 第38回
 

Similar to Web技術勉強会23回目

Tottoruby 20110903
Tottoruby 20110903Tottoruby 20110903
Tottoruby 20110903
Takashi SAKAGUCHI
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
 
Rails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd editionRails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd edition
Goh Matsumoto
 
Web Operations and Perl kansai.pm#14
Web Operations and Perl kansai.pm#14Web Operations and Perl kansai.pm#14
Web Operations and Perl kansai.pm#14
Masahiro Nagano
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
Toru Yamaguchi
 
Rails and twitter #twtr_hack
Rails and twitter #twtr_hackRails and twitter #twtr_hack
Rails and twitter #twtr_hack
i7a
 
Dockerイメージ構築 実践テクニック
Dockerイメージ構築 実践テクニックDockerイメージ構築 実践テクニック
Dockerイメージ構築 実践テクニック
Emma Haruka Iwao
 
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorpマイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
Masahito Zembutsu
 
OpenStack + Common Lisp
OpenStack + Common LispOpenStack + Common Lisp
OpenStack + Common Lisp
irix_jp
 
ゲームのインフラをAwsで実戦tips全て見せます
ゲームのインフラをAwsで実戦tips全て見せますゲームのインフラをAwsで実戦tips全て見せます
ゲームのインフラをAwsで実戦tips全て見せます
infinite_loop
 
Hive undocumented feature
Hive undocumented featureHive undocumented feature
Hive undocumented feature
tamtam180
 
いまさら聞けないRake入門
いまさら聞けないRake入門いまさら聞けないRake入門
いまさら聞けないRake入門
Tomoya Kawanishi
 
日本語ではじめるDrupal Console in Sapporo
日本語ではじめるDrupal Console in Sapporo日本語ではじめるDrupal Console in Sapporo
日本語ではじめるDrupal Console in Sapporo
Yoshikazu Aoyama
 
Ruby on Rails Tutorial
Ruby on Rails TutorialRuby on Rails Tutorial
Ruby on Rails Tutorial
Ken Iiboshi
 
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
Ryosuke MATSUMOTO
 
Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2
Sea Mountain
 
qmake入門
qmake入門qmake入門
qmake入門
hermit4 Ishida
 
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
靖 小田島
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話
Masahito Zembutsu
 

Similar to Web技術勉強会23回目 (20)

Tottoruby 20110903
Tottoruby 20110903Tottoruby 20110903
Tottoruby 20110903
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
 
Rails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd editionRails初心者レッスン lesson1 3rd edition
Rails初心者レッスン lesson1 3rd edition
 
Web Operations and Perl kansai.pm#14
Web Operations and Perl kansai.pm#14Web Operations and Perl kansai.pm#14
Web Operations and Perl kansai.pm#14
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
 
Rails and twitter #twtr_hack
Rails and twitter #twtr_hackRails and twitter #twtr_hack
Rails and twitter #twtr_hack
 
Dockerイメージ構築 実践テクニック
Dockerイメージ構築 実践テクニックDockerイメージ構築 実践テクニック
Dockerイメージ構築 実践テクニック
 
マイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorpマイクロサービス時代の生存戦略 with HashiCorp
マイクロサービス時代の生存戦略 with HashiCorp
 
OpenStack + Common Lisp
OpenStack + Common LispOpenStack + Common Lisp
OpenStack + Common Lisp
 
ゲームのインフラをAwsで実戦tips全て見せます
ゲームのインフラをAwsで実戦tips全て見せますゲームのインフラをAwsで実戦tips全て見せます
ゲームのインフラをAwsで実戦tips全て見せます
 
Hive undocumented feature
Hive undocumented featureHive undocumented feature
Hive undocumented feature
 
いまさら聞けないRake入門
いまさら聞けないRake入門いまさら聞けないRake入門
いまさら聞けないRake入門
 
日本語ではじめるDrupal Console in Sapporo
日本語ではじめるDrupal Console in Sapporo日本語ではじめるDrupal Console in Sapporo
日本語ではじめるDrupal Console in Sapporo
 
Ruby on Rails Tutorial
Ruby on Rails TutorialRuby on Rails Tutorial
Ruby on Rails Tutorial
 
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
第2回 松本勉強会 2012 05 25 - apache2.4とmod_lua
 
Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2
 
qmake入門
qmake入門qmake入門
qmake入門
 
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
AWSとAnsibleで実践!プロビジョニング入門‐Lamp+Laravel-
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話
 

More from 龍一 田中

WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をするWebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
龍一 田中
 
Web技術勉強会 20110723
Web技術勉強会 20110723Web技術勉強会 20110723
Web技術勉強会 20110723
龍一 田中
 
Web技術勉強会 20110528
Web技術勉強会 20110528Web技術勉強会 20110528
Web技術勉強会 20110528
龍一 田中
 
Web技術勉強会 20110514
Web技術勉強会 20110514Web技術勉強会 20110514
Web技術勉強会 20110514
龍一 田中
 
Web技術勉強会 20100925
Web技術勉強会 20100925Web技術勉強会 20100925
Web技術勉強会 20100925
龍一 田中
 
Web技術勉強会 20100424
Web技術勉強会 20100424Web技術勉強会 20100424
Web技術勉強会 20100424
龍一 田中
 
Web技術勉強会 第34回
Web技術勉強会 第34回Web技術勉強会 第34回
Web技術勉強会 第34回
龍一 田中
 
Web技術勉強会 第33回
Web技術勉強会 第33回Web技術勉強会 第33回
Web技術勉強会 第33回
龍一 田中
 
Web技術勉強会 第29回
Web技術勉強会 第29回Web技術勉強会 第29回
Web技術勉強会 第29回
龍一 田中
 
Web技術勉強会 第28回
Web技術勉強会 第28回Web技術勉強会 第28回
Web技術勉強会 第28回
龍一 田中
 
Web技術勉強会 第26回
Web技術勉強会 第26回Web技術勉強会 第26回
Web技術勉強会 第26回
龍一 田中
 
Web技術勉強会 第25回
Web技術勉強会 第25回Web技術勉強会 第25回
Web技術勉強会 第25回
龍一 田中
 
Web技術勉強会 第19回
Web技術勉強会 第19回Web技術勉強会 第19回
Web技術勉強会 第19回
龍一 田中
 
Web技術勉強会12回目
Web技術勉強会12回目Web技術勉強会12回目
Web技術勉強会12回目
龍一 田中
 
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
龍一 田中
 
Web技術勉強会9回目2(Slideshare用)
Web技術勉強会9回目2(Slideshare用)Web技術勉強会9回目2(Slideshare用)
Web技術勉強会9回目2(Slideshare用)
龍一 田中
 
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
龍一 田中
 
Web技術勉強会6回目
Web技術勉強会6回目Web技術勉強会6回目
Web技術勉強会6回目
龍一 田中
 

More from 龍一 田中 (18)

WebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をするWebSocketでリアルタイム処理をする
WebSocketでリアルタイム処理をする
 
Web技術勉強会 20110723
Web技術勉強会 20110723Web技術勉強会 20110723
Web技術勉強会 20110723
 
Web技術勉強会 20110528
Web技術勉強会 20110528Web技術勉強会 20110528
Web技術勉強会 20110528
 
Web技術勉強会 20110514
Web技術勉強会 20110514Web技術勉強会 20110514
Web技術勉強会 20110514
 
Web技術勉強会 20100925
Web技術勉強会 20100925Web技術勉強会 20100925
Web技術勉強会 20100925
 
Web技術勉強会 20100424
Web技術勉強会 20100424Web技術勉強会 20100424
Web技術勉強会 20100424
 
Web技術勉強会 第34回
Web技術勉強会 第34回Web技術勉強会 第34回
Web技術勉強会 第34回
 
Web技術勉強会 第33回
Web技術勉強会 第33回Web技術勉強会 第33回
Web技術勉強会 第33回
 
Web技術勉強会 第29回
Web技術勉強会 第29回Web技術勉強会 第29回
Web技術勉強会 第29回
 
Web技術勉強会 第28回
Web技術勉強会 第28回Web技術勉強会 第28回
Web技術勉強会 第28回
 
Web技術勉強会 第26回
Web技術勉強会 第26回Web技術勉強会 第26回
Web技術勉強会 第26回
 
Web技術勉強会 第25回
Web技術勉強会 第25回Web技術勉強会 第25回
Web技術勉強会 第25回
 
Web技術勉強会 第19回
Web技術勉強会 第19回Web技術勉強会 第19回
Web技術勉強会 第19回
 
Web技術勉強会12回目
Web技術勉強会12回目Web技術勉強会12回目
Web技術勉強会12回目
 
Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)Web技術勉強会10回目(Slideshare用)
Web技術勉強会10回目(Slideshare用)
 
Web技術勉強会9回目2(Slideshare用)
Web技術勉強会9回目2(Slideshare用)Web技術勉強会9回目2(Slideshare用)
Web技術勉強会9回目2(Slideshare用)
 
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
 
Web技術勉強会6回目
Web技術勉強会6回目Web技術勉強会6回目
Web技術勉強会6回目
 

Web技術勉強会23回目

  • 1. One operation web clip support tool “Tcliper”. WEB技術勉強会 第23回 技術勉強会 回 RYUICHI TANAKA.
  • 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にクリップ。わりとすぐできそう。ただし、タグ付と かできない気がする。