JavaScript

Socket.IOとのリアルタイムコミュニケーションをVuexのmodulesを利用してハンドリングする

という趣旨の内容で、先週のVue.js Tokyo v-meetupでLTさせてもらった。 vuejs-meetup.connpass.com 発表資料はこちら speakerdeck.com 背景 僕が今メインで担当しているプロダクトの性質上、ブラウザ上でのリアルタイムコミュニケーションが必要な機能を扱…

Vue/Vuexに静的に型を付ける

最近Vue/Vuexを触っている。 前々から欲しいと思っていたのもあって、習作としてelectronでYouTubeのデスクトップクライアントを作った。 github.com 僕は仕事中はだいたいYouTubeを再生している。映像を見ながらコードを書きたい欲求があった。とはいえ、そ…

ReactNativeのAsyncStorageをNodeのREPLから操作する

背景 ReactNativeにはAsyncStorageというkey-valueストレージシステムがある。 valueにはstringしか入れられない本当に簡素なものだけど、JavaScriptのプレーンなオブジェクトはJSONにシリアライズ可能であるので、さほど困らない。 クライアントサイドで永…

CafePitchの区切り文字にheader要素を指定できるようにした

CafePitchはElectron製のMarkdownで書けるプレゼンテーションツールです。久々のアップデートです。 github.com 久々ということでAngularをrc versionから脱却してみたりとか、TypeScriptのバージョンを上げたりとか色々した。 Angularはbootstrap周りをごっ…

YAML/JSONでコマンド定義が書けるテンプレートジェネレータを作っている

この記事はNodeJS Adventcalendar 2016 の19日目の記事です。 もうクリスマスということで、大幅に遅れてしまって申し訳ございません。 色々とnodejsのCLIや、electronやwebなどを作っていく中で、僕の利用するスタックはだいたい同じなので、毎回package.js…

SpectronからElectronアプリケーションのMenuを操作する

この記事は Electron Advent Calendar 2016 の12日目の記事です。 SpectronはElectronアプリケーションのためのE2Eテストツールです。 electron.atom.io SpectronはElectronのChrome Driverを通じてアプリケーションの操作を実行できるのですが、メニューの…

Frontend Meetup vol.1 で革命と秩序とSPAという発表をしてきた

FiNCさん主催のFrontend Meetupというイベントで革命と秩序とSPAという発表をしてきた。 connpass.com 有志の方がまとめを書いてくださっているので、そちらもぜひ。 www.chirashiura.com qiita.com 僕の発表資料はこちら。 speakerdeck.com 主催のFiNCさん…

flowtype v0.32.0 changes

flowtype v0.32.0がリリースされました Release v0.32.0 · facebook/flow · GitHub この変更では待望のgen-flow-filesコマンドが追加されています。 これはflowtypeのシンタックスで書いたjsファイルから、型定義情報を生成するコマンドです。 これまではラ…

flowtypeの実現する実行時例外のない世界

今日こんなスライドを見かけた。 djcordhose.github.io これはtypescriptとflowtypeの違いがよく分かるすごく良いスライド。 このスライドの5ページ目に以下の1文がある。 FLOW SOUNDNESS, NO RUNTIME EXCEPTIONS AS GOAL スライドに刺激を受けたのと、最近f…

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

Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。 とりあえず一通り動くところまでできたのでpublishした。 github.com 使い方はこんな感じ。 エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすること…

JSer.info 5周年記念イベントに行ってきた(LTもした) #jserinfo

jser.connpass.com jser.info #jserinfo すごく楽しかった— じょう (@joe_re) 2016, 1月 16 すごく楽しかったです!5周年、おめでとうございます! 尊敬 #jserinfo 5周年誠におめでとうございます。継続は力なり。本当に凄い事だと思います。尊敬しています…

Gotanda.js#2 で request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい! というLTをした

ご飯おいしくて最高だった。(GaiaX さんありがとうございました!) ご飯うまい #gotandajs— じょう (@joe_re) 2016, 1月 8 資料 request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい! from Masato Noguchi www.slideshare…

Railsのrequest-specからレスポンスを抽出して、サーバのレスポンスをモックできるgemを作った

Railsのrequest-specからレスポンスを抽出して、サーバのレスポンスをモックできるautomockというgemを作りました

ブラウザ上で開いているものをなんでもOCRできるようにしてみた

英語の勉強も兼ねてhuluとかで海外ドラマを字幕付きで見ることがあって、かっこいいセリフとか出てきたときに字幕をクリップボードにコピーできたら便利だよなーと思ってそんなchrome extensionを作ってみた。 インストールはこちら joe-re/OCR-Screengithub…

AngularJS1.3で追加されたngModelOptionsで遊ぶ

はじめに 最近出版されたAngularJSリファレンス AngularJSリファレンス作者: 池添明宏,金井健一,吉田徹生,丸山弘詩出版社/メーカー: インプレス発売日: 2014/09/05メディア: 単行本(ソフトカバー)この商品を含むブログを見る これはすごく良い本。分かりや…

AngularJSのdirective間の連携

僕なりによく使うなー、って方法を書いてみる。 親ディレクティブと子ディレクティブ間で通信をしたい場合 tabset要素とtab要素は親と子の関係になると言えると思う。 そしてtabset要素は今選択している要素が何なのかを管理して、tab要素に適切に伝えられる…

素早くマルチデバイスでの確認ができるbrowser-syncというツールが便利

マルチデバイスの対応をしてると、ちょっとスマホで操作性を確かめたいなー、とか思うことよくあります。見た目とか、タッチイベントの挙動の確認とか。 そんな時に便利なのがbrowser-syncというnpmモジュールです。 できること ローカルネットワーク内のデ…