JavaScriptやCSSなどをひとつのHTMLに埋め込んでおけば、HTMLファイルだけ保存するとローカル(インターネットに繋がらない環境)で利用できるツールを作ることができます。
もちろん、jsファイルやcssファイルの中身をコピーし、JavaScriptやCSSを手動でHTMLに埋め込むこともできるのですが、jsファイル、cssファイル、jpgファイルなどを自動で埋め込む方法を見つけましたので紹介します。
サンプル
どんな感じのHTMLが出力されるか?
このHTMLファイルが
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="assets/style.css" inline>
<title>inline-sourceのテスト</title>
</head>
<body>
<main id="main"></main>
<img src="assets/kominka-light.jpg" inline>
<script src="assets/script.js" inline></script>
</body>
</html>
このようになるイメージです。
-
scriptタグはsrc属性が無くなり、<script>と</script>の間にJavaScriptが埋め込まれる -
linkタグはstyleタグに変更されてCSSが埋め込まれる -
imgタグはsrc属性で指定された画像ファイルがデータURIスキームに変換され埋め込まれる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>#main {
font-size: 100px;
}
</style>
<title>inline-sourceのテスト</title>
</head>
<body>
<main id="main"></main>
<img src="data:image/jpeg;base64,/9j/4Q/+RXhpZgAATU0A(省略...)">
<script>(function() {
document.getElementById('main').innerText = 'Hello, World!';
})();
</script>
</body>
</html>
埋め込み方法
Node.jsと inline-source というnpmパッケージを用いて埋め込みを実施します。
まず、npmコマンドで inline-source をインストールします
$ npm install inline-source
以下のスクリプトは inline.js と同じディレクトリにある index.html を読み込み、 dist/index.html に埋め込み後のHTMLを出力する例です
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, 画像ファイルを埋め込むサンプルを置きました。
node inline.js or npm run inline を実行すると、inline.js と同じディレクトリにある index.html を基としてJavaScript, CSS, 画像ファイルを埋め込んだHTMLを dist/index.html に出力します
実例
以前にVue.js + webpackを用いて、Raspberry Piの無線LANの設定ファイルをブラウザ上で生成するツールを製作しておりました。
[Raspberry Piの無線LANをmicroSDで簡単に設定するためのツールを作った](https://qiita.com/mascii/items/a43d71572e1919e56398)
このツールのHTMLファイルにJavaScriptとCSSを埋め込むことで、HTMLファイルだけ保存すればローカルで利用できるようになりました。
inline-source に依存したwebpackのプラグインを用いて埋め込みを実施することも考えましたが、 webpackでやるメリットがあまりなかったため、webpackでJavaScript, CSSをプロダクションビルドした後に埋め込みを別途実施するようなやり方にしました。