안녕하세요!

이번에는 이미지를 그려 그 자리에서 저장하는 앱을 만들고 싶습니다.

↓화상과 같은 느낌에 낙서를 하고, 보존 버튼으로 첨부 파일 필드에 보존한다고 하는 어플입니다.



이번에는 신규 등록 화면에서 저장하고 싶습니다.

※지금까지, 일람 화면에 그림을 그리고 신규 등록한다고 하는 앱은 소개했습니다만, 이번은 신규 등록 화면에서 그대로 레코드에 보존한다고 하는 앱입니다👀
참고 : 【kintone】 그림 그려 첨부 파일에 저장 (개)

앱 준비

필드는 첨부 파일과 공간 만.


필드 종류
필드 코드(요소 ID)


공간
sp_img

첨부파일
첨부파일

자바스크립트 쓰기

처리의 흐름은 이런 느낌

신규 등록 화면에서 그림 그리기

저장 성공 후 방금 저장 한 레코드의 첨부 파일 업데이트

저장 성공 후 방금 저장한 레코드의 첨부파일을 업데이트하는 것이 미소입니다.

레코드 추가 화면 표시 후 이벤트

마우스가 움직일 때 마우스가 클릭(드래그) 상태라면 선을 연결
라는 단순? 네, 그림의 구조입니다.
채우기의 색이라든지 기호로.

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를 얻을 수 있습니다.
참고 : 레코드 추가 화면 저장 성공 후 이벤트

파일 저장(업로드) 방법에 대해서는 여기를 참고해 보세요 👀
참고 : 파일 업로드에 필수적인 세 단계

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도 장식해 보았습니다.