Vue CLI でセットアップしたプロジェクトで kintone CLI を利用したカスタマイズ環境を作る目論見です。
どうにかこうにか形になりました。
ざっくり書いていますので読みづらいかも知れません。

こちらは JavaScript 編です。
TypeScript 編は以下をご覧ください。

Vue CLI と kintone CLI の共存を探る（TypeScript 編）

目的

Vue CLI で作られるプロジェクトの整然さと kintone CLI で行えるカスタマイズの開発やデプロイの簡易性を両立させる。
@kintone/rest-api-client を利用する。
kintone UI Component は諦める。（React でしか動かないので）
場合により Vuetify の利用を検討する。

フォーマッティング・lint に関しては以下の方針。
Vetur はフォーマットを実行させず、シンタックスハイライトなどの役割に専念。
eslint は静的解析のみ担当。コードフォーマットはしない。
コードフォーマットは Prettier が実行。

前提

Vue CLI および kintone CLI がグローバルインストールされている事。

npm install -g @vue/cli
npm install -g git://github.com/kintone/kintone-cli.git

プロジェクト作成手順

Vue.js プロジェクトをセットアップする

Vue CLI でプロジェクトを開始する。

vue create vue-cli-kintone-cli-js

以下の選択肢で進める。

? Check the features needed for your project:

• Babel
• Vuex
• CSS Pre-processors
• Linter / Formatter
• Unit Testing

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: ESLint + Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

kintone CLI でアプリを作成する

作成されたプロジェクトを VS Code で開き、ターミナルを起動する。
kintone CLI でアプリをセットアップする。

kintone-cli create-template

? What type of app you want to create ? Customization
? Do you want to set authentication credentials ? Yes
? What is your kintone domain ? (サブドメイン).cybozu.com
? What is your kintone username ? (ユーザー名)
? What is your kintone password ? (パスワード)
? Do you use proxy ? No
? Do you want to use React ? No
? Do you want to use TypeScript ? No
? Do you want to use webpack ? Yes
? What is the entry for webpack ? main.js
? What is the app name ? app
? Do you want to use @cybozu/eslint-config for syntax checking ? No
? What is the app ID ? (アプリ ID)
? What is the scope of customization ? ALL

app ディレクトリの下にソースが作成される。

開発サーバーをインストールする

この手順だとローカルプレビュー用の local-web-server がインストールされないため、手動で追加する。
現時点（2020 年 6 月）での最新版は 4.2 だが、このバージョンでは正しく動作しない模様。
kintone-cli でインストールされるものと同じバージョンの 2.6.1 をインストールする。

yarn add -D local-web-server@2.6.1

その他の関連ツールをインストールする

core-js が二重に入っている。
いったんアンインストールして最新版を追加。

yarn remove core-js
yarn add core-js

@kintone/rest-api-client をインストールする。

yarn add @kintone/rest-api-client

ESLint・Prettier の設定

以下を参考にする。
続・VSCode 上で vue ファイルに対して ESLint と Prettier が快適に動作する設定
VS Code で ESLint × Prettier のベストかも知れないプラクティス

yarn add -D eslint-config-prettier

プロジェクトルート直下の .eslintrc.js を修正

module.exports = {
  extends: [
    // --- 省略
    "prettier",
  ],
  // --- 省略
  globals: {
    kintone: true,
    event: true,
  },
};

プロジェクトルート直下に .eslintignore ファイルを作成。
dist フォルダを追跡から除外する。

.eslintignore

**/dist

標準のフォーマッティングを無効化し、Prettier が全て担当するようにする。
.vscode/settings.json に設定を加える。

.vscode/settings.json

{
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "vetur.format.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

.prettierrc を作る。
設定はお好みで。

.prettierrc

{
  "semi": false,
  "singleQuote": true
}

ディレクトリ構成

プロジェクトルート直下の src 以下のファイルを app/source に移動。
app/tests/unit フォルダを作成。
残った src と public、tests は不要なので削除。

app/source/main.js をとりあえず以下のようにする

app/source/main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

kintone.events.on("app.record.index.show", (event) => {
  console.log("Hello from kintone CLI");

  const elem = kintone.app.getHeaderSpaceElement();
  new Vue({
    store,
    render: (h) => h(App),
  }).$mount(elem);

  return event;
});

babel の設定

プロジェクトルート直下に babel.config.js が、 app の下に .babelrc が存在する。
プロジェクトルート直下の babel.config.js に app/.babelrc の内容をマージする。
以下のようになる。

babel.config.js

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ],
  "presets": [
    "@vue/cli-plugin-babel/preset",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ]
}

その後 app/.babelrc は削除ないしリネーム。

webpack の設定

.vue ファイルをビルドするために vue-loader, vue-template-compiler, url-loader, file-loader をインストールする。
また webpack の設定は開発ビルドとプロダクションビルドで設定を変えたいので、webpack-merge もインストールする。
加えて、プロダクションビルドではミニファイも行うので、 terser-webpack-plugin もインストールする。

yarn add -D vue-loader vue-template-compiler url-loader file-loader webpack-merge terser-webpack-plugin

webpack の設定は app 以下のものを使用する。
app/webpack.config.js を app/webpack.common.js にリネームし、内容を以下のようにする。

app/webpack.common.js

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: path.resolve(__dirname, "./source/main.js"),
  resolve: {
    extensions: [".ts", ".tsx", ".vue", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: `${path.basename(__dirname)}.min.js`,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: "vue-loader",
          options: {
            loaders: {
              js: {
                loader: "babel-loader",
              },
            },
          },
        },
      },
      {
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|svg|ico)(\?.+)?$/,
        use: {
          loader: "url-loader",
          options: {
            esModule: false,
            limit: 10000,
            fallback: {
              loader: "file-loader",
              options: {
                name: "img/[name].[ext]",
              },
            },
          },
        },
      },
    ],
  },
  performance: {
    maxEntrypointSize: 10000000,
    maxAssetSize: 10000000,
  },
  plugins: [new VueLoaderPlugin()],
};

開発ビルドの設定 app/webpack.dev.js は以下の通りにする。

app/webpack.dev.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
});

プロダクションビルドの設定 app/webpack.prod.js は以下の通りにする。

app/webpack.prod.js

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true } },
      }),
    ],
  },
});

新たに app/webpack.config.js を作り、以下のようにする。
このファイルでビルドターゲットを判定して、適切なファイルをロードするようにする。

app/webpack.config.js

module.exports = (env, argv) => {
  const mode = argv.mode.includes("development") ? "dev" : "prod";
  return require(`./webpack.${mode}.js`);
};

Jest の設定

特にない。
必要に応じてプロジェクトルート直下の jest.config.js を編集すればよい。

package.json の設定

コマンドの入力を簡略化するため scripts を以下のようにする。
webpack の設定ファイルもここでコントロールする。

package.json

  "scripts": {
    "dev": "ws --port ****",
    "serve-app": "kintone-cli dev --app-name app --watch --localhost",
    "devel-app": "webpack --mode development --config app/webpack.config.js",
    "build-app": "webpack --mode production --config app/webpack.config.js",
    "deploy-app": "kintone-cli deploy --app-name app",
    "test:unit": "jest"
  },

ws --port **** は任意のポート番号。
以下の記事で解説している。
kintone CLI をざっくり試す

.gitignore の設定

これまでの流れで app/auth.json は含まれているはず。
app/dist も弾くようにする。
その上で、今後仮に app が増えても大丈夫なようにする。

以下の通り修正。

.gitignre

*/auth.json
*/dist

.vscode/settings.json は共有したいので、.vscode の行は削除する。

ここまでで開発準備は終了。
あとはひたすらに開発に注力する。

開発フェーズ

開発・テスト

実際の開発は app/source/ 以下のファイルに対して行っていく事になる。

開発モード（ローカルサーバ）で起動

yarn serve-app

ローカルサーバへの参照が kintone アプリに適用され、テストが行えるようになる。

単体テストは以下のように実行。

yarn test:unit

テストファイルは app/tests/unit/ 以下に **.spec.js のファイル名パターンで記述する。

ビルド

yarn build-app

app フォルダの下に dist フォルダが作成されファイルがビルドされる。
ビルドしたファイルを手動で運用環境に適用したい場合に使う。
webpack.prod.js では TerserPlugin によりミニファイと console の除去が行われる。

デプロイ

yarn deploy-app

ビルドとデプロイを同時に実行するコマンド。
ビルドが実行され、終了後に運用環境にデプロイされる。

2 つめ以降のアプリのカスタマイズを作る場合

プロジェクトが複数のアプリカスタマイズで構成される場合、いくつかアプローチがある。

kintone-cli create-template を使う

kintone CLI 的には王道パターンではある。

kintone-cli create-template --app-name (新しいアプリ名)

と実行し、カスタマイズを新規で作成する。

作成されたフォルダに、既存のアプリカスタマイズのファイルをかぶせてやる。（要微修正）

この方法だと改めて依存モジュール類を再取得しに行く動作をするため、時間が掛かる上にせっかく整えた package.json がまた汚れてしまう。
（core-js が二重になってしまうなど）
従って、決して良いやり方ではないと思われるが、以下の方法の方が簡単。

既存のアプリをコピーする

既に作成済みのアプリカスタマイズの構成ファイルをコピーして整えていくパターン。
以下、作成済みのアプリカスタマイズを app、 新しいアプリカスタマイズを second-app として説明する。

フォルダ・ファイル構成

プロジェクトルート直下に新しいフォルダ second-app を作成する。
その下に、source フォルダ、 tests フォルダを作成する。
second-app/source/ 以下に必要に応じて下記フォルダを作る。

• assets
• components
• css
• js
• store

app/ の以下のファイルを second-app/ フォルダにコピーする。

• auth.json
• config.json
• webpack.common.js
• webpack.config.js
• webpack.dev.js
• webpack.prod.js

認証情報

新しいアプリカスタマイズの認証情報が異なる場合は second-app/auth.json を編集する。

アプリカスタマイズ情報

second-app/config.json を開き、以下の部分を編集する。

second-app/config.json

{
  "appID": **, // カスタマイズを適用するアプリID
  "appName": "second-app",
  "type": "Customization",
  "scope": "ALL",
  "uploadConfig": {
    "desktop": {
      "js": ["second-app/dist/second-app.min.js"],
      "css": []
    },
    "mobile": {
      "js": ["second-app/dist/second-app.min.js"]
    }
  }
}

基本的には編集前に app となっていたものを second-app に置き換えれば良い。

package.json の修正

package.json の scripts にコマンドを追加する。

作成済みの serve-app, devel-app,build-app,deploy-app をコピーし、app の部分を second-app に変えてやる。
合わせると以下の通りになる。

package.json

  "scripts": {
    "dev": "ws --port 8800",
    "serve-app": "kintone-cli dev --app-name app --watch --localhost",
    "devel-app": "webpack --mode development --config app/webpack.config.js",
    "build-app": "webpack --mode production --config app/webpack.config.js",
    "deploy-app": "kintone-cli deploy --app-name app",
    "serve-second-app": "kintone-cli dev --app-name second-app --watch --localhost",
    "devel-second-app": "webpack --mode development --config second-app/webpack.config.js",
    "build-second-app": "webpack --mode production --config second-app/webpack.config.js",
    "deploy-second-app": "kintone-cli deploy --app-name second-app",
    "test:unit": "jest"
  },

あとは元のアプリカスタマイズを参考に main.js、App.vue、components/**.vue 等を作り込んでいく。

それなりに作業が多くオペミスが起こりやすいので注意が必要。

Vuetify を利用する場合

Vue CLI でインストールし、その成果を app 以下に移してやると言う流れ。
※この流れでは IE11 で正しく動作しない。IE11 が要件に入らない場合のみ採用できる。

vue add vuetify

インストールが始まる。
道中でプリセットの選択を求められる。
デフォルトで良い。

? Choose a preset: Deafult (recommended)

public/index.html が存在していないと最後にエラーが出るが、インストール自体は正常に行われているので問題ない。

プロジェクトルート直下の src 以下にファイルが作成される。
src/App.vue を app/source/App.vue に上書き。
src/components/HelloWorld.vue を app/source/components/HelloWorld.vue に上書き。
src/assets/Logo.svg を app/source/assets/ に移動。
src/plugins フォルダを app/source/ に移動。
src フォルダは不要なので削除。

app/plugins/vuetify.js を以下のように修正。

app/plugins/vuetify.js

import "@mdi/font/css/materialdesignicons.css";
import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi",
  },
});

app/source/main.js を以下のように修正する。

app/source/main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

kintone.events.on("app.record.index.show", (event) => {
  console.log("Hello from kintone CLI");

  const elem = kintone.app.getHeaderSpaceElement();
  new Vue({
    store,
    vuetify,
    render: (h) => h(App),
  }).$mount(elem);

  return event;
});

app/webpack.coomon.js に以下の記述を追加。

app/source/webpack.common.js

const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");

module.exports = {
  // 省略
  module: {
    rules: [
      // 省略
      // CSS に対するルールの次に記述する
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                indentedSyntax: true // optional
              }
            }
          }
        ]
      },
      // 省略
      // いちばん下に追加する
      {
        test: /\.(woff|woff2|eot|ttf)(\?.+)?$/,
        use: {
          loader: 'url-loader',
          options: {
            esModule: false,
            limit: 1000000
          }
        }
      }
    ]
  }
  plugins: [
    new VueLoaderPlugin(), // 既に記述済み
    new VuetifyLoaderPlugin(),
  ],
};

追加のライブラリをインストールする。

yarn add -D vue-style-loader fibers deepmerge @mdi/font

これで Vuetify が表示できるようになる。

雑感

Vue CLI と kintone CLI を良い感じに共存させようと言う考えから始めたが、あとでライブラリを追加したり多くの設定ファイルに手を入れたりファイルを移動させたりと、結局のところ両者の良さを良い感じに活かすと言うよりはどうにかこうにか妥協点を見出したと言う形になったように思う。
とは言え、Vue.js の環境をゼロから（Vue CLI を使わずに）作成するのは今となってはもう面倒この上ないし、kintone CLI のコマンド一発でデプロイできる便利さは開発工数の削減に効果があるのは間違いなく、無理っくり感が否めない構成とは言えテンプレート化できたのは十分なメリットをもたらすのではなかろうか。

※今回の成果は近日中に GitHub にアップする予定です。

参考

VS Code に Prettier・ESLint・Stylelint を導入してファイル保存時にコードを自動整形させる方法
続・VSCode 上で vue ファイルに対して ESLint と Prettier が快適に動作する設定
VS Code で ESLint × Prettier のベストかも知れないプラクティス
kintone CLI をざっくり試す

こんにちは！
今回、Quita初投稿です。
ブログ書いたり、Noteに投稿したことはあったんですが、なんとなくQuitaは敷居が高くて、避けていました（言い訳です...笑）
どうせ書くなら、読者の方にとって価値ある情報を提供していきたいと思っていますので、ご指摘・ご感想いただけると嬉しいです！

本記事ではJavaScript処理速度の違いについて、調べてみました。

JavaScriptにおける処理速度の計測方法

JavaScriptには処理速度を計測する方法がいくつかあります。
代表的なものは以下の３つ

1. performance.now()を使った方法

今回はこちらの関数を使って計測します。
performance.now()はタイムスタンプを返します。
単位はミリ秒で、精度はブラウザによって異なるようですが、Firefoxでは２ミリ秒と書かれています。
▶︎詳しくはこちら
どのように計測するかというと、ざっくりとこんなイメージです。

script.js

//タイムスタンプ（開始時間）を取得
const startTime = performance.now();

//（計測対象の処理を記述）
//・・・

//タイムスタンプ（終了時間）を取得
const endTime = performance.now();

//処理時間 = タイムスタンプ（終了時間） - タイムスタンプ（開始時間）
const result = (endTime - startTime);

2. ブラウザの開発者ツール（Chromeなど）

単位が1ミリ秒。とても簡単に計測することができます。

（イメージ）

3. Date.now()を使った方法

Date.now()はperformance.now()の下位互換のような存在です。（処理速度の計測において）

For文とWhile文を比較

ForとWhile ２大ループ文の比較です。
計測条件を合わせるため、ループ文の中の処理は同じにしてあります。
（処理内容に深い意味はないので、突っ込まないでください...)

script.js

// 処理速度を計測・コンソール出力するための関数
function measure(name, func) { //第一引数：関数名、第二引数：関数
  const startTime = performance.now(); //タイムスタンプ（開始時間）
  func(); //引数で渡された関数を実行
  const endTime = performance.now(); //タイムスタンプ（終了時間）

  const result = (endTime - startTime);
  const resultStr = result.toPrecision(4); //有効桁数を４桁に変換
  console.log(`${name}：${resultStr}`); //コンソールに出力
}

// For文
const funcFor = () => {
  const data = [];
  for(let i=1; i< 100000; i++) {
    data.push(Math.random()); //ランダムな値を配列に追加
    if(i > 1) {
      if(data[i] < data[i - 1]) {
        data[i] = data[i - 1];
      }
    }
  }
};

// While文
const funcWhile = () => {
  let i = 1;
  const data = [];
  while(i< 100000) {
    data.push(Math.random());
    if(i > 1) {
      if(data[i] < data[i - 1]) {
        data[i] = data[i - 1];
      }
    }
    i++;
  }
}

// 関数呼び出し
measure('For文', funcFor);
measure('While文', funcWhile);

結果

実行ごとにブレがあるので、５回の平均値をとってみました。

	1回目	2回目	3回目	4回目	5回目	平均値
For文	7.305	10.71	8.690	9.995	7.645	8.869
While文	9.680	11.84	10.81	8.390	7.480	9.640

単位：ミリ秒

For文の勝利！!

For文とWhile文の処理速度を比較した結果
For文(平均8.869)　＜　While文（平均9.640）
For文の方が若干処理速度が早いことが分かった。

※単純な処理速度の比較です。
※素人の測定結果です

なぜFor文の方が早いのかはまだ分かっていません。。

これを機に処理速度を意識したコーディングをしていきたいと思いました。

皆さんも興味があれば、色々処理速度を測って、遊んでみてください。

参考にさせてもらった記事
https://sbfl.net/blog/2017/12/01/javascript-measure-time/

JavaScript で複数ファイルを zip にまとめてダウンロードする方法になります。

サーバーから取得したファイルでも、JavaScript で動的に生成したコンテンツでも、どちらも同様に保存できます。

既に類似記事はあるかと思いますが、自分にとって使いやすいコードを載せようと思います。

1. はじめに

画像ファイルやなんらかのバイナリファイルなど、既に圧縮されているファイルをさらに zip に圧縮しようとすると、圧縮・解凍にとても時間がかかったり、ファイルサイズもほぼ減らないことがあるため、どんなファイルでも扱いやすいようにするためここでは「無圧縮」にしています。

テキストファイルしか扱わないような場合には圧縮した方が良くなります。

2. ブラウザ上の場合

クライアントサイドの JavaScript での例です。

ここでは JSZip という外部ライブラリを使用して zip にします。

参考「JSZip」

2.1. コード

サーバーから取得したファイルを zip にまとめます。

ここではファイルの元のディレクトリは考えず、全て同じフォルダに入れて zip にします。

※モダンな JavaScript の書き方をしているため、IE などではトランスコンパイルや Polyfill が必要です。

(async () => {

    // 動的 import が使用できない前提
    const importInNoModule = src => new Promise(resolve => {
        const s = document.createElement('script');
        s.onload = () => { resolve(); };
        s.src = src;
        document.head.append(s);
    });

    await importInNoModule('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js');

    // 
    const getNameContentPairsFrom = async urls => {

        const promises = urls.map(async url => {

            // メモ: クロスオリジンで通信したい場合、サーバー側で許可の設定がされていないなければ、
            //       クライアントサイドの JavaScript ではどう記述してもアクセス不可
            const response = await fetch(url);

            const content = await response.blob(); // new Uint8Array(await response.arrayBuffer()) も可
            // メモ: 本当はこれだけでは不十分。クエリパラメータにスラッシュが含まれる可能性がある
            const name = url.slice(url.lastIndexOf('/') + 1);

            return { name, content };

        });

        // 
        const pairs = [];

        for (const promise of promises) {
            pairs.push(await promise);
        }

        return pairs;

    };

    const generateZipBlob = (nameContentPairs, name) => {

        const zip = new JSZip();

        const folder = zip.folder(restrictFileNames(name));

        nameContentPairs.forEach(nameContentPair => {

            const name = restrictFileNames(nameContentPair.name);
            const content = nameContentPair.content;

            folder.file(name, content);

        });

        return zip.generateAsync({ type: 'blob' }); // デフォルトで無圧縮

    };

    const saveBlob = (blob, name) => {

        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = restrictFileNames(name) + '.zip';

        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

    };

    /**
     * Windows のファイル名に使用できない文字をエスケープ
     * Mac や Linux より Windows の方がファイル名の制限が厳しいため、Windows に合わせる
     */
    const restrictFileNames = name => name.replace(/[\\/:*?"<>|]/g, c => '%' + c.charCodeAt(0).toString(16));

    // 
    const name = 'test';

    const urls = [/* ... URL 文字列配列 */];

    const zipBlob = await generateZipBlob(await getNameContentPairsFrom(urls), name);

    saveBlob(zipBlob, name);

})();

• getNameContentPairsFrom()
  • URL の一覧からファイルを取得し、ファイル名とファイル内容 (Blob 形式) を配列で返します
  • (Uint8Array も可)
• generateZipBlob()
  • JSZip を用いて、複数ファイルの Blob を zip の Blob にします
• saveBlob()
  • Blob からファイルに保存します

2.2. 注意点

JavaScript が実行されるページのドメインと、取得しようとしているファイルの URL のドメインが異なると、ブラウザの Cross-Origin Resource Sharing のセキリティの制限ではじかれるため、サーバー側の設定で許可していない限り Blob を取得することはできません。

もし、取得しようとしているファイルが画像ファイルの場合、WEB ページ上で <img> を使った表示はできますが、そこから <canvas> を介して Blob を取得しようとしても、セキリティではじかれます。

参考「画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN」

3. Deno の場合

サーバーサイドやローカルで実行可能な Deno の JavaScript での例です。

Deno 向けのラッパーがあるのでそれを利用します。

参考「GitHub - hayd/deno-zip: A JSZip wrapper for handling zipfiles in deno」

3.1. コード

Deno 版

import { JSZip } from 'https://deno.land/x/jszip/mod.ts';

// 
const getNameContentPairsFrom = async urls => {

    const promises = urls.map(async url => {

        const response = await fetch(url);

        const content = new Uint8Array(await response.arrayBuffer());
        // メモ: 本当はこれだけでは不十分。クエリパラメータにスラッシュが含まれる可能性がある
        const name = url.slice(url.lastIndexOf('/') + 1);

        return { name, content };

    });

    // 
    const pairs = [];

    for (const promise of promises) {
        pairs.push(await promise);
    }

    return pairs;

};

const generateZipUint8Array = (nameContentPairs, name) => {

    const zip = new JSZip();

    const folder = zip.folder(restrictFileNames(name));

    nameContentPairs.forEach(nameContentPair => {

        const name = restrictFileNames(nameContentPair.name);
        const content = nameContentPair.content;

        // メモ: Deno 版 JSZip では、file() でなく addFile()
        // メモ: Deno 版 JSZip では、Blob を使用できない (ver.0.6.0 現在)
        folder.addFile(name, content);

    });

    return zip.generateAsync({ type: 'uint8Array' }); // デフォルトで無圧縮

};

const saveUint8Array = (uint8Array, name) => Deno.writeFile(restrictFileNames(name) + '.zip', uint8Array);

/**
 * Windows のファイル名に使用できない文字をエスケープ
 * Mac や Linux より Windows の方がファイル名の制限が厳しいため、Windows に合わせる
 */
const restrictFileNames = name => name.replace(/[\\/:*?"<>|]/g, c => '%' + c.charCodeAt(0).toString(16));

// 
const name = 'test';

const urls = [/* ... URL 文字列配列 */];

const zipUint8array = await generateZipUint8Array(await getNameContentPairsFrom(urls), name);

await saveUint8Array(zipUint8array, name);

• getNameContentPairsFrom()
  • URL の一覧からファイルを取得し、ファイル名とファイル内容 (Uint8Array 形式) を配列で返します
• generateZipUint8array()
  • JSZip を用いて、複数ファイルの Uint8Array を zip の Uint8Array にします
• saveUint8Array()
  • Uint8Array からファイルに保存します

3.2. 注意点

Deno 版の JSZip では (ver.0.6.0 現在) Blob を使うことができないため、Uint8Array を使用します。

4. その他

実用的には、URL からファイル名を取り出す処理や、保存ファイル名を決める処理をもっとしっかりする必要があります。

本記事のサンプルコードでは 1 つのディレクトリに複数ファイルをまとめているため、異なるディレクトリの同一ファイル名が扱えない問題があります。

保存ファイル名にクエリパラメータが含まれる場合、拡張子を自動で補正する機能を追加するとより実用的かと思います。

JavaScript で動的に生成したコンテンツを保存したい場合は、getNameBlobPairsFrom() の代わりに自前で Blob を生成してください。

クライアントサイドの JavaScript で、複数ファイルを zip にまとめてダウンロードする方法になります。

サーバーから取得したファイルでも、JavaScript で動的に生成したコンテンツでも、どちらも同様に保存できます。

既に類似記事はあるかと思いますが、自分にとって使いやすいコードを載せようと思います。

1. コード

サーバーから取得したファイルを zip にまとめる例です。

ここでは、JSZip という外部ライブラリを使用して zip にします。

ここではファイルの元のディレクトリは考えず、全て同じフォルダに入れて zip にします。

※モダンな JavaScript の書き方をしているため、IE などではトランスコンパイルや Polyfill が必要です。

(async () => {

    // 動的 import が使えない状況の想定
    await new Promise(resolve => {

        const s = document.createElement('script');
        s.onload = () => { resolve(); };
        s.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js';
        document.head.append(s);

    });

    // 
    const getNameBlobPairsFrom = async urls => {

        const promises = urls.map(async url => {

            // メモ: クロスオリジンで通信したい場合、サーバー側で許可の設定がされていないなければ、
            //       クライアントサイドの JavaScript ではどう記述してもアクセス不可
            const response = await fetch(url);

            const blob = await response.blob();
            // メモ: 本当はこれだけでは不十分。クエリパラメータにスラッシュが含まれる可能性がある
            const name = url.slice(url.lastIndexOf('/') + 1);

            return { name, blob };

        });

        // ここではサーバーの負荷を考えて、直列実行
        // 並列実行したい場合は const blobs = await Promise.all(promises);
        const blobs = [];

        // await を使いたいため、forEach を使わない (他に直列実行の実装法あり)
        for (const promise of promises) {
            blobs.push(await promise);
        }

        return blobs;

    };

    const generateZipBlob = (nameBlobPairs, name) => {

        const zip = new JSZip();

        const folder = zip.folder(name);

        nameBlobPairs.forEach(nameBlobPair => {
            // TODO: ファイル名が OS で使用できるかチェック
            folder.file(nameBlobPair.name, nameBlobPair.blob);
        });

        return zip.generateAsync({ type: 'blob' }); // デフォルトで無圧縮

    };

    const saveBlob = (blob, name) => {

        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = name + '.zip';

        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

    };

    // 
    const name = 'test';

    const urls = [/* ... URL 文字列配列 */];

    const zipBlob = await generateZipBlob(await getNameBlobPairsFrom(urls), name);

    saveBlob(zipBlob, name);

})();

• getNameBlobPairsFrom()
  • URL の一覧からファイルを取得し、ファイル名とファイル内容 (Blob 形式) を配列で返します
• generateZipBlob()
  • JSZip を用いて、複数ファイルの Blob を zip の Blob にします
• saveBlob()
  • Blob からファイルに保存します

参考「JSZip」

2. 注意点

JavaScript が実行されるページのドメインと、取得しようとしているファイルの URL のドメインが異なると、ブラウザの Cross-Origin Resource Sharing のセキリティの制限ではじかれるため、サーバー側の設定で許可していない限り Blob を取得することはできません。

もし、取得しようとしているファイルが画像ファイルの場合、WEB ページ上で <img> を使った表示はできますが、そこから <canvas> を介して Blob を取得しようとしても、セキリティではじかれます。

参考「画像とキャンバスをオリジン間で利用できるようにする - HTML: HyperText Markup Language | MDN」

3. その他

実用的には、URL からファイル名を取り出す処理や、保存ファイル名を決める処理をもっとしっかりする必要があります。

zip 内のファイル名に OS によって使用できない文字が含まれていたり、クエリパラメータを表現できなかったり、異なるディレクトリの同一ファイル名が扱えないなどの問題があります。

JavaScript で動的に生成したコンテンツを保存したい場合は、getNameBlobPairsFrom() の代わりに自前で Blob を生成してください。

概要

今回調べもので canvas の表示を画像として kintone の添付ファイルに保管できないか調べる機会がありました。試しに kintone アプリを作る際に折角なら canvas に Web カメラ画像を取り込んで保管するまでを実装を思い立ち、今回試してみました。

Web カメラ画像を canvas に表示する

先ず kintone に実装する前に、html ファイルでWebカメラの表示試験を行います。
id が contents の div 内に、video と canvas を追加します。

<body>
<h1>Webカメラの映像をvideoとcanvasに表示</h1>
<div id="contents"></div>
<div><a id="download" href="#" download="canvas.png" onClick="downloadImage()">画像ダウンロード</a></div>
</body>

webカメラの表示

Webカメラを video に表示します。
今回は JavaScript から video を追加していますが、HTML に直接タグを記述しても問題ありません。
navigator.mediaDevices.getUserMedia() メソッドで、Webカメラを使用する許可をユーザーに求め、許可を得た場合に動画をストリームで受信できるようになり、then で取得できた際に video.srcObject に代入しています。これだけで、Webカメラの画像がブラウザに表示されます。

    // video にWebカメラの映像を表示
    let videoPreview    = document.createElement('div');

    let video      = document.createElement('video');
    video.id       = 'video';
    video.width    = cameraSize.w;
    video.height   = cameraSize.h;
    video.autoplay = true;
    videoPreview.appendChild(video);

    document.getElementById('contents').appendChild(videoPreview);

    // Webカメラの映像を video にセット
    let media = navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width:  { ideal: resolution.w },
            height: { ideal: resolution.h }
        }
    }).then(function(stream) {
        video.srcObject = stream;
    });

結果

PC内蔵のカメラ動画を表示しました。

Webカメラを表示を canvas に複写する

video の webカメラ表示を canvas に複写表示します。
こちらも今回は JavaScript から canvas を追加していますが、HTML に直接タグを記述しても問題ありません。
キャンバスの drawImage() メソッドで、video からフレーム画像取得を繰り返さないと canvas に同じ動画を表示できないのですが、requestAnimationFrame() メソッドを使うと、ブラウザが次の再描画を行う前に canvasUpdate() を実行するようで、canvas に video と同じ動画が表示できました。ブラウザの JavaScript の進化には驚きますね！

    // canvas にvideoの映像を表示
    let canvasPreview    = document.createElement('div');

    let canvas    = document.createElement('canvas');
    canvas.id     = 'canvas';
    canvas.width  = canvasSize.w;
    canvas.height = canvasSize.h;
    canvasPreview.appendChild(canvas);

    document.getElementById('contents').appendChild(canvasPreview);

    // video の映像を canvas にセット
    let canvasCtx = canvas.getContext('2d');
    canvasUpdate();

    function canvasUpdate() {
      canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(canvasUpdate);
    };

結果
canvas に video と同じWebカメラの動画が表示されています。

以下が全てのコードです。

webcam.html

<html>
<head><title>Webカメラの映像をvideoとcanvasに表示</title></head>

<body>
<h1>Webカメラの映像をvideoとcanvasに表示</h1>
<div id="contents"></div>
<div><a id="download" href="#" download="canvas.png" onClick="downloadImage()">画像ダウンロード</a></div>
</body>

<script type="text/javascript">

    const cameraSize = { w: 640,  h: 400 };
    const canvasSize = { w: 640,  h: 400 };
    const resolution = { w: 1280, h: 720 };

    // video にWebカメラの映像を表示
    let videoPreview    = document.createElement('div');
    let videoText       = document.createElement('p');
    videoText.innerHTML = 'videoにWebカメラ表示';
    videoPreview.appendChild(videoText);

    let video      = document.createElement('video');
    video.id       = 'video';
    video.width    = cameraSize.w;
    video.height   = cameraSize.h;
    video.autoplay = true;
    videoPreview.appendChild(video);

    document.getElementById('contents').appendChild(videoPreview);

    // Webカメラの映像を video にセット
    let media = navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width:  { ideal: resolution.w },
            height: { ideal: resolution.h }
        }
    }).then(function(stream) {
        video.srcObject = stream;
    });

    // canvas にvideoの映像を表示
    let canvasPreview    = document.createElement('div');
    let canvasText       = document.createElement('p');
    canvasText.innerHTML = 'canvasにvideoのWebカメラ画像を表示';
    canvasPreview.appendChild(canvasText);

    let canvas    = document.createElement('canvas');
    canvas.id     = 'canvas';
    canvas.width  = canvasSize.w;
    canvas.height = canvasSize.h;
    canvasPreview.appendChild(canvas);

    document.getElementById('contents').appendChild(canvasPreview);

    // video の映像を canvas にセット
    let canvasCtx = canvas.getContext('2d');
    canvasUpdate();

    function canvasUpdate() {
      canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(canvasUpdate);
    };

    // canvasの画像をダウンロード
    function downloadImage() {
      var base64 = canvas.toDataURL();
      document.getElementById("download").href = base64;
    }
</script>
</html>

kintone でWebカメラを表示し保管するアプリを作る

前座が長くなりましたが、いよいよ kintone に Webカメラの画像を保管する方法を試します。
今回「Webカメラ写真保存」というアプリを追加しました。

フィールドの設定

アプリのフィールドは以下のように設定しています。（レコード番号などはお好みで。）

フィールド名	タイプ	フィードコート・要素ID	その他
添付ファイル	添付ファイル	添付ファイル	サムネイルの大きさは 250x250
Webカメラ画像	グループ	Webカメラ画像	明細画面ではWebカメラフィールドを非表示に
	スペース	videoPreview	Webカメラ画像グループ内に配置
	スペース	canvasPreview	Webカメラ画像グループ内に配置
ファイルID	文字列（1行）	ファイルID	Webカメラ画像グループ内に配置

JavaScript プログラムの作成

アプリに以下のJavaScriptのプログラムファイルを追加します。
JavaScript でWebカメラをcanvasに表示する方法についてはすでに述べたので、kintone に実装する際のポイントのみを説明します。

・レコード追加画面でWebカメラ画像を表示する
先ず kintone に video や canvas を表示するには、kintone のスペースを利用します。
kintone のレコード追加画面のイベント処理 kintone.events.on(eventsCreateShow, function(event) {})　内ではそれぞれ showWebCamera() で video にWebカメラの表示、makeCanvas() で canvas の準備を行っています。スペースの要素IDを利用してgetSpaceElement() で Elementを取得し、必要な DOM を追加します。DOM の追加については、先に説明しましたので省略します。

        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.setFieldShown('添付ファイル', false);
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);

・「撮影」ボタン押下で canvas に画像を表示、kintone にファイルをアップロード
makeCanvas() のメソッドでは、kintone のアプリでは video のWebカメラ動画から「撮影」ボタンを押したタイミングで canvas に表示すると同時に、画像をkintoneにアップロードし、その返信の fileKey をフィールドの「ファイルID」にセットしています。

    // 撮影用画像をcanvasに表示
    function makeCanvas(isMobile, video) {

        if(video == null) return;
        let canvasPreview = document.createElement('div');

        let takeButton       = document.createElement('button');
（中略）
        // 撮影ボタンが押されたら canvas に画像を転送
        takeButton.onclick   = function() {
            let canvasCtx = canvas.getContext('2d');
            canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let blob = convertBlobImage(canvas);
            saveImage(isMobile, blob);
        };
        canvasPreview.appendChild(takeButton);
（中略）
        return canvasPreview;
    }

「撮影」ボタンを押したタイミングでアップロードするのは、kintone の添付ファイルフィールドを直接 JavaScript で操作できないため、JavaScript APIをコールして事前にファイルをアップロードし、全ての入力を終えて submit で kintone のレコードが追加された後（無論添付ファイルは空の状態）に、先のアップロードで返ってきた fileKey をセットしAPIで再度更新を行うことで、やっと添付ファイルが紐づけられます。

    // 画像をkintoneに保存
    function saveImage(isMobile, blob){

        var record;
        if (isMobile) {
            record = kintone.mobile.app.record.get();
（中略）    
        // ファイルアップロード
        var key = "";
        var formData = new FormData();
        formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
        formData.append('file', blob, 'image.png');

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.send(formData);
        if (xmlHttp.status === 200) {
            key = JSON.parse(xmlHttp.responseText).fileKey;
        }
        record.record["ファイルID"].value = key;

        if (isMobile) {
            kintone.mobile.app.record.set(record);
（中略）    
    }

さらに面倒なのは、canvas のデータは Base64 には簡単に変換できるのですが、ファイルとしてアップロードするために blob データでなければならない点です。以下は canvas の画像を blob データに変換する処理です。最後の参照先でも紹介していますが、qiita に大変有難い例がありましたので、参考にさせていただきました。（感謝！）

    // canvas画像をblobデータに変換
    function convertBlobImage(canvas) {

        if(canvas == null) return;

        var base64 = canvas.toDataURL("image/jpeg");
        // Base64からバイナリへ変換
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        // Blobを作成
        var blob = new Blob([buffer.buffer], {
            type: 'image/png'
        });

        return blob;
    }

・レコードが追加された後に、先にアップロードしたファイルと紐づけの更新を行う
先にも説明したとおり、添付ファイルフィールドは javaScript から直接操作できないため、事前にアップロードした際の fileKey を、レコード追加後に行う必要があります。kintone.events.on(eventsEditSuccess, function(event) {}) 内で、以下のようにAPI経由で更新します。本来は promise で同期させた方が良いのですが、今回は XMLHttpRequest() の同期処理で実装しています。

        var json = {
            app: kintone.app.getId(),
            id: event.record["$id"].value,
            record: {
                "添付ファイル": {
                    value: [{ fileKey: event.record["ファイルID"].value }]
                }
            },
            "__REQUEST_TOKEN__": kintone.getRequestToken()
        };

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('PUT', kintone.api.url('/k/v1/record', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.setRequestHeader('Content-Type', 'application/json');
        xmlHttp.send(JSON.stringify(json));

実行結果

・追加画面でWebカメラ表示

・追加画面で「撮影」

・追加画面で「保存」した後の明細画面

・変更画面で「撮影」した場合

以上、予定していた実装が一通りできました。
以下が全てのコードです。

webcam.js

(function() {
    "use strict";

    const cameraSize = { w: 320,  h: 240 };
    const canvasSize = { w: 320,  h: 240 };
    const resolution = { w: 1080, h: 720 };

    // レコード追加時表示イベント
    var eventsCreateShow = [
        'app.record.create.show',
        'mobile.app.record.create.show'];
    kintone.events.on(eventsCreateShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.create.show'){
            isMobile = true;
        }

        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.setFieldShown('添付ファイル', false);
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }else{
            kintone.mobile.app.record.setFieldShown('添付ファイル', false);
            kintone.mobile.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }
        event.record["ファイルID"].disabled = true;

        return event;
    });

    // レコード編集時表示イベント
    var eventsEditShow = [
        'app.record.edit.show',
        'mobile.app.record.edit.show'];
    kintone.events.on(eventsEditShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.edit.show'){
            isMobile = true;
        }
        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }else{
            kintone.mobile.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }
        event.record["添付ファイル"].disabled = true;
        event.record["ファイルID"].disabled = true;

        return event;
    });

    // レコード追加・編集後イベント
    var eventsEditSuccess = [
        'app.record.create.submit.success',
        'app.record.edit.submit.success', 
        'mobile.app.record.create.submit.success',
        'mobile.app.record.edit.submit.success'];
    kintone.events.on(eventsEditSuccess, function(event) {

        var json = {
            app: kintone.app.getId(),
            id: event.record["$id"].value,
            record: {
                "添付ファイル": {
                    value: [{ fileKey: event.record["ファイルID"].value }]
                }
            },
            "__REQUEST_TOKEN__": kintone.getRequestToken()
        };

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('PUT', kintone.api.url('/k/v1/record', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.setRequestHeader('Content-Type', 'application/json');
        xmlHttp.send(JSON.stringify(json));

    });

    // レコード詳細表示時イベント
    var eventsDetailShow = [
        'app.record.detail.show',
        'mobile.app.record.detail.show'];
    kintone.events.on(eventsDetailShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.edit.show'){
            isMobile = true;
        }
        if(!isMobile) {
            kintone.app.record.setFieldShown('Webカメラ画像', false);
        }else{
            kintone.mobile.app.record.setFieldShown('Webカメラ画像', false);
        }

    });

    // Webカメラ画像をvideoに表示
    function showWebCamera() {
        let video      = document.createElement('video');
        video.id       = 'video';
        video.width    = cameraSize.w;
        video.height   = cameraSize.h;
        video.autoplay = true;

        let media = navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                width:  { ideal: resolution.w },
                height: { ideal: resolution.h }
            }
        }).then(function(stream) {
            video.srcObject = stream;
        });

        return video;
    }

    // 撮影用画像をcanvasに表示
    function makeCanvas(isMobile, video) {

        if(video == null) return;
        let canvasPreview = document.createElement('div');

        let takeButton       = document.createElement('button');
        takeButton.id        = 'takeButton';
        takeButton.innerText = ' 撮 影 ';
        takeButton.className = "gaia-ui-actionmenu-save";
        takeButton.onclick   = function() {
            let canvasCtx = canvas.getContext('2d');
            canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let blob = convertBlobImage(canvas);
            saveImage(isMobile, blob);
        };
        canvasPreview.appendChild(takeButton);
        canvasPreview.appendChild(document.createElement('br'));

        let canvas    = document.createElement('canvas');
        canvas.id     = 'canvas';
        canvas.width  = canvasSize.w;
        canvas.height = canvasSize.h;
        canvasPreview.appendChild(canvas);

        return canvasPreview;
    }

    // 画像をkintoneに保存
    function saveImage(isMobile, blob){

        var record;
        if (isMobile) {
            record = kintone.mobile.app.record.get();
        }else{
            record = kintone.app.record.get();
        }

        // ファイルアップロード
        var key = "";
        var formData = new FormData();
        formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
        formData.append('file', blob, 'image.png');

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.send(formData);
        if (xmlHttp.status === 200) {
            key = JSON.parse(xmlHttp.responseText).fileKey;
        }
        record.record["ファイルID"].value = key;

        if (isMobile) {
            kintone.mobile.app.record.set(record);
        }else{
            kintone.app.record.set(record);
        }
    }

    // canvas画像をblobデータに変換
    function convertBlobImage(canvas) {

        if(canvas == null) return;

        var base64 = canvas.toDataURL("image/jpeg");
        // Base64からバイナリへ変換
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        // Blobを作成
        var blob = new Blob([buffer.buffer], {
            type: 'image/png'
        });

        return blob;
    }

})();

まとめ

今回は kintone でWebカメラの映像を表示、canvas に「撮影」した画像を表示して添付ファイルとして保管できることを確認しました。Web カメラ以外でも canvas に表示したグラフや解析画像などもこの手順を応用して、kintone の添付ファイルとして保管できます。
添付ファイルで保存できれば、毎回グラフィックなどの表示にリソースを取られなくて済みますし、一覧で便利な添付ファイルの表示機能なども利用できるようになるので、今後はこの手法を活用するつもりです。

参照先

Webカメラの映像をcanvasに表示させる
https://qiita.com/chelcat3/items/02c77b55d080d770530a
canvasの画像をBlobに変換
https://qiita.com/0829/items/a8c98c8f53b2e821ac94
ファイルアップロードで必須となる3つの手順
https://developer.cybozu.io/hc/ja/articles/200724665
MediaDevices.getUserMedia()
https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
Window.requestAnimationFrame()
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
HTMLCanvasElement.toDataURL（）
https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL
FormData オブジェクトの利用
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects

概要

今回調べもので canvas の表示を画像として kintone の添付ファイルに保管できないか調べる機会がありました。試しに kintone アプリを作る際に折角なら canvas に Web カメラ画像を取り込んで保管するまでを実装を思い立ち、今回試してみました。

Web カメラ画像を canvas に表示する

先ず kintone に実装する前に、html ファイルでWebカメラの表示試験を行います。
id が contents の div 内に、video と canvas を追加します。

<body>
<h1>Webカメラの映像をvideoとcanvasに表示</h1>
<div id="contents"></div>
<div><a id="download" href="#" download="canvas.png" onClick="downloadImage()">画像ダウンロード</a></div>
</body>

webカメラの表示

Webカメラを video に表示します。
今回は JavaScript から video を追加していますが、HTML に直接タグを記述しても問題ありません。
navigator.mediaDevices.getUserMedia() メソッドで、Webカメラを使用する許可をユーザーに求め、許可を得た場合に動画をストリームで受信できるようになり、then で取得できた際に video.srcObject に代入しています。これだけで、Webカメラの画像がブラウザに表示されます。

    // video にWebカメラの映像を表示
    let videoPreview    = document.createElement('div');

    let video      = document.createElement('video');
    video.id       = 'video';
    video.width    = cameraSize.w;
    video.height   = cameraSize.h;
    video.autoplay = true;
    videoPreview.appendChild(video);

    document.getElementById('contents').appendChild(videoPreview);

    // Webカメラの映像を video にセット
    let media = navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width:  { ideal: resolution.w },
            height: { ideal: resolution.h }
        }
    }).then(function(stream) {
        video.srcObject = stream;
    });

結果

PC内蔵のカメラ動画を表示しました。

Webカメラを表示を canvas に複写する

video の webカメラ表示を canvas に複写表示します。
こちらも今回は JavaScript から canvas を追加していますが、HTML に直接タグを記述しても問題ありません。
キャンバスの drawImage() メソッドで、video からフレーム画像取得を繰り返さないと canvas に同じ動画を表示できないのですが、requestAnimationFrame() メソッドを使うと、ブラウザが次の再描画を行う前に canvasUpdate() を実行するようで、canvas に video と同じ動画が表示できました。ブラウザの JavaScript の進化には驚きますね！

    // canvas にvideoの映像を表示
    let canvasPreview    = document.createElement('div');

    let canvas    = document.createElement('canvas');
    canvas.id     = 'canvas';
    canvas.width  = canvasSize.w;
    canvas.height = canvasSize.h;
    canvasPreview.appendChild(canvas);

    document.getElementById('contents').appendChild(canvasPreview);

    // video の映像を canvas にセット
    let canvasCtx = canvas.getContext('2d');
    canvasUpdate();

    function canvasUpdate() {
      canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(canvasUpdate);
    };

結果
canvas に video と同じWebカメラの動画が表示されています。

以下が全てのコードです。

webcam.html

<html>
<head><title>Webカメラの映像をvideoとcanvasに表示</title></head>

<body>
<h1>Webカメラの映像をvideoとcanvasに表示</h1>
<div id="contents"></div>
<div><a id="download" href="#" download="canvas.png" onClick="downloadImage()">画像ダウンロード</a></div>
</body>

<script type="text/javascript">

    const cameraSize = { w: 640,  h: 400 };
    const canvasSize = { w: 640,  h: 400 };
    const resolution = { w: 1280, h: 720 };

    // video にWebカメラの映像を表示
    let videoPreview    = document.createElement('div');
    let videoText       = document.createElement('p');
    videoText.innerHTML = 'videoにWebカメラ表示';
    videoPreview.appendChild(videoText);

    let video      = document.createElement('video');
    video.id       = 'video';
    video.width    = cameraSize.w;
    video.height   = cameraSize.h;
    video.autoplay = true;
    videoPreview.appendChild(video);

    document.getElementById('contents').appendChild(videoPreview);

    // Webカメラの映像を video にセット
    let media = navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
            width:  { ideal: resolution.w },
            height: { ideal: resolution.h }
        }
    }).then(function(stream) {
        video.srcObject = stream;
    });

    // canvas にvideoの映像を表示
    let canvasPreview    = document.createElement('div');
    let canvasText       = document.createElement('p');
    canvasText.innerHTML = 'canvasにvideoのWebカメラ画像を表示';
    canvasPreview.appendChild(canvasText);

    let canvas    = document.createElement('canvas');
    canvas.id     = 'canvas';
    canvas.width  = canvasSize.w;
    canvas.height = canvasSize.h;
    canvasPreview.appendChild(canvas);

    document.getElementById('contents').appendChild(canvasPreview);

    // video の映像を canvas にセット
    let canvasCtx = canvas.getContext('2d');
    canvasUpdate();

    function canvasUpdate() {
      canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(canvasUpdate);
    };

    // canvasの画像をダウンロード
    function downloadImage() {
      var base64 = canvas.toDataURL();
      document.getElementById("download").href = base64;
    }
</script>
</html>

kintone でWebカメラを表示し保管するアプリを作る

前座が長くなりましたが、いよいよ kintone に Webカメラの画像を保管する方法を試します。
今回「Webカメラ写真保存」というアプリを追加しました。

フィールドの設定

アプリのフィールドは以下のように設定しています。（レコード番号などはお好みで。）

フィールド名	タイプ	フィードコート・要素ID	その他
添付ファイル	添付ファイル	添付ファイル	サムネイルの大きさは 250x250
Webカメラ画像	グループ	Webカメラ画像	明細画面ではWebカメラフィールドを非表示に
	スペース	videoPreview	Webカメラ画像グループ内に配置
	スペース	canvasPreview	Webカメラ画像グループ内に配置
ファイルID	文字列（1行）	ファイルID	Webカメラ画像グループ内に配置

JavaScript プログラムの作成

アプリに以下のJavaScriptのプログラムファイルを追加します。
JavaScript でWebカメラをcanvasに表示する方法についてはすでに述べたので、kintone に実装する際のポイントのみを説明します。

・レコード追加画面でWebカメラ画像を表示する
先ず kintone に video や canvas を表示するには、kintone のスペースを利用します。
kintone のレコード追加画面のイベント処理 kintone.events.on(eventsCreateShow, function(event) {})　内ではそれぞれ showWebCamera() で video にWebカメラの表示、makeCanvas() で canvas の準備を行っています。スペースの要素IDを利用してgetSpaceElement() で Elementを取得し、必要な DOM を追加します。DOM の追加については、先に説明しましたので省略します。

        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.setFieldShown('添付ファイル', false);
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);

・「撮影」ボタン押下で canvas に画像を表示、kintone にファイルをアップロード
makeCanvas() のメソッドでは、kintone のアプリでは video のWebカメラ動画から「撮影」ボタンを押したタイミングで canvas に表示すると同時に、画像をkintoneにアップロードし、その返信の fileKey をフィールドの「ファイルID」にセットしています。

    // 撮影用画像をcanvasに表示
    function makeCanvas(isMobile, video) {

        if(video == null) return;
        let canvasPreview = document.createElement('div');

        let takeButton       = document.createElement('button');
（中略）
        // 撮影ボタンが押されたら canvas に画像を転送
        takeButton.onclick   = function() {
            let canvasCtx = canvas.getContext('2d');
            canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let blob = convertBlobImage(canvas);
            saveImage(isMobile, blob);
        };
        canvasPreview.appendChild(takeButton);
（中略）
        return canvasPreview;
    }

「撮影」ボタンを押したタイミングでアップロードするのは、kintone の添付ファイルフィールドを直接 JavaScript で操作できないため、JavaScript APIをコールして事前にファイルをアップロードし、全ての入力を終えて submit で kintone のレコードが追加された後（無論添付ファイルは空の状態）に、先のアップロードで返ってきた fileKey をセットしAPIで再度更新を行うことで、やっと添付ファイルが紐づけられます。

    // 画像をkintoneに保存
    function saveImage(isMobile, blob){

        var record;
        if (isMobile) {
            record = kintone.mobile.app.record.get();
（中略）    
        // ファイルアップロード
        var key = "";
        var formData = new FormData();
        formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
        formData.append('file', blob, 'image.png');

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.send(formData);
        if (xmlHttp.status === 200) {
            key = JSON.parse(xmlHttp.responseText).fileKey;
        }
        record.record["ファイルID"].value = key;

        if (isMobile) {
            kintone.mobile.app.record.set(record);
（中略）    
    }

さらに面倒なのは、canvas のデータは Base64 には簡単に変換できるのですが、ファイルとしてアップロードするために blob データでなければならない点です。以下は canvas の画像を blob データに変換する処理です。最後の参照先でも紹介していますが、qiita に大変有難い例がありましたので、参考にさせていただきました。（感謝！）

    // canvas画像をblobデータに変換
    function convertBlobImage(canvas) {

        if(canvas == null) return;

        var base64 = canvas.toDataURL("image/jpeg");
        // Base64からバイナリへ変換
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        // Blobを作成
        var blob = new Blob([buffer.buffer], {
            type: 'image/png'
        });

        return blob;
    }

・レコードが追加された後に、先にアップロードしたファイルと紐づけの更新を行う
先にも説明したとおり、添付ファイルフィールドは javaScript から直接操作できないため、事前にアップロードした際の fileKey を、レコード追加後に行う必要があります。kintone.events.on(eventsEditSuccess, function(event) {}) 内で、以下のようにAPI経由で更新します。本来は promise で同期させた方が良いのですが、今回は XMLHttpRequest() の同期処理で実装しています。

        var json = {
            app: kintone.app.getId(),
            id: event.record["$id"].value,
            record: {
                "添付ファイル": {
                    value: [{ fileKey: event.record["ファイルID"].value }]
                }
            },
            "__REQUEST_TOKEN__": kintone.getRequestToken()
        };

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('PUT', kintone.api.url('/k/v1/record', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.setRequestHeader('Content-Type', 'application/json');
        xmlHttp.send(JSON.stringify(json));

実行結果

・追加画面でWebカメラ表示

・追加画面で「撮影」

・追加画面で「保存」した後の明細画面

・変更画面で「撮影」した場合

以上、予定していた実装が一通りできました。
以下が全てのコードです。

webcam.js

(function() {
    "use strict";

    const cameraSize = { w: 320,  h: 240 };
    const canvasSize = { w: 320,  h: 240 };
    const resolution = { w: 1080, h: 720 };

    // レコード追加時表示イベント
    var eventsCreateShow = [
        'app.record.create.show',
        'mobile.app.record.create.show'];
    kintone.events.on(eventsCreateShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.create.show'){
            isMobile = true;
        }

        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.setFieldShown('添付ファイル', false);
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }else{
            kintone.mobile.app.record.setFieldShown('添付ファイル', false);
            kintone.mobile.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }
        event.record["ファイルID"].disabled = true;

        return event;
    });

    // レコード編集時表示イベント
    var eventsEditShow = [
        'app.record.edit.show',
        'mobile.app.record.edit.show'];
    kintone.events.on(eventsEditShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.edit.show'){
            isMobile = true;
        }
        let video    = showWebCamera();
        let canvas   = makeCanvas(isMobile, video);

        if(!isMobile) {
            kintone.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }else{
            kintone.mobile.app.record.getSpaceElement('videoPreview').appendChild(video);
            kintone.app.record.getSpaceElement('canvasPreview').appendChild(canvas);
        }
        event.record["添付ファイル"].disabled = true;
        event.record["ファイルID"].disabled = true;

        return event;
    });

    // レコード追加・編集後イベント
    var eventsEditSuccess = [
        'app.record.create.submit.success',
        'app.record.edit.submit.success', 
        'mobile.app.record.create.submit.success',
        'mobile.app.record.edit.submit.success'];
    kintone.events.on(eventsEditSuccess, function(event) {

        var json = {
            app: kintone.app.getId(),
            id: event.record["$id"].value,
            record: {
                "添付ファイル": {
                    value: [{ fileKey: event.record["ファイルID"].value }]
                }
            },
            "__REQUEST_TOKEN__": kintone.getRequestToken()
        };

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('PUT', kintone.api.url('/k/v1/record', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.setRequestHeader('Content-Type', 'application/json');
        xmlHttp.send(JSON.stringify(json));

    });

    // レコード詳細表示時イベント
    var eventsDetailShow = [
        'app.record.detail.show',
        'mobile.app.record.detail.show'];
    kintone.events.on(eventsDetailShow, function(event) {

        let isMobile = false;
        if(event.type === 'mobile.app.record.edit.show'){
            isMobile = true;
        }
        if(!isMobile) {
            kintone.app.record.setFieldShown('Webカメラ画像', false);
        }else{
            kintone.mobile.app.record.setFieldShown('Webカメラ画像', false);
        }

    });

    // Webカメラ画像をvideoに表示
    function showWebCamera() {
        let video      = document.createElement('video');
        video.id       = 'video';
        video.width    = cameraSize.w;
        video.height   = cameraSize.h;
        video.autoplay = true;

        let media = navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                width:  { ideal: resolution.w },
                height: { ideal: resolution.h }
            }
        }).then(function(stream) {
            video.srcObject = stream;
        });

        return video;
    }

    // 撮影用画像をcanvasに表示
    function makeCanvas(isMobile, video) {

        if(video == null) return;
        let canvasPreview = document.createElement('div');

        let takeButton       = document.createElement('button');
        takeButton.id        = 'takeButton';
        takeButton.innerText = ' 撮 影 ';
        takeButton.className = "gaia-ui-actionmenu-save";
        takeButton.onclick   = function() {
            let canvasCtx = canvas.getContext('2d');
            canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let blob = convertBlobImage(canvas);
            saveImage(isMobile, blob);
        };
        canvasPreview.appendChild(takeButton);
        canvasPreview.appendChild(document.createElement('br'));

        let canvas    = document.createElement('canvas');
        canvas.id     = 'canvas';
        canvas.width  = canvasSize.w;
        canvas.height = canvasSize.h;
        canvasPreview.appendChild(canvas);

        return canvasPreview;
    }

    // 画像をkintoneに保存
    function saveImage(isMobile, blob){

        var record;
        if (isMobile) {
            record = kintone.mobile.app.record.get();
        }else{
            record = kintone.app.record.get();
        }

        // ファイルアップロード
        var key = "";
        var formData = new FormData();
        formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
        formData.append('file', blob, 'image.png');

        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);
        xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xmlHttp.send(formData);
        if (xmlHttp.status === 200) {
            key = JSON.parse(xmlHttp.responseText).fileKey;
        }
        record.record["ファイルID"].value = key;

        if (isMobile) {
            kintone.mobile.app.record.set(record);
        }else{
            kintone.app.record.set(record);
        }
    }

    // canvas画像をblobデータに変換
    function convertBlobImage(canvas) {

        if(canvas == null) return;

        var base64 = canvas.toDataURL("image/jpeg");
        // Base64からバイナリへ変換
        var bin = atob(base64.replace(/^.*,/, ''));
        var buffer = new Uint8Array(bin.length);
        for (var i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
        }
        // Blobを作成
        var blob = new Blob([buffer.buffer], {
            type: 'image/png'
        });

        return blob;
    }

})();

まとめ

今回は kintone でWebカメラの映像を表示、canvas に「撮影」した画像を表示して添付ファイルとして保管できることを確認しました。Web カメラ以外でも canvas に表示したグラフや解析画像などもこの手順を応用して、kintone の添付ファイルとして保管できます。
添付ファイルで保存できれば、毎回グラフィックなどの表示にリソースを取られなくて済みますし、一覧で便利な添付ファイルの表示機能なども利用できるようになるので、今後はこの手法を活用するつもりです。

参照先

Webカメラの映像をcanvasに表示させる
https://qiita.com/chelcat3/items/02c77b55d080d770530a
canvasの画像をBlobに変換
https://qiita.com/0829/items/a8c98c8f53b2e821ac94
ファイルアップロードで必須となる3つの手順
https://developer.cybozu.io/hc/ja/articles/200724665
MediaDevices.getUserMedia()
https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
Window.requestAnimationFrame()
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
HTMLCanvasElement.toDataURL（）
https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL
FormData オブジェクトの利用
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects