新規投稿
フォローする

kintoneでチャットアプリ

kintoneでチャットアプリが欲しいという声があるようなので作ってみました。

サンプル

フォーム設定

コード

HTML(カスタマイズビュー)

<div id="comments"></div>
<div id="comment_create">
  <textarea id="text_input"></textarea>
  <div id="comment_submit_button">送信</div>
</div>
<script type="text/html" id="lodash_template">
  <div class="comment <%= selfOrOthers %>">
    <p class="time"><%= time %></p>
    <p class="user"><%= user %></p>
    <p class="text"><%= text %></p>
  </div>
</script>

JavaScript

※本サンプルでは、lodash及びMoment.jsを利用しています。Cybozu CDNからご利用ください。先にlodash.min.jsとmoment.min.jsを読み込んだ後、下記sample.jsを読み込みます。
※コード内のコメントアウトしている部分について、有効にすると定期的にサーバーへリクエストを送り、自動更新を行います。実務運用する場合は、更新の頻度を調整するか、そのまま自動更新機能を停止しておくことをお勧めします。万が一、サーバーに悪影響を及ぼした場合も責任は負いかねます。あらかじめご了承ください。

sample.js

(function() {
  "use strict";
  kintone.events.on('app.record.index.show', function(event){
    if(event.viewName !== 'チャット') return;
    var template = _.template(document.getElementById("lodash_template").innerHTML);
    var createComments = function(records){
      return _.reduce(records, function(html, record){
        return html + template({
          time: moment(record.作成日時.value).format('MM/DD HH:mm'),
          user: record.作成者.value.name,
          text: record.text.value,
          selfOrOthers: kintone.getLoginUser().code === record.作成者.value.code ? 'self': 'others'
        });
      }, '');
    };
    document.getElementById('comments').innerHTML = createComments(event.records);
    document.getElementById("comment_submit_button").addEventListener('click', function(){
      kintone.api(kintone.api.url('/k/v1/record', true), 'POST', {
        app: kintone.app.getId(),
        record: {
          text: {value: document.getElementById("text_input").value}
        }
      }).then(function(){
        location.reload();
      });
    });
    /*
    // 自動更新ここから
    var latest = event.records.length ? event.records[0].レコード番号.value : 0;
    setInterval(function(){
      kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
        app: kintone.app.getId(),
        query: 'レコード番号 > "' + latest + '" order by レコード番号 desc'
      }).then(function(response){
        if(!response.records.length) return;
        document.getElementById('comments').innerHTML = createComments(response.records) + document.getElementById('comments').innerHTML;
        latest = response.records[0].レコード番号.value;
      });
    }, 10 * 1000); //10秒に1度更新
    // 自動更新ここまで
    */
  });
})();

CSS

sample.css

#comments{
  box-sizing: border-box;
  margin: 10px auto;
  padding: 10px;
  width: 1000px;
  max-width: 100%;
  min-height: 100px;
  background: #FFA500;
  border-radius: 10px;
}
#comments:after{
  content: '';
  display: block;
  clear: both;
}
.comment{
  width: 80%;
  margin-bottom: 10px;
}
.comment.self{
  float: right;
  text-align: right;
}
.comment.others{
  float: left;
}
.time,
.user{
  display: inline-block;
  padding: 0;
  margin: 0;
}
.text{
  margin: 0;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background: rgba(255, 255, 255, .5);
  border-radius: 5px;
  white-space: pre;
  text-align: left;
}
#comment_create{
  padding: 10px;
  border-radius: 5px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, .5);
}
#comment_submit_button{
  padding: 5px;
  border-radius: 5px;
  background: #FFA500;
  color: #fff;
  cursor: pointer;
}
#comment_create *{
  display: inline-block;
  vertical-align: bottom;
}
#text_input{
  width: 300px;
  border-radius: 5px;
}

通知設定

通知設定を行うとさらに便利です。 https://jp.cybozu.help/k/ja/user/app_settings/notification/record_condition.html

※サンプルでは通知先に「Everyone」を指定していますが、アプリの通知先やアクセス制限は用途に合わせて設定してください。

8

1件のコメント

Avatar
Ein

江田様

お世話になっております。

このチャットはスマホでも可能でしょうか。

0
サインインしてコメントを残してください。