iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。Filtersの可能性を試すためにデモを作ってみました。FiltersはiOS5では動きません。Filtersが動作するのは最新のChromeと本日公開されたSafari6です。今はChromeか最新のSafariで見ていただくのが良いかと思います。PhotoEditorとは言っているものの、結構なJSを書いてます。Filtersの部分のことのみを言っていますね。UIを使うにあたってどうしてもJSでValueを取ってこないとどうにもならないので、じゃあもうCSSにこだわらないでJSをばりばり書こうとなったのです。そのおかげでかなりリッチな仕様に仕上がりました。PhotoEditorではAJAXでアップロードしてそのまま編集できるようにしています。DEMO用のWebAppなのであまり期待しないでください。バックエンドはPHPで書いていますが、なんちゃってコードなのであまり変な画像とか上げようとしないでくださいね。AjaxアップロードにはjQuery.uploadを使わせていただきました。type="range"を使いました。type="range"を使えばvalueを取ってくるだけですむので非常に便利ですね。type="range"にはname/value属性の他に、入力できる最大・最小値を設定するmax/min属性や入力ステップ値を設定できるstep属性などが設定できます。StyleはCSSで変更することができます。スライダーの軸となる部分のグラフィックinput[type='range']で、ハンドルの部分のグラフィックは::-webkit-slider-thumbをつけたセレクタで変更することができます。具体的にはこんな感じです。cursor:-webkit-grab;}今回は使っていませんがborder-imageを使えばリキッドに対応したスライダーUIが作れそうな気がしますね。Transitionを使用しています。30でも紹介しました。よかったら参考にしてみてください。mode実を言うと当初はiPhoneで見るためのデモサイトを作るだけの予定でした。Chromeで確認しながら作って、ある程度できた段階でiPhoneで確認する感じで作っていました。queriesでやることにしました。Chromeで見ている画面はOverviewページのようでありながら、Windowを縮めていくとフルスクリーンWebAppになるというおもしろい感じになりました。sourceなのでデバックもやりやすくてよかったです。Modeもがっつり対応しました。Modeで見ることができます。縦が短くなるのでメニューの位置を横に移して写真領域を大きく見れるレイアウトにしています。1.0を元に実装されているようです。Functionsに使用できるエフェクトの詳細について書かれています。opacityやdrop-shadowなんかも含まれていますが、これらとCSSのプロパティのopacityなどとはどう違いがあるんでしょうかね。描画方法に差があったりするのだろうか。シンプルなデモページを作ったので御覧ください。クリックでフィルターがトグルします。Demo以下にそれぞれ簡単な説明も書いてみます。)グレースケールは単純に彩度を落とすだけのフィルターですね。0〜100%の値で指定でき、0%がdefaultで100%で完全なグレースケールになります。)セピアもグレースケールと同じ感じの値の設定・default値です。100%で完全なセピアカラーになります。)saturateは彩度を変更できるフィルターで、0%以上の値を設定できます。default値は100%で、0%でモノクロになります。彩度を高くしたい場合は100%以上の値を設定します。saturate(240%);}hue-rotate()hue-rotateは色相を変更できます。値は-90degや45degのように角度で指定します。default値は0degです。)invertは色の反転フィルターです。100%で完全に反転して、default値は0%です。)透過フィルターです。0%で完全に透明になり、default値は100%です。)brightnessは明度を変更するフィルターです。-100%〜100%の値で指定でき、0%がdefaultで100%で真っ白になります。-100%にすると真っ黒になります。)コントラストはsaturateと同じ感じの値の設定・default値です。コントラストを高くしたい場合は100%以上の値を設定します。contrast(120%);}blur()blurはぼかしフィルターです。ぼかす範囲をpxなどで指定します。defaultは0です。blur(10px);}drop-shadow()ドロップシャドウはCSSプロパティのbox-shadowと同じです。値の指定方法も同じです。functionを試してみたかったのですが、まだ実装されていないようです。shaderをフィルターとして使用することができます。vertex-shaderという複雑なtransformをすることができる値やfragment-shaderというピクセルにエフェクトをかける値を設定したりします。WebGLやOpenGLの表現をCSSで利用できるので、やろうと思えばよりダイナミックなグラフィック表現ができます。説明だけだとわからないと思います。以下のサイトでデモを紹介しています。webおまけ週末2日間でひと通り作ったのですが、やっているうちにどんどんリッチになっていきました。他にも実は搭載されている機能を紹介しようと思います。Modeこれはデモ動画でも紹介されているし、当たり前といえば当たり前ですね。Appぽく起動することもできます。Modeある程度つくった段階で友人などに見せていたのですが「保存はできないの?」といった意見もありました。「いやいやデモだし」と濁していたのですが、せめてスクリーンキャプチャで撮ってもらえるようにしてみたらという意見をいただいて作りました。写真をダブルタップすることでツールバーなどが消えて、写真が良い感じにフルスクリーンになります。Barが消せないのがもどかしいです。ModeOverviewモードで見ているときに強制的にWebAppモードに切り替えるスイッチです。Force」という項目でオンにすることができます。Window幅を縮めているときは表示されません。Listこれは本当におまけな機能で、Overviewモードで見ているときだけの機能です。Overviewモードで表示しているときに、白いiPhoneのホームボタンを押すと設定されているフィルターの値のリストが表示されます。まとめiOS6ではファイルアップロードに対応するというAppleの発表でSNSなどのWebAppも写真投稿などに対応していることだと思います。Filtersも使いようによれば効果的な表現ができるように思います。NativeAppのほうが使いやすいに決まっているし、WebAppはそんなに重要じゃないと思うかもしれませんが、スマートフォンからWebを見る機会は案外多いです。TwitterやFacebookなどで流れてきたURLをひらくときは、アプリ内とはいえWebViewで見ているのですから。当たり前ですが、WebからもNativeAppと変わらない体験を提供することは欠かせないことだと考えます。一部NDAに触れる可能性のある部分がありましたので編集しました。Blog|ブログを報告する。