VisualStudio2015で ElectronのTutorial

[2016年6月末更新] > Electron Documentation 1.2.5
![Electron_2016-3.png](https://qiita-image-store.s3.amazonaws.com/0/75594/fd4b975f-6c7d-930d-13b6-e4e0b582b341.png)

ElectronのQuick Startに沿って。

http://electron.atom.io/ の Documentation から、Tutorialの[Quick Start](http://electron.atom.io/docs/tutorial/quick-start/)へ。

VSの準備はこちらから。
> [Visual Studio 2015 - インストール ~ VCとnode.jsで "HelloWorld"](http://qiita.com/mt08/items/b9d5087c9d54c0a21ccc)

## 初回プロジェクト作成
VS2015から、
1. File > New > Project... で、Installed > Templetes > JavaScript > Node.jsから、"Blank Node.js Console Application"を選択。
2. 下の方を指定する。
Name: your-app
Location: (適当に)
Solution name: your-app
[v] Create directory for solution にチェック
[ ] Add to source control にチェックしない
3. [OK]押す。
![vsel2.png](https://qiita-image-store.s3.amazonaws.com/0/75594/687785b2-0b97-b915-a996-d11c8d8274e1.png)

## npmで関連のパッケージインストール
1. Solution Explorerのnpmで右クリックして、"Install New npm Packages..."。
初回、npmのパッケージリストを読みにいく(2016年6月末時点で約170MB total)ので、待つ。
2. Search for packages　(虫眼鏡)ってとこに、"`electron-prebuilt`"と入力して、`electron-prebuilt 1.2.5` をクリックして選択。
3. 右側のOptionsの
    - Dependency type: `Standard`
    - Add to package.json: [v] にチェック
    - Selected version: (latest)
4. `[Install Package]`をおす。
* Errorでたら、nodeにPATHが通ってない？コンパネ>プログラム機能と機能から、Node.jsを右クリック > 変更。[Next] , [Change]で、'Add to PATH'を選択、[Next], [Change], [Finish]。で、VisualStudio再起動。
5. インストールおわったら、[Close] 
![Electron_2016-1.png](https://qiita-image-store.s3.amazonaws.com/0/75594/f045535c-30f3-1d8b-56c3-992a956adaa5.png)
<font ![vsel3-1.png](https://qiita-image-store.s3.amazonaws.com/0/75594/65227bf1-9695-4574-6788-90ca2e0ceae5.png)></font>

## ファイルの準備。
1. Turorialにそっていくと、`package.json`, `main.js`, `index.html`が必要とのことなので、`main.js`と`index.html`を作成する。VSがつくってくれたapp.jsは削除。
    1. Solution Explorerの、"your-app" で、右クリック > Add > New Item...
    2. "Javascript file"をえらんで、下の Name: に "main.js"といれて、[Add]を押す。
    3. 同様に、"HTML file"をえらんで、"index.html"で [Add]
    4. (app.js削除) "app.js"を右クリック Delete(削除)か、Exclude From Project

2. Tutorialをコピペ
    1. Solution Explorerのmain.jsをダブルクリック、以下コピペ、CTRL+s保存

        ```javascript:main.js
        var app = require('app');  // Module to control application life.
        const electron = require('electron');
        // Module to control application life.
        const {app} = electron;
        // Module to create native browser window.
        const {BrowserWindow} = electron;
        
        // Keep a global reference of the window object, if you don't, the window will
        // be closed automatically when the JavaScript object is garbage collected.
        let win;
        
        function createWindow() {
            // Create the browser window.
            win = new BrowserWindow({ width: 800, height: 600 });
        
            // and load the index.html of the app.
            win.loadURL(`file://${__dirname}/index.html`);
        
            // Open the DevTools.
            win.webContents.openDevTools();
        
            // Emitted when the window is closed.
            win.on('closed', () => {
                // Dereference the window object, usually you would store windows
                // in an array if your app supports multi windows, this is the time
                // when you should delete the corresponding element.
                win = null;
            });
        }
        
        // This method will be called when Electron has finished
        // initialization and is ready to create browser windows.
        // Some APIs can only be used after this event occurs.
        app.on('ready', createWindow);
        
        // Quit when all windows are closed.
        app.on('window-all-closed', () => {
            // On macOS it is common for applications and their menu bar
            // to stay active until the user quits explicitly with Cmd + Q
            if (process.platform !== 'darwin') {
                app.quit();
            }
        });
        
        app.on('activate', () => {
            // On macOS it's common to re-create a window in the app when the
            // dock icon is clicked and there are no other windows open.
            if (win === null) {
                createWindow();
            }
        });
        
        // In this file you can include the rest of your app's specific main process
        // code. You can also put them in separate files and require them here.
```
    2. Solution Explorerのindx.htmlをダブルクリック、以下コピペ、CTRL+s保存

        ```html:index.html
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Hello World!</title>
        </head>
        <body>
            <h1>Hello World!</h1>
            We are using node
            <script>document.write(process.versions.node)</script>,
            Chrome
            <script>document.write(process.versions.chrome)</script>,
            and Electron
            <script>document.write(process.versions.electron)</script>.
        </body>
        </html>
```

    3.  Solution Explorerのpackage.jsonをダブルクリック. "version"のとこと、"main"のとこあたり変更。

        ```json:package.json
{
          "name"    : "your-app",
          "version" : "0.1.0",
          "main"    : "main.js"
}
```

## VSで実行
1. Tutorial > Run your appによると、`electron .` をしろと。
2. electron.exeが、どこかにあるので、そいつを指定する。
    - `Global`でインストールした場合: (たぶん)`C:\Users\ `UserName `\AppData\Roaming\npm\node_modules\electron-prebuilt\dist` の中
    - `Standard`でインストールした場合: {プロジェクトフォルダ}\node_modules\electron-prebuilt\distの中
3. Solution Explorerのyour.appを右クリック > Propertiesを選択。
 - Node.exe path:に{上記のパス}`\elecron.exe`
 - Script (startup file): `main.js` 
を設定して、CTRL+s 保存
4. VSの上のメニュから、Debug > Start Debuggingを選ぶか、または[F5]を押す。
=> "Hello World" 表示


5. 終了は、VSの上のメニュから、Debug > Stop Debugging またはSHIFT+[F5]
![vsel4.png](https://qiita-image-store.s3.amazonaws.com/0/75594/ba227185-7289-1449-cb8f-7268d54dd3be.png)

## で、それから.
1. ブレイクポイント
    1. main.jsを開いて、`app.on('ready', function() {`の行のいちばん左をクリックするか、その行にカーソルを置いて、[F9]を押して、赤丸をつけて、[F5]。黄色の矢印がついて、そこで実行がとまる
    2. Debug から  (次の行)Step Over[F10] ,　(次実行されるとこ。関数あったらもぐる)Step Into[F11] , (いまの関数から出た先)Step Out shift+[F11], とかでちょいとずつ実行(黄色の矢印)をすすめるとか、Continue[F5]で実行継続とかする。

2. デバッグのコンソールじゃま？
main.jsの mainWindow.openDevTools();の前に `//`をつけてコメントアウトとして、[F5]実行する

    ```javascript:main.js
...
        mainWindow.loadUrl('file://' + __dirname + '/index.html');
        // Open the DevTools.
    //    mainWindow.openDevTools();  コメントアウト
        // Emitted when the window is closed.
        mainWindow.on('closed', function () {
...
```

3. [Application Distribution](http://electron.atom.io/docs/tutorial/application-distribution/) ... そのうち...


<!-- Linked from https://github.com/Microsoft/nodejstools/issues/1072#issuecomment-230019620 -->