読者です 読者をやめる 読者になる 読者になる

Electron + Angular2でMarkdownでスライドを作れるプレゼンテーションツールを作っている

AngularJS JavaScript Electron

Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。
とりあえず一通り動くところまでできたのでpublishした。

github.com

使い方はこんな感じ。

https://cloud.githubusercontent.com/assets/4954534/14444835/4d3536e0-0083-11e6-8420-30d17c33e7b4.gif

エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。

素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。

ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。

このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。
あとMacでしか動かしてないので、WindowsLinuxにも対応したい。

Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発 - Qiita

Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nulab Inc.]

何ができるの??

とりあえず必要な機能として、

  • markdown書いてる時にHTMLへの変換結果をlive previewで確認できる
  • presentation機能
  • PDFでのエキスポート

を実装している。

参考として↓のスライドはこれを利用して作っている。

speakerdeck.com

Angular2どうだった?

Angularは1のときに熱狂していたことがあった。けれど色々あって疲弊して今はReactおじさんをやっている。
なのだけど、Angular2はその時の疲弊する感じはかなり軽減されてていい感じ。

具体的にはAngular1このDIどう考えてもキモいだろ、というのがtyped-base DIになっていたり、このdirty-checkingいつ走るんですか??なんで走らないんですか??明示的に$applyしなきゃいけないんですか??みたいなことに頭を使わなくて済むのが良いところ(これについてはそもそも双方向バインディングがつらいという話ではある)。

Angular2のChange Detectionについてはこの記事がわかりやすい。

qiita.com

細かい実装についてはまた改めて書こうと思う。

あとAngular2をやっているのはRxJSを学ぶ目的もあるんだけど、このアプリでは非同期処理がほとんど要らなかったので試せなかった。

gistとsyncできたり、indexed.dbに前回開いていた情報を保存しておいたりできると便利っぽい感じがするので、そのあたりを実装するときに試していきたい。

decksetでよくね?

使ったことないのでよくわかりません。

良いところは取り入れたいので使ったことある方便利なポイント教えてください。

さいごに

興味を持ってくださった方はぜひ使ってみてください!
フィードバックくださるととても嬉しいです!(使いにくいところは改善します)