トップページ > 技術情報 > HTML5

HTML5

コンポーネント・ドリブン・アーキテクチャ

次世代WEB標準技術『Web Components』を見据え、コンポーネント単位で設計しています。
『Web Components』とは、HTMLの要素を新規に作成し、再利用可能にする機能のことです。
コンポーネントは、AngularJS2への移植を視野に入れ、AngularJSの「Controller + Directive + Template」で構成しています。
コンポーネント間の連携は、メッセージ通信($emit、$broadcast)で行い、各コンポーネントの独立性を堅持しています。
コンポーネント化を推進することで、類似機能の重複実装を避けられるだけではなく、HTML全体の見通しを改善し、保守性・品質の向上にも貢献しています。
現在は仕様策定中であり、将来的に各ブラウザでの標準実装が期待されています。

多人数開発環境の構築

生産性の低いjavascript、cssを直接利用することは余りありません。 javascriptの代わりに、静的型でClassを利用できる『TypeScript』を、cssの代わりに『Sass』を利用しています。
Webpackを用いてCommonJSに対応し、TypeScriptファイルやHTMLテンプレートをrequireすることで依存関係を解消しています。
nodejsのタスクランナー(gulp)を常時起動し、ファイル編集と同時にTypeScript、Sassの自動ビルドが走ります。
ビルドされたTypeScriptとSassはそれぞれ1ファイルにまとめられ、SourceMapを利用することでブラウザ上で中身を確認、デバッグすることが可能です。
また、フラグの切替で、開発環境・テスト環境・リリース環境用のビルド設定(圧縮レベル・SourceMapの有無等)を変更できます。

RESTfulな画面遷移

SPA(シングル・ページ・アプリケーション)でありながら、ルーティングを制御し、画面とURLを一意に紐付けることで、全画面を直接、任意のタイミングで呼び出せます。

レスポンシブデザイン

メディアクエリを活用し、画面サイズに応じてレイアウトを変更することで、PC(IE、Chrome、Firefox、Safari)、iPad、Androidでの動作を実現しています。

可視化

可視化ライブラリ「D3.js」を利用し、DOMベースでチャートを描画しています。 Canvasでの描画と異なり、SVGはベクター形式で描画されるため、画面サイズの影響を受けにくく描画コストをほぼ一定に保つことができます。
大画面表示を前提にした業務系アプリケーションに親和性が高いと考えています。

PAGE TOP