Safariから使えるようになったHTMLやCSSの要素などについて試してみた、半分だけ紹介・解説しました。前編を読んでいないという方は先に前編を読んでおくことをおすすめします。Safariから使えるようになったHTML5・CSSを試してみました【前編】ざっと今回試してみたプロパティやテクニックをもう一度振り返っておくと以下のような感じです。icons前編では最初の3つを紹介・解説したので、後編では残りの3つを紹介したいと思います。思いましたが、今回紹介するものもデモ自体はすでにネタばれしているのでつまらないなぁと思いました。そこで、いろいろと考えたのですが、もう一つネタになりそうなのをiOS5からサポートしていたのでそれを新たに追加しました!それは、「writing-modeプロパティ」と「ヒラギノ明朝」です。いう事かというと縦書きで小説っぽい見た目ができるということです。いうわけで今回は「縦書きの読みもの表現」を加えた4つのテーマについて解説します。Effectの解説です。Effectは結構前からいろいろと試したりしていました。30では-webkit-animationや-webkit-transformを使って30種類のスライドショー・トランジション・エフェクトを作成して紹介しました。Safariで動かすのは難しかったです(なんとなく動きますがガタガタみたいな)。CSS3のanimationやtransformの勉強にはけっこうなったかなと思います。30ではトランジションのきっかけとなるクリックなどのイベントをすべてJavascriptで制御していました。最近ブログに書いたCSS3だけで作るClickableなUIでは、そういったクリックイベントなどもJavascriptを使わずにCSSのみで処理するテクニックを紹介しています。CSSのみでイベントを制御する方法をこのエントリーでは2種類紹介しています。一つは「:checked」擬似セレクタとInput要素、間接セレクタを使ったもので、もう一つは「:target」擬似セレクタを使ったものです。UIのところで紹介しました。UI意外にもほとんどのパーツでコレを使用しています。Effectsを作っています。「:checked」擬似セレクタと間接セレクタの辺りが分かっていれば仕組みはとても簡単です。HTMLとCSSを簡単に解説すると以下のような感じです。-webkit-transform:translateX(0%);}非常にシンプルです。実は最近まで、Webkit系ブラウザでの間接セレクタの振る舞いが上手く動いていなかったのですが、バージョンアップしてChromeやSafariでもちゃんと動くようになりました(やったー。Firefoxでは前からちゃんと動いていました)。Safariも例外ではなく、最近まで間接セレクタが上手く使えてなかったのですがiOS5から使えるようになったみたいです。便利ですね!上記に示した例は横にスライドするだけの簡単なトランジションですが、アニメーションを凝ったものにすればいろいろな表現ができると思います。今回もシンプルに実装したDemoも用意しました。Safariから新たにInput要素のタイプ属性のサポートが追加されています。typeで、タップするとホイールセレクタUIで日付を選択できるようになりました。今回のサンプルではそれ以外にも元々サポートしていたnumberやpasswordといったtype属性も用意しましたのでよかったら見てみてください。タップするとデフォルトで出るキーボードが変わったりします。それから新しくサポートされたものではRangeがあります。SafariのデフォルトUIだとボタンの大きさが小さくて正直使いづらいです。Safariの場合だとバーがアクティブの状態になって何も起こりません。ボタンが小さいので上手く押せず、バーがアクティブになって動かしづらいということがあるので、使うときはスタイルを当ててボタンを大きくしてやるのが良いと思います。Rangeに限らずCheckboxやRadioボタンもデフォルトだとサイズが小さいと思うので、クリック領域を大きくしておくというのは必要なことだと思います。Sliderちなみに、このRangeを使ってiPhoneの待ち受けロックのスライダーを表現している人がいて、おもしろい試みだったので試してみました。type="range"webkit系ブラウザの場合、input要素のスタイルに「-webkit-appearance:none」を与えてやるとブラウザのデフォルトのUI画像を消すことができます(もちろんCheckboxやRadioも)。これでとりあえず消しておいて、後はborder-radiusや-webkit-gradientなどでガシガシそれっぽい画にしていきます。Rangeのボタンは専用のクラス「::-webkit-slider-thumb」でスタイルを当てることができます。これも同じように色々とスタイルを当てていってスライドボタンっぽいUIに近づけていきます。Typeface」を使って画像なしで作りました。「input[for='range']::-webkit-slider-thumb」に直接contentプロパティを指定できないので、「:before」と「:after」クラスを利用して作っています。AnimationとMaskをつかってキラっと光る感じのエフェクトをつけています。ここまで画像やJavascriptを使わずに作れるのが面白いですね。Rangeのサンプルでつくったスライダーは右端までスライドさせるとボタンが左端に戻って、文字が「Unlocked!」に変わりますがそこはさすがにJavascriptを使っています。shadowなどの透過系の処理をけっこうかけていたりするのであまり滑らかには動かせないのが残念ですが、面白い試みだと思いました。DemoHTMLとCSSはこんな感じです。70px;}}オン・オフを切り替えるToggleボタンアンロックスライダーの他にもネイティブっぽいUIをいくつか作ってみました。Toggleボタン、それからセルの右側にチェックマークがつくセレクトUIです。オン・オフを切り替えるToggleボタンです。これは非常に簡単です。checkboxのデフォルトUIをさっきのスライダーと同じように「-webkit-appearance:none」で消して、背景にオンとオフがつながった画像を敷きます。あとは大きさを調整してborder-radiusで角丸にするだけでそれっぽくなります。オンにしたときつまりcheckedになったときに表示も切り替えたいので擬似クラスを使って背景をずらして完成です。Radioボタンこれはおなじみのchecked擬似クラスと間接セレクタの組み合わせです。ラベル要素にボタンっぽいスタイルを当てて、checked擬似クラスで切り替えます。Lable要素の横幅はボタンの数によって合わせます。Toggleボタンと同じようにchecked擬似クラスと間接セレクタの組み合わせです。Demoではカラーテーマを選択できるようにしています。Typefaceを使って、:after擬似クラスで追加しています。SafariからはInlineでSVGを描画できるようになりました。SVGをイメージとして読み込んだりすることは今までもできたようですが、InlineなのでHTMLにそのまま埋め込むことが出来るようになりました。具体的にはこんな感じです。&lt;/svg&gt;&lt;/body&gt;&lt;/html&gt;SVGの利点はなんといってもベクターデータなので伸縮してもグラフィックが劣化しない点でしょうか。それからSVGの要素に対して様々なフィルターエフェクトを与えられる点も面白いです。SafariではFilterが上手く動いていないようにも感じました。Effectをつかったデモなどがあがっていたりしていますが、今後ますますSVGに対応していってもらえることでデザイナーの表現の幅も広がっていけるように思います。Iconsからお借りしました。SVGタブですが、インラインSVGを並べすぎて切り替えの描画にものすごく時間がかかってしまいます。表示されたアイコンの色を動的に変えたり、グラデーションをかけたり簡単にできるので便利です。アイコンをタップするとパスデータを見ることができるようにしました。本当はフィルターをバシバシ切り替えていくというデモを用意したかったのですが、、、対応が待ち遠しいです。Demoで新たに紹介した「縦書きの読みもの表現」について紹介しようと思います。Safariでは「writing-modeプロパティ」に対応しました。writing-modeには「horizontal-tb」「vertical-rl」「vertical-lr」という値を指定することができます。bottomということですね。同じようにvertical-rlは縦書きで右から左に流れる、vertical-lrは縦書きで左から右に流れるということになります。縦書きにしたときの数字やローマ字の処理はさまざまあると思いますが、今回はtext-orientationプロパティに「upright」を指定して縦に並ぶようにしました。日本語で縦書きといえばやっぱり明朝体のほうが自然だと思います。ProN」がサポートされました。Demoでは縦書きのブックリーダー風なUIを作ってみました。ここで一つ問題がありまして、縦書きで長い文章を表示するときに横にスクロールするようにするとデフォルトで右側にスクロールがある状態になります。通常縦書きの読み物は右から左にという読む移動をします。これをCSSで解決するのはなかなか難しいです。デモではJavascriptでスクロールを強制的に左側に移動させる処理を加えています。(でもよく考えたらスクロールじゃなくて、お得意のInput要素を使ったUIでページング処理すれば問題ないように思ったので、また今度試してみようと思います)それから、デモにはフルスクリーンビューに切り替えるボタンも用意してみました。ここまで来るとHTMLをローカルキャッシュさせて、さらにローカルのデータベースにしおりやブックマークを保存する機能なんかも付けて、オフライン・ブックリーダー・アプリまでできそうだなぁと思いました。暇な方はつくってみて欲しいところです。つくってみた方はお知らせください!シンプルなデモも用意しました。SafariがサポートしたHTML・CSSとそれらを使ったテクニックをたくさん紹介しましたが、書いているうちにアレコレ詰め込みたくなってしまいました。散漫な感じになってしまってすいません。他にも使われているちょっとしたテクニックなどを別の機会に紹介しようと思います。今回はあえてネイティブアプリのような振る舞いをするUIを再現することに執着しているように感じるかもしれませんが、個人的にはWebAppでネイティブアプリと同じようなものを作ってもしょうがないと思っています。WebAppにはWebAppに最適なUIを作る必要があると思うからです(それはもちろんどんなアプリであっても同じだと思いますが)。今回ネイティブアプリのようなUIをデモなどでつくった理由としては、紹介したようなテクニックがどういったことが実現可能かという基準ラインのようなものを示すのに調度良いと考えたからです。UIパターンというのははあくまで手段であってそれが必ずしもゴールになると考えて設計するのは、やはり間違いでしょう。難しいこといいましたが、「えっ、こんな表現もできるの!?」と思えるような、使っていて楽しくなるUIというのを考えていきたいです。それから、今回はCSSを使ったテクニックを中心に紹介しましたが、iOS5ではJavascriptでもできることの幅がものすごく広がっています。時間があればそちらの方もいろいろ試したいと思います。Blog|ブログを報告する。