Vue.jsを使ってサムネイル機能を作ってみた

はいどーもこんばんは、人生をサムネイルにしてみたい無職です。
本日はVue.jsを使ってサムネイル機能を作ってみたということで、それの紹介および制作過程を紹介したいと思います。
なおコードやらHTMLやらCSSやらはまとめてGitHubに置いています。
https://github.com/Tsumio/TsumioThumbnail

サムネイル機能とは

僕が作りたかったのはそもそもjQueryで大人気のLightbox的なやつでした。
ただこれだけだと「Lightboxか類似の奴使えばいいじゃん」っていう話なので、この手の機能+サムネイル機能を組み合わせたものを作成しようと思ったわけです。
ちなみに僕が想像していたのは某エロサイトで使われているサムネイル機能なのですが、まあそれはそれとして……。
ブログの最後にサムネイルのサンプルを載せています。

HTML部分をまず考える

サムネイル機能を作ろうと考えたとき、なるべく利用側のHTMLはシンプルにしようと思いました。
というわけで考えたHTML部分がこんな感じ(Vue.jsと、コンポーネント用のjsファイルを読み込んでいるのは前提です)。

わりとシンプルではないでしょうか?
特定のフォルダから連番になっている画像を読み込み、それをサムネイルとして表示する感じです。
具体的にはbase属性が「フォルダ名+共通するファイル名」で、extension属性が拡張子です。
minは連番の最初の数字で、maxは連番の最後の数字を表します。
上記のHTMLは「./img/」フォルダに存在する「sample1.pngからsample15.png」までを読み込み、サムネイルとして表示する感じですね。
width属性とheight属性はサムネイルのサイズを指定しているだけです。

モーダルウィンドウを作成する

一番悩んだのが「ウィンドウをどうやってポップアップ表示させるか」でした。
調べて初めて知ったのですが、このポップアップウィンドウのことをモーダルウィンドウとか言うらしいですね。
JavaScriptを使わずCSSだけで実装しているものや、逆にJavaScriptでゴリゴリと動的に生成しているものやらがネットには公開されていました。
が、僕が結局のところ参考にしたのはVue.jsの公式サイトで紹介されている方法(https://jp.vuejs.org/v2/examples/modal.html)です。
参考に組み込んでみたのですが、Vue.jsの機能と言うよりはCSSで色々と実装している感じですかね。

スタイルシートは拡張しやすいように

Vue.jsからサムネイル部分のHTMLを吐き出すようにしていますが、デザイン部分は全てCSSで設定しています。
僕はデザインについては全くの門外漢なのでダサイ感じがしますが、デザインを変えようと思ったら簡単に変更できようになっているのではないかなと思います(具体的にはGitHubのCSSを見てみてください)。

こだわった部分

今回のサムネイルプログラムはおおよそ以下のような機能を持っています。

・フォルダに登録している画像を自動で読み込み、サムネイルとして整形表示
・サムネイルをクリックするとモーダルウィンドウで拡大した画像を表示
・モーダルウィンドウ以外をクリックするとウィンドウを閉じる(閉じるボタンもある)
・画像の右側にマウスポインタを合わせると「次の画像へ進む」画像が出る
・画像の左側にマウスポインタを合わせると「前の画像へ戻る」画像が出る

おおよそこんな感じです。
クリックしたら拡大された画像が表示されるのは必要最低限の機能として実装したものですが、「次の画像へ進む」と「前の画像へ戻る」機能は「これはあったら便利だろうな」と思って付け足したものです。

反省点

やはりまだまだVue.jsに慣れていないため、コードがごちゃごちゃとしています。
この書き方でいいのか……? みたいな疑問はやっぱり常にあります。
Vue.js独特の機能もそうなのですが、例えば画像のロードがちょっと雑かもしれません。
僕が参考にしたスクリプトの多くは「縮小した画像を先に表示」し、「サムネイルがクリックされるまで大きい方の画像はそもそも読み込まない」ようにしています。
ですが僕の書いたプログラムは「大きい画像を読み込んで」「縮小してサムネイルとして表示」しています。
つまりパフォーマンスの点で結構劣る感じですね(逆にプリロードして欲しいならこれでいいと思いますが、サーバーへの負荷は高くなるでしょう)。
あとはCSSの知識が全然足りていませんねw
ほぼコピペになってしまっています(ちょいちょいいじってますが)。

終わりに

Vue.jsを使った簡単なプログラムくらいなら組めるようになってきたんじゃないかなあと思います。
もちろん開発速度が遅すぎて実務レベルでは使い物にならないでしょうが、趣味レベルなら「まあ、なんとか動くよ」って感じですかね。
HTMLとCSSもちゃんと勉強しようかなあ……。見た感じ最近のHTMLとCSSは結構複雑になっていて、それなりに時間を割いて勉強しないと使いこなせない気がしました。
あとレスポンシブデザインとか、その辺も全然わかりませんw

ほなそんな感じでまた。
作ったプログラムのサンプルも置いときます。
WordPressで動かすためにほぼリンク指定部分はほぼ全部直リンクになっているので、実際にコードを閲覧するときはGitHubのリポジトリに置いているものを推奨します。


フォローする