オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

プリザンターの入力値をCookieに保存してみる

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

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

さて、今回は、プリザンターの値を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("削除完了");
    });
}

 

 $p.events.on_editor_load については、説明していませんが、下記ブログに書いてありますので、わからない方は参考にしてみてください。 

 

上記スクリプトを、管理画面のスクリプトに保存してください。スクリプトの保存方法については、下記ブログに記載しています。 

 

試してみる

それでは、試してみましょう。まずは、Cookie表示ボタンをクリックします。f:id:h-ogawa-reedex-co-jp:20190730210728p:plain

すると、下記のようなポップアップが出力されると思います。

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

Cookieが設定されていないので、undefinedと表示されます。

次に、Cookie設定をクリックしてみましょう。cookie設定ボタンをクリックしてみます。f:id:h-ogawa-reedex-co-jp:20190730210806p:plain

すると、設定完了した旨がポップアップで表示されます。

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

この状態で、Cookie表示ボタンをクリックすると

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

上記のように表示されます。

最後に、Cookie削除ボタンをクリックしてみましょう。

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

削除されましたとポップアップが表示されます。この状態で、Cookie表示をクリックすると、一番最初にCookie表示ボタンをクリックしたときに表示されたポップアップが表示されると思います。試してみてください。

まとめ

今回は、jquery.cookie.jsを使って、Cookieを処理するプログラムを書いてみました。応用すると、画面を跨いだ値の引き渡しができるようになりますので、プログラムの幅が広がりますね。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。