Help us understand the problem. What is going on with this article?

JavaScript, CSS, 画像ファイルをHTMLに自動で埋め込む方法

More than 1 year has passed since last update.

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.jsinline-source というnpmパッケージを用いて埋め込みを実施します。

まず、npmコマンドで inline-source をインストールします

$ npm install inline-source

以下のスクリプトは inline.js と同じディレクトリにある index.html を読み込み、 dist/index.html に埋め込み後のHTMLを出力する例です

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 + webpackを用いて、Raspberry Piの無線LANの設定ファイルをブラウザ上で生成するツールを製作しておりました。

wpa-supplicant-conf-tool.png
Raspberry Piの無線LANをmicroSDで簡単に設定するためのツールを作った

このツールのHTMLファイルにJavaScriptとCSSを埋め込むことで、HTMLファイルだけ保存すればローカルで利用できるようになりました。

inline-source に依存したwebpackのプラグインを用いて埋め込みを実施することも考えましたが、 webpackでやるメリットがあまりなかったため、webpackでJavaScript, CSSをプロダクションビルドした後に埋め込みを別途実施するようなやり方にしました。

mascii
JavaScript, RaspberryPi, Arduino, ESP32の記事が多めです。大学院での専攻はグラフ理論でした。
https://mascii.hatenablog.com/
visasq
ビザスクは「知見と、挑戦をつなぐ」をミッションに、世界で1番のナレッジプラットフォームをつくっています。 様々なニーズにつなぐことで、実際に経験したことで得られた知識や意見を、知見として価値最大化します。組織、世代、地域を超えて、知見を集めつなぐことで、世界中のイノベーションに貢献します。
https://visasq.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした