【toio】toio.jsをブラウザで動かすまでの手順について

はじめに

toio.jsをブラウザで動かしたいと思った時に、参考記事通りに実行してみたのですが、Webpackのバージョンが４から５にバージョンアップしたことで、モジュールのインストールやwebpackの追加設定が必要でした。
その手順をまとめます。

初心者のため、不要な箇所があるかもしれませんが、参考程度に見ていただければ幸いです。

動作環境

Windows11
Node.js：v20.11.0
npm：10.2.4
yarn：1.22.21
webpack：5.90.3

前準備

手順１　package.json作成

作業環境のディレクトリで作成します。
今回はC:\Users\ユーザー名\projectに作成しました。

package.json作成

yarn init -y

手順２　@toio/scannerを追加

toio.jsのパッケージをインストールします。

yarn add @toio/scanner

手順３　webpackインストール

webpackに関するツールを３つインストールします

• webpack
• webpack-cli
• copy-webpack-plugin

npm install -D webpack webpack-cli copy-webpack-plugin

手順４　ファイルを作成

webpack.config.jsファイルを作業環境のディレクトリに作成します。
参考記事をベースにしましたが、このまま実行するとエラーがでます。

参考記事のコードを引用 webpack.config.js

module.exports = {
  ...
  resolve: {
    alias: {
      // noble-macをnobleにバイパス
      'noble-mac': 'noble'
    }
  },
  plugins: [
    // ついでにwsも不要なので無効化
    new webpack.IgnorePlugin(/^ws$/)
  ],
  ...
};

webpack.config.jsを編集

webpack.config.jsの中身については以下の記事を参考にしました。

手順１ utilを追加

util.

npm install util

webpack.config.jsに以下のコードを追加する

webpack.config.js

fallback: {
      util: require.resolve("util/"),
    },

以下のページを参考にしました。

手順２　processを追加

prosessをインストール

process.

npm install process

webpack.config.jsに以下のコードを追加する

webpack.config.js

new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

以下のページを参考にしました。

手順３　stream-browserifyを追加

stream-browserify.

npm i stream-browserify

webpack.config.jsに以下のコードを追加する

webpack.config.js

resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
    }
  }

以下のページを参考にしました

手順４　bufferを追加

buffer.

npm install --save buffer

webpack.config.jsに以下のコードを追加する

webpack.config.js

resolve: {
    ...
    fallback: {
        ...
      "buffer": require.resolve("buffer")
    },

  },
  plugins: [
      ...
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
};

以下のページを参考にしました

ここまでで、追加設定は終了です。
最終的なwebpack.config.jsファイルは以下のようにしました。

webpack.config.js

'use strict';

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    alias: {
      'noble-mac': 'noble'
    },

    extensions: [ '.ts', '.js' ],
    fallback: {
      util: require.resolve("util/"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer")
    },

  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

    new webpack.IgnorePlugin({ resourceRegExp: /^ws$/ })
  ],
  devtool: 'source-map'
};

手順５　main.jsを編集

Web Bluetoothを動作させるには、クリックイベントを設置する必要があるようです。参考記事からコードを引用しました。

参考記事のコードを引用 main.js

import { NearestScanner } from '@toio/scanner';

document.getElementById('connect').addEventListener('click', async () => {
  const cube = await new NearestScanner().start();
  await cube.connect();
}

手順６　webpackビルド

以下のコードをコマンドプロンプトで実行すると、「dist」というフォルダができていると思います。

webpackビルド.

npx webpack

参考文献

この記事は以下の情報を参考にして執筆しました。