ステップ記録ツールで保存したmhtからスクリーンショットを取り出したい。
ステップ記録ツールとその問題。
ステップ記録ツールを使えば、マウス入力した瞬間の画面を自動で録画して作業ログを作ってくれるのでした。
ステップ記録ツールには弱点もあって、保存したスクリーンショットを画像ファイルとして抽出する作業が煩雑なのでした。
今回のステップ記録ツールから画像を取り出す方法について調べたいと思います。
通常の取り出し方法。
ステップ記録ツールは ZIP 形式で保存します。
この中には拡張子 mht の mhtml 形式ファイルが入っています。
まずは展開して取り出します。
このファイルはインターネットエクスプローラーなどで開くことができます。
クリックすればそのまま閲覧できるはずです。
スクリーンショット確認するにはReview the recorded steps as a slide show クリックします。
欲しい画像をpreviousまたはnextで 選んだら、画像をクリックして表示します。
URL には拡張子 JPEG ファイルとして表示されているのを確認できます。
歯車アイコンの設定メニューからファイルの下の名前をつけて保存を選択します。
PNG ファイルにエクスポートされました。
この手順を繰り返せば1枚ずつ画像を取り出すことができます。
手順が煩雑すぎて普通にスクリーンショット繰り返した方が簡単ですね。
ツールで画像を取り出す。
2020年7月に確認したところ、該当ドメインでセキュリティリスクが発生しているということで Google から警告が発せられています。
下記のツールを利用しない方が良いでしょう。
そんな迷える子羊の為に mht ファイルを読み込んで画像だけを抽出するツールがあります。
全部英語ですが負けないで頑張ってください。
Download Current Version: 1.0の辺りのダウンロードするリンクがあります。
rar 形式のファイルで配布されているので、 Windows ではそのまま展開できないと思います。
Windows ユーザーには馴染みがないだけで一般的な圧縮形式なのでいくつもの解凍ツールがあります。
お好きなものを利用して解凍してください。
例えば7- ZIP などで展開できます。
https://sevenzip.osdn.jp/sevenzip.osdn.jp
展開すると次のようなファイル等を取り出すことができるはずです。
この中のextractMHT.exeがツールの実行ファイルです。
このツールを使う前にステップ記録ツールで保存した ZIP ファイルを展開してmht ファイルを取り出しておいてくださいね。
extractMHT.exeファイルを実行してみてください。
次のような画面が表示されるので mht ファイルと画像の保存先を指定します。
出力先のフォルダに JPEG 形式で画像が取り出されていることを確認できます。
注意喚起終わり。
おまけ。
画像取り出しツールを探すのに苦労しました。
日本語で検索した場合の最善の策は次のページからダウンロードできるスクリプトでした。
ただこちらの powershell スクリプトは実行しようとするとセキュリティの問題でエラーになります。
セキュリティポリシーを変更すれば実行は可能です。
検証することもできました。
ただし作業には一定のスキルを要求されるので非常に使いづらいです。
そこで英語で検索してみました。
やはり似たような技術者向けのコマンド操作による手法でした。
関連するキーワードでextractmhtが提案されていたのでクリックしました
www.google.com
一般ユーザ向けのツールが引っかかりました。
諦めずに検索する習慣をつけておくと自分を助けてくれます。
操作手順のスクリーンショットを手軽にとりたい。
Windows 上の作業手順を記録するためにスクリーンショットを何枚も撮ることがありますよね。
例えばテスト結果の記録だったり、ブログ記事で解説に利用したりなどです。
そのために以前はプリントスクリーンキーによるスクリーンショットとクリップボード監視で画像を保存するツールを導入したりしました。
これで十分なケースもあるのですが、作業手順が増えてくると撮影漏れがあるなど手順を再現できなくなることもあります。
そこで、より密度の高い手順記録ツールとしてステップ記録ツールを導入してみたいと思います。
ステップ記録ツールとは。
ステップ記録ツールは Windows に標準搭載されているソフトウェアで、 元々は Windows ユーザーがトラブルに遭遇して困った時にリモートからログを見ながらサポートするために用意されたもののようです。
マウスで操作した時の画面を一つのファイルにまとめて保存できるので、それをメールで送ってもらって、サポート担当が画面を見ながら支援するんですね。
いくつかの弱点もありますが、とても強力な機能なのでうまく使えばあなたの作業を助けてくれるかと思います。
詳しくは下記のサイトを参照してみてください。
https://support.microsoft.com/ja-jp/help/22878/windows-10-record-stepssupport.microsoft.com
qiita.com
使ってみる。
Windows 標準搭載なのでスタートメニューから起動できます。
Windows アクセサリの中にステップ記録ツールを見つけることができると思います。
実行ファイル名は psr.exeです。
短いファイル名なのでファイル名を指定して実行(Win+R)した方が楽かもしれません。
起動するとこんな画面が表示されます。
記録を開始ボタンをクリックすると ステップ記録が始まります。
以降はマウスクリックするたびにクリックされたポイントが赤く点滅すると思います。
その瞬間に撮影は行われます。
記録を停止ボタンをクリックするまでステップ記録は続きます。
停止したらファイル名を決定して保存してください。ファイルは ZIP 形式で保存されます。
一時停止ボタンで記録を一定の間停止することができます。キーボードでコマンドを入力する際などには一時停止した方が見やすい作業記録が作れるかと思います。
記録は保存された ZIP ファイルの中の mhtml 形式のファイルをクリックすれば閲覧できます。
評価する。
ストロングポイント。
- マウスクリックした瞬間の画面を必ず撮影するので作業手順漏れがありません。
- 手順通りに再生されるので作業の前後関係が明確です。
- ペイントツールなどを併用しなくて済むので作業手順が簡単になります。
- クリックした瞬間の画面なので、ポップアップメニューなどクリックしたら消えてしまう性質のウィンドウを撮影できます。
- Windows 標準搭載です。
- 操作されたウィンドウをハイライトしてくれます。
- 画面だけでなくクリックした場所とウィンドウをテキストの情報でも保存します。
ウィークポイント。
- 全画面を撮影してしまいます。ALTと組み合わせれば必要なウインドウだけを撮ることができますが、常に全画面の撮影となります。ブログに使う場合などでは特に 問題になるかもしれません。画面には掲載したくない情報も含まれるでしょうから。画面の必要な部分を切り出す作業がどの程度の割合で発生するかにもよりますね。
- 撮影できる枚数に上限があります。defaultでは25枚までしか撮影できません。
- 操作されたウインドウの枠線が表示されてしまいます。トレードオフではありますが邪魔なこともあります。
- 画像だけを取り出すことが難しいです。メール送信のしやすさを考慮して、作業記録は一つのファイルに保存されます。撮影したスクリーンショットはそのまま開くことができません。ブログ記事など画面を一枚ずつ掲載したい時などは使いづらさがあります。画面だけを取り出すツールもありますが、どうしても一手間かかってしまいます。
追記。
画像を一気に取り出す方法まとめてみました。
yasushiito.hatenablog.com
まとめ。
ファイルから画像を取り出す手間を除けば手軽ですね。
撮影枚数が多いほど導入の効果を実感できると思います。
記録ファイルからスクリーンショットだけを抽出するツールについては今後詳しく紹介したいと思います。
私にとって助かるのは撮影の瞬間にポップアップが閉じないことですね。
直接キーボードを叩けば起きない事象ではありますが、私のようにマウスでプリントスクリーンボタンを操作している人にとっては深刻な問題なのでした。
電子書籍を試そうとして早速はまった。
Amazon ギフト券をもらった。
先日ひょんなことから Amazon ギフト券を手に入れまして。
めったにない自分が自由に使える臨時収入ということで使用用途をよくよく考えた結果、新しい体験をするのがよろしかろうということになりました。
それで今までなんとなく敬遠してきた電子書籍なるものに挑戦してみようと。
ギフト券から Amazon ポイントをゲットする。
まずは Amazon ギフト券コードからポイントを獲得する作業です。
実はギフト券も初めてなのでよくわからん。
とりあえずスクラッチをめくってみれば英数字の羅列が出るだろうからそれをどこかに入力するんですよね。
老眼が入ってきたのでギフト券コードを読む作業くらいしか引っかかるところはありませんでした。そこら辺は調べるまでもなかったですけど、参照しておきます。
www.amazon.co.jp
アカウントサービスから Amazon ギフト券(残高の確認ギフト券の登録)のメニューから残高を確認しつつ[ギフト券を登録する]ボタンでスクラッチの下のギフト券コード入力をします。
Kindle Reader を手に入れる。
次にビューワーを入手します。
Windows PC 版の Kindle リーダーは無料でダウンロードできます。
コメント欄が荒れていて導入に躊躇しそうになりますが、 試すのはタダです。
カートに入れてレジに進むのは緊張しますけど、支払いは発生しないので安心してください。
購入すると Amazon からメールが届きます。
メールにはダウンロードページへの URL が記載されています。
URL をクリックするとWindows PC 版のインストールプログラムがダウンロードできます。
このプログラムを実行すればインストールは完了です。
購入前ならライブラリには一冊の本も表示されていないかと思います。
購入手続きをした結果、ここに本の表紙がリストアップされていれば購入を確認できたことになります。
Kindle 本を購入してみる。
閲覧環境が整ったら書籍を購入してみます。
購入目前となると何を買っていいかわからなくなる。
適当な本をクリックして商品詳細ページを見てみると、普段は存在するカートに入れるボタンが見当たりません。
表示されているのはワンクリックで今すぐ買うボタンだけ。
商品価格には Kindle 版\0と表示されているのに、購入ボタンの近くには Kindle 価格\900とか表示されてるし。
どちらが本当の価格なのか。
無料になる理屈が分からないし。
無料サンプル送信ボタン、読み放題で読む本ボタンまであってどれをクリックするとどうなるのかさっぱりわからん。
とりあえずカートに突っ込めば正確な商品価格が分かるはずなんですけどボタンがないのはトラップすぎる。
きっとワンクリックで今すぐ買うをクリックしたら一発で支払っちゃうんだよね?
ギフト券が適用されるのか確認の取りようがないのでクリックが躊躇われます。
しょうがないので買っても良さそうな Kindle 本をワンクリック購入してみました。
予想通りクリック一発で決済されました。
しかもギフト券が適用されてないようだし。
先に調べればいいのにね。
Kindle 本も Amazon ギフト券のポイントで購入できる。
結局わかったのはワンクリックで購入するボタンは Amazon ポイントを適用せずに決済するから Amazon ギフト券で Kindle 本を購入するのは無理ということです。
でもそんな不親切なサービスもありませんよね?
必ず何らかの形で適用できるはずです。
そこで遅まきながら調べてみます。
やっぱりそういうことですね。
ワンクリック購入の設定なんてものがあるんだ。
アカウントメニューの設定がたくさんありすぎるので見つける努力もしませんでした。
確かにヘルプにもやり方はきっちり書いてあります。
ワンクリック購入はミスクリックを考えると怖すぎるので機能を無効にしておきましょう。
視線入力など利用する人にとってはクリックミスは避けられないものと考えるべきです。
商品紹介ページには5冊まとめて買うとかいう恐ろしいボタンもありますね。
こいつを一発で発注してしまったら目も当てられません(視線入力だけに)。
さて、ワンクリック購入を完全に無効にしましたが、ワンクリックボタンがなくなってカートに入れるボタンになるわけではないようです。
おそらくワンクリック購入ボタンで確認ページに遷移してワンストップ購入になっているのだと思います。
しかし、本当に無効になっていることを確認するにはワンクリック購入ボタンをクリックしなければなりません。
もし機能停止できてなかったら、そのまま購入してしまうことになりますね。
失敗して購入しても後悔しない本を見つけられない限りは確証は持てないなあ。
書籍のページをめくれない体ですから読書は一生できないものと諦めていましたが、新しい体験でできることが増えたので良かったです。
【AutoHotkey】Github 上のファイルをブログ記事に貼り付ける作業を自動化したい。
先日の作業ではてなブログにGitHubのコードを埋め込むことを成功しました。
gistとは違うので埋め込みコードの生成はGitHubのご本尊やはてなブログが提供してはくれません。
埋め込み用タグスクリプトは自分で生成しなければならないのでした。
そこでリンクを挿入する作業と同じように自動化するスクリプトを作成してみました。
コメント行にもありますが、 編集ページを開いたタブでソースコードを埋め込みたい場所に入力ポインターを設定し、 github 上のファイルを開いたタブをアクティブにした状態で起動することで、タグを生成しながら貼り付けてくれます。
作業の半分は人間がやるので大した自動化になっていません。
私にとってはマウスクリック5回ショートカットできるだけでも儲けものといった性質のものだとお考えください。
ホットキーはリンク挿入シリーズ考えて Win + Ctrl +=に決定しました。
まずはホットキーを使わずに直接起動するスクリプトです。
そしてこちらがタグを生成して貼り付けるスクリプトです。
この記事に登場するAutohotkey スクリプトについて
この記事の中で私が作成したプログラムは、全て自由に使うことができます。
詳しくはこちら。
はてなブログにGitHubのコードを埋め込みたい。
やっとのことでGitHubで管理できる形になりました。
問題が解決すればまた別の問題がやってくるのが世の常です。
ブログ記事を書く際に記事にコードを埋め込む機会がたくさんあるのですが、プログラムを切ったり貼ったりする作業がとても面倒くさい。
ファイルがネット上に存在するのだから、うまいこと取得して埋め込んでくれてもバチは当たらないのに。
多分そんな機能が既にあると思うので調べてみます。
www.google.com
検索ワードが適切か否かは別として、役に立ちそうなページがいくつも紹介されています。
gistですか。
はてなブログに埋め込み機能があるのは便利ですが、リポジトリのファイルとgistは別の扱いなんですよね。
せっかくなので試しに埋め込んでみますか。
まずはGitHubからファイルをアップロードします。gist.github.com
用意できてますね。
次にはてなブログで新しい記事を準備します。
ブログ編集画面は右側にボタンが縦に並んでいると思います。
画像貼り付けたりタグを選んだりするボタンの下の方にプラスボタンがあります。
クリックすると利用可能なアイテムのリストが表示されます。
その中にgistの貼り付けがありますので、そこでGitHubのアカウントと関連付けてください。
GitHubのアイコンのボタンが表示されるので、クリックして投稿したファイルを選べばプログラムを埋め込むことができます。
シンタックスハイライトされているし読みやすいですね。
出力結果には満足していますがリポジトリにプッシュしたファイルを直接参照できないので労力の削減にも貢献してくれないですね。
こちらに同じ不満を持ったかたの解決記事がありました。
tomokiit.hatenablog.jp
埋め込みサービスを運用してくださっている方々がいらっしゃるということで良いのかな?
次のページの説明にある通り、ファイルの URL から埋め込み用のタグを自力で生成して表示してもらうんですね。
gist-it.appspot.com
ここは試しに貼り付けてみます。
2020年5月17日追記。
このブログを https 化したために動かなくなってました。
環境に応じて選択してください。
追記終わり。
問題ないですね。
野良サービスだと 何かの拍子に閉鎖するリスクがあります。
ある日突然埋め込んだソースコードの全てがバツ表示されて役立たずになってしまうかもしれないと考えると二の足を踏んでしまいますが…。
英語情報も含めて追加で検索してみましたところ、やはりこれを紹介していました。割と広く利用されていると考えてもいいのかな。
GitHub本体が対応してくれればベストなのですが。
これでリポジトリで管理されているプロジェクトのファイルを日記で参照しながら説明できるようになりました。
その際の注意点が一つ。
参照するファイルをマスターブランチにしてしまうと度重なる修正によって記事の内容と一致しなくなる恐れもあります。
これは留意しておく必要があるでしょう。
【AutoHotkey】私が使っているスクリプトをダウンロードできるようになりました。
スキルが上がるにつれ関数ライブラリを使うなどファイル分割が激しくなってきました。
開発効率は上がってきましたが、たくさんのファイルを扱うために、ブログ上で配布するコストが上がってきました。
もちろん受け取る読者もファイルをいくつの保存しなければならないので面倒かつ失敗も多いことになります。
そこでGitHubのリポジトリを作って公開&配布することにしました。
リポジトリはこちらです。
とはいえ、ほとんどの方にとってリポジトリってなんじゃらほい。
GitHubってなんじゃらほい。
英語じゃ。
全部英語なんて無理じゃん。
でしょうから、よくわからん人はボタンからジップファイルをダウンロードしてください。
画像のようにページ右端にある緑色のClone or downloadボタンをクリックしてDownload ZIP をクリックすれば必要なファイルが全て手に入るはずです。
my documentの下にでも置いてください。
full.ahkファイルを実行すれば日常的に利用しているホットキーのすべてを利用できるようになります。
初めて利用する時はタスクトレイアイコンから右クリックしてconfigで設定画面を開いて必要なパラメータを入力してください。
そして必ず再起動させてください。
callで始まるファイルは一つの機能を実行するためのファイルです。
ショートカットキーの組み合わせを覚えるのがしんどい方はこれを利用してください。
名前を変えたりショートカットを作成して覚えやすい名前を付ければマウスワンクリックで呼び出すことができます。
Github リポジトリにローカルのプロジェクトプッシュする。
GitHubリポジトリとは以前に何度もプッシュしているのですが、ローカルに作成した新しいプロジェクトをGitHubのリポジトリに最初にプッシュする方法をいつも忘れてしまうのでそろそろメモします。
最初にプッシュする方法って、GitHubのリポジトリを作ったら表示されるやん。
これこれ。
git remote add origin git@github.com:yasushiito/mynewrepo.git git push -u origin master
しかしこのまま入力するとプッシュ段階でこうなるんですね。
PS C:\Users\yas\Documents\prj> git push -u origin master git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.
エラーメッセージでググってもなかなかヒットしませんけど、解決方法は次の記事にある通りです。
リポジトリの場所を https 形式で指定するんですね。
GitHubが推奨してくれた形式は SSH を利用する場合ですね。
そういえば SSH ってものがあったんだった。
PS C:\Users\yas\Documents\prj> git remote add origin https://github.com/yasushiito/mynewrepo.git PS C:\Users\yas\Documents\prj> git push origin master Enumerating objects: 28, done. Counting objects: 100% (28/28), done. Delta compression using up to 8 threads Compressing objects: 100% (21/21), done. Writing objects: 100% (28/28), 7.75 KiB | 1.11 MiB/s, done. Total 28 (delta 5), reused 0 (delta 0) remote: Resolving deltas: 100% (5/5), done. To https://github.com/yasushiito/mynewrepo.git * [new branch] master -> master
今度こそ忘れないぞ。
