西日暮里.rbでGraphQL on RubyというLTをした

nishinipporirb.doorkeeper.jp

西日暮里.rbでGraphQLのスキーマ定義をRubyでやって、動かしてみたというLTをしてきた。
発表資料はこちら

speakerdeck.com

動かせるサンプルコードはこちらにあるので、興味がある方はお試しください。

github.com

GraphQLは特定のストレージやFWに対応する実装ではないので、何のORMを使ってどのDBにつなぐかは関係しない。
今回は使い慣れているので、ActiveRecordを使った。

今回の発表ではGraphQLをRubyに理解させられるぞ以上のことは何もできていないのが残念。
次回までにGraphQLで何か作っておきたい。

あと西日暮里.rbのオーガナイザに前回から加わらせてもらっています。
微力ながらコミュニティ運営にお力添えしていきたいと思っていますので、今後ともよろしくお願いします。

ng-sake#2 で Cafe Pitch の紹介とAngular2のComponentについてのLTをさせてもらいました

ng-sake.connpass.com

今週あった ng-sake#2 でLTさせてもらいました。

Cafe PitchはElectron + Angular2を使って最近作っているプレゼンテーションツールです。

github.com

発表資料はこちら

speakerdeck.com

資料に書いてある通りだけど、普通にReactでコンポーネント指向に慣れていればAngular2においてコンポーネントを作る際にも同じ感覚で作れる。

加えてAngular2のコンポーネント間通信には様々な方法があるので、それぞれ良き場面で取捨選択すると良さそう。

例は公式に用意してあるので、参考にすると良い。

Component Interaction - ts

慣れないうちはとりあえず@output、@inputが使えるようになればどうにかなる。

後半はディスカッション形式で、エキサイトし過ぎてめっちゃ飲んだ。

終わった後にも飲みに行って終電を逃し、最終的に同じ方面の @Quramy さんとタクシーで一緒に帰宅しつつ、タクシー代を借りるという失態を犯した。

まとめるとめっちゃ楽しくて、かつガチ勢がひしめき合っている割にはフレンドリーでいいコミュニティだなーと思いました。

是非また参加したい!

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

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でよくね?

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

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

さいごに

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