技術の最近のブログ記事

JavaScript勉強中・・・

(2010年6月 6日 23:51)

現場から

さて、今回「JavaScript」のご紹介をしたいと思います。

とはいうものの、私はそんなには詳しくはないのですが(笑

いきなりですが、複数の画像をページに載せたい時、レイアウトは様々だと思いますが、
あまりに画像を多く載せてしまうと、読み込みに時間がかかって、ページを開くのに時間がかかり、若干ストレスを感じるようになってしまいます。

そんな時利用してもいいかなというのが
「ボタンをクリックするだけで、表示している画像を切り替える」というものです。

よく私は中古車のサイトを覗きますが、そこでも車の状態写真を見るのに利用されていますね。

一応参考までにソースを。

<html>
<title>image Change1</title>
<body bgcolor="#fff8dc">
<script type="text/Javascript">

</script>
<hr />
<img name="targetimage" src="images/img1.gif" /><br />
<br />
下記をクリック<br />
   <image src="images/img1s.gif"
   onclick="changeimage ('images/img1.gif')" />
   <image src="images/img2s.gif"
   onclick="changeimage ('images/img2.gif')" />
   <image src="images/img3s.gif"
   onclick="changeimage ('images/img3.gif')" />
</body>
</html>

基本的なソースなので、これを応用することで幅が広がると思います。

参考までにJavaScrpitの勉強ができるサイトを↓

http://javascript.eweb-design.com/

まだ勉強中なので間違ってる部分もあるかもしれませんが、
今後チョコチョコ紹介出来ればと思います。

ロゴのデザイン

(2010年5月28日 23:23)

現場から

ロゴ

企業や個人サイトでもインパクトがあれば見入ってしまうものですよね。

気になるロゴを見るたびに「どうやって作っているんだろう？」と思ってしまうこともしばしば。

そんなときにこういったサイトが参考になります。

http://spyrestudios.com/30-excellent-logo-design-tutorials-and-walkthroughs/

様々なジャンル、よく見るものも多数ある中、それを再現するチュートリアルを紹介してくれています。

頭の中にイメージは固まっていてもなかなか表現できない時

こういったものを見ることで、いろいろな技術の情報を取り入れることができ、スキルアップを図れます。

考えに耽っている時、こういうサイトを覗いてみるのもいいと思います。

Photoshopの技を磨く。

(2010年1月12日 21:39)

現場から

画像にネオンの曲線や、光の効果を加えると写真がかなりかっこよくなります。
挑戦しようと思ってもなかなか難しいと思います。
ただ、本気でやりたいと思っている人は是非ここで勉強してみましょう。
英語のサイトですがわかりやすくチュートリアルで書いてあるので、やりながらCGデザイナー気分が味わえて
さらには全部達成すればかなりのスキルアップになるでしょう！おすすめです

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

Photoshop CS4のpsdアイコンをサムネイル化するツール

(2010年1月 7日 22:01)

現場から

いまや僕のWeb制作に欠かせない存在になってしまったPSDデータのサムネイル化

サムネイル化はWindowsのファイルアイコンの所をプレビュー化させちゃうという超便利なことです。

このツールのインスコ後にはエクスプローラーの再起動をタスクマネージャ等から行うか、いったんOSを再起動すると有効になります。

MysticThumbs

32bit版も用意されています。

ただ、この手のツールの利用はあくまでも自己責任でお願いします。

透明部分の描画もバッチリです。

MacではPSDデータがプレビュー表示されて便利なのになんでWindowsでは表示されないんだろうと

思った事がこのツールを探すきっかけになりました。

ＲＳＳ

(2009年10月11日 18:21)

現場から

インターネット上で情報を得る手段としてＲＳＳはますます重要度を増してきています。
データを一箇所に集約し、統一のインターフェイスで観覧できるということはとても便利です。

ＷＥＢブラウザを使用してニュースサイトを巡回していた頃と違い、今ではＲＳＳで
複数のページを一度にチェックを行える。さらに詳しく見たければ
配信元に直接アクセスすればいいだけ。

しかし、ＲＳＳの決定的な欠点は他のメッセージングシステムに比べ、配信のリアルタイム性が圧倒的に
欠けている点である。通常、ＲＳＳリーダは登録されているフィードを定期的にチェックして、更新されている場合にデータを取得する。典型的には1時間ごとに更新されているかどうかのチェックをおこなう。つまり、データが更新されていても、最悪で１時間は気づかない。メールやTwitter、メッセンジャーにはこういった決まりきった遅延はない。

しかし、この度ＷordPress.comで運営されている750万のブログにRSS Cloudのサポートを追加したと発表した。RSS Cloudはデータが更新されたことを効率よく通知するための仕組み。RSSリーダが対応していれば、WordPress.comはブログが更新されるとその旨をRSSリーダへ通知するようになる。リアルタイムにRSSの更新が可能になる仕組みだ。

RSSの更新を通知する方法はほかにもあり、また、現状でRSS CloudをサポートしたRSSリーダはほとんどない。しかしWordPress.comはRSS Cloudをサポートした。WordPress.comはほかの通知方式もサポートしていくとしており、対応が容易におこなえるRSS Cloudは最初に取り組みやすい方式だったと説明している。

エンドユーザーがどんどん増えてきているこの時代に使いやすく
機能的なインターフェイスを開発することは
益々重要になってきています。無駄を省き、必要な物を集める。
簡単なようで難しいです。

サモア島大地震に関する検索結果の中に悪質サイト

(2009年10月 1日 22:16)

現場から

株式会社セキュアブレインは2009年10月1日、同社の先端技術研究所が、インターネット上の脅威を調査したところ、サモア諸島付近で発生した、大地震に関する情報の検索結果に悪質な Web サイトが含まれていることを確認した、と発表した。

これらの悪質サイトは、実際には効力の無い「偽セキュリティソフト」を配布したり、マルウェア感染などの被害を引き起こすという。また、今後も複数の種類の悪質な Web サイトが出現する可能性があるとのこと。

セキュアブレインでは、検索エンジンで「SAMOA TSUNAMI」などに関連するキーワードを検索して、表示された結果にアクセスする際には、その Web サイトが安全かどうかを事前にチェックすることを推奨している。

「偽セキュリティソフト」を配布している Web サイト

「SAMOA TSUNAMI」で検索した結果に表示される
悪質な Web サイトの情報

大勢の人が苦しんでいるこの災害に対して、
便乗し、悪質な偽セキュリティソフトなどを感染させるという非常識極まりない話です。

インターネットはこんなことをするためにあるわけではないのに・・・

ショッピングカートJavaScript

(2009年8月17日 22:02)

現場から

たった20KBでショッピングカート機能を実装できるJavaScriptがでました。

SimpleCart.js
http://www.simplecartjs.com/

デモを使用してみた感じ、違和感も物足りなさも感じませんでした。
それなのに20KBですんでしまうとは中々の高性能だと思います。

商品の陳列や注文内容の変更・削除・数量変更などとても簡単にできます。
実際の決済にはPayPalかGoogle Checkoutを利用することになります。
まだ日本で使用するには言語の問題や決済方法などハードルは高いですが、ショッピングカート自体やっかいな機能だと思うのでこういったものはとても助かります。

新しいものをどんどん取り込んで利用できれば今よりもっと
効率的で魅力的なものがつくれそうです。

ホットスポット

(2009年8月 6日 16:06)

現場から

最近までDream Weaver上でホットスポットの設定が出来ることを知りませんでした・・・

今まではホットスポットはFireWorksのみなせる技かと思っていましたが。

実はかなり以前のDream Weaverから出来たらしいんです。

しかも実に簡単。

ホットスポットウィンドウを開いて、あとはイメージの上に領域を作るだけ。

領域はいつものごとく、長方形や楕円、多角形ツールを使って書くだけです。

いままでは、使いたくてもFireWorks上でJavaを自動生成させてHTML書き出しをして、

そんな具合でしたが、こんな簡単に出来たんですね。

ちなみにコードで書くとこんな感じです。

インライン要素の記述方法
<area shape="エリアの形" coords="座標" href="リンク先">
※SHAPE rect=四角形　circle=円形　poly=多角形

関係図はこんな感じです。
<area shape="rect" coords="左上x, 左上y, 右下x, 右下y" href="リンク先">
<area shape="circle" coords="中心x, 中心y, 半径" href="リンク先">
<area shape="poly" coords="Ax, Ay, Bx, By, Cx, Cy..." href="リンク先">

これで見ると、Java、発生してないんですね。

PNG8

(2009年8月 4日 18:14)

現場から

ＷＥＢページに画像を添付する際、JPEG・GIF・PNGどの画像フォーマットがどのような場面に向いているのかまとめてみました。

GIF - 基本的に256色のインデックス画像フォーマット。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるのも大きな特徴です。

JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている。同じ場所に何度も上書きを続けていくと序所に画像が劣化していくので注意が必要です。

PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現でき、24ビットイメージも表現できる。但し、一部ブラウザではPNGの背景透過を表現できない。

WEBページに効果的にフォーマットを適用していくことによって、若干の表示速度向上にもつながります。
最近ではYahoo!ニュースで使用されている画像をPNG8にし、最適化を図ったりもしているようです。

全てのユーザーが同じ回線速度の環境で見るわけではないので、そういった部分も考えなければいけなくなってきました。

ユーザビリティ-チェック

(2009年8月 2日 18:56)

現場から

前回に引き続きもう少しユーザビリティについて。

実際にそのページのユーザビリティをチェックする方法について考えて見ます。

■一般ユーザーに直接チェックしてもらう方法
ユーザビリティをチェックするに当たって一番直線的なアプローチで、実際のユーザーに被験者を務めてもらうユーザーテストという方法が存在し、その実験結果をもとに改善を施すことがあります。

ユーザーテストでは、ターゲットとなるユーザーに、実際に Web サイトを利用してもらい、その動きなどから一般のユーザーの動向を検証し

この手法は、ターゲットの選定や被験者の確保、テストの設計、結果の解析など、実施に際し、一定のノウハウが必要となります。

また、場合によっては、アイトラッキングという視線の動きを計測する高価な機器を用いたりすることから、一般的には敷居が高いイメージがあります。

そのため、ユーザビリティを向上させたいサイト運営者が全てそのようなユーザーテストを実施するのは、コストや効率性の面からも難しいといった実情もあります。

■ヒューリスティック評価によるチェック方法
ヒューリスティックとは、経験則という意味で、ユーザビリティの専門家がユーザーインターフェイスを評価し、ユーザビリティ上の問題を検証する手法をヒューリスティック評価と呼びます。

この手法では、評価に必要なガイドラインをあらかじめ用意して、それに基づいて専門家がひとつひとつ検証するという手順を踏みます。

ユーザーテストに比べ、短期間で効率よく、つまりコストも抑えながら実施できるのがメリットと言われています。

メインとなる大まかな項目は以下

【ナビゲーション】
・サイト全体と閲覧中のページとの関係がわかるようになっているか
・いつでも閲覧中のページの上位階層に移動できるようになっているか

【リンク】
・リンク先が HTML でない場合は事前にわかるようになっているか
・同一サイト内へのリンクは同じウインドウに表示しているか

【フォーム】
・各入力項目には入力する内容や条件などが明確に示されているか
・エラー画面が用意され、わかりやすい状況説明と建設的な指示が提示されているか

【構造及び表示スタイル】
・ページタイトルは、＜TITLE＞タグにより、各ページ固有のものがつけられているか
・見出しに＜H＞タグを使っているか

【非テキスト情報】
・画像ファイルに Alt タグが設定されているか
・Flash、PDF が使用できない場合、代替情報により内容を把握できるか

等があげられます。

制作をしていく上で参考にしてみてはいかがでしょうか。

ユーザビリティ-TXT

(2009年8月 1日 15:30)

現場から

日常で様々なWEBページをご覧になる方は沢山いるとおもいます。
その中で、ページの内容が読みにくいページやほしい情報に中々たどり着けないことはありませんか？

最近のWEBページは動的な要素が増えてきましたが、今でも情報の中心となるものは文章です。
WEBページを見やすくするためには文章を見やすく、効果的に使用することが必要になってきます。

■最適な文字サイズを考える
Web ページにおける文章の読みやすさを考える上で、文字の大きさは最も基本的なポイントでありながらも悩ましい問題です。

WEB制作会社ならクライアント側と文字のサイズで論争になることも多々あるかと思います。

一般的に、モニタ上で文字を読むのが苦手な高齢な方ほど、視認性が高い大きな文字サイズを好む傾向にあります。実際、老若男女、様々なユーザが利用する自治体のサイトなどは、文字サイズが大きいサイトが多いです。

一方、文字サイズが大きいと、一画面に表示できる情報量は少なくなりますから、使い勝手が悪いと反対する方もいるわけです。

ユーザビリティの考え方に基づくと、どちらの要望も理にかなっており、そえゆえ悩ましい、まさに究極の選択ともなりえる問題なのです。

■文字サイズの不満を解消する
もともと Web ブラウザには、文字サイズを拡大・縮小する機能が備わっています。インターネット・エクスプローラーなどは、文字だけではなく画像も含めたページ自体を拡大する機能も備わっており、本来、その解決はユーザーの操作に委ねられるべきものなのかもしれません。

しかしながら、必ずしもパソコンの操作に長けた人ばかりがサイトに訪れるわけではないため、ブラウザの機能を知らないユーザーにとっても、わかりやすく、簡単な方法で文字サイズを好みに設定できる必要性があります。

解決の手段として、最近、多くのサイトで Web サイト自体に文字サイズの拡大・縮小機能を付与するという機能が導入されています。

実際、Web サイトを巡回していると、ページの右上に「文字サイズ：小・中・大」といったボタンが並んでいることがよくあり、ユーザビリティの施策としての認知度も高いものです。

文字サイズの拡大・縮小機能は、JavaScript とスタイルシートを組み合わせることで、比較的簡単に導入できる機能ですので、一度導入を検討してみてはいかがでしょうか。

いくら凝ったデザインや魅力的なコンテンツを用意したところで、読ませたい文章に目がいかないようでは、命取りとなります。まずは、文字サイズという身近な例からユーザビリティを考えていただければと思います。

ちょっとしたPhotoshop講座（その2）

(2009年7月31日 21:02)

現場から

皆さんこんにちは。

今日もPhotoshopの時間がやってきました。
※このシリーズはCS3でのご説明になっておりますのでご注意ください。

2回目の今日は「雲模様1」フィルタの使い勝手についてです。

「フィルタ」メニュー→「描画」の中にある「雲模様1」です。

Photoshop上で、さりげなく存在しているフィルタ。

あまり使われないことも多いですが、ちょっとした画像やグラフィックを作る時に、意外と活躍するのがこの「雲模様1」なのです。

今日は少しその例を挙げてみます。

例1　デジタル感に

ちょっとデジタルっぽいイメージの作り方。
※すべての例で描画色：黒　背景色：白　です。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ピクセレート」→「モザイク」

③フィルタメニュー「表現手法」→「輪郭検出」

④イメージメニュー「色調の補正」→「階調の反転」

例2　ズーム・スピード感に

ズームというか、少しスピードっぽいイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ぼかし」→「ぼかし（放射状）」

例3　液体感に

リキッド・液体っぽい感じのイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「アーティスティック」→「ラップ」

はい、どうでしょうか。
ここでは簡単なものをご紹介していますが、雲模様1をベースにしてフィルタを組み合わせると、意外と簡単にいろんなイメージが作れますね。

あとは作る人の腕と工夫しだいで、より良いものができるかと思います。

雲模様1でどこまでやれるか、チャレンジしてみてはいかがでしょうか。

PEARのインストール方法

(2009年7月29日 21:19)

現場から

最近使う用途があった「PEAR」のインストールについて、忘備録としてご紹介します。

PEAR（ペアと発音）は簡単に説明するとPHPのライブラリ集です。
いろいろな拡張モジュール、アプリケーションなどが登録されていて、ネットワーク経由でそれらを取得・利用することができます。

ここでは最も簡単（だと思われる）go-pearとFTPを利用したインストール方法をご紹介します。
（※ちなにみここでのご説明はロリポップ！でのインストール例です。ご使用のサーバによっては別途設定が必要な場合もあるかと思います。）

大まかにはサーバ内にgo-pearをアップロード、ブラウザからアクセスしてインストール、といった流れです。
あらかじめサーバ内にgo-pear用とインストール用のフォルダを適宜な名前で2つ用意しておくと良いかも知れません。

※例として、
go-pear用→go_pear
インストール用→in_pear

手順1　go-pearを準備、アップロード

http://pear.php.net/go-pear
このURLを開き、表示されたスクリプトをgo-pear.phpと名前を付けてローカルに保存してください。
保存したものをFTPソフトなどでサーバへアップロードします。
ブラウザからアクセスできるディレクトリならOKです。
go-pear用のフォルダをご用意した方はそちらに。
（ここではgo-pearフォルダ）

手順2　go-pear.phpへアクセスしてインストール

先ほどアップしたgo-pear.phpへブラウザからアクセスしてください。
すると以下のような画面になりますので、「Next≫」をクリック。

次に設定の画面へ移りますので、ここで各種設定を行います。

①にはサーバのフルパスと、PEARをインストールするディレクトリを入力します。
「/home/sites/lolipop.jp/users/lolipop.jp-dp********/web/in_pear」（ここではin_pearフォルダ）といった具合に入力。

②にはPHPのパスを入力します。
ロリポップ！の場合は「/usr/local/bin/php」です。

③このチェック欄がある場合はチェック。
go-pearのバージョンによっては無い場合もあります。

以上を入力したら、下にある「Install」ボタンをクリック。
すると英語のログがずら～っと流れ、エラーがなければ、
「Installation Completed !」と表示され、インストールが完了します。

手順3　使いたいパッケージをインストール
イストールが完了したら、そのまま画面を進めると管理ページに入ります。
一度画面を閉じてしまった方はpearをインストールしたディレクトリのindex.phpへアクセスしてください。

パッケージ名が判っている場合は画面下の「Quick-install a package」へ入力し、「Install」をクリックすれば自動でインストールしてくれます。

パッケージ名が正確に判らない場合などは画面左の「Package Search」から検索してください。

以上で終了です。
作業が終わったら、最初にアップしたgo-pear.phpを念のため削除しておくと良いでしょう。
また、管理ページにはパスワードをかけるか、一時的に削除しておきましょう。

Web検定

(2009年7月24日 22:22)

現場から

以前から存在は知ってたけど、実際どこまで効力を発揮するんだろうといつも思う。

気になったので、Official Siteにお邪魔し、『資格の目的と構成』を一読してみた。

Web検定は、皆さんの仕事におけるコミュニケーションを円滑にすることにより、効率的な商取引を促すこと目的としています。社団法人全日本能率連盟登録資格として、5つの認定資格で構成されます。

とある。
その5つの構成がこちら。

・webリテラシー
・webデザイン
・webディレクション
・webプロデュース
・webプログラミング

あるに越したことは、ないと思うけど、実際大きな企業さんとかは選考基準とかに
響くのだろうか？

資格があってポートレートの貧弱な人と、資格がなくてもポートレートが充実してる人。

前者は前者なりに、しっかりと資格という形で勉強してきた過程を示し、後者は後者で実力主義のweb業界に沿っているとも思う。

ちなみにブログパーツにある練習問題では10問中4問しか正解できず、不合格な結果に。

Opera10 Beta2

(2009年7月22日 20:28)

現場から

全国のOperaユーザーの皆さん、もうOpera10-Beta2は試しましたか？

新たに追加された機能として、

・Opera Turbo
　圧縮技術によってブラウジングのスピードアップ

・新しいタブ機能
　サイズ変更可能なタブとサムネイル表示など

・スピードダイアルのカスタマイズ
　多くのユーザーから要望の多かったカスタマイズ機能

・統合されたweb機能
　webメールサービスと同様の機能を搭載

・リサイズ可能な検索フィールド
　文字通りリサイズ可能なフィールドを搭載

・レンダリングエンジンの高速化
　Presto 2.2によってGmailやFacebookなどのリソースを多用しているページで効果大

などなど多数です。

さらに今回はOpera10の新機能として、「ブラウザにサーバ機能を持たせる」というものが発表されています。

ＯＳの種類を問わず、クライアント同士で相互接続ができるほか、専用アプリケーションによってブラウザの新次元体験が可能らしいです。
どんなものになるのか、早く体験したいですね。

まだまだシェアの伸びが緩やかなブラウザですが、個人的に好きです。
さらなる発展が楽しみですね。

CSS Sprite

(2009年7月 8日 17:08)

現場から

CSSファンの皆さん、こんにちは。
すでにご存じの方も多いかと思いますが、今回は「CSS Sprite」についてです。

"CSS Sprite"
この手法は、サイト内で使用するイメージを一つのマスター画像として作成し、
CSSにて随時マスター画像から切り取り（実際は切り取りではないかも）ページ内にイメージを読み込むという手法。

恩恵としては、
通常通りにイメージを配置するよりデータが軽くなり、さらにリクエスト数が減ることによって、
結果としてサイト表示の体感速度が飛躍的に向上するというもの。
（制作側としてはスライス時間短縮の恩恵があるかも...）

GoogleやYoutubeのプレイヤーなどがこの手法で有名です。

例として、

≪通常のイメージ配置方法≫

XHTMLで、

<div id="head">
<img src="/img/logo.png" /></a>
</div>

またはCSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
}

などと記述しますが、

≪CSS Spriteでののイメージ配置方法≫

CSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
    background-position: 0 -34px; /* マスター画像のうち，どの場所の画像を出すのか座標 x軸，y軸の順に指定する*/
}

XHTMLで、

<div id="head"></div>

上記でdivの背景画像としてアッサリと表示完了です。

表示速度の改善をお求めの方など、試してみてはいかがでしょう？

...ただしセオリーどおりIE6の透過pngにはくれぐれもご注意を。

WiMAX

(2009年7月 1日 20:27)

現場から

ついに始まったようです。
下り最大40Mbpsの高速無線インターネット。
いつでもどこでもADSL並の速度でネットサーフィンが可能なサービス「WiMAX」。
サービス提供範囲はまだ主要都市部だけのようですが、人口カバー率90％に向けて現在拡大中とのこと。
海外のようにホットスポットの少ない日本では現在、Wi-Fi圏外だとイーモバイルやPHSなどの7.2Mbpsデータ通信が頼りでしたが、これからはWiMAXのような高速サービスにシフトしていきそうです。

パソコンメーカー各社もワイマックス通信端末を内蔵したノートＰＣを投入するらしいです。
富士通は12.1型「FMV-BIBLO LOOX R/D70」をすでに発売しており、
東芝は12.1型「ダイナブック　SS RX2/WAJ」、パナソニックも14.1型「レッツノートF8」を、それぞれ７月末に発売する予定だとか。

その一方、イーモバイルも8月上旬に高速データ通信技術「HSPA+」を使った国内初のサービスを開始するらしく、
PHS大手ウィルコムも10月に次世代PHS「XGP」の有料サービスを始める計画で、3陣営とも受信速度はほぼ同じ...らしいです。
3巴の激しい戦いが予想されそうですが、ユーザにとってサービスの向上は望ましいところ。

もっとも、Wi-Fi可能なエリアが日本にももっとたくさんあれば済む気もしますが、
日本のインターネット、どう進化するのでしょうか。

CSS3 続報

(2009年6月22日 19:02)

現場から

CSSファンの皆さんこんにちは。
先日CSS3の概要を少しお伝えしましたが、
今日はその続きです。

以下に先日よりもう少し詳しい内容をお伝えします。

1. セレクタ (CSS3では強力なセレクタ指定ができるため、HTMLから不要なIDやクラス指定を削除できるようになる)

2. RGBAおよび透過 (RGBA: Red Green Blue Alpha指定で透過を実現できる。ただしWebkitベースブラウザ、Firefox 3+、Opera 9.5+でしかサポートされていない)

3. マルチカラムレイアウト (CSS3セレクタを使えば複数のdivを使うことなくマルチカラムレイアウトを実現できる。サポートしているのはSafari 3+とFirefox 1.5+)

4. マルチバックグラウンド (CSS3では複数のプロパティをレイヤとして重ね合わせて適用させることができる。SafariとKonquerorしかサポートしていないためあまり使われていないプロパティだが、デザイナに要求される作業の軽減やHTML要素の削減につながる)

5. ワードラップ (ワードラップ機能を活用する。IE、Safari、Firefox 3.5+でサポート)

6. テキストシャドー (CSS2からあるがあまり使われていない機能だが、文字に奥行きをあたえる機能として効果的。WebkitベースのブラウザとOpera 9.5+、Firefox 3.5+がサポート。IEは未対応)

7. @font-face属性 (これもまだまだ使われていない機能。フォンとのライセンス問題にも一因がありそう。Safari 3.1+、IEがサポート。Opera 10とFirefox 3.5でサポートされる見通し)

8. ボーダー角丸み (背景画像を使わなくとも四隅をそのまま四角ではなく丸みを持たせることができる。OperaとIEではサポートされていない。WebkitとGeckoベースのブラウザはサポートしている)

9. ボーダーイメージ (ボーダーに画像を指定できる。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされるかどうかは不透明)

10. ボックスシャドー (要素に影を追加する。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされる見通し)

11. ボックスサイジング (縦横のサイズ計算をどうおこなうのかを明示的に指定する。IE8、Opera、Gecko、Webkitでサポート)

12. メディアクエリ (デバイスの能力に合わせて適用するデザインを変更する。WebkitベースブラウザとOperaがサポートしている。Firefox 3.5で搭載が予定されているが、IEは対応のめどもよくわからない)

13. スピーチ (スピーチスタイルを指定する。ただしWindows XP/2000で動作するOperaだけがサポートしている)

ズラッと並べてしまいましたが、現在はこんなところみたいで。
本格実装はいつになるのか！？
引き続きお楽しみ。

気になる方はこちらなどをご参考に。

・・・やはりIEはツラいのか？？？

オープンソースCMS

(2009年6月18日 22:23)

現場から

今ではかなり幅を利かせている代表的なオープンソースCMS達です。

個人的に触ったことがあるのは、OpenPNE,Word Press,Drupal,Joomla!あたりでしょうか。

XOOPSやEC-CUBEあたりも触ってみたいですが、まだ機会が･･･

CMSと言っても、それぞれの用途に特化しているものがほとんどのようで。
どのようなサイトを作るのか、良く検討したうえで、ウェブサイトにあった最適のCMSを選びましょう。

個人的にはやっぱりWordPressが好きです。

Yahoo! JAPAN インターネットクリエイティブアワード2009

(2009年6月 5日 22:26)

現場から

2009年6月5日、ヤフーは今年も「Yahoo! JAPAN インターネットクリエイティブアワード2009」を開催することを発表しました。

「Yahoo! JAPAN インターネットクリエイティブアワード」は、Web 上で革新的なクリエイティブ制作を行うクリエイターと、新しいインターネット広告の可能性を開拓した広告活動を顕彰することで、インターネットと広告のさらなる発展を目的に開催するもの。聞いているだけでワクワクします。

8月1日～8月17日までの期間中、一般の人が制作した作品を募る「一般の部」と、企業のプロモーションのために制作した作品を募る「企業の部」のそれぞれにおいて、バナー部門とウェブコンテンツ部門から作品を募集する。その後、審査員によるノミネート選考、サイト上でのノミネート発表、特別審査員も加わる審査員による最終審査会を経て、11月に贈賞式を行う予定です。