サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
lab.informarc.co.jp
対象デバイスをPCに限定してFlashを活用したキャンペーンサイトなど特定の状況を除いて、スマートフォン/タブレット対応が求められる場合(大半がそうですが)、HTML5/JSでリッチなコンテンツを作成する機会が増えています。 Canvas APIではアニメーションを行うメソッドが提供されておらず、Canvas要素内でアニメーションを実現しようと思うと工数が増えてしまいがちです。 そこで、今後工数短縮の選択肢の一つとして検討出来るよう、CreateJS(EaselJSとTweenJS)とCanvas APIで同様の事を実現した際の違いを簡単に比較します。 CreateJSとは HTML5のCanvas要素を使ってリッチなコンテンツを簡単に作成できるJavaScriptライブラリです。 次の4つのライブラリで構成されています。 EaselJS Canvas要素を効率的に扱うためのライブラリ。
Web Storage(localStorageやsessionStorage)仕様が公開された当初はクッキーに替わる手段として、localStorageを使ったパフォーマンス向上テクニックが多数公開されましたが、パフォーマンスの観点から言えば大容量のファイル保存には向いていません。 先に結論から書くと、従来クッキーで行っていたようなユーザーの状態(アクティブなタブや、ソート順、メニューの開閉など)など軽量の保存には良いが、画像などファイルサイズが大きな物の保存はパフォーマンス低下の原因になり兼ねないので避けたほうが無難です。 localStorageの読込は同期的 ページ読込時にlocalStorageに保存したものが自動的に読み込まれます。 head要素内にscript要素を配置した時と同様に、読込が完了するまでページのレンダリングがブロックされます。 データ保存・取得はメソッドを使う
Sass 3.3でソースマップの出力に対応した事は知っていましたが、普段使っているGrunt(grunt-contrib-sassのVer.0.3.0)で上手く出力出来なかったので見送っていました。 その後、新しいプロジェクト始動時にふとGruntのパッケージを更新していると、grunt-contrib-sass 0.4.0でソースマップ出力に対応したとの情報を得たので試してみました。 ソースマップとは SassやCoffeeScriptで記述していても公開/動作確認する時はコンパイルしたファイルを読み込むため、 デベロッパーツールでデバッグをするとコンパイル後のCSSやJSでの記述位置しか把握出来ませんでした。 そこでコンパイル後であっても、オリジナルソース(SassやCoffeeScript)の記述位置を表示する仕組みとしてソースマップが登場しました。 コンパイルするのと同時に元ファイ
レスポンシブWebデザインで構築したサイトをスマホ(狭いスクリーンサイズ)で閲覧すると、列数の多いテーブルは何かしらの対策を行わないと非常に見辛いレイアウトになる事があります。 対策として、CSSやJSを使ったテクニックが色々とありますが、対策の1手段としてリフローテーブルをご紹介します。 元のアイデアはjQueryMobile1.3以降で実装されたReflow Tableを参考にしています。 jQueryMobileの大半の機能が不要で、パフォーマンス(ロード/スクリプト評価時間)を少しでも向上させたい場合は、 リフローテーブルライクなモジュールを自前実装するのも一考の価値があるかと思います。 デモ メディアクエリに対応したブラウザでご覧ください。 ウィンドウサイズを縮めていくと480px以下で下段テーブルのレイアウトが変化します。 リフローテーブルデモ 仕組み 文章で説明すると難しいの
HTML5でVideo/Audioがノンプラグインで再生出来るようになりましたが、シンプルに一つのファイル(単独のVideo/Audio要素)を再生するだけであれば 各ブラウザ向けにエンコードして(対応した拡張子の)ファイルを用意するだけで簡単に利用出来ます。 この対応拡張子(コーデック)が異なる部分も厄介な問題ですが、既に話題している方が多いので本エントリーでは省略します。 タイトルのAudio要素を連続して再生する状況ですが、例えばアプリやゲームの操作時に発生するSE(サウンドエフェクト)として連続して再生する状況があるかと思います。 PCブラウザ(IE9+、Chrome、Firefox)はAudioを連続で再生しても概ね問題なく動作しましたが、スマホブラウザ(Android、iOS)は少し工夫しないと連続で再生出来ませんでした。 また、その他にもAudio要素をスマホで扱う際に注意す
Android2.xでoverflow:scrollやautoが効かない(overflow:hiddenとして処理される)のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか? 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性(イベントが競合しても調整しやすいように)を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは? 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応(Android4.0.4の標準ブラウザ&Chromeで確認)、
HTML5が注目され始めた当初はcanvas要素やvideo要素といったものが話題の中心でしたが、 最近はWebSocketなどが話題になる機会が増えているのではないでしょうか? 本エントリーでは、マルチデバイスLab.で公開されているNode.js(WebSocket)を使ったリアルタイムWebの実例をご紹介します。 Node.jsとは サーバサイドJavaScriptの一つ。正式名称はNodeのようですが一般的に認知されているNode.jsと表記します。 既にご存知の方が多いと思うので誤解を恐れずに一言で説明すると、サーバ側のコード(実装)がJSで書けるようになります。 サーバサイドJavaScriptの中でもNode.jsが注目されている理由は、Socket.IO(WebSocketのブラウザ互換性を吸収するライブラリ)にいち早く対応した事と、高速かつ安全なアーキテクチャにあると言わ
レスポンシブWebデザインを導入したサイトにYoutube(iframe要素)を埋め込むと自動リサイズされず、スマホで閲覧した際に画面からはみ出ることがないでしょうか?(下記キャプチャ参照) 本エントリーでは、iframe要素をレスポンシブ対応にする方法をご紹介します。 iframe要素のレスポンシブ対応デモ 当社サイトの下記ページをご覧ください。 画面サイズに応じてYoutube(iframe要素)を自動リサイズしています。 http://www.informarc.co.jp/business/future/ 基本的な仕組み(ポイント) iframe要素をdiv要素でラップ <div class="iframeWrap"> <iframe width="320" height="180" src="http://www.youtube.com/embed/xxxxxx"></ifram
ECサイトなどで見かける画像の一部をルーペで見たように拡大する機能ですが、従来はJS+CSSで実装される事が多かったのでないでしょうか。 上記機能をCanvasで実現できると考え、早速作成しました。 デモ 下記画像のAとBのタイルは物理的には同じ色ですが、チェックや円柱からなる影の影響でBが薄く見える有名な錯視画像です。 拡大時はわかりやすいようにAとBをラインでつなげていますので、拡大してご覧ください。 対応ブラウザ IE9+ Chrome(最新版を推奨) Firefox(最新版を推奨) Safari(最新版を推奨) 仕組み マウス移動と連動して表示範囲を算出し、拡大表示領域に表示する。という基本的な仕組みは共通ですが拡大表示部分の実現方法が異なります。 Canvas版 マウス位置に応じて拡大表示範囲を算出 canvas要素へdrawImage()で画像を描画 具体的なコードは上記デモの
CanvasとGoogle Maps APIを組み合わせ、桜前線を構築しました。 Google Map単体で豊富な機能を備えていますが、そこにCanvasの表現力を加えることで実現の幅がさらに広まったのではないでしょうか? アジェンダ この作品の特長 桜前線 on Google Mapデモ 開花状況(桜の木アイコン)の表示仕様 制作のポイント この作品の特長 Mapをスクロールorズームイン・アウトするとビューポートにCanvas(花びらのエフェクト)が追従します。 PanoramioAPIを使って各地に桜写真を埋め込んでいます。 アクセス日で開花状況(桜の木アイコン)変化します。 桜前線 on Google Mapデモ 桜前線 on Google Map - jsdo.it - share JavaScript, HTML5 and CSS 開花状況(桜の木アイコン)の表示仕様 予め設定
リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。 只、一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス(YoutubeやUSTREAM)を使うケースが大半かと思います。 そういった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。 (仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ) さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。 今回はそんなVideo要素を中心にご紹介します。 Video要素とは 既にご存知かと思いますので誤解を恐れず簡単に説明すると、 ブラウザ単体で(Flash PlayerやQuickTimeなどプラグインを必
サイトへJSでタブインターフェースや文字サイズ変更機能を実装したとします。 これらは他のページへ遷移する毎にリセットされるため、一時的にクッキーなど(※)に状態を保存するような対応をするかと思いますが、 PCブラウザと違い「ブラウザを終了する」機会の少ないスマホブラウザはどのタイミングでセッションクッキーが削除されるのでしょうか? ※対象環境次第で(HTML5の)sessionStorageやlocalStorageの使用を検討 そこで、スマホブラウザのセッションクッキーの有効期限を把握すべく検証しました。 環境別の検証結果 iOS5.1.1 + Safari 削除されない動作 ホームボタンを押して終了。(実際にはバックグラウンドでブラウザが動作しており終了していない) 削除される動作 下記手順にてSafari終了。 ホームボタン2度押し→Safariアイコン長押し→アイコンが揺れだしたら
以前、HTML5 Canvasで表現する打ち上げ花火として、Canvasを使った作品をご紹介しましたが、 PC版Webkitを除く全てのブラウザ(スマホブラウザは勿論、IE9など)で重いという課題がありました。 PCブラウザに限定すれば、ブラウザやハードウェアの進化ととも改善される問題ではありますが、 スマホ(に限らず携帯端末)は2年縛りで購入するユーザーが圧倒的に多く、1・2年前の機種(環境)を使用する状況が続くことが容易に想像できます。 スマホサイトやアプリ制作を手掛けたことのある方はご存知の通り、Android2.xは色々と不都合があるだけでなく パフォーマンス面でも十分に配慮して制作する必要があります。 (Android4.xではGPUアクセラレーションがサポートされ、期待出来るのですが世代交代は先の話) そこで、本エントリーではロジックを工夫することで得られたパフォーマンス改善の
リサイズイベントで、所定の処理を再実行したり、レイアウト調整(Canvasのサイズ変更など)を行う。 私自身も頻繁に実装しますし、従来から存在するリサイズイベントですが、意図せず短期間に繰り返し(過剰に)実行されるケースが多々あります。 処理内容が低負荷であれば、繰り返し実行されても差し支えない(気づかない)ですが、 高負荷の場合(特にPCと比較して非力なモバイル端末)は、パフォーマンス低下の原因になり兼ねません。 この問題を解決するアプローチとして、従来のコードに少し手を加えるだけで不要な処理をキャンセルし、パフォーマンスを向上させるTipsをご紹介します。 ちなみにリサイズイベントは、スマホ/タブレット端末の向き(縦向き=ポートレート or 横向き=ランドスケープ)を変更した場合でも発生しています。 通常のリサイズイベント 通常、リサイズイベント実装は下記のようなコードになると思います
iOSでFlashがネイティブにサポートされない事から、JSあるいはCSS3でアニメーションを実装する機会が増えています。 クライアントから明確に「このアニメーションはJSorCSS3で(iOSでも閲覧出来るように)作って欲しい」と依頼を受けた経験のある方もいらっしゃるのではないでしょうか? CSS3アニメーションは現状、対応ブラウザの課題から使用が限定されるため、 私自身はJSでアニメーションを実装する機会の方が圧倒的に多いのですが、 今後の考え方として、以下のような方法を影響の少ない範囲で導入しています。 UIの制御をJSで アニメーションをCSS3で CSS3でアニメーションを実装した際のメリット・デメリットを列挙します。 今後も積極的に導入していくかは未定ですが、一手段としてご覧いただければ幸いです。 CSS3アニメーションのメリット・デメリット メリット JSアニメーションより比
レスポンシブWebデザインはディスプレイサイズ(特に横幅)に合わせてデザインを最適化する事で、1URLで全てのデバイスに対応できることが強み。 導入することで最も威力を発揮するデバイスはスマートフォンですが、マーケティング的にIEでもレスポンシブWebデザインが機能(閲覧可能)した方が良いケースもあるでしょう。 そういった状況下でお勧めするのがRespond.js。 Respond.js(github) Respond.jsとは IE6~8でCSS3 Media Queries(max-widthとmin-width)を解釈可能にするpolyfill(※)。 ネイティブで非対応の機能をpolyfillで実現すると、大半が処理が重くなったり動作が不安定など実用的ではないですが、Respond.jsは高速かつ安定しています。 ※非対応のブラウザに相応のインターフェースを実装 Respond.j
フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画... 制作時はSassでCSSを設計するが、公開(納品)後の運用環境ではSassが導入されていないケースがあるかと思います。そのような時はSassをexpandedのスタイルで出力する事で、ある程度可読性の... 現在RCでリリースの近いSass3.3ですが、新機能でBEMを取り入れた命名がしやすくなるようなので、正式リリースに備えて紹介&メモします。BEMとは?Block、Element、Modifi... 前回、CreateJSに簡単に触れましたがCanvasでちょっとしたビジュアルを作成する機会があった為、早速CreateJSを導入しました。先に結論から書くと、ノンライブラリ(Canv
このページを最初にブックマークしてみませんか?
『HTML5/CSS3, JavaScript 次世代WEB研究開発』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く