HTML5の最近のブログ記事

Web サイトのモバイル対応の手法に関連する調査をしたついでのメモです。

最近のインターネット利用状況のデータ

ニールセンの調査による 2014年日本のインターネットサービス利用者数ランキングから、

インターネットの平均月間利用者数は、

  • PC   : 約 5210 万人 (-8%)
  • スマホ : 約 4260 万人 (+34%)

Facebook や Twitter のような SNS 系は当然としても、昨年は、楽天や Amazon のようなショッピングサイトでもスマホからのアクセスの方が多くなった。

今年も同じペースならば 2015 年にはスマホからの利用者数が PC からの利用者数を上回る。

サイトのモバイル対応を実現する手法

調べた範囲で見つかった、クライアントサイドの技術を使った手法

  1. レスポンシブデザイン
    CSSを使って表示デバイスに合わせた表示に切り替える
  2. JavaScript による処理の振り分け
    JavaScript で表示デバイスの特性を判別し、実行する処理を切り替える
  3. 動的な JavaScript の読み込み
    実行デバイスに応じて異なる JavaScript ファイルを読み込み、表示を変更
  4. 専用 URL
    PC とモバイルそれぞれに専用のアクセス先を用意する

サーバー側の機能が利用可能な場合は、更に 2 つのタイプが追加。

  1. サーバー側で動的に切り替え
    アクセス元のエージェント情報に応じて配信する HTML/CSS を変更
  2. JavaScript とサーバー側切り替えの組み合わせ
    JavaScript でデバイス情報を取得、サーバー側で配信内容を決定

Google の SEO 関連の記事には、「モバイル対応に JavaScript を使用する場合 2 の方法が推奨」 と書かれているので、3 と 6 は無視するとして、とりあえず残り 4 つの選択肢。手法それぞれについて、PCサイトとモバイルサイトの差を (細かい点は無視してとりあず) 表にすると、

  URL HTML,CSS,JS 描画の振舞い
レスポンシブ 同じ 同じ 同じ
JSで振り分け 同じ 同じ 異なる
サーバが判別 同じ 異なる 異なる
専用URL 異なる 異なる 異なる

 

全世界が対象のデータでは、オンラインショッピングサイトの 87% がモバイル向けに専用 URL を提供している。この調査ではモバイルからのアクセスが 55% となっており、ニールセンの日本市場の調査結果とと近いことから、日本市場でも多少は参考になりそう。

一方、1 年ちょっと前の数字ながら、モバイルユーザーからの売り上げの 79% が PC 用サイトからというデータもあり。デバイスの制約に対する単純な妥協としてのモバイル専用サイトはあまり効果的でない?

アドビの新しいオープンソースプロジェクトが公開されました。WebGL のシェーダを JavaScript で記述できるよう開発されたフレームワーク ShaderDSL.js です。

WebGL の場合は、シェーダーの記述に使用される言語は GLSL が一般的です。そのため、一般的な Web 開発者にとっては、WebGL を使うには、機能だけでなく、新しい言語を学ぶという手間も発生します。

また、複数のの言語を使って Web ページを記述するのは、メンテ等も大変そうです。そこで、JavaScript で WebGL のシェーダーが記述できたたらよいね!と思ったアドビが新しいフレームワークの開発に着手したというお話です。

(なぜアドビがこんなフレームワークを開発しているのか妄想してみると楽しいかもです)

CSS Regions は、現在 W3C で標準化が進められている CSS のレイアウト機能の 1 つです。従来の HTML コンテンツのレイアウトの常識を変える革新的な試みです。

従来の Web レイアウトは、テキストや画像を含むタグの並びを指定することで実現されてきました。この方式では、HTML 文書の構造が、実現可能なレイアウトを大きく制限します。これに対し、コンテンツの定義をレイアウトに使う領域の定義から分離するのが CSS Regions です。

CSS Regions では、「このコンテンツをこの領域に流し込む」 という指定ができます。そのため、DOM 構造そのままだったら表示されていたはずの場所とはまったく違う場所にコンテンツを表示することが可能になります。

また、複数の領域にまたがった流し込みの指定もできるので、あるコンテンツを別のコンテンツの両側分けてに表示、なんてこともごく簡単に実現できます。

特に、全ての画面で同じソースを利用するレスポンシブデザインでは、CSS Regions による恩恵が大きそうです。例えば、下の例では、複数カラム表示時には、真ん中に見出しを配置してその周りにテキストが回りこむような配置になっていますが、1 カラム表示時は見出しがブロック間に移動します。

Adobe の新しいオープンソースプロジェクトとして、メモリの管理状況をモニターする Web アプリの GCview が公開されました。Apache Software License 2.0 の下に公開されています。 (GCview@GitHub

提供されているのは V8 内部のメモリ管理を分析するコードと可視化を行う Web アプリです。具体的には、以下の 3 つのパートから構成されます。

  • JSON 形式で監視中のシステムの状況を記録するのデータフォーマット
  • データを解析し可視化するビジュアライザー
  • モニター用のデータ取得に使われる C++ コード

データフォーマットは抽象化されたものとなっていて、メモリ管理情報の監視以外にも拡張できるようです。

昨日の ADC OnAir では、Brackets の機能の一つとして、Cmd/Ctrl - K を押すと、関連する CSS の仕様のドキュメントが、エディタ内にインラインで表示されるというデモがありました。(41 分 30 秒過ぎあたり)

この Brackets に表示されるドキュメントは、ローカルにインストールされたものではなく、webplatform.org というサイトから取得して表示しているものです。

WebPlatform.org の特徴

WebPlatform.org は、以下の 3 つの大きな特徴を持っています。

  • W3C により召集された主要ベンダーがサポートするコミュニティ活動であること
  • 最も包括的で。かつ信頼できる Web テクノロジー情報を集める試みであること
  • MediaWiki のプラットフォームを使用していること

Dreamweaver のアップデートが公開されました。Creative Cloud 限定のアップデートです。

割と多くの変更がされているようですが、目立つところでは、

  • CS6 から導入された可変グリッド機能の拡張
  • HTML5 フォームのサポートの強化
  • Eadge Animate との連携機能の拡張
  • Edge Inspect との連携
  • Edge Web Font の統合
  • 拡張テーブルモードの復活

などがあります。最後の拡張テーブルモードは嬉しい人も多いのではないでしょうか。この機能を使うには、テーブルを右クリックしてコンテキストメニューから選択します。

先週発表された、Create Cloud から提供される Photoshop 13.1 アップデートでは、CSS 関連の機能が 2 つ追加されました。

  1. HTML や CSS ファイルに定義されている色をスウォッチに読み込み
  2. レイヤーを CSS コードとして書き出し

まず、「スウォッチの読み込み」 から、HTML や CSS ファイルも指定できるようになりました。これまで、スポイトツールを使って既存の Web ページから色を 1 つ 1 つ拾っていた、という人には嬉しい機能かもしれません。

もう 1 つは、シェイプやテキストなどを、CSS コードに変換する機能です。この機能を使うには、対象のオブジェクトを含むレイヤーを選択して、レイヤーメニューから 「CSS をコピー」 を選択します。

生成された CSS コードは、クリップボードに書き出されるので、コードエディタにコピーしてから利用します。

例えば、ドロップシャドー付きの角丸長方形を CSS コピー機能で変換すると、以下のような感じのコードが生成されます。

アドビから、Edge ツールとサービスに関する発表がありました。 (Adobe Edge Tools & Services

今後 Edge は、新しい Web ツールやサービスのブランドとして使われ、ツールやサービスの名称は "Edge xxxx" となるようです。先日の Edge Animate への名称変更は、この新しいブランディングに基づいていたということのようです。

今回の発表では、これまでコード名で呼ばれていた製品の名前も正式に (たぶん) 発表されました。現在の Edge 関連製品のラインアップは以下のようになっています。

  • Edge Animate (旧 Edge、正式にバージョン 1.0 として公開)
  • Edge Reflow (新発表 - 年末までにプレビューが公開予定)
  • Edge Code (Brackets のアドビディストリビューション - プレビュー版)
  • Edge Inspect (旧 Shadow)
  • Edge Web Fonts (新発表)
  • Typekit (発表済)
  • Phongap Build (発表済)

昨日の ADC OnAir の放送中に、池田さんの MBP が壊れたことに気付いた方はいらっしゃったでしょうか。何事も無かったかのように放送を乗り切った池田さん流石です。

私からは、アドビが中心になって進められている W3C のドラフト (というよりドラフト候補) をいくつか紹介させて頂きましたが、内容変更により準備時間が減った分、紹介できなかった内容を以下に補足します。

ちなみに昨日の資料はこちらです。

Adobe って W3C の活動に関わってるの?

コードを全く書かずに Web サイトをデザインして公開できるツール Muse のベータ 4 が公開されました。 (http://muse.adobe.com

最初に紹介したのが、約 3 ヶ月前ですが (新しい HTML ツール Adobe Muse プレビュー版公開)、ほぼ月 1 のペースで更新されていることになります。

今回から、AIR 3 が使われています。(そういえば Muse は AIR アプリでした) そのため、画像のサイズに関する制限が無くなったそうです。

また、今回から他言語対応が追加されました。 (日本語はまだのようですが) それに伴い、UI も一部変更されています。

その他、Muse が書き出す JavaScript コードが改善されたために、ウィジェットの読み込みと描画時間が改善されたのが主要な変更だそうです。細かな機能まで入れると、全部で 40 以上の機能拡張やバグ修正が行われたそうです。

だんだん使えるツールになってきてる感じもするので、サイト作るのにコード書きたくない、と思ってる人は試してみてはいかがでしょうか。

Muse のバッジが公開されています。Muse で作ったサイトを公開したら使って欲しいといことのようです。 (Made with Muse Badge

 

先日公開されたばかりの Adobe Edge (新しい HTML5 ツール Adobe Edge プレビュー版公開) プレビュー版が更新されました。(Adobe Edge Preview@Labs

Edge は HTML5, JavaScript, CSS3 ベースのモーション制作ツールです。最初にプレビュー版が公開されてからわずか一月あまりですが、プレビュー版 2 では、コミュニティからのフィードバックを元に多くの修正や機能追加が行われました。

プレビュー 2 のダウンロードは Labs からです。Adobe ID が必要です。 (Adobe Edge@Labs Downloads

プレビュー 2 の新機能

以下は、プレビュー版からの更新点です。これを見ると、まだまだできかけのツールだという感じですね。

Adobe から新しい HTML ツール Muse のプレビュー版が公開されました。今回は Adobe Labs だけでなく、専用のサイトが準備されています。 (http://muse.adobe.com

Muse はコードを書かずに Web サイトを制作するツールという位置づけです。HTML や JavaScript はあまり詳しくないけれど Web デザインは得意、という人向けのツール、ということのようです。コードの書き方にこだわりのある人は触らない方が良いかもしれません。

ツール公開と同時に Muse のサンプルサイトが公開されています (Katie's Cafe)。 他にも Muse を使って制作されたサイトがいくつか公開されていますのでご参考まで。(Muse Showcase

Muse プレビュー版のダウンロードには、上記のMuse 専用サイトの "Get Muse" というボタンを押します。Muse をインストールする際は Adobe AIR 2.7.1 以降が必要です。つまり Muse は Flash アプリケーションということになります。

Wallaby のプレビュー版が Adobe Labs に公開されました。(Wallaby@Labs

Wallaby は、昨年 10 月にロサンゼルスで開催された MAX のスニークピークセッションで紹介された技術で、FLA ファイルを HTML に変換します。これを使えば、iOS 上でも Flash Professional CS5 で制作したアニメーションを表示できます。

最初の公開となる今回のプレビュー版では、典型的な広告用のバナーの HTML への変換が目標とされています。複雑なタイムラインのアニメーションを HTML5 に変換できますが、(まだ) 多くの機能がサポートされていません。

ちなみに、Wallaby は Canvas ではなく SVG を使います。これは、パフォーマンスとコードの可読性の観点から選択されたそうです。

Wallaby のダウンロードはこちらです。(Wallaby@Labs Downloads

Wallaby はネイティブインストーラーとして配布される AIR アプリケーションです。Mac 版と Windows 版が提供されています。

推奨されるテスト環境は、

  • OS X 10.5 と 10.6 (殆どのテストは 10.6 で行われたとのこと)
  • Windows 7, Vista, XP (こちらも殆どのテストは Win 7 で行われたとのこと)

です。

Windows 環境では、"Microsoft Visual C++ 2008 SP1 Redistributable Package (x86)" がインストールされている必要があります。

Wallaby は WebKit に依存する機能を使っているため、利用できるブラウザーは限定されます。現在テストに使われているブラウザーは、

  • Chrome 8.0.552.215
  • Safari 5.0.3
  • iOS 4.2

です。

2015年4月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 5.2.11