自動勉強会 vol.6 コピペ回＆過去回振り返り
12/3(金) 20:00 - 22:00
コピペ回
話したい！ or 話を振ってOK
聞き専
Discordイベントの参加リンク
一旦ここでSeason1最終回としたいと思います。
また、GUIの忘年会ということで過去回の振り返りも余った時間で行いたいです。
クリップボードの世界
API的にはクリップボードAPIとドラッグドロップAPIは一部同じ(dataTransfer)を持ってる
こんなにサンプルあったのしらなかった…
たしか複数の形式のデータを入れておいて受け取る側がどれを使うか選択できたと思う
pasteイベントを使う vs 独自ショートカットで上書きする
空気を読んだペースト処理にするにはアプリごとに実装する必要があります
Paste機能を使うにはパーミッションを取らないといけないので少々使いやすさが落ちる。最初だけですが…
(脱線) Figma のPlugin上でClipboard APIがつかえなくてつらい
httpsじゃないと使えない
execCommand何が不便なんでしたっけ？
→遠回り。画像のコピーができない、非推奨...
よくある「このテキストをコピー」ボタンもClipboard API利用になっていく？
クリップボードAPI
日本語版は一覧性が低い罠
意外と（？）Firefoxの対応が悪い…これで採用諦めた記憶
SafariとChromeで画像コピーの方法が違ってよくわかってない...
SafariはPromiseじゃないと渡せないらしいです
逆にChromeはPromise受け取れなくて、両立できなかったです...
ChromiumプロジェクトにTODOコメントがあるのがなんとなく親近感 
tiktok事件
ドラッグドロップAPI
コピペの対象
テキストのコピペ
リッチテキストのコピペ
docとかにリッチテキストで貼り付けられて嬉しかった覚えがない..
ctrl+shift+vでプレーンテキストとして貼り付けがち（これはデファクトなショートカット？）
ConfluenceがCtrl + Shift + vを他の用途で使っていて腹立つ
逆にスタイルだけ貼り付けるショートカットが確かgoogle docにあった
ExcelなどOffice系が概ねサポートしていたような
Finderでファイルをコピー→別アプリにペーストした時になにが張り付くかは結構ハラハラ感ある
VSCodeだとツリー上ならファイル、コード上ならファイル名が貼り付けられる、とかだとおもう
リンク付きのテキストとか太字程度のものであれば時々うれしかった記憶があります
リッチテキストエディターだと編集している文章のなかで完結したコピペの場合、Ctrl + vでスタイルもコピーしてくれないと直感に反する挙動になりそう
<table>をExcelに貼り付けるとちゃんと表になるのは地味に嬉しいこともあった
意外とIEが優秀だった記憶
IDEのシンタックスハイライトを完璧にコピーしてくれればありがたいんですが、背景色が反転してたりしてつらい……
Google Docs 系でスタイルだけ貼り付けする別のショートカットキーがあった記憶
Markdownでコピペしたい
画像データのコピペ
レイヤー付きはどうする?
関連してGIF画像をコピーしたら最初の1フレーム目だけ貼り付けられたりしますよね
ちょっと昔のMac標準のPreview.appはウインドウ縮小してると表示サイズでしかコピーしてくれなくて、コピペしたらちっちゃくなってた..とかあった（今は治った）
リサイズに使う発想はなかったww
ベクターデータのコピペ
図形を連続して貼り付けたときに重ならないよういい感じにずらしていきたい
アプリ外からのデータはどこに貼り付ける?
そういえばイラレとかで同じ位置に貼り付けるショートカットもCmd + Shift + Vですね
ただの複製ではなく、図形間の参照関係をいい感じに引き継いだり引き継がなかったり
親と子が同時に複製されたら新親と新子、子だけ複製されたら元親と新子が親子関係とか
たしか親子の維持とかはUnityはやってくれますね
Figmaはコンポーネントとインスタンスを同時にコピーすると新しいコンポーネントが参照される
コピーするものの「内部」のもの同士はディープコピーしたいし、外部のものは元のものに繋げたままにしたい
プレーンテキストとか画像とか、むしろ簡単なほうなんですね
プリミティブなんですよあいつら……
RPGツクールみたいなツールとかどうしてるんだろう
イベント、マップエディタ、キャラクターetc...
「ナビつき！つくってわかるはじめてゲームプログラミング」のノードンをコピーしたときはどうなったかな...
SVGのコピペ
ラスターデータ (PNG) はブラウザAPIでもコピペしやすいけどSVGは扱いにくい
ChromeでのSVGコピペはBehind a flagっぽい https://chromestatus.com/feature/5125790490427392
MacではPDFでのコピペができた気がする
Sketch→Keynoteのコピペに便利だった
デザインツールとかが吐くPDFちょいちょい変なのが多いイメージ。。。
変なメタデータ持ってて持っていく先でレイアウトがずれる
でもAdobe Readerはいい感じに読み取るのでユーザーがこっちのバグ扱いしてきてつらい
つらそう
AppleとかAdobeさんそういうところ（独自でこっそり色々やる）あるよね……
アプリケーション内でしか意味のないデータのコピペ
例えば作曲ツールの音符の選択範囲とか？
標準形式のデータとアプリ独自の装飾情報とかを両方コピーするアプリは結構あるきがする
イラレとかは別アプリに切り替える瞬間に汎用形式にクリップボード内を書き換える、とかやってた気がする。大きいデータコピーしてるとアプリ切り替えにちょっとまごついたりする
なるほど！
内部用と共有用の2つクリップボード持ってる？とかかも
イラレ終了する時とか、汎用データ残すか聞いてくる
クリップボードの中身ってアプリケーション自体の実行よりも寿命が長いんですよねー
昔は巨大なデータクリップボートに残して終了するのはマナー違反、みたいな空気もあった気がする
どこまで入るんだろう...
Power Automateの、アクションをコピーする機能は、専用のJSONがコピーされるらしい
Power Automate上でコピーしたものしか貼り付けできないので、コピーしたJSONをよそで編集してまたコピーして貼り付ける、という使い方はできない。惜しい。
example.json{"id":"92d81720-0f4f-4367-85d4-cc0b-60d4ca1c","brandColor":"#8C6CFF","connectionReferences":{},"icon":"https://psuxjapan.azureedge.net/Content/Images/DesignerOperations/dataoperationedit.png","isTrigger":false,"operationName":"作成_4","operationDefinition":{"type":"Compose","inputs":"aaaa","runAfter":{"作成":["Succeeded"]}}} コピー元の命令: 
UE4のフォーラムでノードをコピーしてそのままUE4エディタに貼れるとかあった
ぱっとサイト出てこなかった...単にjsonをそのまま貼ってたとかかも
コピペだけでなくて、ノードエディタの実装が複雑GUIとしても完成度が高い
Webアプリ←→ネイティブアプリ間のコピペ
同時複数フォーマットのコピペ
例: Figmaでコピーするとテキストデータと独自データが両方コピーされる
TSVのコピペ
表計算らしきアプリだとそれっぽく対応することを求められがち
コピペの実例
Figmaはどうなってるか
HTMLにエンコードされたデータを埋め込んでるっぽい
属性値の中にコメント（<!-- -->）入ってるww
コメント使って別データ形式入れ子にする世界も深そうですよね
PDFにイラレが色々っこむのとか、JPEGのExifがTIFFコンテナでその中のサムネデータはまたJPEG形式...とか
自作デザインツールでも似たような仕組みを使用中
JSONをBase64にしてdata属性に詰めてる
document.execCommand('copy') でもclipboard apiでも動くのが便利
contentEditableにdata属性付きのspanを入れて、それを選択してコピペ
contentEditableにそんな使い道があるとは...すごい
ファイルのドロップ
ネイティブアプリだと、アプリ内のオブジェクトをエクスプローラ上にドロップするとファイルになったり、そのまま他のアプリ上にドロップしたりできることがあるけど、どうなっているか（Webアプリでも同様のことができるのか？）
これWPFで実装してみて概要把握しました。参考
1. ドラッグ開始時等にテンポラリファイルを作成しファイルパスを取得
2. DataObjectにFileDropを指定＆テンポラリファイルのパスを詰めてDoDragDrop
つまりエクスプローラーからの単純なファイルドロップと同じことがアプリ起点でできる
ようでした
単なるファイルドロップなので、当然WPF内からScrapboxに直接ドロップしてもアップロード可能でした。便利かもしれない
下でkeroxpさんが言及してるような逆方向のドラッグアンドドロップができればそれも便利そうです
検証２：ブラウザ→WPFへの画像ドロップ
文字列とHTMLの２種類のデータが取得できた。文字列の方はURL（リンクをドロップした場合はリンク先URLが取れる）
Bitmapとかは入っていなかったので、画像として欲しい場合はアプリ側でURLを自力でfetchしにいかないといけない気がする。あるいは、dataURLとして詰めるか。
ChromeではdataTransferにimage/*が設定できるのかも？「特権的なコード」と言われてるのが何かわからないが…
HTMLの方は謎の形式で取れてきた。HTML クリップボード形式というWindows独自の何からしい
とはいえ、これはChrome → Windows間のやり取りの話なのでWebApp勢は知らなくてもよさそう
基本的にはこれだけです。あとはアプリでなんとかする
WebApp -> Nativeの場合も、DragStartイベントのときにdataTransferにそういうデータを付与することであとはOSがなんとかしてくれるんじゃないでしょうか。こっちの方向ではあんまりやったことない…
クリップボードの永続化（テンプレート、カスタム図形、etc）
データのまとまりとして固めておいて他の箇所でも使いまわしたいという普遍的な要求
クリップボードの履歴管理アプリにテキストスニペット機能付いてたりしますね
とあるゲームのシナリオエディタでは対象を選択して右クリックから名前つけてテンプレートとして保存できたりした
裏でデータをJSON風のデータ形式でテキストファイルとしてDocumentに保存されてました
vimのレジスタみたいにクリップボードっぽい場所がたくさんあってたくさん保存できる
yankとクリップボードが別なの地味に嬉しいです
無名レジスタ
Linuxだとテキスト選択したものを中クリックで貼り付けられたりしますし、2つくらいは欲しいですよねー
emacsもテキストであればコマンドの出力だろうがなんだろうがファイルとして扱えますね
ファイルというかバッファか
過去回振り返り
ペイントツール回
Undo回
共同編集回
canvas回
アクセシビリティ回
今年作ったGUIのお焚き上げコーナー
Excel方眼紙のアレ
意外とコードスリムですごい
印刷においては本家Excelよりもストレスないのでは
自作パスエディタ
SVGベースのボーンアニメーションエディタ
開発中のReact用デザインツール
コピペも実装してます
Vueにもほしいですね（小声
ベジエ曲線と線分の交点を求めるやつ
Wasmを使った自作ラスタ系ペイントツール
選択変形の実装が終わった
お絵描きチャット(共同編集とUndo/Redoが出来るやつ)
普通にSVG+Vueしただけ
ActionScriptは今でもちょっとだけ仕事で使うけど...まあ色々辛い