Electron + Angular2でMarkdownでスライドを作れるプレゼンテーションツールを作っている
Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。
とりあえず一通り動くところまでできたのでpublishした。
使い方はこんな感じ。
エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。
素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。
ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。
このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。
あとMacでしか動かしてないので、WindowsとLinuxにも対応したい。
Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発 - Qiita
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと - ヌーラボ [Nulab Inc.]
何ができるの？？
とりあえず必要な機能として、
- markdown書いてる時にHTMLへの変換結果をlive previewで確認できる
- presentation機能
- PDFでのエキスポート
を実装している。
参考として↓のスライドはこれを利用して作っている。
Angular2どうだった？
Angularは1のときに熱狂していたことがあった。けれど色々あって疲弊して今はReactおじさんをやっている。
なのだけど、Angular2はその時の疲弊する感じはかなり軽減されてていい感じ。
具体的にはAngular1このDIどう考えてもキモいだろ、というのがtyped-base DIになっていたり、このdirty-checkingいつ走るんですか？？なんで走らないんですか？？明示的に$applyしなきゃいけないんですか？？みたいなことに頭を使わなくて済むのが良いところ(これについてはそもそも双方向バインディングがつらいという話ではある)。
Angular2のChange Detectionについてはこの記事がわかりやすい。
細かい実装についてはまた改めて書こうと思う。
あとAngular2をやっているのはRxJSを学ぶ目的もあるんだけど、このアプリでは非同期処理がほとんど要らなかったので試せなかった。
gistとsyncできたり、indexed.dbに前回開いていた情報を保存しておいたりできると便利っぽい感じがするので、そのあたりを実装するときに試していきたい。
decksetでよくね？
使ったことないのでよくわかりません。
良いところは取り入れたいので使ったことある方便利なポイント教えてください。
さいごに
興味を持ってくださった方はぜひ使ってみてください！
フィードバックくださるととても嬉しいです！(使いにくいところは改善します)
みんなのウェディングさんと共同で勉強会を開催しました #fr_mw_lt
大学の先輩の @azipon_zzz と一緒に、フロントエンドの知見交換を目的に勉強会を開催しました。
来場者、登壇者の皆さんありがとうございました！
全体的な進行
前半はLT大会で、後半はそれぞれの会社からの代表者に前に出てもらって、座談会形式で意見交換する会を設けた。
LT
Introduction to flux-util by @joe_re
flux-utilsをざっくりと紹介。
Reduxとの共通点が多くあるので、その比較とか。
社内CSSフレームワークを作ったった by @azipon_zzz
チーム開発において、cssの書き方を統一させ、似たような定義の氾濫を抑えていきたい。
そのための社内cssフレームワークを整備した話。
統一的な定義をしていくことで、デザイナーの工数の削減にもつながり、この画面とあの画面似た色使ってるけど微妙に違うような？？みたいな事故が起きなくなる。
Vue.js New Team by @kazu_pon
Vue.js の開発体制や、contributionのrule、これからのRoadMapのお話し。
また、大きなOSSにおける開発方法や、悩みなど。
ネイティブアプリでもFluxしたい by @yonekawa
SwiftFlux の開発者による、iOSアプリケーションでのFluxアーキテクチャ構築のお話し。
iOSにおいてMVVMを構築した時のつらみ、Fluxにすることで解決できる問題など。
how can I make frontend engineer training @kawaguti
フロントエンドの教育体制をいかにして構築するかというお話し。
大企業にお勤めの方で、含蓄に富んだお話しでした。
気の利いた入力コンポーネント by @ymrl
ユーザが使っていて気持ちのよい入力コンポーネントにするために考えるべきこと。
また、Reactにおける具体的な実装の紹介。
チーム産、やさしさが香るフロントエンドコード〜jshintとscss-lintのソースをかけて〜 by @takuhito_hihara
www.slideshare.net
コード品質を保ち、かつ書き手の教育のためにlintを活用するお話し。
lintをかけるべきタイミングや、そのために活用しているpluginの紹介。
requireの循環参照 by @yo_waka
CommonJSのrequireで循環参照していると、2度目以降のrequireで空のobjectが返ってきてしまうというつらい問題。
それに対しどう対処するかというお話し。
サービス改善のために エンジニアがすること、 しないこと by @kamonegi1977
RailsにおいてABテストの構築する方法の紹介。
また、その作業においてサーバサイドエンジニアとフロントエンドエンジニアの作業分担、意識するべきこと。
座談会
@kuy さんが飛び入りで参加してくださって、より議論の幅を広げることができました！ ありがとうございました 🙇
弊社からは @kambieldenと@ymrlが。
みんなのウェディングさんからは @azipon_zzz と @kamonegi1977さんが前に出てくれました。
また、E2Eテストの話題が出た時には、弊社QAエンジニアの@tmasuharaに前に出てもらって語ってもらいました。(無茶振りすみませんでした！)
主には
- 各社のjsフレームワークの変遷
- cssの標準化への取り組み
- APIの構築で気をつけるべきこと
- Viewのテスト、E2Eのテストをどうしているか
- チームで開発する上での情報共有の大切さ。活用しているツールなど
というお話しをしました。
加えてslackで騒いで拾ってもらう文化を作るの大事とか。
レガシーなイメージあるけど実はメール便利！とか。
webエンジニアならでは話も出て盛り上がった。
感謝
LT大会では @xga に司会をしてもらったり、
準備の時にも社内の有志メンバーが自発的に会場設営をはじめてくれてたり、
みんなのウェディングさんも受け付けしてくれたり(当日丸投げですみませんでした！)、
結構忙しくてテンパっていたのですごく助かった。
当日手伝ってくれた方々ありがとうございました！ 🙇🙇🙇
ちゃんと開催できたのはみなさんのおかげです。
(実際のところ、自分は飲み物が来たのが開場10分前で焦ってたり、直前に会場説明資料作ってたり準備不足乙奴だったのでほとんど使いものになってませんでした。。すみません。。)
感想
割と雑な感じであんまり深く考えずに開催してみた感じだったけど、レベルも高いちゃんとした勉強会になってよかった！
こんな感じで、いろんな方と交流できる会をどんどん開催していきたい！
JSer.info 5周年記念イベントに行ってきた(LTもした) #jserinfo
#jserinfo すごく楽しかった
— じょう (@joe_re) 2016, 1月 16すごく楽しかったです！5周年、おめでとうございます！
尊敬
#jserinfo 5周年誠におめでとうございます。継続は力なり。本当に凄い事だと思います。尊敬しています。 https://t.co/o6fEeFLqvO
— Takuto Wada (@t_wada) 2016, 1月 16僕も尊敬しています。
僕がWebの技術者になって、2年ほど経ってしまいました。
その前にいた業界と比べてWebの変化は早くて、最初のキャッチアップは苦労しましたが、js界隈に関してはJSer.infoがあるおかげで継続的なキャッチアップができています。
azuさんの情報収集力凄すぎる。
内容
どれも面白かった。(内容はJSer.infoでまとめられているので、ご参照ください。)
個人的な収穫としては、armorik83さんのAngular2の話と、 id:saneyuki_s さんのRxJSの話から得たものが大きかった。
上半期中にAngular2とRxJSの知見を得よう。
さよならあいいい8
お疲れ様でした！ #jserinfo pic.twitter.com/li0S4Yik06
— Yosuke FURUKAWA (@yosuke_furukawa) 2016, 1月 16さよならあいいい8 #jserinfo
— Dahlia(実況用) (@dahlia_candy) 2016, 1月 16さよならあいいい８ #jserinfo
— hiro/もふもふの人 (@hirodeath) 2016, 1月 16さよならあいいい８ #jserinfo
— ぐら (@grapswiz) 2016, 1月 16さよならあいいい８ #jserinfo
— kiyoshi nomo (@kysnm) 2016, 1月 16さよならあいいい８ #jserinfo
— じょう (@joe_re) 2016, 1月 16id:hasegawayosuke さんによるIE8のすごい機能についての発表。 最高に面白かった。
僕もLTさせてもらいました
www.slideshare.net
id:mizchi さんが Increments社でRailsでモダンJSな構成をどうやって実現して行っているか、というお話をしていた。
それを聞いて、弊社ではこうやってるよー、というのを話したくなったので飛び入りでLTさせてもらった。
(普段いんたーねっとの向こう側でよく見かける人たちがいっぱいいたので緊張しました。)
内容的には去年のAdvent Calendarで書いたのと一緒。
雑に「Reduxは使わずにflux/utilのReduceStore使うぞ！」みたいな事も書いてみた。
このあたりは口頭で説明したので、補足しておく。
Reduxは良いアーキテクチャを提供してくれる感はあるのだけど、構成がかなりロックインされてしまうのがつらいところだと思っていて、具体的にはStoreはReduxがシングルトンとして提供する(つまり自前では実装しない)オブジェクトになり、それを監視するContainerというコンポーネントを持つ単位を作らなければならない、というところが大きいところかなー、という感じ。
これはStoreの単位とそれ監視する場所が制限されてしまうという事で、既存の実装を徐々に置き換える上では足かせになりうると思っている。
flux/utilのReduceStoreはreduxからの影響を受けて実装されたものだけど、いい感じでReduxとの中間地点を提供してくれる。
先に述べたとおり、ReduxにおいてはStoreを実装しない。
その代りにreduce関数を定義し、更新前の値と更新後の値を関数内で処理すれば、Storeが勝手に更新されることになる。(このreduce関数の考え方が、Reduxの素晴らしいところだなー、と思います。)
ReduceStoreはRedux同様のreduce関数を提供するのだけど、この場合はStoreである自分自身の中にreduce関数を持つことになる。
本来のFluxから外れずに、Reduxのreduce関数をいただける感覚。すごく使いやすい。
Flux Utilsについては、以下の記事が詳しい。(これもazuさんだ)
はてなブックマーク検索を作りながらFlux Utilsについて学ぶ | Web Scratch
さー
Angular2とRxJSやるぞー
