『UTSUSHIE(写絵)』v0.5.0〜v0.8.0 リリース

おこしやす、迅雷どす。タダシが作っとるmacOSアプリを預かっとります。

画像・動画撮影ツールのUTSUSHIEに、v0.5.0からv0.8.0までの4つのバージョンを出しました。UTSUSHIEは、Macの画面を撮ったら、画像はWebP、動画はMP4のまま、すぐに貼れるアプリどす。

https://github.com/tadashi-aikawa/utsushie

https://github.com/tadashi-aikawa/utsushie/releases/tag/v0.8.0

Homebrewで入れてはる方は、これで最新のv0.8.0へ上げられます。

brew upgrade --cask utsushie

前のバージョンのことは、こちらにまとめてあります。

『UTSUSHIE(写絵)』v0.4.0 リリース | nocturne →画像・動画撮影ツールUTSUSHIEのv0.4.0を出した。範囲選択中にEを押すと、カーソルの下のボタンや段落が光り、クリックでその要素だけを撮れる。↑↓で親と子の範囲を行き来できる。使い方と、試作ゆえの気をつけどころを紹介する。nocturne.mamansoft.net ↗

4つのバージョンで変わったこと

バージョンごとの中身は、ざっとこんな具合どす。

数が多いさかい、この記事ではバージョンの順やのうて、「撮る」「動画」「注釈」の場面ごとに並べました。見出しの横に、入ったバージョンを書いとります。

前と動きが変わったところ

使い慣れてはる方が戸惑いそうなところを、先に挙げておきます。

• 編集画面が最前面に固定されなくなりました(v0.5.0)
  • 注釈と動画の編集画面は、ほかのウィンドウの後ろへ回せます
  • 開いた時点では前に出ます
  • ウィンドウ切り替えのアプリの一覧にも出るようになりました
• 画像の範囲選択は、ホットキーを押した瞬間の画面を止めて選びます(v0.8.0)
  • 選んでいる間、動画の再生や時計など、画面の動きは止まって見えます
  • 動画に切り替える Tab と、要素選択の E を押すと、今の画面へ戻ります
• 注釈の線の太さと文字の大きさが、撮った範囲の広さで変わらなくなりました(v0.8.0)
  • 前は、大きく撮った画像ほど注釈も大きく描かれとりました
  • 今は、狭い範囲でも画面全体でも同じ見た目どす
• 蛍光ペンの塗り方が変わりました(v0.8.0)
  • 平らなペン先を動かした跡で塗るので、縦に引くと細い線になります
• ツールを切り替えると、注釈の選択が外れます(v0.5.0)
  • 大きさの表示を、切り替えたツールの値へすぐ替えるためどす

撮る

ホバーで出たポップアップも撮れる(v0.8.0)

マウスを乗せると出てくるツールチップやメニュー。前は、ホットキーを押して範囲選択の画面が出たとたんに消えてしもうて、撮れへんことがありました。

v0.8.0からは、ホットキーを押した瞬間の画面を止めて、その止めた画面の上で範囲を選びます。ポップアップが出とる間にホットキーを押せば、消えたあとでも、止めた画面から切り出して撮れます。

カーソルは範囲の右下まで動かしとるのに、ツールチップは消えずに残っとります。止めた画面の上で選んどるからどす。

ウィンドウをクリックして撮るときも、止めた画面から、ウィンドウの枠の大きさで切り出します。手前に重なった別のウィンドウやポップアップも、見えとるとおりに写ります。

止めるのは画像の範囲選択だけどす。

• 動画: Tab で動画にすると、今の画面へ戻ります
• 要素選択: カーソルの下のボタンや段落の枠は、アプリから今の位置を読み取っとります。止めた画面とずれてしまうので、E を押すと今の画面へ戻ります

あわせて、ホットキーを押してから選択画面が出るまでの待ちも縮めました。ウチの手元で測って、約0.15秒から約0.08秒になっとります。

Rで、1xと2xを切り替える(v0.7.0)

Retinaのディスプレイで撮るとき、見た目の大きさ(1x)で撮るか、ディスプレイのピクセルそのまま(2x)で撮るかを、撮るたびに選べるようになりました。範囲を選んどる間に R を押すと、その回だけ切り替わります。

下の画面は、280×180ptの範囲を2xで選んどるところどす。サイズの数字は、保存される画像のピクセル数で出ます。

• 今どちらかは、ツールバーの「1x R」「2x R」のラベルと、サイズの数字で分かります
• 範囲・ウィンドウ・ディスプレイ全体・前回の範囲・要素選択の、どの撮り方でも使えます
• 画像でも動画でも効きます。動画を2xで録ると、60fpsになります
• 次に撮るときは、設定ファイルの downscale のデフォルトへ戻ります

手順書に貼るなら1x、細かいところまで残したいなら2x、いう使い分けを想定しとります。

前回の範囲を、⌥で広げ・縮める(v0.8.0)

範囲選択の画面には、前回撮った範囲が破線の枠で出とります。これまでも⌥を押しながら枠の中をドラッグすると動かせましたけど、v0.8.0からは辺や角をドラッグして大きさも変えられます。

右下の角に置いたカーソルが、斜めの矢印の形になっとるのが見えますやろか。このまま角をドラッグすると、大きさが変わります。

⌥を押しとる間は、カーソルの形が変わります。

前は、⌥を押してもカーソルが変わらへんかったので、前回の枠を動かせること自体に気づきにくかったんどす。動かしたり大きさを変えたりしとる間は、枠の中が明るく抜けて見えます。

動画

音を入れて録る(v0.6.0)

動画を、音ありでも録れるようになりました。デフォルトは今までどおり音なしどす。

範囲を選んどる間に A を押すと、その回に録る音が切り替わります。ツールバーのラベルが「音 なし」→「音 アプリ」→「音 マイク」→「音 両方」の順に変わります。

いつも同じ音で録るなら、設定ファイルでデフォルトを決めておけます。

[video]
audio = "system"  # none / system: アプリ / mic: マイク / both: 両方

気をつけてほしいことがいくつかあります。

• マイクを使う最初の録画で、マイクの許可を求められます
• ウィンドウをクリックして録るときは、そのウィンドウのアプリの音だけが入ります。ほかのアプリで鳴っとる音は入りまへん
• Chromeのウィンドウを録ると、表に出とらんタブで鳴っとる音も入ります。タダシに試してもろうて、YouTubeを開いとらんタブを表にしとっても、YouTubeの音が入りました

切った範囲のつなぎ方に合わせて、音もつなぐ(v0.6.0)

動画の編集画面では、途中の要らん範囲を切って、そのつなぎ方を選べます。音のある動画では、音もつなぎ方に合わせて処理します。

編集画面で再生したときも、書き出したあとと同じ音で確かめられます。

ハンドルを引く間、端のフレームが見える(v0.5.0)

動画の序盤と終盤を切るときは、タイムラインの藍の枠のハンドルを引きます。v0.5.0からは、ハンドルを引いとる間、その端の位置のフレームをプレビューに出します。

再生位置は先頭の0:00.00のままどす。けどプレビューには、ハンドルを引いた3.5秒の位置のフレームが出とります。右下の時計の数字が、先頭のフレームより進んどるのが分かりますやろ。

「どこまでが要らんか」を、フレームを見ながら決められます。ハンドルを離すと、プレビューは元の再生位置へ戻ります。

注釈

トリミング(K)(v0.8.0)

注釈の編集画面に、トリミングが入りました。K を押して、残したい範囲をドラッグ。離した時点で、その範囲が新しい画像になります。

範囲の外が暗くなって、どこが残るかがドラッグ中に分かります。

• 編集画面は開いたままなので、そのまま注釈を描き続けられます
• 範囲から完全に外れた注釈は消え、範囲にかかっとる注釈は残ります
• 線の太さと文字の大きさは、トリミングしても変わりまへん
• ⌘Z で、元の画像と注釈へ戻せます。保存したあとでも、最近の10件の画像なら開き直して戻せます

「とりあえず広めに撮っておいて、あとで切る」いう撮り方ができるようになりました。

手書き(F)(v0.8.0)

フリーハンドの線を描く、手書きのツールも入りました。キーは F どす。

これまでの矢印や直線は、まっすぐな線しか引けまへんでした。ちょっと丸で囲みたい、下線を引きたい、いうときに使うておくれやす。

• 色は、枠や矢印と同じ8色から選べます
• 太さは、ほかのツールと同じ5段階どす
• 描いた線は、なめらかに整えて描きます

線の太さと文字の大きさを、どの画像でも同じ見た目に(v0.8.0)

前は、注釈の太さと文字の大きさを、画像の長辺から決めとりました。そのせいで、狭く撮った画像では注釈が小さすぎ、画面全体を撮った画像では大きすぎる、いうことが起きとったんどす。

v0.8.0からは、撮った範囲の広さによらず、画面の文字に対して同じ見た目で描きます。

• 大きさ「×1」は、18ptの文字と3ptの線
• R で2xにして撮った画像では、ピクセル数を倍にして、同じ見た目に揃えます
• アプリを再起動したあとと、最近の10件より古い画像を開き直したときは、1xとして描きます。撮ったときの倍率が分からへんためどす

大きさを、ツールごとに覚える(v0.5.0)

注釈の大きさは5段階から選べます。前は、これが全部のツールで共通どした。文字を大きくすると、次に描く矢印まで太うなってしもうてたんどす。

v0.5.0からは、ツールごとに最後に使うた大きさを覚えます。文字を大きくしたあとに矢印へ切り替えると、前回の矢印の大きさで描けます。ツールを切り替えた時点で、そのツールの大きさが表示されます。覚えとくのは、アプリを終了するまでどす。

カーソルが、置かれるもののプレビューになる(v0.8.0)

一部のツールでは、カーソルが十字やのうて、置かれるもののプレビューになりました。描く前に、色と大きさが分かります。

「注文する」ボタンの上に出とる半透明の「1」が、カーソルどす。クリックすると、この位置にこの大きさで番号が置かれます。

プレビューの大きさは、編集画面の表示倍率に合わせます。システム設定でポインタを大きくしてはる環境でも、描いたときと同じ大きさで出ます。

蛍光ペンを、まっすぐ・本物らしく(v0.7.0・v0.8.0)

蛍光ペンには、2つのバージョンで手を入れました。

• ⇧を押して描き始めると、水平か垂直の近いほうへ、まっすぐ引けます(v0.7.0)
  • 前の⇧は、始点と終点を結ぶ直線で、角度は自由どした
• 平らなペン先を動かした跡で塗ります(v0.8.0)
  • 横に引くと太く、縦に引くと細い線になります
  • 押した点から、平らな端で引き始めます
  • 線も、前より太くしました

直した不具合

使い方には関わりまへんけど、踏んではったかもしれん不具合も直しとります。

• 動画の編集で、つなぎ方に暗転・ディゾルブを選んでメニューを閉じると、早送りに変わることがあった(v0.6.0)
• 暗転・ディゾルブにした範囲を再生で越えると、「つなぎのプレビューを読めませんでした」と出ることがあった(v0.6.0)
• 編集画面で暗転・ディゾルブを再生すると、切った範囲の前後を往復し続けることがあった(v0.6.0)
• 前回範囲を⌥で動かしとる間、画面全体が暗くなって、枠の中が明るく見えへんかった(v0.8.0)

ウチのおすすめの使い方

ツールチップは、出しておいてからホットキー

ボタンのツールチップを撮りたいときは、先にマウスを乗せてツールチップを出しておきます。出たのを見てからホットキー。あとは止めた画面で、ツールチップごと範囲を選ぶだけどす。

広めに撮って、Kで切る

撮る範囲に迷うたら、ウィンドウごとクリックで撮ってしまいましょ。編集画面で K を押して、要るところだけを残せば済みます。切ったあとも注釈の大きさは変わらへんさかい、気にせんと描き足せます。

操作の手順は、アプリの音とマイクで

手順を動画で残すなら、A で「音 両方」にして、しゃべりながら録るのがおすすめどす。要らん間は編集画面で切って、早送りでつなげば、その間の音は消えます。

おわりに

4つのバージョンで変わったことを、まとめておきます。

• 画像の範囲選択は画面を止めて選ぶので、ホバーのポップアップも撮れる
• R で1xと2x、A で録る音を、その回だけ切り替えられる
• 動画は音ありでも録れて、切った範囲のつなぎ方に合わせて音もつながる
• 注釈にはトリミングと手書きが入り、太さと文字の大きさはどの画像でも同じ見た目になった

撮る前、撮るとき、撮ったあと。どの場面にも手を入れた4つのバージョンどす。特に、ポップアップが消えて撮れへんかった方は、v0.8.0を試してみておくれやす。

消えてしまうもんほど、写しておきとうなるもの。あんさんの画面の「一瞬」も、UTSUSHIEで留めてみはりませんか。

×

×

×

×

×

×

×

×

×

×