はてなブックマーク

概要 WHATWG Streams のことを何回かに分けて書く。Kyoto.js #11 の『 WHATWG Streams をためした 』という発表のために調べたものだ。発表だけで終わらせるのはもったいないので、再整理して共有する。 今回は次の 3 つを書く。 WHATWG Streams の提供する Stream クラス それらの Stream でつくる Pipe chain Pipe chain を流れる chunk Stream クラスについては概要に留め、それぞれの詳細は別途記載する。 3 つの Stream クラス WHATWG Streams は次の 3 つの Streams クラスを提供している。 ReadableStream WritableStream TransformStream 今回はあくまでも概要だけを書く。 1. ReadableStream 読み取りのための

この記事は bouzuya's RxJS Advent Calendar 2015 23 日目かつ RxJS Advent Calendar 2015 の 23 日目です。 はじめに 今日は Promise と Obervable とを相互変換する方法について書きます。 Observable と Promise Promise は ES2015 で標準化され、各種 Web browser で実装されて、 JavaScript の非同期処理の代表的なものになっています。 RxJS の Observable は Promise からの変換や Promise への変換に対応しています。 Promise の扱いについて見ていきます。 Promise to Observable Observable.fromPromise Observable.fromPromise API Document Ob

TypeScript の ES6 modules の解釈と allowSyntheticDefaultImports の整理TypeScript 概要 TypeScript (1.8.7) の次の項目の関連を整理する。 import foo from 'foo'; import * as foo from 'foo'; export default foo; export = foo; allowSyntheticDefaultImports option TL;DR allowSyntheticDefaultImports: false (default) export = foo; / import * as foo from 'foo'; / module.exports = foo; が対応 export default foo; / import foo from 'foo';

問題 CSS で underline に animation をつけたい。 解決策 ::after / :hover / display / transition / width を組み合わせることで実現できる。 例 結果は https://jsfiddle.net/666xcjhj/ . a { text-decoration: none; } /* reset default css */ a { display: inline-block; } a::after { content: ""; display: block; width: 0; transition: width 0.3s; border-bottom: 1px solid #f00; } a:hover::after { width: 100%; } 解説 ::after を underline として利用する。 t

この記事は bouzuya's RxJS Advent Calendar 2015 の 16 日目かつ RxJS Advent Calendar 2015 の 16 日目です。 はじめに 今日は Subject とその種類を見ていきます。 詳細は RxJS 4.0.7 を参照してください。 サンプルコードは以下のコマンドで試しています。 $ npm i rx babel-cli babel-preset-es2015 $ $(npm bin)/babel --presets es2015 index.js -o out.js && node out.js Subject とは Observer としても Observable としても動くクラスです。 任意のタイミングでの onNext Observable.from などは subscribe されてはじめて動作します。Subject の

概要 Babel と TypeScript の ES6 modules の import の挙動の違いについて確認する。 Application 内部では Babel ・ TypeScript を同一設定で使うはずなので問題は起きない。しかし、外部の npm package を利用する際には問題が起きる。 各状況ごとにどう書けばいいのかの参考情報をまとめる。 将来的には、このようなまとめが不要になることを期待する。 前提 Babel 6.6.5 es2015 preset TypeScript 1.8.7 allowSyntheticDefaultImports (export = foo を import foo from 'foo'; できる) 各変換結果 1. Babel import ... from '...'; 'use strict'; var _foo = require(

この記事は bouzuya's RxJS Advent Calendar 2015 の 4 日目かつ RxJS Advent Calendar 2015 の 4 日目です。 はじめに 今日は ReactiveX の Operators の Transform について RxJS の API ドキュメントやソースコードを見ていきます。 また RxJS 4.0.7 を対象にしています。 Observable の変換 Observable.prototype.map ReactiveX - Map operator Observable.prototype.map API Document Observable.prototype.map Source Code Array.prototype.map でもおなじみのものです。動きについては説明は不要でしょう。 import { Observab

Observable.merge ReactiveX - Merge operator Observable.merge API Document Observable.merge Source Code 可変長引数で observable を取ります。各 Observable に値が流れてくるたびに、それをそのまま流します。 import { Observable } from 'rx'; Observable .merge( Observable.from([1, 2, 3]), Observable.from(['A', 'B']) ) .subscribe( value => console.log(`onNext: ${value}`), error => console.log(`onError: ${error}`), () => console.log('onComplet

この記事は bouzuya's RxJS Advent Calendar 2015 の 9 日目かつ RxJS Advent Calendar 2015 の 9 日目です。 はじめに 今日は ReactiveX の Observable Utility Operators について RxJS の API ドキュメントやサンプルコードを書いていきます。 また RxJS 4.0.7 を対象にしています。 Observable.prototype.subscribe ReactiveX - Subscribe operator Observable.prototype.subscribe API Document Observable.prototype.subscribe Source Code リスト上は subscribe が挙げられていますが、もう特に書くことはないので割愛します。 Ob

この記事は bouzuya's RxJS Advent Calendar 2015 の 3 日目かつ RxJS Advent Calendar 2015 の 3 日目です。 はじめに 今日は reactivex.io にある Operator の Creating カテゴリー からいくつかを紹介します。詳細は公式リポジトリの Observable のドキュメント やソースコードを参照します。 ちなみに、この ReactiveX (reactivex.io) は Reactive Extensions (Rx) の関連プロジェクトの情報をまとめているサイトです。ドキュメントも充実しています。各 Operator のドキュメントには marble diagram もついていて分かりやすいです。 また RxJS 4.0.7 を対象にしています。 Obervable の生成 Observable

subscribe (Observer) の onError 各種 Operator よりまず subscribe (Observer) の onError です。Observable.throw でエラーを流してみましょう。 import { Observable } from 'rx'; Observable .throw(new Error('ERROR!!')) .subscribe( value => console.log(`onNext: ${value}`), error => console.log(`onError: ${error}`), () => console.log('onCompleted') ); // onError: Error: ERROR!! import { Observable } from 'rx'; Observable .from([1,

この記事は bouzuya's RxJS Advent Calendar 2015 の 2 日目かつ RxJS Advent Calendar 2015 の 2 日目です。 はじめに 今日の内容は公式リポジトリにあるドキュメント Exploring The Major Concepts in RxJS とほとんど同じものです。 また RxJS 4.0.7 を対象にしています。 Obervable と Observer RxJS における最も基本的なクラス Observable / Observer の概要を確認します。 Observable はデータソースを表すクラスで、名前どおり observe できる何かです。Observable からデータを受け取るには subscribe(observer) メソッドを呼び出します (メソッド名は observe ではありません) 。subscri

しばらく見ていなかったらバージョンが進んでいたので新しい機能を確認してみた。その際のメモ。 今回確認するのは、ぼくが最後に確認した 2.11.1 から最新の 2.13.2 まで。 コミットを日時順に追いかけたのでマージされたタイミングによって順番が正しくないかもしれない。 総括 ぼくの気になったものを挙げる。 express の警告が修正された。ようやく。 Listener の引数が msg から res に変更された。 Listener に options が追加された。id などを指定できる。テストなどに有用かも。 process.env.EXPRESS_PORT / process.env.EXPRESS_BIND_ADDRESS が追加された。 endpoint URL の prefix を /hubot になるよう規約が追加された。 Hubot 自体のテストコードが増えた。 ドキ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは Hubot Advent Calendar 2014 の 25 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 17 回 (最終回) です。目次は、第 1 回にあるので、そちらをどうぞ。 前回、そして今回は 前回は 使えない Hubot アダプターをつくろう ということで、Hubot アダプターを実際につくってみました。 今回は、最終回なので、ここまでのまとめと紹介できなかった細々としたなどに触れて、おしまいにします。 ふりかえり 過去の 16 回をふりかえってみます。 第 1 回 『Hubot /

問題 apm のコマンドの内容が分からない。 解決策 以下に一覧を示す。元データは apm help の一覧表示と apm help <command> で表示されたもの。翻訳は正確ではない。 コマンド 内容

問題 Hubot のログやロガー (Robot#logger) についての情報が少ない。 公式 (v2.11.2) のドキュメントには、かろうじて利用例が掲載されているだけで、その他の情報はざっと検索した限りでは存在を確認できない。 唯一のドキュメント: https://github.com/github/hubot/blob/v2.11.2/docs/scripting.md#error-handling # src/scripts/does-not-compute.coffee module.exports = (robot) -> robot.error (err, msg) -> robot.logger.error "DOES NOT COMPUTE" if msg? msg.reply "DOES NOT COMPUTE" 解決策 ソースコードを読み、以下にまとめる。 結論:

これは Hubot Advent Calendar 2014 の 4 日目の記事です。 また @bouzuya の Hubot 連載の第 4 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回は Hubot を Heroku で動かして Slack から話す方法 について紹介しました。ここまでで Hubot は元気よく動きますし、みんなで hubot pug bomb してログもめちゃくちゃ、最高ですね！ ……でも、まだまだです。 もっとイカした Hubot にするために、今回は Hubot スクリプトの追加を紹介しましょう。 前提条件 その前に今回の前提条件を。 前回までにつくった Hubot GitHub アカウント 今回は GitHub 上にある Hubot スクリプトを fork し、書きかえますので、GitHub アカウントと基本的な操作ができることが前提です。

これは Hubot Advent Calendar 2014 の 19 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 12 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は さて、前回は robot.brain を使った Hubot スクリプトをつくろう ということで、robot.brain で永続化する Hubot スクリプトをつくりました。 今回は robot.brain を永続化する、永続化される側ではなく永続化する側の Hubot スクリプトをつくりましょう。 テキストファイル (JSON) に brain の内容を書き出して、永続化する Hubot スクリプトをつくります。Heroku にデプロイする場合には(Heroku はEphemeral filesystemなので)実用的ではありませんが、ローカルで rob

これは Hubot Advent Calendar 2014 の 23 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 15 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は 前回は Hubot スクリプトのテストやその環境を知ろう ということで、Hubot のテストについて軽く紹介しました。 今回は Hubot アダプターについての紹介と Shell アダプターのコードリーディングをしましょう。 Hubot アダプターとは そういえば Hubot の全体構成を話していなかった気がしますが、第 1 回でも紹介したとおり、 Hubot は特定のチャットに依存しないためにチャット別の「アダプター」を持っています。 例えば Slack なら hubot-slack 、 HipChat なら hubot-hipchat 、IRC なら

これは Hubot Advent Calendar 2014 の 10 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 8 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は 前回は スクレイピングする Hubot スクリプトをつくろう ということで、npm パッケージ request と cheerio とを使って、Adventar をスクレイピングして Advent Calendar 一覧を返す Hubot スクリプトをつくりました。 前回は HTTP リクエストしたので、今回は HTTP レスポンスしましょう (?)。 Hubot で HTTP アクセスを待ち受けて、HTML を返しましょう。要するに Hubot でホームページ (Web サーバー) をつくりましょう。 スクリプトの完成イメージ まず、今回つくろうとしてい

これは Hubot Advent Calendar 2014 の 22 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 14 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は 前回は いまさらだけど Hubot のドキュメントを読んでみよう ということで、Hubot のドキュメントについて紹介しました。 今回は Hubot スクリプトのテストについて紹介します。とても軽く触れるだけですが。 変にバズってぼくのリポジトリで最も多くスターがついてしまった bouzuya/hubot-twada ライクな Hubot スクリプトをつくりましょう。 ちなみに今回から generator-hubot は 0.2.0 にバージョンアップしています。連載中にどんどんバージョンアップされますね。 とりあえず grunt test いつものよう

これは Hubot Advent Calendar 2014 の 18 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 11 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 ちなみに昨日は @hiconyan さんの Hubotで「どのコマンドにも一致しない」ときの処理 でした。Robot#helpCommands() については説明する予定だったんだけど、もういいかなー。 前回まで、そして今回は さて、前回は 設定を読み込む Hubot スクリプトをつくろう ということで、外部 (環境変数) から設定を読み込む Hubot スクリプトをつくりました。 今回は、robot.brain を使って Hubot スクリプトのデータを永続化してみましょう。 brain はシンプルな KVS であり、Hubot の標準の永続化の仕組みです。実際にどうやって永

これは Hubot Advent Calendar 2014 の 11 日目の記事です。 また、今回は @bouzuya の Hubot 連載の第 9 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は 前回は Hubot でホームページをつくろう ということで、robot.router を使った HTTP リクエストへの応答する Hubot スクリプトをつくりました。 今回は、ちょっと違った観点で Hubot スクリプトの読み込みの流れを追いかけてみましょう。 Procfile さて Hubot はどうやって起動されているのでしょう。ここでは Heroku にデプロイされる想定で考えてみましょう。 Heroku はルートに Procfile があれば、それを見て動きを変えます (実は省略可能ですが、それは後述) 。ひとまず Procfile から追ってみ

これは Hubot Advent Calendar 2014 の 9 日目の記事です。 昨日は @udzura さんの 『carrierモジュールで雑にHubotからコマンドを打つ』でした。stream を中心としたプログラミングは Node.js らしい良い形なのですが、ぼく個人としてはあんまり使えてないですね。あと @bouzuya Advent Calendar 的な煽りが見えた気もしますが、気のせいでしょう。 また、今回は @bouzuya の Hubot 連載の第 7 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回まで、そして今回は 前回は 簡単な Hubot スクリプトをもっとつくろう (おみくじ系) ということで、Response#random を使って、ランダムにひとつを選んで返す Hubot スクリプトをつくりました。 今回は外部の npm パッケージ

これは Hubot Advent Calendar 2014 の 3 日目の記事です。 また @bouzuya の Hubot 連載の第 3 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 前回は Hubot のインストール について紹介しました。Hubot をインストールし、shell アダプターで動かして簡単な動作確認をしました。今回は Hubot を Heroku で動かし、さらに Slack から話してみましょう。 ちなみに、前回の環境の続きとして扱っているので、環境の差異があればそちらを確認してください。簡単にまとめるとこんな状態です。 BOT 名 : uran アダプター : hubot-slack 変更 : なし。generator-hubot で生成したまま。 今回の目標 今回の目標は上記のとおり、Hubot を Heroku で動かして Slack 経由で話

これは Hubot Advent Calendar 2014 の 2 日目の記事です。 前回は Hubot / ChatOps の概要 について紹介しました。今回は Hubot をインストールしてみましょう。 また @bouzuya の Hubot 連載の第 2 回です。目次は、第 1 回の記事にあるので、そちらをどうぞ。 Hubot のインストール方法は 2.9.x とそれ以前とで大きく変わっています。今回は 2.9.3 を対象としているので、新しいインストール方法を紹介していきます。 ちなみにこんな Qiita 記事を読むより、公式のドキュメント ( というか README ) を読むのが確実です。 yo および generator-hubot のインストール Hubot 2.9.x は Yeoman ジェネレーターでインストールするようになっています。 Hubot にも Yeoman

これは Hubot Advent Calendar 2014 の 1 日目の記事です。 Hubot Advent Calendar は 2014-12-01 時点で 3 / 25 という状況なので、@bouzuya の貴重な昼休みをつかって、細切れに Hubot の解説をしていくイベントになりました (適当) 。 連載の目次を追加しました。 第 1 回 『Hubot / ChatOps とは』 第 2 回 『Hubot のインストール』 第 3 回 『Hubot を Heroku で動かして Slack から話す』 第 4 回 『Hubot スクリプトを追加インストールしよう & 自分だけの Hubot スクリプトをつくろう』 第 5 回 『簡単な Hubot スクリプトをゼロからつくろう』 第 6 回 『簡単な Hubot スクリプトをもっとつくろう (おみくじ系)』 第 7 回 『スク

問題 Hubot 2.9.x 時代の標準的な権限管理についての日本語リソースが少ない。 解決策 ぼくが書く。覚え書きをかねて。 ここでは hubot-auth@1.1.2 について説明する。 github/hubot-scripts の auth.coffee deprecated。忘れろ。 Hubot 2.9.x 現在で、標準的な権限管理の仕組み。以下の機能を提供する。 Hubot の User 向けの Auth クラスの提供 それを操作するコマンドの提供 インストール 一般的な Hubot スクリプトと同様。 npm install --save hubot-auth からの external-scripts.json への追記。 設定 HUBOT_AUTH_ADMIN ... 管理者を設定する。カンマ区切りで user.id を設定する。これは adapter 依存の値なので一概には