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