独自の画像ビューアをつくってみよう(ダウンロード可)さてさて、ここのところElectronの開発記事を書いているからか、デスクトップのアプリを使っていても「あ、ここはこうしたいな」と自然と改善点が思い浮かんだりしているのですが、その中でも画像ビューアはとても多機能なものが多いですが、もっとシンプルでもいいのではと感じることがよくあります。そこで、いつかは自分で自分自身のために画像ビューアをつくりたいなと考えていたのですが、せっかく今Electron開発の流れがあるので、この勢いで基本となる部分だけでも作ってみることにしました。Ubuntuに標準で搭載されているようなレベルのアプリケーションがすぐ作れるわけではありませんが、残りは少しずつ自分好みの改造をしていこうかなと考えています。内容は誰でもわかるようにしているので、ビギナーの方でも参考になるはずです。楽しんで読んでみてくださいね。合わせて読みたいやりたいこと画像を一覧表示して、フォルダの移動もできる画像の一覧は4つの並べ替えができる。詳しく書いてあるので、そちらを見てください。フォルダ名はmy-viewerです。アプリの設定をするでは、まずはmain.jsの中でアプリ設定をします。今回は、画像の一覧を表示するので少し大きめにウィンドウを開くことにしました。true})JS、CSSのフレームワークをインストールするレイアウトやJavaScriptコード必要になるので、CSSフレームワークのbootstrap、JavaScriptフレームワークのVueをインストールしておきましょう。--saveレイアウトをつくる先ほどインストールしたbootstrap(のCSSだけ)を使ってレイアウトを作っていきます。実際のHTMLコードはこちらです。require('./renderer.js')</script></body></html>まず、アドレスバーになる<input>、並べ替えを選択する<select>、そして最後にファイル一覧を表示する<div>タグがありますが、この部分をVueでレンダリングすることになります。class="clearfix"></div>の部分です。これがないとfloat:leftが効いているのでレイアウトが崩れるからです。実際のレイアウトです。フォルダ画像はいらすとやさんの画像を使わせていただいてます。_mでは、このレイアウトを使って次からJavaScriptを作っていきましょう。JavaScript部分をつくるVueの基本形をつくるまずはVueの基本形です。Vue()でインスタンスを作っています。})</script>アドレスバーの部分をつくるまずはアドレスバーから作っていきます。Vueの変数dataに現在のアドレスを格納するpathを登録します。}})そして、アドレスバーを表示することなっている<input>タグのvalueをv-modelへ変更してpathをバインディングします。v-model="path">そして、getHomePath()を作ってホームディレクトリが取得できるようにし、ページが読み込まれたら、すぐにホームディレクトリへ移動するようにします。this.getHomePath()}getHomePath()では、Windowsとその他ではホームフォルダのパスが格納されている環境変数の場所が違うのでキーを切り替えて取得しています。これでページが表示されたら、このようにホームフォルダのパスが自動で表示されるようになります。並べ替えの部分をつくるでは次にページ右上にある並べ替え部分をつくっていきます。並べ替えに必要な変数です。dataに、選択肢のインデックスを保持するsortと、並べ替えの選択肢データsortOptionsをそれぞれ登録します。]},続いて変数のバインディングです。:value="index"></option></select>まず<select>には選択されたsortを、そして<option>ではv-forでsortOptionsをループさせ各データを設定します。これをVueでレンダリングすると以下のようになります。value="3">変更日時(降順)</option></select>フォルダの中身を表示する続いて、アドレスバーのパスが変更になったタイミングで、ファイル一覧の表示を変更する部分をつくっていきましょう。このアプリではフォルダ移動ができるようにしたいので、表示すべきものは次の2つです。フォルダ画像ファイルファイルとフォルダを読み込む準備をするでは、フォルダ内を読み込んで取得した「フォルダ名」と「画像ファイル名」を保持しておく変数imagesとfoldersをdataに登録しましょう。[]},そして、ファイルとパスを管理するモジュールfsとpathを読み込んで使えるようにしておきます。require('path')アドレスが変更になったら実行するコードをつくるでは、ここからpathに変更があった時のコードになります。watchにpathを登録して内容に変更があったらloadFolder()を実行するようにします。changeイベントやinputイベントではmounted()内でホームディレクトリが変更されても起動できないためwatchにしています。loadFolder()の中身はこうなります。}}まずこのメソッドが呼ばれたらすぐにimagesとfoldersを初期化します。existsSync()で現在のパスが存在しているかをチェックし、もし存在していれば、その中にある全てのファイルとフォルダを取得します。フォルダ」「更新時間」の5データをオブジェクト化します。今回は不要となるファイルを次の2つの条件で除外します。拡張子が「.png」など画像のものである。隠しフォルダではない(つまりドット.から始まらない)これでfilesの中にはフォルダと画像ファイルのデータのみになりましたので、後はforループでひとつひとつ画像ならimagesへ、フォルダならfoldersへそれぞれ格納していきます。画像ファイル、フォルダの並べ替えをするでは「画像ファイル」と「フォルダ」を現在選択されている形式で並べ替えましょう。実際に並べ替えをするメソッドsortFiles()を作ります。ファイル名を連番でリネームするアプリをつくるで開発したものを使っています。このメソッドを使って並べ替え済みデータを作ります。並べ替えはキャッシュが効いていた方が高速表示に有利なのでcomputedに擬似変数として登録します。}}これで、sortedImagesとsortedFoldersで並べ替え済みのファイルデータが取得できるようになりました。フォルダを表示するでは、まずはfoldersを使ってフォルダを表示してみます。</a></div>まずv-forで並べ替え済みのフォルダをループさせます。ループの中ではクリックされたときにフォルダを移動するメソッドchangePath()を呼び、また、v-textを使ってフォルダ名も表示します。changePath()の中身はこうなります。}}内容としては、現在のパスが/で終わっている場合はそのまま、それ以外の場合は/を足して新しいパスを作っています。実際に実行した画像がこちらです。クリックするとアドレスバーのパスが変更になり、さらに下層のフォルダ内容が表示されるようになっています。画像ファイルを表示するでは画像ファイルも同じやり方で表示できるようにしましょう。</a></div>先ほどとほとんど同じですが、<img>タグ内の:srcに各画像のパスを設定しています。画像がクリックされたときはopenImage()を呼ぶようにしています。ここで画像を開く}これを実行した画像がこちらです。画像を開く部分をつくるでは画像がクリックされたときにウィンドウを開き、その中に画像を表示するようにしてみましょう。ウィンドウを開くために必要なモジュールを読み込み、ウィンドウを保持する変数viewerをdataへ追加します。null},そして、先ほど作ったopenImage()内で次のようにします。viewer.loadFile(image.path)}やっているのは、新しいウィンドウをBrowserWindowで作成し、loadFile()を使って画像のパスを呼び出しているだけです。これで画像がクリックされると新しいウィンドウ内で画像が表示されるようになりました。実際の例はこちらです。(透過画像なので背景が黒になっています。)お疲れ様でした!おまけさすがに「上の階層へ移動する」ボタンがないとテストも不便なのでつけることにしました。「ホームボタン」もつくります。以下のように2つのグループ化されたボタンをつくり、それぞれクリックイベントにupPath()とhomePath()を実行できるようにします。</div></div>そして、実行されるメソッドはこうなります。this.getHomePath()},それぞれ、対象になるパスを取得してpathの内容を変更しているだけです。watchが効いているのでこれを変更するだけで表示内容が自動で変更されます。実際の画像はこちらです。これでホームディレクトリにも上の階層への移動もクリック1つでOKになりました。教材ソースコードをダウンロードする今回実際に開発したソースコード一式を以下からダウンロードすることができます。npmのインストールやフォルダ画像はご自身で用意してください。今回は基本的な部分の説明ということで省略していますが、本来画像はメモリの使用量を減らすため、サムネイルを作ってそちらを表示すべきです。そのため、あまりにも多く画像がある場所を表示してしまうと処理が止まってしまう可能性がありますのでご注意ください。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。