月 の 上

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やブログで案内するので、今後の更新にご注目ください!!

スクリーンショット/GIFアニメ作成技術が集まるスレ

お題「スクリーンショット/GIFアニメ作成技術が集まるスレ」

最近、仕事でも趣味でもスクリーンキャプチャしまくっている。
結構いろいろツール使ったりしてるので、メモっとくと需要あるかなって。

マイお題も作ったので、皆さまのGIFアニメ作成技術やこだわりを投稿してくれると助かります!😸

目次

キャプチャツール

GIF Brewery 3

gifbrewery.com

macOS向けの高機能なGIF作成/編集ツール。
スクリーンを撮影するだけでなく、Webカメラや動画ファイルからGIFアニメを作成できる。

フレームレートやスピードを簡単に設定できる上、軽量化もできる。
仕事で開発中の画面のアニメを撮影する時はだいたいコレで完結する。

もっとクオリティとサイズにこだわりたいときは、GIF Breweryで撮影したあと、後述のgifsicleやezgifで軽量化したりする。

Quicktime Player

ちょっと長めの動画とか、音声入りでキャプチャしたい時はこれ。
音声出力を取得するにはSoundflowerとかと組み合わせる必要がある。

Licecap

Cockos Incorporated | LICEcap

昔使ってた。
Windows版とMac版がある。

事前に録画する秒数を指定したり、フレームレートを指定してから録画を開始する。

デュアルディスプレイの時に出力がおかしくなることがあった気がする。
もう直ったかな?

GIF Breweryに移行してからは使ってない。

編集/軽量化

Gifsicle

Gifsicle: Command-Line Animated GIFs

CLIツール。
gifsicle -O3 foo.gif > foo2.gif とかやるとサクッと軽量化できる。
オプション覚えるのがめんどくさいのであんまり使ってない。

ezgif.com

ezgif.com

Web上でGIFの操作ができるサービス。
Optimizeメニューでは、普通に圧縮したり、カラーパレットをいじったり、ディザリングしたりできる。
フレーム毎にスキップ指定してファイルサイズを落としたりもできる。

Gifsicleのオプション覚えずに済むので楽。
処理も意外と速い。

ffmpeg

定番動画変換ツール。 Quicktime Playerで録画したやつをGIFアニメに変換する時に使ってる。

PCからTwitterに動画を投稿するとメッチャ失敗するんだけど、こちらの記事にあるオプションを付けてffmpegで変換すると投稿できるようになる。

kivantium.hateblo.jp

高画質なGIFアニメを作る方法については、いろんな記事があるのでそちらを参照。

動画ファイルからより良いアニメーションGIFを作る — Genji App Blog

ffmpeg、とにかくオプションむずすぎる。
僕はオプション勝手に指定してくれるスクリプトつくって ~/bin に入れてるけど、結局あんまり使ってない……

その他小技

  • Retinaディスプレイだと解像度2倍になってキャプチャもカクつくしファイルサイズもでかくなるので、サブディスプレイでキャプチャしたりディスプレイの解像度を落とすと良い
  • Twitterは7.5秒以内の動画だとループ再生してくれるので、GIF Breweryとかでフレームを調整してキレイな無限ループにしてあげると良い
  • 頑張って高画質GIF作ってもTwitterに投稿するとメチャメチャになったりするのでmp4の方が良かったりする
  • 仕事でUIのキャプチャする時は 5fps くらいで充分

キャプチャデバイス買おうか迷ってる

最近はGLSLを書いたりVJっぽい活動をしてることもあり、キャプチャ専用デバイスを買おうか迷ってる。
一番の候補はこれ。

av.watch.impress.co.jp

レビューの記事では「音が小さい」って書いてあるけど、オーディオインターフェースあるからどうにかなるのではって思ってる。

使ってる人とか、オススメのデバイスとかあったら教えてほしいです!