Commit: 180 - nova.ext (svn)

PHPのフレームワークです。オートローディング、ルーティング、ORマッパ、フォームバリデータ、その他ユーティリティがセットになっています。

Commit MetaInfo

• Revision: 180 (tree)
• Zeit: 2022-08-17 13:56:59
• Autor: tantancode

Log Message

バグ鳥等

Ändern Zusammenfassung

• delete: htdocs/js/ImageUploader.js
• added: htdocs/js/my/ImageUploader.js
• added: htdocs/js/my/misc.js
• added: htdocs/js/my
• modified: lib/Localizer.php
• modified: resources/smarty.plugin/function.asset_url.php
• modified: sites/admin/layout.html

Diff

--- htdocs/js/ImageUploader.js	(revision 179)
+++ htdocs/js/ImageUploader.js	(nonexistent)
@@ -1,135 +0,0 @@
-
-/**
- * 画像をアップロードするためのUIのロジックを収めるクラス。
- * 次のようなHTMLで、縦横比を保ったまま適切なサイズにリサイズ、そのpngバイナリを data: スキーマで送信するようにする。
- *
- * この例では 300 x 200 のサイズに収まるようにリサイズされる。
- * <div key="image-tile" data-width="300" data-height="200">
- *   <input type="hidden" name="foo" />
- *   <label>
- *     <input type="file" accept="image/*" onchange="ImageUploader.selected(this)" style="display:none" id="selector" />
- *     <canvas key="canvas" width="1" height="1"></canvas>
- *   </label>
- *   <div>
- *     <label for="selector">画像を変更</label>
- *     <span onclick="ImageUploader.clear(this)">画像を削除</span>
- *   </div>
- *   <div key="monitor" class="error">(エラーがここに表示される。)</div>
- * </div>
- */
-class ImageUploader {
-
-    //----------------------------------------------------------------------------------------------------------
-    /**
-     * <input type="hidden"> の現在値をプレビューキャンバスに反映する。画面表示時の初期値の反映などに使う。
-     *
-     * param   対象コントロールの key="image-tile" 要素をjQueryに渡せる形で。
-     */
-    static async initialize(tile) {
-
-        var $tile = $(tile);
-
-        // 現在の値を取得。入力されていないなら何もしない。
-        var data = $tile.find('input[type="hidden"]').val();
-        if(data.length == 0)  return;
-
-        // 現在の値を data: スキーマとしてオンメモリの<img>で読み込み。
-        var img = new Image();
-        img.src = data;
-        await new Promise(resolve => {img.onload = resolve;});
-
-        // その画像をキャンバスに描く。
-        var canvas = $tile.find('canvas').get(0);
-        var ctx = canvas.getContext('2d');
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
-    }
-
-    //----------------------------------------------------------------------------------------------------------
-    /**
-     * ファイル選択コントロールで値が変更されたときのonchangeイベントハンドラ。
-     * 選択された画像を検証、リサイズし、そのpngバイナリを data: スキーマで<input>フィールドにセットする。
-     *
-     * param    イベント発火元 <input type="file" />。
-     */
-    static async selected(filer) {
-
-        // このコントロールのルート要素、キャンバス要素、エラー表示カードを取得。
-        var $tile = $(filer).parents('[key="image-tile"]').eq(0);
-        var canvas = $tile.find('canvas').get(0);
-        var $monitor = $tile.find('[key="monitor"]');
-
-        // 前回のエラー表示をクリアしておく。
-        $monitor.text("");
-
-        // 入力されたファイルを取得。入力がクリアされた場合はプレビューキャンバスをクリアして終了。
-        var file = filer.files[0];
-        if(!file) {
-            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
-            return;
-        }
-
-        // 選択されたファイルがイメージファイルなのか確認。
-        if( !file.type.startsWith("image/") ) {
-            $monitor.text("画像を選択してください。");
-            return;
-        }
-
-        // 大きすぎてコケるのは嫌なので…
-        if(10*1024*1024 < file.size) {
-            $monitor.text("ファイルサイズが大きすぎます。10MB以下の画像を選択してください。");
-            return;
-        }
-
-        // 選択された画像をオンメモリの<img>で読み込み。
-        $monitor.text("ファイルを読み込んでいます...");
-        var img = new Image();
-        img.src = URL.createObjectURL(file);
-        await new Promise(resolve => {img.onload = resolve;});
-        URL.revokeObjectURL(img.src);
-        $monitor.text("");
-
-        // 規定されているキャンバスサイズを変数 ruleWidth, ruleHeight に取得。
-        var ruleWidth = $tile.data("width"), ruleHeight = $tile.data("height");
-
-        // 規定サイズに対する選択された画像のサイズ倍率を取得。大きい方の倍率を使って、縦横比を保ったまま拡大・縮小した場合の結果サイズを
-        // 変数 width, height に取得。
-        var ratio = Math.max(img.naturalWidth / ruleWidth, img.naturalHeight / ruleHeight);
-        var width = Math.floor(img.naturalWidth / ratio), height = Math.floor(img.naturalHeight / ratio);
-        if(width < 10  ||  height < 10) {
-            $monitor.text("画像が細すぎます。もう少し規定の縦横比に近づけてください。");
-            return;
-        }
-
-        // プレビューキャンバスに画像をリサイズして描画。
-        canvas.width = width;
-        canvas.height = height;
-        var ctx = canvas.getContext('2d');
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
-
-        // data: スキーマでバイナリを取得して、<input>フィールドへ代入する。
-        $tile.find('input[type="hidden"]').val( canvas.toDataURL() );
-    }
-
-    //----------------------------------------------------------------------------------------------------------
-    /**
-     * 「画像を削除」リンクのクリックイベントハンドラ。
-     * プレビューキャンバスと<input>フィールドをクリアする。
-     *
-     * param    「画像を削除」要素。
-     */
-    static clear(clicked) {
-
-        // このコントロールのルート要素、キャンバス要素を取得。
-        var $tile = $(clicked).parents('[key="image-tile"]').eq(0);
-        var canvas = $tile.find('canvas').get(0);
-
-        // プレビューキャンバスをクリア。
-        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
-
-        // <input>フィールドをクリア。
-        $tile.find('input[type="file"]').val("");
-        $tile.find('input[type="hidden"]').val("");
-    }
-}

--- htdocs/js/my/ImageUploader.js	(nonexistent)
+++ htdocs/js/my/ImageUploader.js	(revision 180)
@@ -0,0 +1,135 @@
+
+/**
+ * 画像をアップロードするためのUIのロジックを収めるクラス。
+ * 次のようなHTMLで、縦横比を保ったまま適切なサイズにリサイズ、そのpngバイナリを data: スキーマで送信するようにする。
+ *
+ * この例では 300 x 200 のサイズに収まるようにリサイズされる。
+ * <div key="image-tile" data-width="300" data-height="200">
+ *   <input type="hidden" name="foo" />
+ *   <label>
+ *     <input type="file" accept="image/*" onchange="ImageUploader.selected(this)" style="display:none" id="selector" />
+ *     <canvas key="canvas" width="1" height="1"></canvas>
+ *   </label>
+ *   <div>
+ *     <label for="selector">画像を変更</label>
+ *     <span onclick="ImageUploader.clear(this)">画像を削除</span>
+ *   </div>
+ *   <div key="monitor" class="error">(エラーがここに表示される。)</div>
+ * </div>
+ */
+class ImageUploader {
+
+    //----------------------------------------------------------------------------------------------------------
+    /**
+     * <input type="hidden"> の現在値をプレビューキャンバスに反映する。画面表示時の初期値の反映などに使う。
+     *
+     * param   対象コントロールの key="image-tile" 要素をjQueryに渡せる形で。
+     */
+    static async initialize(tile) {
+
+        var $tile = $(tile);
+
+        // 現在の値を取得。入力されていないなら何もしない。
+        var data = $tile.find('input[type="hidden"]').val();
+        if(data.length == 0)  return;
+
+        // 現在の値を data: スキーマとしてオンメモリの<img>で読み込み。
+        var img = new Image();
+        img.src = data;
+        await new Promise(resolve => {img.onload = resolve;});
+
+        // その画像をキャンバスに描く。
+        var canvas = $tile.find('canvas').get(0);
+        var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
+    }
+
+    //----------------------------------------------------------------------------------------------------------
+    /**
+     * ファイル選択コントロールで値が変更されたときのonchangeイベントハンドラ。
+     * 選択された画像を検証、リサイズし、そのpngバイナリを data: スキーマで<input>フィールドにセットする。
+     *
+     * param    イベント発火元 <input type="file" />。
+     */
+    static async selected(filer) {
+
+        // このコントロールのルート要素、キャンバス要素、エラー表示カードを取得。
+        var $tile = $(filer).parents('[key="image-tile"]').eq(0);
+        var canvas = $tile.find('canvas').get(0);
+        var $monitor = $tile.find('[key="monitor"]');
+
+        // 前回のエラー表示をクリアしておく。
+        $monitor.text("");
+
+        // 入力されたファイルを取得。入力がクリアされた場合はプレビューキャンバスをクリアして終了。
+        var file = filer.files[0];
+        if(!file) {
+            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+            return;
+        }
+
+        // 選択されたファイルがイメージファイルなのか確認。
+        if( !file.type.startsWith("image/") ) {
+            $monitor.text("画像を選択してください。");
+            return;
+        }
+
+        // 大きすぎてコケるのは嫌なので…
+        if(10*1024*1024 < file.size) {
+            $monitor.text("ファイルサイズが大きすぎます。10MB以下の画像を選択してください。");
+            return;
+        }
+
+        // 選択された画像をオンメモリの<img>で読み込み。
+        $monitor.text("ファイルを読み込んでいます...");
+        var img = new Image();
+        img.src = URL.createObjectURL(file);
+        await new Promise(resolve => {img.onload = resolve;});
+        URL.revokeObjectURL(img.src);
+        $monitor.text("");
+
+        // 規定されているキャンバスサイズを変数 ruleWidth, ruleHeight に取得。
+        var ruleWidth = $tile.data("width"), ruleHeight = $tile.data("height");
+
+        // 規定サイズに対する選択された画像のサイズ倍率を取得。大きい方の倍率を使って、縦横比を保ったまま拡大・縮小した場合の結果サイズを
+        // 変数 width, height に取得。
+        var ratio = Math.max(img.naturalWidth / ruleWidth, img.naturalHeight / ruleHeight);
+        var width = Math.floor(img.naturalWidth / ratio), height = Math.floor(img.naturalHeight / ratio);
+        if(width < 10  ||  height < 10) {
+            $monitor.text("画像が細すぎます。もう少し規定の縦横比に近づけてください。");
+            return;
+        }
+
+        // プレビューキャンバスに画像をリサイズして描画。
+        canvas.width = width;
+        canvas.height = height;
+        var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
+
+        // data: スキーマでバイナリを取得して、<input>フィールドへ代入する。
+        $tile.find('input[type="hidden"]').val( canvas.toDataURL() );
+    }
+
+    //----------------------------------------------------------------------------------------------------------
+    /**
+     * 「画像を削除」リンクのクリックイベントハンドラ。
+     * プレビューキャンバスと<input>フィールドをクリアする。
+     *
+     * param    「画像を削除」要素。
+     */
+    static clear(clicked) {
+
+        // このコントロールのルート要素、キャンバス要素を取得。
+        var $tile = $(clicked).parents('[key="image-tile"]').eq(0);
+        var canvas = $tile.find('canvas').get(0);
+
+        // プレビューキャンバスをクリア。
+        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+
+        // <input>フィールドをクリア。
+        $tile.find('input[type="file"]').val("");
+        $tile.find('input[type="hidden"]').val("");
+    }
+}

--- htdocs/js/my/misc.js	(nonexistent)
+++ htdocs/js/my/misc.js	(revision 180)
@@ -0,0 +1,320 @@
+
+//----------------------------------------------------------------------------------------------------------
+/**
+ * 引数に指定されたURLをポップアップウィンドウで開く。
+ *
+ * @param   URL、あるいは href 属性を持つHTML要素。
+ * @param   left,top,width,height などの指定。
+ * @return  onclick="return popupWindow(this)" と書けるように、固定でfalseが返る。
+ */
+function popupWindow(href, style) {
+
+    if(href instanceof HTMLElement)
+        href = href.getAttribute('href');
+
+    window.open(href, '_blank', 'menubar=no,toolbar=no,scrollbars=yes,'+ style);
+
+    return false;
+}
+
+//----------------------------------------------------------------------------------------------------------
+/**
+ * 引数で指定された要素の内容をクリップボードへコピーする。
+ * Firefox で <a href="javascript: ..."> で呼び出すと "document.execCommand(‘cut’/‘copy’) was denied because it was not called from
+ * inside a short running user-generated event handler." というエラーになる。onclick にする必要がある。
+ */
+function copyToClipboard(element) {
+
+    // 引数が文字列で指定されている場合は jQuery で要素を取得する。
+    if(typeof element == "string")
+        element = $(element).get(0);
+
+    // <input type="text"> などの場合は...
+    if(element.select) {
+
+        element.select();
+        document.execCommand('copy');
+        element.blur();
+
+    // それ以外の要素は...
+    }else {
+
+        // 子要素をコピーする。
+        if(!element.firstChild) {
+            console.error("指定された要素にコピーするべき内容がありません。");
+            return;
+        }
+
+        // あとはお決まりの流れ。
+        var range = document.createRange();
+        range.selectNode(element.firstChild);
+
+        var selection = getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        document.execCommand('copy');
+
+        selection.removeAllRanges();
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------
+/**
+ * 拡張属性の定義など。
+ */
+(function() {
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // window.event を代表的イベントだけでも確実に使えるようにする。
+    var listener = function(event){
+        window.event = event;
+    };
+    document.addEventListener("focus", listener, true);
+    document.addEventListener("click", listener, true);
+    document.addEventListener("keypress", listener, true);
+    document.addEventListener("input", listener, true);
+    document.addEventListener("change", listener, true);
+    document.addEventListener("submit", listener, true);
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // <input type="number"> で step を 0.00000001 などの小さな値にした時、▲▼コントロールで e-8 表記になってしまうのを修正する。
+    document.addEventListener("input", function(event){
+
+        // <input type="number"> で値に "e" が含まれている場合に...
+        var input = event.target;
+        if(input.tagName == "INPUT"  &&  input.getAttribute("type") == "number"  &&  input.value.includes("e")) {
+
+            // stepの小数桁数を取得して toFixed() で変換する。
+            var step = input.getAttribute("step") || "1";
+            var decimals = step.split("e-")[1] || (step.split(".")[1] || "").length;    // stepが 1e-8 などとなっていても対応するが…ちょっと苦しい。
+            input.value = parseFloat(input.value).toFixed(decimals);
+        }
+
+    }, true);
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // <a>, <button>, <input type="submit">、および、x-doubleclick="suppress" の属性が付いている要素にダブルクリックへの対抗策を施す。
+    // <a>などにはデフォで適用されるので、解除したいタグには x-doubleclick="respect" を付ける。
+    // ダブルクリック判定されるのは前回クリックから１秒だが、Runtime["dblclick_interval"] が定義されている場合はその値が使われる。
+    document.addEventListener("click", function(event){
+
+        // x-doubleclick="respect" が付いているなら何もしない。
+        if(event.target.getAttribute("x-doubleclick") == "respect")  return;
+
+        // 処理対象でないなら何もしない。
+        if( !$(event.target).is("a, button, input[type='submit'], [x-doubleclick='suppress']") )  return;
+
+        // 前回クリックから一定時間経過していないならイベントをキャンセルする。
+        if(Date.now() < (event.target["x-last-click-time"] || 0) + (Runtime["dblclick_interval"] || 1000)) {
+            console.log("ダブルクリック抑制コードにより、二回目のクリックをキャンセルしました。");
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        // 前回クリック時間として取っておく。
+        event.target["x-last-click-time"] = Date.now();
+    }, true);
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-href を定義。<button x-href="..."> のようにするとクリック時に <a href="..."> のように画面遷移できる。
+    $(document).on("click", "button[x-href]", function(event){
+        location.href = $(event.target).attr("x-href");
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-method を定義。<a> に付けて値を "post" とすれば、POSTメソッドで遷移させることが出来る。
+    $(document).on("click", "a[x-method='post']", function(event){
+
+        event.preventDefault();
+
+        // <form>を作成してセットアップ。
+        var form = document.createElement("form");
+        form.action = $(event.target).attr("href");
+        form.method = "post";
+        form.style.display = "none";
+
+        // DOMツリーに追加しないと submit できない...
+        $(document.body).append(form);
+        form.submit();
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-frame-escape を定義。<a> に付けると、フレームとして画面が開かれている場合にそのフレームではなく新規タブでリンクを開くようになる。
+    // 親フレームのユーティリティとして開かれている場合にそこから先に遷移させたくない <a> などに付ける。
+    $(document).on("click", "a[x-frame-escape]", function(event){
+        if(window.parent != window.self) {
+            event.preventDefault();
+            window.open( $(event.target).attr("href") );
+        }
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-proceed-confirm を定義。<form> に付けると送信時に確認ダイアログを出すことが出来る。
+    // 値は確認時のメッセージだが、値が 空文字, "x-proceed-confirm", "true", "confirm" となっている場合はデフォルトのメッセージになる。また、"#" で
+    // 始まる値の場合は、それをidに持つ要素がコピーされてメッセージとなる。
+    // submitボタンにnameを付けていてもそのキーは送信できないので注意。
+    // 確認ダイアログには、Runtime["confirmation_class"] が設定されているならそれを、設定されていないなら ConfirmDialogue を使う。
+    // 確認後に送信した時、カスタムイベント "submit-seriously" が発生する。
+    $(document).on("submit", "form[x-proceed-confirm]", function(event){
+
+        // x-oneshot 属性によるフラグが付いている場合は処理しない。
+        if(event.target["x-oneshot-fired"])  return;
+
+        // メッセージを取得。
+        var message = event.target.getAttribute("x-proceed-confirm");
+        if( ["", "x-proceed-confirm", "true", "confirm"].includes(message) )
+            message = "{:common-other#送信するか:}";
+        else if( message.startsWith("#") )
+            message = Ui.mold(message);
+
+        // 確認ダイアログを表示。
+        var dialogue = Runtime.getClass("confirmation_class", ConfirmDialogue);
+        var d = new dialogue();
+        d.message = message;
+        d.open();
+
+        // 「OK」されたら、フォームの送信とカスタムイベントの発行。
+        d.onProceed = ()=>{
+            event.target.submit();
+            $(event.target).trigger("submit-seriously");
+        };
+
+        // 送信自体は一度キャンセルする必要がある。
+        event.stopPropagation();
+        event.preventDefault();
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-oneshot を定義。<form> に付けると、一度しか送信できなくなる。
+    $(document).on("submit submit-seriously", "form[x-oneshot]", function(event){
+
+        // x-proceed-confirm でキャンセル処理が行われているなら処理しない。stopPropagation() しても同じ要素に設定されているハンドラまでは
+        // 伝わってしまうので…
+        if(event.isPropagationStopped())  return;
+
+        // すでに送信されている場合は...
+        if(event.target["x-oneshot-fired"]) {
+            event.stopPropagation();
+            event.preventDefault();
+            console.log("フォームを送信しようとしましたが、すでに送信されているため x-oneshot 属性によってキャンセルされました。")
+            return;
+        }
+
+        // 送信済みのマークを付ける。
+        event.target["x-oneshot-fired"] = true;
+
+        // Firefoxだとブラウザバックしたときにフラグが生きたままなので、対処する必要がある。
+        // onunload？せっかくのメモリキャッシュだし…
+        window.addEventListener('pagehide', ()=>event.target["x-oneshot-fired"]=false, {"once":true});
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // 拡張属性 x-interlude を定義。<form> に付けると、値に指定した時間が経過後、まだ画面遷移できていないならローディングインジケータが表示される。
+    // 値を省略した場合はデフォルトのタイムアウト値が使われる。
+    $(document).on("submit submit-seriously", "form[x-interlude]", function(event){
+
+        // x-proceed-confirm でキャンセル処理が行われているなら処理しない。stopPropagation() しても同じ要素に設定されているハンドラまでは
+        // 伝わってしまうので…
+        if(event.isPropagationStopped())  return;
+
+        // ローディングインジケータに使うクラスを取得。
+        var indicator = Runtime.getClass("indicator_class", LoadingIndicator);
+
+        // 属性の値に設定されたタイムアウトでインジケータを表示する。
+        // 空文字や、XHTML風に値に "x-interlude" が設定されていた場合でも、これでデフォルト処理される。
+        var interlude = indicator.startInterlude( Number(event.target.getAttribute("x-interlude")) );
+
+        // Firefoxだとブラウザバックしたときにインジケーターが出っぱなしになっているので、対処する必要がある。
+        // onunload？せっかくのメモリキャッシュだし…
+        window.addEventListener('pagehide', ()=>interlude.finish(), {"once":true});
+    });
+
+    //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+    // スクリプトエラーが発生した場合の処理を記述。
+    var errorEater = function(error) {
+
+        // 前回発生したエラーと同じ内容ならスルー。
+        if(window["x-error-previous"]  &&  window["x-error-previous"] == error.message)
+            return;
+
+        // 次回参照するために取っておく。
+        window["x-error-previous"] = error.message;
+
+        // 1分以内に連続して発生したエラーの数を数えるので、最初のエラーからそれ以上経過しているならカウンタをリセットする。
+        var now = Date.now();
+        if(!window["x-error-time"]  ||  window["x-error-time"] + 60*1000 <= now) {
+            window["x-error-time"] = now;
+            window["x-error-count"] = 0;
+        }
+
+        // 連続エラー発生回数をカウント。3回を超えたならサーバには報告しない。
+        if(3 < ++window["x-error-count"])  return;
+
+        // エラー報告APIへのリクエストを作成。
+        error["useragent"] = navigator.userAgent;
+        var api = new Api("user/sorry.report", null, error);
+
+        // この挙動をユーザには見せないようにする。
+        api.loadingAttendant = false;
+        api.errorAttendant = false;
+
+        // 実行。ここでエラーになると無限ループすることになるので、阻止する。
+        try {
+            api.transmit().catch(console.warn);
+        }catch(e) {
+            console.warn(e);
+        }
+    };
+
+    window.addEventListener('error', function(event){
+        errorEater({
+            "filename":event.filename, "lineno":event.lineno, "colno":event.colno,
+            "message":event.message, "stacktrace":event.error && event.error.stack,
+        });
+    });
+
+    window.addEventListener('unhandledrejection', function(event){
+
+        var reason = event.reason;
+
+        if(reason instanceof Error)
+            var error = {"message":`Unhandled rejection: ${reason.message}`, "stacktrace":reason.stack};
+        else
+            var error = {"message":`Unhandled rejection: ${reason.toString()}`};
+
+        errorEater(error);
+    });
+
+})();
+
+//----------------------------------------------------------------------------------------------------------
+/**
+ * DOMContentLoaded で実行される。
+ * $(document).ready() を使ってると、他の <script defer src="..."> で読み込んだ外部jsの関数を参照できないときがある…
+ */
+document.addEventListener("DOMContentLoaded", function() {
+
+    // "x-preface-", "x-warn-"  で始まるURLハッシュが付いている場合は、そのハッシュが示すidを持つ要素をメッセージとしてトースト表示する。
+    if( location.hash.startsWith("#x-preface-")  ||  location.hash.startsWith("#x-warn-") ) {
+
+        // ハッシュが示すidを持つ要素があるときのみ処理する。
+        var message = $(location.hash);
+        if(message.length > 0) {
+
+            // メッセージ表示に使うクラスを取得。
+            var toaster = location.hash.startsWith("#x-preface-") ? Runtime.getClass("toaster_class", Toaster) : Runtime.getClass("dialogue_class", Dialogue);
+
+            // メッセージを表示。
+            toaster.showMessage( message.html() );
+
+            // URLハッシュを削除してリロードやヒストリーバックで再表示されないようにする。
+            location.replace("#");
+        }
+    }
+
+    // initializeLayout(), initializePage() という関数があるならそれをコールする。
+    if(typeof window["initializeLayout"] == "function")  initializeLayout();
+    if(typeof window["initializePage"] == "function")    initializePage();
+});

--- lib/Localizer.php	(revision 179)
+++ lib/Localizer.php	(revision 180)
@@ -440,11 +440,13 @@
      */
     private function readyTranslatedScript($path) {
 
-        // 翻訳前のパスと翻訳後のパスを取得。例えば、優先言語 ja で対象パスが some/foo.js なら cgm/transjs/some/foo.ja.js となる。
-        $tran = 'cgm/transjs/' . preg_replace('/\.\w+$/', ".{$this->langOrder[0]}$0", $path);
-        $pathphys = AppMojo::path("htdocs/$path");
-        $tranphys = AppMojo::path("htdocs/$tran");
+        // 翻訳後の htdocs/ からの相対パスを取得。例えば、優先言語 ja で対象パスが some/foo.js なら cgm/translate/some/foo.ja.js となる。
+        $tran = 'cgm/translate/' . preg_replace('/\.\w+$/', ".{$this->langOrder[0]}$0", $path);
 
+        // 翻訳前のパスと翻訳後の物理パスを取得。
+        $pathphys = AppMojo::path("htdocs/{$path}");
+        $tranphys = AppMojo::path("var/{$tran}");
+
         // 翻訳前のパスにファイルがないなら、引数のパスをそのまま返す。
         if( !leaf_exists($pathphys) )
             return $path;
@@ -452,12 +454,21 @@
         // 翻訳後のパスにファイルがない、あるいは古い場合は翻訳して準備する。
         // WEBサーバが分散されてると問題になりそうに見えるが、その場合 var/cgm はNFSなどで共有されるので問題ない。
         if(!leaf_exists($tranphys)  ||  filemtime($tranphys) < filemtime($pathphys)) {
+
+            // エンコード方式の決定。リクエストされているファイルの拡張子に従う。
+            $encode = match( strtolower(path_extension($path)) ) {
+                '.js' => 'js',
+                '.htm', '.html' => 'html',
+                default => null,
+            };
+
+            // ファイルの内容を読み込んで、テキストシンボルを置換、キャッシュファイルに出力する。
             $text = file_get_contents($pathphys);
-            $text = SmartyRenderer::expandSmartyTemplate($text, array());
+            $text = $this->processSymbolicText($text, $encode);
             file_dig_contents($tranphys, $text);
         }
 
-        // 翻訳後のパスを返す。
+        // 翻訳後の htdocs/ からの相対パスを返す。
         return $tran;
     }
 

--- resources/smarty.plugin/function.asset_url.php	(revision 179)
+++ resources/smarty.plugin/function.asset_url.php	(revision 180)
@@ -13,7 +13,7 @@
  */
 function smarty_function_asset_url($params, $template) {
 
-    if(@$params['path'])
+    if( isset($params['path']) )
         $url = UrlUtil::assetUrl($params['path']);
     else
         $url = UrlUtil::assetUrl($params['cat'], $params['id'] ?? @$params['arg1'], $params['type'] ?? @$params['arg2'], @$params['arg3']);

--- sites/admin/layout.html	(revision 179)
+++ sites/admin/layout.html	(revision 180)
@@ -61,6 +61,7 @@
 
 {[block name="body"]}
 
+  {[* 左側メニューパネル *]}
   {[block name="navigator"]}
 
     {[if $navigation|default:true]}
@@ -103,6 +104,7 @@
     {[/if]}
   {[/block]}
 
+  {[* 左側メニューパネルを除いたページ全体。上部のナビゲーションタイトル部分も含む。 *]}
   {[block name="main"]}
     <div id="page-main">
 
@@ -117,6 +119,7 @@
       {[/if]}
 
       <div id="page-content">
+        {[* ナビゲーションやタイトル等を除いたページ全体。各ページの主要な内容となる。 *]}
         {[block name="content"]}{[/block]}
       </div>