Grad3の背景色を変えられるようにしました

grad3_bgchange.jpg

2012年3月にリリースしたHTMLベースでつくられたWebデザインのためのWebアプリケーションであるGrad3 – Easy CSS3 gradient editor -(http://grad3.ecoloniq.jp/)ですが、色々と使ってくれてありがとう、を言いたいわけでもあるんだけど、こんな要望がありました。
  • 背景色を黒でわかりにくいので白にできるようにしてほしい
  • ベンダープリフィックスを追加するブラウザボタンを一括解除できるようにしてほしい
という声にお応えして、改善しました。
背景色の件はつまり、背景が黒いとつくりたいWebサイトの背景が白い場合に色の差が大きくて、プレビューしながらつくり込んでも参考にならないことがあると思い、これは私もちょっといかんな、と思っていました。
ある程度の決め打ちの背景色を用意しましたので、アナタのつくりたいWebサイトの背景色にあわせてGrad3を使って自然なCSS3のボタンをつくってください。
あともうひとつ、ベンダープリフィックスボタンですが、altキーを押しながらクリックしてみてください。
クリックされたベンダープリフィックス以外は解除になります。
Photoshopのレイヤーのaltクリックと同じ機能を採用しました。
今後はボタンサンプルを増やしたいと思います。
それではこれからもどうぞ、素敵なデザインを!

CSS Nite in OSAKA, Vol.32に出演しました(補足記事)

cnio32photo.jpg
撮影:岡田陽一さん(ふわっと)

8/18に大阪のリクルートエージェントさんの会議室で開催されたCSS Nite in OSAKAでちょっとデモをしました。

参加された方、どうも長時間お疲れさまでした。
HTML5やWeb標準技術に対するこれからの心づもりの話だったんですが、最後のデモはFlashからAIRアプリという手段もあるとアイデアも含めてデモを行いました。
File APIを使ってドラッグアンドドロップを実現することを前提にデザインを考えるのもいいですね。
位置情報は誤差があるにせよ、案件次第ではスマートフォンサイトから実践できます。
Firefox for Androidの最新版ならAndroid 2.xでも、ブラウザで写真が撮れます。
さらにAndroid 4.xでは標準ブラウザ(Chromeと「ブラウザ」両方)でもう写真が撮れますので数年後にはAndroid対応のWebサイトに撮影ボタンが付くかもしれませんね、場合によりますので全てというわけにはいきませんが。
まとめとして、
HTML5は本当にクロスプラットフォームでクロスブラウザを実現するにはもっと時間がかかるけど、スマートフォンなど幅広く標準ブラウザが実装している機能は使うことも検討したうえでデザイン設計を心がけるがいいですね、という内容がひとつ。
もうひとつ、Flashはもっと強力なレンダリングの可能性が高い開発環境なので、表示にパフォーマンスが求められる3Dゲームなどに活躍の場が広がるのと、ネイティブアプリ開発の期待も持てますので以下のようなことが言えると考えられます。

スマートフォンでの3DレンダリングにはFlash/AIRの選択肢も

penguin.JPG
もしもスマートフォンのブラウザ上で、プロダクトとなる3Dモデルをグリグリ回しながら見てもらうようなビューワーをつくるには最新のブラウザでもさすがに厳しい状況です。
そういった場合はネイティブアプリ化を提案するという手もあります。
参加された方にはスクリーンでしっかり見れなかったと思うので動画にしました。

Air for Android , 3DModel DEMO from Hideki Akiba on Vimeo.

このデモはFlashでつくったもので、3DソフトでモデリングされたペンギンをAway3Dというライブラリで読み込み、レンダリングをしています。
Away3D自体がGPUのパワーを使うStage3Dに対応しているので、非常に高速に描画処理されます。
実際フレームレートはほとんど落ちていません。
(ペンギンはこのサイトよりダウンロードしました。http://www.turbosquid.com/3d-models/rigged-penguin-3d-model/431413
「誰に対し何を提供するか」においては、どの技術を使うかは大して意味がなく、そのときそのときで一番適切な技術を使いましょう。
最近もFlashをDisると感じられた記事をどこかで見ましたが、私はどちらも大切な技術として向き合っていきたいと思います。