クライアントに納品するプロジェクトで、タブレット/スマホ連動の音声認識アプリを作ることになった。 仕組みはこんな感じ。 アプリの仕組み 特定の単語を認識して、両デバイスでコンテンツを再生する、というヤツ。 音声認識はタブレットでやっていて、単語を認識したらスマートフォンにイベントを送信している。 当初はWeb技術で実現しようとしていた。 音声認識: Web Speech API デバイス間の通信: WebSocket PCでいい感じに動くところまではサクッと作れたんだけど、Android実機で動作確認した所、音声認識開始の「ピコン♪」という音が無限になり続ける事態に遭遇した。 まさにこの状況↓ ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog Androidで開いたら無限にポホロンポロロン音が出続けていた2019/01/20 23:33 b.haten

娘を1024回揺らした— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayosi) 2020年3月7日 娘、1024回揺らすと大体スヤァ……と眠ってくれる。 僕は娘を寝かしつける時に何回揺らしたかを数えている。歩数計や加速度センサーを使うなんてハイテクな事はしておらず、すべて手で数えている。 とはいっても、1回1回指折り数えている訳では無い。娘は子守唄を歌うと安心して寝てくれる確率が上がるため、基本アドリブでオリジナル子守唄を歌いながら揺らすことになるのだが、この子守唄を何回ループしたかを数えて計算している。 1024回だとこんな感じ。 一番よく使うオリジナル子守唄はこんな感じ。 飽きるので適当にアドリブで歌ったりするんだけど、なんだかんだいつもと同じ歌を歌うと安心してくれる気がする。 回数を数えるメリット・デメリット 子を揺らした回数を数える事で、以下のようなメリットがある。 イライラしな

CG開発や映像制作用にNVIDIA GPUの載ったノートPCを漁っていた所、Lenovo Y740 15inchが良さそうだったので購入した。 日本だとあんまり情報みないけど、今のところ満足してるのでレビューを書いてみる。 https://www.lenovo.com/jp/ja/notebooks/legion-laptops/legion-y-series/Lenovo-Legion-Y740-15/p/88GMY701059 スペック 良い所 とにかく安い ゲーミングノートにしては大人しいデザイン 主要ポートが背面にある 作りがしっかりしてる トラックパッドとボタンが独立 注意点 アダプターがめちゃくちゃデカいし重い バッテリーが全然持たない Webカメラが位置、画質ともに最悪 Intel QSVが使えない？ OSは英語版、キーボードは英字配列のみ Lenovo 開発環境構築メモ 初

Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。 github.com 目次 インストール 使い方 hbt の使い方 0. 開発用ブログを作成する 1. テーマの雛形を作成する 2. 開発用ブログにCSSが読み込まれるようにする 3. テーマを開発する 4. 完成したテーマを出力 インストール 動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。 https://nodejs.org/ja/ ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。 npm install -g @fand/hatena-blog-theme-boilerplate 使い方 hbt の使い方 0. 開発用ブログを作成する テーマの開発には、開発用のブログを開設しておくと便利です。 既存のブログをエクスポート

お題「スクリーンショット/GIFアニメ作成技術が集まるスレ」 最近、仕事でも趣味でもスクリーンキャプチャしまくっている。 結構いろいろツール使ったりしてるので、メモっとくと需要あるかなって。 マイお題も作ったので、皆さまのGIFアニメ作成技術やこだわりを投稿してくれると助かります！😸 目次 キャプチャツール GIF Brewery 3 Quicktime Player Licecap 編集/軽量化 Gifsicle ezgif.com ffmpeg その他小技 キャプチャデバイス買おうか迷ってる キャプチャツール GIF Brewery 3 gifbrewery.com macOS向けの高機能なGIF作成/編集ツール。 スクリーンを撮影するだけでなく、Webカメラや動画ファイルからGIFアニメを作成できる。 フレームレートやスピードを簡単に設定できる上、軽量化もできる。 仕事で開発中の画

GLSLでVJやライブコーディングができるAtomパッケージを作りました。 その名も VEDA !!! atom.io この記事では、VEDAの使い方や機能を説明します。 目次 このパッケージでできること 機能一覧 インストール glslangValidatorのインストール VEDA本体のインストール 使い方 今後の開発 このパッケージでできること AtomでこんなVJができちゃいます！ My first VJ live coding pic.twitter.com/j66MFGZfFO— amagi (@amagitakayosi) 2017年7月31日 この動画は、先日僕が VEDA を使ってVJした時のものです。 動画素材や画像素材をロードしつつ、GLSLで加工したり動きを付けたりしています。 動画素材をロードしてMIDIコントローラーで操作きるので、コードをほぼ書かずにVJするこ

とにかくこの動画を見てくれ！ TidalCycles、めっちゃ簡単にBreakcore/Mashcore作れてテンション上がってきた pic.twitter.com/kVpnxE9u3T— amagi (@amagitakayosi) 2017年6月23日 ライブコーディングでフレンチコアもできる時代@tidalcycles pic.twitter.com/hgFHfY7rNW— DJ SHARPNEL@VR (@sharpnelsound) 2017年6月25日 たった20~30行くらいのプログラムで音楽がつくれる！ それがTidalCycles！ この記事ではTidalCyclesについてザッと紹介し、さっきの動画で演奏している内容について解説します。 僕自身もTidalCyclesに入門したばかりなので、TidalCycles仲間が増えたらいいなって思ってます😸。 対象読者 音楽が

最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky

github.com シェーダーは、本来は3Dプログラムで物体に影をつけたり、視覚的なエフェクトを与えるための仕組みだ。 しかし、シェーダーだけで複雑なグラフィックを表現する事もでき、GLSL SandboxやShadertoyには大量の作品が投稿されている。 今回は、フラグメントシェーダーのファイルからGIFアニメを生成するツールを作成した。 これを使うと、冒頭のGIF動画のようなものが作ることができる。 また、npmパッケージになっているので、フロントエンド開発のフローに沿ってシェーダーのサムネイルを作成できる。 実装はgistに転がってたスクリプトを参考にしている。 offscreen rendering with three.js and headless-gl, in coffee-script · GitHub 使い方 npm install -g glsl2img すると、

atom.io はてなブログやはてなグループ、増田に投稿する時に便利です。 どうぞご利用ください。 もくじ 機能 はてな記法をシンタックスハイライトしてくれる Markdown文字列をはてな記法に変換できる スニペット使える インストール方法 Atomで新しい言語のモードを作る方法 基礎知識 言語モードはAtomのpackageとして開発する 言語のパースは正規表現で行なう 実際の手順 apm init -l で雛形を作る apm link して手元のAtomで確認 grammars/ にGrammarファイルを書く snippets/ にスニペットを追加 settings/ を編集 GitHubにpush apm publish 参考リンク 機能 はてな記法をシンタックスハイライトしてくれる こんな感じ Markdown文字列をはてな記法に変換できる md2hatenaを利用した変換機能

github.com Markdownで書いてしまった文章を増田に投稿したい方など、どうぞご利用ください。 ライセンスはMIT, テストカバレッジは C0 100% です。 インストール方法 $ npm install --global md2hatena 使い方 ターミナルから利用できます。 $ md2hatena foo.md > foo.hatena拙作のAtom用はてな記法モード language-hatena をインストールすると、コマンドパレットから実行することもできます。 (冒頭の画像) JS用のライブラリとしても使えます。 import fs from 'fs'; import { md2hatena } from 'md2hatena'; const md = fs.readFileSync('foo.md', 'utf8'); md2hatena(md).then((h

こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣

ボーナス待ちきれずに買った。 RICOH デジタルカメラ GRII APS-CサイズCMOSセンサー ローパスフィルタレス 175840 発売日: 2015/07/17メディア: Camera 経緯 iPhone6s Plus入手直後は画質の良さに感動して「しばらくカメラは要らないかな〜」なんて思っていたが、しばらく使っているとやはり不満が出てきた。 具体的には 夜空を撮れない ボケない の二点。 平日出歩けるのは夜だけだが、撮りたいと思った景色が暗く、iPhoneだとノイズだらけでまともに写らない事が多々ある。 また、携帯のカメラで綺麗なボケを出すのは難しくて、友人のアップロードする綺麗な写真を見るたびに羨ましく感じる。 こうした不満が募り、いずれちゃんとしたカメラを買わないとな、と考えていた。 そんな折、iPhone6s Plusのレンズに傷が入ってしまった。 どんな写真を撮っても光の

macOSダサいって言うけどiXXXも中々ダサいし、Javaに肖るJavaScriptもダサいし、ところで平仮名の「を」って綺麗に書けなくないですか、みたいな感じがする— 沖縄県 (@amagitakayosi) 2016年6月13日 これ意味分かんないと思うけど僕の中では筋が通っていて、つまり、 macOS がダサいかダサくないかっていうの、人々はどうやって判断するというのか？？？？？？？？？？？？？ 文字列の美しさについて、簡潔さや読みやすさなど、我々の中には共通認識としてある程度の尺度がある。 ねOS よりは iOS のほうがシュッとしてるし、 macintosh operating system ver 10 よりは OS X のほうがシュッとしてる。 とはいえ、 macOS がどれだけダサいのか、というのは、 OS X のカッコよさ or ダサさと比較できるものなのか？ OS X

僕がWeb業界に飛び込んでから一年が経つ。 フロントエンドの端くれとして、今年はデザインについても勉強したい。 あいにく僕は美的センスが完全に破綻している。 せめてUXに関する力を付けるべく、最近それらしい本を読み漁ってる。 そのうち一冊が「さよなら、インターフェース」だった。 さよなら、インタフェース -脱「画面」の思考法 作者: ゴールデン・クリシュナ,武舎るみ,武舎広幸出版社/メーカー: ビー・エヌ・エヌ新社発売日: 2015/09/17メディア: 単行本（ソフトカバー）この商品を含むブログ (5件) を見る 概要 The best interface is no interface | Cooper Journal 去年9月発売の本書は、↑のブログ記事に加筆修正を加えたものだ。 元のタイトルは "The best interface is no interface" 。 タイトルの

7月に作ったやつ、Mithril試すがてら少し改良したんだけど紹介するの忘れてた http://gmork.in/guitarbreaks 遊んでみよう 1. ギターフリークス専用コントローラーを買う リサイクルショップで大量に売ってます 僕はワンダーレックスつくば店で500円くらいで買いました あと日本橋のスーパーポテトにゲーセンのやつ売ってたけどプレステで使えるのかは知らない 2. 変換コネクタを買う Macだと認識しないコネクタ多いので注意 僕は↓使ってる ELECOM ゲームパッドコンバータ USB接続 プレステ/プレステ2コントローラ対応 1ポート JC-PS101UBK 出版社/メーカー: エレコム発売日: 2006/05/25メディア: Personal Computers購入: 10人 クリック: 89回この商品を含むブログ (5件) を見る 3. 遊ぶ http://gm

youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、

起床即アーメンブレイクした ギタフリ用コントローラ持っててPCにつなげる人はここで試せます http://gmork.in/guitarbreaks/ 解説 GamepadAPI というのがある http://www.w3.org/TR/gamepad/ これは GamepadAPI と Web Audio API 組み合わせて音鳴らしてるだけ。 クオンタイズ頑張ればもっとキレイに鳴らせるかなー 経緯 先日のWeb Music ハッカソンにギタフリ用コントローラで発表してる人がいて、GamepadAPI の紹介してた。 （名前わすれてしまった…） 実は僕も以前同じ事をやろうと思ってギタフリ用コントローラ買ってたのだった。 Processingとかで試してたんだけど、Mac で上手く認識されなくて諦めた。 今回リベンジするにあたって、「もしかしたらコンバータが悪かったのかな？」と思いPS用コ