アウトプットって大事なんだそうだからこれからおみくじを作るよ

五分で作るおみくじアップリ

ちょうどドットインストールにおみくじ制作講座があったから Electron で同じやつを作ることにします。元ネタはJavaScriptでつくるWebアプリだけど、まあ似たようなもんだし大丈夫やろ。

件のElectronは以下のようなものになります。
Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
まあJavaScriptでデスクトップアプリケーション作れちゃうってやつです。扱うメリットとしてはHTAみたいな環境で作られたものの移行とかに使えるんじゃないかなとかそういうことを思っている。

実際になにかつくってみた

とりあえず作る前にElectronを準備します。

# Electronの導入（要 npm）
$ npm -g install electron
# 適当なフォルダに移動し、プロジェクトファイルの作成
$ npm init -y
# package.json に必要事項を記入し、main.js を記述
# アプリの起動
$ electron .

Electron的お作法（main.js部）は以下の通り*1。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({resizable: false, frame: false, width: 250, height: 400});
  // index.html を呼び出す
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // デバッグツール
  //mainWindow.webContents.openDevTools();

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

そんで、やってみた。思ってたよりも普通にCSSとかJSとかが読み込むせいで講座のまんまの面白くないものができてしまった。Reactとかで書いたほうが変化でて面白いのができたかもしれない。

とりあずElectron触ってみての学びとしてはフレームなしでドラッグ操作したければ次のやつをCSSに指定すればいいってことがわかった-webkit-app-region: drag;、-webkit-app-region: no-drag;。その他はよくわかんにゃい。まあ、他の機能はぼちぼち触りながら覚えていくことにします（以降二度と触ることはなかった……）。

参考
BrowserWindow | Electron

あ、最近はGitHubやなんかに作ったやつをあげることをアウトプットって言うらしいので、これは……Bitbucketに投げときます。ふぅ、アウトプットをしてやったぜ。

製作物
bitbucket.org

なんというか虚無感……、アウトプットってなんなんですかね……？

参考
https://dotinstall.com/lessons/omikuji_js_v4

*1:利用したい機能によって内容は多少変化します