夕立進行会報

chrome系のブラウザでWebページをホームへインストールするための基準が少し厳しくなる。service workerのfetchイベントが空だと現在以下の警告が出る。 Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information. https://goo.gle/improved-pwa-offline-detection オフラインに対応していなければ、2021年8月のChrome93からはインストールがブロックされるとのこと。とはいえ完全に動作する必要はなくフォールバックページなどが提供されればいいそうだ。 サーバ通信前提のWebページをオフライン対応するのは現実的ではないので、その方向で回避してみることにする。（オンライン前提のWebページをインストール可能にする必要があるのかというのもあるが、そこは色々な事情があるのだ） 対応 serviceworker.js var _cashVersion = "cashe0.0.0.1" var _offlinePage = '/offline.html' self.addEventListener("install", function(event) { console.log("service worker call install.", event) event.waitUntil( caches.open(_cashVersion) .then(function (cache) { cache.add(_offlinePage); }) ); }) self.addEventListener('fetch...

このようなDOM操作でモーダルウィンドウ風の要素を作るときのフォーカス制御の話。 モーダルウィンドウの表示時は、背景を覆うようにスクリーン要素を置いてクリックできないようにすることが多い。しかし背景に<button>や<input>がある場合は、キーボードのtabでフォーカスして操作ができてしまう。それを防ぐ。 focusinイベントをキャッチしてフォーカス制御する フォーカスのイベントにはfocus/blurの他にfocusin/focusoutイベントがある。 focus/blurイベントはバブリング（子要素のイベントが親要素に伝播）しないが、focusin/focusoutイベントはバブリングし、自分自身がフォーカスされない要素でも発生する。 次のようにbodyと#screenにfocusinイベントを設定する。 var isShowDialog = false var focusOnDialog = false document.body.addEventListener("focusin", function(){ //モーダルウィンドウ表示中で、 //フォーカスを取得したのがモーダル上でない場合フォーカスを外す。 if(isShowDialog && !focusOnDialog){ document.activeElement.blur() } focusOnDialog = false; }) document.getEmementById("screen").addEventListener("focusin", function(){ //モーダル上の要素がフォーカスされた focusOnDialog = true; }) //モーダルウィンドウを表示する関数 function showDialog(){ // ～ // 表示の処理 // ～ document.activeElement.blur() isShowDialog = true } モーダルウィンドウの表示中は、フォーカス移動をbodyのfocusinイベント...

色々と使い勝手に思いがあり、 以前作成したMarkdownパーサ を少し修正した。こちらの 実行スクリプトページ でも生成されるhtmlが変わるので注意（使ってる人はいないと思うけど）。 変更点 コードブロック &#96で囲った場合に生成されるコード部分を<code>タグで囲うように変更。またpreに付いていたクラスを削除。コード種別はcodeタグのクラスに設定。 <pre class='codeblock code_c'>//コードブロックです。ハイライトは付きません。 int a = 0; int b = a+1;</pre> ↑旧 新↓ <pre><code class='code_c'>//コードブロックです。ハイライトは付きません。 int a = 0; int b = a+1;</code></pre> インラインコード 同じく<span>から<code>へ変更。 <p>インラインコード表記は&#96;で囲み<span class='inlinecode'>int a=0;</span>ます。</p> ↑旧 新↓ <p>インラインコード表記は&#96;で囲み<code>int a=0;</code>ます。</p> 引用 以前は入れ子の引用を<span>で区別していたが、標準的な<blockquote>の入れ子に変更。 <blockquote> <span class='blockquoteNest'>&gt;は引用です。</span><br /> <span class='blockquoteNest'>ここも引用です。</span><br /> <span class='blockquoteNest'><span class='blockquoteNest'...

より入力しやすいように専用ページを作りました。以下を利用してください。 Markdown Box 2020/4/23 パーサを修正し生成コードが変わりました。変更内容は こちら。 2020/5/31 codeタグのclass名に自動でprefix"code_"が付かなくなりました。 BloggerはWebエディターかHTML直打ちしか対応しておらず少々書きにくい。私は以前作ったパーサを使ってMarkdownを書いてHTMLに変換して投稿している。 JavaScriptでMarkdownパーサの作成 ふと、HTML直打ちができるということは記事の中にformやscriptを書けば動くんじゃないかと思い、パーサスクリプトを埋め込んで記事作成用ページを作ってみる。 Markdown記事作成ページ 公開終了

前回マークダウンで書いた文書を閲覧するために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間でイベントコールができる。 送り手、受け手の両方が対応していてかつ受...

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を書いたとする。 # 表題１ ## 表題２ ### 表題3 javascriptでマークダウンパーサを作成してみました。マニュアルなどを気軽に記述できないかな。 これはサンプルです。 ここは通常の文章です。 1...