ShareXでスクショを自前サーバーにアップロードする設定全手順【備忘録】

メルマガや記事を書いているときに画像を使いたいことがありますが
「スクショを撮る → 保存 → アップロード → URLコピー」
この流れが地味に面倒なんです。

これまでは Gyazo（※）を使っていて撮った瞬間にアップロードされる手軽さ自体には不満はありませんでした。

※Gyazoは、スクリーンショットを撮ると自動でクラウドにアップロードしてくれる画像共有サービスです。URLが即時発行されるため、画像の共有や貼り付けを手早く行えます。

ただ、

・画像が外部サービス依存になる
・将来的に消える可能性があるかも
・自前のサーバーに画像を残したい
・キャプチャした瞬間に枠線や影も付けたい
・簡単な装飾も付けたい

という不安と欲がだんだん溜まってきました。

ブログ用のスクショは、あとから枠線を付けたり影を足したりすることが多いですが「それも含めて全部自動化したい」と思ったのが今回のきっかけです。

そこで今回は、

・ShareXでスクリーンショットを撮る
・自動で枠線・影を付与
・そのままエックスサーバーへアップロード
・画像URLを即クリップボードにコピー

という環境を構築したので備忘録として設定方法をまとめます。

▼ 完成形のGIF画像

環境と準備
ShareXの設定
実際の挙動
まとめ

環境と準備

ここでは、今回の設定を行うにあたっての環境と、事前に用意しておくものを整理します。

環境

構築する環境は次の通りです。

・OS：Windows
・スクリーンショットツール：ShareX
・サーバー：エックスサーバー
・アップロード方式：FTP

ShareXのインストール

今回使用するShareXは、Windows向けの高機能なスクリーンショットツールです。
無料でダウンロードできます。
ShareXのダウンロード
インストール自体は特に難しい点はなく、通常のWindowsアプリと同様に進めるだけで利用できます。

やりたいこと

やりたいことは次の通りです。

・スクショ撮影後の操作を最小限にする
・見栄えの良い画像を毎回同じクオリティで生成
・画像はすべて自分のサーバーで管理

エックスサーバー側の準備

エックスサーバーのサーバーパネルにログインしてFTPアカウント設定を確認します。

・ホスト名
・ユーザー名
・パスワード

画像を配置するディレクトリを作成

あらかじめ画像を配置するディレクトリを作成します。

例：

/public_html/img/sharex/

この場合、画像URLは次の形式になります。

https://自分のドメイン/img/sharex/画像名.png

ShareXの設定

ここからは、実際にShareX側の設定を行っていきます。
まずは、キャプチャした画像をエックスサーバーへアップロードするためのFTP設定を行います。

ShareXでFTPアップロード設定

１．ShareXを起動
２．Destination settingsをクリック

３．FTP を選択して新規設定を追加

設定内容（例）：

・Host：エックスサーバーのFTPホスト
・Username：FTPユーザー名
・Password：FTPパスワード
・Protocol：FTP（または FTPS）
・Port：21
・リモートディレクトリ：/public_html/img/sharex/
・URLパス：https://自分のドメイン/img/sharex/%filename%
・リモートディレクトリをURLパスに追加する：OFF

これで、アップロード後に正しい画像URLが生成されます。

なお、こちらはあくまで例ですのでご利用のサーバー環境に合わせて設定してください。