Sample Contents

HTML のサンプルコンテンツリンク集

組込機器で動かすことを想定した書き方と内容のサンプルで公開されているものは見つからないので作ります。

• デモコンテンツ検討開始時のスライド
• デモコンテンツ作成関連 Issues

それができるまでは以下のサンプルコンテンツや要素技術の動作確認ができるコンテンツを参考までに。

サンプルコンテンツ

• Flux Slider

  • 2D/3D Transform でスライドをめくる処理のサンプル

• HTML5 Video Effect

  • HTML5 動画の再生＋Transform などを行うビデオデモ

• HackerNews7

  • Framework7 を利用したニュースビューア。シンプルな UI 遷移例

• Topeka - Quiz App

  • Polymer を利用したサンプルアプリ。ズームインアウトの UI 遷移例。キー入力必須なので注意

• Material Interaction

  • Polymer を利用したサンプル。

• HMI Project by HMI Logic

  • ドイツの組込機器向けデザイン会社で HTML5 によるユーザインターフェイスで iF DESIGN AWARD 2015 などを授賞しているもののサンプルデモが公開されている。コントローラの拡大時にはかなり広範囲にリペイントするため重たいなど、低スペック組込機器向けの実装ではない。
  • HMI System Showcase Demo - Video-Screencast

• Home Assistant

  • Python 3 で書かれた OSS のホームオートメーションプラットフォーム。読み込みが重たい。
  • Home Assistant Demo

• OAS (Open Automation Software) Web HMI

  • Live Demo
  • デザイン的には結構古典的な組み込みデバイス向けなので参考程度

• 20 Things I learned About Browser and the Web

  • 絵本的なコンテンツサンプル
  • ページめくり効果は CSS Transitions/Animations ではなく Canvas で描いている。

単体技術デモ

CSS Transitions & Animations

組込機器で使われるアニメーション処理で一番大事になる技術。GPU アクセラレーション (特に Composition) の効果が特に大きく表れる。

• Pure CSS Slides
  • 回転や平行移動を見やすい形で使っているので比較用に便利
  • :target 疑似クラス を使ってクリックすると #anchor が切り替わり適用対象のスタイルが変化し各要素 (ページ) の Transition が発生するようにしている (ついでに :hover とかも)
• WWDC 2015 Logo
• Pure CSS transition effects for off-canvas views
• Animation on Compositor thread demo
  • 裏で重たい JS を動かしつつ試すサンプル
  • ref: http://dbaron.org/log/20150916-compositor-animations
• Dozing Bird
• Swiper
• Star Wars: The Force Awakens in CSS

CSS 3D Transform

• Carousel
• Flux Slider
• A sphere built with CSS 3D transforms
• Webflow - 3D Transform
• CSS 3D Earth
• CSS 3D Clouds
• CSS scroll effects
  • サンプルをスクロールするためには、各サンプルをクリックしてから上下キーで操作

Multimedia

• GUIMark3 - ビデオコーデックテスト用

  • http://www.craftymind.com/factory/guimark3/video/
  • http://www.craftymind.com/factory/guimark3/video/html5_360p_base.html
  • http://www.craftymind.com/factory/guimark3/video/html5_480p_base.html
  • http://www.craftymind.com/factory/guimark3/video/html5_720p_base.html
  • http://www.craftymind.com/factory/guimark3/video/html5_720p_high.html

• HTML5 Video Destruction (Video x Canvas)

  • 640x360 Ogg Video を Canvas でタイル状に分割表示、クリックでタイルを散らすことが出来るデモ

• HTML5 Video Effect

  • ビデオを動かしたり変形させたり、CSS の効果と組み合わせられるデモ。あと CSS Filter があればなお良いが…

• JavaScript Piano - Audio 再生の反応性テストに

  • http://mrcoles.com/piano/

Web フォント

... フォントのデモも ...

WebRTC

• WebRTC Samples
• getUserMedia (カメラ映像取得) 基礎
• カメラ映像にフィルタをかけて Canvas にスナップショット
• getUserMedia 解像度指定
• 双方向ビデオチャット

WebGL

以下、ほぼ PC 向けのでもばかりで重たいが参考になりそうなモノを取捨選択していく

• MDN - Web GL テクノロジーデモ *
• WebGL Samples
  • WebGL Aauarium - Web 伝統の水槽デモ
  • Dynamic Cubemap
  • WebGL field
• PlayCanvas - スマホゲームなどで使われること多く mozilla も支援・採用してるフレームワーク
  • TANK
  • SWOOP
• Philo GL - WebGL のビジュアライゼーションフレームワーク
  • WebGL Globe
    • World Population - これくらいが動くと格好いい
  • GitHub リポジトリ
• WebGL Car - キー操作で走らせるのが楽しい
• WebGL Water - 物理演算との組み合わせ例
• Jenga
• Reflective Ball
• Bookcase
• Mother Earth
• ROME - 完全に PC 向けで圧巻のデモ

PlayCanvas

• Build your Home Lift
• RZR とう車のカスタマイズ
• BMW のカラーリング変更確認

WebVR

• A-FRAME
• WebVR Showcase
• VR Browser

UI フレームワーク

多くは PC やスマホ向けのフレームワークで組み込み系には重たすぎることが点には注意

Polymer

「スマホのような動作」を再現したい場合には Material Design の Polymer が便利

• デモコンテンツ

  • Topeka - Quiz App - GitHub
    • シンプルで非常に分かりやすい。
  • Polymer Shop Demo

• Build with Polymer - Polymer 採用コンテンツ集

  • Daily Stock Forecast
  • Polymer Mail (need Gmail sign-in)
  • Polymer Element Cagalog

Material Design Samples

• Inbox by Gmail

  • Material Design で作られたサイトの例として

• Material Interaction

  • Material Design のフルページデモ
  • コンテンツ感の遷移は CSS Transitions/Animations で、個別のコンテンツは Canvas で描いている。

• デバイスフォームファクタ別の Material Design について

  • Android Phone & Tablets
  • Android Wear
  • Android TV
  • Android Auto

Ionic

Angular JS ベースのフレームワーク。Cordova のように Android/iOS 向けアプリ作成が主用途のようだが Web アプリ作成も対象。

• サンプルアプリ
  • Pocket Guide
  • Qiita の新着投稿表示デモ
    • ionic でリッチなモバイルWEBサイトを実現する

Framework7

Android/iOS のハイブリッドモバイルアプリ向けフレームワーク

• Demo Apps
  • HackerNews7
  • Contacts7-MVC
  • Bug Reporter7

Onsen UI

Monaca チームによるハイブリッドアプリ向けフレームワーク

• サンプル
  • 花王 カタログ

...

ほかにもいろいろあるフレームワーク...

ダメ絶対: アニメーションを JavaScript の setTimeout とかでやってしまう古典的フレームワークやライブラリ

グラフィックスライブラリ

Processing.js

• Circle
  • http://haptic-data.com/toxiclibsjs/examples/circle3-points
• Polar Unravel
  • http://haptic-data.com/toxiclibsjs/examples/polar-unravel
• my life aquatic (NOTE: 音楽あり)
  • http://mylifeaquatic.herokuapp.com/

D3.js

• Collision Detection
  • http://bl.ocks.org/mbostock/3231298
• The Wealth & Health of Nations
  • https://bost.ocks.org/mike/nations/
• Chord Diagram
  • http://bl.ocks.org/mbostock/1046712

Raphaël (SVG)

• Image Rotation
  • http://dmitrybaranovskiy.github.io/raphael/image-rotation.html
• Chart
  • http://dmitrybaranovskiy.github.io/raphael/chart.html
• Clock
  • http://dmitrybaranovskiy.github.io/raphael/polar-clock.html
• Gear
  • http://dmitrybaranovskiy.github.io/raphael/gear.html

Vis.js

• Group 2D
  • http://visjs.org/examples/graph2d/03_groups.html
• Graph 2D
  • http://visjs.org/examples/graph2d/08_performance.html
• Network Groups
  • http://visjs.org/examples/network/nodeStyles/groups.html

B2G について

Firefox ブラウザではなく B2G OS のビルドとすればスマホやテレビのホーム画面や設定画面 (Gaia) をデモに使うことも可能。その場合には以下の点に注意。B2G OS 自体がアーキテクチャや UI 変更の過渡期にあたるバージョンをベースにしているため製品として安定した UI を使ってのデモにはならない。

• ホームボタン
  • Gaia は画面下からのスクロールでホームボタンの代わり
  • ホームボタン無しでは長押しできず、アプリ切り替え画面に遷移できない
• ウィンドウ管理
  • 画面端から左右スワイプでウィンドウの切替が正常動作しない？