令和版オレオレGyazoを作った

C#

以前からスクショをたくさん取りたい私は、Gyazoを自前のレンタルサーバで運用するためにオレオレGyazoなるものを導入していました。

オレオレGyazoの導入
Gyazoというサービスがあります。本家と呼ばれるこのサービスは、ご存知のかたも多いかと思われますが、スクリーンショットの共有サービスに位置付けられます。アプリを起動してマウスドラッグした範囲が撮影され、即座に(即座…とは言えないかも)We…

しかし、Windowsが10になり、さらに11になったことで、Windowsのスクリーンショット機能をSnippingToolが担うようになり、スクショをやり取りすることの多いチャットツール(DiscordやTeams)、さらにこのブログでも使っているWordPressでも、直接クリップボードにはいった画像を貼り付けられることが可能になっていて、スクショの採取においてGyazoである必要性がなくなっていました。

そんな中、またもや、過去を振り返りたくなって途方にくれた私だったので、令和になった今、今風のオレオレGyazoを作ろうと思った次第です。

仕様を考える

Gyazoの整理

Gyazoの動きとしては、採取したスクリーンショットをサーバに送り、URLをクリップボードに格納してくれる機能です。

そしてそのURLを共有する。

あと動作が軽い。

スクショ採取のUIとしてはSnippingToolと同じ雰囲気なので割愛。

サーバに送られた画像はファイルとして永続化され、URLが分かれば世界中のどこからでもアクセスが可能。

Gyazoそのものにはギャラリー機能はない。

令和版オレオレGyazoどうする

まず前提として、すでに私の体はSnippingToolのショートカットが体に染み付いている状態です。

ショトカはWin+Shift+S(または+Rで動画、あるいは+TでOCR)

少し調べると、そもそもSnippingToolでショトカを撮った際に、画像ファイルが物理的に保存される設定があることがわかりました。

SnippingToolの設定画面

環境によって多少異なるかとは思いますが、おおむね「C:\Users\(ユーザー名)\Pictures\Screenshots」に保存されると思われます。

※詳細はSnippingToolで確認してください。

画像がすでに存在するのであれば、この保存された画像をGyazoサーバへ送ってあげればいいです。

つまり、UI部分は全部SnippingToolに任せるということ。結果だけ横取りして自分のサーバへ送ります。

また、本家のGyazoサービスだとgif画像も撮れるんですが、SnippingToolは動画(mpeg4)が撮れます。ついでだからこれも頂くことにしました。

保存場所が画像とは異なるので、そこだけ注意が必要です。

クライアント側では画像と動画が保存されるフォルダを監視、ファイルの更新が検知されたらGyazoサーバへファイルを送信。帰ってきたURLをクリップボードに格納します。

また、ギャラリーは欲しいのでそれも実装しました。

詳細はGithubにまとめましたが、技術スタックとしては以下としました。

レイヤー技術
クライアントC# / WPF (net8.0-windows)、CommunityToolkit.MvvmH.NotifyIcon.Wpf(タスクトレイ常駐)
サーバーPHP 8.1+(素のPHP、composer/フレームワーク依存なし)、SQLite3(PDO経由)
ギャラリーフロントエンド素のHTML / CSS / JavaScript(React等のフレームワーク不使用)

クリップボードにスクショが欲しい場合もある

最初は前述の通りで実装完了にしようと思っていたのですが、ログに残すまでもないスクショ画像もあるわけで、そういった場合にクリップボードをURLで書き換えてしまう今回の実装では不都合が出ました。

今回のように、ブログ記事をWordpressで書く場合も然り。

特にギャラリーに並べておきたい画像ではないんですよね。

なので、サーバに送付すること自体をキャンセルする仕組みとして、SnippingToolを起動する前にキャンセルするためのショートカットを常駐アプリ側に検知させることとして、その場合はSnippingToolの動作を邪魔しないようにしました。

ファイルアップロードしない旨のトースター通知

ついでに名前もオレオレGyazoから、JustLinkIt(リンクを貼るだけ)としました。

これは海外の方向けではありますが。

ギャラリーについて

一応以前のオレオレGyazoでも簡易的なギャラリーは作っていました。

ただし、構想だけで実装できていなかった機能として、タグ付けとファイルの削除機能があります。

今回はゼロスタートなこともあって、これらの機能も実装しておきました。

基本機能としてはファイルの更新日時を降順で並べて、画面サイズによってパネルを敷き詰めるスタイルを採用。無限スクロールでどんどん古い画像に向かって閲覧が可能。

タグを付与することで、画面上に読み込んでいない古いスクショに絞って表示させることができる。

タグは1枚の画像に対して複数タグを設定可能なので、好きにグルーピングすることができます。

ちょっとギャラリーについてはプライベートな内容が過ぎるのでスクショ出せないんですけども、気になる方はGithubに全公開しているので、デプロイしてみてください。

Github

需要の有無はともかく、置いておきます。

私の思いつきでアップデートされたりします。多分。

GitHub – airiell/JustLinkIt: Just snip. The URL is already in your clipboard.
Just snip. The URL is already in your clipboard. Contribute to airiell/JustLinkIt development by creating an account on …
タイトルとURLをコピーしました