Yahoo!知恵袋でインデント(字下げ)入りの回答をする

私は基本的にteratailで回答していて、たまに知恵袋でも回答するのですが、
知恵袋だとタブやスペースによるインデント(字下げ)が消えてしまうという問題によく頭を悩まされます。

他の回答者がやっているように__(2つ以上のアンダーバー)を使えばいいのでしょうけど、

基本的に(私含めて)プログラミング初心者が多い知恵袋で、いちいち質問者に「エディタで置換してください」と言うのは手間ですし、上手くいかないことが多いです。

それにpythonとかだとアンダーバーにも意味があったりしますから、なおさらアンダーバーはよくないです。

それでも諦めてアンダーバーを使っていたのですが、ある日インデント入りの回答をしている人を見たので、自分でもインデント入り回答ができないか挑戦することにしてみました。

今回はPCのみを想定しています。
実験は

• mac OS High Sierra (ver 10.13.1)
• Google Chrome ver 62.0.3202.89（Official Build）

で行いましたが、おそらくPCからならどのOS、ブラウザからもできる方法だと思います。

方法としては、とりあえず別な記号でインデントを表現しておき、それを後から半角スペースに置換するというものです。
言語によってインデント幅はバラバラでしょうから、そこは各自で確認してください。
(例えばjavascriptは2、pythonは4、など)

初投稿なのでお手柔らかに願います。(^ ^;

デベロッパーツールで確認

回答直前の状態からchromeのデベロッパーツールを使用して送信される値をまず確認してみました。

内容はpythonとjavascriptで回答する場合を想定しています。
アンダーバーは使用したくなかったので、とりあえず`(バッククォート)を使用することにしました。

言語(例えばLISPとか)によってはバッククォートを使いたくない人もいるかもしれませんので、そこは適宜別な記号で読み替えていってください。(他に良い記号があればコメントしていただけると幸いです。)

この内容で回答するを右クリック -> 検証をクリック

するとこの要素の上に目当ての項目が見当たります。

html

<input type="hidden" name="content" value="def func():
````return False

function hoge(){
``console.log('hoge');
``return false;
}">

この部分ですね。このinput要素のvalueを書き換えてやれば良さそうです。

javascriptで書き換え

まずは実験ということで、コンソールを使用してみます。
開いたデベロッパーツールからそのままコンソールに直行。

javascript

console.log(document.getElementsByName("content")[0].value);

上記コードを入力して実行。

def func():
````return False

function hoge(){
``console.log("hoge");
``return false;
}

どうやらdocument.getElementsByName("content")[0]で目的の要素を取得できるみたいです。

これを利用して書き換えられます。

.replace()を使って、削除されない空白文字に置換

通常の半角スペースでは上手くいかなかったので、
nicowikiを参考にしたところ、

ユニコード\u00A0¹だと削除されないみたいだったので、
これで置換することにしました。

javascript

var content = document.getElementsByName("content")[0];
content.value = content.value.replace(/``/g,"\u00A0\u00A0");

このコードを実行することで``が半角スペース2つに置換されます。

これをコンソールから確認²

ちゃんと置換されているようですが、実はここまでは\u0020(普通の半角スペース)でもちゃんと表示されます。

投稿後はどうだ?!

\u00A0で無事に意図通りのインデント表示がされました!

またこのコードを使用した回答をコピペしてエディタに貼り付けると、上手く半角スペースととらえられる模様。

成功です!

ブックマークレット化して回答時にすぐに利用できるようにする

いちいちデベロッパーツールを利用して上記のように書き込むのは面倒なので、ブックマークレットを作成しました
。

javascript

javascript:(function(){
  var c = document.getElementsByName("content")[0];
  c.value = c.value.replace(/``/g,"\u00A0\u00A0");
  console.log(c.value); // <= デバッグ用
})();

console.log()は動作確認用に入れています。いらないと思う方は削除なりコメントアウトなりして使ってください。

これをpackerで圧縮して、

bookmarklet

javascript:(function(){var c=document.getElementsByName("content")[0];c.value=c.value.replace(/``/g,"\u00A0\u00A0");console.log(c.value)})();

完成です!

一応使い方&まとめ的な何か

答えるをクリックしたのちに出てくるプレビュー画面(1枚目の画像のところ)で、この内容で回答するをクリックする前に使用すると、表示は変化しません³が送信内容をちゃんと空白に置換されたものに変えられます。

これで質問者に気兼ねなく、綺麗なコードをそのまま載せることができますね。
この記事が皆様のお役に立てれば光栄です。

最後まで読んでいただき、ありがとうございました!m(_ _)m

Appendix

ブックマークレットの登録方法

1. テキトーなページ(なんならこの記事)をブックマーク
2. ブックマークのurlを`javascript:`から始まるjsのコードに置き換える
3. ブックマークの名前をテキトーなものに変更(例えば「知恵袋インデント」など)
4. ブックマークをクリックすることで使用

実験したければ↓

投稿実験用の質問を載せておきます。実験投稿したくなった方はご自由にお使いください。(回答できない状態になっていた場合はコメント願います。)

スマホについて

iOS版アプリにおいて、コピペすると\u00A0そのものとして扱われるらしく、コンパイルエラーに繋がってしまいました。必ずしも完璧な方法ではない、ということです。ご注意ください。
ブラウザで見るぶんにはiPhoneでも通常の半角スペース(\u0020)として認識されましたので、その点はご安心ください。

1. 追記 : 後から調べ直したところ と同じですが、こちらでブックマークレットを作成すると がそのまま出て来てしまうので、ユニコードで指定してください。他に方法があればコメントくださると幸いです。 ↩

2. 下のundefinedで気づいた方もいらっしゃるかもしれませんが、これは後からブックマークレットの関数を打ち込んで撮影したものです。ご了承ください。(^ ^; ↩

3. ブックマークレットが長くなってしまいますが、

   var q = document.querySelectorAll(".queTxt")[1];
   q.innerHTML = q.innerHTML.replace(/``/g,"\u00A0\u00A0");
   

   を付け加えることでプレビュー画面においても表示を変えることができます。 ↩