今回は、なんの役に立つのかわからないけど、
「お絵かきしたらそのまま保存する」アプリ
を作ってみたので紹介したいと思います。
↓改良版UPしました！
【kintone】お絵描きして添付ファイルに保存する（改）
保存ボタンを押すと、画像が添付ファイルフィールドに保存されます。
アプリを作成する
フィールドは下表のように作成します。
| フィールド種類 | フィールドコード | フィールド名 |
|---|---|---|
| 文字列(1行) | タイトル | タイトル |
| 添付ファイル | 添付ファイル | 添付ファイル |
一覧をカスタマイズビューで作成
一覧のIDは控えておいてください。
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にしてください。
(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;
});
})();
動かしたらこんな感じ
お絵かきをしたら、画像のタイトルを書いて保存ボタンをクリックします。
レコードが追加されているでしょうか？(゜゜)
タッチパネルなどで出来たら便利かなと思ってやってみたのが最初ですが、
タッチパネルでも絵をかけないことはないんですが、タッチするとブラウザ自体がグイグイ動いてしまい、描きにくい・・・😨となり、タッチで描くのはボツにしました。
というわけでマウスで描くところに落ち着いています(+_+)
では！