はてなブログで使える Markdown 記法の "引用" 文章を、JavaScript で作成する
目次
目的
表題の件、はてなブログで楽に引用を行うにはどうしたらよいか迷ったので、その試行錯誤と解決法を記載する。
はてなブログ謹製の “引用をストック” を利用する
はてなブログ内だと、範囲選択を行った文章を下記のように引用できる。*1
※ --disable-java : Java アプレットなど実行できないようにJAVA無効化 ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定
Chromeブラウザでのユーザ情報偽装について - heyheytower
ちなみに貼り付けられるタグは下記です。
<blockquote cite="http://maijou2501.hateblo.jp/entry/2015/06/16/013936" data-uuid="6653586347153304808"><p>※ --disable-java : Java アプレットなど実行できないようにJAVA無効化 ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定</p><cite><a href="http://maijou2501.hateblo.jp/entry/2015/06/16/013936">Chromeブラウザでのユーザ情報偽装について - heyheytower</a></cite></blockquote>
簡単に引用できるのは良いのですが、Markdown 記法で記事を書いている時の可読性が悪いですし、引用を見ると改行がうまく引用されていないようでした。
(改行の件は、Ubuntu+Chromeの環境由来かもしれませんが。)
引用したい文章を範囲選択した後、JavaScript(ブックマークレット) で Markdown 記法の引用を作成する
引用したい文章を範囲選択した後、ブラウザのコンソールから JavaScript のコードを実行します。
JavaScript コードを実行すると、下記内容のポップアップが行われます。
> ※ --disable-java : Java アプレットなど実行できないようにJAVA無効化 > ※ --no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定 > <br /><cite><a href="http://maijou2501.hateblo.jp/entry/2015/06/16/013936">Chromeブラウザでのユーザ情報偽装について - heyheytower</a></cite>
Chrome ならこれを “Ctrl+c” でコピーし*2、他のブラウザならポップアップ内容を範囲指定のうえコピーして利用します。
これを本エントリ(編集方法が “Markdownモード")に貼りつけたものが下記です。
※ –disable-java : Java アプレットなど実行できないようにJAVA無効化
※ –no-referrers : GETパラメータで重要情報をやりとりしている場合に備えて referrer 削除指定
Chromeブラウザでのユーザ情報偽装について - heyheytower
はてなブログ謹製の “引用をストック” と違って、リンクの一行上で改行を行なっています。
これは見やすくするための自分の好みなので、好きに変更すると良いと思います。
こだわりとしては、要素内容は &<> を文字実体参照に置換しています。
属性値のURLは、取得時点で “&<> が文字実体参照でエスケープされていたのでそのまま利用しています。
所感
いままで引用フォーマット作成は手作業だったので、これで引用が捗りそうです。
また、Markdown 記法は方言がたくさんありますので、JavaScript を少し変更すれば引用フォーマットを合わせられると思いますので、広く利用いただければ幸いです。
おまけコード
“現在表示中のページの Markdown 記法のリンクを作成する JavaScript コード” を共有します。
(追記:2017/3/31)MSDNなどのURL内に丸括弧が含まれる場合があり、URLの丸括弧をURLエンコードするようにしました。
しかし、下記のサイトの検証結果のようにブラウザによってURLエンコード結果がalert
ではURLデコードされた状態になるようです。
参考までに、自分の使用しているChromiumは “バージョン 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.04 (64-bit)” ですがURLデコードされるようで、しかも開発者ツールでの実行ではURLエンコードの状態で表示されました。
なので、自分の環境では “URLの丸括弧をURLエンコードする” は達成されませんでした…
また、 “現在表示中のページの Markdown 記法の脚注を作成し alert() で表示する JavaScript コード” も共有しておきます。
以上。