簡単なメモ帳をつくってみようという記事が思いのほか好評のようでした。正直な所Electronの開発は個人的にも好きなので、せっかくなら何かブログ執筆に役立つアプリをつくってみようと考えるようになりました。ファイルを選んで(複数可)Electronのウィンドウに持っていけば、自動でリサイズが実行できるという便利アプリですね。いうのも、このブログの画像は最大横幅を640pxと決めていているのですが、たまに大きな画像がたくさんあるときはいちいちconvertコマンドを打って変換していて、なかなかめんどうなのです。詳しく書いてあるので、そちらを見てください。フォルダ名はauto-resizeです。アプリの設定をするアプリの設定はmain.jsで行います。省略まず、モジュール読み込みはモニター(デスクトップ)のサイズを取得するためにelectronが必要なので、3行に分けています。実際にウィンドウを作るcreateWindow()の中では、ウィンドウのサイズ、メニューバー非表示、そして位置がトップの中央にくるよう計算して設定しています。これで、このアプリを起動すると画像の位置にウィンドウが現れるようになりました。レイアウトをつくるでは、アプリのレイアウトをつくりましょう。ここはCSSフレームワークを使ってサクッとつくりたいので次のコマンドでbootstrapをインストールします。--saveまた、今回もJSフレームワークにはVueを使うのでこちらもインストールします。--saveでは、index.htmlにこの2つをセットしてレイアウトを作ります。class="receiving-box-inner">画像をドラッグ&ドロップしてください。require('./renderer.js')</script></body></html>このコードを実行するとこうなります。JavaScript部分をつくるでは本題の画像をリサイズする部分を作っていきましょう。Vueの基本形をつくるまずVue.jsを読み込み基本形を作ります。})</script>もちろんHTMLタグへid登録するのも忘れないでください。class="container">横幅・高さの入力部分をつくるサイズ指定の入力ボックスに変数width、heightをそれぞれv-modelでバインディングしてリアルタイムに中身が変更されるようにします。}})ドラッグ&ドロップのイベントをつくるでは続いて画像がドラッグ&ドロップされたときのイベントをつくります。ページが表示された時点で必ず実行されるmounted内にコードを書きましょう。ちなみにondropだけでいいような気がしますが、実際にはその他のイベントでe.preventDefault()をしておく必要があります。画像編集パッケージをインストールするでは、実際に画像をリサイズするコードをつくる前にJavaScriptで画像編集ができるlovell/sharpをインストールしておきましょう。--saveそして、sharpを読み込みます。require('sharp');</script>(注意)ただし、これだけでは実際にはアプリは起動できなくなります。sharpはnodeのネイティブモジュールなので、electron用に再構築する必要があるからです。そのため、続いて次の作業も実行しておきましょう。再構築パッケージをインストールします。electron-rebuildそして、次のコマンドで再構築を実行します。./node_modules/.bin/electron-rebuild画像リサイズ部分をつくるまずは、ファイル操作に必要な2つのモジュールfs、pathを呼び出します。require('path');</script>そして、methodsにresize()を作ってこの中で画像をリサイズしていきます。alert('最低でも横幅か高さは指定してください。画像のファイル名はresize-******になります。リサイズ情報にあるsharp.fit.fillはアスペクト比(縦横比)を無視する設定です。テストしてみるでは次の画像を使って実際にテストしてみましょう。ピクセル)横幅を決めてリサイズするまずは横幅を150px、高さを0(自動)にしてやってみましょう。ファイルをアプリの中へドラッグ&ドロップします。すると新しい画像が作成されました。実際に作成された画像です。横幅150px、高さが160pxの画像ができました。成功です!高さを決めてリサイズするでは、次は逆に横幅を0(自動)にして、高さ200pxでやってみましょう。結果はこうなりました。横幅188px、高さが200pxの画像です。横幅と高さを決めてリサイズするでは、最後に横幅を300px、高さ150pxでやってみましょう。画像としては歪んでしまいましたが、思い通りにいきました。おまけフォーカスしたら数字を自動選択するようにするいちいち横幅や高さの数字を消してから入力するのはめんどうなので、フォーカスがあたったら選択状態にするようにします。@focus="($event.target.select())">最後の横幅と高さを自動保存する毎回サイズを入力するのはめんどうなので、横幅と高さのデータをjsonファイルに保存し、アプリ起動時に前のデータを代入するようにしましょう。サイズを保存するコードまず、変数が変化したときに呼ばれるwatchにwidthとheightを監視するようにし、変化があったらsaveSize()を呼ぶようにします。}},そして、saveSize()ではこれら横幅と高さ2つのデータをJSONにして保存します。json)}サイズを呼び出すコードまず、保存したJSONファイルからサイズを取得するloadSize()を作ります。}}そして、mounted()の中でこのloadSize()を呼ぶようにすればOKです。説明のために直書きしましたが、size.jsonファイル名は一元管理すべきなのでdataに入れておくべきです。'size.json'},教材ソースコードをダウンロードする今回実際に開発したソースコード一式を以下からダウンロードすることができます。npmのパッケージなどはご自身でインストールしてください。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。