Safari for iOS 6で写真撮影が可能に、将来の「スマホ対応デザイン」について思う

2012-09-23 23.57.29.jpg

iOS6がリリースとなり、Safariも内部的に色々なAPIを実装しました。

私は2012年5月のCSS Nite in OSAKA, Vol.30をはじめ、色々なセミナーにてブラウザから直接写真を撮影できて、そのままサーバに送信するデモを行ってきて、サービスに貢献できそうなアイデアなどもお話する機会をいただきました。
当時はAndroid 3から4のみが標準ブラウザがサポートしていました。(Android 2.xはFirefoxがサポート)
この仕様はHTMLのinput要素でカメラにアクセスすることが可能なわけですが、意外と早くiOSの標準ブラウザ、Safariにもサポートされたのは正直ちょっと驚いています。
またひとつWebアプリがネイティブアプリに近づく可能性を感じます。
シンタックスは非常にシンプルで、
<input type=file accept=”image/*”>
のように書きます。
実際のHTMLは以下の通りに書いてテストしてみました。
JavaScriptなどは一切使っていません。
<body>
<form action=”post.php” enctype=”multipart/form-data” method=”post”>
<input type=”file” name=”photo” accept=”image/*; capture=camera”><br>
<input type=”submit” value=”送信確認”>
</form>
</body>
これでpost.phpに写真が送られるので、簡単なPHPを書いてみます。
<?php
$data = $_FILES[“photo”];
move_uploaded_file( $data[“tmp_name”], “img/”.date(U).$data[“name”] );
echo(“<img src='”.”img/”.date(U).$data[“name”].”‘ alt=”>”);
?>
これだけで、写真投稿サイトが完成です。(というのは言い過ぎです、エラーやセキュリティチェックなどをしましょう)
しかも対応ブラウザがiOS6とAndroid3〜とだんだん増えてきています。
これだけのコードでiPhone4Sで行ったデモを動画にしました。

iOS6 Safari MediaCaputure API from Hideki Akiba on Vimeo.

サービスへの可能性とWeb企画制作の将来

いままでこういったスマートフォンで写真を撮影するという手段はネイティブアプリに委ねられていました。
しかし意外と早くiOS6が対応することで、案件ベースでもWebアプリへの実用化が早まりそうです。
例えば、もしも期間限定のWebによる写真投稿型キャンペーンイベントがあるとしたら、非常にタイムリーな開発期間を求められることが想定されるとしましょう。
そのためにわざわざリジェクト覚悟でネイティブアプリを開発することが現実的でしょうか?
むしろ納期の事情、プロモーション期間の都合などでスピード開発が求められる所で言えばWebアプリのほうがこのようなケースは理にかなっています。
大げさと考える人がいるかもしれませんが、私達のような経験のあるユーザではなく、コンシュマーユーザの立場を考えるとわかります。
操作を極力シンプルにし目的の行動に導線を引くには、ホーム画面に戻らせてカメラアプリを起動させて撮影させ、アルバムから写真を選ばせ、送信ボタンを押させるより、場合によってはWebサイトに撮影ボタンが付いていたほうが操作に慣れていないユーザは助かるわけです。
こうなると、デバイスの特性を活かすという意味では、将来の「スマホ対応サイト」の考え方は現在の幅広い一般の考え方と多少変わってくると私は考えています。
今までのシステム開発、ソフトウェア開発と比べると、Webアプリの本当の利点のひとつとして「小機能アプリ」を開発しやすくなる期待が持てます。
多くのWebデザイナーを含め活動のフィールドが広がるはずなんです。
これを成功させるには技術(エンジニアやデザイナー)とサービス、マーケティングの専門家が同じテーブルでアイデアを出し合うことが数年先のWeb制作のトレンドになることは間違いないでしょう。というよりむしろ今からそれを模索する必要があると考えています。
このあたりのWeb制作に関わる担当者レベルでのコミュニケーションについて色々問題が多いと感じている部分についてはまた別の記事として書いていきたいと思います。
少なくとも、コンテンツに重きを置いた上でのWebのサービスとテクノロジーとの関わり合いを、私達デザイナーとしても避けて通れなくなる時代は、ますます近づいてきたのではないかと感じてきます。
facebookscreenshot.png
FacebookのiOSアプリとSafariの画面、現在Safariの方では写真投稿が不可能だが将来のスマートフォン対応サイトではこの問題も解決されるだろう

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ると感じられた記事をどこかで見ましたが、私はどちらも大切な技術として向き合っていきたいと思います。

HTML5でできるカメラアプリ・予習(2)-撮影から画像生成まで-

main.jpg
gayouさん、ありがとうございます。
というわけで、Android版Opera Mobile 12.00というバージョンで対応していることをこちらでも確認しました。
ただ、今回お話する「設定」の部分がTP(テクニカルプレビュー、前回から使っているアイコンに「LAB」がついたもの)と違いがあり、ちょっと混乱しそうなので、前回ダウンロードしたLAB付きのOpera Mobileを使ってチャレンジしてみたいとおもいます。
ではCSS Nite in OSAKA, Vol.30の予習記事その2ということで挑戦してみましょう。
さてこれまでで、AndroidのカメラからHTMLベースで写真を撮影することができました。こんどは、撮った画像をサーバにアップするために、img要素を生成しましょう。
まずは前回のとおり、撮影した映像をvideo要素に取り込みます。
今回は最終的にはそれをPHPに向けて送信するため、「video要素からcanvas要素に描画した画像をPNGやJPEG形式の画像に書き出す」までをおこないます。
ただし、AndroidのWebブラウザは通常それを許可していません。
色々な理由、セキュリティやプライバシーの問題もあってのことでしょう。
canvas要素にはtoDataURL()というJavaScriptの命令があります。
これでcanvas要素から画像を生成することができます。
しかし、これが許可されてないんです。
(Android、というよりブラウザで制御している、と言った方が正しいかも)
ただし、これはOpera Mobile上のコンフィグという「設定」で解除することができます。
実験的にこのtoDataURL()をつかいたい場合、まずはこれを解除しましょう。
URLに「opera:config」と入力します(最後にスラッシュはつけないでください)。
すると「設定ファイルエディタ」というページが表示されるはずです、下図を参照してください。
config01.png
config02.png
config03.png
ここでちょっと下にスクロールすると「Security Prefs」というタブがありますので、
「Allow Camera To Canvas Copy」という項目にチェックをいれます。
さらにその下の「保存」ボタンを押して下さい(結構忘れがちです)。
以上でOKです。
これでtoDataURL()が有効になり、canvas要素からPNGやJPEGのような画像が生成できます。
(注意!)
これは、テストが終わったらかならず設定で元に戻してください。
そうすればカメラの映像は外部に漏れることはないので、セキュリティ上、充分注意して使ってください。

ボタンが押されたらvideo要素からcanvas要素に静止画を書き出す

上記の設定が済んだら、撮った写真をcanvas要素に描画します。
以下のサンプルではbutton要素が押されたらvideo要素の画像をcanvas要素に描画します。

<!DOCTYPE HTML>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>カメラの映像を映す!</title>
<style>
html, body, video {
margin: 0;
padding: 0;
}
video, canvas, button {
display: block;
}
</style>
<script>
function init() {
var video = document.getElementsByTagName("video")[0];
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
navigator.getUserMedia("video", function (s){
video.src = s;
});
document.getElementsByTagName("button")[0].addEventListener("click", function () {
ctx.drawImage(video, 0, 0);
}, false);
}
</script>
</head>
<body onload="init()">
<button>撮影</button>
<video autoplay></video>
<p>▼ここからcanvas</p>
<canvas></canvas>
<p>▼ここからimg</p>
<img alt="canvasから書き出された画像" />
</body>

</html>

  

device.png
 
device4.jpg
もちろん、このとおりvideo要素とcanvas要素のサイズが合ってないので、実際完成させるにはこのサイズを同じにしてしまわないといけません。(今回は省略します)

canvas要素からJPEG画像をつくる

それではimg要素にcanvasの画像を出力します。
canvas要素にはtoDataURL()というメソッドが用意されています。
これを使うと、Base64と呼ばれる文字列が吐き出されます。
この長い文字列は、画像だけでなく、PDFファイルなど色々なファイルに置換できます。
ボタンを押されたときに、alert(canvas.toDataURL())を仕込むと下図のようにアラートが表示されます。これがBase64の文字列です。よく見ると、これはPNG形式の画像を文字列にした、ということがわかります。

今回はJPEG画像にするので、canvas.toDataURL(“image/jpeg”)とします。
省略するとPNG形式になるようです。

device3.png
これをこのままimg要素のsrc属性の値にすると、画像が表示されます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>カメラの映像を映す!</title>
<style>
html, body, video {
margin: 0;
padding: 0;
}
video, canvas, button {
display: block;
}
</style>
<script>
function init() {
var video = document.getElementsByTagName("video")[0];
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
navigator.getUserMedia("video", function (s){
video.src = s;
});
document.getElementsByTagName("button")[0].addEventListener("click", function () {
ctx.drawImage(video, 0, 0);
document.getElementsByTagName("img")[0].src = canvas.toDataURL("image/jpeg");
}, false);
}
</script>
</head>
<body onload="init()">
<button>撮影</button>
<video autoplay></video>
<p>▼ここからcanvas</p>
<canvas></canvas>
<p>▼ここからimg</p>
<img alt="canvasから書き出された画像" />
</body>

</html>

device2.png
さて、これで「撮影して静止画をimg要素に書きだす」までできました。
次回はいよいよ、サーバ上にあるPHPにこの画像を送って保存しましょう。

HTML5でできるカメラアプリ・予習(1)

webrtc.png

こちらのイベント「CSS Nite in OSAKA, Vol.30」で実演する内容です。
将来はこういったことは現実に私達の仕事になってくると思われる、HTMLベースのカメラアプリ。
video要素やcanvas要素を使って撮った写真を加工してサーバに残す、なんてことは特にスマホ案件で依頼が来るかもしれません、そうなって焦らないように今から勉強しておきたいですね。
せっかくイベントで発表させてもらうので、これからシリーズでブログに書いていこうと思います、いまから勉強するのは決して早すぎることはないでしょう。

カメラアクセス、2つの仕様

まずはHTML5関連で、ブラウザからデバイスのカメラやマイクにアクセスする仕様は大きく2つあるように思えます。
WebRTC 1.0: Real-time Communication Between Browsers
The Media Capture API
どちらともスマホのカメラで写真が撮れて、保存したりできそうです。
ただしこの2つの仕様の目的はちょっと違うようです。
WebRTCのほうは文字どおり、リアルタイムコミュニケーションをブラウザ間にて可能にするというもの、つまりスカイプのHTML版のようなものです。

壮大なWebRTCのゆくえ

WebRTCの仕様のページを斜め読みするだけでも、その目的が壮大で、
カメラにアクセスすることだけが主な目的ではないようですね。
その目玉といえるのは「Peer-to-peer connections(ペアトゥーペアコネクション)」。
この仕様は、カメラで録りっぱなしの映像(動画)を、別の人のブラウザに届け、お互い映像のやりとりをおこなうことを目的としてるようです。

デモを試してみよう

zuhan.jpg
Opera mobileのテクニカルプレビューをAndroidスマートフォンにインストールしましょう。
以下のサイトの「Android Build」のリンクをタップしてダウンロードしてください。
「LAB」と書いてあるOperaのアイコンです、起動してください。
まずはこちらのページにアクセスしましょう。
これを動画で見るとこうなります。

Opera MobileでgetUserMedia from Hideki Akiba on Vimeo.

最低限ソースコードでカメラ撮影、でも向きを変えると縦横非がおかしくなる…
ソースコードもシンプルですし、意外と簡単です。

<!DOCTYPE HTML>
<html lang="ja">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, user-scalable=no">
          <title>カメラの映像を映す</title>
     </head>
    
     <body>
         
          <video autoplay>
         
          <script>
               var video = document.getElementsByTagName("video")[0];
               navigator.getUserMedia("video", function (s){
                    video.src = s; // カメラ接続が成功したら、ストリームをvideo要素に接続
               });
          </script>
         
     </body>
</html>

navigator.getUserMediaというメソッドがカメラを取得するという役目を担います。
取得が成功したらvideo要素に映像ストリームを流すというものです。
注意としては、仕様書と、Opera Mobileの実装がコードを見るとちがいます。
将来は微妙に変わってくるでしょうが、基本的な原理の部分はほぼこのままでいてほしいです。
zuhan2.jpg
動画でもわかるとおりネイティブアプリのカメラ機能とちがい、できないことが多すぎます。
   * オートフォーカスの機能がつかえない
   * 撮影する写真の解像度を決めることができない
   * フラッシュなどの機能がつかえない
   * スマホの縦横の向きを変えると、映像の縦横比がおかしくなる
この、向きを変えたときに縦横比がおかしいのはちょっと使いにくいので、ちょっと工夫をこらしてみました。
もしもデバイスの向きが変わったら、一旦video要素に流れているストリームをとめて、
video要素のサイズをwindowのサイズにあわせた後にもう一度ストリームを流します。
どうしても、video要素を全体的に見せたい場合、横向きがこんな感じにしかならなかったんですが、これでなんとかなりそうです。

Opera MobileでgetUserMedia2 from Hideki Akiba on Vimeo.

今度は縦横比を修正しました
ソースコードは先ほどのものよりちょっと付け足しました。

<!DOCTYPE HTML>
<html lang="ja">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, user-scalable=no">
          <script src="../common/js/jquery-1.7.1.min.js"></script>
          <title>カメラの映像を映す</title>
          <style>
           html, body, video {
                margin: 0;
                padding: 0;
           }
          </style>
     </head>
    
     <body>
    
     <video autoplay>
         
          <script>
               var video = document.getElementsByTagName("video")[0];
               var stream = null;
               navigator.getUserMedia("video", function (s){
                    video.src = stream = s;
               });
              
               $(window).bind('load orientationchange resize', function(e){
                    // デバイスの向きが変わったら...
                    video.src = null; //一旦ストリームを解除する
                    if(Math.abs(window.orientation) === 90){
                         video.width = window.innerWidth; //video要素のサイズを調整
                    }else{
                         video.height = window.innerHeight; //video要素のサイズを調整
                    }
                    video.src = stream; //再度ストリームを接続する
               });
          </script>
    
     </body>
</html>

まとめ

将来は、撮影機能つきのWebサイト制作があるかもしれません。
そうなると今までAndroidアプリ開発のために、XMLをコーディングしていたデザイナーも、これからはHTMLやCSSでデザインをする時代がくるわけですね、そう遠くもないでしょう。
今は本当にテストビルドなので、簡素な実装です。
もちろん本格的に実装なんかしたらセキュリティやプライバシーの問題があるので、「あること」をしないと画像として送信できないことになっています。
しかし今はこれで充分楽しめます。
オートフォーカスもできないのであればちょっと実用はむずかしいかな?と思いますが、こういった部分はどんどん使える実装になっていくんでしょうね、楽しみです。
この次は録った画像をcanvas要素に描画して、色々と画像を操作することにチャレンジしてみます。
今回の内容は2012年5月4日(金)に大阪で開催されるCSS Nite in OSAKA, Vol.30で実演します。
他にも、録った写真をサーバにアップしたり、モノクロにしたり、色々なデモをやってみますが、会場に来られた方でAndroidをお持ちの方は是非、今回のテスト版Opera Mobileをダウンロードしてお越しください。
結構ディレクターさんとかにも聞いてほしい内容です。
これからのWeb技術なので知っておいてソンはないと思いますので。
参加表明はお気軽にFacebookからおねがいします。

CSS3コードジェネレータ「Grad3 – Easy CSS3 gradient editor -」公開

og_img.png

前にもここで告知しましたが公開しました、Grad2の後継バージョン「Grad3 – Easy CSS3 gradient editor -」[ http://grad3.ecoloniq.jp/ ]です。

円形グラデーションにも対応させてますが、古いWebKitの仕様と新しいWebKitの仕様だと、お互いできることとできないことがあるので、円の中心座標だけ決めてしまうというもので進めていこうと考えてつくりました。
アイコンも付けられますが実際はみなさんで微調整してください。
background-positionは暫定でつけていますので。
あと、動画をつくってみました。

なお、CSS Nite in OSAKA, Vol.30でもちょっとだけ紹介したいとおもいます。

CSS Nite in OSAKA, Vol.30

これからもどうぞよろしくお願いします!

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ディレクターさんやデザイナーさん、フロントエンドの方も是非おこしください!よろしくお願いします。

HTML上でiPhoneのフリック時刻用ドラムUIを実現するTimeFlickerJS

iPhoneのフリック時刻用ドラムUIを実現するTimeFlickerJSのサムネイル

以前も記事に書いたデザイナー主体のハッカソンプロジェクト「Designers Hack」で作っているモックをちょっと作り込みましたので、テストバージョンサンプルと動画をあげておきます。

DEMOはこちら(iPhone, Androidで見てください、PCブラウザでは動作しません)

TimeFlickerJS + iPhone4S

TimeFlickerJS + GALAXY S2

iPhoneのUIで見かける、数字を縦にフリックできる日付用のドラムっぽいあのUI。
あれ、HTMLのフォームなどで作ってほしいという要望がありがちです。

でも、「時」と「分」を同時にクルクル指でフリックさせて数字を合わせるHTMLのUIが無いので、作ってみました。
jQueryのプラグインみたいにしてます。

使い方は簡単です。


<head>
  <link rel="stylesheet" type="text/css" href="common/css/timeflicker.css">
  <script src="common/js/jquery-1.7.min.js"></script>
  <script src="common/js/jquery.timeflicker.js"></script>
  <script>
   $(function (){
    $("#timefrom").TimeFlickerJS();
   });
  </script>
</head>

 <body>
  <div id="timefrom">
   <span class="TimeFlickHour">4</span>
   <span class="TimeFlickMinite">10</span>
  </div>
</body>


以上です。
必要なのはHTML上でspan.TimeFlickHourを「時」として、span.TimeFlickMiniteを「分」とします。
これだけは必須なので忘れないように。
あとはその親divをjQueryな書き方でTimeFlickerJS()を付けるだけで準備はOKです。
親div(”4時10分”と表示されている部分)をタップすると、ドラムっぽいUIが降りてきたら成功です。

メソッド

一応、OKボタンが押されたタイミングでイベントを発火できます。


var jikan = $("#timefrom").TimeFlickerJS();
jikan.change(function (e, v1, v2){ console.log(v1+" "+v2); });

とすると、v1に「時」が、v2に「分」が帰ってきますので、
例えばform要素の中で使う際、
<input type=”hidden” name=”jikan” value=”ここにv1とv2を入れてサブミット” >
とかするとお問い合わせフォームでも使えるので良いでしょう。

シビアだけどAndroidでは不採用になりそう?

Designers Hackのフロントエンドエンジニアのメンバーと話していると、Android大丈夫?的な声が。。。
確かにiPhoneはレンダリングも強力なので割とフリックなど滑らかなんですが、GALAXY S2やXPERIA ARCなどで試したら結構厳しいところもあります。
クオリティを考えるとAndroidはもっと別のUIを考え、振り分けた方がいいのでは?という意見が続いています。

あと、このUIは今は横幅320pxとハードコーディングしてます。解像度のちがうAndroidではCSSを触らないといけなくなりそうです、というよりボツになりそうです。
例えばhtcとかの機種では横が空いてしまいますので。。。
これはもうちょっと改善できたらいいなと。

ただ、このようなUIの制作を色んな仲間の意見をもとに作れ、勉強しているって恵まれてるなあと感じます。
精進精進。

HTML5-WEST.jp 勉強会「HTMLでつくるカメラ&落書きアプリ」フォローアップ

2011-09-24 15.11.25.jpgのサムネール画像

始まって2回目のHTML5-WEST.jp勉強会なんですが、50人も集まりました。

みなさんお疲れさまでした。
僕は「HTMLでつくるカメラ&落書きアプリ」というセッションでお話をさせてもらいました。

スライドはこちらです。

セッションの中でお話しましたけれど、まだ現在では、HTMLやJavaScriptベースでカメラを使ったWebアプリは作れません。
これは各ブラウザがまだこの機能をサポートしていないからです。
ただ、テストとして唯一Operaの特殊なビルドがそれを可能にしています。
Webの未来という意味では面白い試みだったと思います。
もうすでにW3Cのワーキングドラフトに上がっているので、「Webでこういったことが将来出来るようになる」ということを示唆するものなんですね。
1行のHTMLと簡単なJavaScriptのサンプルでカメラアプリが作れるデモを実際披露すると、色んな人の反応が多くて楽しかったですね。
getUserMedia()というJavaScriptのメソッドは、カメラやマイクを取得する機能ですが、仕様はまだあやふやでこれからもう少し整備されていくでしょう。
最後にアイデアネタとして「変顔カメラアプリ」として画像がウネウネ動いていたのは、実はとても頑張って作ったんです。
将来はもうちょっとアレをアプリっぽくしますのでご期待ください!!
スクリーンショット(2011-09-24 17.34.21).png
デモでお見せしたテクスチャマッピングによる画像を変形させて撮影

『第一回 全国統一HTML5実力テスト』を受験してみて改めて感じたこと

カヤックさんのWebサービスで、HTML5関連の自己スキルが試せるというものが公開されています。
html5cat.png
これはエンジニア向けのJavaScriptコース、そしてデザイナー向けのHTML / CSSコースの二つの科目(?)があり、それぞれ好きな方を選べるし、両方受験することもできます。
まあ、内容はもちろんここでは書けないけど、結構難しいことから、割と誰でも知ってそうなことまで幅広いので、自分のスキルを試すということで、やってみてはいかがでしょう?
高い点数だったら、みんなに自慢しちゃおう、ということでTwitterのアカウントでログインして受験してみるのもよいでしょう。
逆に点数が低いからといって、一方的に公開されるわけではありませんのでご安心を。
ちなみに僕はJavaScriptは専門外なので、HTML / CSSコースだけ受験。
惜しくも93点。
一問間違えてしまいました。。
よく考えたら分かることを、、、悔やんでしまいます。
score.png
HTML5がテーマとなる試験なので、セマンティックな考え方を理解しておいた方がよいですし、CSS3の知識も必要になってきますし、JavaScript APIとの絡みも理解が必要になってきます。
と、書くと、「何でJavaScript APIとの絡みが必要なん?」って思うかもしれません。
しかしこれは僕としては当たり前のことと思い、苦手だけど勉強中です。
(オライリーから出ているJavaScriptのパターン本を読んで、確かに面白いですが、これは僕がやる分野じゃないな、と思っています。)
ただプロジェクトって、制作に関わる人全てが同じゴールを見ないとチグハグなものが出来上がってくるのにこの日本ってのは、フロントに関わる大事な作業をする人がディレクターからの指示だけで動いているという現状があまりにも多く、ヒドい場合には途中で大幅な仕様変更などに何故そうなったかも理解出来ず、苦しむ場合があります。
「上が言ってるからそれは当たり前」とか「徹夜してでもやるべき」とかそんな言う人もいるけど、もの作りの本質からは確実にずれている気がします。
ただ、大きなプロジェクトになれば(何十人、何百人のエンジニアが動くプロジェクト)になると、さすがにそうも行かないケースもあるので一概には言えませんが。
少なくとも数人体制で制作にかかる場合、もっとフロント制作に関わる人(フロントエンドエンジニアやデザイナー)も会議に参加させて、その人のことをちゃんと信用していこうよ。
フロントに関してはその人の意見が一番知識があるし、的を得ているはずなのに、何故違う人が仕様を決められるのか?は問題として認識しておくべきかな?と。
理想的な話ばかりしてるけど、制作者は全てコミュニケーション能力がないとダメ。
上記のように、フロントエンドの人やデザインの人などは、信用されている以上、プロジェクト全体のゴールを見据えて話が出来て提案も出来ないと、ただの言いなりにしかなれない存在なんです、悲しいかな。
だから僕らの立場を5年先、10年先でももっと価値のあるものにし、言いなりにならずに「この人にお願いしたい」と言われたいので、今が訓練の時期だと思う訳です。
だから話が戻るけど、デザイナーの知識にとって「何でJavaScript APIとの絡みが必要なん?」という答えは、自分が作ったUIと密接に関わるからです。
自分がUIを設計する以上、最後はプログラムによってどのように動くかなんて知っていて当然、その挙動が予測できるようにならないといけません。
少なくとも、スクリプトを書けなくても、何が出来るか?
ここを最初に設計/定義しておかないと後々困る、という部分だけは抑えておきましょう。
これが今後、複雑な仕様になって広大なHTML5の技術に対する、僕らデザイナーの向き合い方だと考えて勉強しています。
こう考えると、色んなスキルが必要となってくるので、ひと独りでこのスキルを理解出来る人なんていないんじゃないかと思ってきます。
JavaScriptエンジニアと言っても、今までDOM操作が得意だったエンジニアだけでなく、描画アプリをcanvasやSVGなどを使って作ることを得意とするエンジニアやAjaxやWebSocketなどの通信系が得意なエンジニアとか色々、エンジニアのなかでも幅広く分野が分かれていくものと予感しています。
これはあくまでディレクターとしての一つの意見ですが。
デザイナーもそうです。
ビジュアルを担当するデザイナーから、ユーザの指や目の動きを考えたり使いやすい設計を考えるデザイナーなど、デザイナーといってもWebに関わらずプロダクトやエディトリアルデザインの世界でもいっぱいいます。
どれがWebの世界で一番重要かだなんて順位をつけられるわけがありません。
見た目も機能性も、全てにおいてクオリティを保たないとそれをクオリティとは言わないからです。
さ、そんなわけで、コレからも勉強、勉強、と。
お互いいい仕事をしたいですね!

画像をモノクロ変化するjquery.monochromer.jsをアップデート

以前ブログにも書きましたjQuery用のプラグイン、jquery.monochromer.jsですが、ある件でこのプラグインを紹介してくださるらしく、ちょっと改良しました。

<img>画像マウスオーバーでモノクローム変化するjQueryプラグイン「jquery.monochromer.js」

色を指定できるデモとソースのダウンロードはこちらでお願いします。

どういったものかというと、img要素にこれを適用すると画像がモノクロになるというものです。
適用方法は簡単で、jQueryを読み込んだ後このプラグインを設置し、指定するだけです。

facebookプロフェッショナルガイド

一番シンプルなカタチ。
monochromerをデフォルトの状態で与えてください。
img要素がグレースケール化します。
本の画像にマウスを乗せるとカラーになります。

今回はイヤラシく、僕も執筆に参加した宣伝も兼ねて「Facebookページ プロフェッショナルガイド」のサムネイルを使います、ゴメンナサイ。


$(".demo01 img").monochromer();

改良点ですが、HTML5のcanvasを使っています。
IE8までは、「なにもしないプラグイン」というように、内部でブラウザ判定をしてます。
つまりIE6などでは、画像が表示されるだけなので、必要最低限の表示は出来ます。
新しいブラウザは機能が増え、古いブラウザはそのままで、、という感じでしょうか?

facebookプロフェッショナルガイド

今度はカラーを指定します。
monochromerのcolorパラメータに、16進数のCSSカラー値を指定します。
この例は#f00、もちろん#ff0000でもOKです。


$(".demo02 img").monochromer({color: "#f00"});

facebookプロフェッショナルガイド

しかし、いきなりページが表示されて画像がモノクロになるとおかしいですね。
通常はカラーのまま、マウスオーバーでモノクロ、という流れにしたいときには、typeパラメータを”false”にしたらOKです。


$(".demo03 img").monochromer({color: "#f00", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

今度は二つ並べました。
こういったレイアウトをするときは、imgに親要素で囲ってください。
今回はli要素で囲み、liをfloat: leftしてます。
monochromerの指定はcolorパラメータに”sepia”と”blue”を指定しました。


$(".demo04 li:first-child img").monochromer({color: "sepia", type: false});
$(".demo04 li:nth-of-type(2) img").monochromer({color: "blue", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

ここでaタグを付けないと指マークにならないのですが、Webアプリケーションを制作していると、どうしてもa要素ナシでマウスを指マークにしたいことがあったとしましょう。
この時、実はプラグインの内部的な都合で、CSSでimgに「cursor: pointer;」としても指マークにならないので、パラメータをひとつ追加しました。
それがCSSのcursorプロパティの名前、そのもので、以下のように追記します。
これでマウスを乗せてください、マウスの形が変わると思います。


$(".demo05 li:first-child img").monochromer({color: "sepia", type: false, cursor: "pointer"});
$(".demo05 li:nth-of-type(2) img").monochromer({color: "blue", type: false, cursor: "crosshair"});

実はcanvas要素を生成して、span要素でラップ

span.monochrome-wrapのDOM構造

内部的にcanvas要素を生成して、img要素のピクセルをcanvasに取り込み、変色させています。
img要素とcanvas要素はCSSのpositionで重ねて、その親にspan.monochrome-wrapという要素を生成しています。

レイアウトをするとき、img要素にmarginとpaddingとborderとfloatを指定すると、span.monochrome-wrapに適用します。
しかし他のCSS設定は無視されますので、例えばtransformとかで、マウスオーバーでscaleによって大きくしたり、とかが出来ません。
なので、内部的に生成されたspan.monochrome-wrapに対してCSSを当てるといいです、以下のようなCSS設定でマウスを載せると大きく見せられます。

facebookプロフェッショナルガイド

.demo06 span.monochrome-wrap {
-webkit-transition: .3s;
}

.demo06 span.monochrome-wrap:hover {
-webkit-transform: scale(1.2);
}

将来的には、img要素に指定したCSSプロパティを全部span.monochrome-wrapに適用させたいところ。
実は試したのですが、クロスブラウザの作業でどうしてもうまくいきませんでした。
ぜひ改良したいなあ、と思います。

あと大事なことなんですが、canvasの仕様でドメインの違う画像のピクセルを操作することは出来ないことに鳴っているようです。なので、同じドメイン内の画像だけにおいて使うとよいでしょう。