Electron Typescript

風邪引いて、子供と遊ぶことが出来ず週末はずーっとJavascriptのお勉強。

以前記事にした「Electron製アプリのセキュリティ」をTypescriptで実装し直しました。「nodeIntegration:false」と「contextIsolation:true」を設定したアプリの土台ですね。先日お勉強したVue SFCも含まれています。

package.jsonにあるnodeスクリプトの動作は以下。

  • “build”: Productionビルド
  • “watch”: Watchモード、Developmentビルド
  • “start”: 実行

レンダラ側のHTMLファイルは「html-webpack-plugin」を使用してテンプレートを元に作成されています。コンテンツセキュリティポリシーの「unsafe-eval」をProductionビルド時は書き込まない、Developmentビルド時はHTMLに書き込むようにするためです。Devビルドの場合はJavascriptバンドル時、eval関数が含まれるため「unsafe-eval」を許可しないと動作しません。

詳しくはwebpack.config.jsを、と言いたいところですが汚いです。


Electron+Javascript

Electron+JavaScriptをMainもRendererもWebpackでバンドルするテンプレートプロジェクト。

過去にも作ったことはありますが、Typescriptだったりglupとbrowserifyでビルドしてたりで開いても理解できず…自分がつくったのに。


お時計3

どうせなら時計をiPhoneでも動かしてみたいって事で、javascriptをあーしてこーして動かしてみるの巻。

なんでiPhoneのSafariで動かないかって言うと、javascriptのバーションes2015は実行出来るもののモジュールのimportには対応していないからです。なのでモジュールを結合(バンドル)する必要があります。

es2015をes5にトランスパイルします、babelのお仕事です。それからwebpackを使ってバンドルします。んで、iPhoneでも動くヤツ

スクリプトは書き換えてないので、マウスオーバー(rollover)が動きません。スマホにマウスはありませんから…。

以降は設定もろもろ。

続きを読む “お時計3”