色、ムズ〜〜〜〜 - マルシテイア
本記事は、先日開催された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
娘を1024回揺らすと寝る - マルシテイア
娘を1024回揺らした— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayosi) 2020年3月7日 娘、1024回揺らすと大体スヤァ……と眠ってくれる。 僕は娘を寝かしつける時に何回揺らしたかを数えている。歩数計や加速度センサーを使うなんてハイテクな事はしておらず、すべて手で数えている。 とはいっても、1回1回指折り数えている訳では無い。娘は子守唄を歌うと安心して寝てくれる確率が上がるため、基本アドリブでオリジナル子守唄を歌いながら揺らすことになるのだが、この子守唄を何回ループしたかを数えて計算している。 1024回だとこんな感じ。 一番よく使うオリジナル子守唄はこんな感じ。 飽きるので適当にアドリブで歌ったりするんだけど、なんだかんだいつもと同じ歌を歌うと安心してくれる気がする。 回数を数えるメリット・デメリット 子を揺らした回数を数える事で、以下のようなメリットがある。 イライラしな
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
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で補足できた分だけまとめました。
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
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資料 「
スクリーンショット/GIFアニメ作成技術が集まるスレ - マルシテイア
お題「スクリーンショット/GIFアニメ作成技術が集まるスレ」 最近、仕事でも趣味でもスクリーンキャプチャしまくっている。 結構いろいろツール使ったりしてるので、メモっとくと需要あるかなって。 マイお題も作ったので、皆さまのGIFアニメ作成技術やこだわりを投稿してくれると助かります！😸 目次 キャプチャツール GIF Brewery 3 Quicktime Player Licecap 編集/軽量化 Gifsicle ezgif.com ffmpeg その他小技 キャプチャデバイス買おうか迷ってる キャプチャツール GIF Brewery 3 gifbrewery.com macOS向けの高機能なGIF作成/編集ツール。 スクリーンを撮影するだけでなく、Webカメラや動画ファイルからGIFアニメを作成できる。 フレームレートやスピードを簡単に設定できる上、軽量化もできる。 仕事で開発中の画
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するこ
TidalCyclesでライブコーディングに挑戦しよう⚡ - マルシテイア
とにかくこの動画を見てくれ！ 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でアニメーションを作ってる - マルシテイア
最近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
expo.ioを使ってリアルタイムにReact Nativeアプリを開発する - マルシテイア
1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。 何がどう便利かっていうと、 ケーブルなしで、実機の動作確認ができる もちろんコード変更も即座に反映される 開発版アプリの配布がワンタッチでできる 便利なReactコンポーネントもついてくる youtu.be expo.io とは React Nativeでのアプリ開発を支援するサービスです。 公式サイトはこちら。めっちゃ素朴…… expo.io expoは create-react-native-app XDE expo client といったツールを公開しています。 create-react-native-app: アプリの雛形を作るCLIツール XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる expo cl
ハンズオンを円滑に進めるテク - マルシテイア
新人教育の時期ですね。 みなさん研修資料の準備は大丈夫ですか？ 僕はこの前Reactのハンズオンをやったんだけど、そこで心がけた事や学んだ事を共有します。 ハンズオンの内容については既に記事を書いたけど、細かい所を書ききれなかった。 amagitakayosi.hatenablog.com 新人研修やインターンでも使えるテクでなので、ご参考に。 やったこと 最初に完成形を提示する ハンズオンで作るアプリについて、動画で説明した。 最終的な目標がわかると、今やっている作業の意味がわかりやすくなる。 いくつかのステップに分けて説明する 今回のハンズオンでは、8つのステップにわけて実装を進めた。 ステップ毎にテーマを与える事ができるし、ハンズオン自体の進捗もわかりやすくなる。 ステップ毎に足並みを揃える ハンズオンでは、一度置いていかれると追いつくのが難しい。 参加者の進捗は頻繁に確認すること。
Atomのはてな記法モードを作ったよ！！ - マルシテイア
atom.io はてなブログやはてなグループ、増田に投稿する時に便利です。 どうぞご利用ください。 もくじ 機能 はてな記法をシンタックスハイライトしてくれる Markdown文字列をはてな記法に変換できる スニペット使える インストール方法 Atomで新しい言語のモードを作る方法 基礎知識 言語モードはAtomのpackageとして開発する 言語のパースは正規表現で行なう 実際の手順 apm init -l で雛形を作る apm link して手元のAtomで確認 grammars/ にGrammarファイルを書く snippets/ にスニペットを追加 settings/ を編集 GitHubにpush apm publish 参考リンク 機能 はてな記法をシンタックスハイライトしてくれる こんな感じ Markdown文字列をはてな記法に変換できる md2hatenaを利用した変換機能
React のソースコードを読んでみよう！ - マルシテイア
こんにちは 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 の宣
エンジニア立ち居振舞い「自分の担当範囲を意識する」 - マルシテイア
お題「エンジニア立ち居振舞い」 僕は今のチームでフロントエンド担当ということになっている。 一応肩書は「アプリケーションエンジニア」だしサーバー側のコードもガンガン書くけど、他のエンジニアとの立ち位置を考えると自然と担当範囲が決まってくる感じだ。 担当範囲の決め方 うちの会社ではWebサービス開発を行うエンジニアを「アプリケーションエンジニア」として一律に扱っているが、その実メンバー毎になんとなく担当範囲が存在する。 担当範囲は、個人的な嗜好、経緯、あとはチーム内での分担で決まる。 僕の場合は、フロントが好きということもあったし、チームに入ってすぐフロントのタスクをゴリゴリ進めた結果、すんなり現在のポジションに落ち着いた。 チーム内で一番JS書ける必要はなくて、チーム内での比較優位で決まることもある。 今のチームでもう2年以上も働いていて、その割に知らない仕様とか沢山でてくるけど、それらを
Yarn速かった - マルシテイア
Yarn 速かった Yarn とは https://code.facebook.com/posts/1840075619545360 Facebook, Google, Tilde, Exponentの人たちが作ったnpmクライアント。 npm install の代わりに使える。 http://qiita.com/mizchi/items/1002fde0de10e7c54fb2 詳しくはこの辺 実行時間測ってみた 試しに業務レポジトリで npm install と yarn を比べてみた dependencies + devDependencies : 70 個 npm-shrinkwrap.json : 22298 行 元の node_modules : 22 KB npm install 303 sec $ rm -rf node_modules $ npm cache clean
Slackのファイルアップロード機能をTODOリストとして使う - マルシテイア
Slackの右側のペイン、使ってますか？ メンション一覧くらいしかマトモに使える機能ないんじゃないでしょうか。 アップロードされたファイル一覧したりできるんだけど、その中に Posts というのがある。 なんだこれ、って開いてみると、謎のドキュメント入力欄が出てきたりするのだけど、いまいち使い勝手がよくない。 そこで、 API から Posts を投稿/削除することで TODO リストとして使う、という CLI アプリを作ってみた。 github.com インストール $ npm install -g @fand/todo-slack その後 ~/.todorc に以下を入力して準備完了 // .todorc { "token" : "__YOUR_SLACK_API_TOKEN__", "user" : "__YOUR_SLACK_USER_ID__", "channels" : "#_
10歳になりました - マルシテイア
27歳になりました。 >>>ここをクリック<<< 僕は17歳まで意識がなかったので自分の年齢を-17で数えているのだけど、それにしてももう10年もたったのかという感じがする。 去年一年間、とにかく、フロントエンジニアとして仕事を進められるようになる、というのが目標だった。 時間労働制だったけど気にせず、常に仕事もするしコードで遊んでる、みたいな感じだった。 （それでこのレベルかよ、と思ったりするけど） >>>ここをクリック<<< 初年度が終わって、じゃあ今年なにをするかって考えると、同じ生活を続けることじゃない気がする。 ふと頭を上げると、もっと見るべきものや読むべき本があるなあ、ということに気付く。 何をしたらいいのかはわからないが、最近はいろんな方向にソナーを打ってみてる。 自転車買ったり、知らない人と話すためにバーに行ったり、昔の友人と連絡をとったり、走ったり。 京都の街を知るために
macOSがダサいかは知らないが僕は「を」を綺麗にかけない - マルシテイア
macOSダサいって言うけどiXXXも中々ダサいし、Javaに肖るJavaScriptもダサいし、ところで平仮名の「を」って綺麗に書けなくないですか、みたいな感じがする— 沖縄県 (@amagitakayosi) 2016年6月13日 これ意味分かんないと思うけど僕の中では筋が通っていて、つまり、 macOS がダサいかダサくないかっていうの、人々はどうやって判断するというのか？？？？？？？？？？？？？ 文字列の美しさについて、簡潔さや読みやすさなど、我々の中には共通認識としてある程度の尺度がある。 ねOS よりは iOS のほうがシュッとしてるし、 macintosh operating system ver 10 よりは OS X のほうがシュッとしてる。 とはいえ、 macOS がどれだけダサいのか、というのは、 OS X のカッコよさ or ダサさと比較できるものなのか？ OS X
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
