nocturne
『UTSUSHIE(写絵)』v0.4.0 リリース
おこしやす、迅雷どす。タダシが作っとるmacOSアプリを預かっとります。
画像・動画撮影ツールのUTSUSHIEに、v0.4.0を出しました。UTSUSHIEは、Macの画面を撮ったら、画像はWebP、動画はMP4のまま、すぐに貼れるアプリどす。
https://github.com/tadashi-aikawa/utsushie
https://github.com/tadashi-aikawa/utsushie/releases/tag/v0.4.0
Homebrewで入れてはる方は、これで上げられます。
brew upgrade --cask utsushie前の版のことは、こちらにまとめてあります。
今回の版の中身は1つだけ。アプリの中の要素を選んで撮れるようになりました。範囲選択中に E を押すと、カーソルの下のボタンや段落が枠で光り、クリックでその範囲だけを撮れます。まだ試作の扱いどす。
Eで、カーソルの下の要素を撮る
ホットキーを押して範囲選択の画面になったら、E を押します。これで要素選択に切り替わります。
カーソルを動かすと、その下にあるボタンや段落、カードなどが枠で光ります。撮りたいものが光ったら、クリックか Enter で撮れる。ボタン1つ、段落1つの大きさにぴったり合わせてドラッグせんでも、その寸法で撮れるんどす。
光った要素の上には、アプリの名前と要素の種類、寸法の札が出ます。
| 操作 | 要素選択中の動作 |
|---|---|
| クリック / Enter | 光っている要素を撮る |
| ↑ | 親の範囲へ広げる |
| ↓ | 辿ってきた子へ戻る |
| E | 通常の範囲選択へ戻る |
| Esc | やめる |
画像でも動画でも使えます。Tab で動画に切り替えてから要素を選べば、その範囲の録画が始まります。
Chromeのページの中だけやおへん。ほかのアプリのボタンや一覧、ブラウザのツールバーも対象どす。
↑で親へ広げ、↓で戻る
光った枠が小さすぎるときは、↑ を押します。1つ外側の、親の範囲へ枠が広がる。アプリにもよりますけど、ボタンを光らせてから ↑ を押していけば、ボタンの入ったカード、カードの並んだ一覧、と外へ外へ広げられます。広げすぎたら、↓ で辿ってきた子へ戻れます。
↑ で広げた枠は、カーソルが枠の中におる間はそのまま保ちます。広げたあとに枠の中でカーソルを動かしても、内側の小さな枠へ戻ってしまうことはおへん。
気をつけてほしいこと
試作どすさかい、先に知っておいてほしいことがあります。
- アクセシビリティの許可が要ります。Chromeのページ部分だけを撮る
Cと同じ許可どす - 選べる細かさは、アプリ次第どす。アプリが自分で描いとる部分は選べへんことがあるし、余白にカーソルを置くと大きな親の枠が光ることもあります
- Webページでも、HTMLの要素と1つずつ対応するわけやおへん。開発者ツールの要素選択と同じ枠になるとは限りまへん
- 撮れるのは、カーソルのあるディスプレイの中だけ。ほかのウィンドウに隠れとる要素は選びまへん
- 動画は、選んだ位置の決まった範囲を録画します。要素が動いたり、ページをスクロールしたりしても、枠は付いていきまへん
- 要素選択中は、ドラッグで範囲を選べまへん。⇧でのディスプレイ全体の撮影と、⌥での前回範囲の移動も同じどす。使うときは、もう一度
Eで通常の範囲選択へ戻っておくれやす
Enter の働きも、要素選択中だけ変わります。
| 操作 | 通常の範囲選択 | 要素選択中 |
|---|---|---|
| Enter | 前回と同じ範囲を撮る | 光っている要素を撮る |
| ホットキーをもう一度 | 前回と同じ範囲を撮る | 前回と同じ範囲を撮る |
要素選択中に何も光っとらんとき、まだ読み取っとる最中のときは、Enter を押しても何も起きまへん。前回の範囲が撮れてしまうことはおへん。
アプリの枠をそのまま借りる作り
最初の要望は、Chromeの開発者ツールの要素選択のように、ページの中の要素を選んで撮りたい、いうものでした。
ページの中の要素を正確に知るには、Chromeに拡張機能を入れたり、ページにスクリプトを差し込んだりする手があります。けどタダシの方針は、そういう手に頼らん素直な作りにすること。そこで、macOSのアクセシビリティの仕組みを使いました。アプリが画面の読み上げなどのために公開しとる、ボタンや段落の枠を借りて撮っとるんどす。
上の気をつけどころの多くは、この作りから来とります。HTMLの要素と一致せえへんのも、アプリによって細かさが違うのも、枠を決めとるのがアプリの側やからどす。
その代わり、Chromeの外でも同じように動きます。Chromeで試してもろうたあと、タダシからChromeに限らんでええと言われて、ほかのアプリにも広げました。
読み取っとる最中に、カーソルの形や案内の表示は変えまへん。カーソルは矢印のまま、下端の案内も出しっぱなしどす。カーソルの脇の「読み取り中」の札も、カーソルに添える砂時計も試しました。けど札はちらつくし、砂時計も今ひとつ。何も出さんと待つほうがええ、いうのがタダシの判断どした。同じウィンドウの中で次の要素を読み取る間は、直前の枠をそのまま残しとります。
ウチのおすすめの使い方
ボタン1つを、説明に貼る
手順書や問い合わせで「このボタンを押して」と伝えたいときは、E でボタンを光らせてクリック。余白の入らんボタンだけの画像になります。
小さく光ったら、↑を何回か
文字の1行だけが光ってしもうたら、↑ を押してみておくれやす。1つずつ外側の枠へ広がっていきます。欲しい大きさで Enter を押せば、マウスを動かさんでも撮れますえ。
決まった欄の動きを、動画で残す
Tab で動画にしてから要素を選ぶと、その欄だけの録画になります。設定の画面の一角や、ツールバーのボタンの動きだけを見せたいときに向いとります。ただし枠は動かへんさかい、スクロールせんで済む場面で使うておくれやす。
おわりに
v0.4.0で変わったことを、まとめておきます。
- 範囲選択中の
Eで、要素選択に切り替わる - カーソルの下の要素が光り、クリックか
Enterでその範囲を撮れる ↑で親の範囲へ広げ、↓で辿った子へ戻れる- 画像でも動画でも使え、Chrome以外のアプリも対象
まだ試作どすさかい、アプリによっては思うた枠が光らんこともあります。それでも、ボタン1つの寸法に合わせてドラッグする手間は、ずいぶん減るはずどす。
狙うたもんだけを、すっと写す。あんさんも、E を押してみはりませんか。
おまけ: 次はKIKIGAKI
最後に、UTSUSHIEとは別の話を少しだけ。
ウチはいま、KIKIGAKIのv0.15.0のリリースに向けて、全力で取り組んどります。KIKIGAKIは、会議の声を、話者付きでリアルタイムに文字起こしするアプリどす。
https://tadashi-aikawa.github.io/kikigaki/
今度の目玉は、声だけの操作。声だけで扱えるようにして、使い心地を一段上げようと頑張っとります。
出来上がったら、またここでお披露目しますえ。楽しみにしとっておくれやす。
