Grafun スタッフ Blog

ブログにはコメント機能がつきもの 。ということで、このブログにもちゃんとコメント機能はつけています。しかし、誰にでもコメントを書き残せるようにしてしまうとスパムコメントが書き込まれることになるでしょう。かといって、アカウント認証で制限してしまうと、アカウントの登録やログインが面倒くさくなり、気軽にコメントを書いてもらえなくなります。

このサイトにおいては、少量のスパムコメントならちょこちょこっと手作業で削除する事にし、プログラムによる大量のスパムコメントに対しては、書き込まれないように対策を講じることにしました。その対策として、 CAPTCHA という画像認証の仕組みを使います。Ruby on Rails 用のプラグインで CAPTCHA機能を実現するものにはいくつかありますが、当サイトでは simple_captcha を使う事にしました。

simple_captcha について

simple_captcha は以下の特徴を持っています(詳しくは、 公式サイト でご確認ください)。

• 色々な画像のスタイルが選べる(ランダムで自動選択も可能)
• 3レベルの画像の複雑さが選べる
• 生成する画像はアルファベットか数字かを選べる
• 画像をファイルシステムに保存しない(シークレットコードはデータベースに保存)
• データベースに保存されている古いシークレットコードは、1時間経過したら自動的に削除される
• 画像と認証コードの入力フォームが部分テンプレートで提供されているので、カスタマイズしやすい

すでにいくつかのプログラムサンプルを掲載していますが、これらは全て CodeRay ライブラリを用いて整形されています。

CodeRay ライブラリは、プログラムの構文を解析し、キーワードや文字列、コメント等をわかりやすく表示できる HTMLに変換してくれます。例えば、

require 'rubygems'
require 'coderay'

# CodeRay を利用したサンプルプログラム
text = '@blogs = Blog.find(:all, :conditions => [ "category_id = ?" ],
                          :order => "created_at desc")'
print CodeRay.highlight(text, :ruby, :css => :class, :wrap => :div)

というプログラムソースを整形すると、

<div class="CodeRay">
  <div class="code">
    <pre>
require <span class="s"><span class="dl">'</span><span class="k">rubygems</span><span class="dl">'</span></span>
require <span class="s"><span class="dl">'</span><span class="k">coderay</span><span class="dl">'</span></span>

<span class="c"># CodeRay を利用したサンプルプログラム</span>
text = <span class="s"><span class="dl">'</span><span class="k">@blogs = Blog.find(:all,
           :conditions => [ &quot;category_id = ?&quot; ],
           :order => &quot;created_at desc&quot;)</span><span class="dl">'</span></span>
print <span class="co">CodeRay</span>.highlight(text, <span class="sy">:ruby</span>,
           <span class="sy">:css</span> => <span class="sy">:class</span>,
           <span class="sy">:wrap</span> => <span class="sy">:div</span>)
</pre></div>
</div>
</div>

のような HTMLに変換されます(見やすくする為に改行をしています)。

簡単に入力出来るブログ記事 textile の続き。

textile のほかにも HTMLを簡単に記述する為に作られたフォーマットがあります。当サイトの CMS では、その中の markdowm というものを使えるようにもしています。

markdown でさきほどと同じサンプルを出力させるには、

ランディネットワークとは
------------------------

[ランディネットワーク](http://www.randynetwork.com/) は、滋賀県草津市 の **Web 制作事業者** です。
個人事業ならではの、 _きめ細かいサービス_ をご提供いたします。

* Webアプリケーションの制作、運用支援
* Webサイトの構築、導入、運用支援

のように記述します。結果は textile のときとほぼ同じようになります( 出力結果 )。

<h2>ランディネットワークとは</h2>

<p><a href="http://www.randynetwork.com/">ランディネットワーク</a> は、滋賀県草津市 の
<strong>Web 制作事業者</strong> です。
個人事業ならではの、 <em>きめ細かいサービス</em> をご提供いたします。</p>

<ul>
<li>Webアプリケーションの制作、運用支援</li>
<li>Webサイトの構築、導入、運用支援</li>

</ul>

ブログとかお知らせとかは単純なテキストで入力出来るほうが使いやすいのですが、それでもある程度の表現力は欲しいものです。単純に改行文字1つを <br/>タグに、改行文字2つを <p>に変換するようなものなら簡単に自作出来るのですが、それよりも箇条書きやキーワードの強調も出来たほうが便利です。

最近、うちの事務所では Ruby on Rails (以下 Rails)の仕事をメインでやっています。また、プロジェクト管理は Redmine を使っており、Redmine の Wiki フォーマッタの textile に慣れてきてしまっています。そんなこともあって、このサイトの各コンテンツも textile で入力出来るようにしました。

textile というのは、簡単に HTML文書が書けるようになるテキストフォーマットです。例えば以下の文書を書いておけば、

h2. ランディネットワークとは

"ランディネットワーク":http://www.randynetwork.com/ は、滋賀県草津市 の *Web 制作事業者*です。
個人事業ならではの、 _きめ細かいサービス_ をご提供いたします。

* Webアプリケーションの制作、運用支援
* Webサイトの構築、導入、運用支援

以下の HTML文書に変換してくれます( 出力結果 )。

<h2>ランディネットワークとは</h2>
<p><a href="http://www.randynetwork.com/">ランディネットワーク</a> は、滋賀県草津市 の
<strong>Web 制作事業者</strong>です。<br/>
個人事業ならではの、 <em>きめ細かいサービス</em> をご提供いたします。</p>
<ul>
        <li>Webアプリケーションの制作、運用支援</li>
        <li>Webサイトの構築、導入、運用支援</li>
</ul>

HTMLタグ を直接入力する手間を考えると、非常に楽に入力できるようになります。

皆さんがご覧になっているこのサイト。実は、既に公開しているサイトでありながらも現在進行形で開発を進めています。そう。今でも。

通常なら、

1. Web製作の会社に依頼
2. サイトの内容決め
3. デザイン決め
4. CMS開発 or HTML作成
5. テスト
6. 納品され、ようやく公開

って流れで、開発がスタートして 1ヶ月ほどたって ようやくサイトが公開となります。もちろん、今までどおりのそんな開発で悪いところは何もないと思います。だけど、思い立った日から 1ヶ月もたってサイトを公開しても、もうその時には思い立った時の情熱も消えているかもしれません。もしかしたら、他社に同じようなサイトを先に立ち上げられてしまうかもしれません。

思いったらその日にドメイン取って、サーバーセットアップして、 rails コマンドでアプリケーションの土台を作って、HTMLファイルを作成して。Google にサイトマップを送信して。これでその日のうちにサイトが立ち上げられるんです。というより、このサイト(GraFun.biz)がまさにその状態なのです。

このサイトがどのように作成されたのかを簡単に紹介してみたいと思います。

Web2.0風のリボンをちょこちょこっと作って、ロゴもフリーフォントの中から丸っぽい文字を探して作ってみました。

リボンは透過 PNGなので、やっぱり IE6 では見えません。しょうがないので、Rails 側で IE 6以下の場合はリボンを見せないようにしました。リボンがあるのと無いのとでユーザビリティ的には違いがないので、そのままにしておきます。もうすぐ IE 6 のシェアも大きく下がるでしょう。IE 7, Firefox 3 のみで確認しました。後で Safari でも確認してみようと思います。

ちなみに、Photoshop は他のスタッフが使うので、僕は Gimp です。そりゃ Photoshop のほうが使いやすいけど(なれているから)、Gimp でも十分です。

あと、(TOPページも若干おかしいけど、)お問い合わせフォームが、IE7, IE6 でレイアウトが崩れてしまっています。ちょっとこのままだと具合が悪いので、近々修正しないと。