マークダウン風ブログエディタ
◆ 2を作ってしまいました
ライブドアブログのデフォルトのエディタは色々便利な機能があるんですが
● 表がかけない
● 色の指定が微妙
● hrが引けない
● リンク先にhttp://が勝手につけられる
● h1などがかけない
などなど不便なところもあります
HTMLタグ編集モードにすれば解決できるものも多いですけど HTML編集モードだとタグがごちゃごちゃして見づらくなってしまいます
<br> を毎回書くのもめんどうです
そんなわけでして マークダウン風に書いてHTMLを出力できるのを作りました
前回作ったのは作った頃には使っていたのですが
● 色々複雑すぎて書き方が自分でも覚えていない
● わざわざページを探して開くのがめんどう
● プレビューが実際のブログの画面で確認できない
● 左右分割なので見づらい
と言った問題があって結局使わなくなっていきました
改良することも考えたのですが こういうパースするものって高機能にしようとすると if文が山のように出てきたりフラグがいっぱい必要になったり 行単位で見たいのに一部だけ例外的に扱うのが出てきたり でコードがすごくグチャグチャになるんです
なので編集は諦めてました
ですが 最近「ブログエディタから自分のブログのページを開いてpostMessageでデータ送って書き換えればお手軽プレビューできそう！」と思いついたのでなんとか編集することに
…………無理！！
ソースコードをサラッと眺めただけでこれは無理感がすごいです
全く中身を覚えてない状態で修正できるようなものに思えないです
さすがにこれは1から作ったほうが早いんじゃないかな……
そんなわけで1から作りました
そんなに時間かけるつもりなかったのですが 今日1日かかってしまいました
今回は後から編集しやすいことを目指したはずだったのですが なんともいえないコードになりました
さらに一応動くものができてから 色々と使いやすいように修正していくとすごく無理矢理感のあふれるコードに変貌を遂げていきました…
綺麗にまとめるのに向いていない 1つ1つやることを順に書いていってながーくなるコードにしかなりそうにないです
もっと綺麗にしたかったんですけど
http://var.blog.jp/t/blogmd/blogmd2.html
前回のはこっち
http://var.blog.jp/t/blogmd/blogmd.html
実際のブログのページのテキストを書き換えてプレビューするので それに使うページのURLと そのページ内のタイトルと本文のセレクタを指定します
セレクタは必須ですがタイトルのテキストは空でもいいです
既存ページを編集するのでタイトルが前のままだと気持ち悪いかなと思ってつけた機能なので気にしないとか毎回入れるのがめんどうなら入れなくていいという作りです
パーサは「text」という引数でテキストを受け取ってパースする関数の中身を書くことができます
何も書かないとデフォルトのマークダウン風なものが使われます
本来のマークダウンと同じのを書けばちゃんとしたマークダウンエディタにできます
「(1)」と書くと何もしないそのままが出せます
「return text」 とかくのと一緒です
Title以外は決定してページ開く時に保存しているのでリロードしても復元されます
Enterボタンを押すと新しいタブでブログページが開くので 2つのウィンドウで横に並べると使いやすいです
左側のTextのところに文字を打って 右下のボタンを押すとブログのページが書き換わります
右下ボタンの左側を押すと 下のHTMLの部分にHTMLが出力されます
ブログページの書き換えはあくまで自分の環境でだけ見れるプレビューなので 最終的にはここのHTMLをライブドアのエディタに貼り付けて投稿します
書き換えるとこんな感じになります
動かすためには書き換えられるブログページでメッセージを受け取ってDOMを書き換えるという処理を書いておかないといけません
自分のページで使いたい場合は ページを開いたあとに このコードをconsoleで入力してください
サンプルページ（http://var.blog.jp/archives/45664536.html）ではソースに埋め込んでいるのでコンソールで入力せずに使えます
こっちは左側にテキストを入力して convertボタンで右側にHTMLを出力できます
previewだと 空のページ（about:blank）でHTMLを表示します
自サイトのCSSが使われないのであまり利用価値がないです
ブラウザ内で異なるタブやウィンドウと通信する仕組みで クロスオリジン対応です
通販だったり何か登録するサイトで 別ウィンドウが開いて そっちで入力したら戻ってきたページにも変更されているのはこれ使ってそうです
ライブドアブログのエディタのプレビューは毎回リロードされているので postMessageは使わないでtargetを同じにして何度も開いてるだけみたいです
引数は1つ目に送るデータ 2つ目に対象のオリジンを指定します
Windowオブジェクトは window.open でページを開いた時の返り値やページ内のiframeなどで取得できます
送るデータは好きな型で送れます
オブジェクトのまま遅れるので便利です
対象のオリジンは送信先のWindowオブジェクトのオリジンと違っているとメッセージを送れないです
window.open したURLを解析してもいいですが 「*」 が使えるのでこっちのほうが楽そうです
受け取る側は 上の方に書いたみたいに window でmessage イベントのリスナを設定します
使ってみるとわかりますが google からたくさん message が届きます
event.origin を見て送信元で弾くようにしておくといいです
● 表がかけない
● 色の指定が微妙
● hrが引けない
● リンク先にhttp://が勝手につけられる
● h1などがかけない
などなど不便なところもあります
HTMLタグ編集モードにすれば解決できるものも多いですけど HTML編集モードだとタグがごちゃごちゃして見づらくなってしまいます
<br> を毎回書くのもめんどうです
そんなわけでして マークダウン風に書いてHTMLを出力できるのを作りました
実は2つめ
実は今回作ったのは2つ目です前回作ったのは作った頃には使っていたのですが
● 色々複雑すぎて書き方が自分でも覚えていない
● わざわざページを探して開くのがめんどう
● プレビューが実際のブログの画面で確認できない
● 左右分割なので見づらい
と言った問題があって結局使わなくなっていきました
改良することも考えたのですが こういうパースするものって高機能にしようとすると if文が山のように出てきたりフラグがいっぱい必要になったり 行単位で見たいのに一部だけ例外的に扱うのが出てきたり でコードがすごくグチャグチャになるんです
なので編集は諦めてました
ですが 最近「ブログエディタから自分のブログのページを開いてpostMessageでデータ送って書き換えればお手軽プレビューできそう！」と思いついたのでなんとか編集することに
…………無理！！
ソースコードをサラッと眺めただけでこれは無理感がすごいです
全く中身を覚えてない状態で修正できるようなものに思えないです
さすがにこれは1から作ったほうが早いんじゃないかな……
そんなわけで1から作りました
そんなに時間かけるつもりなかったのですが 今日1日かかってしまいました
今回は後から編集しやすいことを目指したはずだったのですが なんともいえないコードになりました
さらに一応動くものができてから 色々と使いやすいように修正していくとすごく無理矢理感のあふれるコードに変貌を遂げていきました…
綺麗にまとめるのに向いていない 1つ1つやることを順に書いていってながーくなるコードにしかなりそうにないです
もっと綺麗にしたかったんですけど
http://var.blog.jp/t/blogmd/blogmd2.html
前回のはこっち
http://var.blog.jp/t/blogmd/blogmd.html
使い方
基本的に このブログ用として作ってますが 他の人でも使えるようにはなってます2代目
TOP画面はこんなのです
実際のブログのページのテキストを書き換えてプレビューするので それに使うページのURLと そのページ内のタイトルと本文のセレクタを指定します
セレクタは必須ですがタイトルのテキストは空でもいいです
既存ページを編集するのでタイトルが前のままだと気持ち悪いかなと思ってつけた機能なので気にしないとか毎回入れるのがめんどうなら入れなくていいという作りです
パーサは「text」という引数でテキストを受け取ってパースする関数の中身を書くことができます
何も書かないとデフォルトのマークダウン風なものが使われます
本来のマークダウンと同じのを書けばちゃんとしたマークダウンエディタにできます
「(1)」と書くと何もしないそのままが出せます
「return text」 とかくのと一緒です
Title以外は決定してページ開く時に保存しているのでリロードしても復元されます
Enterボタンを押すと新しいタブでブログページが開くので 2つのウィンドウで横に並べると使いやすいです
左側のTextのところに文字を打って 右下のボタンを押すとブログのページが書き換わります
右下ボタンの左側を押すと 下のHTMLの部分にHTMLが出力されます
ブログページの書き換えはあくまで自分の環境でだけ見れるプレビューなので 最終的にはここのHTMLをライブドアのエディタに貼り付けて投稿します
書き換えるとこんな感じになります
動かすためには書き換えられるブログページでメッセージを受け取ってDOMを書き換えるという処理を書いておかないといけません
window.addEventListener("message", function(eve){
if(eve.origin !== "http://var.blog.jp") return;
var ts = eve.data.ts
var bs = eve.data.bs
try{
document.querySelector(ts).innerHTML = eve.data.t
document.querySelector(bs).innerHTML = eve.data.b
}catch(e){
alert("セレクタが間違っています\n[title]:" + eve.data.t + "\n[body]:" + eve.data.b);
}
}, false)
自分のページで使いたい場合は ページを開いたあとに このコードをconsoleで入力してください
サンプルページ（http://var.blog.jp/archives/45664536.html）ではソースに埋め込んでいるのでコンソールで入力せずに使えます
初代
昔のほうですこっちは左側にテキストを入力して convertボタンで右側にHTMLを出力できます
previewだと 空のページ（about:blank）でHTMLを表示します
自サイトのCSSが使われないのであまり利用価値がないです
postMessage
今回 別タブとデータ通信してる方法ですブラウザ内で異なるタブやウィンドウと通信する仕組みで クロスオリジン対応です
通販だったり何か登録するサイトで 別ウィンドウが開いて そっちで入力したら戻ってきたページにも変更されているのはこれ使ってそうです
ライブドアブログのエディタのプレビューは毎回リロードされているので postMessageは使わないでtargetを同じにして何度も開いてるだけみたいです
使い方
メッセージを送りたいWindowオブジェクトのpostMessageメソッドを呼ぶだけです引数は1つ目に送るデータ 2つ目に対象のオリジンを指定します
Windowオブジェクトは window.open でページを開いた時の返り値やページ内のiframeなどで取得できます
送るデータは好きな型で送れます
オブジェクトのまま遅れるので便利です
対象のオリジンは送信先のWindowオブジェクトのオリジンと違っているとメッセージを送れないです
window.open したURLを解析してもいいですが 「*」 が使えるのでこっちのほうが楽そうです
受け取る側は 上の方に書いたみたいに window でmessage イベントのリスナを設定します
使ってみるとわかりますが google からたくさん message が届きます
event.origin を見て送信元で弾くようにしておくといいです
