【kintone】今年の漢字1文字は決めましたか？ #JavaScript

こんにちは

ついに、12月になってしまいましたね〜。
とは言っても全然12月の実感が湧かず、ニュースで「今年の流行語大賞は〜〜」とか「年末は〜〜」といった話が増えてきて、「あゝ12月なのね」とやっと実感が湧いてくる私です。

そんな年末恒例のニュースといえば 今年の漢字 ってありますよね！
今年は何が選ばれるのでしょうか？今年の漢字の発表は12月14日の漢字の日(12月12日いい字を一字)らしいのですが、その前にkintoneで今年の漢字の予想をしたり、今年を1文字で振り返ってみませんか？

HTML,CSS,JavaScriptの知識があれば簡単にkintoneで書き初めが楽しめるカスタマイズができるので、もし興味のある方は、是非手元のkintone環境で試してみてください！

※ kintone環境がないですという方は、
kintone 開発者ライセンス（開発環境）作成よりkintoneの開発環境を作成することができます。

kintoneを使って書き初めアプリを作ってみよう

完成形の確認

新規レコード作成画面

レコード一覧画面

準備内容

準備するものは3つです。

kintoneアプリ
kintoneのjsカスタマイズ環境
processing.jsファイル(後ほどダウンロードします)

1.kintoneアプリ

フィールド名	フィールドタイプ	フィールドコード
タイトル	文字列一行	title
添付ファイル	ファイル	image
-	スペース	hanshi

2. kintoneのjsカスタマイズ環境

kintoneシステム管理 > JavaScript / CSSでカスタマイズ が表示されているか確認してください。

3. processing.jsファイル

processing-js ダウンロード (Githubリンク)
DownloadZIP > 解凍 > processing.min.js を使用します。

kintoneの アプリの設定画面 > 設定 > JavaScript/CSSでカスタマイズ > PC用のJavaScriptファイル にprocessing.min.jsをアップロードします。

Processing.jsとは？

Processing.jsは、ビジュアルアートとインタラクティブなグラフィックスのためのJavaScriptライブラリです。
https://processing.org/

※2018年12月でサポートが終了しています。今後はp5.jsをお使いください。
https://github.com/processing-js/processing-js

ハンズオン

いよいよ大事なJavaScriptを記述していきます。
今回の以下の要件でアプリを作成しました。

kintoneの新規レコードの作成・レコードの編集画面を表示した際に、書き初めができるスペースを作成
マウスクリックした際に書き始める
マウスが押されている間は書き続ける
マウスクリックが終わったタイミングで書き終わる
スペースキーで半紙をリセット
rキーで朱色（Red）
bキーで黒色（Black）
gキーで緑色（Green）
「保存」ボタンをクリックすると画像として保存される

コードを見ながら、内容を確認してみて下さい。

index.js

(() => {
  "use strict";
  const show_events = ["app.record.create.show", "app.record.edit.show"];
  const success_events = ["app.record.create.submit.success", "app.record.edit.submit.success"];

  // Base64エンコードされた文字列をBlobオブジェクトに変換する関数
  const b64toBlob = (b64Data, contentType = "", sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
      const byteNumbers = Array.from(slice, (char) => char.charCodeAt(0));
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, { type: contentType });
  };

  kintone.events.on(show_events, async () => {
    document.getElementById(
      "user-js-hanshi"
    ).innerHTML = `<canvas id="canvas" width="600" height="750"></canvas>`;

    const sketchProc = (processing) => {
      const radius = 20; //半径
      const A = 3;

      // 初期設定
      processing.setup = () => {
        processing.smooth(); //グラフィックスの滑らかさ
        processing.frameRate(60); //秒間60フレームのレートでアニメーションを描画
        processing.size(400, 600); //キャンバスのサイズを400x600ピクセル
        processing.background(250); //背景色
        processing.stroke(54, 54, 54); //描画する線の色
        processing.fill(54, 54, 54); //図形の塗りつぶし色
      };

      // マウスが押された時に呼ばれる
      processing.mousePressed = () => {
        processing.strokeWeight(2); //描画する線の太さ2px
        processing.pushMatrix(); //現在の変換行列
        processing.translate(processing.mouseX, processing.mouseY + 3); //描画の起点をマウスの位置に移動, Y座標は3ピクセルだけ下
        processing.rotate(processing.radians(-150)); //描画座標系を-150度回転
        processing.beginShape(); //形状描画
        // 角度thetaを10度から360度まで変化させながら形状を描画
        for (let theta = 10; theta < 361; theta++) {
          let r = 1 / (A * processing.sin(processing.radians(theta) / 2) + 1);
          // 頂点（x,y）
          processing.vertex(
            radius * r * processing.cos(processing.radians(theta)),
            radius * r * processing.sin(processing.radians(theta))
          );
        }
        processing.endShape(); //形状描画を終了
        processing.popMatrix(); //保存した変換行列に戻る
        processing.redraw(); //画面を再描画
      };

      // マウスをドラッグする際に呼ばれる
      // 筆で書いたのような幾何学的な設定をする
      processing.mouseDragged = () => { 
        for (let i = 0; i < 10; i++) {
          let x = processing.random(i); //xは0-1のランダムな値を取る
          let y = processing.sqrt(processing.sq(i) - processing.sq(x)); //xをもとに幾何学的関係になる値を取る
          // Lines for drawing
          processing.line(
            processing.pmouseX - x, //直前のマウスのX座標
            processing.pmouseY + y, //直前のマウスのY座標
            processing.mouseX, //現在のX座標
            processing.mouseY //現在のY座標
          ); //右下&左上
          processing.line(
            processing.pmouseX - x,
            processing.pmouseY - y,
            processing.mouseX,
            processing.mouseY
          ); //右上&左下
          processing.line(
            processing.pmouseX + x,
            processing.pmouseY + y,
            processing.mouseX + x,
            processing.mouseY + y
          ); //右下
          processing.line(
            processing.pmouseX - x,
            processing.pmouseY - y,
            processing.mouseX - x,
            processing.mouseY - y
          ); //左上
          processing.line(
            processing.pmouseX + x,
            processing.pmouseY - y,
            processing.mouseX + x,
            processing.mouseY - y
          ); //右上
          processing.line(
            processing.pmouseX - x,
            processing.pmouseY + y,
            processing.mouseX - x,
            processing.mouseY + y
          ); //左下
          processing.line(
            processing.pmouseX,
            processing.pmouseY,
            processing.mouseX,
            processing.mouseY
          );
          processing.line(
            processing.pmouseX,
            processing.pmouseY + y,
            processing.mouseX,
            processing.mouseY
          );
        }
      };

      // キーが押された時に呼ばれる
      processing.keyPressed = () => {
        switch (processing.keyCode) {
          case 32: // Space
            processing.background(255);
            break;
          case 82: // 'r'
            processing.stroke(235, 97, 1);
            processing.fill(235, 97, 1);
            break;
          case 66: // 'b'
            processing.stroke(54, 54, 54);
            processing.fill(54, 54, 54);
            break;
          case 71: // 'g'
            processing.stroke(50, 168, 56);
            processing.fill(50, 168, 56);
            break;
        }
      };
    };

    const canvas = document.getElementById("canvas");
    new Processing(canvas, sketchProc);
  });

  kintone.events.on([success_events], async (event) => {
    try {
      const imageData = canvas.toDataURL("image/png").split(",")[1];
      const blob = b64toBlob(imageData, "image/png");
      const formData = new FormData();
      formData.append("__REQUEST_TOKEN__", kintone.getRequestToken());
      formData.append("file", blob, "image.png");

      const headers = {
        "X-Requested-With": "XMLHttpRequest",
      };

      const fileUploadResponse = await fetch("/k/v1/file.json", {
        method: "POST",
        headers,
        body: formData,
      });

      const fileUploadData = await fileUploadResponse.json();
      if (!fileUploadResponse.ok) {
        throw new Error(`File upload failed: ${fileUploadResponse.status}`);
      }

      const fileKey = fileUploadData.fileKey;

      await kintone.api(kintone.api.url("/k/v1/record", true), "PUT", {
        app: kintone.app.getId(),
        id: event.record.$id.value,
        record: {
          title: {
            value: event.record.title.value,
          },
          image: {
            value: [
              {
                fileKey: fileKey,
              },
            ],
          },
        },
      });

      console.log("Record updated successfully");
    } catch (error) {
      console.error("Error:", error);
    }
  });
})();

上記のjsファイルを、kintoneのPC用のJavaScriptファイルに読み込ませたらアプリは完了です。

アプリから新規コードを作成してみてください。

まとめ

いかがでしたか？kintoneはデータを溜めるDBとして利用するのも良いですし、jsライブラリと組み合わせてDOM操作をしながら見た目を変えてみるのも面白いですよね！
~~全然実用的なものではないですが~~ 社内のコミュニケーションアプリになったら嬉しいですし、今年を振り返る良い機会になれば幸いです！

それでは皆様、良い年の瀬をお過ごしください〜👋🍊

参考サイト

参考になりました。ありがとうございました！
Processing.jsを使ってみる（２）
It's 書time! [caravanより短いコードで"書き初め"してみた]
キーコードの取得

【kintone】今年の漢字1文字は決めましたか？