52FrameworkはHTML/JavaScript/CSS製のオープンソース・ソフトウェア。これまでのWebデザインが今後、大きく変わっていく可能性を秘めているのがHTML5やCSS3だ。まだ実験段階というイメージが強いが、GoogleやYoutubeをはじめとする大手サイトでも取り入れられ始めている。
Safari4での表示
最大シェアを持つIEの対応がいまいちなため、積極的に取り入れていくのは難しいと感じているかも知れない。しかし時代は進んでいる。ついにHTML5/CSS3をターゲットにしたデザインフレームワークが登場した。それが52frameworkだ。
Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。
オンラインでデザイン修正
そこでFirefoxであればFirebugを使ってその場でデザインを変更してみて確かめることもできる。だがブラウザが限定される。ブラウザの壁を乗り越え、オンラインでCSSの修正を行えるのがBrosho Pluginだ。
MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。
こんな感じのデザインも容易に
Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。
JuicerはRuby製のオープンソース・ソフトウェア。jQueryやPrototype.jsなどJavaScriptでリッチなインタフェース、操作を可能にするライブラリは多い。特に本体は軽量に、多彩なプラグインが提供されるjQueryは人気が高い。
ヘルプ
だが多数のプラグインを使うとスクリプトタグがたくさん並び、コネクション数が増えることになってしまう。そこで使ってみたいのがJuicerだ。Juicerは複数のJavaScript/CSSファイルを結合したり、サイズを縮小してくれるライブラリだ。
phpFlairはPHP製Webベースのオープンソース・ソフトウェア。jQueryなどのJavaScriptフレームワークやCSSフレームワークを用いていると、ついつい一度のアクセスで多数のコネクションが張られるようになる。これではサーバの負荷はもちろんクライアントでも表示が遅くなってしまう。
利用するサンプル（公式サイトより）
そこで考えたいのがJavaScript/CSSファイルをそれぞれ結合して一度のアクセスで済ませてしまう方法だ。手作業でもできるが、メンテナンスを考えると自動処理の方が便利そうだ。phpFlairを使えばそれを簡単に実現できる。
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。
設定方法
JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。
CSSEmbedはJava製のオープンソース・ソフトウェア。CSSを使ったWebサイトデザインで、HTML中には画像のパスを出さずCSSで定義するケースがある。これによりCSSで制御できるデザインの範囲が大幅に広がるのだが、さらに一歩進めてCSS中に画像データを埋め込んでしまう手法がある。
元のCSS
それはdata URIを使った方法なのだが、うまく使えばアイコンに対するコネクション数を減らしてサーバの負荷を低減させることも期待できる。だがdata URIを作成するためには画像をテキスト（Base64）化する必要がある。手作業ではあまりに面倒なのでCSSEmbedを使ってみよう。
Sexy ButtonsはJavaScript/CSS製のオープンソース・ソフトウェア。Webサイトのユーザビリティを向上する上で考えたいのがアイコンの使い方だ。素っ気ない文字だけの表示に比べて表現力が高くなり、ユーザビリティも大幅に向上する。
アイコン付きの分かりやすいボタン
Webサイトにおいて重要なのは最後に実行されるボタンによるアクションだ。そこを分かりやすくすればより多くのレスポンスを得られるようになるはずだ。そこで役立つのがSexy Buttonsだ。画像でボタンを作るよりも簡単にアイコン付きボタンが実現できる。
emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。
動作サンプル
最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。
Webapp.netはiPhone/iPod Touch向けのオープンソース・ソフトウェア。iPhone/iPod Touchはモバイルデバイスなので画面の大きさに制限がある。そのためPC向けのWebサイトを表示はできるが、できれば最適化されたWebサイトを提供したい。専用のインタフェースを提供すれば、ユーザ体験がぐっと向上するはずだ。
iPhone向けサイトを構築する際に
そんなiPhone/iPod Touch向けのWebサイトを構築するのに使えるのがWebapp.netだ。Webapp.netはHTML/JavaScript/CSSで提供されており、iPhone/iPod Touchに対して最適化された、リッチなインタフェースを提供してくれる。
|
MOONGIFT
|
Open Service
|
|
Rails 2.0
|
Resident on Net
|
|
iPhone最適化
|
リーンソフトウェア
|
|
MarketPedia
|
Producing Web
|
|
Cool Coding
|
