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

先日、こんな記事をUPしました。
[【kintone】お絵描きして添付ファイルに保存する](https://qiita.com/juri_don/items/8c217689b86a41a75f9c)

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

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

## drawingboard.jsを使う

こちらのお絵かきライブラリを使ってみました。
[drawingboard.js](https://github.com/Leimi/drawingboard.js)

ソースをとりあえずZIPでダウンロードして解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f320df7b-888a-2725-3a6b-6951f223caad.png)

distフォルダー内の

* drawingboard.min.js
* drawingboard.min.css

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

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

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

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

## JavaScriptを書き換える

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

```js
(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でカスタマイズ」にアップしておきましょう。

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

## 絵がかける！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3453dbeb-b8a5-4b90-56e4-5a573b9e9056.png)

## まとめ

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

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