p5.jsは、容易にグラフィックやサウンドを操作できるJavaScriptライブラリです。 詳しいプログラミングの知識がなくても、アプリケーションやアニメーション、ゲームなどをブラウザ上で表現できるようになります。 今回は、ブラウザ上で画像にメモ書きしながらアップロードする機能を作成しました。
サンプル
フォーム設定
コード
本サンプルでは、p5.min.js及びp5.dom.min.jsを利用しています。 p5.min.jsのみでも同様の機能の実装は可能ですが、p5.dom.min.jsを利用することでより簡単にinput要素を作成しています。
まず、p5.min.jsとp5.dom.min.jsを登録したのち、下記sample.jsを登録します。
※p5.js v0.7.1で動作を確認しています。
sample.js
(function(){"use strict";varmyp5;kintone.events.on(['app.record.create.show','app.record.edit.show',],function(event){kintone.app.record.setFieldShown('添付ファイル',false);kintone.app.record.getSpaceElement('space').innerHTML='\<div class="control-label-gaia"\>\<span class="control-label-text-gaia"\>添付ファイル\</span\>\</div\>\<div id="p5Container"\>\</div\>';myp5=newp5((function(p){varcolor,weight;varshowImage=function(image){p.resizeCanvas(image.width,image.height);p.canvas.style.width='';p.canvas.style.height='';p.background(image);};p.setup=function(){if(event.type==='app.record.create.show'){p.file={name:'image.png',type:'image/png',};p.createCanvas(500,300);p.background(255);}else{p.file={name:event.record.添付ファイル.value[0].name,type:event.record.添付ファイル.value[0].contentType,};varxhr=newXMLHttpRequest();xhr.open('GET','/k/v1/file.json?fileKey='+event.record.添付ファイル.value[0].fileKey);xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.responseType='blob';xhr.addEventListener('load',function(){p.loadImage((window.URL||window.webkitURL).createObjectURL(xhr.response),showImage);});xhr.send();}p.createFileInput(function(file){if(file.type!=='image')return;p.file={name:file.name,type:'image/'+file.subtype,};p.loadImage(file.data,showImage);});color=p.createInput('#000');weight=p.createInput(10,'number');}p.draw=function(){p.stroke(color.elt.value);p.strokeWeight(weight.elt.value);if(p.mouseIsPressed===true){p.line(p.mouseX,p.mouseY,p.pmouseX,p.pmouseY);}}}),'p5Container');});kintone.events.on(['app.record.create.submit.success','app.record.edit.submit.success',],function(event){returnnewkintone.Promise(function(resolve){myp5.canvas.toBlob(function(blob){varformData=newFormData();varxhr=newXMLHttpRequest();formData.append('\_\_REQUEST\_TOKEN\_\_',kintone.getRequestToken());formData.append('file',blob,myp5.file.name);xhr.open('POST',encodeURI('/k/v1/file.json'));xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.addEventListener('load',function(){kintone.api('/k/v1/record','PUT',{app:kintone.app.getId(),id:event.recordId,record:{添付ファイル:{value:[{fileKey:JSON.parse(xhr.responseText).fileKey}]}}}).then(function(){resolve(event);});});xhr.send(formData);},myp5.file.type);});});})();if(!HTMLCanvasElement.prototype.toBlob){//polyfillObject.defineProperty(HTMLCanvasElement.prototype,'toBlob',{value:function(callback,type,quality){varbinStr=atob(this.toDataURL(type,quality).split(',')[1]),len=binStr.length,arr=newUint8Array(len);for(vari=0;i\<len;i++){arr[i]=binStr.charCodeAt(i);}callback(newBlob([arr],{type:type||'image/png'}));}});}