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

今回は、なんの役に立つのかわからないけど、
「お絵かきしたらそのまま保存する」アプリ
を作ってみたので紹介したいと思います。

↓改良版UPしました！
[【kintone】お絵描きして添付ファイルに保存する（改）](https://qiita.com/juri_don/items/7dbf37c78579e5a90be4)

保存ボタンを押すと、画像が添付ファイルフィールドに保存されます。

<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/a52333dc-5171-fa66-2037-f6522306522f.png">

## アプリを作成する

フィールドは下表のように作成します。

| フィールド種類 | フィールドコード | フィールド名 |
|:-:|:-:|:-:|
| 文字列(1行)  | タイトル  | タイトル  |
|  添付ファイル | 添付ファイル  | 添付ファイル  |

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f4066282-16cf-8665-66ee-065f2a0716c9.png" width=640>


## 一覧をカスタマイズビューで作成
一覧のIDは控えておいてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c306926d-2265-f2ba-39a4-5666e00c38ba.png" width=640>

HTMLは下記のようにしておきます。

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

## JavaScript

下記の様な感じで、コードを書きます。
一覧IDは控えておいたIDにしてください。

```js
(function () {
   
    'use strict';
    //canvasにお絵描きできるようにする
    //canvasのサイズ
    const c_W =1280;
    const c_H =720;

    let Blush=false;
    let ctx;
    let x,y,mouseX,mouseY;

    //canvasの初期設定
    function draw_start(){
        let canvas = document.getElementById("canvas"); 
        canvas.setAttribute("width",c_W);
        canvas.setAttribute("height",c_H);
        ctx = canvas.getContext('2d'); 
        ctx.strokeStyle = 'rgb(00,00,00)';//線の色
        ctx.fillStyle = 'rgb(250,250,250)'; //塗りつぶしの色
        ctx.fillRect(0,0,c_W,c_H);
            
        //マウスイベント
        canvas.addEventListener("mousemove",m_move);
        canvas.addEventListener("mousedown",m_down);
        canvas.addEventListener("mouseup",m_up);
    }

    function m_move(event){ 
        mouseX = event.pageX;
        mouseY = (event.pageY-300);//何故かよくわからないけど300pxほどずれるので
        if(Blush){ 
            ctx.lineWidth = 5;
            ctx.lineCap = "round";
            ctx.beginPath(); 
            ctx.moveTo(x, y);
            ctx.lineTo(mouseX, mouseY);
            ctx.stroke();
            x =mouseX;
            y =mouseY;
        }
    }

    function m_down(event){ 
        Blush=true;
        x =event.pageX;
        y =event.pageY-300; //なんかよくわからないけど300px程ずれるので
    }

    function m_up(){ 
        Blush=false; 
    }

    //画像クリア
    function cleareCanvas(){
        ctx.clearRect(0,0,c_W,c_H);
        ctx.fillRect(0,0,c_W,c_H);
    }

    //canvasの画像を保存
    function saveCanvas(canvas_id)
    {
        let canvas = document.getElementById(canvas_id);
        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 == 5523443){//←控えておいた一覧ID
            //canvasの初期設定的
            draw_start();
            //保存ボタン
            let btn_save = document.getElementById("btn_save");
            btn_save.onclick =()=>{saveCanvas('canvas');};
            //クリアボタン
            let btn_clr = document.getElementById("btn_clr");
            btn_clr.onclick =()=>{cleareCanvas();};
        }
        return event;
    });
})();
```
## 動かしたらこんな感じ

お絵かきをしたら、画像のタイトルを書いて保存ボタンをクリックします。
レコードが追加されているでしょうか？(゜゜)

![oekaki2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e4355e60-b8c4-71cd-c7f9-ae03a6ac4fb0.gif)

タッチパネルなどで出来たら便利かなと思ってやってみたのが最初ですが、
タッチパネルでも絵をかけないことはないんですが、タッチするとブラウザ自体がグイグイ動いてしまい、描きにくい・・・😨となり、タッチで描くのはボツにしました。
というわけでマウスで描くところに落ち着いています(+_+)

では！