console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

JavaScript

getUserMedia()で指定するMediaTrackConstraintsのよもやま

Media Capture and Streams この仕様書をだらーっと流し読みしたので、知らんかったことをメモ。

ChromeのMediaStreamTrackとvideo要素の組合せには罠がある話

WebRTC界隈で、 Chromeの`video.srcObject = stream`はバグってるから使っちゃダメ 代わりに`video.src = URL.createObjectURL(stream)`を使え という噂があって。とはいっても、 Safariでは`URL.createObjectURL(stream)`がエラーになる URL.createObjectUR…

Safari TPのWebRTCでaddTransceiver('audio').setDirection('recvonly')するとMediaStreamがautoplayされない問題

タイトルに収まらんwSafariのWebRTCは新しめの仕様なので、`createOffer()`にオプションを渡して`recvonly`にする方法が使えない。 pc.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true, }) こういうやつ。なので、代わりに、 pc.addTr…

2017年版 getUserMedia()で画面のストリームを取得する

間違ってたら教えてください。

Flowでコンストラクタをエクスポートするモジュールの型を定義する

こういうやつ。 import EventEmitter from 'events'; const ee = new EventEmitter(); // <- コレ これはあくまで例で、Node標準の`events`のEventEmitterなら、Flowがビルトインで型情報を持ってるので困りません。 でも似たようなのを自分で書いたり、他の…

やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち

個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング(以下SSR)をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるか…

Macで作ったファイルをrsyncして、Linux上のNodeでファイルパスを扱うとき

に、考慮しておかないと確実にハマること・・。 濁点・半濁点 UTF-8-MAC NFC / NFD `rsync --iconv=UTF-8-MAC,UTF-8` `String.prototype.normalize()` このあたりがキーワードです。

Use before declarationとかいうEdgeのエラー

ReactなプロジェクトでEdgeでだけ動かないケースがあって調べてた。 Expression-body arrow function parameter destructuring "Use before declaration" error when parameter is only used in an inner function · Issue #2606 · Microsoft/ChakraCore · G…

JavaScriptでWebRTCやるための基礎知識

未来の自分のためのメモです。 仕事でやってないせいですぐ忘れるし、都度思い出すの大変なので・・。ただまぁだいたいの人はSkyWayとかEasyRTCとか何かしらのライブラリを使うはずで、そういう人たちにはあまり関係ない内容かも。 生のjsでWebRTCを書くとき…

Next Generation State Mangement by @mweststrate in #ReactEurope の日本語メモ

ReactEurope 2017のDay2より。動画とスライドのリンクはこちらから。 ReactEurope 2017 Day 2 AM - YouTube / slides MobXのサブプロジェクトみたいな存在である`mobx-state-tree`についてのトークです。

Node学園 24時限目 に行ってきたメモ #tng24

東京は東京でも有楽町だった回。 Node学園 24時限目 - connpass

mp3などの音源をxhrしてきて再生するには

過去に何回も書いてるはずやのに、どういうわけか毎度ハマる。 今度こそメモっておく。

JavaScriptからAmazon Cognitoを使うためのまとめ

最低限な要件だけ使ってみるにしても罠だらけだったのでメモ。 調べてもろくな情報出てこなかったので、業務レベルではまじで誰も使ってないんじゃねーのって気持ちがある。願わくばもう使いたくない( ˘ω˘)

MobX 3.0.0 の変更点について

MobX 3 released: Unpeeling the onion – Michel Weststrate – Medium 作者の @mweststrate 氏による記事も出てましたねー。`2.7.0`まで理想的な使い方をしてきたなら、特に大きな変更があるわけではないバージョンアップです。 ただにわかに人気が出つつあ…

GoogleChrome/sw-precache が便利そう

知ってた人には今さらーって感じかもやけど。正月休み最後の日ということで、何か新しい目のやつを学びたいなあと思い。 ServiceWorkerでできることやデザインについては追ってたつもりやったけど、実際にコード書いたことはないなということで。スーパーイ…

Webでのライブ動画再生の基礎知識について

知ってることを自分の中で整理するためのメモです。 知ってることしか知らないしそこまで使い込んでないので、間違ってる可能性は多いにありです。

0からはじめる MobX Part.4

さて、4回目です。 今回の目録はこちら。 computed autorun

Node学園 23時限目 に行ってきたメモ #tng23

渋谷かと思ってたら東京だった回!

Pug(元 Jade)で include と filter をあわせて使うには

Pugです。個人的には好きじゃないです。

0からはじめる MobX Part.3

GitHub - mobxjs/mobx: Simple, scalable state management. MobXの普及活動、Part.3です。でもそもそもそんなに書くことないのでそろそろ終わってしまいそう・・!

0からはじめる MobX Part.1

海外では去年くらいからRedux alternativeとして割と名前が上がってると思うのですが、国内はまだまだもっぱらReduxですねー。個人的には何でもいいんですけど、Reduxはもう色んな人がやってるし、自分は違う方面を掘ってみたいなーと思いつつ、 いつまでた…

WebAudio.tokyo #1 にいってきたメモ #webaudiotokyo

よもやWebAudioのワンマン勉強会が開催される日がくるとは! LTはそれぞれ10分なので、メモも短めです。

Object Rest/Spread Propertiesの気になる挙動

Object Rest/Spread Properties この記事を書いてる時点でStage 2。 // Rest properties let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 } // Spread properties let n = { …

WebRTC Meetup Tokyo #11 に行ってきたメモ #webrtcjp

まさかのNode学園と時間が被ってて、どっち行くかなーって迷ってたんやけど、まあ先に申し込みしてた方にってことで。 あっちは後で資料いっぱい見つかるやろうしw

Node学園 21時限目 -ES Modules Meetup- に行ってきたメモ #tng21

そしてLTで発表もしてきました。 発表資料はコレです。 0からはじめるFlow この記事の末尾に、発表後の補足も少し加えてます。

0からはじめるFlow Part.2

前回のPart.1では導入編ということで環境を整えるところまで。 今回からは各ファイルに実際に型をつけていくところを。そしてその過程でハマったものについて・・・。

Payment Request APIとは?〜Frontend Meetup Tokyo Vol.3 に行ってきたメモ #frontendmt

大手町は微妙に遠いと思いつつ今のところ皆勤賞になってるこのシリーズ。 日本経済新聞社はフロントエンドエンジニアを募集しています!とのことです。

0からはじめるFlow Part.1

こないだReactで書きなおしたウデマエアーカイブに、Flowをいれてみようと思って、しばらく色々と試したことのメモ、もとい奮闘記です。 Flow | A static type checker for JavaScript

Browserify x UglifyifyからWebpackへの移行

あっさりできたけど、一部つまるところもあったので一応メモっておく。タイトル以上のことは求めてなくて、いわゆる最小構成からはじめたい場合にもどうぞ。

#ウデマエアーカイブ をReactで書き直した件に関するメモ

スプラトゥーンのウデマエを可視化するサービスを - console.lealog(); イカのゲームが発売されたのが去年の5月。 ↑の記事を書いたのが去年の8月。 よもや1年に渡って同じゲームをやり続けることになろうとは・・・。

Service Worker 使ってますか?〜Frontend Meetup Tokyo vol.2 に行ってきたメモ #frontendmt

まさか2日連続で勉強会に行く日が来るとはー。ServiceWorkerそんな使ってないけども、とりあえずアップデートしときたい知識ではあったので行ってきた。

videoやaudioを扱う場合は、本番と同等のサーバーで開発すべし

とある案件で動画を`video`要素で表示するっていうごくごく普通なことをしてました。ただ、特定の条件が重なると動画がうまく再生されないことがあって、その原因を突き止めたうえでの学びをメモ(˘ω˘ )

iOSでWebRTCが使えないからWebSocketとWebAudioで擬似ストリーミングしてみた

というわけで、またも会社の合宿で作ったものを紹介します。 そして前回に引き続き、なんかまた優勝しました(∩´∀`)∩ワーイgithub.comざっくりでよければ社内勉強会で発表したスライドがあるのでこっちを。 WebSocketでAudioStreamingしてみた

UIスレッドとWorkerスレッドで、コードの実行速度に差はあるのか

普通の処理をUIスレッドで実行するのと、いわゆるWorkerスレッドで実行するのでは、どっちが速いのか。用途とかはあるやろうけど、単にどっちが速いのかふと気になったので調べた。

Angular UI-Routerで、ui-viewな要素が増えていく

という奇怪な出来事に遭遇したのでその原因と対策をメモ。`angular ui-view dupulicate`とか調べてる人には一見の価値ありかもしれません。

#スーパーイカメーカー を支える技術

どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。ikasu.lealog.netさてさて、というわけで恒例の裏側紹介記事です。

AWSのLambdaで、zipにしたコードを動かす時にハマったこと

短いコードならインラインで書いてしまってもいいですが、npmのモジュール使ったりするとインラインではダメで、zipで固めてアップロードする必要があります。簡単にできると思いきや、スッと動いてくれなかったので・・。 ハマったポイントのメモ。

petehunt/react-howto の日本語訳

petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。

2015年、Speech synthesisは使えるやつなのか

2015年も終わりですね。 さて、ふと思い立ってコレを調べてます。去年くらいかな?当初、使えるようでまったく使えないイメージがあったこのAPIですが、 はたして年末になった今、使えるAPIになっているのでしょうか・・・! Web Speech API - Web APIs | MDN

今さらcanvasにフリーハンドで絵が書けるライブラリ

20161119 追記: まさか使ってる人がいると思ってなかったけどいたので、`npm`から利用できるようにしときました を書いてました。 なんと7月に下書きしてたのでもはや覚えてません。でもきっとこの世の誰かの役には立つかもしれないので、いちおう記事にして…

特定の文字列の中に、特定の文字列が何回あったかカウントしたい

そして出来る限り速い書き方を知りたい。'1/2/3/4/5'って文字列の中に、'/'が何回出てきたかを取る例。

#ウデマエアーカイブ をVue.js@1.0.0にアップデート!

しました。 個人のサービスだと思い切ってやっちゃえるので良いですね。そんなに複雑な使い方してないので参考になるかは謎ですが、手順やら何やらメモっときます。

5分でわかった気になるWeb Notifications API

Web Notifications これを!5分で!

Polymer 1.0をさわってみて

さて、ここにこういうサイトがあります。nodefest.jp 実はこのサイト、噂のPolymerの1.0をふんだんに使ってます。 というわけで、そんなそこまでがっつり使い込んだわけではないですが、知見らしいものが一応たまったので・・。 まだ見ぬ未来のポリマリスト…

React.js meetup #2 に行ってきたメモ

いってきたシリーズが続いております。 つまりはメモ記事です。

東京Node学園 17時限目 と Web MIDI meets DIY #0 に行ってきたメモ

メモですよ。

ブラウザでもMQTTでメッセージングしたい!

調べたついでにメモを書き残します。 結局ブラウザでしか動かさないもののために、あえてMQTTを使う理由は私にはわかりません・・。

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Releasedの概要

まだアルファですが、みんな大好きjQueryのバージョンがついに`3`に! 公式からリリースノートが出てたので、いわゆるメジャーな変更の部分をかいつまんで訳しておきます。ちなみに、 jquery@3.0.0-alpha1: IE9以降などモダンブラウザ向け jquery-compat@3.0…

textarea要素の文字数の扱いについて

textareaの闇を見たような気がした。これは、文字数のカウンターっぽいものを実装するときに気付いて調べたものです。 いわゆるmaxlengthの敷居と、jsから文字列.lengthで取れる値で、文字数のカウントが違う・・ってなったところが事の発端。 20150624追記 …

SPAのキホンのキ

SPAとはなにかをざっくり説明する記事です。対象読者は、 SPAってよく聞くけど実際どういう仕組みかわかってない SPAってのをつくろうと思うけどどこから手を付ければいいかわかってない いわゆるサーバーサイドエンジニアで、クライアントのことを少し知っ…