Asciidoctorの画像関連 Tips - imageで別ウインドウにリンクを表示する、とか

## 概要
asciidoctor で image 関連でメモしていることを共有します。
いくつかは、ぐぐってもさっとは出てこない気はするので。

画像に関しては VS-Code だと [PasteImage 拡張機能](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image) があるとペタペタと張りやすくなります。なお、デフォルトの画像ファイル名が英語圏向けになっていて気持ち悪いので、気になる人は [AsciiDoc 文書をVS-Codeの拡張機能でスクリーンショットを取り込む](https://qiita.com/syuuu/items/f36dc75372b30ce5a554)の記事を参考にしてください。

## Tips

### Asciidoctorのimageで別ウインドウにリンクを表示する

次のように書く。

```asciidoc
[#img-sunset] 
.A mountain sunset 
[link=https://www.flickr.com/photos/javh/5448336655,window=_blank] 
image::sunset-500x332.jpg[Sunset,300,200]
```

または

```asciidoc
[#img-sunset] 
.A mountain sunset
image::sunset-500x332.jpg[Sunset,300,200,link=https://www.flickr.com/photos/javh/5448336655,window=_blank]
```

**表示例**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/ac4a571c-9258-c232-6fc2-f28e70ce1d9c.png)

**補足**

以下の理由で、前者の方がおすすめです。

* 理由は一行を短くできる
* リンク先は画像そのものとは無関係のこともあるので情報として別々の行にあったほうが良い

また、`window` 属性は `link`属性に従属する関係にあって `windows` 属性は不要なら省略しても良いから `link=～,window=_blank` の書き方は自然です。
ただ、リンクは長くなりがちなので `window=_blank,link=～` としたほうが編集時の可読性は高くなります。

**応用例とか**
こんな風に使っています。

* メモした画像の参照元をリンクを張る
* 地理系のノートで地図画像に対して [OpenStreetMap](https://openstreetmap.jp/) の地図座標にリンクを張る

### 箇条書き中に画像を表示する

前者がブロック指定で、後者がインライン指定です。

```asciidoc
* block
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35,align=center]
+
image::https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35,align=right]
* inline +
image:https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]
image:https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[Tux,25,35]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/de9c3d23-3d28-1766-4b15-aeeac28a88ef.png)

**補足**

* ブロック指定だと align が使えます  
  箇条書き中だと center にしたいとかはあるかもしれません。

### title属性

実験したところ、こんな感じです。

|       | block image | inline image  |
|-------|-------------|---------------|
| title | 属性なし     | 属性を設定可能 |

#### インライン画像のtitleパラメーターの扱い
属性が設定可能なのはインライン画像なんで、そっちで有効になる書き方を貼ります。

```asciidoc
image:sunset-500x332.jpg[Sunset(alt),300,400,title="Sunset(title)"]
```

title 属性をつけると ToolTip でます(Google Chromeで確認)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/5ea0d30e-3b1b-2fb4-0318-c26d8ef1fa9d.png)

imgタグ的にはこんな感じです。

```html
<span class="image"><img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400" title="Sunset(title)"></span>
```

ちなみに次の書き方では title属性はつきません。段落名として解釈されるみたいです。

```asciidoc
[title="Sunset(title)"]
image:sunset-500x332.jpg[Sunset(alt),300,400]
```

```html
<div class="paragraph">
<div class="title">Sunset(title)</div>
<p><span class="image"><img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400"></span></p>
</div>
```

#### ブロック画像のtitleパラメーターの扱い
以下、同じように指定しても title属性は設定されません。

```
image::sunset-500x332.jpg[Sunset(alt),300,400,title="Sunset(title)"]
```

具体的には、こんな風に `imageblock` クラスのブロック中にテキストで表示されます。title属性があるとツールチップが出てくるんですが、その内容を表示しているからいらないという判断なのかもしれません。(見栄え上はそうなのですが、タグの意味的には違うので……ちょっとね。)

```html
<div class="imageblock">
<div class="content">
<img src="images/sunset-500x332.jpg" alt="Sunset(alt)" width="300" height="400">
</div>
<div class="title">Figure 2. Sunset(title)</div>
</div>
```


### download icon

```asciidoc
icon:download[link="https://rubygems.org/downloads/asciidoctor-1.5.2.gem"]
```

**表示例**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/40591e80-33ed-e7ab-63ed-bf515ab1432d.png)

### YouTube動画を埋め込む

```asciidoc
video::r18Gi8lSkfM[youtube, title="Fourier Transform, Fourier Series, and frequency spectrum", width=640, height=480]
```

**表示例**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/abfa3dc5-e56a-def4-a88d-e453c565c8ed.png)

### 音声を埋め込む
こんな感じです。
注意点としては `imagesdir` が音声ファイルにも適用されます。

```
audio::発音.mp3[options="controls"]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/9c151193-9579-9a1e-0bd3-81c8f68f454a.png)


## 参考

* [Images | Asciidoctor User Manual](https://asciidoctor.org/docs/user-manual/#images)