#ndsmeetup8 で聞いた内容を使ってアプリ作った

先日の NDS meetup8 「JavaScript Day」では色々なことを学んだわけですが、学んだ幾つかのトピックをつかって復習がてら「プレゼン用のタイマー」みたいなアプリを作ってみました。

よく訓練された聴講者みたいです!

GitHub: civic/presen-timer

アプリ自体は、大したことなくてただのストップウォッチです。プレゼン中にタイマー的に時間を表示するためのものです。

学んだ内容の復習として、以下の技術をピックアップして復習しました。

  • @circled9 さんの話から Mithril
  • @civic (私)の話からnpm、webpackだけでのビルド
  • @ushiboy さんの話から ES6
  • @yuw27b さんの話から Electronでアプリ化
  • @sakapun さんの話から Chroem Developer Toolでデバッグ

Mithrilでのコードは、プレゼンタイマーのストップウォッチ的機能と、それをコントロールするUIを分けて書いたんですがあんまりうまくかけてません。
わりとなんとでも書けてしまうのと、縛りがなさすぎてどう書くべきのかちょっと分からなくなってしまいました。。。たぶん自由なんだと思います。
ES6でクラス使えてるんですが、Controllerはクラスそのものを指定して、ViewModelなんかはインスタンス化したオブジェクトになってます。それでいいんだろうか。

WebPackでビルドするのは、無理にでもタスクランナーつかわなかったので、file-loaderつかってコピーしてます。

Electronでのアプリ化は、プロジェクト自体のpackage.jsonと、Electronにするためのpackage.jsonは同じでよいのか?ってことでちょっと迷いました。
透明ウィンドウでウィジェット的なものも作れるってことだったので、透明ウィンドウにしてみました。

こんな感じで透過ウィンドウのタイマーみたいな感じです。
Cursor_と_PresenTimer-darwin-x64_と_PresenTimer-darwin-x64

「これで、ミラーリング表示したプレゼンで、タイマーを表示しておくことができるぞー」って思ったのですが、、

1

アッ、アッ・・・
3

5

https://gyazo.com/692c682db806073eb330864bcf78165a

プレゼンテーション開始すると、プレゼンが全画面表示になるのでアプリが見えなくなるんですねー。

ということで、本来の目的では使えないアプリとなってしまいました。

まっ、でも勉強になりました。Electronは簡単マルチプラットフォームなアプリ作成に便利なので、今後も使っていきたいです。あとでChrome App版も作ってみようっと。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください