色、ムズ〜〜〜〜 - マルシテイア
本記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。 kyotojs.connpass.com こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。 目次 話題1: mix-blend-modeにaddがない そもそもBlendingって何？ Webでは基本的にsource-over compositingしか使われない Canvasではsource-over以外のCompositingが使える PDF Reference 一方その頃WebGLは…… 話題2: Display P3 CSS Color 4でDisplay P3が使えるようになった Display P3 CSS Color 4 CSS Color 4 で導入された
インドのスタートアップ企業に日本からフルリモートで参加している - マルシテイア
入金通知に落書きする娘 9月から、InVideoというインドのスタートアップ企業で週3日/フルリモートで働いている。 たまたま声をかけてもらったレアケースなので再現性はないと思うけど、誰かの参考になるかもしれないし、現在までの経緯や感想を書いておく。 誰？ 経緯 働き方について スタートアップってこういう感じなのか〜 インド企業の面白さ 海外企業にリモートで参加する難しさ 英語 時差 手続き系 まとめ 追記 (2021-11-25 11:16) 書きそびれた小ネタ コメントへの返信 誰？ 天城孝義、京都在住のフリーランスプログラマーです。 Webサービスのプログラマー、Unityプログラマーを経て、2020年4月からフリーランスとして働いています。 最近では、主にReact/Next.jsを使ったSPAの開発や、WebGLアプリ開発などの業務を行っています。 Twitter: @amagi
VIRTUAL ART BOOK FAIR 2020のWebGL開発を担当した - マルシテイア
2020-11-16〜2020-11-23 に開催された VIRTUAL ART BOOK FAIR の Web サイト開発を担当した。 また、イベントの一環として、開発の裏側についてYoutube Liveで話したりした。 https://2020.virtualartbookfair.com/ www.youtube.com この記事では、プロジェクト参加の経緯や開発のすすめ方、僕が技術的に頑張ったことについて振り返る。 VIRTUAL ART BOOK FAIR とは 世界観ができるまで 開発の体制 技術的な構成 技術的に頑張ったこと 文字表示 パフォーマンス調整 ロード時間短縮 並列ロード 画像を GLB にまとめる やってないこと GPU インスタンシング Tree Shaking 感想 VIRTUAL ART BOOK FAIR とは 毎年開催されている TOKYO ART B
娘を1024回揺らすと寝る - マルシテイア
娘を1024回揺らした— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayosi) 2020年3月7日 娘、1024回揺らすと大体スヤァ……と眠ってくれる。 僕は娘を寝かしつける時に何回揺らしたかを数えている。歩数計や加速度センサーを使うなんてハイテクな事はしておらず、すべて手で数えている。 とはいっても、1回1回指折り数えている訳では無い。娘は子守唄を歌うと安心して寝てくれる確率が上がるため、基本アドリブでオリジナル子守唄を歌いながら揺らすことになるのだが、この子守唄を何回ループしたかを数えて計算している。 1024回だとこんな感じ。 一番よく使うオリジナル子守唄はこんな感じ。 飽きるので適当にアドリブで歌ったりするんだけど、なんだかんだいつもと同じ歌を歌うと安心してくれる気がする。 回数を数えるメリット・デメリット 子を揺らした回数を数える事で、以下のようなメリットがある。 イライラしな
OSSのJSONエディタをElectronアプリに移植した - マルシテイア
josdejong氏作のJSONエディタを、Electronでデスクトップ用アプリに移植しました。 github.com 元のJSONエディタはこちら。めちゃ高機能で便利。 僕が書いたコードはたった200行くらいです。 github.com なぜ作った 仕事でイベント用のUnityアプリを作る事が多い 現場でパラメータを調整するために、パラメータをJSONやCSVファイルに出しておくことが多い SRDebuggerとかでアプリ内に設定画面を作る事も多いけど、その時間すらない事もある プログラマー的にはJSONを使いたい プログラマー以外の普通の人にとっては、JSONの編集は難しい CSVはエクセルで編集できて便利という世界観 普通の人が使えるJSONエディタがほしい オンラインJSONエディタは良い奴がたくさんある exeで欲しいんだが！！！ Electronでラップしたら良いのでは？ E
Kyoto.js 17を開催しました - マルシテイア
2020-01-11 (土)、Kyoto.js 17を開催しました。 少し時間が空いてしまったけど、僕の個人的な振り返りを書いていきます。 Kyoto.jsとは 資料まとめ 僕の発表について 個人的振り返り 良かった所 問題点 まとめ Kyoto.jsとは Kyoto.jsは京都のWebプログラマーやデザイナーのためのコミュニティです。 年1～3回のペースでゆるりと開催しています。 .js と言っているとおりJavaScriptがメインですが、あんまりJavaScriptに関係ない話でも面白ければOKという体でやっています。 開催は京都ですが、毎回なぜか大阪や神戸、名古屋、たまに東京の人も来てくれています（本当にありがとうございます！） 今回は株式会社はてなの京都オフィスで開催しました。 資料まとめ kyotojs.connpass.com Twitterで補足できた分だけまとめました。
シェーダーからGIFアニメを生成するツール作った - マルシテイア
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でVJできるパッケージを作った #GLSL #livecoding - マルシテイア
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するこ
Kyoto.js 13開催レポート & 次回予告 - マルシテイア
こんにちは！ Kyoto.js主催の id:amagitakayosi です。 先日開催した Kyoto.js 13 のレポートをお届けします。 kyotojs.connpass.com 今回は京都だけでなく、なんと東京や長野から来たという方もいらっしゃいました（ありがとうございます！！）。 発表内容もユニークなものが揃っています！ 当日の様子はTwitterのハッシュタグ #kyotojs でご覧になれます。 発表資料 「Live Coding on Atom」amagitakayosi 「煩悩の数だけRefluxを回そう(仮)」kamiyam 「type of typing typescript type」hiroqn 「煩悩レスなコンポーネントテストを目指して」bokuweb 「Reason」kuy 「Gyazoのフロントエンドから煩悩を取り払えているのか」pastak LT資料 「
28歳になった - マルシテイア
無事に28歳を迎えることができた。ロックミュージシャンに生まれなくてよかった…… 最近ブログあんまり書けてないので、まとめて近況報告しよかな。 !!!!! ほしいものリスト http://amzn.asia/haHW5vX !!!!! 引っ越した 引っ越し完了した 出町周辺の皆さまよろしくお願いします pic.twitter.com/CmyzAyW8r4— 女媧 (@amagitakayosi) 2017年2月10日 2月のことだけど、下京区のマンションから、鴨川の近くの一戸建てに引っ越した。 木造で築50年なので、床が凹んでいたり冬は異常に寒かったりするけど、広いし部屋の感じが好みだったのでほぼ即決した。 生まれて初めての一軒家で、家具を買ったりテーブルを作ったりして楽しんでいる。 新居、1帖ほどの広さだけど庭がある。 庭には前の住人が置いていった蹲居セットが設置されており、電源を入れる
Node学園祭で「フロントエンドに秩序を取り戻す方法」を発表した #nodefest - マルシテイア
楽しかったです。 「フロントエンドに秩序を取り戻す方法」 発表に至るまで きっかけ スライド作成 社内勉強会 トークの練習 当日 Q&A Util系のモジュールをnpmで公開しないの？ リファクタリングの工数、どうやって確保した？ テストについての補足 イベントの感想 NodeDiscuss おひるごはん 懇親会 終わってみて 「フロントエンドに秩序を取り戻す方法」 speakerdeck.com togetter.com はてなブログチームで行った改善についてのトークです。 アンケートの結果では5位にランクインしました！！！ 発表を聞いてくださった皆様、ありがとうございました。 発表に至るまで きっかけ 応募のきっかけはYAPC2015でした。 yapcasia.org YAPC1日目のLTを見てるうちに自分も発表したくなって、即LT応募しました。 絶対通るでしょと思ってスライドまで作成
React入れたらCasperJSのE2Eテスト壊れたのでPhantomJS2入れたらPhantomJSのユニットテスト壊れたのでwebdriverioでE2Eテスト書き直した話 - マルシテイア
これまで VanillaJS / jQuery で頑張ってたプロジェクトに React 入れて、Reactは最高！などと言っていたのだけど、E2Eテストが落ちている事に気づいた。 落ちたテストで画面キャプチャしたりして調べた結果、Reactコンポーネントを描画するところで落ちていた。 どうやらPhantomJS1系で見られる現象のようだった。 e2e - CasperJS で Reactjs のサイトをテスト - Qiita E2EテストにはCasperJSを使っていた。 Casper の dependencies は "phantomjs": ">=1.8.2" となっている。 PhantomJS の謎な挙動にはユニットテストでも散々苦しめられていた。 既に polyfill 幾つか入れて対処していたのだけど、良い機会なので別の道を模索してみよう、という話になった。 頑張ってPhanto
ChromeのコンソールでYoutubeを観るやつ作った - マルシテイア
便利 fand/console-tube · GitHub 何これ 普通にインターネットしてると一日数回、Chromeのデバッグコンソールでyoutube動画見たくなる事がある。 デバッグ中、「あっYoutube観なきゃｍ，見る必要がある」ってなる。 おもむろにタイプ 観れた! 音も出る！ 使い方 README.md参照。 どうなってｒの console.tube(url) すると、現在ページに隠しvideo, canvasを追加 予め立てたexpressサーバにurl渡して、動画をストリームで返す。 canvasにvideo描画 定期的に console.log("%c", "background: url(" + canvas.toDataURL() + ")"); する 小話 console.imageっていう便利ライブラリあって、真似したかった。 最初、Youtubeから直接動画読
もう24歳なのに、はてなインターンに参加した - マルシテイア
概要 株式会社はてなの夏季インターンに参加しました。 諸々の情報を共有します。 目次 境遇 インターン流れ 応募〜参加まで 前半 後半 まとめ 有益情報 来年のインターン生へのアドバイス 長くなってしまった。 まとめと有益情報だけでも大変有益です。 境遇 誰お前 CS専攻のM1（1留） インターンに応募するまで 私は茨城のとある大学院のM1だ。プログラミングに興味があって情報系の学科*1に入学したはいいものの、特にプログラミングに没頭して勉強するわけでもなく、評価Cギリギリのコードを書き、せっかくすごい人*2がたくさんいる学科に入ったというのに、技術的な話もできずコミュ力もない私はぼっちになってしまい、同期が鯖管とかWeb開発のバイトでキャリアを積んでる中、コンビニの夜勤とかAV屋さんで働いて底辺の大学生活を続けていた。 B4で配属された研究室には優秀な先輩や同期がいて、以前よりも頻繁に「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
