tiddlywiki 5.3.5 → 5.3.7

package/editions/ja-JP/tiddlers/howtos/Constructing JSON tiddlers.tid

@@ -0,0 +1,18 @@
+created: 20220427174702859
+modified: 20241019104110533
+original-modified: 20230922122551197
+tags: [[JSON in TiddlyWiki]] Learning
+title: Constructing JSON tiddlers
+ja-title: JSON Tiddlerの構築
+
+TiddlyWikiでのJSONの使い方の概要については、[[TiddlyWikiでのJSON|JSON in TiddlyWiki]]を参照してください
+
+JSONデータは単なるプレーンテキストであるため、Wikiテキストで生成するためのさまざまな手法が存在します
+
+高いレベルでは、TiddlyWiki独自のTiddler形式でJSONデータを生成する方法がいくつかあります: 
+
+* [[JSONTiddlerウィジェット|JSONTiddlerWidget]]
+* [[jsontiddlerマクロ|jsontiddler Macro]]
+* [[jsontiddlersマクロ|jsontiddlers Macro]]
+
+JSONデータを手動で構築する場合、特殊文字が適切にエスケープされていることを確認するために[[jsonstringifyオペレーター|jsonstringify Operator]]が必要です

package/editions/ja-JP/tiddlers/howtos/Creating SubStories.tid

@@ -0,0 +1,34 @@
+created: 20140214215718317
+modified: 20241016112045089
+original-modified: 20211127032217828
+tags: Learning
+title: Creating SubStories
+ja-title: サブストーリーを作成する
+type: text/vnd.tiddlywiki
+
+この例では、メイン[[ストーリー|Story River]]から独立したTiddler内にサブストーリーを作成する方法を示します。NavigatorWidgetとListWidgetを連携します:
+
+# リンクをクリックすると、[[ストーリー|Story River]]にTiddlerを追加します。リンクのクリックに対応するTiddlerに移動します(NavigatorWidgetの''story''属性)
+# Tiddlerの閉じるボタンがクリックされたときに、[[ストーリー|Story River]]からTiddlerを削除します(NavigatorWidgetの''story''属性)
+# Tiddlerの開閉をアニメーションします(ListWidgetの''storyview''属性)
+# 開いているTiddlerのリストを表示します(ListWidgetの''filter''属性と''template''属性)
+# Tiddlerを[[ドラフトモード|DraftMechanism]]で表示します(ListWidgetの''editTemplate''属性)
+# [[ナビゲーション履歴|HistoryMechanism]]を追跡します(NavigatorWidgetとListWidgetの両方の''history''属性)
+# そのほかいろいろ!
+
+コード例は次のとおりです(関連する議論については、StateMechanismも参照してください):
+
+<$macrocall $name='wikitext-example-without-html'
+src='<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">
+
+{{$:/core/ui/SideBarSegments/search}}
+
+<$list
+  filter="[list[$:/temp/DemoStoryList]]"
+  history="$:/temp/DemoHistoryList"
+  template={{$:/config/ui/ViewTemplate}}
+  editTemplate={{$:/config/ui/EditTemplate}}
+  storyview="classic"
+  emptyMessage="上の検索ボックスを使用してください。クリックした検索リンクは、メインストーリーではなくここで開きます<p>何を検索すればよいか浮かびませんか?では、このリンクをクリックしてください:[[こんにちは|HelloThere]]</p>"/>
+
+</$navigator>'>

package/editions/ja-JP/tiddlers/howtos/Creating a custom export format.tid

@@ -0,0 +1,23 @@
+title: Creating a custom export format
+ja-title: カスタムエクスポートフォーマットを作成する
+modified: 20241113113601051
+original-modified: 20141124173526227
+created: 20141124173526227
+tags: [[Customise TiddlyWiki]]
+
+TiddlerをRAWデータテキストとしてエクスポートするカスタムエクスポートフォーマットを作成するには: 
+
+# 次のフィールドを持つTiddlerを作成します。
+#* ''tags'': [[$:/tags/Exporter]]
+#* ''description'': このエクスポートフォーマットの説明
+#* ''extension'': このエクスポートフォーマットのデフォルトのファイル拡張子(ドットを含む、たとえば`.tid`)
+# 以下の内容を設定します。: 
+
+```
+\define renderContent()
+{{{ $(exportFilter)$ ||$:/core/templates/plain-text-tiddler}}}
+\end
+<<renderContent>>
+```
+
+変数`exportFilter`には、どのTiddlerをエクスポートするのかを定義するフィルターが含まれています。

package/editions/ja-JP/tiddlers/howtos/Creating a splash screen.tid

@@ -0,0 +1,36 @@
+created: 20180927081216605
+modified: 20241114112009202
+original-modified: 20180927084436111
+tags: [[Customise TiddlyWiki]]
+title: Creating a splash screen
+ja-title: スプラッシュ画面を作成する
+type: text/vnd.tiddlywiki
+
+デフォルトでは、TiddlyWikiはロード中に空白の画面を表示します。Wikiのロード中に表示される特別な"スプラッシュ画面"を追加できます。
+
+大きなTiddlyWikiファイルや、遅いネットワーク接続を介してロードされるファイルは、ロードに少し時間がかかる場合があります。完全にロードされると、ブラウザ内ですべてが実行されるため、パフォーマンスが向上します。スプラッシュ画面を使用すると、読み込みプロセスが行われていることをユーザーが認識できるため、ページから離れる可能性が低くなります。
+
+TiddlyWikiが初期化や[[復号化|Encryption]]の前にスプラッシュ画面を表示するには、TiddlyWiki HTMLファイル内に静的HTML/CSSとして埋め込まれます。これは、[[SystemTag: $:/tags/RawMarkupWikified/TopBody]]、または$:/tags/RawMarkupで始まるシステムタグで行われます。
+
+Wikiの読み込みが完了したときにスプラッシュ画面を削除するには、HTMLを特別なクラス`tc-remove-when-wiki-loaded`を持つコンテナ内に包み込む必要があります。このクラスを持つDOM要素は、Wikiがロードされるとコア機能によって自動的に削除されます。
+
+以下は、//Loading//というテキストを表示するだけの単純なスプラッシュ画面の例です。これを使用するには、このテキストを新しいTiddlerにコピーし、タイプ"text/plain"とタグ"$:/tags/RawMarkupWikified/TopBody"を指定します。: 
+
+```
+<div class="tc-remove-when-wiki-loaded">
+Loading...
+</div>
+```
+
+TiddlerにWikiTextタイプ`text/vnd.tiddlywiki`が指定されている場合、ファイルの保存時にコンテンツがwiki化されるので、トランスクルージョンなども可能になります。たとえば、ロード時メッセージでサイトのタイトルを引用する例を次に示します。これを使用するには、このテキストを新しいTiddlerにコピーし、タイプ"text/vnd.tiddlywiki"とタグ"$:/tags/RawMarkupWikified/TopBody"を指定します。: 
+
+```
+\rules only filteredtranscludeinline transcludeinline
+<div class="tc-remove-when-wiki-loaded">
+Please wait while {{$:/SiteTitle}} is loading
+</div>
+```
+
+この`\rules`命令は、認識されるWikiText構文を2つの形式のインライントランスクルージョンに制限するために使用されます。これにより、Tiddlerコンテンツの誤ったWiki化が回避できます。
+
+このWikiには、CSSアニメーションと画像を使用した複雑なスプラッシュ画面の例があります: $:/SplashScreenを参照してください。

package/editions/ja-JP/tiddlers/howtos/Custom Styles FAQ.tid

@@ -0,0 +1,11 @@
+modified: 20241120105817756
+original-modified: 201804111739
+created: 201804111739
+title: Custom Styles FAQ
+ja-title: カスタムスタイルに関するよくある質問
+tags: [[How to apply custom styles]] FAQ-group
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.1.16">>
+
+<<list-links "[tag[Custom Styles FAQ]]">>

package/editions/ja-JP/tiddlers/howtos/Custom Styles by title.tid

@@ -0,0 +1,41 @@
+created: 201804111739
+modified: 20241119112922446
+original-modified: 201804111739
+tags: [[How to apply custom styles]]
+title: Custom styles by data-tiddler-title
+ja-title: data-tiddler-titleによるカスタムスタイル
+type: text/vnd.tiddlywiki
+
+! 属性: data-tiddler-title
+
+<<.from-version "5.1.16">>
+
+~TiddlyWikiのコアでは、レンダリングされたコンテンツにいくつかの`属性`を追加します。これらの属性を使用すると、カスタムスタイルをTiddlerコンテンツに適用できます
+
+例えば、この"{{!!title}}"という名前のTiddlerには、次のような属性になります: 
+
+```
+data-tiddler-title="Custom styles by data-tiddler-title"
+```
+
+!! 例
+
+次のCSSは[[Custom data-styles]]で定義されており、まさにこのTiddlerに青い境界線を作成します
+
+```
+[data-tiddler-title="Custom styles by data-tiddler-title"] {
+  border: 1px solid blue;
+}
+```
+
+システムTiddlerと呼ばれる`$:/`で始まるすべてのTiddlerに緑色の境界線を作成するには、次のようにCSSを使用する必要があります: (ここでは適用されていませんが、試してみることはできます!)
+
+```
+[data-tiddler-title^="$:/"] {
+  border: 1px solid green;
+}
+```
+
+!! その他の記述方法
+
+{{Attribute Selectors}}

package/editions/ja-JP/tiddlers/howtos/Custom Styles by userClass.tid

@@ -0,0 +1,28 @@
+created: 201804111739
+modified: 20241119113521083
+original-modified: 201804111739
+title: Custom styles by user-class
+ja-title: user-classによるカスタムスタイル
+tags: [[How to apply custom styles]]
+type: text/vnd.tiddlywiki
+
+''Tiddlerフィールド: `class`'' <<.from-version "5.1.16">>
+
+[[タグの管理|$:/TagManager]]を使用すると、"タグピル"の色を定義するために使用される`color`フィールドをTiddlerに設定できます。<<.from-version "5.1.16">>されたため、[[ViewTemplate|$:/core/ui/ViewTemplate]]に直接挿入され、スタイル設定に使用できる`class`フィールドを定義できます: 
+
+"""
+title: `anyName`
+tags: `$:/tags/Stylesheet`
+class: `myClass`
+"""
+
+`class`フィールドを持つすべてのTiddlerは次のようにスタイル設定できます!
+
+```
+.myClass {
+  border: 2px solid blue;
+}
+
+```
+
+詳細については、[[カスタムスタイルを適用する方法|How to apply custom styles]]を参照してください。

package/editions/ja-JP/tiddlers/howtos/Custom tag pill styles.tid

@@ -0,0 +1,34 @@
+created: 20230608121519758
+modified: 20241120111032165
+original-modified: 20230608123444591
+tags: [[How to apply custom styles]]
+title: Custom tag pill styles
+ja-title: タグピルのカスタムスタイル
+type: text/vnd.tiddlywiki
+
+! 属性: data-tag-title
+
+<<.from-version "5.2.0">> この属性<<.attr data-tag-title>>は、Tiddlerの表示用テンプレートに表示されるタグピルに追加されました。
+
+<<.from-version "5.3.0">> この属性は、標準の~TiddlyWiki UIに表示されるすべてのタグピルに追加されました。特に、編集用テンプレートのタグリスト、タグピッカーのドロップダウン、右側のサイドバー -> 詳しく -> タグ別タブ、そして、$:/TagManagerに追加されています
+
+HTML属性<<.attr data-tag-title>>には、タグピルに表示されるタグタイトルのみが含まれます。これを使用して、タグピルのスタイルを設定できます。
+
+Tiddler全体にスタイルを設定したい場合は、[[data-tiddler-titleによるカスタムスタイル|Custom styles by data-tiddler-title]]を参照してください。
+
+!! 例
+
+新しい `$:/tags/Stylesheet`タグ付きTiddlerで次のCSSを使用すると、`#`で始まるすべてのタグに新しい境界線の丸角半径が設定されます。そのため、これらのタグはデフォルトのタグとは対照的に目立ちます。
+
+既存のTW UI内のすべてのタグピルを捕捉するには、既存のUI構造のため、''両方のCSSルールを定義する必要があります''。
+
+```
+[data-tag-title^="#"] .tc-tag-label,
+[data-tag-title^="#"].tc-tag-label {
+   border-radius: 3px;
+}
+```
+
+!! さらに可能な設定
+
+{{Attribute Selectors}}

package/editions/ja-JP/tiddlers/howtos/Custom_Attribute_Selectors.tid

@@ -0,0 +1,33 @@
+created: 20170126152839462
+modified: 20241119110659035
+original-modified: 201804111739
+tags: [[Custom data-styles]]
+title: Attribute Selectors
+ja-title: 属性セレクタ
+type: text/vnd.tiddlywiki
+
+;[attr]
+:属性attrを持つ要素を表します。
+
+;[attr="value"]
+:属性attrの値が"value"である要素を表します。
+
+;[attr~="value"]
+:属性attrの値が、空白で区切られた単語のリストで、そのうちの1つが"value"である要素を表します。
+
+;[attr|="value"]
+:属性attrの値が、“value”か、“value”の後に“-” (U+002D)が続く値である要素を表します。言語サブコードの一致に使用できます。
+
+;[attr^="value"]
+:属性attrの値の先頭に"value"が付く要素を表します。
+
+;[attr$="value"]
+:属性attrの値の末尾に"value"が付く要素を表します。
+
+;[attr*="value"]
+:属性attrの値に文字列"value"が部分文字列として少なくとも1回含まれる要素を表します。
+
+;[attr "operator value" i]
+:閉じ括弧の前にi(またはI)を追加すると、値は大文字と小文字を区別せずに比較されます(ASCII範囲内の文字の場合)。
+
+詳細は[[CSSの属性セレクタ|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]]や[[CSS仕様書|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]]を参照してください

package/editions/ja-JP/tiddlers/howtos/Custom_styles_by_data-tags.tid

@@ -0,0 +1,62 @@
+created: 20170124132500000
+modified: 20241119105640364
+original-modified: 201804111739
+tags: example-test [[How to apply custom styles]]
+title: Custom styles by data-tags
+ja-title: data-tagsによるカスタムスタイル
+type: text/vnd.tiddlywiki
+
+! 属性: data-tags
+
+<<.from-version "5.1.16">>
+
+~TiddlyWikiのコアでは、レンダリングされたコンテンツにいくつかの`属性`を追加します。これらの属性を使用すると、カスタムスタイルをTiddlerコンテンツに適用できます
+
+例えば、この<<tag "How to apply custom styles">>と<<tag "example-test">>でタグ付けされたTiddlerには、次のような属性になります:
+
+```
+data-tags="[[How to apply custom styles]] example-test"
+```
+
+''重要: ''Tiddlerタグはソートされて''いない''ため、レンダリングされた出力の順序は異なる場合があります!
+
+!! 例
+
+次のCSSは[[Custom data-styles]]で定義されており、`example-test`でタグ付けされたすべてのTiddler(これを含む)にピンクの境界線を作成します
+
+```
+[data-tags*="example-test"] {
+  border: 2px solid pink;
+}
+```
+
+!!! スタイルシートのスタイリング
+
+`data-tags-styles`でタグ付けされたTiddlerを表示するには、適切な方法で、次のコードを使用できます(`$:/tags/Stylesheet`を使用することもできますが、このWiki 内のすべてのスタイルシートに影響を与えることになり、意図したものではありません。)
+
+''重要:'' `.tc-tiddler-body`を指定することも忘れないでください。指定しないと、タイトルを含むTiddler全体が変更されます! 参照: [[Custom data-styles]]
+
+```
+[data-tags*="data-tags-styles"] .tc-tiddler-body {
+  display: block;
+  padding: 14px;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  word-break: normal;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  padding: 0 3px 2px;
+  border-radius: 3px;
+  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+```
+
+!! 強制改行
+
+この仕組みは、散文的な文章を書きたいユーザーにとっては便利です。参照: [[CSSを使用した強制改行|Hard Linebreaks with CSS]]
+
+!! その他の記述方法
+
+{{Attribute Selectors}}

package/editions/ja-JP/tiddlers/howtos/Debugging Stylesheets.tid

@@ -0,0 +1,13 @@
+created: 20211125175712017
+modified: 20241118113249073
+original-modified: 20211125175906085
+tags: [[Using Stylesheets]]
+title: Debugging Stylesheets
+ja-title: スタイルシートのデバッグ
+type: text/vnd.tiddlywiki
+
+コアの隠しTiddler $:/snippets/DebugStylesheetsには、括弧の不一致やその他の入れ子構造に関する特定の問題を追跡するための簡単なツールが含まれています
+
+以下のリストでは、エラーを含むスタイルシートには赤いバツ印が付いています: 
+
+{{$:/snippets/DebugStylesheets}}

package/editions/ja-JP/tiddlers/howtos/Editing Tiddlers with Emacs.tid

@@ -0,0 +1,40 @@
+created: 20140406210404245
+modified: 20241017113402647
+original-modified: 20140919161501896
+tags: Learning
+title: Editing Tiddlers with Emacs
+ja-title: TiddlerをEmacsで編集する
+type: text/vnd.tiddlywiki
+
+Michael Foglemanは、TiddlyWikiの.tidファイルを編集するための[[tid-mode|https://github.com/mwfogleman/tid-mode]]と呼ばれる[[Emacs|http://www.gnu.org/software/emacs/]]のメジャーモードを作成しました。これはtext-modeから派生し、便利なマイナーモードorg-structとsubwordを使用し、.tidファイルを保存するときに変更時刻を更新します
+
+彼はまた、EmacsでTiddlyWikiを使用するための2つのヘルパー関数も作成しました。1つ目は、DiredでTiddlerディレクトリを開きます。2つ目はブラウザでTiddlyWikiを開きます
+
+```
+(defun open-wiki ()
+  "Opens a TiddlyWiki directory in Dired."
+  (interactive)
+  (dired "~/Dropbox/wiki/tiddlers/"))
+```
+  
+```
+(defun browse-wiki ()
+  "Opens TiddlyWiki in the browser."
+  (interactive)
+  (browse-url "127.0.0.1:8080/"))
+```
+
+後者の関数では、ブラウザの指定が必要になる場合があります:
+
+```
+(setq browse-url-browser-function 'browse-url-generic
+      browse-url-generic-program "chromium")
+```
+
+これらの関数をglobal-set-key関数でバインドできます:
+
+```
+(global-set-key (kbd "C-c w") 'open-wiki)
+```
+
+現時点では、これらはtid-modeに統合されていません

package/editions/ja-JP/tiddlers/howtos/Editing Tiddlers with Vim.tid

@@ -0,0 +1,11 @@
+modified: 20241020104154015
+original-modified: 20160111190002
+created: 20140406210404245
+tags: Learning
+title: Editing Tiddlers with Vim
+ja-title: TiddlerをVimで編集する
+type: text/vnd.tiddlywiki
+
+Devin Weaverは https://github.com/sukima/vim-tiddlywiki に[[Vim|http://www.vim.org/]]プラグインを作成しました
+
+TiddlyWikiのシンタックスのほとんどをサポートしており、`modified`フィールドを自動更新するファイルタイププラグインが含まれています

package/editions/ja-JP/tiddlers/howtos/Editor toolbar.tid

@@ -0,0 +1,22 @@
+created: 20160817093933820
+modified: 20241104105233416
+original-modified: 20190118161349442
+tags: Features [[Formatting text in TiddlyWiki]]
+title: Editor toolbar
+ja-title: エディタツールバー
+type: text/vnd.tiddlywiki
+
+!! 使い方
+
+エディタツールバーは、テキストのフォーマットを簡単に設定するのに役立つツールバーです。編集モードの場合、Tiddlerのテキスト入力フィールドの上に表示されます。Microsoft WordやLibre Office Writeなどのデスクトップテキストエディターと似た外観をしています
+
+!! エディタツールバーの機能
+機能ボタンを押すと、テキストフィールドにWikiTextが挿入されます。例えば、太字のボタンを押すと、`'' ''`が挿入されます
+
+テキストの一部を''選択''していると、マークアップコードが選択されたテキストを自動的に囲みます
+
+[[MarkDown|Markdown Plugin]]などの別のモードを使用している場合は、ツールバーがその構文に変更され、適切なコードが挿入されます。ただし、以前に入力したテキストやマークアップは変更されません
+
+標準のWikiTextフォーマットに加えて、エディタツールバーには次のボタンがあります: 
+
+<<list-links "[tag[Editor toolbar]sort[title]]">>

package/editions/ja-JP/tiddlers/howtos/Formatting List Results as Tables with CSS - Specified Columns Methods.tid

@@ -0,0 +1,51 @@
+created: 20161209172820513
+modified: 20241020104954951
+original-modified: 20161220161653258
+tags: Learning
+title: Formatting List Results as Tables with CSS - Specified Columns Methods
+ja-title: CSSを使用してリスト結果を表フォーマットで出力する - 固定列メソッド
+type: text/vnd.tiddlywiki
+
+``<$list>``ウィジェットの結果を単純な1つのリストではなく、複数列の形式でフォーマットしたい場合があります。この方法では、~CSSを使用してリストを列として設定し、必要な列の数がわかっていることを前提としています。ここでの方法は、テーブルに含める列の数を反映するスタイルを作成し、そのスタイルを結果のリスト出力に適用することです
+
+他のテーブル作成テクニックについては、以下も参照してください: 
+
+* [[CSSを使用してリスト結果を表フォーマットで出力する - 可変列メソッド|Formatting List Results as Tables with CSS - Variable Column Method]]
+* [[リスト結果を表フォーマットで出力する(CSS無し)|Formatting List Results as Tables (no CSS)]]
+
+
+!!! 1) `$:/tags/Stylesheet`でタグ付けされた列に対して、以下を含むTiddlerを作成します:
+
+```
+/* FOUR COLUMN MODE */
+.fourcolumns {
+   display:block;
+   column-count:4;
+   column-gap:1em;
+   -moz-column-count:4;
+   -moz-column-gap:1em;
+   -webkit-column-count: 4;
+   -webkit-column-gap:1em;
+}
+```
+
+列数を示す値がさまざまな場所に必要なことに注意してください
+
+!!! 2) 次に、出力を次のようにフォーマットします: 
+
+```
+@@.fourcolumns
+<$list filter="[tag[Filter Operators]]" variable="foo">
+<<foo>><br>
+</$list>
+@@
+```
+
+!! フィルター演算子の一部のリストを示す例
+
+@@.fourcolumns
+<$list filter="[tag[Filter Operators]limit[24]]" variable="foo">
+<<foo>><br>
+</$list>
+@@
+

package/editions/ja-JP/tiddlers/howtos/Formatting List Results as Tables with CSS - Variable Column Method.tid

@@ -0,0 +1,85 @@
+created: 20161209172820513
+modified: 20241020105248614
+original-modified: 20161220162845058
+tags: Learning
+title: Formatting List Results as Tables with CSS - Variable Column Method
+ja-title: CSSを使用してリスト結果を表フォーマットで出力する - 可変列メソッド
+type: text/vnd.tiddlywiki
+
+``<$list>``ウィジェットの結果を単純な1つのリストではなく、複数列の形式でフォーマットしたい場合があります。この方法では、CSSを使用してリストを列として設定します。応答性が高く、ウィンドウが小さすぎる場合は、表示する列の数を減らすために改行位置を変更します
+
+固定の列数を直接指定するのではなく、リストの最大幅(Tiddlerの幅をトランスクルージョンする可能性があります)と各項目の幅を指定します。左から右にリストされ、新しい行に折り返されます
+
+他のテーブル作成テクニックについては、以下も参照してください: 
+
+* [[CSSを使用してリスト結果を表フォーマットで出力する - 固定列メソッド|Formatting List Results as Tables with CSS - Specified Columns Methods]]
+* [[リスト結果を表フォーマットで出力する(CSS無し)|Formatting List Results as Tables (no CSS)]]
+
+!! 既存の~TiddlyWikiタグ50個を使用したリストの例
+
+```
+<div class="dynamic-table">
+  <$list filter="[has[tags]tags[]sort[title]first[50]]">
+    <span class="item">
+      <$transclude tiddler="$:/core/ui/TagTemplate"/>
+    </span>
+  </$list>
+</div>
+```
+
+!! リストで使用するスタイルシートの例
+
+```
+<style>
+.dynamic-table {
+  max-width:700px; /* could transclude tiddler width instead */
+  -ms-box-orient: vertical; /* might be unnecessary */
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: inline-flex;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.item {
+  max-width:160px; min-width:160px;
+  flex: 0 0 2em; /* -grow, -shrink, -basis */
+}
+</style>
+```
+
+!! 結果
+
+<div class="dynamic-table">
+  <$list filter="[has[tags]tags[]sort[title]first[50]]">
+    <span class="item">
+      <$transclude tiddler="$:/core/ui/TagTemplate"/>
+    </span>
+  </$list>
+</div>
+
+<style>
+.dynamic-table {
+  max-width:700px; /* could transclude tiddler width instead */
+  -ms-box-orient: vertical;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: inline-flex;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.item {
+  max-width:160px; min-width:160px;
+  flex: 0 0 2em; /* -grow, -shrink, -basis */
+}
+</style>
+

package/editions/ja-JP/tiddlers/howtos/Formatting_List_Results_as_Tables_(no_CSS).tid

@@ -0,0 +1,51 @@
+created: 20161220154952676
+modified: 20241020104643991
+original-modified: 20161220161706470
+tags: Learning
+title: Formatting List Results as Tables (no CSS)
+ja-title: リスト結果を表フォーマットで出力する(CSS無し)
+type: text/vnd.tiddlywiki
+
+``<$list>``ウィジェットの結果を単純な1つのリストではなく、複数列の形式でフォーマットしたい場合があります。次のメソッドでは、実際のテーブル構造を作成し、[[n番目の演算子|nth Operator]]を使用して各行の改行を実現します。この方法では応答性はありません。つまり、ウィンドウが小さすぎる場合、表示する列を減らすための位置変更を行いません
+
+一番外側のリスト構造では、項目番号に改行が発生することを示すカウントを指定する必要があります。したがって、次の例では、各行は4個の項目の後で区切られるため、順序は1、5、9、・・・になります。これには、存在する項目の最大数を事前に知っておく必要があることに注意してください。n-1個の項目に設定される内部制限もあります(nは必要な列の数です)
+
+内側の`<$list>`ウィジェット内で駆動フィルター演算子を繰り返す必要があることにも注意してください。明らかに、このテクニックはマクロの実装に役立ちます
+
+他のテーブル作成テクニックについては、以下も参照してください: 
+
+* [[CSSを使用してリスト結果を表フォーマットで出力する - 可変列メソッド|Formatting List Results as Tables with CSS - Variable Column Method]]
+* [[CSSを使用してリスト結果を表フォーマットで出力する - 固定列メソッド|Formatting List Results as Tables with CSS - Specified Columns Methods]]
+
+!! 項目数が70未満の4列テーブルのコード例
+
+```
+<table>
+<$list filter="1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61 65" variable ="rows">
+    <$list filter="[tag[Filter Operators]limit[50]] +[nth<rows>]" variable="cell">
+        <tr>
+        <td> <<cell>> </td>
+        <$list filter="[tag[Filter Operators]limit[50]] +[allafter<cell>limit[3]]" variable="this">
+            <td> <<this>> </td>
+        </$list>
+        </tr>
+    </$list>
+</$list>
+</table>
+```
+
+!! 結果
+
+<table>
+<$list filter="1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61 65" variable ="rows">
+    <$list filter="[tag[Filter Operators]limit[50]] +[nth<rows>]" variable="cell">
+        <tr>
+        <td> <<cell>> </td>
+        <$list filter="[tag[Filter Operators]limit[50]] +[allafter<cell>limit[3]]" variable="this">
+            <td> <<this>> </td>
+        </$list>
+        </tr>
+    </$list>
+</$list>
+</table>
+

package/editions/ja-JP/tiddlers/howtos/Generating Static Sites with TiddlyWiki.tid

@@ -0,0 +1,37 @@
+created: 20130828190200000
+modified: 20250120105549696
+original-modified: 20241008031135403
+tags: [[TiddlyWiki on Node.js]]
+title: Generating Static Sites with TiddlyWiki
+ja-title: TiddlyWikiで静的サイトを生成する
+type: text/vnd.tiddlywiki
+
+TiddlyWiki5は、JavaScriptを必要としないTiddlyWikiの静的HTML表現を生成できます。このプロセスでは、ローカルシステムのNode.jsにTiddlyWikiがインストールされている必要があります。詳細については、[[Node.jsにTiddlyWikiをインストールする|Installing TiddlyWiki on Node.js]]を参照してください。
+
+静的HTMLの生成方法には多くの柔軟性があります。次のシナリオはすべて https://tiddlywiki.com で説明されています。
+
+! WikiスナップショットとTiddlerスナップショット
+
+https://tiddlywiki.com/static.html で、メインのTiddlyWikiサイトの静的な表現を見ることができます。このファイルは、現在のDefaultTiddlersの静的スナップショットです。このファイルにリンクされているすべてのTiddlerは、個々のTiddlerの静的スナップショットを指す`/static/HelloThere.html`形式のURLによって参照されます。TiddlerのHTMLファイルは、`static.css`スタイルシートファイルを参照します。
+
+次のコマンドは、TiddlyWiki5サイトの静的バージョンのサンプルを生成するために使用されます:
+
+```sh
+tiddlywiki wikipath --render '[!is[system]]' '[encodeuricomponent[]addprefix[static/]addsuffix[.html]]' text/plain $:/core/templates/static.tiddler.html
+tiddlywiki wikipath --render $:/core/templates/static.template.html static.html text/plain
+tiddlywiki wikipath --render $:/core/templates/static.template.css static/static.css text/plain
+```
+
+最初のRenderCommandは、フィルタ`[!is[system]]`を使用してすべての個別の非システムTiddlerのHTML表現を生成し、次のフィルタ`[encodeuricomponent[]addprefix[static/]addsufixx[.html]]`は各タイトルにURIエンコーディングを適用し、プレフィックス`static/`を追加して、最後にサフィックス`.html`を追加します。2番目のRenderCommandは、DefaultTiddlersの静的バージョンを`static.html`に保存し、最後のRenderCommandはスタイルシートを保存します。(すべてのファイルは、Wikiフォルダの`output`フォルダに配置されます)。
+
+! 内部リンク付きWikiスナップショット
+
+Tiddlerの静的表現を含み、標準のHTMLアンカーリンクを使用してそれらの間を移動する単一のHTMLファイルを作成することも可能です。
+
+例: https://tiddlywiki.com/alltiddlers.html
+
+この例は次のコマンドによって構築できます: 
+
+```
+--render $:/core/templates/alltiddlers.template.html alltiddlers.html text/plain
+```