電子：動機から出版まで

-必要なことを実行できるアプリケーションが必要です。 残念なことではありません。

「なぜ自分で書いてみませんか？」

-これは困難です。理論を理解し、実践し始めるのに多くの時間がかかります。 一般的に、私はフロントエンド開発者であり、HTML、CSS、JSに慣れています。 このスタックでは、デスクトップアプリケーションを作成できません。

-電子！

私たちのほとんどがスクリーンショットを共有していると確信しています。 スクリーンショットを撮り、何らかの方法でそれらを編集（クロップ、描画など）できるアプリケーションが多数あります。 私の頭に浮かぶ最初の3つ：Joxy、Monosnap、Gyazo。

タスクとツールがあれば、さらに何が欲しいでしょうか？ しかし、いや、それほど単純ではありません。

アプリケーションを検索した基準

サーバーにスクリーンショットを保存する

アプリケーションが画像を保存した場所を探して添付するよりも、スクリーンショットへのリンクをドロップする方がはるかに便利です。 もちろん、どこかでスクリーンショットを保存することを好まない人もいます。 しかし、一方で、これにより、問題をすばやく解決できます-スクリーンショットを共有します。 このアプリケーションの動作モデルは私にぴったりです。

スクリーンショットの描画

私自身の経験から、ほとんどすべてのスクリーンショットに矢印があると言えます。 「これは...の間にある」というようなことを書くよりも、いくつかの詳細を指す方がはるかに簡単です。 また、私の意見では、スクリーンショットの描画ツールの標準セットに鉛筆、長方形、テキストを含める必要があります。 同時に、描画した要素を移動、反転、削除する機能が必要です。

Linuxバージョン

結局のところ、Linuxでのこのタスクには多くのアプリケーションは存在しません。 長い間、Gyazoを使用していましたが、スクリーンショットで「炊飯器」の費用を支払う必要がなければ、Gyazoをさらに使用していました。

箱から出して

アプリケーションは必要に応じてすぐに動作するはずです。 何も設定したり、あらゆる種類のImgurに登録したりする必要はありません。スクリーンショットをキャプチャし、振りかけ、保存し、リンクを共有したいだけです。

年間を通して定期的に検索しましたが、最終的に自分の要件を満たすアプリケーションが見つかりませんでした。

電子

時間が経ち、私は彼が原理的に知っていることを理解するためにより近くElectronを知ることにした。 知らない人のために、Electronは、HTML、CSS、およびJavaScriptを使用してデスクトップアプリケーションを作成できるテクノロジーです。

また、デモの1つでは、ユーザーの画面のスクリーンショットを取得する方法を示しました。 これは次のことを意味していました。

• 最終的に私の要件を満たすアプリケーションを作成できます。
• 実際のプロジェクトで新しいテクノロジーに慣れる機会

どこへ、どこから始めて、どのように機能するか

私は何か新しいことを学びたいと思うたびにこれらの質問を自問します。 多くの場合、解決策は同じです-ドキュメントと何らかの公式の「はじめに」。 Electronは両方ともうまくいっています。 少なくとも彼らはプロジェクトのウェブサイトにそのように書いています-「あなたが思っているより簡単です。」 本当にそうです！ すぐに理解する必要があるのは、アプリケーションがメインとレンダラーの2つのプロセスで構成されていることだけです。 Mainでは、アプリケーションウィンドウ、メニューなどを操作します。Rendererでは、基本的にページのみがあります。

アプリケーションを開始する場所

まず、次の構造を持つプロジェクトを作成しましょう。

-パッケージ、json

-main.js

-スクリプト

-renderer.js

そもそも、これで十分です。 main.jsには、メインプロセスに関連するコード、およびスクリプト-> renderer.jsレンダリングが含まれます。 次に、アプリケーション自体を作成する必要があります。 これを行うには、main.jsに次のように記述します。

const electron = require('electron'); const app = electron.app; app.on('ready', () => { createWindow(); }); app.on('window-all-closed', function() { app.quit(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に何をしましたか？ Electronを接続し、アプリケーション自体を作成し、2つのハンドラーについて説明しました。 アプリケーションの準備ができたら、関数を呼び出して新しいウィンドウを作成します。 そして、すべてのウィンドウが閉じられた瞬間に-アプリケーションプロセスを終了します。

窓

さて、これで申請プロセス自体ができました。 次に、彼のためにウィンドウを作成したいと思います。 createWindow（）;と呼ばれたことを覚えていますか？ だから彼女を説明する時が来ました。

 function createWindow() { appWindow = new BrowserWindow({ width: 300, height: 300 }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の接続も必要です。

 const BrowserWindow = electron.BrowserWindow;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、指定された寸法のウィンドウを作成しました。 とても簡単ですよね？

ウィンドウには、多くのプロパティ、メソッド、イベントが関連付けられています。 例：タイトル、アイコン、x、y、表示（）、非表示（）、閉じる（）、最小化、閉じる、復元、サイズ変更。 リスト全体をリストするのは役に立たないので、ここにブラウザWIndowへのリンクがあります。

しかし、空のウィンドウを見ることはあまり楽しくありませんよね？ タイトル「Hello、world！」を含む簡単なページをアップロードしましょう。 main.js



のレベルで、 <h1>Hello, World!</h1>



て最も一般的なページのように見えるindex.htmlファイルを作成します。 あとは、createWindow（）関数を追加して、

 appWindow.loadURL(`file://${__dirname}/index.html`);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションを起動して、以下を確認します。

ちょっとした魔法:)しかし、ちょっと悲しいことについて。

デバッグする

しかし、実際にエラーをキャッチする方法は？ すべてが可能な限りシンプルです！ エラーがメインプロセスにある場合、アプリケーションを起動したコンソールでエラーが発生します。 ページ自体のエラーをキャッチするには、ブラウザコンソールを使用します。 はい、まさに！ 私たちのアプリケーションは、実際にはブラウザーで実行されているページです。 コンソールを有効にするには、 createWindow();



追加しましょうcreateWindow();



行： appWindow.webContents.openDevTools();



。 アプリケーションを起動すると、すぐにコンソールが表示されます。

メニュー

これまでのところ、ウィンドウ内のページのみが取得されました。 たとえば、メニューを使用して、何らかの形で彼女とやり取りしたいと思います。 このため、Electronには特別なメニュークラスがあります。 タスクを設定します-1つの要素からメニューを作成するには、クリックすると「Hello」というタイトルのシステムポップアップウィンドウが表示されます。「Do you like this？」というメッセージが表示され、オプション['Yes'、 'No']に答えます。

main.jsに次のように記述します。

 const appMenu = require('./scripts/appMenu');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、scriptsディレクトリにappMenu.jsファイルを作成します。 その中には、次のコードが含まれています。

 const { shell } = require('electron'); const dialog = require('electron').dialog; const newShotDialog = { type: 'info', title: 'Hello', message: 'Do you like this?', buttons: ['Yes', 'No'] }; module.exports = function appMenu(app, appWindow) { return ( [ { label: 'File', submenu: [ { label: 'Click me', click() { dialog.showMessageBox(newShotDialog, function(index) { }) }, }, ], }, ] ); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに進みます。 app.on('ready'...



追加：

 const template = appMenu(app, appWindow); const menu = electron.Menu.buildFromTemplate(template); electron.Menu.setApplicationMenu(menu);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションを起動すると、メニューが小さくなり、1つの要素が含まれるようになります。 クリックすると、次のように表示されます。

実際に、タスクを解決しました。 記事全体をいくつかの抽象的なアプリケーション（オーディオプレーヤーなど）の作成に充てることができますが、それはすべて「何らかのコード」->「結果」で構成されます。タブを閉じて、彼自身のものを書きに行きました）。 したがって、この記事の残りの部分では、私の--shotsプロジェクトの例を使用して、いくつかの重要な、Electron機能の概要に専念します。 心配しないで、上記のアプリケーションはにあります。

--shotsを例にした、より多くのElectron機能

同意します。頻繁に使用するツール（作物、矢印など）を毎回メニューに移動することはあまり便利ではありません。 この問題は、ページを配置するページの領域にパネルを作成することで解決できます。 既により便利ですが（かさばるメニューを歩く必要はありません）、それでも完璧ではありません（手を差し伸べる必要があります）。

もっといいだろうか？

もちろんできます！ コンテキストメニューを使用しましょう。 ウィンドウ領域を右クリックして呼び出されます。 このようなメニューは項目で構成され、各項目を押すと、独自の機能が呼び出されます。 たとえば、このメニューに次の要素を配置しました。

• 新しいショット
• 保存する
• デフォルト
• 切り抜き
• 矢印
• 長方形
• ペン
• ぼかし

このツールセットは、アプリケーションのほぼすべての機能を利用します。

それとももっと良いですか？

はい、アプリケーション機能へのアクセスをさらに簡素化できます。 ホットキーを使用してこれを実現します。 ホットキーは、globalShortcutモジュールとregisterメソッドを使用して登録されます。 異なるオペレーティングシステムのキーボードの違いを覚えておく必要があります。 たとえば、LinuxおよびWindowsでCommandをリッスンすることは役に立ちません。 したがって、Electronの開発者はCommandOrControlを聞くことをお勧めします。

標準の場合のホットキーは、修飾子（CommandOrControl、Alt、Option ...）とキーコード（0-9、A-Z、Space、Tab ...）で構成されます。 2つのキーの組み合わせで構成される必要はないことに注意してください。 1つまたは3つ（おそらくそれ以上ですが、チェックしていません）があります。 たとえば、ホットキーのリストでモーダルウィンドウを使用するには、F2を使用し、ズーム（ズームイン） CommandOrControl+shift+Plus



を増やすために使用します。 そうでなければ、 CommandOrControl+shift+Plus



組み合わせがontrol+shift+=



変換されるため、このチェーンにshiftを追加する必要がありました。

プロセス通信

ほとんどの場合、あるプロセスから別のプロセスにメッセージを転送する必要があります（たとえば、そのような関数やそのような関数を呼び出してください）。 これにはipcRendererとipcMainがあります。 単純なタスクを設定して、それがどのように機能するかを見つけます。 メニューの項目をクリックすると、アラートを出す特定の関数を呼び出したいとします。 クリックハンドラーでは、 appWindow.webContents.send('show');



ようなものを記述しますappWindow.webContents.send('show');



。 これは次を意味します。レンダラープロセスでメニュー項目をクリックすると、「show」チャネルを介して非同期メッセージが送信されます。 追加の引数を渡すこともできるので、アラートにも渡された引数を出力させます。 以前に作成したappWindow.webContents.send('show', 'content');



をわずかに変更しappWindow.webContents.send('show', 'content');



。

レンダラープロセスでは次のように記述します。

 ipcRenderer.on('show', (event, message) => { alert(message) // Alerts 'content' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、すべてが非常に簡単です！

トレイ

アプリケーションが最小化されたままハングアップしないこと、さらに悪いことに、単に開いていることが便利です。 この問題を解決するトレイがあります。 そしてElectronは、トレイクラスを通して彼と一緒に仕事をすることを可能にします。

基本的にトレイアプリケーションとは何ですか？ これは、右クリックで呼び出されるアイコンとメニューです。 Trayクラスのコンストラクターは、アイコンというパラメーターを1つだけ受け入れることに注意してください。 このパラメーターが欠落している場合、エラーがスローされます。 最初は、これはまったく驚きませんでした。 コンストラクターには必須パラメーターがあります;親切-それを渡します。 少し後で、このパラメーターのバインドが将来的に奇妙に思えた理由を説明します。

アプリケーションアイコン

装飾についてもう少し話しましょう。 アプリケーションはアイコンなしでどのように動作しますか？！ これは、新しいウィンドウを作成したのと同じ場所に追加され、最後にアイコンを追加します：__dirname + '/icon.png'。 Windowsでは、* .ico形式のアイコンを使用することをお勧めします。 os.platform()



使用できるため、怖くありません。

私のページはシステムに到達できますか？

はい、もちろんです。 この記事の執筆時点では、Electronの現在のバージョンは1.4.6であり、NodeJS 6.5で動作します。 たとえば、-shotsには、ファイルをローカルに保存する機能があります。 これにはfs.writeFile



を使用しfs.writeFile



。 そして、そのような保存の前に毎回、スクリーンショット用のディレクトリがあるかどうかを確認します（「--shots」と呼びます）。 存在しない場合は、作成します。

Electronアプリケーションは、標準ウィンドウの単なるページではなく、本格的なアプリケーションであることを理解することは非常に重要です。

--shotsにない追加機能

当然、-shotsに取り組んでいる間、Electronのすべての機能を使用しませんでした。

たとえば、アプリケーションをAppStoreおよびWindowsStoreにアップロードできます。 しかし、-shotsはLInuxのアプリケーションとして考えられていたので、アプリケーションを公開するというこのジャングルのすべてに実際には触れませんでした。 しかし、アプリケーションをAppStoreに配置するには、署名する必要があることを知っています。 --shotsの新しいバージョンを作成するたびに、コンソールにこの警告が表示され、将来的に何も影響を及ぼさないように指を交差させます。

また、ElectronのWebサイトで「自動更新」というすばらしいアイテムを見つけることもできます。 しかし、私はそれを--shotsに結びつけることができませんでした。なぜなら、 記事を開いて見た：

「Linuxには自動アップデータのサポートが組み込まれていないため、ディストリビューションのパッケージマネージャーを使用してアプリを更新することをお勧めします。」

簡単に言えば、LInuxでは機能しません。 だから出て。 たとえば、サーバーに要求を送信すると、現在の現在のバージョンの番号が返され、アプリケーションのバージョンと一致しない場合は、更新を求めるメッセージが表示されます。

落とし穴

すべてがクールに聞こえますが、キャッチが必要です。 もちろん、いくつかの不快な瞬間があります：

すべてがクロスプラットフォームではない

これは、同じ自動更新の例でも顕著です。 透明なウィンドウでも、それほど単純ではありません。 たとえば、Linuxでは、コマンドラインで--enable-transparent-visuals --disable-gpu



を実行する必要があります。そうしないと、透明なウィンドウが表示されません。 同意して、インストール後にユーザーに端末に何かを運転するように要求するアプリケーションは、すでに疑いを提起し始めています。

最小化

これで問題を解決するのに多くの時間を費やしました。 その本質は次のとおりです。アプリケーションウィンドウを最小化すると、最小化イベントが発生し、ウィンドウが最小化されます。 すべてが大丈夫のようです。 しかし、アプリケーションは、トレイとドックにぶら下がっています-これはすでに奇妙です。 したがって、最小化をキャッチし、何らかの方法でアプリケーションをドックから削除して、トレイにのみ残したいと思います。 これにはhide（）メソッドがあります。 最小化するハンドラを作成し、hideを呼び出します。すべて問題ありません。 次に、トレイメニューからアプリケーションを展開する機能を追加したかったのですが、すぐにshow（）メソッドが見つかりました。 すべては論理的な表示/非表示ですが、いいえです。 トレイからアプリケーションをデプロイしようとすると、しっかりとハングします。 非常に長い間、私は重要なものが欠けていると思っていましたが、コンソールにエラーは表示されませんでした。 特に、show（）を呼び出す前にウィンドウ自体が表示されました-ウィンドウが存在します。 一般に、アプリケーションの同様のメカニズムを拒否し、アプリケーションウィンドウが開いているときにhide（）を呼び出すことを決定しました。 そして、はい、奇跡が起こりました。 すべてが正しく機能しました。 質問への答えを探すのに数時間を費やしました：「なぜ仕事をしませんか？」そして、最終的に、テレグラムは私に解決策を促しました。 メニューに「トレイに最小化する」という項目を追加し、同時にホットキーを追加しました。

一般的に、私にとってElectronの落とし穴は終わりました。 おそらく、私は幸運だった...

組立

アセンブリという、もうひとつの興味深いことについて話す時が来ました。 Electronは、アプリケーションを構築し、さまざまなオペレーティングシステムにインストールする機会を提供します。 ユーザーは、Webテクノロジーでアプリケーションを作成したことに気付かないこともあります。 さあ始めましょう！

標準的なアプローチ

ドキュメントセクションの公式Webサイトには、アセンブリ手順（Linux、MacOS、WINDOWS）への3つのリンクがあります。 このアプリケーションは元々Linuxで磨かれていたので、最初にリンクを開きました。 最初のシステム要件はすぐに私を驚かせました：「少なくとも25GBのディスクスペースと8GBのRAM」（少なくとも25GBの空きスペースと8GBのRAM）。 「わかりました、私は何ができますか？」私は考えて、例からアプリケーションを構築しようとし始めました。 その結果、アセンブリプロセス自体に20〜30分かかりました。さらに、コンピューターを使用することは不可能でした。 私はこのコレクターで働き続けなかったことを非常にうれしく思います。 1つの不快なことについて学びました。ある軸の下でアプリケーションを組み立てるには、この軸の下から正確に組み立てる必要があります。

「別の方法があるはずです」と私は自分に言いました。 そして、はい、それは存在します。

電子ビルダー

「電子ビルダー」をグーグルで検索し、最初のリンクをたどるだけで十分でした。 それ以来、私はこのコレクターを使用していますが、その理由は次のとおりです。

• アセンブリ-Linuxのショットには約1分かかりましたが、
• Linuxから.exe-shnikをビルドすることもできます（Wineをインストールする必要がありますが、大丈夫です）。
• 組み立てプロセス中にミームを見ることができますが、何も遅くなりません。

残っているのは、プロジェクトを正しく補足することだけです。

プロジェクトの準備

このプロセスは2段階に分けることができます。

• アイコンの準備
• package.jsonを準備しています。

アイコン

アプリケーションをインストールすると、独自のアイコンが必要になります。 これを行うには、プロジェクトのルートディレクトリに「build」ディレクトリを作成する必要があります。このディレクトリは次のように入力できます。

-ビルド

-アイコン

——— 32x32.png

——— 32x32.png.ico

-icon.icns

-icon.ico

Package.json

プロジェクトをビルドしようとすると、コンソールからエラーが発生し始めます。 これは、ファイルに標準行が含まれている必要があるためです。

• 名前、
• 説明、
• バージョン、
• 著者。

次に、「ビルド」と「スクリプト」を記述する必要があります。 私は意図的にこれらの2つのポイントをすばやく調べました。 内部にあるものを覚えておく必要はありません。特に、（「ビルド」用の）膨大な数の設定があると考える場合はほとんど不可能です。 たとえば、Windowsの場合、アプリケーションのポータブルバージョンをビルドし、起動時に表示されるgifファイルを指定できます。

一般に、アセンブリにはElectron Builderを使用することをお勧めします。 これはあなたの多くの神経を救います、私を信じてください。

Electronウェブサイトにアプリケーションを追加します

ElectronのサイトでElectronに関する私のプロジェクトについて話すのは良い考えだと思います。 これを行うには、以下を含むプルリクエストを送信します。

• 「_data / apps.yml」の編集（アプリケーションを最後に追加）;
• アプリケーションアイコン256x256ピクセルのpng形式。
• プロジェクトに関連付けられており、チームのすべてのメンバーがアプリケーションがElectronのWebサイトに表示されることに同意することを示すメッセージ。

繰り返しますが、これは複雑なことではありません。 prを送信した後、あなたはただ我慢してそれが受け入れられるのを待つ必要があります（私の場合、約1週間かかりました）。

追加の詳細な手順については、 こちらをご覧ください 。

まとめると

いいえ、Electronはネイティブユーザーを市場から追い出すことも、React NativeがSwiftを殺すこともありません。 Electronはシンプルなアプリケーションを作成するのに適しており、非常に興味深いプロジェクトです。 そして彼はとてもシンプルだ！ フロントエンド開発者の標準技術スタックを使用して--shotsを作成できました。

• HTML
• CSS
• Postcss
• Javascript
• NodeJS
• Php

最初のコミットは2016年9月24日に行われ、最初のリリースはその年の10月17日にリリースされました。 これは、わずか24日後に、すでに使用できるバージョンのアプリケーションを受け取ったことを意味します。 私が仕事をしていてリラックスしたいと思うとき、これは十分に速いです。 だから、すべてがあなたの手にあります！

便利なリンク

• 公式サイト
• 電子アプリケーション
• ドキュメント
• アトムが議論する
• 電子ビルダー
• 素晴らしい電子
• -githubでのショット