とてつもなくじめじめしています。
この時期を快適に乗り越える方法があればぜひ教えて頂きたいです。

さて、さらに話題になっているHTML5について
参考サイトが次々と公開されていますね。
今回はそんな参考サイトをまとめてみました。

HTML5 Showcase

HTML5 Showcase

米Appleが、HTML5、CSS3、JavaScriptなどWeb標準技術で構築されたWebサイトのショーケースページ を公開しています。ただし、保証された動作環境はSafariブラウザのみとなって います。iPhoneやiPadのSafariでも同様に動作するとのことで、「Flashなんて 必要ない！」というアピールですかね。

HTML5Rocks

HTML5Rocks

GoogleがHTML5に関する文書やリュートリアル、APIマニュアルなどをまとめたサイト。

HTML5 Gallery

HTML5 Gallery

HTML5で構築されたウェブサイトがまとめられています。

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQueryとHTML5のCanvasをつかって作るチャートやグラフ。

HTML5であそんでみたクエスト

HTML5であそんでみたクエスト

かわりダネwあのドラクエがHTML5に！

HTML5 を IE や Firefox 2 でも使えるようにする方法も要チェックですね。

hkです。
最近scala言語が注目を浴びていますが、自分も目下勉強中です。

scalaにはliftというフレームワークがありますが、liftアプリでtwitterのOAuth認証をしたいと思って色々と探すとどうやらdispatchというライブラリがあるようで、それを使うとTwitter/Oauth認証できそうなのでインストールしてみました。

liftはプロジェクト管理ツールであるmavenで操作できるので
liftプロジェクトのpom.xmlの要素のなかに以下を書き加えて、

    <dependency>
      <groupId>net.databinder</groupId>
      <artifactId>dispatch-json_2.7.7</artifactId>
      <version>0.7.2</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>net.databinder</groupId>
      <artifactId>dispatch-http-json_2.7.7</artifactId>
      <version>0.7.2</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>net.databinder</groupId>
      <artifactId>dispatch-oauth_2.7.7</artifactId>
      <version>0.7.2</version>
      <scope>compile</scope>
    </dependency>

次に

mvn package

を走らせるだけでライブラリのインストールは完了です。

試しに
http://d.hatena.ne.jp/kkos/20100402
の記事に載っているソースコードで試してみると正常にOAuth認証を行うことができました！

先日、とある案件でグラフをたくさん作る機会があり Google Chart API でバリバリとグラフを作っていました。夢にまで出るくらい触ってました。
ということで今日はせっかくなので覚えた Google Chart API のことを書いてみようと思います。

「グラフが作りたい！」
でも短納期だし、グラフの内訳も変動するかもしれない！ そんなときは Google Chart API が便利です。
画像として出力されますがパラメータを変更すればすぐに反映されます

例えばベーシックな円グラフだったらすぐに作れます。

円グラフ サンプル

円グラフ コード

‹img src="http://chart.apis.google.com/chart?cht=p
&chtt=iPhone 4 購買欲チェック!
&chs=580x250
&chd=t:64,24,11,1
&chco=0092B9,86AD00,F2B705,BC3603
&chl=欲しい！|迷っている|間に合っている|未回答
" /›

上記のようにIMGタグにパラメータをつけてあげるとPNGファイルとして出力されます。
それぞれ指定方法を挙げると

cht

グラフの種類を指定

chtt

グラフのタイトルを指定

chs

グラフのサイズを指定

chd

グラフの数値を指定

chco

グラフの色を指定

chl

グラフのラベルを指定

となっています。それぞれのプロパティを&で繋いであげればOKです。
日本語の扱いに関してはモダンブラウザなら問題ないのですがIE6の場合、URLをエンコードしてあげないとうまくラベルなどが表示されません。
なので上記のグラフの場合はchlの値を以下のようにURLエンコードしてあげればバッチリです。

chl=%E6%AC%B2%E3%81%97%E3%81%84%EF%BC%81%7C%E8%BF%B7%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%7C%E9%96%93%E3%81%AB%E5%90%88%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%7C%E6%9C%AA%E5%9B%9E%E7%AD%94

グラフの種類に関しては16種類も指定ができます。

• lc - 折れ線グラフ
• lxy - 折れ線グラフ
• bhs - 棒グラフ(横)
• bvs - 棒グラフ(縦)
• bhg - 棒グラフ(横)グループ化
• bvg - 棒グラフ(縦)グループ化
• p - 円グラフ
• p3 - 円グラフ3D
• v - ベン図
• s - 散布図
• ls - スパークライン
• r - レーダー(直線)
• rs - レーダー(曲線)
• t - 地図
• gom - Google-o-meter
• qr - QR コード

次はグループ化した棒グラフ（縦）を作ってみたいと思います。

棒グラフ サンプル

棒グラフ コード

‹img src="http://chart.apis.google.com/chart?cht=bvg
&chtt=iPhone 4 購買欲チェック!
&chxt=x,y
&chs=580x250
&chg=0,16.66,1,5
&chbh=18,1
&chco=0092B9,86AD00,F2B705,BC3603
&chm=N,000000,0,,10|N,000000,1,,10|N,000000,2,,10|N,000000,3,,10
&chds=0,60
&chd=t:32,42,55,54,44|28,26,18,15,23|36,23,23,15,25|4,10,5,15,8
&chxl=0:|10代|20代|30代|40代以上|全体|1:|0%|10%|20%|30%|40%|50%|60%
&chdl=欲しい!|欲しくない|迷っている|未回答
" /›

chxt

複数軸ラベルを指定（chxt=x,y,r,x）

chg

補助線を指定（chg=[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線]）

chbh

棒グラフの太さ・間隔を指定（chbh=[棒線の太さ],[棒線の間隔]）

chm

グラフの補助的な数値を表示

chds

データスケーリングを指定（chds=[最小値],[最大値]）

chxl

グラフのX軸・Y軸のラベルを指定

このように簡単なグラフ作成ならさくっと Google Chart API で出来ますね！

はまっちです。
メンバー画像を何にしようかと手持ちの画像を探ってみるもののピンとこず、
結局、御前崎の海鮮なぶら市場というところで撮った写真を加工してみました。
暑い中ギラギラ輝く謎のカツオが印象的でした...

他のエントリでも一部紹介がありましたが、
今回はSmartyの変数の修飾子について記述します。

Smartyの修飾子は変数を加工するためのもので、
変数名の後に『|』(パイプ)を付けることにより指定出来ます。

＜PHP＞

$smarty->assign("hoge","ほげ、HOGE、hoge。");

replace

文字列を置換する修飾子です。
修飾子の後に『:』(コロン)で引数を指定します。
第一引数は置き換える対象、第二引数は置き換え後の文字列になります。

＜テンプレート＞

{$hoge|replace:"hoge":"piyo"}
{$hoge|replace:"、":"！"}

＜表示＞

ほげ、HOGE、piyo。
ほげ！HOGE！hoge。

正規表現で置換する『regex_replace』という修飾子もあります。

date_format

日付の書式を変更してくれる修飾子です。
タイムスタンプ型の変数を渡しておけば、
PHP内で変換するよりも、後々の変更が容易です。

＜テンプレート＞

{$smarty.now}
{$smarty.now|date_format:"%Y/%m/%d %H:%M"}

＜表示＞

1276667171
2010/06/16 14:46

また、修飾子は複数組み合わせることもできます。
たとえば『date_format』では日本語の曜日を表示出来ませんが、
前述の修飾子『replace』と組み合わせれば、曜日を表示出来ます。

＜テンプレート＞

{$smarty.now|date_format:"%Y年%B%e日(%a)"|replace:"Sun":"日"|replace:"Mon":"月"|replace:"Tue":"火"|replace:"Wed":"水"|replace:"Thu":"木"|replace:"Fri":"金"|replace:"Sat":"土"}

＜表示＞

2010年6月16日(水)

拡張プラグイン

日付を出力する箇所がいくつもあった場合、
このままだとソースがごちゃごちゃしてしまう恐れがあります。
そんな時は独自の修飾子を拡張プラグインとして作成してしまうのも手です。

modifier.date_week_format.php

<?php
function smarty_modifier_date_week_format($date)
{
$sday = strtotime($date);
$res = date("w", $sday);
$day = array("日", "月", "火", "水", "木", "金", "土");
return date("Y年n月j日", $sday)."(".$day[$res].")";
}
?>

処理内容を記述したファイルを読み込ませることによって
修飾子を拡張することが出来ます。

＜PHP＞

$smarty->assign("hoge_date","2010/05/06");

＜テンプレート＞

{$hoge_date|date_week_format}
{$smarty.now|date_week_format}

＜表示＞

2010年5月6日(木)
1970年1月1日(木)

・・・あれ？2行目の表示がおかしいですね。
smarty_modifier_date_week_formatの1行目で
タイムスタンプをタイムスタンプに変換しようとしているからでしょうか。

＜テンプレート＞

{$smarty.now|date_format:"%Y%m%d%H%M"|date_week_format}

＜表示＞

2010年6月16日(水)

なんだかすっきりしませんが、
今回PHPでセットしている変数は日付の文字列、
$smarty.nowはタイムスタンプなので仕方がないのかもしれません。

$smarty.now|date_week_format でそのまま出力させるには、
PHP側からタイムスタンプを渡してやるか、
引数はタイムスタンプしか渡らないものと割り切って1行目を削除するか、
中で変換する処理を入れるといいと思います。

●拡張プラグイン作成はこちらのサイトを参考にさせていただきました。
http://mahata.net/mt/2007/07/smarty.html

その他にも、変数内のタグを表示しないようにする『strip_tags』、
指定の文字数以上を切り捨て、修飾する『truncate』など色々あります。

●変数の修飾子
http://www.smarty.net/manual/ja/language.modifiers.php

とくながです。

先日Adobe CS5が発表されて話題騒然ですね！