【kintone】新規登録画面で落書きした画像を添付ファイルに保存する

16497 ワード
JavaScript kintone JavaScript テキストリンク

こんにちは！

今回は画像を描いてその場で保存するアプリを作ってみたいと思います。

↓画像のような感じに落書きをして、保存ボタンで添付ファイルフィールドに保存するというアプリです。

今回は新規登録画面で保存してみたいと思います。

※今までも、一覧画面に絵を描いて新規登録するというアプリは紹介しましたが、今回は新規登録画面でそのままレコードに保存するというアプリです👀
参考：【kintone】お絵描きして添付ファイルに保存する（改）

アプリの準備

フィールドは、添付ファイルとスペースだけ。

フィールド種類 フィールドコード (要素ID)
スペース sp_img
添付ファイル 添付ファイル

JavaScriptを書く

処理の流れはこんな感じ

  • 新規登録画面でお絵かきをする
  • 保存成功後に保存したばかりのレコードの添付ファイル更新

保存成功後に、保存したばかりのレコードの添付ファイルを更新するというのがミソです。

レコード追加画面の表示後イベント

マウスが動いた時にマウスがクリック（ドラッグ）状態だったら線をつなげる
というシンプル？な、お絵かきの仕組みです。
塗りつぶしの色とかはお好みで。

kintone.events.on('app.record.create.show', event => {
    //スペースフィールド
    const sp = kintone.app.record.getSpaceElement('sp_img');

    //おえかきキャンバスつくる
    const c_W =300;
    const c_H =300;
    let Blush=false;
    let x,y,mouseX,mouseY;

    const canvas = document.createElement('canvas');
    canvas.id="canvas";
    sp.appendChild(canvas);

    canvas.setAttribute("width",c_W);
    canvas.setAttribute("height",c_H);

    const ctx = canvas.getContext('2d'); 
    ctx.strokeStyle = 'rgb(00,00,255)';//線の色
    ctx.fillStyle = 'rgb(0,255,255)'; //塗りつぶしの色
    ctx.fillRect(0,0,c_W,c_H);

    //マウスが動いた時
    canvas.onmousemove=(e)=>{
        mouseX = e.offsetX;
        mouseY = e.offsetY;
        if(Blush){ 
            ctx.lineWidth = 5;
            ctx.beginPath(); 
            ctx.moveTo(x, y);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();
        }
        x = mouseX;
        y = mouseY; 
    }

    //マウスクリックしているとき
    canvas.onmousedown=()=>{
        Blush=true;
    }

    //マウスクリックしてない時
    canvas.onmouseup=()=>{
        Blush=false;
    }

    return event;
});

レコード追加画面の保存成功後イベント

レコードが保存された後に動くイベントでPUTして更新します。
保存後はevent.recordIdでできたてほやほやのレコードIDがゲットできます。
参考：レコード追加画面の保存成功後イベント

ファイル保存（アップロード）の方法については、こちらを参考にされてみてください👀
参考：ファイルアップロードで必須となる3つの手順


kintone.events.on('app.record.create.submit.success', event => {
    //canvasの画像を保存
    const saveCanvas = (canvas_id) => {
        const canvas = document.getElementById(canvas_id);
        const title = "test";//ファイル名をお好きなように

        // Brobを取得
        canvas.toBlob( blob => {
            // FormDataにファイルを格納
            const formData = new FormData();
            formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
            formData.append('file', blob, title+'.png');    

            //ファイルをアップロード
            const xmlHttp = new XMLHttpRequest();
            xmlHttp.open('POST','https://サブドメイン.cybozu.com/k/v1/file.json');
            xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xmlHttp.send(formData);

            //200が帰ってきたらレコード登録
            xmlHttp.onload = () => {
                if(xmlHttp.status===200){
                    const key = JSON.parse(xmlHttp.responseText).fileKey;
                    const body={
                        app:kintone.app.getId(),
                        id: event.recordId,//←できたてほやほやのレコードID
                        record:{
                            "添付ファイル":{value:[
                                {fileKey: key}
                            ]}
                        }
                    }
                    //fileKeyを設定
                    kintone.api("/k/v1/record","PUT",body).then(function(resp){
                        console.log(resp);
                    },(err)=>{
                        console.log(err);
                    });
                }
            }
        });
    }

    //保存
    saveCanvas("canvas");

    return event;
});

できあがり

「あ」と描いた画像が保存されました。こんな感じで、画像保存してみてくださいね👀！

※新年なのでなんとなくParty Parrotも飾ってみました。