Tenjinテンプレートエンジンで快適Web制作4

IWDD41で発表したTenjinテンプレートエンジンで快適Web制作3の続きエントリーです。

画像ファイルが沢山あるページの場合、srcやaltをそのままhtmlの中に書いても良いですが、yamlファイルで管理したりすると便利かも。

apple:
  src:        apple.jpg
  alt:        りんごの写真
  width:      300
grape:
  src:        grape.jpg
  alt:        ぶどうの写真
  width:      400
lemon:
  src:        lemon.jpg
  alt:        レモンの写真
  width:      500

data.yaml

それぞれの画像ファイルに対するメタデータを、このようなYAML形式で作っておきます。

そして、以下のようなテンプレートを作ると、YAMLファイルからデータを読み込んで、それぞれの項目名を元に、imgタグを返すことができます。

<?rb
@title='YAMLファイルからページを作る'

# YAMLファイルを読み込んで、指定されたハッシュのimgタグを返す
require 'yaml'
def yaml2img(key)
  hash   = YAML.load(File.read('data.yaml'))
  ysrc   = hash[key]['src']
  yalt   = hash[key]['alt']
  ywidth = hash[key]['width']
  @_buf << '<img src="/images/'+ysrc+'" alt="'+yalt+'" width="'+ywidth+'">'
end
?>

<?rb import 'header.html' ?>
  <div>
    <?rb yaml2img('apple') ?>
    <?rb yaml2img('grape') ?>
    <?rb yaml2img('lemon') ?>
  </div>
<?rb import 'footer.html' ?>

yaml.html

imgタグを返すyaml2imgメソッドをテンプレート内で定義して、テンプレート内で<?rb yaml2img() ?>で呼ぶと、その場所にimgタグが出力されます。

http://localhost/yaml.html にアクセスすると、

<html>
  <head>
    <title>YAMLファイルからページを作る</title>
  </head>
  <body>
  <div>
    <img src="/images/apple.jpg" alt="りんごの写真" width="300">
    <img src="/images/grape.jpg" alt="ぶどうの写真" width="400">
    <img src="/images/lemon.jpg" alt="レモンの写真" width="500">
  </div>
  <div>ここがフッター</div>
  </body>
</html>

という結果が得られると思います。


Tenjinテンプレートエンジンで快適Web制作3

IWDD41で発表したTenjinテンプレートエンジンで快適Web制作2の続きエントリーです。

Webサイトの原稿をもらうときに、ワードだったり、エクセルだったりすることがあるかと思いますが(><)、今回はエクセルファイルから直接ページを作ってみます。

まず、エクセルでこんなシートを作ります。シート名は「page1」、ファイル名は「data.xls」にしておきます。これがページの原稿になります。

エクセルで原稿を作る data.xls

RubyのSpreadSheetライブラリを使って、エクセルのデータを直接読み込んでテンプレートの中に展開します。

<?rb
@title='エクセルファイルからページを作る'

require 'rubygems'
require 'spreadsheet'
book  = Spreadsheet.open('data.xls', 'rb')          # エクセルファイルを指定する
sheet = book.worksheet('page1')                     # シート名を指定する

xls_title  = sheet[2,1]                             # ページタイトル(B3)
xls_body   = sheet[3,1].gsub(/\n/, '<br>')          # 本文。改行をbrタグに置換(B4)
xls_alt    = sheet[4,1]                             # 写真の説明(B5)
xls_src    = '/images/' + sheet[5,1]                # 写真のファイル名(B6)
?>

<?rb import 'header.html' ?>
  <div>
    <h1>${xls_title}</h1>
    <p>#{xls_body}</p>
    <img src="${xls_src}" alt="${xls_alt}">
  </div>
<?rb import 'footer.html' ?>

excel.html

こんな感じでexcel.htmlテンプレートを作ります。xls_body変数にはbrタグが入ってくるので、${xls_body}ではなくて#{xls_body}(エスケープ無し)を使っておきます。

http://localhost/excel.html にアクセスすると

<html>
  <head>
    <title>エクセルファイルからページを作る</title>
  </head>
  <body>
  <div>
    <h1>ここがページのH1になる場所</h1>
    <p>ここにページの内容を書く。<br><br>複数行の内容を入れ込んでもOK...</p>
    <img src="/images/apple.jpg" alt="赤く実ったリンゴ">
  </div>
  <div>ここがフッター</div>
  </body>
</html>

という出力が得られると思います。


Tenjinテンプレートエンジンで快適Web制作2

IWDD41で発表したTenjinテンプレートエンジンで快適Web制作の続きエントリーです。

TenjinをCGIから使う基本的な環境が出来たら、「header.html/body.html/footer.html」のパーツごとに分けてみます。

分割されたテンプレートファイルを読み込むには

<?rb import 'filename' ?>

を使います。

<html>
  <head>
    <title>${@title}</title>
  </head>
  <body>

header.html

<?rb @title='タイトルを設定する' ?>
<?rb import 'header.html' ?>
  <div>メイン</div>
<?rb import 'footer.html' ?>

main.html

  <div>ここがフッター</div>
  </body>
</html>

footer.html

このように3つのファイルを用意して http://localhost/main.html にアクセスすると、header.htmlとfooter.htmlがインポートされて評価されます。 また、main.htmlで@title変数に設定された内容が、header.htmlの${@title}で評価されていると思います。

結果として

<html>
  <head>
    <title>タイトルを設定する</title>
  </head>
  <body>
  <div>メイン</div>
  <div>ここがフッター</div>
  </body>
</html>

というHTMLが返ってくると思います。


Tenjinテンプレートエンジンで快適Web制作

IWDD41で「Tenjinテンプレートエンジンで快適Web制作」として発表してきました。

VGAアダプタを忘れてプロジェクタに映せなかったので(><)、blogにコードを貼ってみます。

素のHTMLを何ページも手書きしたくない、CMSを入れる程でもない、DreamWeaverテンプレートでは物足りない。 デザイナーでもテンプレートエンジンを使いこなしたい。Rubyを使いたい。そんな人にお勧めです。

今年はもっとRubyを勉強しようと思っているので、Ruby用のrbTenjinを使ってデモを書きました。

IWDDで発表した内容は

  • 基本的なTenjinの使い方
  • ヘッダ、本文、フッタの3ファイルに分ける方法
  • エクセルファイルからデータを読み込んでHTMLページ生成
  • YAMLファイルからデータを読み込んでHTMLページ生成
  • CGIのパラメータを受け取ってページの内容を変える

基本的なTenjinの使い方

テンプレートファイルの中で

  • ${...}と書けばrubyの式を評価した結果が入る(HTMLエスケープ有り)
  • #{...}と書けばrubyの式を評価した結果が入る(HTMLエスケープ無し)
  • <?rb ... ?>でrubyの文を埋め込める

Apacheで使うための設定

今回はCGIとして動かして、そのCGIの中でTenjinを使っていきます。

  1. Tenjinを動かすためのパーサとしてのCGI
  2. apacheで動かすための.htaccessファイル
  3. テンプレートファイル

まず、1.Tenjinを動かすためのCGIを http://dekstop.de/weblog/2006/01/rhtml_on_osx_with_apache_and_erb/ を参考にして書いてみます。これを「tenjin.cgi」とかの名前で保存しておきます。CGIがテンプレートファイルを受け取って、Tenjinに渡してレンダリングした結果を表示しています。

#!/usr/bin/ruby
$KCODE = 'utf-8'
require 'time'
# require 'rubygems'                          # 必要ならば
require 'tenjin'

time = Time.now.httpdate

HEADERS = <<EOF
Date: #{ time }
Server: #{ ENV['SERVER_SOFTWARE'] }
Last-Modified: #{ time }
Content-Type: text/html

EOF

begin

  path = nil
  if (ENV['PATH_TRANSLATED'])
    path = ENV['PATH_TRANSLATED']
  else
    file_path = ENV['REDIRECT_URL'].include?(File.basename(__FILE__)) ? ENV['SCRIPT_URL'] : ENV['REDIRECT_URL']
    path = File.expand_path(ENV['DOCUMENT_ROOT'] + '/' + file_path)
    raise "Attempt to access invalid path: #{path}" unless path.index(ENV['DOCUMENT_ROOT']) == 0
  end

  tenjin = Tenjin::Engine.new(:cache => false)  # キャッシュ機能は今は外しておく
  output = tenjin.render(path)                  # テンプレートをレンダリングする

  print HEADERS + output                        # レンダリング結果を出力

rescue Exception
  # エラーが発生した場合
  print "Content-Type: text/html\n\n"

  # error message
  print "<h1>Script Error</h1>"
  print "<pre>#{ $! }</pre>"

  # debug info
  print "<h2>Backtrace</h2>"
  print "<pre>#{$!.backtrace.join("\n")}</pre>"

  print "<h2>Environment</h2>"
  print "<pre>#{ENV.keys.map { |key| key + ' = ' + ENV[key] + "\n"} }</pre>"

  print "<hr>"
  print "<i>#{__FILE__} -- #{time}</i>"

end

tenjin.cgi

apacheで動かすための.htaccessファイル

Apacheのmod_actionを使って、htmlファイルへのアクセスを、tenjin.cgiに渡すようにします。テンプレートファイルの拡張子は.rhtmlとかでも良いのですが、.htmlにしておくと、URLの見た目的にも、エディタでの扱いやすさ的にも良いと思います。

Options +ExecCGI

AddHandler tenjinpage .html
Action tenjinpage /tenjin.cgi

.htaccess

ここまで出来たら準備完了です。テンプレートファイルを作って、動作確認してみます。

<?rb aaa = 'こんにちはー' ?>
<html>
  <head>
    <title>${aaa}</title>
  </head>
  <body>
    ${aaa}
  </body>
</html>

test.html

こんなHTMLファイルを作って、 http://localhost/test.html にアクセスしてみると、変数aaaの内容が${aaa}で評価されて、ブラウザには

<html>
  <head>
    <title>こんにちはー</title>
  </head>
  <body>
    こんにちはー
  </body>
</html>

という内容が返ってくると思います。

毎回CGIを呼び出しているので、スピードが気になる場合は、レンダリング結果を静的ページとして保存してしまうのも良いと思います。


IWDD34でIE8とWindows7について学んだ

IWDD34IE8について勉強してきました。すでにWindowsUpdateでもIE8の配布が始まっているので、ブラウザシェアもどんどん伸びてきています。制作者側が覚えておく事として以下の機能と使い方を、msdnのIE8の項目IE8インデックスを確認しつつ、一つずつデモしながら学びました。

ちなみに、今回のデモ環境は、先日発表されたWindows7 RCのIE8を早速使ってみました。

WindowsXPでもWindowsVistaでもIE8は使うことができますが、せっかくなので最新の環境で確認です。Vista+IE7+メイリオだと中途半端にClearTypeがかかって英数と日本語とで綺麗に表示されない事があるんだけど、Windows7+IE8+メイリオではClearTypeの仕様が変わったのか、なかなか綺麗に表示されるような気がします。

レンダリングモードとDoctypeと対応CSS

ZDNetのIE8の記事を一つずつ検証しながら理解し、IE8の挙動を確認していきました。

印刷関連のCSSは一見して見えないところだけど、ぜひ対応していきたいところです。

Webスライス

Webスライスは、マイクロソフトが定義してIE8に実装した一種のmicroformatsと考えることができると思いますが、既存のサイトで対応するには指定のclass名を付ければOKだったりと、比較的そのままの開発状況で対応することが出来るので、積極的に対応していっても良いと思います。詳しくはWebスライスの仕様書にて確認。

実装のテストとしてIWDDの公式サイトのTOPページを、Webスライスに対応させるデモをその場でしてみました。

Apacheのログを見ると、IE8がWebスライスを含んだページ見に来て、ページ全体をGETしているようです。WebスライスのUser-Agentは「Windows-RSS-Platform/2.0 (MSIE 8.0; Windows NT 6.1)」のUAで見に来るようです(Windows7の場合)。WebスライスにTTLで有効期限を設定できるのが便利かも。

開発者用ツール

IE7ではアドオンという形でDeveloperToolを入れることが出来ていましたが、IE8では標準で最初から組み込まれています。便利ですねー。FirefoxのFirebugと同じようなことが出来るんだけど、CSSの一つ一つのプロパティをチェックボックスでON/OFF出来るところが便利そうです。CSSの一つをOFFにすると、それに合わせてspecificityも全て計算して表示し直してくれるのも良いです。

アクセシビリティ

IE8はARIAマークアップにも対応してると書いてあるけど、どのくらい対応しているのかは未検証。ThinkITにもIE8のARIAの特集ページが。


抹茶生クリーム大福を食べながらセキュリティの勉強

IWDD#33の「門外不出のセキュリティー勉強会」で話をしました。IWDDでは初めてのセキュリティーネタということで、なかなか良い煽りタイトルになったと思います。初参加や久しぶりの参加の方も多く集まりました。とりあえず私がモデレーターとして話をしましたが、他にもセキュリティ関係を気にして見てる人はいないのかな?

まず最初に、「アクセス権限のないコンピューターのパスワード等を解析しようとしたり攻撃しようとしたりする行為は、不正アクセス禁止法、あるいはその他の法律で処罰の対象となる可能性があります。今日はそのような行為から自分のPC等を守る為に必要な技術や防御措置とかを勉強します。勉強会では不正アクセスを助長していませんよ。」というのをみんなで再確認。お約束おやくそく。

IPAの情報セキュリティ白書でここ数年の傾向を振り返った後、その中のトピックについて説明&デモ。

また、SecurityFocusなどの脆弱性情報が集まるサイトを見ながら、実際に仮想環境で再現実験をしたり、カスペルスキーが反応する様子を見たり、TripWireSnortWiresharkNessusなどの各種ツールを動かしてみたり。JPCERT/CCのサイトを確認したり。

内外部からの侵入やウィルス感染への対応など、すべき事はたくさんあるけど、今日から個人的にも出来ることは、きちんとセキュリティパッチを当て続け、PCの中に保存する情報は暗号化ボリューム等に保存して、利用する通信経路を暗号化しておく事でしょうか。Windows系OSを使っている人は、パスワードは15文字以上にしておいた方がいいと思います。

Web制作の現場では、まだまだ素のFTPを使ってファイル転送をしている人が多いような気がしますが、FTPSやSFTPなどの暗号化された経路を今すぐ使うべきです。レンタルサーバーでも対応しているところが増えています。SMTPやPOP3もSSL/TLSでの暗号化をすべきで、暗号化出来るところはすべて暗号化してしまいましょう。

PCの中に保存するデータはTrueCryptやMacならDiskUtility.appを使って、暗号化ボリュームの中に保存しておくと、PCが物理的な盗難に遭っても少しは安心できますね。プログラミングをする人は、それぞれの分野に応じて脆弱性を組み込まないように気をつけましょう。一番弱いのは人でしょうか。

そうそう、今回のおやつは「抹茶生クリーム大福」、「手作りリンゴジャム&パン&ヨーグルト」、「ポッキー」でした。おいしゅうございました♪

IWDD33で食べたスイーツ


今週末はIWDDで門外不出のセキュリティ勉強会

今週末(4/11 14時〜)はIWDD#33が開催されます。

その中で私がセキュリティーについて話をする予定です。これは門外不出ですね。危ないです。参加した人だけです。攻撃方法と防御方法の両方やる予定です。

  • 何を守りますか?
  • ぜいじゃくせい
  • パスワード
  • ウィルス・ワーム・スパイウェア・トロイ
  • ネットワーク盗聴
  • ソーシャルエンジニアリング
  • バッファオーバーフロー
  • SQLインジェクション
  • XSS
  • 侵入検知
  • インシデント対応
  • 暗号化
  • PKI・電子署名
  • 個人情報保護法
  • Windowsを覗く
  • Linuxを覗く
  • Macを覗く
  • Winny

とかについて盛り沢山やりたいと思います。ウィルスお持ちの方はご持参ください。

詳しくはIWDDのサイトで確認してください。参加申し込みはATNDでお待ちしております。


勉強会はOSS(オープンソース・ソフトウェア)と同じ

TDCの1周年記念カンファレンスで行われたパネルディスカッションに参加してきました。

パネルの参加者は向かって右から、杉山さん吉岡さん小泉さん片平さん、鈴木、武田さん。最初に各コミュニティーの自己紹介をした後、杉山さんの進行するお題に沿って話す形式でした。

当日自分がどんなことを話したのかよく覚えてないのですが、できるだけ多くの人に「参加すると良いよ!」さらに「自分が勉強会をする立場になるともっと面白いよ!」と呼びかけたつもりです。パネリストとして参加した人達の、東北を盛り上げていきたいという思いが伝わればと思います。

今回も様々な人に出会うことができ、とても楽しかったです♪

パネルディスカッションの様子 Click to Play

Ustから自分の話を起こしてみると

問:なぜ勉強会を始めたのか?

僕の記憶では... 僕は3年前に岩手にUターンして帰ってきたんだけど、その時に岩手のWeb関係について右も左も全然知らなかったので、地元で活躍しているsasahiraさんと101さんに「岩手のこと教えて下さいー」と聞きに行ったのがきっかけのような気がします。そこで「集まりたいよねー」という話になって、IWDDが始まったんだと記憶しています。

sasahiraさんと101さんに「鈴木が岩手に帰ってきたんですけど!」みたいな変なメールを送ったのが最初だと思いますですはい。

問:得られた事・苦労した事

得られたことは、こうした人脈が広がるということですね。Uターンして右も左も分からずに岩手に来て、IWDDを続けることによって広がる友達の輪っていうのが一番ですね。苦労したことは... 無いですね。というか、苦労しそうなことはやらないようにしています。あえて言えば、(地理や時間的な制約もあって)行きたいけど行けない勉強会が増えてきたという(嬉しい悲鳴)でしょうか

勉強会を開催するのにすごく費用がかかったり、スポンサー集めに走り回ったり、日時や会場の調整を繰り返したり、講師を呼ぶためのいろいろな手配をしたり。やりたい本質は「勉強会」そのものであって、「勉強会の運営」をやりたい訳では無いので、できるだけ開催のための資金的・時間的・人月的コストはかけないようにしています。そのあたりはITをうまく使って省力化してやっていければと思います。

問:勉強会の幅について

IWDDでは勉強会のお題を「この人にこの話を聞きたい」というご指名制と、「自分がこの話をしたい」という立候補制の2パターンがあります。その他にも「自分がこの分野を勉強したいから、自分自身を指名する」というのもあります。やはり「人」で成り立っているので、その分野をやりたい人がいなければ、その分野の幅は広がらないという点はありますね。

IWDDでは「Java」と「セキュリティー」については本格的にはまだ一度もやっていないのですが、やはりそれをやっている(やってみたい)人が少ないからではないかと思います。だからと言って、その分野をやらないわけではなくて、それを面白いと思っていてお題を話す人がいれば、いつでもテーマになり得ます。

会場でまっちゃだいふくさんにお会いしたので、セキュリティー関係は盛り上がっていきそうな予感がします。

まっちゃだいふく

問:なぜ運営してるんですか?

「楽しいから」につきますね。以上です。

問:会場の皆さんにメッセージ

二人集まれば、もうそれで勉強会ですから、やりたいことをどんどんやっていくと良いと思います。

懇親会に「Perl使っていてCPAN Authorなんだけど何か始めたいなぁ」という方がいましたので、ぜひ是非Sendai.pmを!とハッパをかけて来ました。東北にはPerl系の集まりって聞かないので、ぜひ始めてみると良いと思います。そんな感じでRuby青森も始まった経緯があるので。

問:盛り上げるためにやっているTIPSとかはありますか?

勉強会の当日はできるだけ若者や、女性の参加者を集めようとしたりしています。勉強会を開催する前の普段はTwitterやIRCやMLやBlogでコミュニケーションを続けています。

他にはポジションペーパーを導入して全員が1回は発言したり予習をするようにしたり、アンケートをとってみたりもしています。IWDDハッカソンの時は、一人300円以内(バナナは除く)でお菓子の持ち寄りをしました。他にもTIPSがいろいろとありそうですね。

勉強会はOSS(オープンソース・ソフトウェア)と同じ

パネルの中では時間が限られているので、突っ込んだ話までは進まないんだけど、その後の懇親会で吉岡さんに話してみて、自分の中で確証したのは、今行われている勉強会はオープンソース活動と同じだということです。

いろんな考え方があると思うんだけど、(有料)セミナーという形式が「プロプライエタリ」なソフトウェアだとしたら、僕たちがやっている勉強会は「オープンソース」のソフトウェア開発そのものだと思っています。OSSも好きだから始めるし、必要だから作るし、自分達が使うために作るし、楽しいから続くし、必要であればフォークしたりマージしたり、どんどんコミットしたり。

今、日本全国で行われている「勉強会」はまさにOSSの開発モデルそのもので、OSSの考え方や開発運営手法が勉強会開催手法に応用出来ると思っている。小さいうちはそれぞれのルールで進めて行く方がスピードが速くてエキサイティングだと思うし、Linux KernelやFreeBSDのように大規模になったら、それこそ選挙制とかチーフコミッタ−制とか、権限と役割を分けていくことも必要になっていくのも同じ。

オープンソースに理解のある会社の中の人は、勉強会にどんどん出てくるし、OSSへの理解の少なそうな会社の人は、勉強会に出てこないっていうのも、モデルとして良く似てると思う。

パネルディスカッションの様子 Click to Play

IWDDについての紹介プレゼンしましたが、今までの勉強会のお題を全て紹介しました。毎月二つずつくらいやっているのですが、改めて積み重ねのすごさを感じました。

IWDDプレゼンPDFファイル (1.5M)

  • CMSとして使うMovableTypeカスタマイズ
  • サイト構築必須知識・総チェック
  • Web標準&CSS Tips
  • ブログのカスタマイズデザイン 〜MovableType中級編
  • Web標準とSEO
  • WEBページの仕組み、メールの仕組み
  • 小・中規模事業者向けサイト構築の実際
  • AjaxのためのJavascript入門
  • オープンソースCMS・Nucleus
  • WebデザインとDTPデザイン〜違いと親和性
  • デジカメ時代の被写界深度
  • IWDD.net公式サイト企画会議
  • InternetExplorer7とCSS
  • wiiブラウザリリース直前!今後の可能性とサイト対応
  • The Font
  • Nucleusでサイトを作る10のノウハウ
  • Web制作者向け「音」に関するワークショップ
  • 携帯サイト構築
  • 30分で作るMTショッピングサイト
  • ベジェ曲線
  • Flashアニメーション基礎編
  • CMSツール選びあれこれ〜入門編〜
  • CSS を使ったデザインテクニック24連発
  • FLASH ActionScript
  • Adobe CS3でWeb制作
  • 間違ってネットショップ構築&運営担当者になっちゃっても、なんとかなる心構え&現場のノウハウ
  • BootCamp大会
  • IWDD公式サイトのNucleusバージョンアップ大会
  • LT大会
  • アクセスログ・アクセス解析
  • Movable Type 4
  • ネットショップ系ディスカッション
  • みんなでデザインしよう Photoshop
  • 旧バージョン(8+10)ユーザーのための、Illustrator最新事情へのキャッチアップ
  • Dreamweaverのコーディング機能再点検
  • 正規表\現
  • Microformats / hAtom
  • アクセシビリティ・スクリーンリーダー
  • CSS Nite in AKITA 参加してきました報告
  • Windowsホスティングを利用したWEBサイト構築方法
  • デザイナーにもやさしいJavaScriptライブラリ「jQuery」
  • Laser Tag でハイク
  • Twitter APIの基礎とrubyでの実装
  • Twitter APIの基礎とperlでの実装
  • phpとHTMLの関係
  • 小ネタPHP
  • クロスブラウザ対策のCSSハック
  • Google Mapsを使ってたんけんぼくのまち
  • 続☆Web制作者向け「音」に関するワークショップ
  • MT4LP5(CSS Nite LP, Disk 5)報告
  • Macを活用する10のTIPS
  • 外国語で検索しよう
  • 実演PHP@お問い合わせフォーム編
  • WindowsServer2008に触ってみる
  • HTML5
  • AS3でWebサービスを作ろうと思っている人のネタ帳
  • ClassCatでweb&mailサーバー管理
  • Plaggerによる岩手のニュースフィード
  • 自重はダークサイドだよ。
  • CSS Nite in AOMORI 2008 参加報告
  • webとキャラクター
  • 役に立たない情報商材でお小遣い稼ぎデザイン
  • デザイナーとエンジニアの共同作業のために
  • IWDD公式サイトリニューアルのワークショップ 第二部
  • オープンUI設計をしてみる
  • デザイナーから見たRails
  • Ruby on Rails について
  • VisualStudioでJavaScriptのデバッグをしてみる
  • ライカか、それ以外か / さよならライカ
  • Railsと赤魔導師のすすめ
  • IWDD Hackathon FES. / 2008 Summer.
  • IWDD Hackathon UNI_FES.
  • コミュニティに参加することの楽しさとその意味
  • iPhone使ってみたよ
  • .htaccess
  • 自社サーバーの「あるある」
  • レンタルサーバの「あるある」
  • フラッシュで1年を振り返る
  • シチュエーション別・(X)HTML入門講座
  • あそこから始まった人工無脳
  • オレオレCSSフレームワーク
  • Adobe CS4を体験してみる
  • Ruby on Rails で参加申込フォームを作ってみる
  • 簡単楽々イメトレ講座
  • コーディングよもやま話

地方におけるコミュニティ活動 - パネルディスカッション

明後日、3/4(木)に仙台メディアテークで開催されるTDC設立1周年カンファレンスにて、「地方におけるコミュニティー活動」というお題で、パネルディスカッションが行われます。私もIWDDの一人として参加してきます。

パネルのメンバーは

が参加します。

東北にも様々なコミュニティーや勉強会がありますが、それらを運営している方々が集まってのパネルディスカッションです。各地域に根ざした活動が続いていて、それぞれキャラクターがあると思いますが、向いている方向は同じだと思います。その方向性の確認と、運営のノウハウ、パッションの交換などなど熱く盛り上がる予感がします。

IWDDの第1回目は2006/8/5に開催されていて、その当時は笹平さんが代表でした。そしていつだったかに代変わりをして、私が世話人として月1回の勉強会を継続しています。その中で私は、「勉強会とは」「コミュニティーとは」等々、あまり語って来ませんでしたが、2年くらい運営してきて、いくつか思う事がまとまってきたので、当日はそれを話してみたいと思います。

私が心がけている事は簡単に言えば「何もしない。楽しい事をやる。オープンに。試してみる。」ということですが、もう少し具体的に言うならば、

  • 何もしない
    会社みたいな「組織」ではないし好きで集まっているので、マネジメントは必要最小限に。開催の資金的コストも時間的コストも抑えて、ITで自動化できるところは自動化して、あとはコミュニティーの自然に任せるようにして、基本的には言い出しっぺの法則で。ゆるいのでカオスになりがちで、一方では「ちゃんと運営して!」「マネジメントされた方が楽」「名簿作ろう!」という意見も聞こえてきますが...

  • 楽しい事をやる
    好きで参加しているので、好きな事を発表したり聞いたりする。

  • オープンに
    誰にでも開かれていて、フルディスクロージャーで。

  • 試してみる
    楽しくなりそうな事は何でも試してみる。

ということでしょか。「第2土曜日14時からアイーナで」と開催日時と場所を固定しているので、日程調整とか必要無いので、その点はとても楽です。

当日は、たぶんUstでも生中継されると思います(されないかもしれません)。 平日昼間ですが、当日会場に参加できる方はぜひ是非お会いしましょう♪

やはり「その場」にいる事がとても大事な事で、実際に見て、会ってっていうのが、とても楽しいのです。なので私も盛岡から高速バスで参加します♪


IWDD#28でCentOS、Apache2.2、mod_proxy_balancer

今回はサーバー特集ということで、私は3コマ目にApacheについて話しました。ただ時間が押していたこともあって、60分予定だったのが残り時間35分くらい。予定してた内容の半分を端折って話しました。

事前にIRCとかで話している雰囲気では、「サーバー」自体を見たことがない人も半分くらいいたような感じでした。確かにレンタルサーバーだけを使っていれば、Webサーバーが実際にどんな感じで動いているのか見たこと無いかもしれない。お題を決める時期には 「.htaccess」の書き方について聞きたいというリクエストでお題を決めたんだけど、.htaccess を書くにはhttpd.confを知っているべきなので、.htaccessではなくてApacheをお題に。

サーバー環境について

今回はサーバー特集でもあるので、あえてWebサーバーを構築するところから始めました。といってもサーバー実機を持ち込むのは大変なで、VMwareの仮想環境を使ってCentOS 5.2をインストールしてApacheを動かすところから。

httpd.conf

WindowsならばVMware Server(無償)を使えば同じ事ができるので、ぜひいろいろ実験して試してみるべし。

http://www.vmware.com/appliances/ に行けば、様々なアプライアンスが既に用意されていて、すぐに試すことが出来る環境構築済みのイメージファイルがダウンロードできます。

例えば

Ubuntu 8.10 Server LAMP
最新のLAMPな開発環境を動かしてみるとか。
Windows 2008 Enterprise Server
Windows 2008 Serverを試してみるとか。
Solaris10
zfsを試してみるとか。

いろいろな環境を試すことができます。

VMware上に自分が借りてるレンタルサーバーと同じような環境を作っておけば、本番環境の前に実験環境でいろいろ試してみることができるのでオススメです。サーバーだけでなく、クライアント環境もVMwareに作っておくと便利です。Webデザインを検証するときには、XPとかVistaのインストール直後の素の環境を用意しておけば、確実な検証ができるはず。IE6環境とかIE7環境とかFlashPlayer入れる前の環境とか。

Apacheについて

Apacheについてさっと説明したあと、httpd.confのディレクティブについて説明。実際の httpd.conf を書き換えて設定変更しながら出来ればよかったんだけど、時間が足りず説明のみ。

  1. 適切なリクエストに対して、適切なレスポンスを返すための、Apacheの基本的な設定をhttpd.confに書く。
  2. .htaccessではhttpd.confの設定をディレクトリごと等で上書き(Override)する。

httpd.confを書き換えたら $ apachectl configtest で確認すべし。

レンタルサーバー環境の.htaccessでは、BASIC認証・IP制限・mod_rewrite・カスタムエラードキュメント等で使うことが多いと思うので、それらのパターンを紹介。環境変数とかの条件によって、Rewriteルールを制御することができるので、CSSハックとかをしなくても、目的のUserAgentに対して適切なCSSを返すことができたりとか、同一のURLでPCと携帯の両方に対応したりとか。レンタルサーバーによって使えるディレクティブが異なるので、まずは自分のレンタルサーバーのFAQを調べてみるべし。

1. 適用範囲を決めて

# 特定のディレクトリ(/secretディレクトリ)に対して適用する
<Directory /secret>
</Directory>

# 正規表現で表したディレクトリ(/secret/数字3桁)に対して適用する
<DirectoryMatch "^/secret/.*/[0-9]{3}">
</DirectoryMatch>

# 特定のファイル(filename.html)に対して適用する
<Files filename.html>
</Files>

# 正規表現で表したファイル(gif,jpg,jpeg,png)に対して適用する
<FilesMatch "\.(gif|jpe?g|png)$">
</FilesMatch>

2.適用する内容を書く

# /でアクセスしてきた時に、ディレクトリ一覧を出さないようにする。

Options -Indexes

# 盛岡のOCNからしかアクセスを許可しない。

order deny,allow
deny from all
allow from morioka.iwate.ocn.ne.jp

# .htpasswdファイルに基づいてBASIC認証をかける。

AuthType Basic
AuthName "Member Only"
AuthUserFile path/to/.htpasswd
Require valid-user

# 404 Not Foundのエラーが出てしまったときに、独自に用意した404.htmlファイルを返す。

ErrorDocument 404 /404.html

# /test1/ へのアクセスを(内部的に)/test2/ に読み替える。
# (ブラウザのアドレスバーのURLは変わらない)

RewriteEngine on
RewriteRule /test1/ /test2/

# /test1/ へのアクセスを http://test.iwdd.net/test2/ にリダイレクトする。
# (ブラウザのアドレスバーのURLが変わる。いわゆる引っ越し。)

RewriteEngine on
RewriteRule /test1/ http://test.iwdd.net/test2/ [R]

# 携帯とそれ以外のアクセスを振り分ける

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} DoCoMo|UP.Browser|J-PHONE|Vodafone|SoftBank [NC]
RewriteRule !^mobile.html mobile.html [L]

# 携帯キャリアで振り分ける

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} DoCoMo [NC]
RewriteRule ^$ /docomo/ [L]
RewriteCond %{HTTP_USER_AGENT} vodafone [NC]
RewriteRule ^$ /sb/ [L]
RewriteCond %{HTTP_USER_AGENT} J-PHONE [NC]
RewriteRule ^$ /sb/ [L]
RewriteCond %{HTTP_USER_AGENT} SoftBank [NC]
RewriteRule ^$ /sb/ [L]
RewriteCond %{HTTP_USER_AGENT} Up.Browser [NC]
RewriteRule ^$ /ez/ [L]

最後に、Apache2.2のオススメとして mod_proxy_balancerを取り上げました。Apacheがロードバランサーになってくれます。前半でもちょっと話が出てきましたが、アクセスが集中するような場合は、1台でApacheとCGIを動かすと大変なので、フロントでmod_proxy_balancerでロードバランスさせておいて、裏の複数サーバー群でmod_perlとかを動かして処理しつつ、画像は別のURLから返すとかがスケールする構成ですが、Apacheで出来るようになりました。最近はRuby on Railsを使うときに導入しています。

時間がなかったので簡単な.htaccessについてはhtaccessエディタっていうのがあるよ!ということで〆たんだけど、やはりApacheを動かしてみないことには.htaccessも無いので、まずはApacheを動かしてhttpd.confを書いてみるべし!様々な事例は検索すれば出てきますが、 .htaccessを書いてもうまく動かない場合はログを見るんだけど、Apacheのエラーログをリアルタイムで見られないレンタルサーバーはつらいかも。

質問の時間も取ることができなかったので、今回のコマについての質問はTBかコメントかIRC(irc.iwdd.net:6669 #iwdd)にて。

最後に大切なこと

.htaccess を書いたら、最終行に改行を入れるのをお忘れ無く。

IWDD#28