Category: HTML5

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を１枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の１つとして利用されています。 Sass/Compassについて 　Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。　次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト 　CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の４行です。この４行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。 　@charset “utf-8”;　@import

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他（CSS,MVCフレームワーク統合有無など） 特徴 調査対象フレームワークの概要 　以下６つのフレームワークを対象に調査を行いました。

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の６ 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら＞Flash見本帳HTML版はこちら＞スマートフォン向け秀英体見本帳（※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。）　 チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題（参照：縦書きにWebフォントを使いたい！けど使えるのか検証してみた）がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari（5.1.2）とMac版Safari（5.1.1）です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;　　　　　　src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {　　　　　　font-family:’DNPShueiMinPr5B’;}

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年（！）の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。　 animate要素の追加 　例えば、以下のようなanimate要素を追加したい場合。 ＜animate attributeName=”opacity”　begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。　　 SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20（土）に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得（iOS4.2から加速度センサーに対応）し、前後のシェイクジェスチャ（ぶーんと走らせる動き）、左右の傾き（ドリフト）に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、１音しかプリロードされた状態で鳴らなかったり（参照：iPhoneでHTML5のaudio要素を使うときに気をつけたいこと）、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。　 ポイント