Skip to content

9. ライブラリの活用

本章では、Web アプリケーション（教育システム）を効率的に開発するための、ライブラリやフレームワークを紹介します。

9.1 Intro.js によるチュートリアル

誰にでも使い方がわかりやすいシステムにするには、チュートリアルを用意することが望ましいです。ここでは Intro.js というチュートリアルを簡単に作成可能な JavaScript ライブラリの使い方を紹介します。

9.1.1 Intro.js の導入

Intro.js を導入するためには、公式サイトから参照可能な JavaScript と CSS の CDN を読み込ませましょう。CDN を読み込ませるには、<head>タグまたは<body>タグ内で以下のコードを記述します。

<script src="https://unpkg.com/intro.js/intro.js"></script>
<link href="https://unpkg.com/intro.js/introjs.css" rel="stylesheet" />

必要に応じてサンプルやドキュメントを参照してください。

9.1.2 コード実装例

実装例を以下に示します。説明を加えたい HTML の要素に対し、data-title, data-intro 等の属性を付与し、introJs().start() を呼び出すことで、チュートリアルを始めることができます。以下の実装例では、「Intro.js によるチュートリアル」ボタンを押すことで、チュートリアルが始まります。

説明を加える要素の順番を指定したい場合は、data-step 属性を使い、優先順位を表す数値を設定します。

9.2 Chart.js によるグラフ描画

物理シミュレーションの考察を効率よく進める上で、グラフ描画のテクニックを紹介します。HTML5 で追加された Blobオブジェクトを用いてデータを出力し、Excel などでグラフ化してもよいのですが、今回は Chart.js という Canvas 上にグラフ描画が可能な JavaScript ライブラリを使用していきます。

9.2.1 Chart.js の導入

導入方法は単純で、CDN などから Chart.js を読み込ませるだけです。特にこだわりが無ければ、CDN を参照する以下のコードを HTML に貼り付けましょう。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

グラフ描画はシミュレーションのデータに基づいて行うため、Chart.js をシミュレーションよりも前に読み込ませておく必要があります。使い方の詳細については、サンプルやドキュメントを参照してください。

9.2.2 コード実装例

シミュレーションとグラフを同一画面に出さず、タブなどで表示を切り替えることもできますが、いずれにしても、グラフ描画専用の Canvas を新たに一つ準備する必要があります。

実際にグラフ描画を行うコードをまとめると、少々長いですが以下のようになります。

グラフの描画は drawChart()関数で行うものとしており、draw()関数で描画が行われるたびに呼び出すようにしています。

9.2.3 解析解との比較

解析解を計算し、数値解と比較を行うコード例を以下に示します。時間刻み幅を変更して誤差の変化を観察してみましょう。

9.3 MathJax による数式表示

Web ブラウザ上で数式を美しく表示したい場合は、MathJax という JavaScript ライブラリを使うことができます。MathJax を導入することで、LaTeX や MathML などの記法による高品質な数式のレンダリングが可能になります。

9.3.1 MathJax の導入

MathJax は、以下のように CDN を参照することで簡単に導入することができます。

<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>

インライン数式を挿入したい場合は、\( E = mc^2 \) のように \( と \) で数式を囲います。ブロック数式を挿入したい場合は、\[ E = mc^2 \] のように \[ と \] で数式を囲います。その他の細かい使い方やオプションについては、公式ドキュメントを参照するようにしてください。

9.3.2 コード実装例

MathJax を実際に導入したコード例は以下のようになります。

9.4 TensorFlow.js による機械学習

Web ブラウザで手軽に機械学習を実行したい場合、TensorFlow.js という JavaScript ライブラリを使うことができます。TensorFlow.js は TensorFlow の JavaScript 版であり、さなざなな機械学習モデルを実行するための機能が、JavaScript と WebGL を使って提供されます。

TensorFlow.js を使うことで、画像処理（姿勢推定）、音声認識、自然言語処理、オンライン教育システムの AI、データ解析など、さまざまな機械学習アプリケーションの開発が可能となります。Teachable Machine を使うことで、転移学習用の機械学習モデルを簡単に作成することもできます。

9.4.1 TensorFlow.js の導入

TensorFlow.js は、以下のように CDN を参照することで導入することができます。

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

トレーニング済みのモデルデータを使いたい場合は、追加で幾つかのスクリプトを挿入する必要があります。具体的な使い方や使用可能なモデルの詳細については、公式サイトのデモやドキュメントを参照するようにしてください。

9.5 CSS フレームワーク

ユーザインタフェースの見た目や使い心地を改善する簡単な方法として、CSS フレームワークを導入するというものがあります。CSS フレームワークを使うことで、見た目の改善だけでなく、 レスポンシブ対応やアコーディオンメニューなど、さまざまな機能の実装も可能になります。

最も有名で広く使われているフレームワークとして、Bootstrap があります。その他にも、Google が提唱するマテリアルデザインのガイドラインに従って設計された、Materialize や、軽量でモバイルファーストな UIKit など、さまざまなフレームワークが利用できますので、自分に合ったものを探してみてください。

9.5.1 Bootstrap

Bootstrap を導入した際の実装例を以下に示します。

9.5.2 Materialize

Materialize を導入した際の実装例を以下に示します。「1 ステップ進む」「リセット」ボタンにカーソルを合わせるとヒントが出る「ツールチップ」機能を実装しています。また、Materialize では、ボタン部分のコード記述がこれまでと少し異なるので、注意が必要です。

9.5.3 UIKit

UIKit を導入した際の実装例を以下に示します。