Skip to content

Commit

Permalink
Merge branch 'tiddlywiki-com'
Browse files Browse the repository at this point in the history
  • Loading branch information
Jermolene committed Dec 21, 2024
2 parents 49a33ae + c13687b commit 370ca4b
Show file tree
Hide file tree
Showing 27 changed files with 828 additions and 4 deletions.
72 changes: 72 additions & 0 deletions editions/ja-JP/tiddlers/concepts/ExternalImages.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
created: 20140610213500000
modified: 20241209112247651
original-modified: 20241030132047048
tags: Concepts Features
title: ExternalImages
ja-title: 外部画像
type: text/vnd.tiddlywiki

TiddlyWikiの外部画像は、画像データすべてを埋め込むのではなく、画像のURIを指定するTiddlerです。特に画像の数やサイズが大きい場合、埋め込み画像よりもパフォーマンスが向上します。ただし、外部画像を使用すると、TiddlyWikiの単一ファイルパターンが崩れます。

外部画像はブラウザで使用されます。TiddlyWikiをビルドするときにNode.js構成によって作成されるか、ブラウザ内で手動で作成されます。

! 外部画像とは

外部画像は、画像のURIを含む''_canonical_uri''フィールドを持つ通常の画像Tiddlerです。URIは、HTMLドキュメントに対する絶対パスや相対パスで指定することができます。Canonical URIが指定されている場合は、Tiddlerの''text''フィールドは無視されるため、省略する必要があります。

! 外部画像を手動で作成する

外部画像を手動で作成するには、適切な画像コンテンツタイプでTiddlerを作成し、実際の画像の場所を指すURIを含む''_canonical_uri''フィールドを追加します。

''重要:'' スペルを再度確認してください。``_canonical_uri``は、URLではなく[[URI|https://en.wikipedia.org/wiki/URI#The_relationship_between_URIs.2C_URLs.2C_and_URNs]]と綴られます。

! Node.jsで外部画像を作成する

参照される外部画像を含む''images''フォルダーを伴うWikiの静的HTMLファイルバージョンを作成するには、次の手順を使用します:

# 通常の方法でTiddlyWikiFoldersに画像Tiddlerを作成します
# 画像を別ファイルとして保存します (慣例により、''images''という名前のサブフォルダに保存します)
# ''_canonical_uri''フィールドを追加して画像Tiddlerを外部化します
# メインのHTMLファイルを保存します

画像ファイルは外部化する前に保存する必要があることに注意してください。外部化すると、Wikiストアのメモリ内コピーの''text''フィールドが破壊され、保存の試みが失敗します。

たとえば、''tw5.com'' Wikiの''externalimages''ビルドターゲットを参照してください:

```
--save [is[image]] images
--setfield [is[image]] _canonical_uri $:/core/templates/canonical-uri-external-image text/plain
--setfield [is[image]] text "" text/plain
--render $:/core/save/all externalimages.html text/plain
```

!! 個別の画像ファイルを保存する

次の`--save`コマンド ([[Saveコマンド|SaveCommand]]を参照)を使用すると、Wikiの画像を''images''サブフォルダーに保存できます:

```
--save [is[image]] images
```

!! 画像Tiddlerの外部化

2つの`--setfield`コマンドが使用されています: 最初のコマンドは、''_canonical_uri''フィールドをTiddlerのタイトルから派生したURIに設定し、2番目のコマンドはtextフィールドをクリアします。

```
--setfield [is[image]] _canonical_uri $:/core/templates/canonical-uri-external-image text/plain
--setfield [is[image]] text "" text/plain
```

テンプレートTiddler [[$:/core/templates/canonical-uri-external-image]]には以下が含まれます:

<pre>

<$view tiddler="$:/core/templates/canonical-uri-external-image" field="text" format="text"/>

</pre>

これらの操作により、Wikiストア内のTiddlerが変更されるため、後続のコマンド操作に影響する可能性があることに注意してください。

! 外部画像の使用について

URIフィールドを別の画像を指すように変更しない限り、ブラウザで外部画像を直接編集することはできません。
18 changes: 18 additions & 0 deletions editions/ja-JP/tiddlers/concepts/InfoPanel.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
created: 20150917193630604
modified: 20241212114212647
original-modified: 20201129183045031
tags: Features
title: InfoPanel
ja-title: 情報パネル
type: text/vnd.tiddlywiki

各Tiddlerには追加情報のパネルがあります。それを表示するには、Tiddlerのツールバーの<<.icon $:/core/images/down-arrow>>ボタンをクリックし、ドロップダウンリストから<<.icon $:/core/images/info-button>> ''情報''を選択します。

情報パネルには次のタブがあります。:

* ''ツール'' - このTiddlerで実行できるさまざまなアクションのボタンがあります。各ボタンの横にあるチェックボックスを使用すると、アクションをTiddlerのツールバーに昇格できます。これは、Wiki内のすべてのTiddlerに影響します
* ''参照''、''この名でタグ付''、''一覧''、''被リスト'' - これらはさまざまな種類の関連するTiddlerをリストします。[[リンクを使用してTiddler間を移動する|Using links to navigate between tiddlers]]ティドラー間の移動にリンクを使用するを参照してください
* ''項目'' - Tiddlerの''テキスト''以外の[[フィールド|TiddlerFields]]をすべてまとめたものです
* ''詳細'' - これは、Tiddlerが[[隠し|ShadowTiddlers]]であるかどうかを示します。隠しである場合、どのプラグインからのものか、通常のTiddlerによって上書きされているかどうかも明らかになります

情報パネルを閉じるには、情報パネルの外側の任意の場所をクリックします。
64 changes: 64 additions & 0 deletions editions/ja-JP/tiddlers/concepts/PermaLinks.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
created: 20140502213500000
modified: 20241216111540858
original-modified: 20210406131243532
tags: Features Concepts
title: PermaLinks
ja-title: パーマリンク
type: text/vnd.tiddlywiki

パーマリンクを使用すると、TiddlyWiki内の個々のTiddlerへの直接リンクが可能になります。

! シンプルなパーマリンク

パーマリンク(<<.icon $:/core/images/permalink-button>>)の最も単純な形式は、`#`をともなうベースURLに1つのターゲットTiddlerタイトルを追加したものです:

https://tiddlywiki.com/#HelloThere

必要なら、Tiddlerタイトルにスペースを含めることができます:

[[https://tiddlywiki.com/#Using TiddlyWiki on Node.js]]

ターゲットTiddlerのタイトルを囲む二重角括弧は不要であることに注意してください。ただし、存在する場合は暗黙的に削除されます。

! ストーリーのパーマリンク

パーマリンクでは、対象のTiddlerと一緒に開くTiddlerのストーリーリストを[[Tiddlerフィルター|Filters]]として指定することもできます:

[[https://tiddlywiki.com/#TiddlerFields:Tiddlers TiddlerTags TiddlerFields ContentType]]

ターゲットTiddlerがストーリーリストに存在しない場合は、自動的に先頭に挿入されます。つまり、次の2つの例はどちらもストーリーシーケンス`Tiddlers`、`Tags`、`TiddlerFields`内の`Tiddlers`Tiddlerをターゲットにしています:

[[https://tiddlywiki.com/#Tiddlers:Tags TiddlerFields]]

[[https://tiddlywiki.com/#Tiddlers:Tiddlers Tags TiddlerFields]]

ナビゲーションのターゲットTiddlerを指定せずにストーリーフィルターを指定することもできます:

<a href="https://tiddlywiki.com/#:[tag[task]]" rel="noopener noreferrer">~https://tiddlywiki.com/#:[tag[task]]</a>

! URLエンコードについて

URLフラグメント内の有効な文字には技術的な制限があります。すべてのTiddlerタイトルに対応できるようにするために、不正な文字は"URL エンコード"と呼ばれるプロセスの対象となり、問題のある文字は数値コードに置き換えられます。たとえば、スペース文字は`%20`に置き換えられます。

ターゲットTiddlerのタイトルとストーリーフィルターは両方ともURLエンコードされている必要があります(区切りのコロンはエンコードされません)。TiddlyWikiは適切にエンコードされたURLを生成しますが、見た目がかなり醜い場合があります。ただし、実際には、ブラウザーは通常、URLフラグメント内の任意の文字を問題なく処理します。したがって、パーマリンクを手動で作成する場合は、URLエンコードを無視することを選択できます。

! パーマリンクの動作

TiddlyWikiのパーマリンクの動作に関する2つの重要な側面は、[[コントロールパネル|$:/ControlPanel]] <<.icon $:/core/images/options-button>>の''設定''タブのオプションで制御できます:

* 各ナビゲーションでアドレスバーを自動的に更新するかどうか、また更新する場合は、対象のTiddlerだけでなくストーリーシーケンスも含めるかどうか
* アドレスバーの更新がブラウザの履歴に反映されるかどうか。デフォルトは''いいえ''です。 ''はい''に切り替えると、ブラウザの「戻る」ボタンと「進む」ボタンを使用して、Tiddler間のナビゲーションを巻き戻すことができます

パーマリンクを入力または移動すると、常にパーマリンクが処理され、Tiddlerが適宜開閉されることに注意してください。

!! 技術詳細

TiddlyWikiが起動すると、以下の手順に従ってパーマリンクを処理します。パーマリンクが動的に変更される場合(たとえば、ユーザーがアドレスバーを編集したことに応じて変更される場合)、同じ手順が繰り返されます。

# パーマリンクにコロンが含まれている場合は、その前の文字列を''ターゲット''として扱い、その後ろの文字列を''ストーリーフィルター''として扱います
# パーマリンクにコロンが含まれていない場合は、文字列全体を''ターゲット''として扱い、''ストーリーフィルター''を//未指定//としてマークします
# ''ストーリーフィルター''が指定されておらず、起動中の場合、''ターゲット''が指定されている場合は''ストーリーフィルター''を空の文字列に設定し、''ターゲット''が指定されていない場合はデフォルトのTiddlerに設定します
# ''ストーリーフィルター''が指定されておらず、起動中でない場合は、''ストーリーフィルター''を現在のストーリーリストに設定します
# ''ストーリーフィルター''を''ストーリーリスト''として評価します
# ''ターゲット''が指定されていて''ストーリーリスト''にない場合は、一番上に追加します
# ''ターゲット''が指定されている場合はそこに移動し、そうでない場合は''ストーリーリスト''の最初のTiddlerに移動します
9 changes: 9 additions & 0 deletions editions/ja-JP/tiddlers/demonstrations/SampleNotification.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
created: 20140912145543340
modified: 20241216105528737
original-modified: 20211119192337845
tags: Demonstrations
title: SampleNotification
ja-title: 通知のサンプル
type: text/vnd.tiddlywiki

{{$:/core/images/done-button}} これは通知です!
15 changes: 15 additions & 0 deletions editions/ja-JP/tiddlers/demonstrations/SampleWizard.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
created: 20140912145537860
footer: <$button message="tm-close-tiddler">閉じる</$button>
modified: 20241215111438511
original-modified: 20211119205125230
subtitle: これはモーダルウィザードです
tags: Demonstrations
title: SampleWizard
ja-title: サンプルウィザード
type: text/vnd.tiddlywiki

これは、Tiddler [[サンプルウィザード|SampleWizard]]に保存されているモーダルウィザードダイアログです。

{{Motovun Jack.jpg}}

<$button message="tm-modal" param="SampleWizard2">ウィザードをネスト</$button>することもできます。
13 changes: 13 additions & 0 deletions editions/ja-JP/tiddlers/demonstrations/SampleWizard2.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
created: 20140912145532856
footer: <$button message="tm-close-tiddler">閉じる</$button>
modified: 20241215111706825
original-modified: 20211119205144340
subtitle: これはもう一つのモーダルウィザードです
tags: Demonstrations
title: SampleWizard2
ja-title: サンプルウィザード2
type: text/vnd.tiddlywiki

これは、Tiddler [[サンプルウィザード2|SampleWizard2]]に保存されているもう一つのモーダルウィザードダイアログです。

<$button message="tm-modal" param="SampleWizard">ウィザードをネスト</$button>することもできます。
13 changes: 13 additions & 0 deletions editions/ja-JP/tiddlers/features/AutoSave.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
created: 20140206211715540
modified: 20241206115421575
original-modified: 20160610081543108
tags: Features
title: AutoSave
ja-title: 自動保存
type: text/vnd.tiddlywiki

自動保存をサポートする利用可能なSavingMechanismがある場合、TiddlyWikiは、Tiddlerの編集時に<<.icon $:/core/images/done-button>>''ok''または<<.icon $:/core/images/delete-button>>''削除''をクリックすると、現在のドキュメントの保存を自動的にトリガーします

自動保存が行われたことを確認するために、ウィンドウの右上に黄色の通知が表示されます

自動保存は、[[コントロールパネル|$:/ControlPanel]]<<.icon $:/core/images/options-button>>の''設定''タブで有効または無効にできます。バックグラウンドでは、設定用Tiddler[[$:/config/AutoSave]]を通じて制御されます。自動保存を有効にするには、この構成の値が''yes''である必要があります
42 changes: 42 additions & 0 deletions editions/ja-JP/tiddlers/features/Core Icons.tid
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
title: Core Icons
ja-title: コアアイコン
tags: Features
modified: 20241206115817981
original-modified: 20230423103154329
created: 20230423103154329

!! 紹介

TiddlyWikiには100以上のカスタムベクターアイコンが含まれています。これらはユーザーインターフェイスに組み込まれており、作成者が独自のアプリケーションで使用することもできます。完全なリストについては、[[アイコンギャラリー|Icon Gallery]]を参照してください。

!! 使用法

コアアイコンはトランスクルージョンして使用します。例えば:

<<wikitext-example-without-html """{{$:/core/images/new-image-button}}
""">>

コアアイコンはパラメータ化されています。最初のパラメータ`size`は、アイコンをレンダリングするサイズを指定します:

<<wikitext-example-without-html """{{$:/core/images/picture|64px}}
<$transclude $tiddler="$:/core/images/picture" size="32px"/>
""">>

アイコンのサイズを動的に変更する例を示します:

<<wikitext-example-without-html """<$list filter="[range[24,56,8]]" variable=iconSize>
<$text text={{{ [<iconSize>addsuffix[px]] }}} />
<$transclude $tiddler="$:/core/icon" size=<<iconSize>>/>
</$list>
""">>

一部のアイコンは、レンダリング方法をカスタマイズするためにさらにパラメーターを受け取ります。例えば、$:/core/images/new-journal-buttonアイコンは、カレンダーに表示する日付を指定する追加パラメータ`day`を取ります。指定しない場合、デフォルトで現在の日付が設定されます

<<wikitext-example-without-html """{{$:/core/images/new-journal-button|48px|17}}
<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>
""">>

コア アイコンは、本格的なSVG画像としてではなく、埋め込み[[SVG 要素|Using SVG]]として実装されています。これは、CSSを使用してスタイルを設定できることを意味します。例えば、CSSプロパティ`fill`を使用してアイコンの色を変更できます。例えば:

<<wikitext-example-without-html """<span style="fill: red;">{{$:/core/images/opacity}}</span>
""">>
Loading

0 comments on commit 370ca4b

Please sign in to comment.