20210214 » 履歴 » バージョン 2
バージョン 1 (健二 酒井, 2021/02/14 14:45) → バージョン 2/5 (健二 酒井, 2021/02/14 14:45)
# 20210214
実に半年ぶりぐらい。大体こんなことをやろうとしている
## 出発
Snipping ToolsはCtrl + C でキャプチャした画像をクリップボードに入れられる。
いちいちファイル保存を経由して、MarkdownEditorに貼るのは面倒なので
クリップボードに保管した画像をDATA URIスキームで貼り付けたいというひと手間省くためだけの願望を実現しようと色々調べてみた結果。
以下、記事のお品書き
1. Webとクリップボード
1. PowerShellとクリップボード
1. .NETのImageのbase64エンコーディング
### Webでのクリップボード
願望からやらなきゃいけないことは
- Clipboardのデータを読む
- 生データをbase64エンコードする
主に前者についてのお話。
今まで使っていたexecCommandはいつ削除されてもおかしくないらしい。なんということ。
という訳でクリップボードの正しい扱い方について情報収集していった。代替となりそうなW3C Clipboard APIだけどまだ草案段階でMDNのドキュメントも反映されきってないという素敵な状況。
まだ使えないなぁということで色々ぐぐってたら出てきたのがpaste.js： https://github.com/layerssss/paste.js 先人は偉大。
ソース眺めた感じ、Navigator.clipboardオブジェクトを基本的に使いつつ、Firefox対応の処理を入れている感じ。よさげ。pasteImageなるイベントも実装してくれてるし。
### PowerShellとクリップボード
さて、paste.jsで実装しようかなと思ったんだけど、「クリップボードの画像をbase64エンコードする」ってブラウザでやるべきことか？とか疑問が沸いてきたため、例えばPowerShellとか使う方法を考えてみる。
1. クリップボードから画像を読む
1. 読んだ画像をbase64エンコードする
1. base64文字列をクリップボードに入れる
とかそんな処理を書けばいいのかなと。ブラウザでやるとセキュリティとかメンドウクサイ。
とりあえず、使えそうなコマンドレットは以下二つ。
- Get-Clipboard
- Set-Clipboard
Set-Clipboardは今回見ない。
リファレンス（ https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1 ）によると-Formatオプションでテキストだの画像だの音声だのと指定できるらしい、が、PowerShell 7ではこのオプション削除されているらしいのは注意。Windows想定だからPowerShell 5.1で良いや。
コマンド結果：
```
PS Get-Clipboard -Format Image |sv image
PS $image.GetType()
IsPublic IsSerial Name BaseType
-------- -------- ---- --------
True True Bitmap System.Drawing.Image
```
なんかBitmapクラスとかいうよくわからんのが出来たので調べよう。後参考（ https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/ ）によるとリソースの開放とか気を付けたほうが良いみたい。まぁそうか。
## base64エンコーディング
なんか以前、System.Text.Encodingクラスとかからテキストをバイト列にしたことはあったな。そう確かPowerShell 5.1 でUTF-8で保存すると、ついてしまうBOMを外すためにやった。今回は画像なのでちょっと違うなぁ。
結局のところバイトストリームを得られればいいんじゃないかな。
ImageクラスのSaveMemoryStream(Stream,ImageFormat）でMemoryStreamに保存、バイト列化してConvertクラスでbase64エンコーディングとかでいけそうかなぁ。
## 参考
- https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand
- https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
- https://qiita.com/chelproc/items/9e0328e5d413afb52d0c
- https://github.com/layerssss/paste.js
- https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1
- https://win.just4fun.biz/?PowerShell/PowerShell%E3%81%A7Base64%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89
- https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/
- https://blog.beaglesoft.net/entry/2011/02/14/bitmap%25e3%2583%2595%25e3%2582%25a1%25e3%2582%25a4%25e3%2583%25ab%25e3%2582%2592base64%25e3%2581%25a7%25e3%2582%25a8%25e3%2583%25b3%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2587%25e3%2582%25a3%25e3%2583%25
実に半年ぶりぐらい。大体こんなことをやろうとしている
## 出発
Snipping ToolsはCtrl + C でキャプチャした画像をクリップボードに入れられる。
いちいちファイル保存を経由して、MarkdownEditorに貼るのは面倒なので
クリップボードに保管した画像をDATA URIスキームで貼り付けたいというひと手間省くためだけの願望を実現しようと色々調べてみた結果。
以下、記事のお品書き
1. Webとクリップボード
1. PowerShellとクリップボード
1. .NETのImageのbase64エンコーディング
### Webでのクリップボード
願望からやらなきゃいけないことは
- Clipboardのデータを読む
- 生データをbase64エンコードする
主に前者についてのお話。
今まで使っていたexecCommandはいつ削除されてもおかしくないらしい。なんということ。
という訳でクリップボードの正しい扱い方について情報収集していった。代替となりそうなW3C Clipboard APIだけどまだ草案段階でMDNのドキュメントも反映されきってないという素敵な状況。
まだ使えないなぁということで色々ぐぐってたら出てきたのがpaste.js： https://github.com/layerssss/paste.js 先人は偉大。
ソース眺めた感じ、Navigator.clipboardオブジェクトを基本的に使いつつ、Firefox対応の処理を入れている感じ。よさげ。pasteImageなるイベントも実装してくれてるし。
### PowerShellとクリップボード
さて、paste.jsで実装しようかなと思ったんだけど、「クリップボードの画像をbase64エンコードする」ってブラウザでやるべきことか？とか疑問が沸いてきたため、例えばPowerShellとか使う方法を考えてみる。
1. クリップボードから画像を読む
1. 読んだ画像をbase64エンコードする
1. base64文字列をクリップボードに入れる
とかそんな処理を書けばいいのかなと。ブラウザでやるとセキュリティとかメンドウクサイ。
とりあえず、使えそうなコマンドレットは以下二つ。
- Get-Clipboard
- Set-Clipboard
Set-Clipboardは今回見ない。
リファレンス（ https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1 ）によると-Formatオプションでテキストだの画像だの音声だのと指定できるらしい、が、PowerShell 7ではこのオプション削除されているらしいのは注意。Windows想定だからPowerShell 5.1で良いや。
コマンド結果：
```
PS Get-Clipboard -Format Image |sv image
PS $image.GetType()
IsPublic IsSerial Name BaseType
-------- -------- ---- --------
True True Bitmap System.Drawing.Image
```
なんかBitmapクラスとかいうよくわからんのが出来たので調べよう。後参考（ https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/ ）によるとリソースの開放とか気を付けたほうが良いみたい。まぁそうか。
## base64エンコーディング
なんか以前、System.Text.Encodingクラスとかからテキストをバイト列にしたことはあったな。そう確かPowerShell 5.1 でUTF-8で保存すると、ついてしまうBOMを外すためにやった。今回は画像なのでちょっと違うなぁ。
結局のところバイトストリームを得られればいいんじゃないかな。
ImageクラスのSaveMemoryStream(Stream,ImageFormat）でMemoryStreamに保存、バイト列化してConvertクラスでbase64エンコーディングとかでいけそうかなぁ。
## 参考
- https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand
- https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
- https://qiita.com/chelproc/items/9e0328e5d413afb52d0c
- https://github.com/layerssss/paste.js
- https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1
- https://win.just4fun.biz/?PowerShell/PowerShell%E3%81%A7Base64%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89
- https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/
- https://blog.beaglesoft.net/entry/2011/02/14/bitmap%25e3%2583%2595%25e3%2582%25a1%25e3%2582%25a4%25e3%2583%25ab%25e3%2582%2592base64%25e3%2581%25a7%25e3%2582%25a8%25e3%2583%25b3%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2587%25e3%2582%25a3%25e3%2583%25