ログインしたあなたが操る[リアル]クリスマスツリー(前編)


現在12月26日 AM5:56 クリスマスネタやります。間に合わなかった。。

## やったこと

こんなの作りました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">哀愁のクリスマスツリーをデスクトップアプリにした。LINEアカウントでログオンできる認証機能付き。どれだけ機能を豪華にしてもツリーの寂しさは埋まらない。あと、クリスマス終わってた。。 <a href="https://t.co/Laoo09NYlY">pic.twitter.com/Laoo09NYlY</a></p>&mdash; j4amountain (@zsipparu) <a href="https://twitter.com/zsipparu/status/1209937872645550080?ref_src=twsrc%5Etfw">December 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ログオンすると、ログオンしたユーザのアカウント名でメリークリスマス〇〇さんと表示されます。さらに、ダイソーで買った300円のツリー（ガラス製）が表示されます。

それだけではありません。右のボタンでツリーを自在に回転させることができます。右回転だろうと左回転にするかは、あなたの気分しだいです。

さらに、"荒ぶる"ボタンを押せば、ツリーがこれでもかと激しく回ります。
いかがでしょうか？

~~これってもしかしてクソアプリというやつでは？~~


## 実装したことと実装手段

実装した機能と実装手段を紹介します。今回は、①②の実装手順を紹介します。

||実装した機能|実装手段|
|---|---|---|
|①|認証|Auth0|
|②|アプリ化|Electron|
|③|ツリー制御（回すとか）|obnizでモーター制御|
|④|ツリー映像|ラズパイ+カメラでストリーミング配信|


## 実装手順の概要

フロー図にするとこんな感じです。認証機能付きWebサイトとデスクトップアプリを別に作成し、Webサイトをデスクトップアプリ側へ移植します。これで、認証機能付きのデスクトップアプリができます。作成したアプリに、クリスマスツリーの制御や映像の機能を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/a90f1db0-c4e4-5d28-b7fd-b8ce01be0512.png" width="400">

今回は、デスクトップアプリの作成までの手順を紹介します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/a763a3ef-b719-22ef-5244-6673b632aaf6.png" width="400">



## Auth0で認証機能付きのWebサイトを作ろう

Auth0 QuickStart から JavaScriptのサンプルをダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/cdd441ab-d812-c226-6a68-ad11a5a4fd71.png" width="350">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/b3876b27-9a9c-23f6-de33-54d3dc230c1a.png" width="350">


ダウンロードサンプルを解凍し、以下のコマンドを実行します。

```
npm install
```

これでセットアップ完了です。早速実行してみます。

```
npm start
```

実行したら、`http://localhost:3000`をブラウザで開きます。
このようなサイトが開くと成功です。右上のボタンからログインしてみます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/595f3a25-3b31-ad01-8b23-07cd84e4484f.png" width="350">

右上のLoginボタンがログインアカウントのアイコンになれば成功です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/aa1a8f42-e6fd-78b3-7d38-686caf3871f2.png" width="350">

もう少し確認します。

`index.html`をテキストエディタで開き、`<h1 class="mb-4">JavaScript Sample Project</h1>`の下あたりに以下を追記します。

```html:index.html
<h1 class="mb-4">JavaScript Sample Project</h1>

<!-- add s -->
<div class="auth-visible hidden"><h1>log in</h1></div>
<div class="auth-invisible hidden"><h1>log out</h1></div>
<!-- add e -->

<p class="lead">
```

※豆ちしき※ classの設定でログオン／ログアウトで表示／非表示を設定できるようです。

|class|ログオン時|ログアウト時|
|---|---|---|
|auth-visible hidden|表示|非表示|
|auth-invisible hidden|非表示|表示|

`http://localhost:3000`をブラウザで開き、ログイン／ログアウトで表示が変わるかみてみます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/522521ed-e4ab-8026-bcde-4c40d1bf9978.png" width="450">

このように、ログイン／ログアウトで log in, log out と表示が切り替わりました。


## Electoron でデスクトップアプリを作ろう

https://github.com/electron/electron-quick-start に従い作っていきます。

```powershell
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
```

このような画面が開けば第１段階 成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/984c5053-d7c0-98d5-a2a7-1cc7938cca5f.png)

更に作りこんで行きます。expressをインストールします。

```powershell
npm i express
```

morgan helmet をインストールします。（Auth0用）


```powershell
npm i morgan helmet
```

public フォルダ作成します。

```
PS C:\Users\hoge\test\electron-quick-start> mkdir public


    ディレクトリ: C:\Users\hoge\test\electron-quick-start


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2019/12/26      5:06                public
```


public/index.html 作ります。中身はとりあえず以下のようにします。

```html:index.html
<html>
  <head>
    <title>Hello Server!</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>
```

main.js を以下に書き換えます。（丸々中身を置き換えます）

```javascript:main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')

const express = require('express');
const appExpress = express();
appExpress.use(express.static(__dirname + '/public'));
appExpress.listen(3000);

let mainWindow
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // ログインページにアクセスして、画面に表示する
  mainWindow.loadURL("http://localhost:3000/" );

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})
```

動作確認してみます。

```
npm start 
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/91f81c69-ef52-8a21-72bd-1128cbac9163.png)

このように表示されたら、Expressが組み込まれました。


## デスクトップアプリへ、認証機能付きWebサイトを移植しよう

Auth0で認証機能を実装したWebサイトを、Electronでデスクトップアプリにします。
先ほどElectronで作成したデスクトップアプリをベースに作業を進めていきます。

以下３つを実施すれば完了です。

- Electron側の最上部のフォルダに、 Auth0サンプル側の auth_config.json を移動します。
- publicフォルダに、Auth0サンプル側のpublicフォルダにあるcss,images,jsフォルダを移植
- Electron側の public/index.html をAuth0側の index.html を上書きします。

動作確認します。

```
npm start
```

`npm start`コマンド実行後に、このような画面が表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/8c13c75b-fc60-bda2-f55f-de95f3e82847.png)

以下を追記して『ログイン／ログアウトで表示が切り替わるか？』も検証します。

```html:index.html
<h1 class="mb-4">JavaScript Sample Project</h1>

<!-- add s -->
<div class="auth-visible hidden"><h1>log in</h1></div>
<div class="auth-invisible hidden"><h1>log out</h1></div>
<!-- add e -->

<p class="lead">
```

検証時の画面とるの忘れました。。ログイン／ログアウトで log in, log out と表示が切り替われば成功です。


※Googleアカウントでは上手く動きませんでした※

## 後半につづく

認証機能付きのデスクトップアプリの作成までを紹介しました。クリスマスツリーの制御と映像は後編になります。
　↓
[ログインしたあなたが操る[リアル]クリスマスツリー(後編)](https://qiita.com/zgw426/items/2ae5527869dc13d038a9)


---

以前、こんなのも書きました。こちらはA-Frameでクリスマスツリーを描画しています。[ログインしたあなたに贈るクリスマスツリー](https://qiita.com/zgw426/items/34ee096d6fcc567f3d10)