https://amgsk.dev/tags/React/Recent content in React on /home/amgskHugoja-JPTue, 14 Jul 2026 22:18:42 +0900https://amgsk.dev/posts/meguri-app/Tue, 14 Jul 2026 22:18:42 +0900https://amgsk.dev/posts/meguri-app/<p>子どもや家族の写真が増える中で、お気に入りだけを見たかったり、場所や名前などのタグの情報から、すぐに探したいものを探せるアプリがほしかった。 過去に撮影した数百GB分の撮りためた動画・画像が眠っていて、これらのローカルデータをサムネイル付きで探しやすくする仕組みがあると良いなと思っていた。</p> <p>既存のメディアプレーヤーやフォトマネージャーもいくつか試したが、セルフホストであっても有料プランに誘導されることが多く、Freeで使用できる理想的なものは見つからないままだった。 どれも悪くないんだけど、動画と画像の両方をまとめて扱え、タグとレーティングで整理できて、ローカルで完結するもの、そして無料、となると選択肢が限られる。</p> <p>2019年頃に<a href="https://github.com/amgsk/moevue_support">MoeVue</a>という動画管理アプリを Electron + Vue で作っていた。（ムービューという読みを意識して名付けたもので、MovieとVueを足して2で割ったような安直なネーミングだ） サムネイル表示・タグ・レーティング・検索と、やりたいことは今回とほぼ同じだが、当時の作りはだいぶ荒く保守する気にはなれなかったので、イチから作り直すことにした。</p> <p>作ったアプリはMeguri（巡）という名称で、過去の<code>想い出を巡る</code>という意味合いを込めてこの名前にした。</p> <img src="demo.gif" alt="Meguri demo" width="100%" style="border: #040404 10px solid;border-radius: 12px;"> <p>Base64やsolarizedのテーマを用意し気分に合わせて配色を変更できるようにした。</p> <table> <thead> <tr> <th>gruvbox dark</th> <th>nord dark</th> <th>solarized light</th> </tr> </thead> <tbody> <tr> <td><img src="theme-gruvbox-dark.png" alt="gruvbox dark テーマ"loading="lazy"> </td> <td><img src="theme-nord-dark.png" alt="nord dark テーマ"loading="lazy"> </td> <td><img src="theme-solarized-light.png" alt="solarized light テーマ"loading="lazy"> </td> </tr> </tbody> </table> <p>セットアップは「メディアが格納されているフォルダを選ぶ」だけ。<br> 選んだフォルダは「ワークスペース」として登録され、中の動画・画像が再帰的にスキャンされて、サムネイル・解像度・再生時間が勝手に揃ってくる仕組み。<br> ワークスペースは複数登録でき、勿論外付けHDDやNAS等の散らばったファイルをMeguriで横断して管理・閲覧することが出来る。</p> <p>メディアはinappで表示でき、他のアプリを使用する必要がない。mpv等の他のお気に入りのアプリが有れば、open externalボタンから<code>xdg-open</code>できるように配慮している。 手動コレクションでお気に入りの動画・画像集を作成したり、検索フィルタを保存しておくことで動的コレクションのような使い方も可能。</p> <p><code>Steam</code>の<code>Discovery Queue</code>の機能から発送を得て実装した<code>Discovery</code>機能は、個人的にこだわった機能のひとつ。 これはランダムにメディアを表示してくれる機能で、画面の右下のFABボタンから実行できる。</p> <p>こういったメディア管理アプリのソート順は、createdAtやファイル名等のルールが多い中で、どうしても古いファイルは埋もれてしまう。 この機能を使うことで、思い出が蘇る良い機会になるかもしれない。</p> <p><img src="discover.gif" alt="ディスカバリー画面 — ランダム抽出とシーンプレビュー"loading="lazy"> </p> <h2 id="download">Download</h2> <p><a href="https://zabuton-app.github.io/meguri/guide.html">User Guide</a></p> <ul> <li>リポジトリ: <a href="https://github.com/zabuton-app/meguri">zabuton-app/meguri</a></li> <li>ダウンロード: <a href="https://github.com/zabuton-app/meguri/releases">GitHub Releases</a></li> <li>Archユーザ向けには、AURの <a href="https://aur.archlinux.org/packages/meguri-bin">meguri-bin</a> からインストール可能</li> </ul> <div> <div class="codeblock--content"><div class="highlight"><div style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"> <table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"> <pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679">1 </span></code></pre></td> <td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"> <pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>yay -S meguri-bin</span></span></code></pre></td></tr></table> </div> </div> </div> </div> <p>EOF</p>