アニメGIFをつくるアプリ(ダウンロード可)さてさて、これまでウェブかコマンドラインばかりの開発だったのがElectronでデスクトップアプリを開発をするようになって、まだまだ試しにやってみたいことが思い浮かんできています。Electronはアップロードをせずにデスクトップ上のファイルにアクセスができるので、画像やテキストなどファイル関連の機能と親和性が高いのかなと感じています。そこで、今回開発するアプリは「アニメGIFをつくる」アプリです。gif)とは、動画のように動かすことができる画像のことで、次のようなものです。インターネット上でも珍しくないのでみなさんも一度は見たことがあるんじゃないでしょうか。このアニメGIF、「動きを見せたいんだけど、JavaScriptとか動画にするまででもないよな・・・」なんてときに使えます。動画ほどファイルサイズが大きくもないので配布するにも都合が良かったりします。合わせて読みたいやりたいことアニメGIFをつくるといっても、せっかくElectronでアプリを作るので、次の機能もつけることにしました。アニメGIFの作成はImageMagickを使います。そのため、事前にImageMagickが使えるようインストールしておいてください。私の同じくUbuntu環境でしたら以下のコマンドでインストールできます。詳しく書いてあるので、そちらを見てください。フォルダ名はanime-gif-makerです。アプリの設定main.jsを開いてウィンドウサイズ、位置、メニューバーの非表示を設定します。true})また、私の環境のようにLinuxを使っているとアプリ上でドラッグ&ドロップするとクラッシュしてしまうバグがあるので、app.disableHardwareAcceleration()を使ってこれを回避しておきます。require('electron')app.disableHardwareAcceleration()CSS、JSのフレームワークレイアウト用にbootstrap、JavaScript用にVue、そして要素をドラッグ&ドロップで並べ替えることができるsortablejsをインストールします。--saveレイアウトをつくるでは、bootstrapを使ってレイアウトをつくります。type="file">ではなく、ボタンをクリックすることで「ファイル選択ダイアログ」が表示されるテクニックを使っています。ファイル選択できるのはaccept="image/*"で画像だけに制限し、multipleで複数選択を許可しています。<select>で画像が切り替わる間隔を指定できるようにし、選択された画像のリストはドラッグ&ドロップで順番を入れ替えられるようにしています。実際の画像はこちらです。JavaScript部分をつくっていきましょう!JavaScript部分をつくるVueの基本形をつくるまずはVueを読み込んで基本形をつくります。})</script>画像を選択する部分をつくる次に画像の選択部分です。type="file">にファイルが選択されたときに実行するsetImages()をクリックイベントとして設定します。hidden>そして、dataに選択された画像ファイルのデータが入るfilesを追加し、さらにmethodsにもsetImage()を追加します。}}これで、ファイルが選択されたら自動的にfilesにデータが反映されることになります。切り替わり時間の部分をつくる次に切り替わる間隔を選択するセレクトボックスの部分です。dataへ時間を格納するtimeを追加。v-modelでバインディングします。10}そして、いつもならtimeOptionsなどとして選択肢も追加するのですが、今回はv-forの数字バージョンを使うことにします。秒)</option></select>実行したものがこちらです。画像が表示される部分をつくる画像がドラッグ&ドロップで並べ替えられるようにしたいので、先ほどインストールしたsortablejsを読み込みます。src="***">ではうまくいきません。次に、画像をv-forでレンダリングします。class="image"></div>data-indexの部分は、後で画像の順番を決める時に使います。画像が選択されたらimage-containerへSortableを設定します。Vue.nextTick()を使っているのは、確実に表示がVueによって変更された後でSortableを設定するためです。どんな風に表示されるかをチェックしてみましょう。うまくいきました!ドラッグ&ドロップで画像を移動させることもできます。アニメGIFをつくる部分をつくるでは、やっと本題にたどりつきました。「アニメGIFをつくる」ボタンがクリックされたときのコードをつくっていきます。ファイル操作をするモジュールfs、コマンドを実行するspawnが使えるように読み込みます。require('child_process')なお、ImageMagickのコマンドではファイル名が連番になっている必要があるため、tmpというフォルダを作っておき、ここへ選択された画像のコピーを作ってからコマンドを実行するようにします。generateAnimatedGif()が実行されるクリック・イベントです。@click="generateAnimatedGif()">アニメGIFをつくる</button>generateAnimatedGif()、その中で呼び出すrefreshTempFiles()、makeTempFiles()はこうなります。})}まずrefreshTempFIles()でtmpフォルダ内の全ファイルを削除します。makeTempFiles()でimage-containerの中にある画像をchildNodesで取得し一時ファイルを連番で作成していきます。最後にspawnでコマンドを実行しますが、ここで重要なのが/usr/bin/convertや/usr/shなどのパスです。convertなどでコマンドを実行すると表示される絶対パスです(Windowsの場合はwhere)。パスが通っていれば問題ありませんが念の為この形にしています。各自環境に合わせて変更してください。removeをつけて透過部分を削除するようにしています。実際に今回のアプリを使って作成したアニメGIFをご覧ください。↓↓↓お疲れ様でした!教材ソースコードをダウンロードする今回実際に開発したソースコード一式をダウンロードすることができます。npmのインストールやアニメGIF化する画像はご自身で用意してください。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。