Chatwork拡張機能の機能追加！(vol.1)

チャットツールのChatworkの拡張機能(エクステンション)の機能追加です。

① メッセージをダブルクリックするとその人のメッセージのみを表示する
② [ME]ボタンをクリックすると、自分宛のメッセージを右側に表示する

ソースコードはGitHubにあげました。

やってることは簡単です。
これも前回ちゃんとキレイにリファクタしてたから実装量は少ないです。

コードの説明

① メッセージをダブルクリックするとその人のメッセージのみを表示する

グループにたくさん人がいるとメッセージが飛び交いカオスになります。
特定の人のメッセージを見逃すことがあるので、簡単に表示できるようにしてみました。
１．「_bindDblClick」メソッドを追加
２．「.timelineMessage--border」クラス（メッセージの親DOM）のダブルクリックイベントの実装
３．対象のメッセージの名前を取得する
４．初回に実装した_changeMessageメソッドに流す

    // ダブルクリックしたユーザーのみ表示
    function _bindDblClick() {
        $('.timelineMessage--border').on('dblclick', function(event) {
           var targetUserName = $(this).find('.timelineMessage__userName').text();
           if (!targetUserName || targetUserName === '') {
               return;
           }
           _changeMessage(targetUserName, true);
        });
    }

② [ME]ボタンをクリックすると、自分宛のメッセージを右側に表示する

１．MEボタンのDOM追加(id = "_chatSendTool"にappend)
２．メッセージ表示用パネル(div)のDOM追加（displayは非表示=none）

    function _addElements() {
       var meButton = '<li role="button" class="_showDescription" id="_showToMe" aria-label="自分宛のメッセージを表示します" style="display: inline-block;"><span class="" style="color:#FFF; background-color:#66A300; padding: 3px 4px; font-size: 10px; border-radius: 3px; position: relative; top: -2px;">&nbsp;ME&nbsp;</span></li>';
       $('#_chatSendTool').append(meButton);

       $('body').append('<div id="message_row" style="height:100%; display:none; position:fixed; top:0px; right:0px; z-index:9999999; background:#F3F3F3; width:300px; overflow:scroll;"></div>');
       $messageLow = $('#message_row');
    }

３．MEボタンのクリックイベント実装
　ー showMessageLow(boolean)がtrue＝すでにメッセージが表示しているなら初期化（非表示にする）
　ー 表示中のメッセージを全部取り出して、その中で自分の名前(loginUserName)が入っているメッセージだけを抽出し、HTMLを格納
　ー 最後に２のDOMにappendしてから、表示する(.show)

    // 自分宛のメッセージを表示する
    function _showToMeMessage() {
        if (showMessageLow) {
           _initMessageLow();
           return;
        }
    	var prevUserName = '';
        var messageList = $(CHATWORK_CLASS.TIMELINE_MESSAGE);
        var appendHTML = '';
        var loginUserName = _getLoginUserName();
        for (i=0; i < messageList.length; i++) {
          var $targetMessage = $(messageList[i]);
          var messageText = $targetMessage.find('.timelineMessage__message').text();
          if (messageText.match(loginUserName)) {
             appendHTML += $targetMessage.html();
          }
        }
        if (appendHTML === '') {
          appendHTML = '自分宛のメッセージはありません';
        }
        $messageLow.append(appendHTML);
        $messageLow.show();
        showMessageLow = true;
    }

本来ロジックの言語化はコードで示しているので要らないのですが、
ロジックがまず頭に浮かぶ、整理できてるからコードで表現できるわけです。一つコツがあります。

自身が実現したい処理はまず言葉で考える
→ 「何をどうするか」：AをしてBをする、Cを取ってDに渡す、など
大きな処理でも一つ一つ細分化していけば、小さなタスクとなり手がつけられ易くなります。
フローチャートで書いてもいいですが、テキストで書き出すのが早いでしょう。

(例) メッセージをダブルクリックするとその人のメッセージのみを表示する
1 - ダブルクリックのした時の対象者の取得 -> どのクラスから取れるか？
2 - その人以外のメッセージの非表示処理 -> 既存のメソッドできるか？
3 - ダブルクリックのイベントバインド -> どのクラスにバインドするか？

やりたいこと（流れ）を決めて、では具体的には？(How)を積み上げていけばプログラムはできるわけです。
だいたいつまずく時は"How"(実現方法=実装方法)が分からないからということが多いと思います。
そういう時はググったり、Qiitaとか見れば大抵解決できます。

また今後も機能追加していきます（飽きたらやめるかも。笑）

初回実装時のnoteもぜひみてください。