【コピペOK！】（サーバ）スクリプトを使って編集ページに「いいね」機能を実装してみる

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

2021年Qiitaのプリザンターアドベントカレンダーから本ブログをご覧になった方は、初めての方がいらっしゃるかと思いますので、簡単に自己紹介をさせていただきます。

自己紹介 

株式会社リーデックスで働いている小川と申します。リーデックスはソフトウェア開発を行っている会社です。2018年プリザンターに一目ぼれをし、すぐに4社目の公式パートナーとなりました。

pleasanter.hatenablog.jp

また、プリザンターを広めるためにこのブログが一役買ったということで、プリザンター開発元のインプリム社から、2021年度Implem Partner Awardで「Blog of the Year 」をいただきました。

pleasanter.hatenablog.jp

これからも、より多くのユーザー様にプリザンターを届けられるよう、ブログなどで発信していきたいと思います。

さて、今回は、サーバスクリプトとスクリプト、スタイルを利用して、編集ページに「いいね」機能を追加してみようと思います。

編集ページに「いいね」機能を実装してみる

いいね機能を実装していきたいと思いますが、その前に、スクリプト、サーバスクリプト、スタイルについて簡単に説明します。

すでに、ご存じの方は、「いいね機能の仕様」まで読み飛ばしていただいて大丈夫です。

スクリプトとは？

プリザンターのスクリプトとは、クライアント（ブラウザ）上で実行されるプログラムで、JavaScriptで記述することができます。

スクリプトについては、下記の過去記事やこのブログのカテゴリ「スクリプト・スタイル」を参考ください。

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

サーバスクリプトとは？

スクリプトと似てはいますが、別の仕組みとして「サーバスクリプト」があります。

サーバスクリプトとは、ブラウザに表示される前に、プリザンターの内部で実行するプログラムです。こちらもJavaScriptで記述します。

サーバスクリプトについても、以下のような記事や、このブログのカテゴリ「スクリプト・スタイル」を参考ください。

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

スタイルとは？

スタイルとは、見た目を変更することができる機能です。CSS（スタイルシート）を使います。

スタイルについても、以下のような記事や、このブログのカテゴリ「スクリプト・スタイル」を参考ください。

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

pleasanter.hatenablog.jp

いいね機能の仕様

次に、いいね機能の仕様についてまとめます。

今回はできるだけシンプルな仕様としていますので、少し物足りないかもしれません。ソースコードもシンプルですので、ぜひ追加開発にチャレンジしてみてください。

テーブル一覧

• いいね機能テーブル：いいね！リンクと件数が表示される。
• いいねマスタ：サイトIDごとのいいね情報を保持。

仕様

• いいね機能テーブルの入力項目に制限はなし。
• 履歴はいいねマスタに保存される。
• ログインユーザごと、サイトIDごとに１回のみ実行可能。
• いいね機能テーブルにいいねした件数といいね処理のリンクが表示される。
• 一度いいねをすると取り消しできない。

いいね機能テーブル

いいね！機能テーブルは、いいね機能を実行するテーブルです。

いいね！の数とリンクは、ページ上部の更新日時の左側（赤枠）に表示されます。

上記サンプルは、数値A、説明Aなどありますが、エディタで設定できる入力項目については、任意のもので問題ありません。

いいねをクリックすると、「いいね！済み」に文言が変わり、リンクが削除されます。

いいね！を状態を保存する「いいねマスタ」

次に、いいね！状態を保存する「いいねマスタ」についてです。

「いいねマスタ」の下記項目はいいね機能で利用します。ほかの機能で利用しないでください。

• 数値A（NumA）
• 説明A（DescriptionA）

その他項目は任意です。

一覧の表示項目なども特に制限はありませんが、数値Aと説明Aについては表示しておいた方がわかりやすいかもしれません。

いいね機能に必要な（サーバ）スクリプト

それでは、（サーバ）スクリプトの実装に入ります。サーバスクリプト、スクリプト、スタイルとも、「いいね機能テーブル」に追加をしていきます。

サーバスクリプト

var iine_master = XXX;// いいねマスターのサイトIDを設定する
var Id = context.Id;  // すべての見積の連番を取得
let view ={
    "View": {
        "ColumnFilterHash": {
            "NumA": Id
        }
    }
}

let results = items.Get(iine_master, JSON.stringify(view));
let id = "";
let user = "";
if (results.Length > 0) {
    id   = results[0].ResultId
    user = results[0].DescriptionA
}
hidden.Add('hidden_iine_master_id', id);
hidden.Add('hidden_iine_user', user);

context.Log("Context-Id:"+Id);
context.Log("Context-view"+JSON.stringify(view))
context.Log("Context-user:"+user);

iine_masterには、いいねマスタのサイトIDを設定してください。

スクリプト

var iine_master = XXX;// いいねマスターのサイトIDを設定する
$(document).on('click','#iine',function(){
    let csv = $("#hidden_iine_user").val();
    let arr;
    if (csv == "") {
        arr=[];
    }
    else{
        arr = csv.split(',');
    }

    let user_id = String($p.userId());
    if (arr.indexOf(user_id) == -1){
        
        arr[arr.length] = user_id;
        console.log(arr.join(','));

        if (arr.length == 1){
            regist_iine(arr.join(','))
        }else{
            update_iine(arr.join(','))
        }

        $("#iine_num").text(arr.length);
        $p.set($p.getControl("NumA"),arr.length);
        $p.set($p.getControl("DescriptionA"),arr.join(','));
    }
    else{
        console.log("すでに登録済み。$p.userId():"+$p.userId());
    }
});

function regist_iine(csv){
    $p.apiCreate({
        id: iine_master,
        data: {
            NumA: $p.id(),
            DescriptionA: csv
        },
        done: function (data) {
            setAfterIine();
            $("#hidden_iine_user").val(csv);
            $("#hidden_iine_master_id").val(data.Id);
            console.log(data);
        },
        fail: function (data) {
            console.log(data);
        },
        always: function (data) {}
    });
}

function update_iine(csv){
    $p.apiUpdate({
        id: $("#hidden_iine_master_id").val(),
        data: {
            DescriptionA: csv
        },
        done: function (data) {
            setAfterIine();
            console.log(data);
            $("#hidden_iine_user").val(csv);
        },
        fail: function (data) {
            console.log(data);
        },
        always: function (data) {
            //console.log(data);
        }
    });
}


function setAfterIine(){
    $("#iine").removeClass("link");
    $("#iine").text("いいね！済み");
    $(document).off('click','#iine');
}

$p.events.on_editor_load = function () {

    let csv = $("#hidden_iine_user").val();
    let arr;
    if (csv == "") {
        arr=[];
    }
    else{
        arr = csv.split(',');
    }
    $("#RecordInfo").append('<div style="font-weight:bold">いいね：<span id="iine_num">'+ arr.length + '</span>件　<span id="iine" class="link">いいね！</span></div>');

    console.log("$p.id():" + $p.id());
    console.log("csv:"+csv);
    console.log("$p.userId():"+$p.userId())

    let user_id = String($p.userId());
    if (arr.indexOf(user_id) != -1){
        setAfterIine();
    }
};

こちらも、iine_masterには、いいねマスタのサイトIDを設定してください。

スタイル

#iine.link{
    color:blue;
    text-decoration: underline;
    cursor:pointer;
}

#iine.unlink{
    color:black;
    text-decoration: none;
    cursor:normal;
}

まとめ

今回は、（サーバ）スクリプトを使って編集ページに「いいね」機能つけてみました。

文中にも記載しましたが、かなりシンプルに作っていますので、いいねの取り消しや、いいねを押したユーザ名の表示など、足りない機能がありましたらカスタマイズしてみてください。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問合せください。

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