Sample Contents

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

動作検証にも使う API 動作確認的なコンテンツは QA ページ を参照

サンプルコンテンツ

• Tanzanite

  • 組込MHI向けサンプルを作る Project Tanzanite で用意したもの。タッチ操作限定でスワイプ、2D/3D トランジション、動画再生などを確認するのに使える

• RealWorld

  • Svelte - RealWorld
  • React/Redux - RealWorld
  • Vue - RealWorld
  • Angular - RealWorld
  • 各フレームワークで実アプリを想定した Spec を満たした実装をしているサンプル集

• Flux Slider

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

• HTML5 Video Effect

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

• HackerNews7

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

• Material Interaction

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

• 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) の効果が特に大きく表れる。

• ⭐️ Original Hover Effects https://tympanus.net/Tutorials/OriginalHoverEffects
  • CSS Transitions/Animations で軽量なホバーアニメーション例
• ⭐️ 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

CSS 3D Transform

• Flux Slider
• Carousel
• 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 でタイル状に分割表示、クリックでタイルを散らすことが出来るデモ

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

  • http://mrcoles.com/piano/

Web フォント

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

WebRTC

• WebRTC Samples
• getUserMedia (カメラ映像取得) 基礎
• カメラ映像にフィルタをかけて Canvas にスナップショット
• getUserMedia 解像度指定
• 双方向ビデオチャット (AppRTC video chat)
  • 細かな設定は URL パラメータで https://apprtc.appspot.com/params.html

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 向けで圧巻のデモ
• WebSocket JavaScript Racer Demo - WebGLのデモでよく使用されるhelloracer.comがドメインごと消滅したが、少し形を変えてwebsocket.orgで復活してた

PlayCanvas

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

WebVR

• A-FRAME
• WebVR Showcase
• VR Browser

UI フレームワーク

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

Polymer

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

• デモコンテンツ

  • 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 チームによるハイブリッドアプリ向けフレームワーク

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

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

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