スクリーンショットの画像に枠線を付ける

ブログ記事書くために、スクショ取って載せる時になんか、締り?見栄えが良くないなーって思って画像の1pxの枠線を付けるんですよね

これを こういう風に

特に背景が白のときはスッキリ見えて個人的にこの一手間が好きです ただ、これいろいろやり方があり、ここ数年では、[Windows] + [Shift] + [S]によるスクリーンショットの枠線を自動で追加の機能が非常に便利でしたが、スクショ撮ったときにしか使えなかったのでちょい不便

C#使ってクリップボードから画像を取り出して、Bitmap作ってGraphicsで四角書いて~とかやってましたがいま時代、ブラウザでも簡単にできたんですよね 作ってみた、完全に個人の趣味

wakusentsuika.com

  • クリップボードやローカルの画像ファイルを読み取って任意の太さ、色の枠線を追加
  • JavaScriptですべて処理をするので、外部に画像を送信しない安心設計

WebView2を使ってブラウザごとにユーザプロファイルを作成する方法

FormのロードイベントなどWebViewが初期化されるタイミングで、下記の環境設定をいれることでプロファイルの保存先を自由に変更することが可能です。
WebView2のインスタンスごとにプロファイルの保存先を設定すれば各WebView2で異なるプロファイルを保持できるため擬似的にプロファイルを保持しないブラウザを作成することが可能になります。

 var environment = await Microsoft.Web.WebView2.Core.CoreWebView2Environment.CreateAsync(
     null,
     ".\profile"
 );

 await webView.EnsureCoreWebView2Async(environment);

AWSSDK.RDS/スナップショット作成

CLIではなく、あえてC#で作ってみる

CLIやWebコンソールから行える、RDSのスナップショットの作成をC#から行います。

パッケージ

www.nuget.org

前提

Visual Studio 2019
.NET Framework 4.7.2
Consoleアプリケーション
AWSSDK.RDS 3.5.8

ソースコード

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Amazon;
using Amazon.RDS;
using Amazon.RDS.Model;

namespace AWS_SDK_TEST
{
    class Program
    {
        static void Main(string[] args)
        {
            string awsAccessKeyId = "********************";
            string awsSecretAccessKey = "****************************************";
            RegionEndpoint region = RegionEndpoint.APNortheast1;

            AmazonRDSClient rdsClient = new AmazonRDSClient(awsAccessKeyId, awsSecretAccessKey, region);

            CreateDBSnapshotRequest request = new CreateDBSnapshotRequest()
            {
                DBInstanceIdentifier = "{インスタンスID}"
                , DBSnapshotIdentifier = "{スナップショット名}"
            };

            CreateDBSnapshotResponse responce = rdsClient.CreateDBSnapshot(request);

            if (responce.HttpStatusCode == System.Net.HttpStatusCode.OK)
            {
                Console.WriteLine("スナップショット作成開始");
                Console.WriteLine("DBSnapshot.Status:" + responce.DBSnapshot.Status);
            }
            else
            {
                Console.WriteLine("スナップショット作成失敗");
            }
        }
    }
}

解説

CreateDBSnapshotRequest とCreateDBSnapshot関数を使って作成を行います。 CLIやWebコンソールと同様に作成といっても作成を開始するだけで、作成完了まで待機しません。 作成後のステータスは、「responce.DBSnapshot.Status」で確認が可能ですが、型がStringのためステータスの判定を行うのが厄介です。

SDKのリファレンスには、定数の一覧が記載されていませんでしたが、RDSのリファレンスのDB instance statusの英語表記が一致していると思います。

DB instance status - Amazon Relational Database Service

注意事項

認証情報をソースコードに、サンプルを簡潔にするためにアクセスキーとシークレットキーを直接指定していますが、実際に開発を行う場合には、プロファイルの利用が推奨されています。 AWS 認証情報の設定 - AWS SDK for .NET(バージョン 3)

Webのスクショ取得が専門です

スクリーンショット、スクショ
Windowsの場合は、”PrintScrn”キーを押すと一発でデスクトップのスクショが取れる。特定のウィンドだけが欲しい場合には”Alt”+”PrintScrn”で一番手前にあるウィンドのスクショがとれる

さらに、特定の範囲だけ欲しいと思えば、Windows7から”Snipping Tool”が搭載されておりフリーソフトを使用せずとも簡単に取得可能となっている

がツールが充実している時代に数年前になぜか私は、スクショ取得するアプリを作りました。

ScreenShotsBrowser

f:id:orzmakoto:20160626184059p:plain

Webブラウザにスクショ機能をビルドインした専用のアプリ
(中身はWindowsFormsにWebブラウザを貼っつけただけ)

なぜ車輪の再開発のようなこを・・・
と思われるかもしれませんが、なんか作っちゃったんですよね。

当時、Webアプリを作る案件に携わっており、全ケースのテスト実施の証跡(エビデンスとも言うか?)として画面遷移のスクショを取るっていうまったく楽しくない作業があってテスト担当の人ががんばってたので「とりあえず、ワンクリックでできたら・・・」と思い作りました。

なにができるか?

とりえず、Webアプリのスクショを取得することに特化しています。

スクショの蓄積

取得したスクショは、自動保存でファイルに保存するか、とりあえずメモリに蓄積して後からファイル保存/クリップボードに入れることが出来ます。
その他、蓄積したスクショを一括でファイルに保存することも可能です。
f:id:orzmakoto:20160626184833p:plain

IEの互換性バージョンの設定

IEの互換性バージョンも設定することが出来ます。
f:id:orzmakoto:20160626184844p:plain

特定範囲の取得

ブラウザの枠に備え付けられたスライダーを操作することで、画面中の特定範囲のみ取得が可能です。
f:id:orzmakoto:20160626185141p:plain
この状態で、画像取得すると・・・
f:id:orzmakoto:20160626185215p:plain

Webサイト全体の取得

縦が長くてどうても見きれる場合とかありますよね・・・
複数枚のスクショをつなげますよね・・・
f:id:orzmakoto:20160626185624p:plain

が!このScreenShotsBrowserだったら一発で全体が取得できます。
”全体取得”を使うと
f:id:orzmakoto:20160626185713p:plain

この通りから下まで取得できます。

スクショに取得時の情報を設定

誰が、何時、なにで取得したか?
取得した画像の上下どちらかに設定することが出来ます。
f:id:orzmakoto:20160626185921p:plain
ブラウザバージョン、作成者、作成時刻を設定すると
f:id:orzmakoto:20160626190120p:plain
バッチリです

もちろん普通のブラウザとしても使用可能です。
テストしながら、スクショがストレスなく行えるようになっています。

github.com

作ってからずっと放置気味でしたが、社内でまだ使われている様子だったので、ちょこっと手直ししてソースをGitHubにあげてみました。
もう何年も前に作った+やっつけ感半端無く恥ずかしソース

ただ、テストの証跡とかマニュアル作成には未だに現役の模様

調子にのってVectorに登録申請中