簡単なお絵かきアプリをつくる(ダウンロード可)さてさて、このところElectronアプリの記事をよく書いているので、いろいろと新しい発見があり、スキルも向上しているのでは??と個人的に嬉しい状況が続いています。これまであまりデスクトップアプリに関わる機会がなかったため、Electron開発は初めて海外に行った時のような新鮮な気分になったりもしています。多くの人にもそんな新鮮さを感じてもらいたいので、今回はビギナーさんたちのために、できるだけ簡単につくれるお絵かきアプリの作り方を紹介します。最後に教材ソースコードをダウンロードできますので、ぜひ参考にしながら開発してみてくださいね。合わせて読みたいやりたいことマウスを使って自由に絵を描ける色を変更できる画像を保存できるの3つです。詳しく書いてあるので、そちらを見てください。フォルダ名はoekaki(お絵かき)です。アプリの設定をするアプリの設定はmain.jsで行います。初期状態ではウィンドウサイズが800x600という設定だけが書かれています。600})この部分を次のようにしてウィンドウサイズ、位置、そしてメニューバーを非表示にします。startコマンドでElectronを実行すると次のようなウィンドウが表示されます。このウィンドウ上にお絵かきアプリのレイアウトを作っていきましょう!レイアウトをつくるレイアウトを作るのに便利なので、bootstrapをインストールします。--saveではレイアウトのHTMLコードです。require('./renderer.js')</script></body></html>まずbootstrapのCSSを読み込んで、上から色選択ボックス、キャンバス、最後に保存ボタンを配置しています。ちなみに<canvas>のサイズをCSSで指定すると歪んでしまうことがありますので、サイズはHTMLのプロパティにwidthとheight追加してください。実際の例がこちらです。白い空白部分に絵を描けるようにします。次からJavaScriptの部分をつくっていきましょう!JavaScript部分をつくる色選択する部分をつくるいつもならVueを使ってサクッとコードを作っていきますが、今回は初心者向けですので、どのような環境にも適用できるネイティブなJavaScript(つまりフレームワークを使わない)でコードを書いていきます。};</script>まず、colorという色を保持する変数を作っておきます。ページが表示された時点で色の選択ボックス(.color-box)全てにクリック・イベントを設定し、クリックされたら背景色を取得してcolorを更新するようにしています。キャンバスに絵を描く部分をつくる続いてキャンバスに絵を描く部分です。falseを切り替えます。mousemoveイベントで、マウスがクリックされている場合は<canvas>に絵を描くようにします。キャンバスは初期状態では背景が透過になるので、始めに白で全体を塗りつぶしています。実際に絵を描いてみましょう!うまくいきました!キャンバスの絵を保存するでは最後にキャンバスに書いた絵を保存する部分です。if(confirm('画像を保存します。};</script>まず、画像を保存する必要があるのでファイル操作モジュールのfsを読み込みます。ボタンがクリックされたら、まず保存をするかどうかを確認をします。OKが選択されたら、キャンバスからdataURL(画像データをbase64形式にしたもの)を取得し、不要な部分を取り除いてpng画像で保存しています。ちなみにファイル名は過去の画像が上書きされないようにDate.now()を使っています。テストしてみるでは、実際にテストしてみましょう!保存するのは次の絵(字?)ですまず保存ボタンをクリックすると確認ダイアログがでます。すると完了メッセージが表示されます。フォルダを確認してみましょう。画像が保存されました!実際に保存された画像はこちらです。お疲れ様でした!教材ソースコードをダウンロードする今回実際に開発したソースコードを以下からダウンロードできます。npmパッケージはご自身でインストールしてください。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。