kintone のプラグインにBASE64エンコードした画像を使う方法

今回は、プラグインに画像を使ってみたいと思います。

https://qiita.com/juri_don/items/567e8322eb080155bd23

↑こちらの、「**webpack.config.jsを作成する**」の手前までそのまま進めて下さい。

# webpack.config.jsを作成する

```js:webpack.config.js
const path = require("path");
const KintonePlugin = require("@kintone/webpack-plugin-kintone-plugin");

module.exports = {
  mode: "development",
  entry: {
    desktop: "./src/js/desktop.js",
    mobile: "./src/js/mobile.js",
    config: "./src/js/config.js",
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: "asset/inline",
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "src", "js", "dist"),
    filename: "[name].js",
  },
  plugins: [
    new KintonePlugin({
      manifestJSONPath: "./src/manifest.json",
      privateKeyPath: "./private.ppk",
      pluginZipPath: "./dist/plugin.zip",
    }),
  ],
};

```

※webpack.config.jsには以下を追加しています。とりあえずpng,jpb,gifの画像をBASE64エンコードできます。
webpack5で登場した [Asset Modulesのasset/inlineモジュール](https://webpack.js.org/guides/asset-modules/) を使います。

```js
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: "asset/inline",
      },
    ],
  },
```

このあと、manifest.json編集、package.json編集も↓の通りに進めましょう。

https://qiita.com/juri_don/items/567e8322eb080155bd23

# 画像を準備する

適当に画像を準備しました。ファイル名は onpu.png としました。

![onpu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/275cb02a-b467-f504-b77a-f92defbabd42.png)

これを image フォルダーに入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e918c9ce-f368-c839-e734-1d1a6ee5c3dc.png)

# 設定画面に画像を飾る

とりあえず、最初のサンプルコードを崩さないように画像だけ飾りましょう。

##`src/html/config.html` の一番上に1行追加します。

```html:config.html
<div id="sp"></div>
・・・省略・・・
```

## `src/js/config.js` にコードを追加

```js:config.js
import mainImage from "../image/onpu.png"; // onpu.pngを相対パスで指定
jQuery.noConflict();

(function ($, PLUGIN_ID) {
  "use strict";

  const sp = document.getElementById("sp"); // 追加
  const img = document.createElement("img"); // 追加
  img.src = mainImage; // 追加
  sp.appendChild(img); // 追加

  var $form = $(".js-submit-settings");
  ・・・・省略・・・・
```

# プラグイン本体（PC）に画像を飾る

こちらも、とりあえず最初のサンプルコードを邪魔しないように画像を飾ってみましょう。

## `src/js/desktop.js` にコードを追加する

```js:desktop.js
import mainImage from "../image/onpu.png"; // onpu.imageを相対パスで指定
jQuery.noConflict();

(function ($, PLUGIN_ID) {
  "use strict";

  kintone.events.on("app.record.index.show", function () {
    var config = kintone.plugin.app.getConfig(PLUGIN_ID);
    var spaceElement = kintone.app.getHeaderSpaceElement();

    const img = document.createElement("img"); // 追加
    img.src = mainImage; // 追加
    spaceElement.appendChild(img); // 追加

    var fragment = document.createDocumentFragment();
    var headingEl = document.createElement("h3");
  ・・・・省略・・・・
```

# ビルド&アップロード

ここまでできたら、`npm start` しましょう。

```shell
npm start
```

こんな感じでアップロードされたら成功！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5527b3fa-3f12-9630-8999-3a4bb208be4d.png)

# 結果

こんな感じに画像が飾られます。

| 設定画面 | 本体 |
|:-:|:-:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7f30f276-33cf-f3aa-d9eb-dabdd0727c6f.png)  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/4c9f6a5c-f217-df90-87a1-1849d7856d8e.png)|