スキップしてメイン コンテンツに移動

Bloggerのエディターの代わりにStackEditを使う

Bloggerのエディターはエンジニア的にはマークダウンが使えず非常に厳しいものがありますが、ちょっと調べてみたらStackEditというOSSなWebエディターがあり、Chromeの拡張機能まで用意されていたりそれのソースコードが公開されていたりと夢のありそうな品物だったので、Chromeの拡張機能を改造してBloggerのエディター代わりにしようと思います。

欲しい機能

Chromeの拡張機能としてストアに公開されているものでは満足にBlogger環境で利用できないので欲しい機能を付けることにします。
  • StackEditの入力値がHTMLコードでBloggerに出力される
    • StackEditがHTML encodeしすぎているので必要最小限にする
  • Bloggerの入力値がStackEditに読める形で反映される

改造環境の準備

  1. ソースコードを手に入れる
    • これはGithubのClone or Downloadのとこからzip形式でDLすることができます。わかる人はCloneでどうぞ。
    • 記事作成時はver1.0.2です
  2. npmを使えるようにする
    • npmはnode.jsをインストールしたら使えるようになるらしいので、ここからDL&インストールしてください。

改造

欲しい機能のリストは多々挙げましたが、要約するとStackEditの値を適切にBlogger側に反映させるだけでいいです。
Blogger側のHTMLコードがStackEditにそのまま表示されるのは許して(Markdownだし別にHTMLが混ざってても問題はないはず)
そこで、問題のStackEditの値をBlogger側に反映させる部分はsrc/js/contentScript.jsの48行目付近:
stackedit.on('fileChange', (file) => {
   el.value = file.content.text;
});
el.value = file.content.text;です。これがプレーンテキストのためデフォルト状態だとマークダウンがそのままBlogger側に反映されてしまいます。
file.contentには便利なことにfile.content.htmlが生えていてHTMLコードが取得できるので、ここを書き換えてやればいいです。
ただ、これだけだとHTMLエンコードで日本語とかがエンコードされ次回編集時に悲惨なことになるので、必要なモノのみHTMLデコードする必要があります。

HTMLデコード

ファイルの先頭のほうに以下のコードを記述し
const Html5Entities = require('html-entities').Html5Entities;
const entities =  new Html5Entities();

二つの行の間には空行を入れてください


36行目のdecorateTextarea関数前の行に以下の関数を挿入し:
function escapeHtml(string) {
    if (typeof string !==  'string') {
        return string;
    }
    return string.replace(/&/g, 'amp&;')
        .replace(/'/g, '#39&;')
        .replace(/"/g, 'quot&;')
        .replace(/</g, 'lt&;')
        .replace(/>/g, 'gt&;');
    }
    function descapeHtml(string) {
        if (typeof string !==  'string') {
            return string;
        }
        return string.replace(/amp&;/g, '&')
        .replace(/#39&;/g, ''')
        .replace(/quot&;/g, '"')
        .replace(/lt&;/g, '<')
        .replace(/gt&;/g, '>');
    }

さきほどのel.value = file.content.text;el.value = descapeHtml(entities.decode(escapeHtml(file.content.html)));に書き替えたら完了です。

(エスケープ処理がてきとうなのは許して)

ついでに

初期状態でBloggerで使えるように/src/js/settings.jsも改造しましょう。
2行目付近のdefaultSitesを書き換えたらいいです。
const defaultSites = [{
    url: 'https://www.blogger.com/',
    preset: 'gfm',
}];
こんな感じに。

ビルド

コマンドプロンプトとかPowerShellを起動したらls, cdコマンドとかを使って、改造したソースがあるルート領域に行ってください。
そこで以下のコマンドを1行ずつ実行してください。
npm install
npm i html-entities
npm run start
webpack: Compiled successfully.と出たらCtrl+Cでnpmを終わらしてください。
{root}/buildにビルドされた拡張機能が配置されます。

Chromeに追加する

chrome://extensions/を開いたらデベロッパーモードにしパッケージ化されてない拡張機能を読み込むから先ほどの{root}/buildを選択し追加してください。
これでBloggerのエディターの右下にStackEditのアイコンがでるはずです。

実際に使う

BloggerのエディターをHTML編集モードにしたら、右下のStackEditアイコンを押すとStackEditが起動します。
こんなかんじ:
ただ、一度StackEditを閉じてもう一度開くと既存のはHTMLコード化されるので、編集途中のは閉じないようにしたほうがいいです。

画像の入れ方

これはBloggerの作成モードでやってください()

既知のバグ

この記事を編集中に気づきましたがコードブロックは一度HTML化して再度読み込むと空行がある場合にHTMLが崩壊するようです。
ん~~~ちょっとめんどくさい()

マークダウンで記事を書いたら一度レイアウト崩れがないか確認したほうがよさげです。


紹介したやり方での改造は自己責任でオナシャス

それにしても記事書くのがすごい楽になった。

コメント

このブログの人気の投稿

Stellaris 2.0.1 植民スパムプレイ

さっそくですが、友達との3日がかりのマルチプレイ終わりました。

銀河設定は中サイズ(600)、リング2、中盤の危機75年早く、終盤の危機100年早く、技術・伝統コスト0.5倍、難易度普通って感じでした。

そして、自分のプレイングは機械帝国植民スパム、友達は内向き牧歌でした。
最終的な国力としては機械帝国植民スパムのほうが強く、序盤から中盤は内向き牧歌のほうが強かったです。

機械帝国植民スパム はい、前回も言いましたが2.0から植民スパムゲーです。2.0.2からは前哨地維持費がかかるようになり更なる植民スパムゲーにもなりそうです。
植民スパムするからには、まぁロボットか機械帝国って感じなんですが、今回はゲーム進行が速い設定なので機械製造速度アップにガン振り帝国にしました。生産はエネルギー重視で、直轄地に鉱物惑星・研究惑星があるような感じにしました。
それでも、機械帝国は序盤の成長が遅く、鉱物を大量に消費するので、周りの帝国との不可侵条約はかかせません。直轄地6惑星(母星・エネルギー、エネルギー、研究*3、鉱物)の発展が終われば、今度はセクターの開発です。 まぁ、セクターの開発なんか物資さえ送り込めば勝手にやってくれるのでいいですが、エネルギー重視の生産なので鉱物の面倒は見てやらないとダメです。
帝国所有惑星が20ぐらいになれば、まぁ中銀河(サイズ600)なら敵なしですかね。あとは軍拡するだけです。
中盤の危機と終盤の危機 前述の通り危機はかなり早く発生するようにしたのですが、なんと中盤の危機がいっこうに発生しませんでした。発生したのは終盤の危機に立ち向かってるとき…おい()
終盤の危機は機械帝国プレイだったのでもちろんのようにコンティンジェンシー、中盤の危機は機械の反乱でした。
中盤の危機に関しては機械帝国プレイなので自分はどうでもよかったのですが、終盤の危機はがんばらないとまずかったです。コンティンジェンシーなので機械の生産-40%補正がつくので、スペシャルプロジェクトで解除(自分の研究力500ぐらいでは50か月ぐらいでした)しない限り国力が持ちません。
コンティンジェンシーは艦隊戦力が300k+100k*2の集団が4つほど湧いて100k艦隊は時間とともに増え続けるので急がないといけませんが、解除さえすればあまり余る国力で殴り続けるだけでしたね。終盤の危機の間に…

Stellaris ver2.0 Apocalypse プレイ感想

タイトルの通り大型アプデ後での友人とのマルチプレイでのプレイ感想です。

変更内容に関してはこちらのサイトで日本語訳された内容が公開されています(本当に助かりました)
Simulationian.com - 「Stellaris」開発日記#105――2.0「チェリイ」パッチノート

使用した帝国について 細かい設定は覚えていませんが(確認するのもめんどくさい)、有機生命体で狂信権威・平和主義で国是にアップデート内容の生まれた生命(Life-Seeded)を選択しています。 狂信権威について アップデートにより帝国の領域を増やすには星系ごとに影響力(1回限りに支払い)を使い前哨地を建てていく必要がありました。そこで狂信権威を選択したのですが、プレイスタイルが悪いのか、よく奴隷が不満を抱えストライキ?を起こしてしまいました。これに関しては防衛設備を地上に建て防衛軍を増やすことで対処できますが、タイルを無駄に消費している感じがすごいあります。 影響力が毎月4増えるのは領域を増やすのに好都合でしたが、Life-Seededとの相性が微妙でした(後述)。 Life-Seededについて 自分の種族がガイア型惑星にしか住めなくなるが、母星がガイア型25でスタートします。使用感想としては初期ブーストはいいかな?って感じです。ただ、アップデート後の環境ではプレイスタイルを頑張らなければ弱いかなと。その理由としては、まずアップデート後は研究コスト補正にPOP数が関係なくなり領域星系数が関係あるようになりました。つまり領域が大きければ大きいほどコストが高くなるということ。星系の資源はプレイヤーではどうしようもならない固定資源のようなものですから、それに頼って領域を大きくし過ぎると研究コストがすごいことになってしまいます。植民地を確保して賄おうにもガイア型にしか住めないのでかなり増やしにくいです。 ガイア型にしか住めないというのは、有機生命体であってロボットなら他のタイプの惑星に植民できるというのであれば、Life-Seededはロボットプレイをするしかないのかもしれないですが、これに関しては未検証です。
プレイスタイルについて 今回自分がとったプレイスタイルは要塞でガン守りキメるガチ芋戦略です。アップデートで要塞関連が変わり結構使えるものになったらしいので。 防衛プラットフォームを上限まで…

if(flag == true)はありなのか?なしなのか?

最近バズってるようなので便乗
ちなみに元ネタはこちらだとおもいます→qiita - Javaではif (flag == true)というコードを書いてはいけない

※真偽値としてのネーミングとしてflagはナシだろ~~wという話はナシでお願いします
※以下flag変数は真偽値とします

結論から言うと純粋な真偽値の場合はif(flag == true)、if(flag == false)はナシです

まず、最初に前提を整理します
if文は真偽値(true or false)で判定しなければならないJavaではbooleanKotlinではBooleanC#ではbool 話の簡素化のために整えておかないといけないこともあります JavaではBooleanのことは考えない(理由は省略)(ボクシング次第では考えていいかも)KotlinではBoolean?のことは考えないnullableな場合はtrue or false or nullなのでC#ではbool?のことは考えないnullableな場合はtrue or false or nullなので
前提を整理し終わったので、if(flag == true)はアリなのかナシなのか考えていきましょう。 おそらくif(flag == true)論争では2つのパターン(==演算子で比較するかどうか)に派閥分けされていますが、ここでは3つのパターンに分けます
1つ目のパターン:==演算子で比較する// true比較の場合 if(flag == true) // false比較の場合 if(flag == false) はい、もっともナシなパターンです(理由は後述)。

ナシと言われる理由は前提を振り返ればわかりますがif文の中では最終的に真偽値であればよいのですがflagはそもそも真偽値です。わざわざtrueと==比較して真偽値にする必要はありません。わざわざ==比較することは理論上はパフォーマンスが落ちます。

このパターンがなくならない理由は可読性がまぁまぁいいことです。
冗長であろうがパフォーマンスが理論上悪かろうが可読性があれば正義です(そういう考えもできる)。

自分も昔はこのパターンな書き方を多用していましたが後述の理由によって今はしません(少なくとも意識してはしてないはず)。

2つ目のパターン:否定演算子!を使う// true比較の…