投稿

6月, 2019の投稿を表示しています

ローカルファイルでajax風にファイルを読み込む(postMessage)

イメージ
前回マークダウンで書いた文書を閲覧するためにJavaScriptでパーサを作成した。イメージしてたのは以下のように、マークダウン文書は別ファイルに記述しておき、ビュー用のページからajax的に取得してきて表示するという利用形態。 ローカルファイル取得できない問題 しかし実際に作ってから、ローカル実行(file://~)ではブラウザのセキュリティ制約により外部ファイルを取ってこれないことに気づいた。まあ確かにそれができると、開いただけでPC内のファイルをアップロードし始めるhtmlファイルとか作れてしまう。 少量の文書ならスクリプトもマークダウンも一つのファイルにまとめるのもありだが、そうでなければ内容とビューは基本的に分けたい。 試した方法 XMLHttpRequest 通常のWebならこれで取ってくる。しかし当然Webサーバが無いので不可。一部ブラウザではhttpリクエストの代わりにファイルを読み込んでくれるらしいが、セキュリティ回避などそれぞれのブラウザで必要な対応や操作が変わってくる。 ActiveX(FileSystemObject) 厳密には試していない。昔やったことはある。ActiveXなのでIEでしか動かない。 script src="~" ローカルファイルでも通常の参照リンクや画像表示は動く。scriptタグの外部参照で読み込んだスクリプトの中身を取得しようかと思ったが、そもそもそんなことできなかった。 iframe経由 対象ファイルをインラインフレームに表示して、その中身を"contentWindow.document"で取得する。表示はされるがスクリプトからはクロスドメイン扱いとなり弾かれた。ファイルのパスとか関係ない。 結論 無理。まあ仮にできてもセキュリティホールだから塞がれてしかるべき方法だな。 対処方法 完全分離はあきらめて、できるだけ文書側に処理を書かずに内容を受け渡す方法として、postMessageを使ってみる。 postMessage もとは異なるドメインのWebページ間でデータを受け渡すための仕組み。A,BふたつのWebページを開いて、AB間でイベントコールができる。 送り手、受け手の両方が対応していてかつ受

JavaScriptでMarkdownパーサの作成

イメージ
2020/4/23 パーサを修正し生成コードが変わりました。変更内容は こちら。 JavaScriptでMarkdownのパーサを書いてみた。 Markdownはブログ記事みたいな感じの文書をお手軽に記述するための記法で、主にhtmlに変換される。github等のサービスで採用されてるためか、最近プログラマにのみ認知度が高い。 動機 イマドキは仕様書なんかもWord文書ではなくMarkdownで書いたりすることもあると聞いた。Markdownでドキュメントを書いた場合のメリットは以下のような感じか 手っ取り早く書ける テキストエディタで編集できる gitでバージョン管理できる github等のWebサービス上に載せられる 参照ページ等へリンクができる 逆にパッと思いつくデメリットはというと レイアウトに融通が利かない 図などをその場で編集できない 単一ファイルにならない(画像など) 印刷が前提になっていない 結構デメリットが強い。ドキュメントがすべてこれで済むのはかなり限定的かと思う。まあでも今はみんなWebの表示にも慣れてるし、マニュアルやリファレンスなんかにはいいかもしれない。 いやそれ以前に 読めないんじゃ~。mdファイルを見てVisual Studio Code(Markdownをプレビューできる)とかに突っ込んでくれるのなんてプログラマだけなんじゃ~。もしくはWebサービスに載せるの前提か。 それじゃ用途が限られすぎるので、ローカルファイルの状態でwebブラウザで開いて読めるようにパーサを作るよ。まあ世の中には既に高性能なライブラリがあるんだけど、再配布のライセンス問題回避なんかも含めて車輪の再開発だ。 ソースコード githubに置いてあるのでそっちを見てね。 MDParser 実行結果 一個ずつ書いてくのも面倒くさいのでまとめて。 Markdown 以下のようなMarkdownを書いたとする。 # 表題1 ## 表題2 ### 表題3 javascriptでマークダウンパーサを作成してみました。マニュアルなどを気軽に記述できないかな。 これはサンプルです。 ここは通常の文章です。 1