ldb-logo

ライブドアブログのブログエディタでは JavaScript や CSS を書くときに && や > などがエスケープされてしまいます

こういうのとか
if(location.href.includes("archives") && flag === true){

}
こういうの
article>hr {

}

記事の中に含めると
if(location.href.includes("archives") && flag === true){

}
article>hr {

}
に変換されてしまいます


前に公式に聞いてみたときには、HTML を直接書けるモードを使ってくださいって言われて今もこのままなのでライブドアブログで対処されることはないのでしょう

CSS や JS を記事に含めたい時には HTML を直接書けるモードを使うようにしていますが、普段は直接 HTML 書くのは大変なので書いたまま表示されるモードを使っています

ですがこの方法だと記事を修正するとき問題があります
&& などの文字が含まれる記事を誤字修正などで書いたまま表示される方で修正してしまうと & に変換されてしまい動かなくなってしまいます
動かないことに気付ければ探して元に戻せますがすごく面倒です
さらに気づかないと放置ということになります

そういうこともあって記事の URL ごとに JS と CSS をロードするようにしてみたのですが、SP 版のせいで結局使ってません
実は SP 版がページ分割されることで後半で CSS や JS が使われていないことの対処というのが半分くらいの理由でもあったのですが、SP 版では全くカスタマイズ機能が使えないのでムダに終わってしまいました



どうすれば勝手に変換されずに済むかなって考えていたところ、難読化?暗号化?して実行しているコードをわかりにくくしてるページをあるクイズ系のところで見つけて、これだ!となったので早速使ってみました

簡単に読めなくしてるわけですから、ふくざつーにしてるものもありますが今回の目的は && などが変換されないことです


なので、この2パターンを用意しました
Function("\u0061\u006c\u0065\u0072\u0074\u0028\u0031\u0029")()
これと
Function(atob("YWxlcnQoMSk="))()
これ

上は Unicode エスケープされた文字列で JavaScript が実行されると、 "\u0061\u006c\u0065\u0072\u0074\u0028\u0031\u0029" は "alert(1)" となるので、アラートで 1 が表示されます
Function("JSの文字")() は eval("JSの文字") でもいいのですけど、好みです

下の方は、 btoa という関数で "alert(1)" の文字列を変換したものです
もとに戻すために atob という関数を通して、上と同じように Function にいれています
こっちのほうが文字数が少なくなりますし btoa 関数を通すだけで簡単です

上のほうは atob 関数を通すこともないシンプルさで文字列を unicode 表記に置き換えただけです
速度は気にするほどじゃないはずなので好きな方を選んでください


JavaScript 書ける人ならサラッと変換できてしまいますけど、 JavaScript が書けない人もいると思いますのでそういう人はこちらの変換ツールを使ってみてください

Unicode 変換(上に入れて下に変換)
btoa 変換 (下に入れて上に変換)

(JavaScript をブログに書く人のための方法なのに JavaScript 書けない人ってどういうことなんだろう・・・)


CSS の場合は style タグを作って埋め込むのでこっち
function inArticleCSSLoad(str){
    var s = document.createElement("style")
    s.innerHTML = str
    document.head.appendChild(s)
}
inArticleCSSLoad(atob("ここに変換した文字列"))
inArticleCSSLoad 関数に JS と同じようにデータを渡します


あとから修正したときに影響受けなくなりますけど、どんなコード書いたっけと確認しづらいのと JavaScript のコードを修正したいときが欠点です・・・