Qiitaのog:descriptionに反映される箇所をコメントで教えてくれるスクリプト

Qiita summary line notification for Slack.user.js

// ==UserScript==
// @name        Qiita summary line notification for Slack
// @namespace   khsk
// @description 記事の作成・編集ページの改変 slack用の要約箇所を把握する
// @include     http://qiita.com/drafts/*
// @version     1
// @grant       none
// ==/UserScript==


var comment = '\n[]:ここまでが要約です\n'
var summary_size = 117

var old_value = ''

var start_caret

// 要約末尾でのデリート入力フラグ
var delete_flg = false

var key_down_func = function(KeyboardEvent) {
  // 日本語入力に備えて入力開始時のキャレットをで取得
  start_caret = this.selectionStart
  // 選択範囲がある場合は削除処理時のキャレット移動をキャンセルするためのローカル変数
  var down_end_caret = this.selectionEnd
  if (start_caret != down_end_caret) {
    return
  }
  
  
  var end_caret = get_end_caret(this)
  
  // コメント部を削除しようとすると、コメント部をスキップする
  // 入力の処理はこのイベントの後に行われるため、キャレットの移動先で入力=削除が行われる
  if (start_caret == end_caret + comment.length && KeyboardEvent.key == 'Backspace') {
    this.setSelectionRange(end_caret, end_caret)
  } else if (start_caret == end_caret && KeyboardEvent.key == 'Delete') {
    // 要約末尾でデリートの場合はコメント後へキャレットを移動し、keyupイベントで要約末尾に戻る
    delete_flg = true
    this.setSelectionRange(end_caret + comment.length, end_caret + comment.length)
  }
}
document.getElementById('draft_item_raw_body').addEventListener('keydown', key_down_func)

var key_up_func = function(KeyboardEvent) {
  var value = this.value
  var end_caret = get_end_caret(this)
  // コメント作成後かつコメント後に入力が無い場合に要約末尾でデリートすると、
  // テキストに変化無しになるため、テキストの比較前にデリートのキャレット移動を行う
  if (delete_flg) {
    // コメント後でデリートしたので、要約末尾に戻る
    delete_flg = false
    old_value = value
    this.setSelectionRange(end_caret, end_caret)
  }
  
  if (value == old_value) {
    // テキストに変更無し(カーソルの移動など)なら何もしない
    return
  }
  
  
  // 現在のキャレット(カーソル位置)を取得
  // コメントの削除前で無ければ削除でずれてしまう
  var caret = this.selectionStart
  
  // コメントの削除(コメントは一つだけと決めつける)
  value = value.replace(comment,'')
  var length = value.length
  if(length < summary_size ) {
    // 要約文字数未満ならテキストを保存して終了
    old_value = this.value
    return
  }
  
  
  // summary_size以降にコメントを挟む
  this.value = old_value = value.substr(0, summary_size) + comment + value.substr(summary_size, length - 1)

  // valueの変更後はキャレットが末尾に移動してしまうので戻す
  
  // 入力後のキャレットがコメント挿入後にコメント内にあるなら、コメント長分増やす
  if(caret > summary_size && caret < summary_size + comment.length) {
    caret += comment.length
  }
  this.setSelectionRange(caret, caret)
}
document.getElementById('draft_item_raw_body').addEventListener('keyup', key_up_func)

function get_end_caret(TextAreaObject){
  // コメント生成後に要約部の削除により、要約がsummary_size未満になることがある
  // その場合、summary_sizeを要約末尾とするとBackspaceやDeleteで コメント部が削除→さらにコメント部追加 されることがあるので、summary_sizeと入力値の最小値を取ることにする
  // キャレットの移動にも影響が出るので、基本はこちらの返却値を使う
  
  // 対象はcomment以前の入力の長さ(要約部のみの長さがほしい)
  text_length = TextAreaObject.value.split(comment)[0].length
  return Math.min(text_length, summary_size)
}



// 邪魔な場合もあるので、オン・オフ機能をつける(デフォルトはオン)

// Font Awesome を使い統一感をもたせたボタンを作る
var summary_switch_span = document.createElement('span')
// 「書き方」のマウスオーバーを拝借
summary_switch_span.className = 'draftFormBody_help'
var summary_switch_i = document.createElement('i')
summary_switch_i.className = 'fa fa-check-circle-o'
var summary_switch_text = document.createElement('span')
summary_switch_text.innerHTML = '要約:ON'

summary_switch_span.appendChild(summary_switch_i)
summary_switch_span.appendChild(summary_switch_text)
document.getElementsByClassName('draftFormBody_tabBar')[0].appendChild(summary_switch_span)

var summary_flg = true
var summary_switch_click = function(e) {
  var body = document.getElementById('draft_item_raw_body')
  if(summary_flg) {
    summary_flg = false
    summary_switch_text.innerHTML = '要約:OFF'
    summary_switch_i.className = 'fa fa-check-circle'
    body.removeEventListener('keydown', key_down_func)
    body.removeEventListener('keyup', key_up_func)
    body.value = body.value.replace(comment,'')
  } else {
    summary_flg = true
    summary_switch_text.innerHTML = '要約:ON'
    summary_switch_i.className = 'fa fa-check-circle-o'
    body.addEventListener('keydown', key_down_func)
    body.addEventListener('keyup', key_up_func)
    // ON時にコメント挿入を行うためにkeyupイベントをエミュレート
    var key_event = document.createEvent('KeyboardEvent')
    key_event.initKeyEvent('keyup', true, true, null, false, false, false, false, 0, 0)
    body.dispatchEvent(key_event)
  }
}
summary_switch_span.addEventListener('click', summary_switch_click)