MOXBOX ウィジェット
Takami Torao
Bootstrap 5.0
jQuery 3.6
MathJax 2
1. 
概要
この MOXBOX で JavaScript や CSS (あるいはサーバサイドの XSLT や REST API など) で実装されたウィジェットおよびツールが正しく機能することを確認するためのページである。このサイトの作者以外には特に有用なものではないが、何かの参考にはなるかも知れない。
Table of Contents
2. Foldable Prompts
目的: コマンドプロンプトでの一連の作業を記述するために使用する。ここで冗長な出力はデフォルトでは非表示にできる。ただし、Accordion のように完全に非表示にするだけではなく、指定した先頭行/末尾行をデフォルトで表示する「半開き」表示ができる。左にシェブロン
マークのある行でアクションすると出力部の開閉ができる。
記述: 一連のプロンプト記述を <dl> とし、個々のプロンプト入力および出力のペアをそれぞれ <dt> と <dd> で記述する。<dt>, <dd> は直下に単一の <pre> を配置する必要がある。
<dd> の初期状態の開閉はクラスに collapsed (閉じた状態) か abridged (縮約状態) を指定する。abridged を指定した場合、data-mox-heads または data-mox-tails 属性を併用する必要がある。
<dl class="foldable-prompts">
<dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
<dd><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>$ curl -s -D - -o /dev/null https://hazm.at/index.html
HTTP/1.1 200 OK Date: Thu, 16 Feb 2023 18:39:44 GMT Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812 Content-Type: text/html Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT Content-Length: 7059 Vary: Accept-Encoding
<dt> または <dd> に collapsed クラスを指定するとデフォルトで閉じた状態で表示される。
<dl class="foldable-prompts">
<dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
<dd class="collapsed"><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>$ curl -s -D - -o /dev/null https://hazm.at/index.html
HTTP/1.1 200 OK Date: Thu, 16 Feb 2023 18:39:44 GMT Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812 Content-Type: text/html Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT Content-Length: 7059 Vary: Accept-Encoding
data-mox-heads, data-mox-tails, data-mox-ellipsis を指定して完全に閉じていない半開きを使用することができる。data-mox-ellipsis には HTML を指定できる。<pre> 直後の空行や </pre> 直前の空行も 1 行として扱われることに注意。
<dl class="foldable-prompts">
<dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
<dd class="abridged" data-mox-heads="2" data-mox-tails="1" data-mox-ellipsis="⌛"><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>$ curl -s -D - -o /dev/null https://hazm.at/index.html
HTTP/1.1 200 OK Date: Thu, 16 Feb 2023 18:39:44 GMT Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812 Content-Type: text/html Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT Content-Length: 7059 Vary: Accept-Encoding
以下は様々な状況でのテスト。
$ cat main.rsfn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="2" data-mox-tails="2"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-tails="2"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="2"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="0" data-mox-tails="0"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="6" data-mox-tails="3" data-mox-ellipsis="<b> /* ... */</b>"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="24"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-tails="24"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="25"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-tails="25"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }$ cat main.rs; data-mox-heads="65535"fn main() { let mut values = vec![1, 2, 3, 4]; for value in &values { println!("value = {}", value); } if values.len() > 5 { println!("List is longer than five items"); } // Pattern matching match values.len() { 0 => println!("Empty"), 1 => println!("One value"), 2..=10 => println!("Between two and ten values"), 11 => println!("Eleven values"), _ => println!("Many values"), }; // while loop with predicate and pattern matching using let while let Some(value) = values.pop() { println!("value = {value}"); // using curly braces to format a local variable } }
3. <mox:include>
<mox:include xmlns:mox="https://hazm.at/mox" href="file" {xml-stylesheet="stylesheet.xsl"} {target="xpath"}/>href で指定されたファイルをその位置に挿入する。XInclude と異なり xml-stylesheet 属性が指定されている場合はその値で指定された XSL を適用した結果が挿入される。さらに target 属性で指定された XPath のノードのみを挿入する。
4. ページの難読化
ページの <head> 要素内に以下のメタデータを指定すると、そのページのすべてのパラグラフ要素 (リード文を除く) が難読化される。
<meta name="x-visibility" content="obfuscated"/>
<meta name="x-obfuscated" content="You are not allowed to view this page."/>
<meta name="x-visibility" content="closed"/>
5. Facebook コメントの無効化
ページの <head> 要素内に以下のメタデータを指定すると、ページごとに Facebook コメントの有効/無効を切り替えることができる。デフォルトではコメントは有効。
<meta name="x-comments" content="false"/>6. 自動セクションナンバリング
<body> 要素に auto-section-numbering クラスを付けると、そのページ内の <h1>～<h6> までが自動番号付けされる (このページでも行っている)。
6.1.
6.1.1.
6.1.2.
3.13.
3.13.1.
自動セクションナンバリングが有効で、セクションタイトルの先頭に
\d+(\.\d+)*形式のセクション番号が付けられている場合、手動でセクション番号が指定されたものとして、その番号でリセットされる。番号を付けたくないセクションの場合、セクションのクラスに
ignore-section-numberingを付ける (例:<h1 class="ignore-section-numbering">...</h1>)。番号を自動で付けたくないが、後続の番号はカウントアップしたい場合、
no-section-numberingを付けることができる。自動セクションナンバリングが有効なページで
<a href="#foo">のようなアンカーを使用してページ内のセクションを指定した場合、そのタグ内の\d+(\.\d+)*パターンをリンク先のセクション番号に置き換える。したがって、「<a href="#introduction">セクション 1> で示したように」のように記述すれば自動的に適切なセクション番号に置き換えられる。
