<?xml version="1.0" encoding="UTF-8"?>
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns="http://purl.org/rss/1.0/"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
  <channel rdf:about="http://www.fraction.jp/log/category/59/">
    <title>Program/技術 -- BONNOH FRACTION 14</title>
    <link>http://www.fraction.jp/log/category/59/</link>
    <description>世の中に寝るより楽はなかりけり&lt;br /&gt;浮世の馬鹿は起きて働く</description>
    
    <dc:creator>Yuanying</dc:creator>
	<dc:date>2012-01-26T09:34:36+09:00</dc:date>
	<admin:generatorAgent rdf:resource="http://webby.rubyforge.org/?v=0.9.4"/>
    <items>
      <rdf:Seq>
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2012/01/26/nginx-ssl-rails" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/10/24/vlad-with-sudo" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/08/19/nginx-as-backend-server" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/08/17/rails3-with-nginx-unicorn" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/05/07/update-rep2" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/03/03/common-key-cryptosystem-with-nodejs" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2011/03/02/websocket-proxy" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2010/12/05/css-liquid-design-for-image" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2010/08/30/rtlog_v_0_1_0_released" />
        <rdf:li rdf:resource="http://www.fraction.jp/log/archives/2010/07/26/email_filtering_from_redmine" />
      </rdf:Seq>
    </items>
  </channel>
  <item rdf:about="http://www.fraction.jp/log/archives/2012/01/26/nginx-ssl-rails">
    <title>Nginx + SSL + Rails</title>
    <link>http://www.fraction.jp/log/archives/2012/01/26/nginx-ssl-rails</link>
    <description>普通に nginx をフロントに置いて、バックエンドに Rails を置いた場合の nginx の設定ファイルは、半年くらい前に書いた。これはこれで良いのだが、今度は HTTPS でもアプリケーションにアクセスしたくなった場合、listen 80 の server セクションをコピーして、listen 443 で SSL を利用する server セクションを追加すれば良いだけの気もするのだが。単純にコピーして SSL の設定をしただけだとはまることがある。force_sslRails 3.x か...</description>
    <content:encoded><![CDATA[
        <p>普通に nginx をフロントに置いて、バックエンドに Rails を置いた場合の nginx の設定ファイルは、
<a href="/log/archives/2011/08/17/rails3-with-nginx-unicorn">半年くらい前に書いた</a>。</p>

<p>これはこれで良いのだが、今度は HTTPS でもアプリケーションにアクセスしたくなった場合、
listen 80 の server セクションをコピーして、listen 443 で SSL を利用する server セクションを追加すれば良いだけの気もするのだが。
単純にコピーして SSL の設定をしただけだとはまることがある。</p>

<h2>force_ssl</h2>

<p>Rails 3.x からだと思うが、ActionController に force_ssl というクラスメソッドが追加された。</p>

<pre><code class='prettyprint'># Force the request to this particular controller or specified actions to be
# under HTTPS protocol.
#
# Note that this method will not be effective on development environment.
#
# ==== Options
# * <tt>only</tt>   - The callback should be run only for this action
# * <tt>except</tt>  - The callback should be run for all actions except this action
def force_ssl(options = {})
  host = options.delete(:host)
  before_filter(options) do
    if !request.ssl? &amp;&amp; !Rails.env.development?
      redirect_options = {:protocol => 'https://', :status => :moved_permanently}
      redirect_options.merge!(:host => host) if host
      redirect_to redirect_options
    end
  end
end</code></pre>


<p>ようするに SSL でアクセスしているかを判断して、SSL 以外でアクセスしていた場合、
SSL を利用した URL にリダイレクトしてくれる before_filter だ。</p>

<p>ただ、フロントに nginx を置いて、バックエンドに Rails を置いた場合は、
普通、SSL の処理をフロントに任せるので以下のようになる。</p>

<p>
<img  src='/log/2012/01/nginx-ssl-rails.jpg'
      width='164' 
      height='229' 
      alt=''  />
</p>


<p>何も対策を施さなければ、force_ssl 処理内の request.ssl? が false を返して、
リダイレクトの無限ループになってしまう。ってかなった。</p>

<h2>X-FORWARDED_PROTO</h2>

<p>そんなバックエンドが SSL を利用された後であるかどうかを判断するために、
HTTP には X-FORWARDED_PROTO とかいうヘッダが用意されているらしい。へえー。</p>

<p>と、言う訳でリバースプロキシの設定に以下の記述を行えばおk。</p>

<pre>
try_files /system/maintenance.html $uri $uri/index.html $uri.html @application;

location @application {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        <strong>proxy_set_header X-FORWARDED_PROTO https;</strong>
        proxy_pass http://application;
}
</pre>




        
    ]]></content:encoded>
    <dc:subject>Program/Ruby</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2012-01-26T08:54:28+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/10/24/vlad-with-sudo">
    <title>Vlad で sudo</title>
    <link>http://www.fraction.jp/log/archives/2011/10/24/vlad-with-sudo</link>
    <description>最近、Capistrano を使い始めたのだが、何気に使い方を調べようとソースコードを読むと、長くて大変。全体像を把握するのが大変だなあと何となく思っていたところに発見。Vlad the DeployerCapistrano の代替として使えそう。それでいてソースコードはシンプルで読みやすくてよい。まあ、ぶっちゃけ、ツールの使い方について、ネットを徘徊して調べるか？ソースコードを徘徊して調べるか？のどっちが好みかで、Capistrano を使うか Vlad を使うかが変わる気がするが。sudo し...</description>
    <content:encoded><![CDATA[
        

<p>
<img  src='/log/2011/10/Vlad-the-Deployer.png'
      width='338' 
      height='159' 
      alt=''  />
</p>


<p>最近、Capistrano を使い始めたのだが、
何気に使い方を調べようとソースコードを読むと、長くて大変。
全体像を把握するのが大変だなあと何となく思っていたところに発見。</p>

<ul>
<li><a href="http://rubyhitsquad.com/Vlad_the_Deployer.html">Vlad the Deployer</a></li>
</ul>


<p>Capistrano の代替として使えそう。それでいてソースコードはシンプルで読みやすくてよい。</p>

<p>まあ、ぶっちゃけ、ツールの使い方について、</p>

<ol>
<li>ネットを徘徊して調べるか？</li>
<li>ソースコードを徘徊して調べるか？</li>
</ol>


<p>のどっちが好みかで、Capistrano を使うか Vlad を使うかが変わる気がするが。</p>

<h2>sudo してみた</h2>

<p>で、まあ、Capistrano や Vlad の使い方はおいといて、
Remote のタスクを sudo 権限で実行してみたところ、</p>

<pre><code>$ rake vlad:test --trace 
** Invoke vlad:test (first_time)
** Execute vlad:test
ssh localhost 'sudo -p Password: echo sudo'
__sudo: no tty present and no askpass program specified__
rake aborted!
execution failed with status 1: ssh localhost sudo -p Password: echo sudo
</code></pre>

<p>みたいに言われて実行できないことがある。
Capistrano の場合は、<code>default\_run\_options[:pty] = true</code>
すればいいらしいが…。</p>

<p>色々調べたところ、</p>

<pre><code>set :sudo_flags, sudo_flags &lt;&lt; '-S'
</code></pre>

<p>で解決だった。</p>

        
    ]]></content:encoded>
    <dc:subject>Program/Ruby</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-10-24T10:15:16+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/08/19/nginx-as-backend-server">
    <title>nginx をバックエンドサーバとして使う</title>
    <link>http://www.fraction.jp/log/archives/2011/08/19/nginx-as-backend-server</link>
    <description>新しく Mac mini を買った ので、自宅サーバとしていろいろ遊ぼうと思った。色々と遊ぼうと思うと HTTP サーバを何種類も入れたくなるじゃないですか。Apache や nginx や、node.js で WebSocket を動かしたくなるじゃないですか！と、いうことでフロントのリバースプロキシとして node-http-proxyを導入したのは良いものの、バックエンドにまわした子 (nginx/Apache) 達のログが調子悪い…。具体的に言うと、アクセス元の IP アドレス達が全部 1...</description>
    <content:encoded><![CDATA[
        <p>新しく <a href="/log/archives/2011/08/14/bought-mac-mini">Mac mini を買った</a> ので、
自宅サーバとしていろいろ遊ぼうと思った。
色々と遊ぼうと思うと HTTP サーバを何種類も入れたくなるじゃないですか。
Apache や nginx や、<a href="/log/archives/2011/03/02/websocket-proxy">node.js で WebSocket を動かしたくなる</a>じゃないですか！</p>

<p>と、いうことでフロントのリバースプロキシとして <a href="https://github.com/nodejitsu/node-http-proxy">node-http-proxy</a>
を導入したのは良いものの、
バックエンドにまわした子 (nginx/Apache) 達のログが調子悪い…。</p>

<p>具体的に言うと、アクセス元の IP アドレス達が全部 127.0.0.1 になってしまう。
これってようするにフロントサーバの <code>node-http-proxy</code> のアドレスじゃないですかー。</p>

<h2>HttpRealIpModule</h2>

<p>ということで、<a href="http://wiki.nginx.org/NginxHttpRealIpModule">HttpRealIpModule</a> を導入。</p>

<p><code>node-http-proxy</code> は <code>X-Forwarded-For</code> を HTTP ヘッダにちゃんと追加してくれているようだったので、
<code>nginx.conf</code> に以下のような設定を施した。</p>

<pre class='prettyprint'><code>set_real_ip_from 127.0.0.1;
real_ip_header   X-Forwarded-For;</code></pre>


<p>nginx を再起動してログを確認。</p>

<p>
<img  src='/log/2011/08/backend_nginx_log.jpg'
      width='442' 
      height='209' 
      alt=''  />
</p>


<p>うーむ。よしよし。</p>

<dl class="amazon"> 
  <dt><img src="/log/2011/08/3105MFh6hYL._SL500_AA300_.jpg" width="160" height="160" alt=""></dt> 
  <dd>Apple Mac mini</dd> 
  <dd> 
    <a href="http://www.amazon.co.jp/s?ie=UTF8&amp;x=0&amp;ref_=nb_sb_noss&amp;y=0&amp;field-keywords=mac%20mini&amp;url=search-alias%3Daps#?_encoding=UTF8&amp;tag=bonnohfract00-22&amp;linkCode=ur2&amp;camp=247&amp;creative=7399">Amazon で見る</a><img src="https://www.assoc-amazon.jp/e/ir??t=bonnohfract00-22&amp;l=ur2&amp;o=9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  </dd> 
</dl>


        
    ]]></content:encoded>
    <dc:subject>Apple</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-08-19T13:39:46+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/08/17/rails3-with-nginx-unicorn">
    <title>Rails3.1@Unicorn で nginx の設定</title>
    <link>http://www.fraction.jp/log/archives/2011/08/17/rails3-with-nginx-unicorn</link>
    <description>Rails3.1 のアプリケーションを Unicorn で動かして、静的ファイルは nginx におまかせ！ってしようとした時に nginx の設定で少しはまったのでメモ。前提nginx を 127.0.0.1:80 で動かしている。Unicorn を 127.0.0.1:8080 で動かしている。Rails3.1 の assets を 事前に rake assets:precompile してある。nginx の設定/assets ディレクトリ以下のファイルを expire max  で永久にブ...</description>
    <content:encoded><![CDATA[
        

<p>
<img  src='/log/2011/08/kona.jpg'
      width='400' 
      height='327' 
      alt=''  />
</p>


<p>Rails3.1 のアプリケーションを Unicorn で動かして、静的ファイルは nginx におまかせ！
ってしようとした時に nginx の設定で少しはまったのでメモ。</p>

<h2>前提</h2>

<ul>
<li>nginx を 127.0.0.1:80 で動かしている。</li>
<li>Unicorn を 127.0.0.1:8080 で動かしている。</li>
<li>Rails3.1 の assets を 事前に <code>rake assets:precompile</code> してある。</li>
</ul>


<h2>nginx の設定</h2>

<ul>
<li>/assets ディレクトリ以下のファイルを expire max  で永久にブラウザ側にキャッシュさせる。

<ul>
<li>assets 内のファイルは内容が変わればファイル名も変わるため、永久にキャッシュさせておーけー。</li>
</ul>
</li>
<li>try_files で すでに存在する静的ファイルはすべて nginx で処理。</li>
</ul>


<pre class='prettyprint'><code>upstream apps-server {
    server 127.0.0.1:8080;
}

server {
    listen  80;
    server_name     app.example.com;
    
    root /path/to/app/current/public;
    error_log /path/to/app/current/log/error.log;

    location ~* ^/assets {
            expires max;
            add_header Cache-Control public;
            break;
    }

    try_files /system/maintenance.html $uri $uri/index.html $uri.html @unicorn;

    location @unicorn {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_pass http://apps-server;
    }
}</code></pre>




        
    ]]></content:encoded>
    <dc:subject>Apple</dc:subject>
    <dc:subject>Program/Ruby</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-08-17T11:09:18+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/05/07/update-rep2">
    <title>rep2 をアップデートしたよ</title>
    <link>http://www.fraction.jp/log/archives/2011/05/07/update-rep2</link>
    <description>iPhone で 2ch を見るのに重宝している PHP 製 2ch ビューワ である rep2。アップデートが来ていたのは知っていたのだがようやくアップデート。なんでなかなかアップデートしないのかと言うと、、、メンドクサイ。アップデートのファイルをダウンロードして、設定ファイルを書き直して、Mac で見やすくなるように修正しているファイルを修正し直して…と。ってか今気づいた、Subversion のレポジトリが公開されてるのか。これからそっち使おう…。今日のトレーニングなんか毎回毎回同じような写...</description>
    <content:encoded><![CDATA[
        

<p>
<img  src='/log/2011/05/rep2.jpg'
      width='500' 
      height='288' 
      alt=''  />
</p>


<p>iPhone で 2ch を見るのに重宝している <a href="http://akid.s17.xrea.com/">PHP 製 2ch ビューワ である rep2</a>。
アップデートが来ていたのは知っていたのだがようやくアップデート。</p>

<p>なんでなかなかアップデートしないのかと言うと、、、メンドクサイ。</p>

<p>アップデートのファイルをダウンロードして、
設定ファイルを書き直して、Mac で見やすくなるように修正しているファイルを修正し直して…と。</p>

<p>ってか今気づいた、Subversion のレポジトリが公開されてるのか。
これからそっち使おう…。</p>

<h2>今日のトレーニング</h2>

<p>
<img  src='/log/2011/05/IMG_0686.jpg'
      width='270' 
      height='360' 
      alt=''  />
</p>


<p>なんか毎回毎回同じような写真を撮ってるようだが、、江戸川バイク練 80km。</p>

<p>行きは最初多少向かい風だったがその後ほぼ無風になり絶好のコンディションだなと思っていたが、
帰りに雨にやられる。</p>

<p>道理で散歩のおばちゃんもローディも少ない訳だ。
ちゃんと天気予報見るべきだったなあ。</p>

        
    ]]></content:encoded>
    <dc:subject>日記</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-05-07T21:13:52+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/03/03/common-key-cryptosystem-with-nodejs">
    <title>Node.js で共通鍵暗号</title>
    <link>http://www.fraction.jp/log/archives/2011/03/03/common-key-cryptosystem-with-nodejs</link>
    <description>Stack Overflow の Node.js and crypto libraryそのまんまだが…。とりあえずメモがてら。暗号化'123|123123123123123'という文字列を暗号化する。暗号化するのに利用する鍵(Password)は「InmbuvP6Z8」。var crypto = require('crypto');var cipher = crypto.createCipher('aes-256-cbc','InmbuvP6Z8');var text = &quot;123|1231231...</description>
    <content:encoded><![CDATA[
        <p>Stack Overflow の <a href="http://stackoverflow.com/questions/4497135/node-js-and-crypto-library">Node.js and crypto library</a>
そのまんまだが…。とりあえずメモがてら。</p>

<h2>暗号化</h2>

<p>'<code>123|123123123123123</code>'
という文字列を暗号化する。</p>

<p>暗号化するのに利用する鍵(Password)は「<code>InmbuvP6Z8</code>」。</p>

<pre><code class='prettyprint'>var crypto = require('crypto');
var cipher = crypto.createCipher('aes-256-cbc','InmbuvP6Z8');
var text = "123|123123123123123";
var crypted = cipher.update(text,'utf8','hex');
crypted += cipher.final('hex');

console.log(crypted);</code></pre>


<p>以上で、'<code>12443a347e8e5b46caba9f7afc93d71287fbf11169e8556c6bb9c51760d5c585</code>'
という暗号化された文字列を得る。</p>

<h2>複合化</h2>

<pre><code class='prettyprint'>var crypto = require('crypto');
var decipher = crypto.createDecipher('aes-256-cbc','InmbuvP6Z8');
var dec = decipher.update('12443a347e8e5b46caba9f7afc93d71287fbf11169e8556c6bb9c51760d5c585','hex','utf8');
dec += decipher.final('utf8');

console.log(dec);</code></pre>


<p>簡単。</p>

<p>次は公開鍵暗号のやり方を調べる。<a href="http://www.amazon.co.jp/gp/product/4274065421?ie=UTF8&amp;tag=bonnohfract00-22&amp;linkCode=as2&amp;camp=247&amp;creative=7399&amp;creativeASIN=4274065421">マスタリングTCP/IP SSL/TLS編</a>を読みながらだが…。</p>

<dl class="amazon"> 
  <dt><img src="/log/2011/03/4165T404E2L.jpg" width="160" height="228" alt=""></dt> 
  <dd>マスタリングTCP/IP SSL/TLS編 [単行本]</dd> 
  <dd>価格： ￥ 4,725 国内配送料無料</dd>
  <dd>Eric Rescorla (著), 齋藤 孝道 (著), 古森 貞 (著), 鬼頭 利之 (著)  </dd>
  <dd> 
    <a href="http://www.amazon.co.jp/gp/product/4274065421?ie=UTF8&amp;tag=bonnohfract00-22&amp;linkCode=as2&amp;camp=247&amp;creative=7399&amp;creativeASIN=4274065421">Amazon で見る</a><img src="http://www.assoc-amazon.jp/e/ir?t=bonnohfract00-22&amp;l=as2&amp;o=9&amp;a=4274065421" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
  </dd> 
</dl>




        
    ]]></content:encoded>
    <dc:subject>Program/JavaScript</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-03-03T17:00:54+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2011/03/02/websocket-proxy">
    <title>WebSocket を通す ReverseProxy が欲しいの</title>
    <link>http://www.fraction.jp/log/archives/2011/03/02/websocket-proxy</link>
    <description>Node.js で socket.io 使ってウェブチャット作って遊ぶ！とかやってると、そのうち作ったアプリを自宅サーバとかで公開したくなるのが人の世の常というものですが。とくに考えずに自宅サーバで作ったアプリを動かそうとすると、「Node.js で作ったアプリをポート3000番で動かしてー、フロントサーバとして Apache か nginx を置けば良いやー」って感じで上の図のような構成になると思いますー。が (そもそもイベントループが売りの Node.js のフロントサーバが Apache っ...</description>
    <content:encoded><![CDATA[
        <p><a href="http://nodejs.org/">Node.js</a> で <a href="http://socket.io/">socket.io</a> 使ってウェブチャット作って遊ぶ！
とかやってると、そのうち作ったアプリを自宅サーバとかで公開したくなるのが人の世の常というものですが。</p>

<p>
<img  src='/log/2011/03/nodejs01.png'
      width='258' 
      height='336' 
      alt=''  />
</p>


<p>とくに考えずに自宅サーバで作ったアプリを動かそうとすると、
「Node.js で作ったアプリをポート3000番で動かしてー、フロントサーバとして Apache か nginx を置けば良いやー」
って感じで上の図のような構成になると思いますー。が (そもそもイベントループが売りの Node.js のフロントサーバが Apache ってどうなの？ってのは置いといて。)</p>

<p>ふと気づく。クライアントからの WebSocket が届いてねえ！</p>

<p>はい、対応してないんですよね、Apache も nginx も、WebSocket のプロキシは。</p>

<p>仕方ないので無理矢理動かそうとすると、Node.js アプリが動いてるポートを開くことになる。
こんなんするんだったら、フロントサーバいらないんじゃないって気もするが。</p>

<ul>
<li><a href="http://havelog.ayumusato.com/develop/javascript/e213-socket_xhrpolling_cookie_tips.html">socket.ioを試すときは，ポートの開き忘れとcookieに注意 ::ハブろぐ</a></li>
</ul>


<p>
<img  src='/log/2011/03/nodejs02.png'
      width='258' 
      height='336' 
      alt=''  />
</p>


<h2>node-http-proxy</h2>

<p>ということで、ちょろっと調べてみたところ、
WebSocket に対応したリバースプロキシ発見。
なんと node.js 製…。</p>

<ul>
<li><a href="https://github.com/nodejitsu/node-http-proxy">nodejitsu/node-http-proxy -GitHub</a></li>
</ul>


<p>こいつをフロントサーバとして Port 80 で動かして、後ろに Port 3000 で動くウェブアプリを置くとすると、
以下のような設定になるっぽい。</p>

<pre><code class='prettyprint'>var httpProxy = require('http-proxy');
    
httpProxy.createServer({
  router: {
    'localhost': 'localhost:3000'
  }
}).listen(80);</code></pre>


<p>名前ベースで振り分けもできる。</p>

<pre><code class='prettyprint'>var httpProxy = require('http-proxy');
    
httpProxy.createServer({
  router: {
    'foo.com': '127.0.0.1:8001',
    'bar.com': '127.0.0.1:8002'
  }
}).listen(80);</code></pre>


<p>イベントベースのウェブサーバで WebSocket も対応してるので、
フロントサーバとして Apache からの置き換えも考えちゃうなーこれは。</p>

<p>と、いいつつ、、、設定ファイルの書き換えが面倒なので全然手を付けてないが…。</p>

        
    ]]></content:encoded>
    <dc:subject>Program/JavaScript</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2011-03-02T12:38:38+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2010/12/05/css-liquid-design-for-image">
    <title>CSS で画像もリキッドデザイン</title>
    <link>http://www.fraction.jp/log/archives/2010/12/05/css-liquid-design-for-image</link>
    <description>リキッドデザインのウェブデザインを行うにあたって問題になるのは画像。いくら横幅その他を em で指定して、メインコンテンツの横幅が可変なページをデザインしたとしても。たとえば iPhone のように、画像の横幅よりサイズの小さいディスプレイで見た瞬間に、画像がちぎれてデザインが破綻してしまう。そんな時はこんな感じで img タグに css をあてる。img {  max-width: 100%;  height: auto;}じゃん。こんな感じで横幅にあわせて画像がリサイズされます！普通のブラウザ...</description>
    <content:encoded><![CDATA[
        <p>リキッドデザインのウェブデザインを行うにあたって問題になるのは画像。</p>

<p>
<img  src='/log/2010/12/css/webkit.jpg'
      width='500' 
      height='395' 
      alt=''  />
</p>


<p>いくら横幅その他を em で指定して、メインコンテンツの横幅が可変なページをデザインしたとしても。</p>

<p>
<img  src='/log/2010/12/css/iOS01.jpg'
      width='271' 
      height='522' 
      alt=''  />
</p>


<p>たとえば iPhone のように、画像の横幅よりサイズの小さいディスプレイで見た瞬間に、
画像がちぎれてデザインが破綻してしまう。</p>

<p>そんな時はこんな感じで img タグに css をあてる。</p>

<pre><code class='prettyprint'>img {
  max-width: 100%;
  height: auto;
}</code></pre>


<p>じゃん。</p>

<p>
<img  src='/log/2010/12/css/iOS02.jpg'
      width='269' 
      height='522' 
      alt=''  />
</p>


<p>こんな感じで横幅にあわせて画像がリサイズされます！</p>

<p>
<img  src='/log/2010/12/css/webkit2.jpg'
      width='301' 
      height='318' 
      alt=''  />
</p>


<p>普通のブラウザでも、ウィンドウの幅に合わせて画像をリサイズしてくれます。
これはすばらしい。</p>

<p>まあ、IE とかじゃうまく動いてないけど、そんなブラウザは無視無視。
どうせやつらは高解像度のディスプレイにウィンドウを最大化してブラウジングしてるに決まってるんだし。</p>

<!--
<p>
<img  src='/log/2010/12/css/iOS01.jpg'
      width='271' 
      height='522' 
      alt=''  />
</p>
-->


        
    ]]></content:encoded>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2010-12-05T19:36:59+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2010/08/30/rtlog_v_0_1_0_released">
    <title>rtlog を rubygems.org に登録した</title>
    <link>http://www.fraction.jp/log/archives/2010/08/30/rtlog_v_0_1_0_released</link>
    <description>Twitter のつぶやきをローカルに保存して html アーカイブにするツールを以前作っていたのですが、そのツールを rubygems.org に登録しました。これで gem install できるようになったよ！つかうとこんな感じに、Twitter のつぶやきが自分の PC で表示できるよ。ちなみに使い方はこんな感じ。インストール方法$ sudo gem install rtlog簡単！html アーカイブ生成$ rtlog-create -i TWITTER_ID -t TARGET_DIR...</description>
    <content:encoded><![CDATA[
        <p><a href="http://www.fraction.jp/log/archives/2009/10/07/rtlog_v_0_0_1_released">Twitter のつぶやきをローカルに保存して html アーカイブにする</a>
ツールを以前作っていたのですが、
そのツールを rubygems.org に登録しました。</p>

<p>これで gem install できるようになったよ！</p>

<p>つかうとこんな感じに、Twitter のつぶやきが自分の PC で表示できるよ。</p>

<p><a href='http://www.fraction.jp/~yuanying/lifelog/'><img src="http://www.fraction.jp/log/2010/08/rtlog.png" width="420" height="344" alt="rtlog.png" /></a></p>

<h2>ちなみに</h2>

<p>使い方はこんな感じ。</p>

<h3>インストール方法</h3>

<pre><code>$ sudo gem install rtlog
</code></pre>

<p>簡単！</p>

<h3>html アーカイブ生成</h3>

<pre><code>$ rtlog-create -i TWITTER_ID -t TARGET_DIR -u TARGET_URL --temp-dir TWEETS_ARCHIVE_DIR
</code></pre>

<ul>
<li>-i 作成するアーカイブの twitter アカウントID</li>
<li>-p 作成するアーカイブの twitter アカウントのパスワード</li>
<li>-t アーカイブを作成するフォルダ</li>
<li>-u アップするサーバのルートの url (ex: http://www.example.com/lifelog)</li>
<li>--temp-dir つぶやきをダウンロードするフォルダ</li>
</ul>


        
        <div class="extendText">
            <p><a href="http://www.fraction.jp/log/archives/2010/08/30/rtlog_v_0_1_0_released">more...</a></p>
        </div>
        
    ]]></content:encoded>
    <dc:subject>Program/Ruby</dc:subject>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2010-08-30T03:20:49+09:00</dc:date>
  </item>
  <item rdf:about="http://www.fraction.jp/log/archives/2010/07/26/email_filtering_from_redmine">
    <title>Redmine からのメールをフィルタリング</title>
    <link>http://www.fraction.jp/log/archives/2010/07/26/email_filtering_from_redmine</link>
    <description>Redmine から着たメールを、メールクライアント (Thunderbird) とかでフィルタリングしたい。今まではメッセージフィルタで、Subject のプロジェクト名でフィルタリングしてたけど、いかにもダサイ。ふと思いついて Redmine から届いたメールのヘッダを覗いてみる。From - Mon Jul 26 10:36:56 2010X-Account-Key: account2X-UIDL: 44463847.5ebcX-Mozilla-Status: 0001           ...</description>
    <content:encoded><![CDATA[
        <p><a href="http://www.redmine.org/">Redmine</a> から着たメールを、
メールクライアント (Thunderbird) とかでフィルタリングしたい。</p>

<p>今まではメッセージフィルタで、</p>

<p><img src='http://www.fraction.jp/log/images/mail-rule01-20100726-140237.jpg' width='400' height='162' alt='Message Rule' title=’サブジェクト中のプロジェクト名でフィルタリング’ /></p>

<p>Subject のプロジェクト名でフィルタリングしてたけど、
いかにもダサイ。</p>

<p>ふと思いついて Redmine から届いたメールのヘッダを覗いてみる。</p>

<pre><code>From - Mon Jul 26 10:36:56 2010
X-Account-Key: account2
X-UIDL: 44463847.5ebc
X-Mozilla-Status: 0001                                                                             
...
(中略)
...
X-Redmine-Issue-Author: nanashi
Precedence: bulk
X-Redmine-Issue-Assignee: nanashi
X-Redmine-Issue-Id: 400
X-Mailer: Redmine
X-Redmine-Project: ui-spec
Auto-Submitted: auto-generated
X-Redmine-Site: My Group Projects
X-Redmine-Host: example.com/projects
</code></pre>

<p>ビンゴ。これぞせまんてぃっくうぇぶですな。</p>

<p><code>X-Redmine-Project</code> と <code>X-Redmine-Host</code> の値を使えば自由自在にフィルタリングで着ます。</p>

<p><img src='http://www.fraction.jp/log/images/Mail-02-20100726-142514.jpg' width='400' height='176' alt='X-Redmine-Project と X-Redmine-Host を使ったフィルタリング' title='X-Redmine-Project と X-Redmine-Host を使ったフィルタリング' /></p>

        
    ]]></content:encoded>
    <dc:subject>Program/技術</dc:subject>
    <dc:creator>Yuanying</dc:creator>
    <dc:date>2010-07-26T05:26:43+09:00</dc:date>
  </item>
</rdf:RDF>

