JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
Chromecastや外部ディスプレイにmasawadaを表示するmasawada castボタン - hitode909の日記
masawada castを開始する お使いのブラウザはPresentation APIに対応していないようです Presentation APIの練習をやっておきたいとは以前から思っていて、しかしHTMLをもう1個用意するのがめんどうで手が伸びていなかった。 ページめくりなどのコントロールを用意せず、動画を表示してほったらかしにするくらいならちょろっと書けば動く事に気づいたので試してみた。 突然家のテレビでmasawadaさんが表示されるのでおもしろい。PCのChromeでは動いたけど、Androidではうまく動かなかった。押しても反応しないときは動きません。 navigator.presentation.defaultRequestに代入できるのがへえというポイントで、この記事をブラウザ側のUIからキャストしても、この記事ではなくてmasawadaさんが表示される。右クリック禁止みたい
ScrapboxでVJするためのChrome拡張を作った - hitode909の日記
1月のKyoto.JSの休憩時間にMIDIコントローラとWeb MIDI APIでVJできるとよさそうって話になったので買ってみて、ちょっとずつ触ってみた。過去に作ったツールをMIDI対応する、とか、MIDIの入力に応じて絵を出す、という使いみちに加えて、既存のページにコードを差し込んでエフェクトをかけるのを作ってみた。 Scrapboxにエフェクトをかける Scrapboxのプロジェクトのトップページには四角いカードが並んでいるので、これをパーティクルとみなして毎フレーム見た目を書き換えると愉快なビジュアルを出せると考えた。 MIDIコントローラで操作するために、動きのパターンを座標、大きさ、色、背景、ページ全体の変形、などチャンネルがいくつかに整理して、縦フェーダーでエフェクトの種類がかわり、各チャンネルに対応するつまみでエフェクトの掛かり具合が変わるようにした。 こういう構造があって
一人でやってると個人開発と同じクオリティになる問題 - hitode909の日記
たまに、今のこの状況は組織パターンに載ってたこのパターンだ、と思い出すことがある。数年前に読んでまだ役立ってる本のうちのひとつ。 今は「常に誰かが進捗させる」というプラクティスをやっている。それ自体はいいのだけど、問題なのは、チーム内チームのエンジニア二人チームでやっているので、一人が進捗させる、もう一人が差し込み対応する、という最小の形になっていること。 奥さんが家でやってる生け花教室のホームページを作る夫、みたいなものをイメージすると、奥さんが生花を教えることで進捗させて、夫がホームページ更新など雑務を巻き取るという構造をイメージできる。百人以上の人間がいる会社であっても、夫婦の生け花教室と同じ数の人のアサインでことを進めているのだとしたら、推進力では同じくらいしか出せないはず。実際には百人いる会社には経理の人がいたり総務の人が居たり、資本が潤沢にあったら良いパソコンを使えるとか、いろ
ブラウザでVJデビューしよう #kyotoasterisk - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる id:hitode909です．Kyoto.なんか #5 に飛び入りでLTするための資料です． ブラウザでVJデビューしよう #kyotoasterisk Kyoto.なんか #5 hitode909 hitode909 はてなで働いている ブラウザが好き アジェンダ 先日ブラウザでVJデビューした 始め方を伝授 皆様がVJデビューするのがゴール VJとは Video JockeyまたはVisual Jockey Disc Jockeyが曲を流すので VJが映像を出す 客が盛り上がれば成功 VJデビュー 妻がDJデビューすることになったのでその流れでVJデビューすることになった smtppp.club 手法 HTML, JSを書く VSCode Live Server拡張を使う その場で編集、Live Reloadで
ブラウザでVJした - hitode909の日記
木屋町のシエスタを借りて開催したちょっとしたDJイベントでVJした。普段からよく遊びで愉快なウェブページを作っていたので、その延長上。去年はVRで見えるページを作ったりしていたけど、その根底には愉快なウェブページを作りたいという願いがある。 いろんな機能を作ったので記録しておく。 音量に合わせてでかくなる文字 マイクの音量を拾って、音量に合わせて文字がでかくなるのを最初に作った。基本は、前に作ったのの再利用。 blog.sushi.money 妻ことDJモチモチモッチの名前を画面いっぱいに表示する。文字が伸びるだけでは地味なのでちょっと工夫していて、DJモッチ→DJモチモッチ→DJモチモチモチモチモチモチモッチみたいに文字が伸びるようにもした。inputを置いておいて、そこにメッセージを書くと、そちらを優先、空のときはDJ名、ということにして、VJ中に 挨拶したくなったら挨拶をかけるように
Nature Remoでテレビを確実につける，または消す - hitode909の日記
毎朝勝手に朝ドラが流れ始めるようにしたくてNatue Remo miniを買った．毎朝テレビの電源信号を飛ばせるようになったところまではよかったのだけど，テレビの電源信号は受信するたびオンかオフになるタイプのものなので，テレビをつけっぱなしにして寝ると，朝になったらテレビが消えてしまう． Nature Remoでテレビ操作できるようにしたけど電源オンとオフの信号が同じなのでテレビつけてって言い続けるとテレビの状態がトグルして難しい— 趣味はマリンスポーツです (@hitode909) 2018年10月11日 朝になったらテレビつけるのやりたかったのだけどこのままだとテレビ消し忘れて寝ると朝になったらテレビ消えてしまう— 趣味はマリンスポーツです (@hitode909) 2018年10月11日 HDMIのCEC(レコーダーの電源入れるのにあわせてテレビの電源も入れられる技術)に着目して，
8/2(金曜日)に木屋町のシエスタでVJやるので来てください - hitode909の日記
木屋町のシエスタを借りてたまにやってるイベントでVJやることになった。妻がDJとして出るので、それに合わせてVJします。 smtppp.club VJに使えそうなツールはブラウザしか持ってないので、いい感じの絵が出るページをちまちま作ったりしている。 https://t.co/eMUxPjipGW pic.twitter.com/GxuKSsgWfR— 趣味はマリンスポーツです (@hitode909) 2019年7月11日 https://t.co/3RettFGj7K pic.twitter.com/aBBxO13mHX— 趣味はマリンスポーツです (@hitode909) 2019年7月11日 https://pool-land.glitch.me
ブログ記事をPortal Elementでカードっぽく貼り付けられるようにする - hitode909の日記
最近Portal Elementの様子を見たりしていて、今日は#portals_studyに話しに行く。あと30人参加できるので来てください。 web-study.connpass.com 適当に触れる砂場としてこのブログを使っていて、ヘッダのインターン来てくれバナーも実はPortal対応している。対応ブラウザで見てください。 はてなブログの記事はカードとして貼れるようになっているけど、サービスとしての対応がなくても、JS/CSSを書ければカード的なものを作れるはずと思っていたのでやってみた。 この何の変哲もないブログ記事のカード部分がportalになっている。 頭痛(8) - hitode909の日記 貼られる側の対応 デザイン編集画面でJSやCSSを書いて用意しておく。 window.portalHostが真ならdocument.body.classListにportalクラスを足す
WebVRで作品を作って展示しよう - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．YAPC::Tokyo 2019において，「WebVRで作品を作って展示しよう」というお題で発表しています．この記事は，その発表資料です． WebVRで作品を作って展示しよう YAPC::Tokyo 2019 株式会社はてな hitode909 この発表 アジェンダ WebVRについて、フレームワークや開発方法について 普通のウェブ空間から連続的にVR空間に向かうためのアプローチ デバイスを安定して展示するためのノウハウ 物理的な展示におけるグロースハック ゴール WebVRを使ったVR作品を今すぐ作れるようになる WebVRを使ったVR作品をイベントで展示できるようになる 🖐 開発経験 Web VR WebVR 便利さ 役立つアプリケーション 役に立たないアプリケーショ
エンジニアアルバイト氏受け入れテクニック - hitode909の日記
いま社員エンジニアが何人かに加えてエンジニアアルバイト2人、くらいのチームで働いていて、その中でアルバイト氏のメンターもやっている。 前のチームでも何年かアルバイトの面倒を見たり、何回かインターンのメンターをやったりしていた。 手癖でいろんなことをやってしまっていて、属人性が高まってしまっていると感じたので、どんなことをやっているか書いておく。 1日に何回か口頭で会話する 実装ができててから方針がまずかった、となると時間がもったいない 方針書いたくらいでレビュー依頼に出してね、とお願いしてもやってもらうの難しいので、こちらから聞きに行くほうがうまくいきやすい レビュー依頼になったらすぐに見る 社員は明日も要るけど、アルバイト氏は週に数回しか来ないので、その日帰るまでにレビュー完了して打ち返しもしてもらえるように動けると良い レビュー依頼になってなくてもPull Request見に行く 方針
プライムワードローブ便利 - hitode909の日記
年間を通して服のバリエーションを最小にしたいという思いがあり、夏に買ったやつはペラペラでめっちゃ寒くて困っていたので、グラミチのウール素材のやつを買ってみようという気になった。 アウトドアブランドなので頑丈そう、綿素材のを持ってたのでサイズはわかってる、アマゾンで買えるのでブログのアフィリエイト収入を服に変換できる、今年倒産して来年手に入らないということはないであろう、といったことが決め手。乾燥機につっこむのはあきらめた。 プライムワードローブというサービスで、とりあえず取り寄せて、気に入らなかったら返品できるというサービスが始まっていた。去年くらいに、ゾゾタウンで返品しまくってたら警告が来た人の話があったけど、そこで警告に行くんじゃなくて、正式なサービスになったという世間の流れがあると思う。 ウール素材のを片っ端から注文する。探索範囲をどこまでにするかという話で、サイズがわからない人なら
自分を退職に追い込む動きをすると良い - hitode909の日記
去年，いまのチームに来たときは僕がフロントエンドのリファクタリングを進めたり面倒を見たりしていた．JS得意な友達がバイトに来てくれるようになり，今はその人がBabelを入れたりしてくれている．彼がバイトに来てくれなかったら，いまだになんとなく興味があるので見ますみたいな感じで一人で面倒見ていた気もする． よくある話で，属人性を高めないように自分の知識を展開しましょうという話があるけど，具体的にアクションプランを考えてもどれが一番良いのかわからない．抽象的に考えると，自分の仕事をなくして退職に追い込むような動きをすると良い．周りのレベルが上がったり移譲されたりしてその分野で価値を発揮できなくなってれば自分じゃなくてもできるようになっている 自分でなくても実装できるようになって，作戦の相談に乗ったりとかしていると，次はそこの属人性が上がってきて，自分のバリューを再びなくすには，誰でも計画を立て
飲み会IoTボタン作った - hitode909の日記
会社のオフィスは東京と京都に分かれていて，それぞれ，さらに7F，8F，9Fとか，B1，3F，4F，のように3フロアずつに分かれているので，合計6フロアあることになる．それに加えてリモートの人たちは家にいる． 定時後に，お疲れ様でしたとか言ってビールや日本酒をあけることがあるのだけど，他のフロアでワイワイやってても気付きにくく，駆け付きにくい，駆け付けてもらいにくい，という問題がある． そこで，AWSのIoTボタンを使って人を呼べるようにした． 張り紙 このビールを冷やしてる冷蔵庫付近の壁に張り紙を貼った． 使い方 この乱雑な紙に使い方と，IoTボタンを貼り付けている．IoTボタンはボタンの裏側が接着面になっていて，ドキュメントに貼り付けることができて便利． 開催 1回押すと，Slackの#drinkingnow(飲み会の様子を共有するチャンネル)に飲み会開催中のお知らせが流れる．これが流れ
開発中の機能を小分けにして本番環境にどんどん出すためには - hitode909の日記
ふだんの開発では，稼働中のシステムに影響を与えないように開発中の新機能や新システムを共存させながらちょっとずつデプロイして進めている．どんな事を考えてやっているか記しておきます． フィーチャートグルを使う すべてのコードが本番環境に入っているけど無効化されている状態で開発を進める ブランチをたくさん作るのに対する考え方で，フラグを有効にすると開発中の機能を使える スタッフなら有効にしたり，フィーチャーのオンオフを選べる画面を作ってたこともある フィーチャーブランチを利用した開発はチームを継続的インテグレーションから遠ざける – ゆびてく FeatureToggle 完成したらフィーチャートグルに関係なく全員に有効状態にして完成 フロントエンドの施策で，実際のデータやインフラ構成でどれくらいスピードが出るかわからないときに，ひとまずフラグをオンにすると動く形でデプロイしたりとか レイヤの下の
Amazon Sumerianを1時間くらい触った - hitode909の日記
AWSのおもしろサービスでVRアプリを作れるというのがあったので触ってみた．Unityみたいな環境(Unity使ったことないけど)で，ブラウザで動いて，そのまま公開もできるようだった． aws.amazon.com とくに目的はなく物を置いたり動かしたり．ドキュメントまったく見ずにやっていたので基礎的なことが分かっていない．テンプレートから新規作成したら愉快な女性が目の前に登場したので，予想では愉快なモーションがデフォルトでいくつか入っているのだろうけど呼び出せなかった． ひとまず女性を水平移動することにして，そうすると画面外に出ていってしまう．カメラを追従させたかったけどそれもよく分からなかった． ドキュメントを読めという話でしかないので落ち着いて読んだりチュートリアルやったりしようと思う．会社でもAWSを使うことがあるのだけど，困ったときにしか見ないので，根本的な知識が不足していて，ポ
ImageMagickでliquid rescaleする - hitode909の日記
ImageMagickのリサイズまわりの挙動を調べてたら異常なアニメーションGIFが掲載されいているのを発見して，その瞬間に調べ物はどうでもよくなった． 領域が狭くなると，文字が帽子の上に周りこんでいる． http://www.imagemagick.org/Usage/resize/#liquid-rescale Seam carving(liquird rescale)は画像のなかで自然に切り取れるところを探してリサイズする技術．物がないところを探して切り詰めるので物だけが残る． Seam carving - Wikipedia ImageMagickをliblqrつきでインストールすると使えるようになる． brew install imagemagick --with-liblqrオライリーの書影とか見るからに縮めやすくてめちゃくちゃ楽しいのでは?と思ったので練習． Docker 作
クリエイティブ - hitode909の日記
クリエイティブ（creative, creativity）とは、広告などの制作物のこと。英語では本来形容詞であるが、広告用語では名詞として使用される。 クリエイティブ (広告) - Wikipedia 広告のバナーとかのことクリエイティブって呼ぶの形容詞だし意味分からないし狂ってる、クリーチャーって呼ぶ方がましだと思う— 趣味はマリンスポーツです (@hitode909) 2013, 6月 10 クリエイティブな広告、略してクリエイティブっていうの、最初に言った人狂ってるし、周りの人もそれで納得してはいけないと思う— 趣味はマリンスポーツです (@hitode909) 2013, 6月 10 広告のバナーとかのことクリエイティブって呼ぶのパフェ作って最初に食べた人がこれはうまいパーフェクトだからパフェやって叫んでそれからパフェですみたいな雑さを感じる— 趣味はマリンスポーツです (@hit
チェックボックスを並べてお絵描きしたりアニメーションしたりする - hitode909の日記
チェックボックスは通常ユーザーの入力を得るためのものだけど，チェックボックスを並べてお絵描きしたりアニメーションしたりすると楽しそうと思ったのでやってみた． マイクジャックにヘッドフォンを差して叫んで録音したり，光線銃に受光センサーがついてたり，トイレが逆流したりするように，インプットとアウトプットが入れ替わるのは楽しい気がする． 簡単なやつ．xとyとステップ数を足して，4で割った余りが0ならチェックつける，みたいな感じ． 円が真ん中から広がっていくやつ．中華料理屋の光る看板とかこんな動きをしている気がする． 動きをブラウザで直接書けるようにしたやつ．[ [true, false], [false, true] ]みたいな構造を返す関数を書いて，それをevalして(ひどい)，trueのときチェックがつくようレンダリングしている．式がおかしいと背景が赤くなるシンタックスチェック機能つき(ev
Flow練習した - hitode909の日記
Flowはfacebookが作ってるJSに型を書けるやつ． 今日ちょっと練習してみたところ良かった．練習に手頃なところから型でも書いてみるかとやっていたところ，FormDataにFileをappendするところで，それはFileじゃなくて?Fileで，nullになる場合もあるのでおかしいよって教えてもらったりした．型をつけるだけで不具合が見つかって，こういう世界もあるのか，という感じだった．fileがなかったらreturnする処理を足しておいた． ちょっとずつ書いていけるのがよくて，このファイルは難しいことをしていて型が付くと恩恵を受けられそう，とか，このあたりはこれからがっつり開発するので先に型を付けておこう，といった進めかたができる． 最初はちょっと慣れない部分もあったけど，ちょっと練習したら普通に書けるようになった．シンタックスがちょっと増えるので，どこまでJSのシンタックスで，どこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
