添付ファイルの虫眼鏡アイコンが一覧画面にも欲しい（プリザンター）

:::note alert
###### _2024-07-15 追記：そのものずばりの解決策がありました_
_[プリザンターお悩み解決生配信「プリなま」](https://pleasanter.org/lp/pleanama) の [第 10 回 15:25 ⑤添付ファイルに貼り付けたPDFを編集画面上で表示できますか？（サンプル有り）](https://www.youtube.com/watch?v=GPl5n71Tlt4&t=925s) で、そのものずばりの解決策が紹介されていました……_
:::

プリザンターでは、添付ファイルのハイパーリンクをクリックするとファイルがダウンロードされますが、次の記事で紹介されている通り、ハイパーリンクの左横に表示されている虫眼鏡アイコンをクリックすると、ダウンロードではなくブラウザーで添付ファイルの内容を表示することができます。

https://qiita.com/hmine-implem/items/3603bee4773ac5509bd9#1%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF1%E5%9B%9E%E3%81%A7%E8%A6%8B%E3%82%8B%E6%96%B9%E6%B3%95

ただし、この虫眼鏡アイコンが表示されるのは編集画面のみで、一覧画面には表示されません（ハイパーリンクをクリックするとダウンロードされる）。

一覧画面からでもブラウザーで添付ファイルの内容を表示できるようにしたいと思い、試行錯誤してみました。[^1]

[^1]: 虫眼鏡アイコンを表示させる（編集画面と同じものを完全に再現する）ことが目的ではありません（一覧画面からブラウザーで添付ファイルの内容を表示することができるようになればよい）

……が、結論としては完全な解決には至っていません。

## 事前準備

* [テーブルを作成](https://pleasanter.org/manual/basic-operations-table) し、添付ファイル項目（添付ファイル A）を [編集画面に追加](https://pleasanter.org/manual/basic-operations-editor) しておく

## サーバスクリプトを使用して分類項目の値を変更する

サーバスクリプトで「行表示の前」の条件を指定すると、一覧画面に表示される内容を変更することができます。

https://pleasanter.hatenablog.jp/entry/20220301_server_script_grid_tips

当初は `model.AttachmentsA` の内容を書き換えればよいかと思いましたが、[添付ファイル項目は get のみで set ができない](https://pleasanter.org/manual/server-script-model) ようなので、分類項目を [一覧画面に追加](https://pleasanter.org/manual/basic-operations-grid) し、そちらをサーバスクリプトで操作することにします。

まず、「ビュー処理時」の条件を指定したサーバスクリプトを作成し、スクリプトとして次の内容を入力します（一覧画面に添付ファイル項目を追加している場合は不要）。

```javascript
try {
  view.AlwaysGetColumns.Add('AttachmentsA');
} catch (e) {
  context.Log(e.stack);
}
```

次に、「行表示の前」の条件を指定したサーバスクリプトを作成し、スクリプトとして次の内容を入力します。[^2]

[^2]: 編集画面の添付ファイル項目の（ファイル名の）ハイパーリンクが `/binaries/<添付ファイルの GUID>/download` となっており、虫眼鏡アイコンのハイパーリンクが `/binaries/<添付ファイルの GUID>/show` となっているようなので、後者の URL のハイパーリンクを一覧画面に表示できればよい

```javascript
try {
  obj = JSON.parse(model.AttachmentsA);
  model.ClassA = "/binaries/" + obj[0].Guid + "/show";
} catch (e) {
  context.Log(e.stack);
}
```

このままではハイパーリンクにならないので、編集画面に「分類項目 A」を追加して詳細設定を変更します。具体的には、[「アンカー」のチェックボックスをオンにし、「アンカー書式」に `{Value}` を入力](https://pleasanter.org/manual/table-management-anchor) します。

これにより、一覧画面の「分類項目 A」の列に表示されるハイパーリンクをクリックすると、ブラウザーで添付ファイルの内容が表示されるようになります。

なお、「アンカーを新しいタブで開く」のチェックボックスをオンにすると、`<a>` 要素に `target="_blank"` が設定されます。[^3]

[^3]: 虫眼鏡アイコンは同じタブで開くので、動作が選べるようになるのはうれしい。
_2024-07-15 追記：冒頭に追記した [プリなま第 10 回 15:25](https://www.youtube.com/watch?v=GPl5n71Tlt4&t=925s) で、新しいタブで開く方法も紹介されています_

### 問題点

<dl>
<dt>複数登録された添付ファイルに対応していない</dt>
<dd>分類項目にはひとつの URL しか設定できないので、ひとつの添付ファイル項目に複数のファイルを登録しても、複数ファイルのうちのひとつだけしか表示されない</dd>
<dt>分類項目に URL が表示される</dt>
<dd>分類項目の「アンカー」機能では、ハイパーリンクの文字列とリンク先 (URL) を別々に指定することができない。しかも、URL には GUID が含まれるので長い</dd>
</dl>

## カスタムデザインを使用する

プリザンターには「[カスタムデザイン](https://pleasanter.org/manual/table-management-use-grid-design)」という機能があります。本来は、一覧画面において、ひとつのセルに複数の項目を表示する場合に使用することが想定されているようですが、カスタムデザインではマークダウンが使用できる点に注目しました。

分類項目の詳細設定の「カスタムデザインを使用」のチェックボックスをオンにし、「カスタムデザイン」に次の内容を入力しておきます。

```markdown
[添付ファイル]([分類A])
```

これにより、一覧画面では先ほどのように URL は表示されず、`添付ファイル` という文字列にハイパーリンクが設定された形になります（ハイパーリンクをクリックするとブラウザーで添付ファイルの内容が表示される）。

### 問題点

<dl>
<dt>すべてのレコード（行）が同じ文字列になる</dt>
<dd>今回の例では全てのレコードが「添付ファイル」となる。絵文字（:page_facing_up: や :mag_right: など）にすれば（要件的に、することができれば）あまり問題にならない</dd>
<dt>複数登録された添付ファイルに対応していない</dt>
<dd>上述の通り</dd>
</dl>

## 結論

（標準機能で）添付ファイルの虫眼鏡アイコンが一覧画面にも欲しい。