iPhoneのメニューアイコンのような glossy.js

canvasタグで画像を劇的に変化させるエフェクト(NetzGesta.de)｜Web Designing 2008年8月

前回チラッと紹介しましたが、8月号のWeb Designingの特集、「使い方はあなた次第！未来形Ajax」はとても勉強になります。いろいろあるサンプルの中から、今回もcanvasタグ絡みのモノを１つ紹介してみます。
このブログでも以前、「JavaScriptで画像加工」という記事で紹介している「NetzGesta.de」にglossy.js というスクリプトがあるんですが、これを使えば、簡単に画像にiPhoneのメニューアイコンのようなエフェクトをかけることができます。

百聞は一見に如かず、サンプルです。

↑このサンプルはこちらからダウンロードできます。

ソースコードを見てもらえば分かると思いますが、html上の各画像に"glossy"というclassを追加するだけです。また角に丸みを持たせたい場合は、"glossy iradius25"などと追加します。※数値はお好みで試して下さい。
詳しい設定方法は、「NetzGesta.de」に書かれていますし、その他のエフェクトもたくさんあるので、是非参考にしてみて下さい。

canvas要素でデータからグラフ作成

多様なライブラリが用意されているHTML5.JP｜Web Designing 2008年8月

8月号のWeb Designingの特集、「使い方はあなた次第！未来形Ajax」でも触れられていますが、HTML 5の草案の仕様として自由にグラフィックスを描画できるcanvasタグが組み込まれており、現段階でもIEを除くモダンブラウザでは、ほぼ対応しているようである。
また、canvasタグを利用したAjaxもすでに誕生しており、IE環境でもcanvasタグの機能をエミュレートするライブラリがいくつかあるので、使ってみようという試みであります。

今回は「Ajaxハジメマシタ」でも取り上げられている「HTML5.JP」というサイトからグラフに関する３種類のライブラリの紹介してみます。
どれも数値を入れるだけで簡単にキレイなグラフを描画してくれます。簡単なモノだったら、わざわざグラフィックソフトを使って作成しなくても充分じゃないでしょうか？（※ただし、IEではエミュレートの関係で表示が少し異なります）

百聞は一見に如かず、サンプルです。

↑このサンプルはこちらからダウンロードできます。

ソースコードを見てもらえば分かると思いますが、３種類ともグラフのデータはhtml内のJavaScriptに書き込み、canvasタグにidを付けて、divで囲んでいます。詳しい設定等はWeb Designing 8月号を見ていただくか、「HTML5.JP」に詳しく記述されています。
特に「HTML5.JP」にはいろいろなサンプルのダウンロードもできるので、一度訪れてみるコトをオススメします。

小料理屋さんのWebサイト

（ちょっとバタバタしており時間が取れないので今回は近況報告です）

知り合いの方に頼まれ、ある小料理屋さんのWebサイトを立ち上げるコトになりました。
元々ある人に頼んでいたらしいのだが、いつまで経っても出来上がらないし、途中から連絡が取れなくなったとのコト。
…個人商店の方からは割と良く聞く話である。

経緯はさておき、
今回の案件は、ご夫婦ふたりで営んでいる予約制の小さな小料理屋さん。
築80年の古い家屋に大正ロマンを感じさせるような灯りや小物がたくさん。パソコンは不得手なので、予約受付は電話だけにしたい。ちょっと奥まった場所にありアクセスが悪いので分かりやすいようにしたい。
…という内容と条件。

載せる情報が比較的少ないので、デザイン的にはスッキリとまとめ、和風の中に洋風を採り入れたような大正ロマンを試みた（…つもりです）。
構成は営業内容、お部屋、お料理などを柱に、予約方法（受付電話番号）とアクセス地図が極力分かりやすくなるよう心掛けました。

あとは印刷時のデザイン。
IE6でも必要なモノが見切れるコトなく、背景やメニューなどの余分なモノを印刷しなくていいようにスタイルシートで制御しました。
…こういう細かいトコロまで考えて作られているサイトはまだまだ地方では少ないですね。一見立派に作ってあるサイトはいっぱいあるんですが、今回は特にユーザーの視点で都合の良いサイトになるように心掛けたつもりです。

公開は今月終わり頃になると思います。
…また詳しい話はその時にでも。

JavaScriptを使わずにGoogleマップを表示

Google Static Maps API｜web creators 2008年6月

なんだか急にバタバタし始め、なかなか時間が取れずに結構間が空いてしまいました。
早速ですが、時間もないので困った時のお手軽tipsの紹介です。
Googleマップは非常に便利なので、Webサイトで現地を紹介する時など僕もよく利用させてもらっています。
ただし、JavaScriptで構成されているため、携帯電話やJavaScript非対応の環境では表示することが出来ないのです。
しかし、そこは流石のGoogleで新しく｢Google Static Maps API｣というAPIを公開しました。（web creators 2008年6月号の「WEBデザイン TIPS&TRICKS」で紹介されています）
これを利用すればJavaScript非対応の環境でもGoogleマップを表示することが出来ます。（※JavaScriptを使っていないので動きませんよ！…念のため）

では、サンプルです。

まずはGoogleのAPIキーを取得しなければならないんですが、このブログを見ている人なら多分もう持ってますよね？ちなみに、(code.google.com/apis/maps/signup.html)から取得できます。

次に表示したい位置の緯度と経度が必要です。これは｢Geocoding｣という便利なサイトで住所を打ち込むと簡単に判ります。

後は下記のようなアドレスをブラウザに打ち込んでみて下さい。（例として金沢市役所の座標にしています）
http://maps.google.com/staticmap?center=36.561328,136.656208&zoom=14&size=512x512&maptype=mobile&markers=36.561328,136.656208,bluea&key=【ここにAPIキー】

各オプションはオフィシャルサイトに記述してありますが、基本的なモノは次になります。
----------
center：地図の中心になる経度と緯度
zoom：拡大率
size：地図の大きさ
maptype：地図の種類、roadmapかmobile
markers：マーカーの表示(緯度と経度、色、種類)
keys：APIキー
----------
※img要素のsrc属性にURLを指定すれば、画像として表示できます。
いろいろ試してみて下さい。

Flashで携帯コンテンツ

ケータイdeヒーロー度チェック｜Flash Lite 1.1

先日、知り合いの方からFlashを使って携帯電話用コンテンツは作れないかと連絡がありました。とりあえずウチの開発環境（Flash8）でもFlash Lite 1.1としてパブリッシュできるようなので、試しに作ってみたのが今回のサンプルです。
最初はクイズを作ろうと思っていましたが、Flash Lite 1.1ではActionScriptがFlash4相当のモノまでしか使えないので、かなり制約があり、簡単なスクリプトでもエラーが出てしまったり…（もうちょっと勉強しないとな）。
不本意ながら簡素化して、一種の診断チェックのようなモノを作ってみました。

そのサンプルがこちら。

※当たり前ですが、診断はお遊び（悪ふざけ）です。なんの信頼度もありませんので、ご理解してお遊び下さい。

↑このFlashデータ（htmlは含みません）をご希望の方は、お手数ですが、メールアドレスをご記入の上、この記事にコメントを付けてください。確認しだいお送りいたします。
また、下記のQRコードから携帯でURLにアクセスして遊ぶコトもできますので、興味がある方はお試し下さい。

続きを読む "Flashで携帯コンテンツ"