プリザンターの入力値をCookieに保存してみる - オープンソースのローコード開発ツールのプリザンター（pleasanter）ブログ

こんにちは。
リーデックス小川です。

先日、伊豆高原へ旅行に行きました。クラフトハウスに行き、トンボ玉を初体験してきました。初めてだったので、ほぼほぼ補助の方がやってくれましたが（笑）、なかなかうまくできました。携帯電話のストラップとして利用しています。ぜひ皆さんも体験してみてください。

さて、今回は、プリザンターの値をCookieに保存してみたいと思います。プリザンターのデフォルトの機能ではありませんが、jquery.cookie.jsを利用して実装してみたいと思います。

完成した画面

それでは、実際にプログラミングを行っていきます。まずは、完成した画面は下記の通りとなります。

f:id:h-ogawa-reedex-co-jp:20190730204314p:plain

画面下に、Cookie表示、Cookie設定、Cookie削除のボタンがあり、それぞれのボタンに処理を追加していきたいと思います。

ボタンの設定をする。

それでは、まずはボタンの設定を行っていきます。ボタンの設定は、下記のようなプログラムになります。

var button1 = '<button id="cookie_button1" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie表示</button>';
var button2 = '<button id="cookie_button2" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie設定</button>';
var button3 = '<button id="cookie_button3" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie削除</button>';

少し長いのですが、Cookie表示、設定、削除のボタンが設定されています。編集画面にある更新ボタンと同じものです。それぞれ、idとボタン名を更新しています。

これらを、削除ボタンの後に追加します。

$("#MainCommands").append(button1);
$("#MainCommands").append(button2);
$("#MainCommands").append(button3);

詳細は割愛しますが、jQueryのappendにて、削除ボタンの後に上記のボタンが追加されていると思います。

jquery.cookie.jsを設定する

続いてjquery.cookie.jsを読み込みます。

ファイルをダウンロードすることもできますが、手軽に使うため、CDNから読み込みます。

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js");

$getScript()で、外部からJavaScriptのファイルを読み込みます。ローカルファイルで保存した場合は、https～をローカルファイルから読み込むようにします。

イベントを設定する

それでは、最後にそれぞれのボタンにイベントを実装します。

var cookie_key = location.pathname;

$(document).on('click','#cookie_button1',function(){
alert(cookie_key + "->" + $.cookie(cookie_key));
});

$(document).on('click','#cookie_button2',function(){
$.cookie(cookie_key,'100');
alert("設定完了→100");
});
$(document).on('click','#cookie_button3',function(){
$.removeCookie(cookie_key);
alert("削除完了");
});

$.cookie()でCookieの取得、設定を行います。$.cookie(XXXX)と引数が1つの場合は、XXXXに設定されてたCookieを取得します。$.cookie(XXXX,YYYY)とすると、XXXXにYYYYを設定します。Cookieの値を削除する場合は、$.removeCookie(XXXX)でXXXXに設定されたCookieが削除されます。

すべてのプログラムをまとめたものが下記となります。

$p.events.on_editor_load = function () {
var button1 = '<button id="cookie_button1" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie表示</button>';
var button2 = '<button id="cookie_button2" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie設定</button>';
var button3 = '<button id="cookie_button3" class="button button-icon validate ui-button ui-corner-all ui-widget applied" type="button" onclick="" data-icon="ui-icon-disk"><span class="ui-button-icon ui-icon ui-icon-disk"></span><span class="ui-button-icon-space"> </span>Cookie削除</button>';

$("#MainCommands").append(button1);
$("#MainCommands").append(button2);
$("#MainCommands").append(button3);

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js");

var cookie_key = location.pathname;

$(document).on('click','#cookie_button1',function(){
alert(cookie_key + "->" + $.cookie(cookie_key));
});

$(document).on('click','#cookie_button2',function(){
$.cookie(cookie_key,'100');
alert("設定完了→100");
});
$(document).on('click','#cookie_button3',function(){
$.removeCookie(cookie_key);
alert("削除完了");
});
}