※本記事には少しだけR18要素がありますので、拒絶反応がある方はページを閉じることをおすすめします。
以前、shokushuという動画プレイヤーをElectronで作った のですが、静止画も扱える shokushu2 というアプリケーションをElectronで作りました。
趣味アプリなので、実行ファイルの配布はしていません。
ご興味あれば git clone してから yarn install && yarn package すると、 <PROJECT_ROOT>/release ディレクトリに ビルド環境に適応した実行ファイルが作成されます。
ただし Mac でしか動作確認をしていないため Windows 等で動くかは不明です。特にアプリケーションの性質上、ファイルシステムにアクセスするのでその部分が微妙です。
詳細は README を参照してください。
モチベーション
- 前出の動画プレイヤーを数年使っていて、改善したい部分が溜まっていた。
- 原点回帰とでもいうか、近年は静止画を購入することも多くなっていたが、気にいるビューワーがなかった。K○miflo(R18のサービスなので、伏せ字および無リンクにしておきます)と同じように閲覧したかった。
- 動画も静止画も同じようにプライベートなプラットフォーム上で一元管理したかった。
- React Hooks が実戦投入可能か評価したかった。（2019/2月上旬に React 16.8 の安定版がリリースされたが、実装開始時はまだ alpha 版だった）
使用した主な技術・ライブラリ
Electron
HTML, JS, CSS 等のWeb技術でクロスプラットフォームなデスクトップアプリケーションが作れるやつ。
現在ではNW.jsや neutrino等の選択肢もあるが、こだわりも不満も特になかったので今回もElectronを採用。
ちなみに、このボイラープレートを使って、初期セットアップを済ませた。
React v16.8
今回の主目的の一つであるHooks の評価のために、16.8 のalpha バージョンから使用。
ちなみに Redux 等は使用しておらず、React 標準機能の Context 等を使用。（とりまRedux、という風潮(？)が嫌い）
Ant Design
中国のアリババのグループ企業であるAlipayのエンジニアが主に開発しているUIライブラリ。
今までUIライブラリは色々試してきたけど、デザイン・コンポーネント数・扱いやすさ等の総合評価では1番いい。
ちなみに名前の由来は、アリ(ババ|ペイ)→蟻(日本語)→Ant(英語)？
NeDB
組込のドキュメント型データベース(NoSQL)。API は MongoDB のサブセットなので、MongoDB を使ったことがあればほとんど同じ感じで使える。 MongoDB を使ったことがなくても 何かしら O/Rマッパー を使ったことがあれば雰囲気で使えるはず。
データファイルはプレーンテキストなので、直接ファイルの中身を参照・編集できて嬉しい。
React Hotkeys
ホットキー(ショートカットキー)用のライブラリ。同種のライブラリを色々試した中で一番フィットした。
ちなみにreact-hot-keys 等、似た名前のライブラリが多いので注意。
2019/02/11 時点での安定版は v1 だが、v2 が開発中で、使用したい機能がv2からだったのでv2を使用。開発中とは言え、特にバグに遭遇することもなく安定していた。
機能
リスト
- 一般的な検索・ソート・ページングができる
- サムネイルは静止画の場合は最初のページを使用。動画の場合は再生時間の中央のイメージを使用。ただしブックマーク(後述)が登録されている場合はその最初の位置を使用。
ビューワ
静止画ビューワ
- 画像からは分かりにくいけど、紙の本と同じように２ページ分を左右に並べて表示。（設定で1ページにもできる）
- 普通の動画プレイヤーと同じ操作感で← , → でページ送りができる。通常は2ページ単位で移動するが、 shift+← , shift+→ で1ページ単位になる。（見開きページ用の調整）
- b でブックマークを設定できる。(スライダー上の白丸がブックマーク位置)同じ位置でまた bを押すとブックマークを解除。
- ↑, ↓で現在ページを起点に前後のブックマークへ移動。
動画ビューワ
- 機能的には静止画ビューワとほぼ同じ。
- ←, → での移動秒数は設定可能。（初期値は10秒）
メタデータの編集
- リストまたはビューワからタイトルや作者・タグ等のメタデータを編集できる
- タイトルを変更すると、実際のファイル名・ディレクトリ名も変更される。
- ちなみに動画・静止画の最後まで閲覧すると視聴回数を自動インクリメントするため、編集項目に視聴回数(Viewed Count)は不要なはずだけど、開発時にインクリメントしすぎるバグがあり、回数を補正するために編集可能にした。今は当該バグはないけど、その名残。