世界を旅して人生を楽しもう。ビルド編Congratulations!!ここまでお疲れ様でした。前回までで「文章を話すデスクトップアプリ」の全機能は完成しました。残りはアプリを配布するために重要なトピック、そう、ビルドです。Electronのビルドは必要?今までElectronのアプリをどう実行していましたか?そうです。NPMのScriptsからelectronコマンドで実行していました。installなんてしれくれないですし、PCにNodeJSやGitは入っていないから実行できません。仮に開発者専用ツールなどでエンドユーザがエンジニアだったとしても、例えばMac上で作られたツールをWindows上で動かさなければならない場合は誰も使ってくれません。エラーが出るに決まってるからです。エラーを解析してプルリクくれる親切な人なら良いですが、大抵は違います。エラーを解析するより別のツールを捜した方が早いからです。そこで、解決策として、Electronの実行環境を含めたパッケージとしてアプリを提供しようと言う訳です。パッケージ化する際にMacやWindows、Linuxなど配布する環境に合わせてビルドすることで、誰でも実行できるようになります。誰でも実行できるなら人気のアプリになるかもしれませんよね。宿題の確認(アイコンの配置)前回の宿題を覚えていますか?え?忘れた?廊下に立ってなさい(笑)秀才の方々はアイコンを準備していると思います。そのアイコンを以下の場所(プロジェクトフォルダ配下のassetsフォルダ)に配置してください。ファイル名はとりあえず「icon.icns」としましょう。ビルドのためのツールのインストールビルドにはelectron-packagerを使います。このパッケージはwineというライブラリに依存しているため、先にそれをインストールしましょう。wine次に、electron-packagerをインストールします。--save-devこれで準備はできました。ビルドを実行してみるまず、package.jsonにアプリ名(productName)を追加し、scriptsにビルドコマンドを追加します。},今回はelectron-packagerで以下の設定をしました。コマンド実行時に出力先のファイルを上書きするそれではコマンドを実行してみましょう。to:build/SpeakSentences-darwin-x64build/SpeakSentences-win32-x64成功すれば、Mac用とWindows用のフォルダが作成されます。ビルドで作成されたアプリを実行してみましょう。コマンドラインから実行していますが、単純にフォルダを開いてSpeakSentences.appをクリックしても起動します。通常のデスクトップアプリと同じです。build/SpeakSentences-darwin-x64/SpeakSentences.app前回までで完成させた「文章を話すデスクトップアプリ」がプロダクション版で起動すれば成功です。メニューバーがアプリ名になっています。アイコンを設定していればアイコンも設定したものなります。ここまでやると達成感がありませんか?いい感じです。最後に今回でこのシリーズは終了です。楽しんでいいただけましたか?Electronって楽しいですよね?ここで得た知識を活かして何か便利なアプリを作ったらコメントくださいね。Step実は、Electronにはもう一つ大事なトピックが残っています。Reactなどのフロントエンドフレームワークとのインテグレーションです。本当はそこまで記事にしようと思ったのですが疲れてしまったので後は皆さんにお任せします。ここまで来た皆さんなら自力で実現できると思いますので、興味があれば調べて挑戦してみてください。最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日本語の情報が少なすぎるからです。毎日英語の勉強を必ずしています。英語の勉強は時間のかかる戦いです。一度でも立ち止まってしまったら終わりです。「継続は力なり」という古い言葉を噛み締めています。皆さんはペラペラですか?前回までで「文章を話すデスクトップアプリ」の機能は全て作り終えました。このデスクトップアプリを世の中に出すには問題がいくつかあります。今回はその一つであるメニューバーをカスタマイズしてみましょう。メニューバーとは?デスクトップアプリのメニューバーと言ってイメージできますか?そうです、アプリを起動している時に左上にあるメニューのことです。前回までのアプリを起動していみると、メニューバーはデフォルトのままなので、以下のようになっています。これじゃ、いくらなんでも誰かにアプリを提供できません。メニューバーをカスタマイズする必要があるわけです。ドキュメントを読んでみようElectronではMenuオブジェクトを使ってメニューバーのカスタマイズを行います。以下のドキュメントに軽く目を通して下さい。コーディングしよう!それではメニューバーをカスタマイズしていきましょう。独自メニューバーを作る今回はデフォルトのメニューバーを無効化した上で、簡単にアプリが終了できるようにQuitのメニューをメニューバーに追加してみましょう。いつも通りまずはフォルダ構成を確認します。package.json変更するファイルはindex.jsだけです。以下のコードを追加しましょう。}];MenuオブジェクトのbuildFromTemplateを使い、Javascriptオブジェクトの配列として書いたメニューから、カスタマイズされたメニューバーを生成して登録しています。Command+Qで終了するようにショートカットも設定しています。開発者用メニューバーを作る先程の独自メニューバーには開発する上で問題があります。Webデザイナかフロントエンジニアならすぐに気づいたと思いますが、Command+Alt+Iが効かないのです。プロダクションとしてはそれで良いですが、開発する場合は困ってしまいます。いうことで、Developメニューを追加しましょう。以下をindex.jsに追記します。});}NodeJSの環境変数であるprocess.env.NODE_ENVに応じて、プロダクション版か開発者版かを切り替えるようにしています。必要に応じてメニューバーを調整するここまででメニューのカスタマイズは完成しています。あとは好みの問題だとは思いますが、Macの場合はメニューテンプレートの一番最初のラベルがアプリケーションのラベルと重なってしまい見えません。これをわかった上で今回は作っているので問題ありませんが、ズラして表示したい場合は以下のコードを追加しましょう。同様にindex.jsに以下を追加するとメニューバーのラベルが全て見えるようになります。menuTemplate.unshift({});}これを設定すると、以下になっていたものが。以下のようになります。Macの場合、だいたいアプリ名の下にメニューがありますから、この動きを前提に作った方が個人的には自然な気がします。開発者版とプロダクション版でコマンドを分けるNodeJSでは当たり前ですが、process.env.NODE_ENVによって動きを分けているので、コマンドも分けます。以下のようにpackage.jsonのscriptsを変更しましょう。全体のソースコード(今回編集分)今回編集したソースコードの全体は以下です。動かして確認しよう!では起動してみます。プロダクト版と開発者版でメニューバーが変わるか確認していきましょう。electron以下のようにメニューバーが表示され、メニューやショートカットが動けば成功です。production以下のようにメニューバーからDevelopメニューが消えていれば成功です。これでメニューバーを他人に見せても恥ずかしくないですね。次回はこのデスクトップアプリをビルドします。次回までにicnsのアイコン画像の準備をお願いします。無い場合はアイコン無しで進められますが、若干物足りなさがありますので、準備することをお薦めします。最後に今回でアプリ作成としては終了です。必要に応じてCSSなどでデザインを飾っていくとオシャレになっていきますよ。次回はこのシリーズの最後の、Electronのビルドです。ここまでくればそれなりのものを作って配布できるようになります。APIを使った音声機能実装編コーヒー豆が尽きた時にインスタントにするのですが味気ない。自分はそんなにコーヒーの味にうるさい方では無いのですが、ドリップしたての香りがたまらないのです。新しいものを買うことは常にメリットがあります。今まで使っていた商品か新しい商品かを選択できるチャンスです。新しい商品を買って後悔します。コーヒーの場合はね(笑)前回は「文章を話すデスクトップアプリ」の基本機能まで作りました。今回はメイン機能である音声機能を作りましょう。使ったことがある人なら余裕でElectronとインテグレーションできます。前回のおさらい一流たるもの我慢強くなければならないElectronのウィンドウ間のデータ通信方式にはIPCシステムが使われているElectronアプリ作成はやってみると結構簡単。Recognition)から成る音声機能APIです。各ブラウザで実験的に実装が開始されており、ChromiumからできているElectronでもこの実験的な機能を利用することができます。今回はこのAPIの音声合成機能を使っていきます。(ちなみに、音声認識機能に関しては使うまでに少しハードルがあります。Keyの取得が求められ、かつ、50回/日の制限付きです。この機能も面白いので試してみたい方は調べてみて下さい。electron」のように渡してあげれば良いです。APIという有料のクラウドサービスを開始しています。無料なオープン展開を基本としているGoogleにしては残念なサービスですが、サポートもあるのでお金がある人にとってはいいかもしれません。音声機能を追加しよう!それでは作っていきましょう。今回追加する機能の確認まずは今回追加する機能を確認します。前回のUIイメージを思い出してください。残っている機能は?そうです!Speakボタンが残っていました。このボタンをクリックした時に文章を読み上げてほしいのです。文章読み上げ中に中断できるように同じボタンをクリックすると音声が停止する機能も一緒に作りましょう。Speak機能のコーディング一応前回のフォルダ構成を見てみましょう。package.json今回編集するのはindex.htmlだけです。全体のソースコード全体のコードは以下のようになります。動かしてみましょう!最後に実行して動作確認をしてみましょう。electron以下の画面が表示され、Speakボタンで文章を読み上げてくれれば、成功です!なかなか日本語の発音が良いですよね(笑)最後に今回で一通りの機能実装は完了しました。これで終わり?とんでもない。次回からは周辺の小さい機能を追加していきます。ヒントはメニューバーです(笑)それでは。AuthorKD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。