いろいろ話す機会がありましたので
いろいろ発表の機会があったのですがスライド公開してなかったので公開しておきます。
ng-kyoto Angular Meetup #4
4月にObservableについて話してきました。
この発表ではObservableがなぜ必要になるのかについて話しました。
Observableについて調べているうちに、何を解決するものなのか疑問が駆け巡ってきました。
そしてそれを自分の中で考え、おそらくこういう思想のもとだろうという推測を加えてスライドを作りました。
もちろんObservableそのものの仕様については以前の記事でもあった通りの事実しか話していません。
その推測のヒントとなったのがStructure and interpretation of computer programs - 2nd EditionのStreamの項でした。
僕はそれを読んでオブジェクトデータ構造と対をなすストリームデータ構造がこのObservableの考えのもとじゃないかと推測したうえでスライドを作成しました。
推測から発表をしてしまうエンジニアらしからぬ発表をしましたがきっとObservableが解決したいことの本質はここじゃないかと考えています。
フロントエンドの人がWeb APIを語る会
6月にNetflixが開発したFalcorについて話してきました。
Falcorの紹介となぜFalcorが何を目的に作られたのかについての発表でした。
Falcorを学ぶ上でGraphQLについても少し公式サイトをかじって読んでいたのですが
そこでそもそもREST APIとは同じ組織内で構築されたクライアントアプリケーションにサービスを提供するAPIの要件ではないとその発明者が述べているとの記述がありました。
これはすごく衝撃でした。REST APIがとにかくプッシュされてきていたイメージでしたがなぜREST APIを使うのか明確な根拠を僕は持っていないことに気付かされたのです。
そして昨今、SPAに代表されるサーバクライアントモデルのアプリケーションがなぜもてはやされているのかについても明確な回答を僕は見いだせていませんでした。
このFalcorの発表と通してこの辺りの疑問に自分なりの回答を得られたことがこの発表の一番の収穫だったように感じます。
こんな感じでいろいろ話させてもらえる機会に恵まれていました。
それではまた!
Potmumが素敵だったのでomniauth-identityを組み込んでみた
おはこんばんちはpastelIncです。
政治的理由により技術ノウハウ共有のために巷のパプリックサービスが使えなかったところ
ドワンゴ新人エンジニア研修の記事でちらっと見かけたPotmumという単語から素敵なQiitaライクなサービスを知ったので動かしてみました。
見たところものすごくおしゃれな見た目です。Qiitaっぽいです。素敵です!
拝見した限り自分用のサービスっぽいのでチーム向けではなさそうです。
利用してみたところOAuth2による認可を使ったログインのみの実装のようでした。
そもそもGitHubやSlack使ってはいけないのでどうしたもんかと考えていました。
最初は認可サーバを立ててomniauthのstrategyを自前で作っていましたがよくよくstrategyリストを見ているとシンプルなパスワード認証できるモジュールを見かけたので実装してみました。
これを使って実装を試してみたものがfeat/identityブランチにあります。
pumaの設定ファイルです。
environment ENV['RAILS_ENV'] daemonize true pidfile "#{Dir.pwd}/tmp/pids/puma.pid" state_path "#{Dir.pwd}/tmp/pids/puma.state" bind 'tcp://0.0.0.0:7272'
見かけただけの勢いでomniauth-identityモジュールを使いましたが、これ随分メンテされてないのでまずいかもしれません。
CSRF対策をかわしてさらにSesionsController#callbackを利用していますが、こういうのは別のメソッド生やすべきなんでしょうかね。
Dockerで動かしているので、次はDockerfileやdocker-compose.ymlを書いてみたいと思っています。
こんな感じでrubyとrailsについて詳しくないので怪しいところあると思いますがパブリックなサービスを使えない方でPotmumを利用したい方がいる時の参考になれば幸いです。
追伸
ARIA × あまんちゅ！合同イベントが素敵だった
ARIA × あまんちゅ！合同イベントに行ってきました！
今その帰りの新幹線の車内でこれを書いています。
今はちょうど夜の部が行われている頃ですかね。
とにかくとても素敵ングなイベントでした。
あまんちゅ！第1話先行上映会
イベントが始まり、ARIAから葉月さんと西村さん、大原さん(この辺りは曖昧です間違ってたらごめんなさい)がご登壇されました。
軽い挨拶があり、まずはあまんちゅ！第1話の先行上映会が行われました。
感想ですが言わせてください「素敵」でした。
もともと原作からARIAを通じてのファンなので期待度は高かったです。
正直期待以上でした。
だって見終わった後に真っ先にこうして記事を書きたくなっちゃったんですもの。
漫画とアニメは表現の差において異なるところがあると思っています。
それは作品内で流れる時間の受け取り方です。
見ている最中に感じた最初の印象でした。
第1話に限って言えば終始非常に「日常そのものの時間の流れ方」を感じました。
なので変わっていく場面はそう多くありません。
でもそれが非常に心地よかったです。
更に忘れてはいけないのが「水」の表現です。
上映会後佐藤監督もおっしゃっておりましたがネオベネチアと伊豆では水の表現が違います。
伊豆にはベネチアのような水路が張り巡らされていません。
水の表現には普段の倍以上の時間をかけて制作されているそうです。
第1話の話の内容については是非原作を買って読んでみてください。
あまりここでは多くを語らないようにしようと思います。
ただ僕がどうしても印象に残ってたシーンを見た瞬間、思わず泣いてしまいました。
それも2回です。第1話からですよ。僕は涙もろいんです。
ただただほんとうに「素敵」でした。
フリートーク
第1話の上映会が終わって、溢れんばかりの拍手が巻き起こりました。
その後ARIAとあまんちゅ！のキャストと佐藤監督が登場して、挨拶とフリートークが行われました。
あまんちゅ！のてこ役でもありARIAでもアリスの後輩アーニャを演じておられる茅野さんは大のファンらしくイベントの最初から最後まで楽しそうだったのが印象的でした。
ARIAキャストの方も原作は読まれている方が多いらしく特に水の表現について賞賛されていました。
後は皆川さん(晃役)の「久しぶりだな。元気にしていたか？」が聞けただけで最高でした。
教えて！サット・シー
ケット・シーならぬサット・シーにみんなから現在、過去、未来に関する質問をしちゃおうというコーナー。
- みんなイタリアいきたいと口をそろえていっていた
- 佐藤監督のお気に入りのARIAのシーンは原作(おそらくAQUA)にて夜寝静まった社長たちを見る灯里
- 佐藤監督はB型、来ていたあまんちゅ！キャストはみんなO型
- 佐藤監督と大原さんは動物占いで羊
- 夜の部では佐藤監督ツインテールにするかも
- 佐藤監督にとってARIAとは「奇跡」
- みんなあまんちゅ！とARIAが大好き
- 佐藤監督はアリア社長とふたりきりならもちもちぽんぽんを触りたい
- ARIAチームもあまんちゅ！に出たい
- 大原さんはピーター役で出たい
佐藤監督への質問なので必然的に佐藤監督のことのことばかりに関する情報ばかりですね。
まあ皆さん会話が弾まれて最後の方は時間が押していたのかかなり駆け足でした(笑)。
ARIA朗読劇
なんとARIAチームの朗読劇ははじめてらしく生のアフレコをはじめて見せていただくことができました。
英気を養うために特訓とバーベキューをしに来た面々がARIAに存在する蒼に思いを馳せて
マンホームの頃から連綿と人々が願った蒼の素敵を未来に伝えていきたいという話でした。
途中目を閉ざして見るとすぐそこでARIAのメンバーが楽しそうにしている様子がわかるようで生の素敵な空気に触れた気がしました。
エンディング
最後にあまんちゅ！チームから代表してぴかり役の鈴木さんから一言とARIAキャスト全員からそれぞれ一人一言づつ挨拶がありました。
鈴木絵理さんからはこれから始まるあまんちゅ！に期待していて欲しいことが語られました。
ARIAキャストからはみなさん感極まったみたいに途中涙しながらもこれからもARIAを愛してほしいこととあまんちゅ！を楽しみにして欲しいことが語られました。
イベントを通してあまんちゅ！とARIAとは違うものですが確かに「何か」がつながっている感じがしました。
それはきちんとARIAチームからあまんちゅ！チームへ伝わっているのがわかりました。
最後に佐藤監督は天野先生が手がけられた描きおろしポスターから作品をこういう形でリレーできるのはとても幸せだとおっしゃられていました。
Observableってなんなんね？
ついにRCのリリースも間近となったAngular2ですが、私はこの間のハンズオン以来全然触れてません。
少しづつ触っていきたいものですが、ここ最近の勉強会の経験からAngular2を学ぶならWebの最新技術を学ぶことが大切なのだとわかったので、まずは、Observableを調べてみようと思います。
学習教材を探す
Observableについて学ぶぞ！と意気込んでみたもののどうやって学べばいいのでしょう。
どこかにObservableの正体について書かれた資料はないでしょうか。
ここにObservableがリストアップされています。
TC39、ECMAScriptを策定してる組織です。ECMAScriptはJavaScriptの仕様だと前に教えてもらったことがあります。
- どういう人達なのか
- 何が目的なのか
- そのために何をしているのか
思うことはいろいろありますが、とりあえずこの辺りはおいておきます。ecma262、これはなんでしょう。
なるほどECMAは組織でした。そのECMAが管理する仕様には管理番号が割り振ってあります。
つまり、ecma262はECMAが管理する仕様の一つということになりますね。
（ということはTC39のメンバーはECMAの人たちで構成されているのでしょうか？）
話を戻します。例のリポジトリにリストアップされたObservableのリンクを辿ってみます。
ありました。Observableの仕様を見つけることができました。以降はこの仕様を元に学習しました。
Observableの提案の概要がまとめれています。
Observableとはなんだろう
ObservableはDOMイベント、timer intervals、 そしてsocketsのようなpush-basedデータソースをモデル化するのに使われます。
- Compositional: Observablesは、higher-order combinators(?)で組み立てられる
- Lazy: Observerがsubscribeするまで、Observablesはデータを発信し始めません
粗末な翻訳は許して下さい。英語苦手なんですよー。typeを型と訳すならObservableはどうやら型のようです。
JavaScriptにはECMAScriptで定められたプリミティブな型がすでにあります。
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ECMAScript 6で登場)
プリミティブではないものとしてObjectもありますね。
お、DOMのキーイベントを使った例があります！例示は理解の試金石です。早速見てみましょう。
この例を見る限りどうやらObservableは標準のビルトインオブジェクトとしても実装することを想定しているのでしょうか。
listenはObservableインスタンスを返し、Observableコンストラクタは関数を受け取っています。
関数はキーイベントにhandlerをアタッチして...っとhandlerの詳細がわかりません。
// observerとは何なのか let handler = event => observer.next(event);
このドキュメントにはObservableやobserverのインターフェイスについても書かれています。
それによるとこのobserver.nextはシークエンスの次の値を送り出すらしいですが...。
うーん、むずかしいです。何より何がしたいのか想像できません。
一旦この例を離れてObservableの実装例として、このドキュメントに挙がっているRxJSとzen-observableについて調べてみることにしました。
どのように動き、何がしたいのか知りたかったのでいろいろ調べていると、Observableをスクラッチで作ってみる動画を見てピンときました。
この時点でObservableとは非同期のデータの流れの手続きのことだとわかりました。
他にも以下のことがわかりました。
- Observableはsubscribeすることでデータが流れ始めること
- subscribeする際にnext, error, completeに対応した処理を記述できること
- completeしたあとではデータが流れないこと
- データを流したあとキャンセル可能なこと
- キャンセルしたあとはデータが流れなくなること
この動画に沿っての実装はとてもわかりやすいのでおすすめです。
この動画を踏まえたうえで、先ほどのObservableの仕様書の例に戻ってみます。
ここで定義されているデータの流れはHTML要素から発せられるキーイベントです。
ストリーム中のイベントを配列を扱う時のようにfilterやmapする標準のcombinatorを使うことができる。
ここで以前わからなかった翻訳の意味が何となくわかりました。
higher-order combinatorsというのはこのfilterやmapのことをいってるはずです。
まるで配列を扱う時のようにObservableにはfilterやmapが実装されているそうです。
"filter" と "map" メソッドは提案に含まれてません。この仕様の将来のバージョンで追加されるかもしれません。
ですが、今のところ提案に含まれてないようです。今後の続報に期待しましょう。
さらにsubscribeメソッドの代わりとしてforEachメソッドがあり、これは一つの関数を受け付け、Promiseを返すそうです。
その後のMotivationの項目を見ていろいろわかったので、少し整理してみます。
- Observableとは非同期のデータの流れを扱うプロトコル
- Observableは型になるかもしれない
- ObservableはDOMイベント、timer intervals、そしてsockets、UIに起因するような（アプリ内で起こる）データの流れをモデル化するのに使われる
- Observableはfilterやmapのようなcombinatorで組み立てることができる
- filterとmapは提案に含まれてない
- Observableはsubscribeするまで、データを発信し始めない
- Observableはビルトインオブジェクトになるかもしれない
- Observableはsubscribeしたあとunsubscribeすることでデータの流れを止めることができる
- (Observableはpush-basedのプロトコルをアプリやプラットフォームで扱えるようにするもの?)
push-basedプロトコルというのが何なのかイマイチですが、Observableがどういったものかわかりました。
JS Bin - Collaborative JavaScript Debugging
Angular2とタイプした時にconsole上でReceived key command: Angular2と出力するだけのサンプルです。
RxJSは使わず、zen-observableで実装してあります。ほとんどこの仕様書通りの実装です。よろしければこねこねしてやってください。
Observableについて理解できましたが、その強力さや凄さについては未だ疑問が残ります。
そのあたりのことは次回か、今週のng-kyotoのmeetupで話せたらいいと思っています。
興味のある方はぜひお越しください！ではではまたね！
Angular2ハンズオンに挑むふらいんぐうぃっち
ng-japanとng-kyotoとGDG神戸合同開催のAngular2ハンズオンに行ってきました。
そして実はこのハンズオン、先週東京でも行われたんです！東西で同じネタを扱う勉強会って珍しくないですかね？
会場のサイボウズ株式会社様には、25名ほどの方が来ていました。
会場がとても過ごしやすく広さ的にはどことなく学校の教室を思わせる感じでしたね。
で、肝心のハンズオンの教材はAngular2サイトのチュートリアルを題材としており、
手を動かし、解説を交えながらAngular2のことをたくさん教えていただけました。
ハンズオンの教材は口頭による解説がなくてもドキュメントが整備されているのでおうちで取り組むこともできます。
Angular2について少しでも気になっている読者の方がいればトライしてくださいね。
ハンズオンの前には @shin_v1 さんと @laco0416 さん（東京から来ていただきました！）からAngular2に関する
紹介とAngular2とECMAScriptについての発表がありました。
まとめるとこんな感じ
- Angular2はAngularJSより高速に変更を検知してViewに反映できる
- Angular2はフロントエンドフレームワークの概念に収まらない
- Angular2にさえ乗っかれば大抵のことはできる
- ドキュメントの整備も進んでいる
- Angular2は5月ごろにRCリリースかも！？
- Angular2学ぶなら今
- Angular2を学ぶことは書き方よりもまずECMAScriptを学ぶことである
- Angular2でECMAScript2015は当たり前、知らないとかは許されないくらいしっかり利用されている
- ECMAScriptは今後1年刻みで勧告されるので6年分をまとめたECMAScript2015はしっかり押さえておこう
- Webを理解して学び続けましょう
うん、まずはWebについての理解を深めようかな...。
ハンズオンは用意された教材をテキパキと片付け先へ先へ行ってしまう人や質問を交えながらじっくり取り組む人など様々でした。
個人的な感想ですが、AngularJSのころと比べると書きやすくなったなあと実感しました。
それは @laco0416 さんがおっしゃっていたようにECMAScriptの最新の仕様をどかっと盛り込んでるからこそだと思うんですよね。
もはや知らなかったでは通用しない世界が来てもおかしくはないと思うので今後も必要な情報を見極めてキャッチアップし続けていきましょう。
VSCodeでnpm scriptsのタスクを実行する
VSCodeを使い始めました。1.0がリリースされるのが楽しみですね。
ところでTypeScriptを使う上でビルドタスクの設定に困ったので書いていきます。
tasks.json
VSCodeはビルドタスクを設定できます。
プロジェクト内で設定すると .vscode ディレクトリの中に tasks.json が作られます。
そのあたりの概要は公式サイトに書いてあるのですが npm scripts に書いたタスクを設定する方法について書かれていないのでここで紹介します。
{
"version": "0.1.0",
"command": "npm",
"windows": {
"command": "npm.cmd"
},
"isShellCommand": true,
"suppressTaskName": true,
"tasks": [
{
"taskName": "build",
// Make this the default build command.
"isBuildCommand": true,
"args": ["run", "build"],
// Show the output window only if unrecognized errors occur.
"showOutput": "silent"
}
]
}
これは npm run build コマンドの設定です。
それぞれのプロパティの意味については公式サイトに書いてあるので参照してください。
日本語なら以下のサイトを参考にすると幸せになれるかもしれません。
tsconfig.json
VSCodeは tsconfig.json に filesGlob プロパティを設定しても認識してくれてないみたいです。
全然関係ないんですが angular のリポジトリにある tsconfig.json を見ると fileGlobs となっているんですよね。
エディタやそのプラグインによって違うのでしょうか？
Symbol と Iterator の型定義
どうやって解決するのかわからなかったのです。
どのファイルで解決できるのか探してたんですがなにかいい方法あるのでしょうか。
結局、以下の様な感じになりました。
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"sourceMap": true,
"outDir": "tsc"
},
"files": [
"./typings/main.d.ts",
"./node_modules/typescript/lib/lib.es6.d.ts",
"./src/index.ts"
]
}
"./node_modules/typescript/lib/lib.es6.d.ts" これで解決しました。
（これでいいのかはわからないです！）
2016年もやってきたng-japan春のAngular祭り
自分がng-kyotoコミュニティに参加しているのもあって、はじめてng-japanに行ってきました。
心の師（たくさんいる）である @laco0416 さんの発表に刺激されたので早速アウトプットすることにします。
いろいろ学びはありましたが、一番心に残っているのは皆さん口をそろえて「TypeScriptの静的型付けはいいぞ。」といってたことじゃないですかね。
今はBabel一辺倒なんですがTypeScriptに戻りたくなりました。Babel始めた頃と状況も違いますからね。
セッションは2トラックに分かれていて40分のセッションを最大6つ受講できました。
全体的に長いセッションが多かったので聴講する側も疲弊していましたが、
それだけ濃い内容でした。Angularの未来は明るいと感じましたよ。
発表は当日配信されていたみたいなんですけど、あとからでも見れるんですかね……？
まあとにかく学ぶことの多いイベントでした。
Angular2の失敗しない始め方(@laco0416)
@laco0416 さんの"Angular2の失敗しない始め方"を聴講しました。
Angular2に関する現時点でのよくある質問や、誤解についてひも解き
Angular2をもっと身近に感じて欲しい、そんな気持ちがビシビシ伝わってきました。
個人的にはドストライクの内容で、これからAngular2を触ろうとしていた身としては
たまらないセッションだったのは間違いないです。
（reveal.jsスライド内容をコピペできるのでいいなと思いました。）
Q&A形式で進んだ前半、Angularに対する突っ込んだ内容ではないものの
よく見る疑問に対して丁寧に解説されていました。
@laco0416 さんの見解ですが、Angular2のコードも全て読んだと聞いたので
すごく説得力がありましたね……。
とはいえそこは自分で確かめてみないといけません（できるだけがんばる）。
で、本セッションで一番強烈に響いたのが次のお言葉。
「Web技術が進化しているのにAugularが変わらないわけがない（意訳）」
言葉についてはうろ覚えで意訳なんですが、
つまり、Angular2はAngularJSとかなり違うということについて
AngularJSが生まれた2009年ごろと比較してWebは随分大きな変革を迎えたので
Angular2がそれを踏まえたフレームワークならば変化するのは当然でしょ？というお言葉です。
そんなとき僕達エンジニア個人個人がどう付き合っていくのか考えないといけませんが
個人的には「やらなくちゃ！」と奮起させてもらえる良いお言葉に感じました。
Progressive Web Apps（@dynamitter）
www.slideshare.net
聞き慣れない言葉でした。知らなかったです。ごめんなさい。
Progressive Web、はて？なんのことかと思って聞いていたのですが、これがかなりワクワクする話でした。
いくつかすでに試されている事例も出てきて、ホームに追加メニューとか知りませんでしたよ……。
Webもネイティブアプリと同じようなことができるようになってきました。
お手軽にいろいろな体験をしてもらえる時代がすぐそこまで迫ってきているのかもしれませんね。
Angular2実践入門（@Shumpei）
www.slideshare.net
前半はライブコーディングをベースにAngular2の書き方の解説、
後半は実際に使ってみて得られた知見をまとめられていました。
とても丁寧な解説で、はじめてAngularを見るという方にも聞きやすかったのではないでしょうか。
コンポーネント指向の設計方法についての考察はどうなんでしょうね。
状態はどこが持ってイベントに対する振る舞いどこに書くのかというあれです。
Fluxという解決策はAngular2でも活かせるのでしょうか。
そもそもそんなもの必要なくなにかいい方法があるのか悩ましいですね。
クリエイティブの視点から探るAngular2の可能性（@clockmaker）
www.slideshare.net
すでに3つのプロダクトでAngular2を実践されてました……。
そういった話を聞けるのはありがたいというか願ったり叶ったりだったのです。
しょっぱなから実装期間1週間とかいうプロダクトが出てきて、すごすぎました。
canvasとの連携だったりとかかなり細かい実践例が飛び出てきて
触ってない身としては口を開けて眺めていました。ええ、もう本当に、Angular2は可能性の獣ですね。
ngUpgradeと移植戦略（@armorik83）
我らが代表による発表です。
AngularJSからAngular2への移行方法として提唱されている
ngUpgradeについて具体的にどうやっていくのかについてのセッションでした。
Angular2への移行戦略はng-forwardというもう一つの戦略があった気がしますがどこいったんですかね……？
中身についてはかなり具体的な内容になっています。
とはいえ、AngularJSからAngular2への道のりについて一から書き直さず
段階的に移植していく方法についての考察ははじめて聞いたので、新事実が多かったです。
思ったよりも移植コストは大きそうですね……。
AngularJSでngMockを使ってテストを書くこともあるので
資産を生かせない時どうするか考えておいたほうが良さそうです。
mochaとはバイバイしてくださいとかも聞こえました……（マジで？）。
Angular1.5 Component & ngComponentRouter（@albatrosary）
AngularJSドキュメントに詳細がなかったngComponentRouterについてのセッション。
しかし、この数日前にまさかの公開というハプニング。
そこでcomponentの話を中心に再構成されたようです。
componentはdirectiveの書き方がより簡単になったもの程度にしか捉えられてないのですが
componentに沿って書いておくとAngular2移植が簡単になったりするんでしょうか。
ngComponentRouterについては @albatrosary さんご自身の記事に使ってみる方法について書かれてますので参考にさせてもらうと良さそうです。
Angular2、今日を終えて
Angular2いいですねぇ！ 気づいたらAngularはもはや単なるフレームワークというよりプラットフォームになっていましたよ……。 だからこそ末永く付き合っていくためにもこのセッションで語られた次のWeb技術は抑えておこうと思いました。 Angular以外でもWebの技術は生きるので学ばない手はなさそうです。
- Observable
- Zones
- Decorators
連続したPromiseによる非同期処理が辛いと感じていたので、 Observableについては掘り下げたいですねえ。
componentごとにChange Detectionを動的に生成して
かなり高速に変更を検知して反映することができるAngular2。
この辺のロジックは興味深いです。
各コンポーネントは親コンポーネントを持ち親コンポーネントに変更がない場合
子コンポーネントのChange Detectionは実行されません。
reactのpropsの説明の時によく見たような木構造の図が出てきて、
「お、あれだ」と思ったけど、変更検知した後に変更後の値を伝える方法についてわからないので
これも調べる必要がありそう。
そうそう、実はイベント中に（ITパティシエなる人から）お菓子が配られたんですが、 とても美味しかったです。食べたら「ウーピー」と言ってしまうほどに。 来年、ng-japanがあったら行きましょう。Angular2やりましょう！来年はもっと盛り上がってるかもしれませんよ！
