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
OSSのJSONエディタをElectronアプリに移植した - マルシテイア
josdejong氏作のJSONエディタを、Electronでデスクトップ用アプリに移植しました。 github.com 元のJSONエディタはこちら。めちゃ高機能で便利。 僕が書いたコードはたった200行くらいです。 github.com なぜ作った 仕事でイベント用のUnityアプリを作る事が多い 現場でパラメータを調整するために、パラメータをJSONやCSVファイルに出しておくことが多い SRDebuggerとかでアプリ内に設定画面を作る事も多いけど、その時間すらない事もある プログラマー的にはJSONを使いたい プログラマー以外の普通の人にとっては、JSONの編集は難しい CSVはエクセルで編集できて便利という世界観 普通の人が使えるJSONエディタがほしい オンラインJSONエディタは良い奴がたくさんある exeで欲しいんだが！！！ Electronでラップしたら良いのでは？ E
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
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資料 「
FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア
speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけるトレンドを体験する の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。 この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。 ハンズオンの方向性 Next.jsを採用 ハンズオンの流れ 工夫した点 お手本ブランチを用意する コード修正の指示をdiff形式で書く 自己紹介よりも前にセットアップをお願いする 反省した点 gitが手元にない人は git checkout できない お手本ブランチ作るのしんどい…… 皆様の反応 ハンズオン 資料 感想
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
Atomのはてな記法モードを作ったよ！！ - マルシテイア
atom.io はてなブログやはてなグループ、増田に投稿する時に便利です。 どうぞご利用ください。 もくじ 機能 はてな記法をシンタックスハイライトしてくれる Markdown文字列をはてな記法に変換できる スニペット使える インストール方法 Atomで新しい言語のモードを作る方法 基礎知識 言語モードはAtomのpackageとして開発する 言語のパースは正規表現で行なう 実際の手順 apm init -l で雛形を作る apm link して手元のAtomで確認 grammars/ にGrammarファイルを書く snippets/ にスニペットを追加 settings/ を編集 GitHubにpush apm publish 参考リンク 機能 はてな記法をシンタックスハイライトしてくれる こんな感じ Markdown文字列をはてな記法に変換できる md2hatenaを利用した変換機能
2016年お焚きあげ / 2017年の抱負 - マルシテイア
もう1月終わっちゃったけど…… 2月は仕事も生活も転機になる。 これからが本番ということで、今年の抱負を書いてみる。 2016年にやったこと Kyoto.js復活 フロントエンドランチなど、会社でフロントエンド活動をやるようになった GitHubに課金して、人生のいろんなタスクもGitHubで管理するようになった ポモドーロテクニックを使うようになった Kyoto.js復活 眠っていたKyoto.jsを復活させた。 京都でJS系の勉強会がなくて寂しく思っていたんだけど、会社の人が昔 Kyoto.js というのを知った。 2013年のKyoto.js #8以来とまっていたので、2年半ぶりの開催となった。 2016年は3回、2017年は既に1回開催している。 もうちょっとコミュニティのメンバーと相談しつつ、コンスタントに続けられたらいいなって思っている。 会社でフロントエンド会の活動を始めた
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 の宣
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
