--- title: JavaScript, CSS, 画像ファイルをHTMLに自動で埋め込む方法 tags: JavaScript CSS HTML Node.js author: mascii slide: false --- JavaScriptやCSSなどをひとつのHTMLに埋め込んでおけば、HTMLファイルだけ保存するとローカル(インターネットに繋がらない環境)で利用できるツールを作ることができます。 もちろん、jsファイルやcssファイルの中身をコピーし、JavaScriptやCSSを手動でHTMLに埋め込むこともできるのですが、jsファイル、cssファイル、jpgファイルなどを自動で埋め込む方法を見つけましたので紹介します。 # サンプル ## どんな感じのHTMLが出力されるか? このHTMLファイルが ```html inline-sourceのテスト
``` このようになるイメージです。 * `script` タグは `src` 属性が無くなり、 `` の間にJavaScriptが埋め込まれる * `link` タグは `style` タグに変更されてCSSが埋め込まれる * `img` タグは `src` 属性で指定された画像ファイルがデータURIスキームに変換され埋め込まれる ```html inline-sourceのテスト
``` ## 埋め込み方法 [Node.js](https://nodejs.org/ja/)と `inline-source` という[npm](https://www.npmjs.com/)パッケージを用いて埋め込みを実施します。 まず、npmコマンドで `inline-source` をインストールします ``` $ npm install inline-source ``` 以下のスクリプトは `inline.js` と同じディレクトリにある `index.html` を読み込み、 `dist/index.html` に埋め込み後のHTMLを出力する例です ```js:inline.js const { inlineSource } = require('inline-source'); const fs = require('fs'); inlineSource('./index.html', { compress: false }) .then(html => { fs.writeFileSync('./dist/index.html', html); }); ``` 埋め込みを実施したいタグ(`script`, `link`, `img` タグなど)には `inline` 属性を付与しておきます。 上記の `inline.js` では `dist/` ディレクトリを作っておかないとエラーが出るので、作成しておいてください ``` $ mkdir dist/ ``` 以下のコマンドで埋め込みを実施します ``` $ node inline.js ``` ## サンプルリポジトリ 以下のリポジトリにJavaScript, CSS, 画像ファイルを埋め込むサンプルを置きました。 https://github.com/mascii/inline-source-test `node inline.js` or `npm run inline` を実行すると、`inline.js` と同じディレクトリにある `index.html` を基としてJavaScript, CSS, 画像ファイルを埋め込んだHTMLを `dist/index.html` に出力します # 実例 以前に[Vue.js](https://jp.vuejs.org/index.html) + [webpack](https://webpack.js.org/)を用いて、Raspberry Piの無線LANの設定ファイルを**ブラウザ上で生成する**ツールを製作しておりました。 wpa-supplicant-conf-tool.png [Raspberry Piの無線LANをmicroSDで簡単に設定するためのツールを作った](https://qiita.com/mascii/items/a43d71572e1919e56398) このツールのHTMLファイルにJavaScriptとCSSを埋め込むことで、HTMLファイルだけ保存すればローカルで利用できるようになりました。 `inline-source` に依存したwebpackのプラグインを用いて埋め込みを実施することも考えましたが、 webpackでやるメリットがあまりなかったため、webpackでJavaScript, CSSをプロダクションビルドした後に埋め込みを別途実施するようなやり方にしました。