Sample Contents

dynamis edited this page Apr 18, 2018 · 39 revisions

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

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

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

サンプルコンテンツ

単体技術デモ

CSS Transitions & Animations

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

CSS 3D Transform

Multimedia

Web フォント

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

WebRTC

WebGL

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

PlayCanvas

WebVR

UI フレームワーク

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

Polymer

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

Material Design Samples

Ionic

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

Framework7

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

Onsen UI

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

...

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

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

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

Processing.js

D3.js

Raphaël (SVG)

Vis.js

B2G について

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

  • ホームボタン
    • Gaia は画面下からのスクロールでホームボタンの代わり
    • ホームボタン無しでは長押しできず、アプリ切り替え画面に遷移できない
  • ウィンドウ管理
    • 画面端から左右スワイプでウィンドウの切替が正常動作しない?
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.