【kintone】お絵描きして添付ファイルに保存する（改）

先日、こんな記事をUPしました。
【kintone】お絵描きして添付ファイルに保存する

それのお絵かき改良版です。

※2020-11-03　カスタマイズビューのhtml追記・・・・

drawingboard.jsを使う

こちらのお絵かきライブラリを使ってみました。
drawingboard.js

ソースをとりあえずZIPでダウンロードして解凍します。

distフォルダー内の

• drawingboard.min.js
• drawingboard.min.css

を、kintoneの「JavaScript / CSSでカスタマイズ」にアップしておきましょう。
また、JavaScriptも書き換えます。

一覧のカスタマイズビューのhtmlを書き換える

（追記しましたーm(_ _)m）

<div>
    <div id="canvas"></div>
<div>
    <label>画像タイトル：<input type="text" id="title"></label>
    <button id="btn_save">保存</button>
</div>

JavaScriptを書き換える

↓のようにJavaScriptを書き換えて、「JavaScript / CSSでカスタマイズ」にアップしておきましょう。

(function () {
   
    'use strict';

    function draw_start(){
       let canvas = new DrawingBoard.Board('canvas'); 
    }

    //canvasの画像を保存
    function saveCanvas(canvas_id)
    {
        let canvas_ary = document.getElementsByClassName("drawing-board-canvas");
        let canvas = canvas_ary[0];
        
        let title = document.getElementById("title").value;
        // Brobを取得
        canvas.toBlob( function ( blob ) {
            // FormDataにファイルを格納
            let formData = new FormData();
            formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
            formData.append('file', blob, title+'.png');    
        
            //ファイルをアップロード
            let 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= function(){
                if(xmlHttp.status===200){
                    let key = JSON.parse(xmlHttp.responseText).fileKey;
        
                    let body={
                        app:101,
                        record:{
                            "タイトル":{value:title},
                            "添付ファイル":{value:[
                                {fileKey: key}
                            ]}
                        }
                    }
        
                    //fileKeyを設定
                    kintone.api("/k/v1/record","POST",body).then(function(resp){
                        console.log(resp);
                        location.reload();
                    },(err)=>{
                        console.log(err,record.$id.value);
                        alert(err);
                    });
                }
            }
        });
    }
    
    kintone.events.on(['app.record.index.show'], event => {
        if(event.viewId == 一覧のID){
            draw_start();
            let btn_save = document.getElementById("btn_save");
            btn_save.onclick =()=>{saveCanvas('canvas');};
        }
        return event;
    });
})();

CSSを書こう

こんな感じでキャンバスのサイズを設定するCSSです。サイズはご自由に！

「JavaScript / CSSでカスタマイズ」にアップしておきましょう。

#canvas{
    width: 1000px;
    height: 600px;
}

絵がかける！

まとめ

ApplePencilでも絵を描くことができるのでぜひためしてみてね＾０＾
メモするのにいいかもしれないです＾＾

現在のところ、一度保存した画像の編集には対応していないので、
今後はもうちょっと研究して、編集にも対応させてみたいと思います＾０＾