TiddlyWiki をローカルで編集・閲覧できる TiddlyDesktop アプリで、Tiddler と呼ばれるウィキのデータに画像を保存して、その Tiddler の画像を他の Tiddler の文章内に表示する用例を紹介します。
※ TiddlyWiki v5.3.8 を使用します。
※ TiddlyDesktop Version0.0.20 を使用します。
前回の記事
TiddlyDesktop アプリで、Tiddler と呼ばれるウィキのデータを作成して、タイトル・内容を編集して、タグマネージャー（tag manager）の Tiddler から検索しました。
Tiddler への画像の読み込みと表示方法
TiddlyWiki に画像を読み込むには Tools の import 機能を使用します。
v5.2.0 からは、 TiddlyDesktop のエディターに画像ファイルをドラッグ＆ドロップしても同様です。
Importing Images
Use the import button (under the Tools tab in the sidebar), or drag and drop. See Importing Tiddlers for details.
インポート ボタン（サイドバーの [ツール] タブの下）を使用するか、ドラッグ アンド ドロップします。詳細については、「Tiddler のインポート」を参照してください。
Introduced in v5.2.0 You can also import images by dropping or pasting images into the tiddler editor.
v5.2.0 で導入されました。画像を tiddler エディターにドロップまたはペーストして画像をインポートすることもできます。
画像を Tiddler で表示するには [img[Tiddler タイトル]] などの構文を記述します。
Tiddler 編集画面の Insert Picture ボタンを押して画像を選択することで、その構文を自動的に挿入できます。
Images can be included in WikiText with the following syntax:
次の構文を使用して画像を WikiText に含めることができます。
[img[Motovun Jack.jpg]] [img[https://tiddlywiki.com/favicon.ico]]You can also insert image tiddlers from the editor toolbar. Click picture () and select a picture file.
エディターのツールバーから画像 tiddler を挿入することもできます。画像をクリックして画像ファイルを選択します。
If the image source is the title of an image tiddler then that tiddler is directly displayed. Otherwise it is interpreted as a URL and an HTML
<img>tag is generated with thesrcattribute containing the URL.画像ソースが画像 tiddler のタイトルである場合、その tiddler が直接表示されます。それ以外の場合は URL として解釈され、URL を含む src 属性を使用して HTML タグが生成されます。
Images: TiddlyWiki v5.3.8 — a non-linear personal web notebook と Google 翻訳
新規 Tiddler に画像をインポート
画像ファイルを TiddlyWiki に読み込むには、検索ボックスの下の Tools タブの import をクリックします。
import の左側のチェックボックスをチェックすると、検索ボックスの上側に import のボタンが追加されてインポートの操作が簡単になります。
※ v5.2.0 では後述するドラッグ＆ドロップでも簡単にインポートできます。
インポートする画像ファイルを選択します。
Import Tiddler が表示され、選択した画像ファイルをインポートするかを確認する画面が表示されます。
Title の画像ファイル名をクリックして展開すると、インポートする画像が表示されます。
インポートする場合は Import ボタンを押します。
インポートしない場合は Cancel ボタンを押します。
画像のファイル名と同じタイトルの Tiddler が作成されて、そこに画像が保存されました。
他の Tiddler で画像を表示
インポートした画像を他の Tiddler の文章内に表示します。
検索ボックスの上側の + アイコンの Create a new Tiddler ボタンを押して、 Tiddler を新規作成して、タイトルなどを編集します。
ツールボタン群の Insert Picture ボタンを押します。
TiddlyWiki にインポートした画像がリストに表示されるので選択すると、現在のカーソル位置にその画像を表示する文が挿入されます。
その画像を表示するための文が、現在のカーソル位置に追加されました。
※前述した [img[Tiddler タイトル]] の文が挿入されました。
画像を表示する文の他にも、テキストを入力して Tiddler の右上のチェック（✔）ボタンを押すと編集が確定します。
Tiddler を編集画面から切り替えると、入力したテキストと一緒に、選択した画像が表示されました。
ドラッグ＆ドロップで画像をインポート (v5.2.0 以降)
TiddlyWiki v5.2.0 以降は、 Tools タブの import を選択するかわりに、画像ファイルをアプリにドラッグ＆ドロップすることで、インポートの機能の呼び出しを簡単に行えます。
ドラッグ＆ドロップすると、先ほどファイル選択した後と同様の Import Tiddler が表示されるので、 Import ボタンでその画像をインポートします。
ドラッグ＆ドロップした画像ファイル名と同じタイトルの Tiddler が作成され、そこに画像が保存されました。
Import Tiddler はインポートが済んだら、右上の×ボタンで非表示にします。
先ほど画像を表示した Tiddler の右上の編集ボタン（Edit this tiddler）を押して、編集に切り替えます。
Insert Picture ツールボタンを押すと、ドラッグ＆ドロップした画像もリストに加わっているので、それを選択します。
Tiddler の右上のチェック（✔）ボタンを押して編集を確定すると、2 つの画像が１つの Tiddler に表示できました。
また、クリップボードに画像をコピーした状態で、アプリを選択して Ctrl + V キーで貼り付けても同様に import 機能を呼び出せます。
ファイルとして保存していないスクリーンショットなどは、コピー＆ペーストの方が簡単にインポートできます。
まとめ
- TiddlyWiki に画像をインポートするには、Tools タブ内の import 機能を使用します。
- import 機能は、画像ファイルをアプリにドラッグ＆ドロップ、画像をコピー＆ペーストすることでも呼び出せます。(v5.2.0以降)
- インポートした画像は、[img[タイトル]] などの文で、ほかの Tiddler 内に表示できます。
- Insert Picture ツールボタンを押して画像を選択することで簡単に img の文を挿入できます。
参照サイト Thank You!
- TiddlyWiki v5.3.8 — a non-linear personal web notebook
- Images: TiddlyWiki v5.3.8 — a non-linear personal web notebook
記事一覧 → Compota-Soft-Press
コメント