VIM (GVIM) で Zen-Coding する方法とサンプルいくつか

Zen-Codingってご存知ですか? ご存知なければ今すぐググるべき。 google:zen-coding

一言で言うと、ショートカット駆使してHTMLを高速に入力する方法、ツールです。

そのZen-Codingのプラグインを、私が愛用しているGVIMに導入する方法と、その後に素晴らしさがよくわかる例をご紹介します。

続きを読む

(Twitter風に)入力文字数をカウントするスクリプト


基本戦略としてはタイマーで文字数を監視して画面に表示するだけです。

(追記:「キーイベントじゃないの?」とtwitterで聞かれたんですけど、貼り付けのときにも数字を更新したいので、タイマーで監視するようにしています。)

DEMO

ただフォーカスを得ていないときは監視する意味が無いので、

  1. フォーカスを得たら監視を開始する
  2. フォーカスを失ったら監視を終了する

というようにはしています。

また細かいところとして、監視処理を無名関数で実装して即時実行しています。そこからarguments.calleeを使って実行関数自身setTimeout()に渡してタイマー起動を行っています。このあたりは過去の記事、JavaScriptで、定期的に呼び出される処理を簡単に作るをご覧ください。

    var elContent = $('#tweeting-content');
    var elCounter = $('#tweeting-counter');
    elContent.
        // フォーカスを得た際に、監視開始
        focus(function() {
            (function() {
                // 残数を取得
                var MAX = 140;
                var count = elContent.val().length;
                var rest = MAX - count;

                // 数値を更新
                elCounter.text(rest);

                // 負数になったら赤字にする
                if (rest < 0) {
                    elCounter.css({ color: '#c00' });
                }
                else {
                    elCounter.css({ color: '' });
                }

                // 同じ処理をタイマーで実行
                // (タイマーIDは要素に紐付けて保存する。)
                var tm = setTimeout(arguments.callee, 100);
                elContent.data('tmCountLetters', tm);
            })();
        }).
        // フォーカスを失った際に、監視終了
        blur(function() {
            var tm = elContent.data('tmCountLetters');
            clearTimeout(tm);
        });

なお実際にこのスクリプトを使う場合は、通常のユーザー入力以外のタイミングで内容が変化する可能性を考慮してください。以下がよくあると思います。

  • ブラウザによる、画面更新時の入力内容の復帰
  • フォーム入力内容のリセット(入力キャンセルだけでなく、内容を動的に送信した後のリセットも)

そうそう、残り0を下回ると色を変えるようにしているんですが、これも本来なら色指定の変更ではなくクラス名の変更で管理するべきですね。

CSSでMSのリボンUI風のボタン


CSS3のgradientやbox-shadowを駆使して似たようなものを作ってみました。

DEMO

本物は光沢のあるグラデーションだったりするのですが、面倒だったのでそこまでは再現していません。他にも少しずつ違う部分がありますが……。

ちなみに本物*1はこんな感じ↓

Firefox3.6、Chorme5で確認しました。IE8は角が四角くてグラデーションもなくてのっぺりした、大変残念な感じになりますが、まあIEなので仕方がない。とはいえ崩れはしません。あ、IE6はちょっと……。

コードはこんなんです。

*1:MS Office Word 2007

続きを読む

アイス食べたいけど

if (tooHot) {
    var ice = ginpei.buy('ハーゲンダッツ');    // <= ここで Cost overflow exception.
    ginpei.eat(ice);
}

><

※はてダ⇔twitter連携を試してみました。

IE8でtableのセルが広がってしまう

横に広げたくないので、セル内容をdivで括ってmax-widthを指定したんですが、こんな風になってしまいます。

(下はmax-widthなし。)

CSS:

.my_table,
.my_table th,
.my_table td {
    border: 1px solid red;
}
.my_table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 10px;
    width: auto;
}
.my_table th,
.my_table td {
    padding: 4px;
}
.my_table div {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

HTML:

<table class="my_table">
  <tr>
    <td><div>あああああああああああああ</div></td>
    <td><div>WWWWWWWWWWWWWWWWWWWWWWWWWW</div></td>
  </tr>
</table>
<table class="my_table">
  <tr>
    <td>あああああああああああああ</td>
    <td>WWWWWWWWWWWWWWWWWWWWWWWWWW</td>
  </tr>
</table>

ううううむ?

その後→解決しました。

http://twitter.com/mr_myself00/status/16227852046:twitter:detail:right

というわけで、こんな感じですね。

.my_table div {
    overflow: hidden;
    max-height: 1em;
    max-width: 100px;
    word-break: break-all;
}

ありがとうございました!

カラーコードの10進数と16進数を相互に変換

カラーピッカーで拾った色がだいたい10進数(0〜255)なので、それを16進数(0〜FF)の表記に変換するプログラム。
http://ohbaco.net/archives/2010/0609/colorcode/colorcode.html
せっかくなので逆変換も作ってみました。地味に#FFFな三桁コードにも対応してます。

Phusion Passengerを使ってRuby on RailsをApacheで動かしてみた(Linux)

前回の続きです。「続きは明日」とか言っておきながら幾星霜……すみません。

前回 : ■Railsに特化した高速Ruby、"Ruby Enterprise Edition"をインストールしてみた (Linux)

Ruy on Railsでアプリを作ったらscript/severRails付属のHTTPサーバーWEBrickを起動して動作を確認すると思うんですが、いちいち起動するのも面倒ですよね。SSHでリモートログインとかしてると一度WEBrickを停止させないと他のことできないし。

そんな悩みを解消してくれるのがmod_railsことPhusion Passengerです。

公式サイト → http://www.modrails.com/

というわけで、やり方です。基本的には公式サイトのInstallのページの記述に従えばOKです。なおrootで作業します。

gemを取得

# gem install passenger

あっさり終わりました。続いてインストーラーを使ってApacheに組み込みます。

インストール

# passenger-install-apache2-module
Welcome to the Phusion Passenger Apache 2 module installer, v2.2.9.

This installer will guide you through the entire installation process. It
shouldn't take more than 3 minutes in total.

Here's what you can expect from the installation process:

 1. The Apache 2 module will be installed for you.
 2. You'll learn how to configure Apache.
 3. You'll learn how to deploy a Ruby on Rails application.

Don't worry if anything goes wrong. This installer will advise you on how to
solve any problems.

Press Enter to continue, or Ctrl-C to abort.

親切だなあ。超訳

ようこそ!

このインストーラーは、一通りのインストール手順をお伝えします。全部で3分もかからないですよ。

手順はこんな感じです。

  1. Apache2用のモジュールがインストールされます。
  2. Apacheの設定をして下さい。やり方はそのときお教えしますね。
  3. Ruby on Railsアプリケーションの公開方法についてもお教えします。

何か問題が起こっても心配しないで。インストーラーが問題解決のアドバイスをしますから。

というわけで、この先もあっさり終わるみたい。

Enterを押して続きを促す。

Checking for required software...

 * GNU C++ compiler... found at /usr/bin/g++
 * Ruby development headers... found
 * OpenSSL support for Ruby... found
 * RubyGems... found
 * Rake... found at /opt/ruby-enterprise-1.8.7-2010.01/bin/rake
 * rack... found
 * Apache 2... found at /usr/sbin/apache2
 * Apache 2 development headers... not found
 * Apache Portable Runtime (APR) development headers... not found
 * Apache Portable Runtime Utility (APU) development headers... not found

Some required software is not installed.
But don't worry, this installer will tell you how to install them.

必要なソフトを確認中...

必要なソフトがいくつかインストールされていませんでした。

でも大丈夫、これからどうやってインストールするか、教えちゃいます!

Ruby Enterprise Editionのときと同じですね。インストール方法を教えてくれます。

Installation instructions for required software

 * To install Apache 2 development headers:
   Please run apt-get install apache2-prefork-dev as root.

 * To install Apache Portable Runtime (APR) development headers:
   Please run apt-get install libapr1-dev as root.

 * To install Apache Portable Runtime Utility (APU) development headers:
   Please run apt-get install libaprutil1-dev as root.

If the aforementioned instructions didn't solve your problem, then please take
a look at the Users Guide:

  /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9/doc/Users guide Apache.html

インストーラー先生の言う通りにパッケージをインストール。

# apt-get install apache2-prefork-dev libapr1-dev libaprutil1-dev

改めてインストーラーを起動。

# passenger-install-apache2-module

3分くらいで終了。

The Apache 2 module was successfully installed.

Please edit your Apache configuration file, and add these lines:

   LoadModule passenger_module /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9/ext/apache2/mod_passenger.so
   PassengerRoot /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9
   PassengerRuby /opt/ruby-enterprise-1.8.7-2010.01/bin/ruby

After you restart Apache, you are ready to deploy any number of Ruby on Rails
applications on Apache, without any further Ruby on Rails-specific
configuration!

Apache 2用モジュールのインストールに成功しました。

Apacheの設定ファイルに、次の3行を追加して下さい。

...

追加したらApacheを再起動して下さい。これだけで他に設定しなくてもApacheで好きなだけRuby on Railsアプリを使うことができます。

Enterキーを押して続きを促す。

Deploying a Ruby on Rails application: an example

Suppose you have a Rails application in /somewhere. Add a virtual host to your
Apache configuration file and set its DocumentRoot to /somewhere/public:

   <VirtualHost *:80>
      ServerName www.yourhost.com
      DocumentRoot /somewhere/public    # <-- be sure to point to 'public'!
      <Directory /somewhere/public>
         AllowOverride all              # <-- relax Apache security settings
         Options -MultiViews            # <-- MultiViews must be turned off
      </Directory>
   </VirtualHost>

And that's it! You may also want to check the Users Guide for security and
optimization tips, troubleshooting and other useful information:

  /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9/doc/Users guide Apache.html

Enjoy Phusion Passenger, a product of Phusion (www.phusion.nl) :-)
http://www.modrails.com/

Phusion Passenger is a trademark of Hongli Lai & Ninh Bui.

Ruby on Rails アプリを使う準備の例

/anywhere にRailsアプリを作ったとします。アパッチの設定ファイルにバーチャルホストの設定をして、/anywhere/public をDocument Rootにします。

...

はい、おしまい! セキュリティや最適化、トラブルシューティング、その他諸々のお役立ち情報はこちら。

/opt/...

...

MultiViewsについてはこのあたり→ApacheのMultiViews機能ってなに? - ITmedia エンタープライズ

というわけで、インストールまで終了ですです。

Apacheの設定ファイルを編集

それでは先ほどインストーラー先生が教えてくれた設定をやっちゃいましょう。

Apache2の設定ファイルを開きます。Apache2ではhttpd.confの代わりにapache2.confを使うみたいです。(あるいはmods-enabledとかにファイルを設置するべきかも……。)

# vi /etc/apache2/apache2.conf

ファイルの末尾*1に設定を追加。コピペするだけです。

LoadModule passenger_module /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9/ext/apache2/mod_passenger.so
PassengerRoot /opt/ruby-enterprise-1.8.7-2010.01/lib/ruby/gems/1.8/gems/passenger-2.2.9
PassengerRuby /opt/ruby-enterprise-1.8.7-2010.01/bin/ruby

さらにその下に、Railアプリごとの設定を追加。今回は /home/ginpei/www/mynote に作成したアプリの設定をすることにします。(適当なアプリの作り方は40秒で作るRailsアプリを参照して下さい。) なお、おそらくApacheでは既にあれこれが動いている事だろうと思うので、ポートは80ではなく8000を使用することにします。

<VirtualHost *:8000>
  # ServerName www.yourhost.com
  DocumentRoot /home/ginpei/www/mynote/public
  <Directory /home/ginpei/www/mynote/public>
    AllowOverride all
    Options -MultiViews
  </Directory>
</VirtualHost>

とりあえずローカルで動かすだけなので、ServerName は設定しません。

で、ここまでインストーラー先生の仰る通りなのですが、幾つか教えてくれない事があります。

インストーラーが教えてくれないこと1: ポートを開く

このままでは繋がりません。何故なら使用しているポートをApacheが開いていないからです。(80から8000に変えちゃいましたから。)

先述のApache設定ファイルにListen 8000を記述して、再起動して下さい。

<VirtualHost *:8000>
  # ServerName www.yourhost.com
  DocumentRoot /home/ginpei/www/mynote/public
  <Directory /home/ginpei/www/mynote/public>
    AllowOverride all
    Options -MultiViews
  </Directory>
</VirtualHost>
Listen 8000    # <= ADD!!
# /etc/init.d/apache2 restart

これでポートも開くようになりました。

インストーラーが教えてくれないこと2: Rails実行モードの設定

それでは画面を開いてみましょう。


We're sorry, but something went wrong.

We've been notified about this issue and we'll take a look at it history.

……あ、あれれ???

実はPhusion Passengerは、デフォルトではproductionモードで動作するようになっています。そのため、Railsデフォルトのdevelopmentモードでしか準備していない場合はエラーになってしまうし、またエラーも抑制されて、そのまま画面に出たりしないのです。

というわけで、developmentモードで動かすようにしましょう。

先述のApache設定ファイルに追記して、動作モードを変更するよう、RailsEnvを設定してやります。

<VirtualHost *:8000>
  RailsEnv development  # <= ADD!
  # ServerName www.yourhost.com
  DocumentRoot /home/ginpei/www/mynote/public
  <Directory /home/ginpei/www/mynote/public>
    AllowOverride all
    Options -MultiViews
  </Directory>
</VirtualHost>
Listen 8000
# /etc/init.d/apache2 restart

これでdevelopmentモードで動作するようになりました。おめでとう!

また、逆にアプリをproductionモードで動くようにしてやっても良いでしょう。というか実際に公開するときはそうする必要がありますよね。

とりあえず、DBを作ってやれば動きます。

rake db:migrate RAILS_ENV=production

Apacheの設定ファイルでdevelopmentモードの指定をした場合は、は元に戻して下さいね。

これでおしまいです。めでたし、めでたし、どっとはらい

*1:viならShift+Gでジャンプできます。