electronをつかってブロック崩し作ってみた。

electronをつかってブロック崩しを作ってみました。

(12/31) 編集しましたタイトルからwipが消えました。

  - 各セクションをfixしました。

今年もあと数日で終わりますね。はやい、年末年始は何をして過ごそうかなとぼんやり考えています。

この記事はMakeITアドベントカレンダー 23日目の記事になっています。今日は12/2x日なので (2x - 23)日の遅刻です。言い出しっぺのくせにすみません。

カレンダー的には 昨日(22日目)は feketerigo222による Tkinterを使ってサンタになりきる

明日(24日目)は haduki1208によるSCSSとstyled-componentsの勉強と比較のための環境を作った でした。

どうして将来の記事のが先にあるんだろうな?時間軸がずれているみたいですね。

昨日はすでに終了ムードになっており罪悪感に包まれていました

gyazo.com

最初に

作ったものはこちらです。 GitHub - fumihumi/block_breaker_electron_app: Touch Barでブロック崩ししたい

Image from Gyazo


どうして作ったのか

先日electronとTouch Barで遊んでおり、

github.com

これを作った時にTouch Barを使って何か作れないかなと画策していました。そういったこともあり、今回はブロック崩しのバー部分をTouch Barで操作してみるようにしてみました。

つくってみて

基本的なブロック崩しのコードは以前インターネットで見かけていた次のjsfiddleから拝借しています。

arkanoid - JSFiddle

いじった点はes6ベースに置き換え、reactで書き直した点でしょうか。

今回自分がやりたかったことのメインであるTouch Bar周りはすべてmain.jsに記述しています。 例えば次の部分ですが。

https://github.com/fumihumi/block_breaker_electron_app/blob/master/main.js#L13:L18

この辺の処理もうすこしいい感じにできないのかなぁと思いながらドキュメント眺めてました。 (dom側からtouchbarAPIをいい感じに叩きたいがうまくできなかったのでmain.jsで window.webContents.executeJavaScriptをするようにしました。)

またmain.jsファイル上部にて定義している, window, paddleですが

let paddle;

sliderの changeイベントのコールバック関数にて毎回 const paddle = xxxのように記述したりしるとなぜかエラーになってしまった(定数宣言複数あるとおこられるやつ(has already been declared))ため windowと同じように一度外で定義したものを使い回すようにしました。 windowを外で定義する書き方はexampleに合わせています。

感想

Electronを使って何かおもしろいことができないものかと思い、APIドキュメントを見始め、Touch Barが面白そうだなと思ってTouch Barがどのくらい使いやすいかを確かめるために今回のブロック崩しを作ってみました。

さきほど記載したように executeJavascriptをしている箇所があまり直感的ではないためかなり使いにくいなぁと感じています。

この部分をReact側(WebView)の方からElectronのAPIをよし何叩けないかなと調べてみると次のライブラリがあったのですがうまく動かず(時間がなかったので調査仕切れてない)という事情がありました。

GitHub - patrikholcak/react-touchbar-electron: Define TouchBar layout in your components/routes

仮にこのライブラリがやっているようにWebView側からよしなにElectronAPIを叩けるのであればかなり柔軟に対応ができるんじゃないかなぁと感じました。

改めて調べてみたいと思います。