Presentation on how clipboard access can be done in VSCode Remote environment, using several techniques. Presented in VSCode Meetup.

1. VSCode Remoteでも、
画像コピペがしたいです！
@tyamadajp

2. まずは誰？
● ウェブインフラ関係のエンジニア
● 長年のEmacs+Vimユーザー
● ついにVSCodeに昨年乗り換え！

3. まずは誰？
● ウェブインフラ関係のエンジニア
● 長年のEmacs+Vimユーザー
● ついにVSCodeに昨年乗り換え！
VSCode + VSCodeVim (vimエミュ) +
Vimacs (vimエミュでemacsエミュ）という、
より業の深い環境になった！

4. 愛用の拡張: Markdown All in One + Paste Image

5. VSCode RemoteだとPaste Imageが動かない（涙
Markdown Pasteなど、他のペースト系拡張も全滅

6. なぜ動かない？
これら拡張もリモート実行になってしまう。
リモートの存在しないクリップボードからペーストしようと
しても動かない。

7. なんとかできないの？
調べてみました！

8. そもそも、これらの拡張は何をしてるの？
OSを判定して、クリップボードをダンプする個
別コマンドを実行してる。

9. なぜVSCodeのクリップボードAPI使わない？

10. なぜVSCodeのクリップボードAPI使わない？
要約：
・今はreadTextだけだよ
・Blink → Electron → VSCodeと
下の層から対応・アクセス可能
になれば、いずれ拡充するよ

11. じゃあClipboard#read/writeの対応状況は？
Chrome(Chromium/Blink)的にはv76からはいけてる

12. VSCodeが使っているElectron/Chromium Verは？
Chromium/Blinkレベルは
対応バージョン利用中。
なのでElectron →
VSCodeのとこで対応がさ
れればいける。
※ Electronは自前APIではフルサポートなので、 VSCodeがElectronの何を待っているのかはいまいち不明

13. 待つしかないのか・・・

14. 諦めたら、そこで
試合終了ですよ・・・？

15. 正門がダメなら裏口から
● VSCodeって埋め込めるWebViewあるよな
● WebViewからJavaScript API触れるよな
● それはRemote構成でもローカルで動いてる訳だよな
● そこからならWeb Clipboard API使えたりしないの？

16. やってみる

17. やってみる
ダメでした～（undefined）

18. うまくいかない
● Clipboard API は ”secure context” 専用で、その扱いになっ
てない？という議論があった
● ならば、とりあえず https なコンテンツを食わせて、その中なら
実行できるのか？
● ところがどっこい、VSCode WebViewはURLでのコンテンツ
ロードができない仕様

19. VSCode WebViewの仕様
● VSCode WebViewはJS有効なら本体側VSCode APIへのア
クセスができるという特徴がある
● これでURLロード（&そこからのナビゲーションが）可能だと下
手なサイトにアクセスした瞬間にPC乗っ取られる
● このため現状では縛ってある

20. 待つしかないのか・・・

21. まだだ！まだ終わらんよ！

22. おや、最近入った新機能: Local Terminal
要は、VSCode Remote 構成でも、タスクとターミナ
ルをローカルで実行したいという話
duplicate-closedではなく
派生issueとして生まれた

23. Local Terminalの使い方
これでは
開けない
こっちで
開く
コマンドパレットで作れるなら、APIから
作ることもできるよな・・・

24. 新たなプラン
● Local TerminalをAPIで開く
● それにコマンドを流し込んでやる
● ローカルのシェルが実行してくれる
● クリップボードをダンプする
● 勝利！

25. 甘すぎる考え
実行・画像ダンプできたとして、そのローカ
ルファイルにリモートで実行中の拡張がどう
やってアクセスするのか？
行きはいいけど帰りがないぞ問題

26. ログを見てて気付く: vscode-local: scheme
もしかしてRemoteからローカルファイルを開ける？
・・・開けた！帰り道が見つかった！

27. 完璧なプラン
● vscode-local: でスクショ生成コマンドを送り込む
● Local TerminalをAPIで開くか、前回作成のものを探す
● 送り込んでいたコマンドを実行
● 生成されたスクショを vscode-local: で持ってくる
● 持ってきたファイル名を編集中Markdownに埋め込む
● 勝利！

28. やった！動いた！
一気通貫ではない検証用の
書き捨てテストだけど、
期待通り動作！

29. いける、いけるが・・・
これで作れることは確定したが、ターミナルに
打ち込む方式が荒っぽい＆TypeScript的に
存在しない属性にアクセスしないといけなかったりで、ちょっと無
理くり感が高くてもにょる・・・

30. 新たな旅へ

31. VSCode再訪: UI extensionとWorkspace extension
Remote環境でもローカル側で動
くUI extensionを絡めたら、何かで
きないかな？

32. 転機となった耳寄り情報
Supporting Remote Development and Visual Studio Online
Remote Development Tips and Tricks

33. 転機となった耳寄り情報
Supporting Remote Development and Visual Studio Online
Remote Development Tips and Tricks
要約：
・特定の拡張をローカル固定で
実行できるよ
・拡張がAPI exportして連携する
方式はRPCにならずできないよ
・でも、コマンドの呼び出しでの
local-remoteで文字列リレーは可

34. 新たなプラン
● 拡張を２つ作る
○ スクショ取ってバイト列で返すコマンドだけの拡張
○ 前者のコマンドを呼び出し、戻り値を保存してMarkdownに
埋める拡張
● 前者はユーザーからは何もしない拡張に見えるけど、これを
強制ローカル実行してスクショの踏み台にする
・・・これでいけるか？

35. やってみた
拡張その１（ローカル側）
拡張その２（リモート側）

36. キタ見た動いた！
ローカル側のシェルと、ローカル側担当の
拡張が返した文字列がちゃんと戻ってきた！

37. キタ見た動いた！
いけそうだけど、シェルとかVSCodeが
うまくすり替えて見せてるだけでは疑惑が

38. 念のためチェック

39. 念のためチェック
プロセス実行しても、長大データでも、
Promiseでラップしても全部OK！

40. あとはつくるだけ

41. だが来てしまった締め切り日
実際の拡張までは間に合わず。ごめんなさい！

42. まとめ
● VSCode Remoteでも画像のコピペはできる！
● VSCodeのクリップボードAPIの拡充に期待！
● その正門がダメでも裏口はある
● 美しく締めたかったら、完成させよう（敗者の弁）
作ったら改めて Slack と #vscodejp に報告します～