HTML5でできるカメラアプリでサーバアップまでやってみる

keyvisual_30.jpeg

来る5/4(金曜)の19時から、ほんっと久しぶりにCSS Nite in OSAKAでお話します。

内容は「HTML5でできるカメラアプリを実際に体験しよう」です。
以前、たった1回のハッカソンでつくったHTML5でつくったOperaブラウザのカメラアプリの記事を書いたんですが…
実は撮影した写真をサーバにアップするというところまでやってみようと思います。
軽く動画を撮ってみました、これをベースに将来できることを考えたいと思います。

これは自作の簡単なテストアプリですが、HTML+CSS+JavaScriptで写真を撮影し、PHPに画像を送信しています。
これをもとに、HTMLベースで将来つくれる動画や音声を扱うWebアプリはどこまで進化して、僕らはどこまでその仕事に関われるんだろう?というテーマに突っ込んで触れていきたいと思います。
WebRTCという仕様があります。
簡単に言うとちょっと語弊があるけど、将来は映像チャットなどをブラウザとHTMLベースでやってしまおうという仕様で、デバイスのカメラやマイクにブラウザがアクセスしてJavaScriptで操作するものです。
スマートフォンの標準ブラウザは、まだこの仕様をサポートしていません。
しかしAndroid版のOpera Mobileとして公開されているブラウザが、この未来の規格を一部実装しています。
Androidをお持ちの方は、当日までに以下のリンクを実機でタップして、本体にダウンロード&インストールしてご来場ください、みなさんで楽しんでみましょう。
( ↓ Androidでアクセス、ダウンロードがはじまります ↓ )
あまりプログラミングよりの話はしませんが、Webディレクターさんやデザイナーさん、フロントエンドの方も是非おこしください!よろしくお願いします。

ABC2012 Springに登壇します

abc2012_demo.jpg
↑こんなデモをやろうとおもって練習中…
国内最大規模のAndroidの祭典「Android Bazaar and Conference 2012 Spring」に登壇させていただくことになりました。

http://www.android-group.jp/conference/abc2012s/

場所は東京大学!本郷キャンパスです。
そんなとこに入れるなんて一生ないだろうと思ってた…^^
僕のテーマは、最近デザインワークでよく考えさせられる「コーポレートアイデンティティ」というか「ブランディング」に大事なロゴについて。
とくにWebデザイナーがあんまり意識しにくい作り方の部分を実演させてもらおうかな?と。
論理的な話ではなく、実際どういうツールを使って作っているの?
というテーマで、実演をします!!
使うツールはデザイナーによって異なります。
僕は今回、デザインテイストに応じて、Illustratorその他、ほかにLightwaveというグラフックツールにて紹介をさせてもらおうと考えています。
講演時間は13時。C会場(工学部新2号館 241教室)という場所です。
タイムテーブル
会場地図
参加費無料とのことらしいです、まだ予定が空いている方はぜひどうぞ。

CSS3ジェネレータ「Grad3」を3.24に公開

grad3.png

(画像は開発中のものです)
去年の1月あたりに、CSS3のグラデーションを生成するサービス「Grad2」を作ったんですが、色々考えて後継バージョンをリリースすることにしました。
2012年3月24日に「Grad3」をリリースします。
主な追加機能としては、
  • 円形グラデーション
  • サンプルボタンを色相で検索できる新しいユーザインターフェイス
  • アイコンセットやbackground-imageパターンを商用利用可で提供
  • グラデーションだけではなくfont-sizeやcolorなどのプロパティのコードも出力
といったものです。
基本的ポリシーとしては「低機能で使いやすい」を考えてます。
世の中にはもっと高機能なCSS3ジェネレータもあるけど、高機能がゆえにちょっと使いにくい、と思える部分もあって、
自分で使ってみて「こういうの欲しい」というものにしました。
基本的にはGrad2の縦グラデーションしか出力できなかったのにちょっと毛が生えたぐらいで、
「低機能で使いやすい」をそのままコンセプトにしてます。
Fireworksでは「Adobe Fireworks CSS3 Mobile Pack」と言われるものがあるそうですが、
僕らPhotoshopユーザは何か別のツールで作ってたりするんですね、少なくとも僕の場合は。
そんな理由もあってPhotoshopユーザは特に、もし気に入っていただけたらぜひ使ってください。
ちなみに今回のロゴではカメレオンで作ってみました、もちろん僕薫製の3Dモデルでこしらえてます。

Grad3のロゴ

リリースしたらまたお知らせしますね、よろしくお願いします。