月 の 上

AtomエディターでVJしました

f:id:amagitakayosi:20170925232054p:plain

先日予告した通り、この度VJデビューしました。
VJ行為には自作のAtomパッケージ glsl-livecoder を利用しています。

これまでのあらすじ

GLSLとは、OpenGLWebGLといった3Dグラフィックスで用いられるシェーディング言語である。 シェーダーはその名の通りライティングや影の計算に用いられるが、単体でもパワフルなグラフィックス表現が可能であり、シェーダーアートという分野が存在する。 僕は今年GLSLにハマり、AtomでGLSLのライブコーディングできるパッケージを作った。 そしてこの度晴れてVJデビューすることになったのだ。

pastak生誕祭 @東京

初VJです。

動画は無音で失礼。

2時間半という長丁場なので、ライブコーディング成分は控えめに、普通にVJ素材を入れ替えつつGLSLでちょちょいとエフェクトをかける、という方針。 友人の誕生祭というフレンドリーな場であったため、途中でバグを踏んだらラッキーくらいの気持ちで臨んだ。

DJのうち一人がWindows95のアイコンをプリントしたTシャツでDJしていたので、おもむろにChromeを開いて Windows 95 で画像検索し、テスクチャとしてロードして背景に表示する、といったパフォーマンスも披露。

キャプチャ動画を見返してみると、f.luxを切り忘れて画面全体が黄色くなってしまっていたり、Atomをフルスクリーン表示するのを忘れてメニューバーが見えてしまっている……。

あんまりがっつりコードを書いたりエフェクトをかける余裕はなかったけど、初めての割に目立ったトラブルなくやり遂げる事ができて良かった!

SMTP++ @京都

わずか1週間後に2度目のVJ。こんどは2時間。

前回の準備不足を反省し、今回は担当DJのアイコンや写真をあらかじめ用意しておいた。 また、僕の前のVJがDJネームを画面いっぱいに表示してるのが良いなと思ったので、急遽SketchでDJネームを入れた画像素材を用意したりした。

f:id:amagitakayosi:20170925224907p:plain

今回はちゃんとAtomをフルスクリーンにしてたんだけど、途中ちょっと集中力が切れた時、いつものクセで Cmd + Tab を押してしまってChromeが表示されるという失態をさらしてしまった 😇

今回の会場は外国人観光客が多く、かつ何故かプログラマーの人が多くて、2回ほど「それってOpenGLでやってんの?」とか「なんて言語?GLSL?知らねえw」みたいに話しかけられて良い体験だった。よい旅を!

課題

今回のVJで、いくつかglsl-livecoderに欲しいと感じた機能がある。

まずは、映像を別ウインドウや別ディスプレイに表示する機能。 現在のglsl-livecoderではコードの背景に映像が表示される。 ライブコーディングという用途ではこれでバッチリだけど、普通のVJソフトとして使うにはコードが邪魔になるので、別ウインドウに表示する機能が必要なのだ。 別ウインドウにWebGLのキャンバスを置いたり、Fullscreen APIに対応することで実現できるだろう。 一時的にコードを隠す機能があれば尚良いけど、これは何も書かれていない新規タブを開くことで実現できる気がする。

あとは、任意のHTMLを表示できるようになったら良いなあと思った。 定番VJソフトのVDMXだと、テロップを簡単に流せる機能がある。 glsl-livecoderでもテロップを流したいけど、テロップだけのために専用の機能を作るのは筋が悪い気がする。 設定ファイルで表示したい .html ファイルを指定し、ユーザーが任意のJS/CSSを利用出来るようにするのが良さそうだ。 テロップしたかったらCSSとかmarqueeで良いしね。

あとは個人的に気をつけたいこと。

  • フルスクリーンにする
  • f.luxをオフにする
  • macをおやすみモードにして通知を防ぐ

なかなか忘れがち……MacBookProのパームレストにサインペンで書いとこうかな。。

まとめ

VJめっちゃ楽しかった!

今回は初めてだった & 時間が長かったので、普通に動画素材を使ってVJしたけど、GLSLだけで自力で映像を作るVJもやってみたい。 もっと短い時間で、テーマを決めて、レイトレーシングを使ってアニメーションをガリガリ作ってみたいなあ。

これからもガンガンやっていきたい!
VJやライブコーディングのオファーお待ちしてます!!! 🔥🔥🔥⚡⚡⚡

ToKyoto.js(Kyoto.jsの出張版)を開催しました

こんにちは! Kyoto.js主催の id:amagitakayosi です。
先日開催した ToKyoto.js のレポートをお送りします。

kyotojs.connpass.com

ToKyoto.jsはKyoto.jsの特別編として、メンバーが東京にあつまって開催したイベントです。
アウェイでの開催ということで人が集まるか心配でしたが、蓋を開けてみれば70人を超える方々にご応募いただき、当日は12人が発表を行なうなど、予想外の大盛況となりました!!🎉🎉🎉

会場は白金高輪のKaizen Platformさんのオフィスをお借りしました。
会場設営や入り口での案内など、何から何までお世話になりました、ありがとうございました!🙇🙇🙇

当日の様子はTwitterハッシュタグ #kyotojsでご覧になれます。

contents

一般発表

ToKyoto.jsのタイムテーブルは、Kyoto.jsメンバーと関東の発表者で 3 on 3 トークバトルという体で組みました。
当日は id:hiroqn が事情により欠席しましたが、なかなかマニアックな発表があつまったのではないかと思います!

「Tasks to release Extension for Edge」pastak

scrapbox.io

トップバッターは京都から参戦の id:Pasta-K です。
ブラウザ拡張をEdgeに対応しリリースするまでの道のりを紹介してくれました。
Edge向けの拡張機能はまだ64個しか存在しないそうなので、貴重な知見ですね……!

「Vue.js Extend with Compiler」kazupon

speakerdeck.com

2人目は kazupon さんです。
Vue.jsのテンプレートコンパイルの各段階をフックし、様々な拡張を行なう方法を紹介していました。
コンパイラーのフックはvue-loader等で利用されているようですが、他にも色々マジカルな事ができそうですね!

「TypeScript Transformerについてのお話」Quramy

qiita.com

3人目の発表は id:Quramy さん。
TypeScriptのASTを操作してコードをゴニョゴニョできるCustom Transformerについての発表です。
estreeとの互換性が無くて難しいという話ですが、estree周りのツールでもっとTypeScript対応が進むと良いですね……!

「APIs for VJ-ing」amagitakayosi

speakerdeck.com

4人目の発表は僕 id:amagitakayosi です。
最近はAtomでVJできるパッケージを作っているのですが、このパッケージで使っている各種ブラウザAPIを紹介しました。
9/17には実際にこれを使ってVJしたので、またレポート記事を書こうと思います!

「今、我々は、 GUI の設計について 何を考えるべきか」mizchi

speakerdeck.com

発表ラストは id:mizchi さん。
古典的なWebアプリからMVC、Fluxと、フロントエンド開発がGUI開発に近づいていく中で、設計がどう変わってきたかをまとめていました。
最近はNext.jsのようなフレームワークも増えてきたので、SSRやIsomorphicアプリの作成がめっきり簡単になったりと、時代の流れを感じますね……。

LT資料

今回のLTはなんと7人の方が参加くださり、GraphQLからWebVRまで盛りだくさんでした。
LTの順番は忘れてしまったので、順不同で紹介します。

「Data feching and caching on Apollo Client 」joe_re

speakerdeck.com

id:joe-re さんの発表は、GraphQLクライアント実装であるApollo Clientの紹介でした。
Relayとは違い、Apollo Clientは様々なフレームワークや環境から利用できるようです。
fetch, updateといった基本的な操作やページネーションの方法などを、コード例を交えて紹介していました。

「WebVR with Windows Mixed Reality」ikkou

speakerdeck.com

id:ikkou さんは、WebVRの開発方法や、WebVRでどういうことができるのかを紹介していました。
この発表はなんとVRヘッドセットを装着した状態で行われました。
WebVR APIはまだEdgeとFirefoxでしか利用できないようですが、これからの発展が楽しみです!

「IntersectionObserverはいいぞ」Leko

speakerdeck.com

id:leko さんの発表では、DOM要素が画面内にあるかどうかを取得できるIntersectionObserverについて紹介されました。
IntersectionObserverは現在、IE/Safari以外の主要ブラウザですでに利用できるようですね。
スクロールすると固定されるヘッダなど、活用出来る場所を見ない日はないので、早くpolyfillなしで使えるようになりたいものです。

Ecmascript proposal-realms」brn

speakerdeck.com

brnさんの発表はRealm proposalについての紹介です。
RealmはNode.jsのvmモジュールのように、JSのコードを安全に実行するための仕組みです。
まだあまり知られていないプロポーザルですが、必要とされる業界は多いんでしょうね〜。

「console.animate」katashin

speakerdeck.com

katashinさんの発表では、ブラウザの開発者ツールのコンソールにアニメーションを表示する方法を紹介していました。
Firefoxの開発者ツールのパフォーマンスが良いとのことですが、Firefoxの開発者ツールは他にもDOMの重なりを3Dで見れたり、Web Audio APIのノードの図が見れたりと謎に豪華ですよね……😅

「What I did to improve performance score on Lighthouse」yayoc

speakerdeck.com

yayocさんの発表は、Google製のパフォーマンス測定ツールLighthouseを利用しつつ、アプリケーションのパフォーマンスを改善した話でした。
HTTP/2採用やCode Splitting, IntersectionObserverを利用した遅延ロードなど、色々な施策についてものすごい早足で紹介されていました。
細かい話もじっくり聞いてみたい気がします!

「Nekogata Drum Sequencer written in Scala.js」nkgt_chkonk

speakerdeck.com

LT最後は id:nkgt_chkonk さんでした。
Scala.jsにまつわる様々な困難に直面しながらもScalaを貫き通す姿勢は圧巻でした……。
Scala.jsを試してみてハマった時は、今回の資料をみてみると参考になるのではないでしょうか。

感想 & まとめ

平日の夜開催だったため、懇親会でしっかり会話できるか心配していましたが、Kaizenさんのご厚意により23:30頃までたっぷり議論できました。
(ありがとうございました! > id:axross id:lacolaco id:jmblog

2次会でもまだまだ盛り上がり、なぜかAM 2:20からLTが行われたりしました。
さすが眠らない街東京……。

今回は、普段のKyoto.jsとはまた違った、色々なコミュニティの話が聞けて最高でした!
ふだん勉強会などに来ないという人も何人かいらしたようで、とても嬉しかったです。

参加者の皆さま、発表者の皆さま、ありがとうございました!!
京都観光の際には、是非Kyoto.jsにいらしてください!

もしまた東京で開催することがあれば……よろしくお願いします🙏🙏

今月VJを2回やります

最近GLSLにハマっておりますが、この度ちゃんとした場所でVJすることになりました。

  • 9/17 pastak生誕祭 @東京
  • 9/22 SMTP++ @京都

僕はどちらもGLSLのライブコーディングによるVJパフォーマンスを行ないます。
2時間 x 2回。スパルタ……!!!

pastak生誕祭 @東京

twitter.com

id:Pasta-K の誕生日を祝う」という名目で、各地のWebエンジニアや界隈の人々が東京に集まってDJ/VJパフォーマンスを行ないます(og:image最悪だな……)。

  • 日時: 2017/09/17 15:00 - 21:00
  • 場所: 渋谷 WHITE SPACE LAB

近隣の皆さまは是非ふらっとお立ち寄りください!

SMTP++ @京都

smtppp.club

京都のぼんやり系パーティです。 京都在住のDJやVJやエンジニアっぽい人が集まって少し盛り上がる会をやります。

  • 日時: 2017/09/22 20:00 - 24:00
  • 場所: 木屋町 cafe la siesta

関西の皆さまは是非いらしてください!

日本アルプス初挑戦

木曽駒ケ岳に登った。 2612mのとこまでロープウェイで行ったから、ほとんど登山してないんだけどね。

木曽駒ヶ岳には、バスとロープウェイで「千畳敷カール」という所まで登ることができる。 これがすごい混雑してて、朝の5:30からバスに並んで、ロープウェイを降りたのが8:20だった。

待ってる間めちゃくちゃ寒かった。 いちおう事前に登山グッズについて色々しらべて、シェルパーカーの中にライトダウンを着るようにしてたんだけど、全然足りない…… 3000m級の山に登るときは、かなり暖かい格好にしないといけなそう。

登る前から死にそうになりつつ、ロープウェイの駅から一足踏み出すと、見たことのない絶景が飛び込んでくる。

景色が本当に別世界。

素晴らしい景色なんて、写真よりも作られた物で触れる事が多いから、高校の修学旅行で種子島に行った時も「FFの背景みたいな紫の夜空だ」って感想を持ったんだけど、今回も「めっちゃHDR感あるな〜〜〜!!!」という感想が出た。 山の上の景色ってコントラスト強いんですね。

登山を始めるとすぐに寒さはなくなって、風も太陽も気持ちいい! 日差しが強いので、黒い服を着ていると一瞬で汗だくになる。

「山頂でカップヌードル」の実績を解除。

メモ
  • 上りのバスでめちゃくちゃ酔って終了するかと思った。次から酔い止めを準備しよう……
  • shadertoyにあるレイマーチング作品って本当にリアルなんだなあ〜
  • 野生の猿に会えて嬉しかった。子猿が親の腰にしがみついてて可愛い
  • 鎖場に挑戦した、めっちゃ楽しかったけど死ぬかと思った
  • 高山植物がたくさんいる。名前がわからないので予習しとくと楽しそう
  • 人の多い山に登るときは、待ち時間に凍死しないよう、インナーをさらにもう一枚持っていく

次はどの山のぼろうかな〜〜

ポートフォリオ作った

昔作ったWebサイト、今見るとめっちゃダサい…… そんな経験はありませんか?

というわけでポートフォリオを作り直しました。 最近の活動ぜんぜん書いてなかったしね。

gmork.in

もくじ

ポートフォリオ

自分の活動一覧サイト、定期的に飽きて作り直したくなる。
でも、更新コストが高いと放置するようになる。

ポートフォリオ、これまでに何度か作った気がしていて、前回は無駄にReactでサーバーサイドレンダリングしてたりしてたけど、ひたすら管理が面倒だった。

今回は静的ページにしてGitHub Pagesに置き、動かすのは背景だけで我慢する、という方針にした。

Markdownで書けるようにした

更新コスト最低ということで、ページの内容はMarkdown一枚で管理できるようにした。
Markdown系のライブラリ無限にあるけど、今回は GitHub Flavored Markdown で書きたかったので、 marked でHTMLに変換してる。

GLSLでビカビカした

今年はGLSLという武器を手に入れたので、早速このサイトでも使うことにした。 と言っても背景をビカビカさせるだけ。

グリッチ感のある画像を読み込んで、時間、マウス、スクロールに連動して動かしている。 素材となった画像は、以前AVIファイル以外の動画でdatamoshできないか試して遊んでた時に得られたもの。

www.youtube.com

当時の記事は見つけられなかったけど、これもFLVの構造とか調べつつPerlスクリプト書いてて、結構楽しかったんだよな。

これまでに作ったモノ

ポートフォリオに追加するために、これまでに作ったものを見返してた。
昔作ったやつ、今見ると実装は最悪だけど、モノはそれなりに面白い気がする。

RVD

https://gmork.in/RVD

ビデオサンプラー
再生パターンは16進数の文字列で指定する。
0x8888 とかって指定すると、1000 1000 1000 1000 と解釈され、4つ打ちで再生される。

Cyro

www.youtube.com https://gmork.in/cyro

キーボード入力で音が出るやつ。

GuitarBreaks

www.youtube.com https://gmork.in/guitarbreaks

ギターフリークスのコントローラーでブレイクコアを演奏できるやつ。

Random Font Generator

https://gmork.in/images/t_font.png

Google FontsにあるSVGフォントをランダムにグリッチして配信するサービス。
現在は使用不可。

Glitchyou

https://gmork.in/images/t_glitch.png

https://gmork.in/glitchyou

人の写った画像を選択すると、自動で顔を検出してランダムにグリッチしてくれるやつ。

ブランディングの結果

ふりかえると、画面が光ったりグリッチしたりするやつばっかり作ってることがわかる。
こうしたブランディングの結果、人々がグリッチ情報とか教えてくれるようになってきた。

twitter.com

twitter.com

みなさんも面白映像みつけたら教えてください。

はてなブログのテーマを自動リロードしながら開発できるツールを作った

f:id:amagitakayosi:20170822133701g:plain

Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。

github.com

目次

インストール

動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。

https://nodejs.org/ja/

ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。

npm install -g @fand/hatena-blog-theme-boilerplate

使い方

hbt の使い方

0. 開発用ブログを作成する

テーマの開発には、開発用のブログを開設しておくと便利です。
既存のブログをエクスポート/インポートするなどして、サンプル記事を作成しておくと良いでしょう。

1. テーマの雛形を作成する

hbt コマンドでは、新しいテーマの雛形 + 開発環境を作成できます。
以下のコマンドを順に実行すると、 my-theme という名前のテーマが作成されます。

hbt my-theme   # my-themeを作成

以下のコマンドを順番に実行して、ライブラリをインストールしておいてください。

cd my-theme
npm install  # ライブラリをインストール

2. 開発用ブログにCSSが読み込まれるようにする

開発用ブログのデザイン設定画面を開きます。
カスタマイズ > デザインCSS の内容を削除し、 カスタマイズ > フッタ に以下の内容を入力してください。

<link rel="stylesheet" href="http://localhost:3000/index.css"/>
<script async src='http://localhost:3000/browser-sync/browser-sync-client.js'></script>

f:id:amagitakayosi:20170822133952p:plain

変更を保存する を押すのを忘れずに!

3. テーマを開発する

テーマのディレクトリで以下のコマンドを実行すると、Sass/Lessのコンパイル及びライブリロード用のサーバーが起動します。

npm start

サーバーを止めるには Ctrl + C を押してください。

テーマのソースコードlib/ にあります。
hbtはデフォルトではSassを利用するので、 lib/index.scss が作成されます。
Lessを使いたい場合は、 lib/index.scss を削除して lib/index.less を作成し、 npm start を再度実行してください。

ブラウザで開発用ブログを開き、 lib/ 内部のファイルを編集すると、開発用ブログのデザインがリアルタイムで反映されるはずです。

(記事冒頭のGIFアニメ) f:id:amagitakayosi:20170822133701g:plain

4. 完成したテーマを出力

テーマのCSSindex.css に出力されます。
テーマを使いたいブログのデザイン設定画面で、 カスタマイズ > デザインCSSindex.css の内容を貼り付けてください。


macでしか動作確認してないけど多分Windowsでも動くはず……?
なんか困ったことがあればお気軽にコメントください。

Kyoto.js 13開催レポート & 次回予告

こんにちは! Kyoto.js主催の id:amagitakayosi です。
先日開催した Kyoto.js 13 のレポートをお届けします。

kyotojs.connpass.com

今回は京都だけでなく、なんと東京や長野から来たという方もいらっしゃいました(ありがとうございます!!)。
発表内容もユニークなものが揃っています!

当日の様子はTwitterハッシュタグ #kyotojs でご覧になれます。

発表資料

「Live Coding on Atom」amagitakayosi

speakerdeck.com

1人目の発表は僕 id:amagitakayosi です。
最近ハマっているGLSLのライブコーディングや、自作したAtomパッケージの紹介をしました。

「煩悩の数だけRefluxを回そう(仮)」kamiyam

www.slideshare.net

2人目の発表は id:kamiyam さん。
Fluxフレームワークの一種であるRefluxについて、他のフレームワークの違いや、実際に開発した感想を紹介していました。

「type of typing typescript type」hiroqn

scrapbox.io

3人目は id:hiroqn さんです。
TypeScriptでの型の付け方について、良くある書き方や、ハマりどころを紹介してくれました。

「煩悩レスなコンポーネントテストを目指して」bokuweb

speakerdeck.com

4人目の発表は id:bokuweb さんです。
コンポーネントの見た目をテストする Visual Testing のメリットや、 reg-suit の開発に至った経緯などについて語ってくれました。

「Reason」kuy

speakerdeck.com

5人目は id:kuy さんです。
Facebook製のOCaml用ツールチェイン Reason の紹介と、実際に使ってみた感想を話してくれました。

Gyazoのフロントエンドから煩悩を取り払えているのか」pastak

scrapbox.io

最後の発表は id:Pasta-K さん。
画像共有サービス Gyazo のフロントエンドについて、これまでの変遷を語ってくれました。

LT資料

JavaScript information in English」cawa

www.slideshare.net

LT1人目は id:cawa さんです。
英語の情報を効率よく収集するためのTipsやリリースを紹介してくれました。

Atom パッケージ開発のすゝめ」susisu

speakerdeck.com

LT2人目は id:susisu さん。
Markdownのテーブルエディタやカーソル移動といった、普段の操作を便利にするAtomパッケージを開発した話でした。

「はじめようGLSL」amagitakayosi

はじめようGLSL · GitHub

最後のLTは、ふたたび僕 amagitakayosi が行ないました。
ハンズオン形式で、GLSLで何ができのるか実際に体験してもらいました。

まとめ & 次回予告

発表者ならびに参加者のみなさま、本当にありがとうございました!!

毎回なぜか東京からの参加者がいるKyoto.jsですが、次回はなんと東京での開催を企画しています!!!
詳細はまだ未定ですが、開催日時は9月の中頃になる予定。

いずれconnpassやブログで案内するので、今後の更新にご注目ください!!