LWMPに画像ビューワとブックリーダーを追加 - localwebmediaplayer
開発::util
序
ローカルネットワーク内のPC上のメディアファイルを別のデバイスで楽しめるLWMPだが、今回、画像関連機能を追加した。
シンプルにかなり大変だったのだが、使い勝手の良い機能になった。
機能紹介
画像ビューワ
画像をクリックすることで画像ビューワが起動するようになった。
現時点で対応している拡張子は.jpg
, .jpeg
, .gif
, .bmp
, .png
, .webp
, .avif
, .heif
.
画像ビューワは左右3分割のクリックターゲットを持っている。
右で次の画像、左で前の画像、中央で閉じる。

ブックリーダー
ブックリーダーはBook Readerボタンを押すことで起動する。 今回もFeather Iconにお世話になっている。
ブックリーダーは上1/3と下2/3に分かれており、下2/3はさらに左右5分割になっている。

上1/3をクリックするとブックリーダーのオプションが表示される。 現在のところ
- 見開き表示の切り替え
- ページ左右反転の切り替え
- ページジャンプ
が用意されている。
下は左から「左に2ページ進む」「左に1ページ進む」「ブックリーダーを閉じる」「右に1ページ進む」「右に2ページ進む」となっている。 左右で進む/戻るの挙動に関しては左右反転の影響を(見開き表示でなくても)受ける。 見開きでない場合、「2ページ進む」挙動は1ページ進むになる。
見開き表示でも画像がランドスケープである場合、単一画像表示になる。 この状態のとき、2ページ進む挙動は1ページに抑制される。
ちなみに、私にとってこのソフトウェアの目的が「スマホで観る」である関係上、ブックリーダーはだいぶ「おまけ機能」なのだけど、その割にはだいぶ作り込んだ。
技術紹介
画像ビューワ
Chienomiと同じような構造。
div > figure > img
という要素になっていて、
#ImgViewer {
display: none;
position: fixed;
top: 0px;
left: 0px;
z-index: 15000;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #fffffff0;
}
#ImgViewerFigure {
margin: 0 auto;
padding: 0;
}
#ImgViewerFigure img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vw;
object-fit: contain;
}
という感じになっている。
動作としては、画像のロードはimg
要素のsrc
属性を書き換えるだけである。
表示と非表示もImgViewer
のdisplay
を変更するだけだ。
ブックリーダー
HTML構造
<div id="BookReaderBox">
<div id="BookReaderOptionModalBox">
<div id="BookReaderOptionModal">
<form id="BookReaderOptionForm">
<button id="BookReaderOptionSpread">Toggle Spread View</button>
<button id="BookReaderOptionOrder">Toggle Page Order</button><br />
<label>Page <input type="text" size="4" id="BookReaderPageNumber" /></label><button id="BookReaderPageJump">Go</button>
</form>
</div>
</div>
<canvas id="BookReaderCanvas"></canvas>
</div>
深くなっているが、基本的な構造は
div
div
canvas
であり、#BookReaderBox
直下はOptionsのためのdiv
と、実際に表示するためのcanvas
の2つ。
オプション部分に関してはオプション部品を配置している部分の操作で閉じてほしくはないし、その外側を押したら閉じてほしいため、ビューポート全体を覆うブロックがもう1枚ほしい。 このため、ブロックがネストすることになる。
フォームは正直いらなかった。
fieldset
とかのほうがよかったかも。
非表示になっているのは#BookReaderBox
。
基本的な動作
Book Reader
ボタンで#BookReaderBox
を表示する。(show_bookreader()
)
この表示の流れで#BookReaderBox
のビューポートに合わせたサイズ調整を行い、currentState
を更新してdraw_bookreader_page()
を呼んで描画する。
draw_brookreader_page()
はcurrentState
を見て見開き表示のdraw_bookreader_page_spread()
と単一表示のdraw_bookreader_page_single()
に分岐するが、draw_bookreader_page_spread()
は画像のアスペクト比を見てdraw_bookreader_page_single()
に流れる場合がある。
表示する画像の配列とインデックスの関係は画像ビューワと同じcurrentState.imglist
を使っている。
タッチコールバックとページ送り
const bookreader_touch_callback = function(e) {
const br_box = document.getElementById("BookReaderBox")
const rect = br_box.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
const zone_width = rect.width / 5
const zone_height = rect.height / 3
if (y < zone_height) {
show_bookreader_options()
else {
} if (x < zone_width) {
.bookreader.rtl ? bookreader_next2() : bookreader_prev2()
currentStateelse if (x < zone_width * 2) {
} .bookreader.rtl ? bookreader_next1() : bookreader_prev1()
currentStateelse if (x < zone_width * 3) {
} hide_bookreader()
else if (x < zone_width * 4) {
} .bookreader.rtl ? bookreader_prev1() : bookreader_next1()
currentStateelse {
} .bookreader.rtl ? bookreader_prev2() : bookreader_next2()
currentState
}
} }
重要なのがElement.getBoundingClientRect
。
要素の位置や大きさに関する情報が得られるもので、今回の場合クリック座標との照合に使っている。
ページ進行方向が切り替えられることから、
- クリックは左右で判定し、左右の関数が進むのか戻るのかを判定する
- クリックが進むか戻るかを判定した上で関数を呼ぶ
の2通りの方法があるが、後者を採用した。
また、進むページ数に関しても
- ゾーンに対応した処理を呼び、2ページ送り関数が1ページに留めるべきかを判定する
- 進むのが1ページか2ページかを判定した上で関数を呼ぶ
の2通りがあるが
const bookreader_next2 = function() {
const pages = (currentState.bookreader.spread && !currentState.bookreader.force_single) ? 2 : 1
draw_bookreader_page(currentState.bookreader.page + pages)
}
このように、2ページ送り関数の中で判定するようにした。
分けたほうが分かりやすい派と一箇所にまとめるべき派が生まれる話だとは思う。
描画パート
const draw_bookreader_page_spread = function({pagenum, canvas, ctx, scale, rect, maxWidth, maxHeight, page}) {
if (page > currentState.imglist.length - 2) { page = currentState.imglist.length - 2 }
const img1 = new Image()
const img2 = new Image()
.src = "/media/" + currentState.imglist[page]
img1.src = "/media/" + currentState.imglist[page + 1]
img2
let loaded = 0
const onLoad = () => {
++
loadedif (loaded < 2) {return}
const aspect1 = img1.width / img1.height
const aspect2 = img2.width / img2.height
if (aspect1 > 1 || aspect2 > 1) {
.bookreader.force_single = true
currentStatedraw_bookreader_page_single({pagenum, canvas, ctx, scale, rect, maxWidth, maxHeight, page})
return
}
const targetHeight = maxHeight
const drawWidth1 = targetHeight * aspect1
const drawWidth2 = targetHeight * aspect2
let fitScale = 1
if (drawWidth1 > (maxWidth / 2) || drawWidth2 > (maxWidth / 2)) {
= Math.min(((maxWidth / 2) / drawWidth1), ((maxWidth / 2) / drawWidth2))
fitScale
}
const finalHeight = targetHeight * fitScale / scale
const finalWidth1 = drawWidth1 * fitScale / scale
const finalWidth2 = drawWidth2 * fitScale / scale
const centerX = rect.width / 2
const x1 = currentState.bookreader.rtl ? centerX : centerX - finalWidth1
const y1 = (rect.height - finalHeight) / 2
const y2 = y1
const x2 = currentState.bookreader.rtl ? centerX - finalWidth2 : centerX
.drawImage(img1, x1, y1, finalWidth1, finalHeight)
ctx.drawImage(img2, x2, y2, finalWidth2, finalHeight)
ctx
.bookreader.page = page
currentState.value = page + 1
pagenum
}
.onload = onLoad
img1.onload = onLoad
img2 }
ページ送りのちらつきを減らすためcanvas
要素を使っている。
HTMLCanvasElement
の画像描画の使い方は基本的には
const ctx = canvas.getContext("2d") // -> CanvasRenderingContext2D
.drawImage(image, dx, dy, dWidth, dHeight) ctx
である。
画像の原寸のまま出すのであればdWidth
, dHeight
も省略できる。
逆に言えば、dWidth
, dHeight
を指定することで拡大縮小ができる。
実用重要になるのが、「キャンバスの大きさ」を必要とすること。
これはHTMLの要素としての大きさ、つまりCSSにおけるwidth
, height
とは別で、canvas
要素のwidth
, height
の値になる。
CSSだけで拡大すると小さなキャンバスに描いた状態のものを引き伸ばすことになり、ガビガビになる。
普通に属性値として書いても良いのだが、
const draw_bookreader_page = function(page=0) {
const pagenum = document.getElementById("BookReaderPageNumber")
const canvas = document.getElementById("BookReaderCanvas")
const ctx = canvas.getContext("2d")
const scale = window.devicePixelRatio
const desired_height = window.innerHeight
.style.height = desired_height + "px"
canvasconst rect = canvas.getBoundingClientRect()
const maxWidth = rect.width * scale
const maxHeight = rect.height * scale
.width = maxWidth
canvas.height = maxHeight
canvas.scale(scale, scale)
ctx
if (page < 0) { page = 0 }
.force_single = false
currentStateif (currentState.bookreader.spread) {
draw_bookreader_page_spread({pagenum, canvas, ctx, scale, rect, maxWidth, maxHeight, page})
else {
} draw_bookreader_page_single({pagenum, canvas, ctx, scale, rect, maxWidth, maxHeight, page})
} }
という形で動的に指定することで最大のサイズを得ている。 スケーリングにも対応しておかないと、高密度ディスプレイで画像を美しく出せない。
適切なサイズのキャンバスができたら、そこに画像を描く。 見開きベストフィットモードを求める場合は、縦か横どちらかで最大のサイズにしたあと、はみだす場合は調整が必要。 見開き表示はポートレート画像であることが確定しているため、高さのほうで合わせて、それぞれの画像がビュー幅の半分を超えるなら調整する。
あとはそれぞれのサイズと座標を計算して描画する。
進行方向に関しては2つの画像を右に置くか左に置くかを判定するのに使っている。
stopPropagation()
毎回説明したほうが良いことといえば
event.stopPropagation()
- イベントの伝播を止める。このイベントリスナーを親要素に伝えないevent.preventDefault()
- イベントの規定動作を行わない。フォーム内のボタンの場合はだいたい必須
addEventListener()
で追加するDOM Level 2イベントは複数設定することができ、設定した順に適用される。
stopPropagation()
はこの複数設定されたイベントを止めることはしない。
このためラッパーウィンドウやモーダルベースなど、それ以上イベントを伝播させることが想定されていないものにあらかじめ仕込んでおくと事故がなくて良い。
document.getElementById("BookReaderBox").addEventListener("click", e => { e.stopPropagation() })
リサイズ時
CSS任せになっている画像ビューワは特別なことはいらないが、ブックリーダーはサイズの調整をしたいのと、単にそれだけではキャンバスがリセットされて空になってしまう。
色々試したがキャンバスがリセットされたままになる問題が解消できなかったため、リサイズ時は一度ブックリーダーそのものを消し、少し間を置いて再描画するようにした。
if (currentState.bookreader.shown) {
hide_bookreader()
setTimeout(() => {
show_bookreader()
, 300)
} }
画像拡張子
LWMPが「画像」として識別するのは以下のとおり
フォーマット | 拡張子 |
---|---|
JPEG | .jpg , .jpeg , .jfif , .pjpeg , .pjp |
PNG | .png |
WebP | .webp |
AVIF | .avif |
Bitmap | .bmp |
GIF | .gif |
もちろん、HEIF, JPEG XLあるいはJPEG 2000, JPEG XRなど他にも画像フォーマットはたくさん存在しているが、ウェブブラウザの対応はかなり消極的かつ保守的。 EdgeはAVIFもなかなか採用しなかったし、FirefoxはWebPをなかなか採用しなかった。
ちなみに、.jfif
は現在はJPEGの規格に取り込まれているため拡張子だけの話。
.pjpeg
および.pjp
はProgressive JPEG用の拡張子。
ただし、IEはJPEGファイルアップロード時にimage/pjpegとしてアップロードするというクセがあった。
実際にProgressive JPEGであるかどうかを問わずである。
まぁとにかく、幅広いブラウザで開けるらしいので、需要があるかどうかはともかくサポートするようにしている。
忘れてはいけないのが、LWMPはメディアクライアントはあくまでウェブブラウザであり、ウェブブラウザの機能にゆだねているので、ファイルが扱えるかどうかはブラウザ次第なのだ。
サムネイル
画像に関してはサムネイルを返すこともできるが、ファイルブラウザが重くなるのは私は許容できないので意図的に入れていない。
キーボード操作
全体でキャプチャしたくないので、#BookReaderBox
でkeydown
イベントを捕まえたいのだが、div
なのでセットしづらい。
そこでまず、#BookReaderBox
にtabindex="0"
を入れておく。
<div id="BookReaderBox" tabindex="0">
その上で、開いたときに強制フォーカス
.focus() br_box
これでタブキーで強制的にフォーカスを外さない限りはキーボード操作の対象にできる。
キーボード操作は
- 左右はそれぞれ左右へのページめくり
- 下は進む固定、上は戻る固定
- PgDnは1ページ進む、PgUpは1ページ戻る
というMComix風の挙動を採用している。
// Setup keyboard event
document.getElementById("BookReaderBox").addEventListener("keydown", e => {
if (e.code === "ArrowDown") {
bookreader_next2()
else if (e.code === "ArrowUp") {
} bookreader_prev2()
else if (e.code === "ArrowLeft") {
} .bookreader.rtl ? bookreader_next2() : bookreader_prev2()
currentStateelse if (e.code === "ArrowRight") {
} .bookreader.rtl ? bookreader_prev2() : bookreader_next2()
currentStateelse if (e.code === "PageDown") {
} bookreader_next1()
else if (e.code === "PageUp") {
} bookreader_prev1()
} })
その他の機能
「戻る」ナビゲーション
はるらぼで飼い慣らせなかったVanilla JavaScript SPAのヒストリナビゲーションへのリベンジである。
基本的な概念
Vanilla JavaScript SPAにおいてトップクラスに困難なのが「戻る」「進む」の制御である。
これはwindow.history
に内包されている。
ヒストリイベントはstateと呼ばれている。
window.history.pushState()
とpopstate
イベントハンドラでアクセスすることになるが、その名前に反してpopstate
はヒストリイベントを取り出したときだけでなく、「進む」操作によってヒストリイベントが追加されるときもpopstate
イベントが発生する。
window.history.pushState()
によって明示的にステートを追加できる- ヒストリの操作によってstateスタックが増減するとき、
popstate
イベントが発生する popstate
イベントによって渡されるevent.state
は、増減が行われたあとにstateスタックの最上位となるものである
ヒストリ操作によって、というのは、ブラウザの「進む」「戻る」あるいはそれに相当するhistory.back()
, history.forward()
とhistory.go()
を指している。
言い換えると、pushState()
でstateスタックに積むときだけが例外的にpopstate
イベントが発生させない。
もしそれ以上進むことができない突き当りのページがあるとすると、そこからは「戻る」しかなく、するとpopstate
イベントが発生する。
しかし、history.back()
で得られるstateは突き当りのページからひとつ戻ったものになるため、突き当りのページでpushState()
したものは得る機会がない。
では無視できるかというと、ここで「進む」した場合は再度突き当りのページでpushState()
したものがスタックに積まれると同時にpopstate
イベントが発生する。
それがbackによって発生したのか、forwardによって発生したのかは、イベントからはわからない。
機能させるための規則
pushするstateの内容
stateの内容は任意のオブジェクトである。 自身が明示的にpushした以外のstateが入り込むことがあるため、区別できるようなプロパティをもたせる。
.pushState({
historylwmp: true
})
popstate
では自分が入れた以外のstateが来た場合は単に無視するのが基本。
=> {
e const state = e.state
if (!e.state.lwmp) { return }
}
backで閉じる
状態遷移したあとこれを閉じるという操作をする場合、stateスタックと画面の状態を揃えるためhistory.back()
で閉じるようにする。
a, b, cと開いていって一括で閉じるような挙動である場合は、history.go()
を使うか、aだけにpushState()
を仕込む。
前述のように突き当りのページからbackしたときは突き当りのページだったかどうかをイベントから判別できない。 なので、今開いているビューが何かということは別途変数にとっておく必要がある。
// Back navigation
window.addEventListener("popstate", e => {
const state = e.state
if (!state.lwmp) { return }
if (currentState.currentView) {
switch (currentState.currentView) {
case "player":
switch_browser()
break
case "imgview":
hide_imgview()
break
case "book":
hide_bookreader()
break
}.currentView = null
currentStateelse {
} switch (state.type) {
case "player":
switch_player()
break
case "imgview":
show_imgview(state.path)
break
case "book":
show_bookreader()
break
default:
load_browser(state.path)
}
} })
stateラップ関数とコール方法
一番ダサくなるところ。
状態遷移関数をpushState()
する関数でラップする
function open_modal() {
//...
}
function open_modal_with_state() {
.pushState({
historyview: "modal"
})open_modal()
}
通常はopen_modal_with_state()
を呼ぶが、popstate
の中からはopen_modal()
を呼ぶようにする。
でないと、「進む」操作によってpopstate
が発生したときに無限にstateを積み続けてしまう。
メディアキー
メディアキーの操作はnavigation.mediaSession.setActionHandler
によってハンドラ登録ができる。
video
要素とaudio
要素はplayとpauseにはそれ自体で対応しているので、対応すべきはnexttrack
とprevioustrack
だけになる。
// Media key
navigator.mediaSession?.setActionHandler('nexttrack', e => {
playlist_next()
})
navigator.mediaSession?.setActionHandler('previoustrack', e => {
playlist_prev()
})
メディアメタデータ
OSと連動するメタデータの再生。
デスクトップのメディアウィジェットやスマートフォンのロック画面と連動させることができる。
audio
やvideo
を再生するだけで再生状態は反映されるが、これではタイトルやアーティストは表示できない。
これを表示させる方法がnavigation.mediaSession.metadata
である。
title
, artist
, album
, artwork
をセットすることができる。
ただ、Vivaldiだとここでセットした情報がOSに共有されなかった。
メタデータ機能はプレイリスト表示などを含めて表示させるプランはあるが、まだ実施していないためかなり限定的である。
ミニマル……?
プレーン、バニラ、ミニマルを掲げたlocalwebmediaplayerだけれど、main.js
は
❯ wc -lm src/main.js
715 20961 src/main.js
と全く小さくない状態になってしまった。 ひょっとしたら何かしらのフレームワークを導入したほうが小さくなった可能性もあるが、それでも18kBなのでフレームワークのサイズよりは小さいだろう。
画像ビューワ実装前と比べると
❯ git diff --stat c79fb09
.gitignore | 1 +
README.md | 65 ++-
doc/img/bookreader.webp | Bin 0 -> 1050 bytes
filebrowser.webp => doc/img/filebrowser.webp | Bin
doc/img/imageviewer.webp | Bin 0 -> 856 bytes
videoplayer.webp => doc/img/videoplayer.webp | Bin
src/httpclient.mjs | 7 +-
src/img/LICENSE | 21 +
src/img/book-open.svg | 1 +
src/img/image.svg | 1 +
src/index.html | 19 +-
src/main.js | 419 ++++++++++++++++++-
src/mediaplay.rb | 10 +-
src/theme.css | 73 ++++
14 files changed, 592 insertions(+), 25 deletions(-)
と倍以上になっているのがわかる。
それでも実際は結構読みやすいコードでもあるはずだ。 さすがに関数が多いので把握は簡単ではないが。
だいたい完成形
LWMPを私が使っていて思っていた
- 画像が見たい (主に電子書籍が読みたい)
- バックナビゲーションで戻れないのが結構不便
が解消できたので、個人的にはだいたい完成形かなと思っている。 あとはメタデータを返す機能を考えているけれど、欲しい機能はそれくらいだ。
Linux系のデスクトップをメインで運用していて、かつスマホでPCのメディアファイルにアクセスしたい人、という結構限られる話になってしまうが、使い心地は大変良いのでぜひみんな使って欲しい。
ちなみに、Windowsで動作するかどうかはわからないし、LighttpdがWindows向けに公式に提供されていないのであんまりWindows PCユーザーに向けて考えてはいないものではあるが、Lighttpd以外のウェブサーバーと組み合わせること自体は可能だし、なによりWSLを使って動作させることができるので、がんばればWindowsでも使える。
最近はArchlinuxも使えるようになったので、お手軽だろう。
--install archlinux wsl
Archlinuxを起動したら一旦アップデートして
sudo pacman -Syu
必要なものをインストールする。
sudo pacman -S ruby lighttpd
そしたらこんな感じで準備する
$ mkdir -p ~/.local/opt
$ cd ~/.local/opt
$ git clone https://github.com/reasonset/localwebmediaplayer.git
$ cd
$ mkdir -p ~/.config/reasonset/lwmp
コレクションはこんな感じで用意する
$ mkdir -p ~/lwmp/foo
$ cd ~/lwmp/foo
$ ln -s /mnt/c/User/foo/Music
WSLでは/mnt/c
にC:
ドライブがマウントされていることを知っておくと幸せになれるかもしれない。
lwmp
以下には起動スクリプトとLighttpdの設定ファイルがあれば良い。
server.username = "foo"
server.groupname = "foo"
server.modules += ( "mod_cgi", "mod_alias", "mod_setenv", "mod_access" )
setenv.add-environment = ( "MEDIA_ROOT" => env.MEDIA_ROOT )
server.document-root = env.REPOS_ROOT
dir-listing.activate = "disable"
dir-listing.encoding = "utf-8"
index-file.names = ( "index.html" )
server.bind = "0.0.0.0"
server.port = 8000
cgi.assign = (
".rb" => "/usr/bin/ruby"
)
alias.url = ("/media/" => env.MEDIA_ROOT )
#!/bin/bash
export MEDIA_ROOT=$HOME/lwmp/foo/
export REPOS_ROOT=$HOME/.local/opt/localwebmediaplayer/src/
lighttpd -D -f ~/.config/reasonset/lwmp/foo-lighttpd.conf
あとは実行するだけ。
bash ~/.config/reasonset/lwmp/lwmp-foo.bash
ひょっとしたらそろそろマルチプラットフォームで動かしやすいようにWebrickで配信する機能とか用意してもいいのかもしれない。 需要があればだが。