Qiita投稿記事のog:descriptionに反映される本文を教えてくれるユーザースクリプト【改】

前回の作成時に気づいた方法で作りなおしました。
冒頭117文字(以下)の最後の10文字を「Qiitaに投稿」ボタンの隣(時々上)に表示させるユーザースクリプトです。
本文に入れないことで、本文中に変な改行が入らなくなりました。

限定公開で寝かせていたらUIが変わったでござる。
幸いクラス名の変更程度でしたので、さっさと公開。

スクリプト

Qiita-notify-og-description

// ==UserScript==
// @name        Qiita notify og:description
// @namespace   khsk
// @description og:descriptionに反映される117文字の末尾n文字を投稿ボタンの隣に表示する
// @include     http://qiita.com/drafts/*
// @version     1
// @grant       none
// ==/UserScript==

var MAX_LENGTH = 117
var PRINT_LENGTH = 10

var textarea =  document.getElementById('draft_item_raw_body')
var show_og_description = document.createElement('div')
show_og_description.setAttribute('id', 'us_notify_og:description')
show_og_description.innerHTML = getEndText(textarea.value, MAX_LENGTH)
show_og_description.style.float = 'left'
show_og_description.style.marginTop = '6px'
// 投稿ボタンの上から左に表示場所を移動させるならば(横幅が足りないと上に来る)
show_og_description.style.display = 'inline-block'
show_og_description.style.marginRight = '10px'
var footer = document.getElementsByClassName('editorFooter_save')[0]
// prependchildはjQueryのみ
footer.insertBefore(show_og_description, footer.childNodes[0])
var key_up_func = function(KeyboardEvent) {
  show_og_description.innerHTML = getEndText(this.value, MAX_LENGTH)
}
textarea.addEventListener('keyup', key_up_func)

function getEndText(value, max_length) {
  // MAX_LENGTH未満だと表示無しになるので、一応動いていることを示すためMAX_LENGTH未満対応
  var end_point = Math.min(value.length, max_length)
  // 範囲中の連続した改行・半角スペースはひとつの半角スペースにまとめられて表示される(なぜ？) = 表示がPRINT_LENGTH文字未満になるし、末尾が削られるように見える
  // 引数がマイナスになった場合は0として扱われる
  return value.substring(end_point - PRINT_LENGTH, end_point)
}

// 編集画面などで通常、横幅が足りない場合はコメント欄とボタンを２列に分けて調整するが、文字の挿入でサイズがずれ、ボタンが見えなくなることがある
// 特に投稿後の編集画面で、変更通知の選択がある場合
// リサイズによって変更されるcssを、元の横幅より早めに適用することで、２列にするのを早めることで対処
/*
@media(max-width:767px){
    .editorActions{
        float:left;
        width:100%
    }
}
*/
var css = document.createElement('style');
document.head.appendChild(css);
css.sheet.insertRule('@media(max-width:1120px){ .editorActions{ float:left; width:100% } }', 0)
css.sheet.insertRule('@media(max-width:1120px){ .editorFooter_optionsComment{ margin-bottom:5px; width:100% } }', 0)
css.sheet.insertRule('@media(max-width:1120px){ .editorFooter-onUpdate{ height:80px } }', 0)
// 本文の縦幅も連動しないと、最終行付近が見えなくなる
css.sheet.insertRule('@media(max-width:1120px){ .editorBody-onUpdate{ bottom:79px } }', 0)

サンプル

なくなりました。後の改行と、空行の改行を含めて117文字。
表示文字数は8文字になってます。
10文字表示されなかったり改行が挿入されなくなるというメリットが実感できなかったり、イマイチなサンプルですね…

限定公開からslackに表示させてみました。
…description！？descriptionナンデ！？
前回のはog:descriptionなのに…
一応、他ユーザーの記事なども試しましたがすべてog:descriptionでした。
なぜこの記事だけdescriptionになるのかは現在不明です…
限定公開だからかな？

感想

コード自体は30行も無いですね…
いかに前回が無駄な実装だったかを思い知りました。
しかし、逆に最初からこのコードを思いついていたら、あの試行錯誤はありませんでしたし、色々な経験は得られなかったわけで。

あと、今回でQiitaが767pxでいろいろなcssを書き換えていることに気づきました。
目に見えるものはいくつか対応しましたが、まだまだ隠れている不具合がありそうです…

descriptionについて

当初はog:descriptionでない方のdescriptionも同時に表示させようと考えていました。
ぼーっとdescriptionを見ると、後略の...を含めて240文字なので、冒頭237文字を抜き出せば良いなと。
しかし、いくつかの記事のdescriptionを見ているうちに、どうやらdescriptionはマークダウン記法を取り除いたうえで237文字をカウントしていることに気づきました。
これはちょっと簡単には行かなそうなので、一旦こちらは保留にしています…
逆に考えると、og:descriptionのみマークダウンが表示されているのは不自然で、もしかしたらそのうちog:descriptionの仕様も変更されるかもしれませんね。