Quantcast
Channel: マルシテイア
Viewing all 186 articles
Browse latest View live

サイボウズOfficeのスケジュールをGoogleカレンダーに同期する奴つくった

$
0
0

休暇の予定入れようとしてサイボウズOffice開いたらMTGの予定入ってた……Googleカレンダーに入ってないから気付かなかった…… そんな悲しみを乗り越えるために作りました。

github.com

サイボウズでも、Garoonってやつ?なんかナウいやつはGoogleカレンダーに同期するツールがあるみたいだけど、サイボウズOfficeだとちょっと見当たらなかった。 のでPrettierでガガっと書きました。

インストール

npm i -g @fand/cybozu-to-google

使い方

サイボウズのログイン情報やGoogleAPIキーなどを ~/.config/c2gに置きます:

{
  "cybozuUrl": "https://XXXXXXX.cybozu.com/",
  "username": "YOUR_USERNAME_OF_CYBOZU",
  "password": "YOUR_PASSWORD_OF_CYBOZU",
  "calendar": {
    "key": "GOOGLE_SERVICE_ACCOUND_PRIVATE_KEY",
    "serviceAcctId": "<GOOGLE_SERVICE_ACCOUNT_ID>.iam.gserviceaccount.com",
    "calendarId": {
      "primary": "<GOOGLE_CALENDAR_ID>@group.calendar.google.com"
    },
    "timezone": "UTF+09:00"
  }
}

この辺の設定ムズイので、Garoon用のツールの導入記事とか見ていい感じになってください

developer.cybozu.io

あとはターミナルで c2gするだけでGoogleカレンダーに同期されます。

例えば、サイボウズOfficeでこういう予定を作成して……

f:id:amagitakayosi:20180815214416p:plain

ターミナルで c2gを実行すると……???

f:id:amagitakayosi:20180815214458p:plain

Googleカレンダーに同期されてる!!!!ヤッターーーー!!!!!!!!!!

f:id:amagitakayosi:20180815214550p:plain

定期的に実行したい方はcronとかlaunchdとかでどうぞ。 僕はbitbarで毎時実行して、かつログも見れるようにしました。

f:id:amagitakayosi:20180815214833p:plain

来年こそ山に登ろうな……


VJ出演: 8/27(月) ADIRECTORチャネル at 表参道、9/15(土) InfiniteRave at 渋谷

$
0
0

f:id:amagitakayosi:20180821110334p:plain

こんにちは天城です。 近々東京でVJやるので宣伝します!

8/27(月) ADIRECTORチャネル in 表参道DOLLHOUSE

www.facebook.com

来週の月曜日、表参道のアート施設DOLLHOUSEにてVJ出演します。

DJはRadical Hardcore Criqueの方々。 6面透過ディスプレイ(!)でDJを取り囲み、ゴリゴリのサウンドにバキバキの映像で挑みます。

www.youtube.com

DOLLHOUSEはavexによる4階建てのアート施設。 DJフロア以外にも、FEMMによるライブパフォーマンスや、観客参加型の様々なアトラクションを楽しめます。 服に投影して写真撮れる奴とかもあって楽しそう。

compass-media.tokyo

僕はUnityでVJシステムを構築してます。 今はシーンとエフェクトをガシガシ構築中!

  • 日時: 2018/08/27(月) 21:00-22:30
  • 会場: DOLLHOUSE

月曜の夜ですがバキバキでいきます!!! 近隣のみなさま、映像とテクノロジーに興味のある方々、ぜひ来てください!!

9/15(土) InfiniteRave

1nfiniterave.peatix.com

9月には、渋谷で開催されるInfiniteRaveに出演します! クリエイティブコーディングやデモ界で鳴らした面々がDJ/VJを行います。

第一線のクリエイターとしっぽり交流できるチャンス……!

  • 日時: 2018/09/15(土) 17:00-20:00
  • 会場: Shibuya Cast
    • 渋谷駅13番出口より徒歩1分

渋谷の皆様、クリエイティブコーダーの皆様、ぜひ来てください!!

個人用Windowsマシンでの開発環境構築メモ

$
0
0

f:id:amagitakayosi:20180822160527g:plain

6月に転職してWindowsマシンを触ることになったんだけど、環境構築で色々とハマったので、忘れないうちにメモっとく。 キーバインドとか結構特殊にしてるので参考にならないかも……

TL;DR

筆者のスペック

マシン: MSI GS65 Stealth

今の仕事ではGPUパワーが必要になるのでゲーミングPCを選んでいたんだけど、どれも見た目が微妙……。 界隈ではRazer Bladeがイケてるみたいな風潮があって、ちょっと気になって、あまりにも壊れやすいという情報もあったので今回は見送り。 そんなとき、 @ayumu_naga 氏がMSI GS65 Stealthを使っているのをみて、購入を決めた。

英字配列の製品はAmazon JPにはないので、総務の人に無理言ってAmazon.comから購入してもらった……🙇

見た目は控えめだしGPUGeForce GTX1060で十分だし概ね満足している。 ただ、PCを閉じてもスリープ失敗してカバンの中でメチャクチャ熱くなるという現象が発生して困っている。 今に壊れそうでヒヤヒヤする、BIOSの設定で直るんかな……

あ、あとトラックパッドが微妙。 一応どこ触ってもクリックできることになってるけど、端っこでクリックすると明らかにトラックパッドがたわんでて、今にも壊れそう。 Bluetoothマウスやトラックボールを一緒に持ち歩くと良いでしょう。 僕は昨日ロジクールのMX ERGOを買ったよ。

キーバインド

  • AutoHotKey: 左右のAltを英字/日本語のIME切り替えに割り当てる
  • keyhac: カーソル移動、AltをCmd代わりに使う

AutoHotKeyは「すり抜け」という問題がある。 例えば Ctrl + Nキーにマッピングしている時、 Ctrl + Nを押しっぱなしにしていると、たまに Nが入力されてしまう。 すり抜けについては以下のブログ記事が詳しい。

AutoHotkey:キー押しっぱなし病・ホットキーすり抜け病対策の研究

これではカーソル移動に使うにはちょっと厳しいので、keyhacと兼用することにした。 AutoHotKeyIME切り替えにのみ使うので、AHK本体ではなくこちらのパッケージを使っている。

GitHub - karakaram/alt-ime-ahk

keyhacはPythonで設定を書けるので便利。 MSI GS65 Stealthでは、AltがほぼmacでいうCmdの位置にあるので、よく使うショートカットではCtrlとして使えるようにした。 郷に入っては郷に従えという言葉もあるが、MBPを触ったあとにWin機を触るとマジで入力ミスりまくって仕事にならないので……。

しかし、AltをCtrlに割り当てると、Ctrlが押しっぱなしになってしまう現象が発生した。 仕方ないので、CtrlのKeyUpも一緒に入力することで対処している。

# Ctrl押しっぱなしになってしまうので、Ctrlをもう一度押して解除する関数
    withC = lambda x: (x, "D-Ctrl", "U-Ctrl")

    # Alt as Command
    keymap_global[ "A-C" ] = withC("C-C")  # Copy
    keymap_global[ "A-V" ] = withC("C-V")  # Paste
    keymap_global[ "A-F" ] = withC("C-F")  # Find
    keymap_global[ "A-T" ] = withC("C-T")  # New Tab

keyhacの設定ファイルはこちら: https://gist.github.com/fand/91f090a41639e65a16bf807631fe24af#file-config-py

シェル

f:id:amagitakayosi:20180822160527g:plain

ConEmu + PowerShell。 oh-my-poshっていう、oh-my-zshPowerShell版みたいな奴も使っている。

WSL + bashを使っていないのは、Windowsでの開発方法や文化を学びたいから。 僕はAtomパッケージを作ってるんだけど、ネイティブ拡張や外部アプリケーションとの連携でWin特有の問題が発生することがあり、そういうのを学ぶにはできるだけPowerShellとかcmd.exeを使ったほうが良い。 あと、WSL上のgitでUnityプロジェクトを管理するといかにもぶっ壊れそう、という理由もある。

当初、Cmderって奴がイケてると聞いて、↓の記事を参考にCmderをセットアップしたんだけど、Powerlineでカーソルがずれる問題がどうしても直せない。 (ググると「monospaceのチェックを外せ」と出てくるが、効果なし)

PowerShell, Cmder / ConEmu, Posh-Git, Oh-My-Posh, Powerline Customization · GitHub

CmderはConEmuのラッパーなのだけど、ConEmuを直接起動するとカーソルがずれる問題は発生しないことがわかったので、以降はConEmuを利用している。 スタートアップにConEmuを登録し、 Alt + Spaceで表示するようにした。 (MSI GS65の Alt + SpaceはMBPの Cmd + Spaceと同じ位置)

MacではGitプロジェクトをghq + pecoで管理し、Ctrl + ]でレポジトリの絞り込みができるようにしていた。 PowerShellではキーバインドで関数呼ぶのが難しそう?なので、 ghコマンドでレポジトリを絞り込みできるようにした。

function gh () {
  cd $(ghq list --full-path | peco)
}

PowerShellのプロファイルはこちら: https://gist.github.com/fand/91f090a41639e65a16bf807631fe24af#file-powershell_profile-ps1

エディタ

普段使いはAtomでいいんだけど、C#では使い物にならず、Unity開発ではVSCodeを使っている。

C#には、様々なエディタでIntelliSenseによる補完が使えるようになるomnisharpというプロジェクトがある。 Atomではomnisharp-atomというパッケージで補完が効くようになる……はずなんだけど、一年くらいメンテが停止しており、動かなくなってしまっている……

Visual Studioはなんか性に合わなかったので、結局VSCode + omnisharpでC#開発してる。 他の言語ではやはりAtomの方が快適なので、Atomも併用。

その他

ランチャ

Macでは Alt + SpaceでSpotlightを表示できるようにしている。 MSI GS65の場合、同じ位置にあるキーは Win + Spaceになるんだけど、Windowsでは Win + SpaceIME切り替えに登録されており、変更できない(!)。

Woxを試してみたりしたけど、他にしっくりくるキーバインドが無いのと設定が面倒なので、使うのをやめてしまった。 結局スタートメニューをランチャとして使っている。

なんか良い方法ないかな……keyhacで Win + Spaceを上書きしたらええんかな……

スタートメニュー

f:id:amagitakayosi:20180822161351p:plain

デフォルトで表示されてるパネル邪魔すぎるので全部消して、よく使うやつだけ登録し、サイズも最小になるようにした。 Classic Shellってやつも試してみたけど、表示がもっさりしたり、タスクバーが隠れなくなったりする問題があるのでやめてしまった。

フォント

フォント汚くて目がチカチカするのでMacTypeを使っている。 大昔にも使ってたけど、まさか2018年にもなってMacTypeを使うことになるとは…………

デスクトップ

VJパフォーマンス中の万一の事故に備え、壁紙を真黒にし、デスクトップのアイコンをすべて非表示にした。

仮想WebCam

ビデオ入力を用いたシステムのテストにはManyCamを利用する。 デスクトップのキャプチャや動画ファイル、Youtubeの映像を仮想WebCamとして使えるようになる。

キーボード

MSI GS65 Thinは設定でキーボードの光り方を変更できる。 テンションを上げたい時に便利。


他にいいTipsあったら教えてくれ~~~~~~~~

UnityでVJシステム作ってパフォーマンスした

$
0
0

f:id:amagitakayosi:20180831004034g:plain

こんにちはアマギです。もうすぐUnity歴3ヶ月です。
8/27、表参道のADIRECTORチャネルにてVJ出演しました。

ADIRECTORはavexによるテクノロジーとアートのイベントです。 4階建てのビルをまるごと使って、FEMMによるパフォーマンスや、観客参加型のプロジェクションマッピングなどを楽しめました。

https://adirector.jp/

会場には6画面の透過スクリーンを使ったライブ会場があり、Radical Hardcore CliqueがDJパフォーマンスを行っていました。 最終日のVJとして、僕、Scott Allenさん、rystyleeさんの3人で挑みました。

Radical Hardcore Clique、バキバキの音でかっこよかった…… 他のVJもめちゃくちゃ高品質で最高だった、勉強になります!!

こっちは妙な動きでVJする僕です:

雷雨の中たくさんの方々に来ていただき、大いに盛り上がりました。 ご来場いただいた皆さま、ありがとうございました!!めちゃくちゃ楽しかったです。

同業のみなさまとも交流できて嬉しかったです。 お誘い頂いたBRDGの方々、会場の方々、ありがとうございました……!


さて、今回のVJでは、Unityでシステムを作ってパフォーマンスを行ないました。
この記事では、このVJシステムについての紹介と反省を書きます。

Unityを選んだ理由

今回のイベントでは、DJを前後3枚ずつの透過スクリーンで囲んで投影した。 そのため、フルHDを2画面出力できるツールを選ぶ必要があった。

僕は普段のVJでは、自作のVJソフトVEDAか、TouchDesignerを使っていた。

VEDAはGLSLのライブコーディングができるツールだ。 VEDAは2画面出力に対応していない。たぶん実装するのは簡単なんだけど、商業イベントでいきなり使うのはちょっと怖い。 あと、DJのサンプル音源を聞いてみて、今回はライブコーディングではないキャッチーな映像を出してみたいと思った。

TouchDesignerの場合、無料版では1280x1280までしか出力できない。 フルHDを2画面出力するためにはProライセンスへの課金が必要となる。

他のツールとしては、Unityが選択肢に挙がる。 最近はVJやジェネラティブアート界隈でUnityを使った作品をよく見るし、今回のイベントでもトップバッターのKeijiroさんが使っていた。 僕は6月に転職してからUnityを触っており、UnityでVJシステムを作るのも良い経験になりそうだ。

というわけで、TouchDesignerにお金を払うか、UnityでVJシステムを自作するかの2択となった。 せっかくなので新しい事に挑戦したいと思い、後者を選んだ。

作ったもの

github.com

Main.unityがメインのシーンです。 実行にはREADME.mdに書いたアセットをimportする必要があります。

めっちゃ急いで実装した結果コードはハチャメチャなのであんまり見ないで……! マルチシーン部分とか、エフェクト操作部分は参考にしていただければ。

構成

f:id:amagitakayosi:20180828212154p:plain

めちゃくちゃ詰め込んだシステムになった。 特徴はこんな感じ。

  • 2画面出力 + 操作用の画面の3ディスプレイ構成
  • Unityシーンの加算ロードによる映像ソース切り替え
  • 外部からのビデオ入力を利用
  • キーボードとMIDIコンによる操作
  • 前後スクリーン同時にエフェクトかけられる
  • レイマーチングもあるよ!

3ディスプレイ構成

前述の通り、今回は2画面出力する必要があった。 加えて、映像ソースの切り替えや、実際にスクリーンを並べたときの状態をプレビューするため、操作用の画面を作成して、PCのディスプレイに表示した。

Unityではカメラを複数用意することでマルチディスプレイ用のアプリを作成できる。 映像ソース切り替えにも専用のカメラを配置したため、メインのシーンだけで7個のカメラを使うことになった。

今回はリハの時間がとれなかったので、京都で何度も動作確認を行っていた。
動作確認の様子:

www.instagram.com

ゲーミングPCじゃないと動かないと思う😇

Unityシーンの加算ロード

f:id:amagitakayosi:20180830180543p:plain

映像ソースは、Unityでシーンを作り、メインのシーンから呼び出すようにした。 Unityでは基本的に1つの世界を1つのシーンで表現するんだけど、SceneManager.LoadScene(scene, LoadSceneMode.Additive)で、現在のシーンに他のシーンを重ねて実行できる。 各シーンのルートにSubSceneControllerを置き、単独で実行された場合は通常どおりに実行、他のシーンから呼び出された場合はRenderTextureに描画結果を書き出した。

外部からのビデオ入力

せっかくなのでVEDAも使いたいよね!という事で、キャプチャデバイスからビデオ入力を受け取って、映像ソースの一つとして利用できるようにした。

Unityで映像入力を使うには、WebCamTextureを利用すると良い。 実装にあたって以下の記事を参考にした。

nn-hokuson.hatenablog.com

映像入力には去年録画用に買ったキャプチャデバイスを使ったんだけど、結構ノイズが目立ってた。 もしかしたらNDIとかのほうが画質キレイかもしれない。

キーボードとMIDIコンによる操作

KORG USB MIDIコントローラー NANO KONTROL2 ナノコントロール2 ブラック

KORG USB MIDIコントローラー NANO KONTROL2 ナノコントロール2 ブラック

いつものnanoKontrol2を使用。 キーボードでシーン切り替えとエフェクトのON/OFF、nanoKontrolでレベルとエフェクトを操作している。

  • キーボードの数字キー: シーンのON/OFF
  • キーボードの文字キー: エフェクトのON/OFF
    • 左右Shiftでフロント/リア切り替え
    • Spaceと同時押しでトグル
  • nanoKontrolのフェーダー: 各シーンの明るさ & マスター明るさ
  • nanoKontrolのつまみ: エフェクトの強さ

ちょっと複雑……。

本当はLaunchpad miniでシーンを切り替えたかったんだけど、工数が足りなかったのと、機器が増えるとトラブルの可能性も増えるので、今回は諦めた。 Unityで使いやすいようにLaunchpad Mini用の設定書いて、今後使えるようにしたいな〜……。

レイマーチング

VJといえばレイマーチング!ということで今回もレイマーチングを使ったシーンを作ったよ。

www.instagram.com

hecomiさんのuRaymarchingを使うと、Unity上で簡単にレイマーチングできる。 3Dオブジェクトのマテリアルにdistance functionを書くだけ。簡単!

tips.hecomi.com

distance functionは自分のShadertoyから持ってきた。 封神演義盤古幡をイメージしたやつ。

https://www.shadertoy.com/view/Msffzf

反省点

フレームレートが低い

8月頭に仮実装したときは「単純にシーン全部ロードしてもヌルヌル動くじゃん〜〜🤗」って思ったんだけど、シーンを作りこんでから結合したら当然重くなった!!! 😇 特にレイマーチングのシーンは単体だとヌルヌル動くんだけど、マルチシーンで使った途端めちゃくちゃ重くなってしまう。

GPUヘビーなシーンの場合、UnityのStatsでは正しいfpsが出ない……? ので、 Time.deltaTimeを使ってFPS計測用のスクリプトを書く必要がある。 僕はこれコピペして使った。

An accurate FPS counter for Unity. Works in builds. · GitHub

主なボトルネックはPostProcessingStackとレイマーチングだった。 本番前の土日に、レイマーチングのループ減らしたり、PostProcessingのパラメータを色々調整して、ほぼ30FPS出るようになった。

他のVJ2人がヌルヌルサクサクだったので、本番後に「次はもっとヌルヌル動くようにしてえな〜」という気持ちになった……!

操作がわかりにくい

本番中、どのシーンがONになってるか、どのエフェクトがどのくらいの強さになってるかがわからなくなることがあった。 操作画面にどのエフェクトがONになってるか表示したいけど時間が足りなかったんだよな。

難しくはないので、次回までには実装しておきたい!

ブルームかけすぎた

ブルームかけすぎて画面全体がめちゃくちゃ明るくなる場面があった。 今回の会場では黒バックでもキレイに移るので、もうちょっとシンプルなシーンを用意しても良かったかな。 あとPostProcessingのブルームOFFにすれば負荷も減るし。

コードが汚い

😇😇😇😇😇😇😇😇😇😇😇😇


というわけでUnityでの初VJでした。 Unityは手軽にキレイな画面を作れるし、アセットも使えるので、モーショングラフィックスにも向いてるナ〜という感想です。 今回のシステムを作り込めば、複数人で別々のシーンを開発して統合、とかもできるしね。

楽しかった!!!!

【宣伝】9/15(土) 渋谷でVJやります

1nfiniterave.peatix.com

クリエイティブコーディング系の人たちが集まってDJ/VJするイベントです。 僕は今回VEDAでGLSLライブコーディングする予定です(たぶん)。

  • 日時: 2018/09/15(土) 17:00-20:00
  • 会場: Shibuya Cast
    • 渋谷駅13番出口より徒歩1分

皆様ぜひ来てください!!

UnityのVFXGraphでパーティクル芸やる方法

$
0
0

最近仕事の合間にVFXGraph (Visual Effect Graph)を触ってます。

Uniteの発表動画みた時は「おいおいHoudiniかよ?」と思ったけど、今の所は「ノードベースのGPUパーティクルシステム」という感じ。
ベータなのでノードの数も使い勝手もまだまだだけど、それでもサクサクっとおもしろパーティクルアニメーションを作れるので楽しいですね。

この記事では、VFX Graphの基本的な操作方法や、これまでに作ったエフェクトの作成方法を解説します。
まだベータなのでこれから変わるかも。

使い方

VFX GraphはUnity 2018.3からの新機能です。
インストール方法はのたぐすさんのスライド見てください。

notargs.hateblo.jp

Projectタブで Visual Effectを作成してダブルクリックすると、ノードエディタ的なやつが開きます。

f:id:amagitakayosi:20181115193535p:plain

Systemはパーティクルシステム全体、 Nodeはグラフを構成する要素ですね。
システム内のNodeには Blockを追加して、パーティクルの挙動をコントロールできます。

(以下では ノードとか ブロックとも表記します)

ノード画面の基本操作

  • ノードorBlockクリック: 選択
  • 何もない所でドラッグ: 矩形選択
  • 何もない所で、中ドラッグ or Alt + ドラッグ: グラフを移動
  • 何もないとこで右クリック: ノードの追加
  • ノードを右クリック: ブロックの追加、ノードの削除

キーボードショートカット

  • A: 全ノードが画面内に収まるようにズームアウト
  • O: 原点に戻る
  • F: 選択中のノードorブロックにズーム
  • [ / ]: 選択中のブロックの前or後のアクティブなブロックを選択
  • ノードを選択して Space: ブロックを追加
  • Ctrl+D: 選択中のノードorブロックを削除

Tips

体系化むずいので箇条書きで……

新たにエフェクトを作るには?

Create Node>Systemで何か選ぶ。
Simple Swarm Particle Systemを選ぶとカッコいいツブツブが出ます。

パーティクルに力を与えたい

Updateノードに Force内のブロックを追加すると色々できます。

僕のお気に入りは Conform to Sphere。 パーティクルを引き寄せる球体を作ることができます。

より進んだ使い方は後述。

パーティクルにゆらぎを持たせたい

Updateノードに Turbulanceブロックを追加しましょう。
Vector Field Forceでも良いけどVector Fieldを自分で作る方法がわからん……。

Inspectorから値を操作したい

Blackboardからできます。

また、 VFX *** Binderみたいなスクリプトを使って、Sphere ColliderをVFXにバインドすることもできる。

時間で変化する値を作りたい

Total TimePeriodic Total Timeノードを使うと良いです。
Sine Waveノードや Remapノードを使って、値の動きを調整するといい感じになります。

ケーススタディ

一応プロジェクトはここで公開してます(コミットログは破茶滅茶だが……)

GitHub - fand/vfx-graph-study

作例1: リングっぽいの

Initializeノードに Position (Circle)ブロックを追加して、Updateに Conform to Sphereを追加。
Conform to SphereのForceなんかをSine Waveで変化させてるだけです。

作例2: 球体からパーティクル出てるやつ

球体を画面中央に向けて Rigidbody.AddForceしつつ、 VFX Sphere Binderで初期位置に設定してるだけです。
bindしたSphereは、Blackboardで追加したパラメーター同様にノードとして取得できるので、Initializeノードの Position (Sphere)に繋いでやると良い。

作例3: 3Dモデルからパーティクル出すやつ

Point Cacheって奴で出来ます。

メニューから Window>Visual Effects>Utilities>Point Cache Bake Toolを開き、メッシュを追加して Save to pCache file...ボタンを押すと、メッシュに対応するポイントキャッシュが作成されます。 あとはPositionみたいなやつにポイントキャッシュファイルを食わせてあげると、パーティクルがメッシュからスポーンするようになる。

f:id:amagitakayosi:20181115230042p:plainf:id:amagitakayosi:20181115232723p:plainf:id:amagitakayosi:20181115232737p:plain

パーティクルを3Dモデルに集まらせるやつは Conform to SDFでやるんだろうけど、今のところ自分でSDFを作る方法はなさそう……? Forumでみんな「SDF作りたいよ〜」って言ってるのは観測した。

https://forum.unity.com/threads/feedback-wanted-visual-effect-graph.572110/

作例4: パーティクルが球から球へと飛び移っていくやつ

Spawnノードに Single Burstブロックを入れて、InitializeノードでLifetime系のブロックを削除すると、一度生成したパーティクルをずっと飛ばし続けることが出来ます。 あとは Position (Sphere)Conform to Sphereに同じSphereを渡して、 Attraction ForceをSine Waveで変化させてるだけ。

Attraction Forceをマイナスにすることで一瞬ふわっと広がらせるのがミソです。

作例5: 渦

現在のVFX Graphでは、パーティクルに「ある軸にそって回転する力をかける」ことは出来ないのだけど、これを頑張って擬似的に再現した。 円を小さな弧に分割して、それぞれに Conform to Sphereをかけることで、全体に回転する力がかかっているように見せている。

f:id:amagitakayosi:20181116105651p:plain

同じ要領で、回転する炎?みたいなエフェクトも作れる。


Meshをスポーンさせるやつはまだあんまり触ってないです。 ParticleごとのIDも取得できるみたいなのでコンピュートシェーダー的な表現もできそう?

これからの機能追加に期待ですね。

みんなVFX Graphで遊ぼうぜ〜〜

新婚旅行・デンマーク編

$
0
0

7月、新婚旅行でデンマークフィンランドに行った。

フィンランドで妻の友人の結婚式があり、それに合わせて新婚旅行のスケジュールを組んだ。 せっかくの機会だし、もう一カ国べつの国にも行ってみようということで、協議の結果、デンマーク息が決定した。

デンマークを選んだのは、町並みがきれいで、程よく都会らしいということ、あと家具などのデザインが良いという噂を聞いたからだ。 僕はドイツ、イタリア、フランスには行ったことがあるので、北欧の国に行ってみたかった、というのもある。

時間が経ってしまったけど、写真メインで振り返ります。

宿

宿はAirbnbで、街の中心から自転車で20分ほどの所にした。 デンマークはレンタサイクルが発展しているし(後述)、地下鉄も治安が良く、本数も多いので、移動時間は気にならなかった。 夜も静かなので、変に市街地の安宿にしなくて正解だった。

しかし、デンマークの家キレイすぎるな……。 単にオーナー夫妻がオシャレというのもあるんだろうけど。

SIM

妻が事前に調べてくれてたけど、現地のコンビニで買うので大丈夫そうだった。 空港について、セブンイレブンで「SIMくれ」といって出された物を購入。 確かLycamobileかLebaraだったかな。 この時、渡されたレシートにアクティベーションキーがついており、アクティベーションなしだと半日くらいで通信できなくなるので注意! (アクティベーションが必要なのを理解せず、1日目の夕方にWiFiを求めてさまよう羽目になった……)

自転車

Donkey Republic がとにかく便利。 https://www.donkey.bike/

旅行ガイドとかを見ると、市営(?)の白いレンタサイクルについて紹介されているけど、これはあんまりオススメできない。 ハンドル部分についてるタブレットで操作するんだけど、これがけっこう難しいし、ロックが壊れてて出庫できなかったりする。 そもそも利用可能な台数が少ないので、電車を降りていざ自転車乗ろうと思ったら一台も無い……なんてことも。

一方、Donkey Republicの自転車は、街中にたくさんあるし、スマホで現在位置から簡単に利用可能な自転車を探せる。 鍵の解錠・施錠もアプリで簡単にできる。

f:id:amagitakayosi:20181023163538p:plain

調べてみたら、Donkey Republicはデンマーク発のスタートアップで、他にもドイツやイギリスでサービス展開しているらしい。

アプリのデザインも良く出来てるしメッチャ気にいった。 デンマークに行くときは、事前にインストールしておくと良いです。

1日目

市街地

f:id:amagitakayosi:20180708083311j:plain

やたらと建物がでかい!!!!!!!!!! そしてやたらと黒 + カラー!!!!!!!

海と仲良し。 日本だと横浜が近いんかな?完全なイメージだけど

あと皆ふつうに海水浴しててビビる。町中なのに! そして男女ともに公衆の面前で水着に着替えてる。ワイルド……

デザインセンター

観光エリアを東に抜けたあたりにデザインセンターがある。 有名な家具や雑貨、ポスターなどが集められ、デンマークのデザインやアートの歴史を学べる。

入り口にある巨大な椅子。

入場バッジがオシャレ。

後半は特設展示スペース。 ちょうどジャポニズム特集だったらしく、地球の裏側まで来たのに京都のテレビ番組を見ることに……笑

クリスチャニア

ヒッピーの生き残りが大量に住んでいる自治区。 一応違法なはずのマリファナが堂々と売られているし全体的にマリファナ臭い!ただし撮影は禁止なので注意。

お店も住宅もレトロな雰囲気でよかった。 大抵どの壁にもグラフィティ、というか全面にガッツリイラストが描いてあるし、あと謎の人形が飾られてたりする。

まんなかに池?があってのんびりできる。みんな煙をプカプカしてた。

寿司最高

寿司は最高。

コペンハーゲン、寿司屋が大量にあり、パン屋よりも多かった。 日本では寿司屋なんて探さないと無いのに…… (あとタイ料理屋も多い。アジアン枠?)

Tietgenkollegiet(かっこいい学生寮

かっこいい学生寮。 居住スペースは2階からだけど、外から結構見えるのでちょっと恥ずかしい……??

2日目

1989 Europa, HAY Store

市街地の名物カフェでスモーブロー。 料金はちょい高だけど、確かに上品な味がするな……?気のせい?

続いてデンマーク発のオシャレ家具ストア、HAYへ。
僕は今回妻に教えてもらって初めて知った。

ここで見た金網が気持ちよくて、トイレ待ちの時間等にシェーダー書いてた……

HAYから見た市街地の風景。 石畳がヨーロッパって感じだな〜

JOE & THE JUICE

現地で人気らしいジュースバー。 スタバみたいなもんかと思いきや、材料はりんご、バナナ、生姜、セロリとかでメチャクチャ健康的。

https://www.joejuice.com/menu/

メニューはこちら。 SEX ME UPが気になったけど勇気がないので ENERGIZERを飲みました。 爽やかでおいしい!

フードマーケット、公園

街の北部にはフードマーケットがあり、食料品、酒、あと大量の果物と花が売っていた。 こんなに食べる?ってくらいベリーと豆が売ってる。 デンマークの食事はわりとワンパターンなんだけど、果物をたくさん食べてバランス取ってるのかな。

フードマーケット前の広場には謎の凹凸があり、人々が座ったりスケボーで遊んだりでしていた。オシャレか……

公園のベンチで一休み。 池には鴨がたくさんいたんだけど、日本で見るのとはちょっと種類が違うような気がした。

王立図書館(ブラックダイヤモンド)

異常にモダンな見た目の図書館。 新館と本館があり、本館はレンガ造りの建物だけど、新館は全体が花崗岩で覆われている。

そういえば、現地用に持っていった軽量バッグが妻に不評だったので、ここでトートバッグを買いました。

チボリ公園

1843年設立の遊園地。世界で2番目に古い。 (ちなみに世界最古は同じくデンマークのDyrehavsbakken)

絶叫マシンは苦手なので、公園スペースで座ったり、現地のミュージシャンのライブを見てまったり過ごしました。 明るいから気づかなかったけどこの時点で20時とかなんだよな。

真ん中あたりのレストランにおとなしい孔雀がいる。かわいい

バー・The Bird and The Churchkey

おしゃれでおいしい。 「Kyotoから来た」って言ったら伏見のお酒を引張りだしてくれたけど、普通にカクテルを飲んだ。

店内が薄暗いし酔っ払ってたので僕はモバイルバッテリーを置き忘れました。

3日目

ルイジアナ美術館

市街地から電車+バスで一時間ほど北へ。さらに15分ほど歩くと、海沿いのルイジアナ美術館が見えてくる。

美術館は半分森と融合したような作りになっている。 窓の向こうには森が、中庭から外を望むと海が広がる。

展示を楽しんだあとは海を見ながらランチビュッフェをいただける。のんびり〜

写真撮り忘れたけど、入口近くに無人シナモンロール販売コーナーがあった。 シナモンロールはカバーも何もなく野ざらしになっていて、コインを入れて勝手にいただく仕組み。 性善説ですごい……。

ダンスク・アーキテクチャ・センター(DAC

市街地に戻り、海沿いにあるDACへ。 ウェブサイトがイケてる。

https://dac.dk/

到着したのが17:30, 閉館が18:00だったので、急いで展示コーナーを回った。 「解説は写真だけ撮ってあとで読むぞ」と思ってたけどまだ読んでないな……

オラファー・エリアソンの作品も展示されていた。 少し前に日本で彼の映画を見た所だったので、実際の作品が見られてよかった。

建物を出るとロッキングチェアの並んだ広場があり、誰かがチルいDJをしていてノンビリできた。 広場の横では異常にオシャレなアスレチックで子供達が遊んでいて、英才教育だな〜〜〜と思った。

npmのステッカー

町中で見かけるとは……

バー・Ruby

近くのバー・Rubyへ。 2日目のバーよりはもうちょっと入りづらい、というか大人な感じだけど、入ってみたらとても落ち着いた雰囲気で過ごしやすかった。 窓辺の席で、思ったより強いカクテルでクラクラになりつつ、雨のコペンハーゲン市街を眺めていると、またこうして酒でも飲みながら、この街でのんびり過ごしたいな、と思えてくる。

最終日

朝早く地下鉄で空港へ。 ゲート内で再びJOE & THE JUICEを飲む。

飛行機を待ちながら、妻と「2ヶ月くらい仕事しながら滞在できるといいね」と話していた。 いつかできるといいな。

TOEICで935点を取ったので勉強法を振り返る

$
0
0

先日、TOEICで935点をゲットした。

f:id:amagitakayosi:20181119220340p:plain

忙しくてあまり勉強できなかったけど、思ったより良い点数で驚いた。 大学時代に受けた時は800点だったので、普段の生活でもそれなりに英語力が上がってたんだなー。

というわけで、ここ数年やってきた英語活動?についてまとめます。

一言で言うと、 英語に触れる心理的障壁を下げることが大事っぽい。


筆者のスペック

英語Podcastを聴く

僕はプログラマーなので、技術系のPodcastをたまに聴いている。 毎日聴いているわけではなくて、たまに意識が高まった時とか、暇だけど疲れてて読書とかはできない時に聴いてる。 昔は早朝や深夜にジョギングしていたので、そのついでに聴いたりもしていた。

余裕があればシャドーイングもしている。 聞き取れる部分だけでも真似して発音してみると、自分の発音のおかしい所に気付けるし、ネイティブスピーカーが発音を省略してる感じもわかってくる。

電車のなかでシャドーイングしてると不審者っぽいけど、まあ誰もお前のことなんて気にしてないよ、と自分に言い聞かせてブツブツやってる。

以下は僕が聴いてるPodcast

Web系

JavaScriptJabber

https://devchat.tv/js-jabber/devchat.tv

レギュラー陣が3,4人 + ゲスト1人、という布陣。 JSのライブラリの開発者やChrome開発チームの人がゲストになる。 普段使ってるライブラリの開発経緯や、中の人の人となりがわかるので、聴いてて楽しい。

会話のスピードは中くらい。 たまにゲストのマイクの音質が悪かったり、早口で聞き取れないこともあるけど、進行役のCharles Max Woodが気を利かせて「ごめん聞こえなかった、もう一回言って」とかやってくれたりする。

ジョークを言ってる時は早口になるので聞き取れないけど……😇、

SoftwareEngineering Daily

https://softwareengineeringdaily.com/softwareengineeringdaily.com

タイトルの通り、Webに限らず様々な分野の技術について紹介してくれるPodcast。 インフラ系の技術はわからないのでスルーしてる……。

更新頻度がめちゃ高い(マジでほぼ毎日更新される)ので、興味のある回だけ聴くのがオススメ。

CG系

CG Garage

www.chaosgroup.com

V-Rayという3DCGのレンダリングエンジンを開発している、Chaos GroupによるPodcast。 Epic、ノーティドッグといったゲームスタジオや、MarvelやDisney Researchなど映画業界からゲストを迎え、有名作品の舞台裏について聴くことができる。

デザイン系

Wireframe

creative.gimletmedia.com

AdobeのデザイナーKhoi Vinhによる、デザインについてのポッドキャスト。 全エピソードが Good Design is ~~というタイトルで、毎回いろんなデザイナーに取材している。

会話のスピードもゆっくりだし、音質も編集もしっかりしている。 デザイン系のポッドキャストは話題が散らばったり、会話がネイティブ過ぎて全然ついていけなかったりしがちなんだけど、Wireframeはテーマもわかりやすいし、とても聴きやすくてオススメ!

コツ1. 良いPodcastクライアントを使う

iOSではOvercastを、AndroidではPocketCastsを使っている。 どちらもフル機能は有料だけど、いくつか試したところこの2つが最も使い勝手が良かった。

スピード調整、無音部分のスキップ、声を聞き取りやすくするvoice boost機能があり、かつPodcast毎に設定を保存してくれる。 僕は日本語のPodcastは3倍速 + 無音部分スキップ、英語Podcastは等倍 + voice boostで使っている。

Overcast

Overcast

  • Overcast Radio, LLC
  • ニュース
  • 無料

play.google.com

コツ2. 日本語のPodcastもいろいろ聴く

英語Podcastしか登録していないと、Podcastアプリを開くのが苦痛になり、よほどモチベーションが高くないとアプリを開けなくなってしまう(体験談)。 ので、日本語のPodcastも登録しておいて、「今日は英語のやつ聴くか〜」くらいのテンションで気軽に聴けるようにしておくと良い。

これは僕のPocket Castsのスクショ。 Rebuild.fm, YATTEIKI.fm等をよく聴いています。

f:id:amagitakayosi:20181119231438j:plain

HackerNewsやMediumの記事を読む

休憩時間にHackerNewsというプログラマー向けニュースサイトを読んでいる。 HackerNewsはUIのアクが強くて心理的障壁が高いので、BitBarでいつでもサッと読めるようにしている。 1クリックで人気記事一覧を見れるようになり、非常に便利。

f:id:amagitakayosi:20181119212607p:plain

HackerNewsは正直話題が広すぎるので、タイトルだけ見て、面白い記事があれば読むか、くらい。 あまり知られていないけどDesignerNewsというサイトも存在していて、デザイン/UI系の記事が多いので、こっちの方がよく読んでるかも。 僕はPandaというChrome拡張機能を入れていて、新しいタブを開いたらDesignerNewsとABDUZEEDOAWWWARDSの最新記事一覧を見れるようにしている。

f:id:amagitakayosi:20181119225610g:plain

Panda 5 | News & Inspiration Dashboard - Chrome Web Store

Mediumの記事はネイティブ向けに書かれたこなれた文章が多く、知らない単語がバンバン出てくるので、ボキャブラリーを増やすにはもってこいだ。長さも短いので、10分から20分あれば大抵読めるしね。 僕は新幹線の中でよくMediumの記事を読んでる。紙の本を読むと大抵酔ってしまうので、Mediumくらいの分量が丁度いい。

あと、はてなブックマークにはマイホットエントリーという神機能があり、お気に入り登録しているユーザーのブックマークや、Twitterでフォローしてる人々が話題にしている記事をサジェストしてくれるので、そこで気になった英語記事をチェックしている。

f:id:amagitakayosi:20181119212323p:plain

コツ3. すぐに辞書を開けるようにする

意外と知られてないけど、Macだと単語をタップするだけで辞書で調べる事ができる。 設定はシステム環境設定でチェックを入れるだけ。

f:id:amagitakayosi:20181119211913p:plain

僕は 3本指でタップにしてる。

Windowsでも使える奴だと、Mouse Dictionaryというブラウザ拡張が良さそうだった。 (Chrome/Firefox対応)

qiita.com

この辺の環境を整えるだけで、英語の文章を読むのが5000億倍ラクになる。

海外旅行に行く

一昨年はタイ、去年は台湾、今年はデンマークフィンランドに行った。

毎回初日はめっちゃ怖いんだけど、ホテルにチェックインする頃には「意外となんとかなる……!」という気分になっていて、とにかく行けばどうにかなることがわかる。 最終日には「俺の英語はショボい……ショボショボ野郎……ショボボ」となって多少落ち込んでるけど、行く前よりは良くなってるはず、と自分に言い聞かせてる。

カンファレンスで外国の人と話す

プログラマーは技術カンファレンスに参加することがあり、そこで交流するチャンスがある。

大きめのカンファレンスに行くと外国からのゲストがいるので、質問したり懇親会で話しかけたりしてみると良い。 特に、みんながビビって話しかけてくれず、ゲストだけで固まってしまってるケースは、頑張って声をかけると沢山話してくれるし、色々教えてもらえたりする。

交流の場では「どういう仕事してるの?」と何度も聞かれることになるので、ある程度脳内でテンプレを用意しとくと便利。

そういえば最近は技術系のイベントに出てない。もっと活発になりてえなあ。

英語圏の人とチャットする

f:id:amagitakayosi:20181119213059p:plain

これは大分ハードル高い気もするけど……

僕は去年からVEDAというVJアプリを作っているのだけど、英語圏の人から質問を受けたり、SlackなどでVJ界隈の人とつるんだりと、英語でやりとりする機会が増えた。 文章をリアルタイムで考えるのはかなり難しく、未だに毎回ググってるんだけど、ググる度に語彙が増えていってると考えることにしてる😇

f:id:amagitakayosi:20181119213624p:plain

死にたくなった時に勉強する

大学の時は人生が嫌になり、数日間講義サボって電車に乗りひたすらDUOだけを読み続けてボロボロになって帰ってくる、みたいなことをたまにやってた。

最近は人生が好転しているのでやってない。ので語彙力が増えてないかもしれない……けど幸せだから良いや


以上、万人に当てはまらない事もたくさん書いたけど、参考になれば幸いです。
英語に触れる機会を増やすと良い、というのは自明だけど、頑張るのはしんどいので、なるべく頑張らずに英語に触れられる仕組みを作れるといいですね。

ちょっと自信がついたので、英語圏からの仕事もガンガン受けていきたいな〜

Hubotで英語学習bot作った

$
0
0

f:id:amagitakayosi:20181127144718g:plain

どうも天城です。最近は戸籍について悩んでます。

きょうは英単語を覚えるためのSlack botを作ったので紹介します。 Slackの #dictionaryに英単語とその意味をメモしておくと、トランプ大統領が定期的にクイズを出題してくれる。

もくじ

前回までのあらすじ

blog.gmork.in

TOEICではいい点数とれたけど、まだまだボキャブラリーが無いのでもっと勉強したい。

我が家では以前からSlackを利用しており、Hubotでを洗濯やゴミ出しのリマインダーを作っていた。 このSlackに #dictionaryに単語をメモしていたのだが、このbotを利用して単語クイズができればいいな〜ということを思いついた。

単語学習サービスは既にAnkiなどがあるが、様々なデバイスでデータを共有するのが大変そうなのと、新たにツールを導入するのは面倒なので、既にあるHubotを利用することにした。

仕組み

HerokuでDBといえばPostgresだけど、無料だと10000行までという制約がある。 実際困る事はないかもしれないが、なんとなく制限のことを考えるのがめんどい。 HerokuのAdd-onは他もだいたい無料だと制限があるので見送り。

というわけで、今回はGoogle Spreadsheetを使うことにした。 Google Spreadsheetなら200万セルまでらしいので、1単語に5セル使っても400000単語まで記録できる。

API周りの処理は、node-google-spreadsheetを利用した。 Google謹製のgoogleapisというのもあるけど、前者のほうが認証周りがシンプルそうだった。

github.com

事前にSpreadsheetで以下のようなシートを作成しておき、botが記録/閲覧できるようにしておく。

f:id:amagitakayosi:20181127153932p:plain

サービスアカウント作成

botがSpreadsheetにアクセスするためには、Googleダッシュボード上でサービスアカウントを作成する必要がある。 詳しい手順はこの辺を参照。

https://github.com/theoephraim/node-google-spreadsheet#service-account-recommended-method

サービスアカウントを作成できたら認証用データの入ったJSONがダウンロードされる。 JSON内のメールアドレス、プライベートキー等は、Herokuの設定画面などから環境変数に入れておくとよい。

f:id:amagitakayosi:20181127154226p:plain

記録部分

特定の形式のメッセージが来たらスプレッドシートに記録する。 今回は以下の形式を採用。

*america* 
アメリカ

Hubotレポジトリの /scriptsに以下のスクリプトを保存すると良い。 doc.addRow()を呼ぶだけで行を追加できて便利。

const GoogleSpreadsheet = require('google-spreadsheet');
const p = require('pify'); // promisify// 認証周りのデータconst doc = new GoogleSpreadsheet(process.env.SPREADSHEET_KEY);
const creds = { 
  client_email: process.env.SPREADSHEET_CLIENT_EMAIL,
  private_key: process.env.SPREADSHEET_PRIVATE_KEY,
};

// メッセージにマッチする正規表現const re = /\*?([^\n\*]+)\*?\n(.+)/;

module.exports = (robot) => {
  robot.hear(re, async (res) => {let m = res.message.rawText.match(re);
    if (m) {// メッセージから英単語と意味を抽出const english = m[1];
      const japanese = m[2];

      // 認証
      await p(doc.useServiceAccountAuth)(creds); 

      // スプレッドシートに保存      
      p(doc.addRow)(1, { english, japanese })
        .then(() => res.send('OK, saved.'))
        .catch((e) => res.send('ERROR! Try again.'));
    }});
};

クイズ部分

こういう感じでSpreadsheetから単語を取得して

const GoogleSpreadsheet = require('google-spreadsheet');
const p = require('pify'); // promisifyconst doc = new GoogleSpreadsheet(process.env.SPREADSHEET_KEY);
const creds = { 
  client_email: process.env.SPREADSHEET_CLIENT_EMAIL,
  private_key: process.env.SPREADSHEET_PRIVATE_KEY,
};

// 認証
await p(doc.useServiceAccountAuth)(creds); 

// 行を取得const info = await p(doc.getInfo)();
const rows = p(info.worksheets[0].getRows)({}));

// セルのデータを取得const words = rows.map(r => ({
  english: r.english,
  japanese: r.japanese,
}));

こういうのでSlackに発言すればよい。 send.trumpはメッセージ送信部分のラッパー。

module.exports = async (robot, room) => {
  send.trump(robot, room, '@channel 今から皆さんに、英語に関するクイズを出すピィ〜♪\n');

  // 単語を取得let rows = await sheet.getRows();
  rows = shuffle(rows);

  for (let i = 0; i < limit; i++) {const r = rows[i];

    send.trump(robot, room, `*${r.english}* は何という意味でしょう?`)
    await sleep(5000);
    send.trump(robot, room, `正解は \`${r.japanese}\` でした!!\n.\n`);
    await sleep(5000);
  }

  await sleep(1000);
  send.trump(robot, room, 'お疲れ様!!今日も一日頑張ろうヾ(๑╹◡╹)ノ"');
};

実際には、同じ単語は3回までしかクイズに出ないようにしたり、一日の出題数を制限したりしてる。 大量にあると疲れてしまうので……


今回のbotは単語帳サービスみたいなものなので、英語に限らず何でも記録出来ます。 ことわざとか技術用語の学習に使ってもいいかも。

f:id:amagitakayosi:20181127153707p:plain


やりたいことをやるために、やりたいことをブログに書く

$
0
0

今年の抱負です。

今週のお題「2019年の抱負」

目次

去年は忙しかった

去年は後半妙に忙しくて、ずっと何かのイベントの準備で追われていた。 数えたところ、1年で11回も東京に行っている……

日付 内容 イベント 場所
4/28 講師 SPEKTRA 京都 MTRL KYOTO
5/11 VJ SMTP++ 京都 cafe la siesta
6/1 転職
6/10 結婚式
6/30 VJ POD 京都 FORUM KYOTO
7/7〜7/15 新婚旅行 コペンハーゲン/ヘルシンキ/タリン/上海
7/28 VJ POD 京都メトロ
8/27 VJ ADIRECTOR チャネル 表参道 DOLLHOUSE
9/15 VJ InfiniteRave 渋谷Cast
11/2 講師 MUTEK.jp お台場 日本科学未来館
11/10 VJ Algorave Osaka 大阪 Club Stomp
11/23 VJ Nodefest 2018 東京 Yahoo! Japanオフィス
12/1 講師 TokyoDemoFest 2018 東京 アーツ千代田 3331
12/8 講師 GLSL School 2018 東京 茅場町 Co-Edo

イベントが多いのは歓迎なんだけど、向こうからやってくるイベントを捌いてるだけで一年が終わってしまい、自分で考えて行動する、ということがあまり出来なかったな〜。

今年は、自分が何をやりたいのか、何をやるべきか、ちゃんと考えたい。 そのためには、文章としてのインプット・アウトプットを増やさないといけない。

インプット/アウトプットを増やす

読書量を増やす

去年は全然本を読めなかった。 有給消化期間にガッと3冊くらい読んだんだけど、それ以降は何を読んだかも覚えていない……。

razokulover.hateblo.jp

この記事に書かれている、「読書で知識が増えることで人生が面白くなる」というのは実感として持っていて、常に本を読みたいとは思っているんだけどなあ。

最近、CGやアート系の人々と接する事が増えたんだけど、彼/彼女らと話していると、自分の知識があまりにも足りてなく、議論のステージに立つことすら出来ていないな、と感じることがある。 これまではずっと「技術書メイン + その他サブ」というスタンスで情報を摂取していたけれど、これからはどちらもバランスよく学んでいかないといけない。いや、これまで疎かにしてきた分、しばらくは技術的でない分野について重点的に学んだほうがいいのかもしれない。

手始めに、冬のあいだは自転車ではなくバスで通勤して、待ち時間に本を読むことにした。 これで読書を習慣づけられると良いなあ。

考えた事をブログに書く

僕は考えた事を文章にしたりするのが苦手だ。 このブログもほとんどは技術的な内容か、制作物、またはイベント出演の紹介になっている。

でも、最近何かを作ったり、行動を人に伝えるには、結局考えていることを文章にまとめる能力が必要なんだなあ、ということをひしと感じている。 というわけで、今年は技術記事ではなくて、考えていることをブログにたくさん書くようにしたい。 なるべくハードルは低く、日記レベルでもいいので。

まずは週一くらいを目標に書けるといいな。

映像屋としてやりたいこと

制作を、やる

去年はだいたい2ヶ月に1回くらいのペースでVJをやってきた。 そのうち、ジェネ系のVJは4回、だったかな?半分くらい。

ジェネ系VJでは、素材やシステムを都度作ることになる。 規模にもよるんだけど、大抵は短期間で作り、同じパフォーマンスは2度しないという、インスタントなアウトプットになりがちだ。

8/27のADIRECTORチャネルでは、システムも映像ソースも1ヶ月かけてガッツリ作る事ができた。 技術的な挑戦にとどまってしまったという反省はあるものの、2018年を通じて最も手応えのあるアウトプットが出来たと思っている。

あんなふうに、しっかりと腰を据えて、自分の持てる物をぶつける制作を、今年はやっていきたい。 VJだけではなくて、映像制作的なことにも手を出せると良いのだけど。

また、去年は個人宛オファーの大部分が講師業だった。 それ自体はとても有難く、自分のプラスにもなるんだけど、なかなか新しい事を学ぶリソースが確保しづらいという問題がある。 もちろん講師業のオファーは大歓迎!なんだけど、軸足はつねに作る側に置いておきたい。

VJネタをストックする

普段からシェーダーで遊んだり、VJの仕込みをしていて生成したアニメーションをTwitterにポストしている。 手軽にアウトプットできるという利点はあるんだけど、高解像度で書き出してなかったり、コードも消失してしまっていて、せっかく色々作っているのに再利用できていない。

年末にVJの皆様が「今年作ったVJネタまとめ」みたいな物をシェアしていて、悔しい思いをした。

今年は、制作したものを何らかの形で残しておいて、VJや映像制作で再利用できるようにしたい。 まずは仕組みを作らなきゃな……昔作ったwebgl-studyを使い回すか……?

映像屋として名前を売る

まずはポートフォリオを作り直したり、リールってやつを作ってみたい。 個人名義での名刺も、今年こそ作らなきゃ。ビカビカな奴つくりたいな。

人間としてやりたいこと

家族を大事にするため、この先3年の身の振り方を考えないとなあ。 これからも色々変化がありそうだし。

Kyoto.js 15をやりました

$
0
0

Kyoto.js乾杯の様子

およそ一年ぶりとなるKyoto.jsを開催しました。 今回はなんと発表者が10人、発表時間は3時間という大ボリュームでした。 参加者のみなさま、本当にありがとうございました……!!!

kyotojs.connpass.com

去年の9月に一度開催しようとしたんだけど、僕と運営メンバーの都合がつかずに流れてしまったんだよね。 9月から12月まで、週末は全部予定入ってたから……

Kyoto.jsは毎回遠方からの参加者が異常に多いのだが、今回は京都の、しかも初めて参加される方が多かった。 しばらく開催してなかったのに、初めての方がたくさん来ていただいてて、とても嬉しかったです。 遠方からの参加者が少ないのはちょっと寂しいけど、それだけ京都のWebエンジニアの割合が増えたんだと考えることにしよう。

発表内容も、今回はちゃんと(?)JavaScriptやWebに関する話が多かった。 Kyoto.jsの発表テーマはJSじゃなくても良いということにしており、ひどい時は発表者6人中3人がほぼJSのことをしゃべらないという事もあったんだけど、今回はまともなJSのトークが多かった。 それだけ京都のフロントエンドエンジニアが増えたのか、あるいはKyoto.jsが京都のエンジニアに広くリーチできるようになったって事なのかな?

とはいえ、京都だからできるオールラウンドな雰囲気は残していきたい!! これからもJSに縛られない面白トークは大歓迎です!!!

運営について。
以前は定期開催やるぞ!と息巻いたり、特設ページを作ったりしていたけど、今回はなるべく運営を頑張らないという方針で開催した所、かなりリラックスして開催できてよかった。

Kyoto.jsの運営、頑張ってたときは以下のようなことをやっていた。

  • 会場の最寄駅をツイート
  • 会場ビル入口に案内の人を配置
  • (荒天の場合)交通機関の案内
  • (天の場合)傘箱の用意
  • 名札を用意
  • ゴミ箱の中身を入れ替え
  • ウェルカムスライドを用意
    • WiFi情報、ハッシュタグ、トイレマップ、タイムテーブル、会場の諸注意など
    • 開場から開始までのあいだに自動再生しておく
    • プリントして会場の壁に貼るとなお良し
  • 発表者の名前と発表タイトルをツイート
    • 写真があると尚よし
  • ドリンクとお菓子を用意
  • 落書き用ホワイトボードを設置
  • (会場がオフィスの場合)立入禁止エリアにバリケードを設置
  • ブログに丁寧なレポート記事を書く

今回はほぼノー準備で会場に行き、会場のことはほぼ id:Pasta-Kに任せて、ノリで司会するだけにした。 案の定かなりグダグダになったけど、(少なくとも僕の観測範囲では)みなさん楽しんでくれてそうでよかったな。 ローカル勉強会はこれくらい肩の力を抜いてやっても良いのかもしれない。


次回は未定。
運営メンバーは4/27にやりたいって言ってるので、もしかしたらその辺で開催するかもしれないです。 そのときはよろしく〜

Kotlinで音声認識 + Nearby APIでオフライン通信するアプリ作った

$
0
0

クライアントに納品するプロジェクトで、タブレット/スマホ連動の音声認識アプリを作ることになった。 仕組みはこんな感じ。

f:id:amagitakayosi:20190121121614p:plain
アプリの仕組み

特定の単語を認識して、両デバイスでコンテンツを再生する、というヤツ。 音声認識タブレットでやっていて、単語を認識したらスマートフォンにイベントを送信している。

当初はWeb技術で実現しようとしていた。

PCでいい感じに動くところまではサクッと作れたんだけど、Android実機で動作確認した所、音声認識開始の「ピコン♪」という音が無限になり続ける事態に遭遇した。 まさにこの状況↓

ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog

Androidで開いたら無限にポホロンポロロン音が出続けていた

2019/01/20 23:33
b.hatena.ne.jp

てな感じで困っていたけど、試しにAndroid Studioで検証してみたら意外とサクッとできそうだったので、ラスト1週間でAndroidアプリを作ってみることにした。

音声認識

Web Speech API

Web Speech APIは、SpeechRecognition音声認識)と SpeechSynthesis音声合成)からなる、ブラウザのAPIだ。

developer.mozilla.org

SpeechRecognitionを使うと、ブラウザ上で音声認識して文字列に起こせる。 多言語対応もしている。 音声認識ライブラリで日本語対応してるものって全然無いんだけど、Web Speech APIなら何も考えずに使えて便利。

現状動くのはChromeのみ。 裏ではGoogle Cloud Speech-to-Textを呼んでるらしい。 あっちは利用回数に応じて料金がかかるんだけど、Web Speech APIだと無料だし回数制限も特に無い。 オフラインでも使えるけど、オンラインのときに比べるとかなり精度が落ちるのは、GoogleAPIを叩けないからだと思う。

Web Speech APIは使い方も異常に手軽で、関数を呼んだらコールバックに認識結果が返ってくる。 MediaStream系のAPI使ったことある人なら一瞬で使えると思う。

大抵どんな言葉も認識してくれるし、認識したい単語を指定する事もできる。 特定の単語をコマンドとして使いたいときに便利だ。

試しに、じゃんけんアプリを作ってみると、こんな感じになる↓

// じゃんけんデータconst hands = ['グー', 'チョキ', 'パー'];
const winnerOf = {'グー': 'パー',
  'チョキ': 'グー',
  'パー': 'チョキ',
};

// 音声認識の初期化const recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';

// 認識する単語を指定const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(
  '#JSGF V1.0; grammar colors; public <color> = グー | チョキ | パー ;', 
  1
);
recognition.grammars = speechRecognitionList;

// 認識結果が返ってきた時の処理
recognition.onresult = (e) => {const yourHand = e.results[0][0].transcript;

  // CPU側の手をランダムに決定const myHand = hands[(Math.random() * 3) | 0];

  // 勝敗を判定if (yourHand === winnerOf[myHand]) {
    console.log('あなたの勝ち!');
  }else{
    console.log('あなたの負け!');
  }};

// 認識開始
recognition.start(); 

最近だと、 id:mizchiがWeb Speech APIで文字起こしツール作ってバズってた。

mizchi.hatenablog.com

問題は、Android端末でこのAPIを呼ぶと、「ポポン」という通知音が鳴ってしまうことだ。 今のところこの通知音を消す方法は無いみたい。 root取得すれば回避できるらしいけど、仕事でやるのはちょっと……。

ただ、調べている過程で、どうやらAndroidAPIを叩けば通知音を消せるらしいことがわかった。 という訳で、今回はAndroid標準の音声認識APIを使うことにした。

Android.SpeechRecognizer

Androidには、OS標準で音声認識APIが用意されている。 Android 2.2 (API Level 8) から使えたらしい。

こちらもWeb Speech APIと同じく、裏ではGoogleAPIを呼んでいそう(推測だが)。 オフラインでも利用できるが、やはり精度はガクッと落ちる。

僕がAndroid開発に慣れていないせいか、APIの利用方法が少し複雑だと感じたが、Javaに慣れてくるとこんなもんなのかもしれない。

利用事例をググると、すぐに今回と同じケースのブログを見つけた。

kivantium.hateblo.jp

今回のアプリでは、基本的には↑の記事とほぼ同じ要領で音声認識APIを利用している。 ただ、エラー処理だけ少し気をつける必要があった。

具体的には、エラーコードが ERROR_RECOGNIZER_BUSYだった場合に即リスタートしてしまうと、無限にエラーが出まくった後に音声認識APIが全く成功しなくなり、端末を再起動するまで直らないという事があった。 原因は不明。もしかしたら端末側の問題だったりするのかなあ……。 今回は ERROR_RECOGNIZER_BUSYの時だけタイムアウトを入れることで対処した。

overridefun onError(error: Int) {
    val delay = if (error == SpeechRecognizer.ERROR_RECOGNIZER_BUSY) 1000Lelse100Lval handler = Handler { restartRecognition(); true }
    Timer("restartRecognition", true).schedule(delay) {
        handler.obtainMessage().sendToTarget()
    }
}

また、今回はオフライン環境だったのと、認識したい単語が発音しづらいものだったため、普通に使うだけでは期待する認識精度に達しなかった。 例えば、「花」という単語を認識したいけど、認識結果は「棚」「穴」などが返ってきてしまう。 このような、発音の近くて誤認識されやすい単語も認識候補に追加することで、認識がうまく行かなくてもちゃんと動作するようになった。

Nearby Connections API

バイス間の通信にはNearby Connections APIを使用した。 タブレット側で音声認識を行い、特定の単語を検出すると、スマートフォン側にイベントを送り、2つのデバイスで同時にアクションを起こす。

developers.google.com

Nearby Connections APIは、オフライン状態の機器間でデータをやりとり出来るAPIGoogleのNearbyプロジェクトの一環らしい。 Nearbyプロジェクトには他にも2つAPIがあるので、ドキュメントを参照する際に間違えないよう注意。

  • Nearby Connections API: オフライン機器間の通信
  • Nearby Messages API: インターネットを介したメッセージング
  • Fast Pair: Bluetooth Low Energyで機器を同期するためのシステム

今回はインターネットに接続していないデバイスを用いるので、Nearby Connections APIを利用した。 一応Nearby Messages APIも一応試して見たけど、それなりに速い回線でも10sec以上ラグが出たりするので、今回の用途には向いていないと判断した。

Nearby Connections APIは、内部的にはWiFi DirectとBluetoothを組み合わせて機器間の通信を実現しているが、ユーザーは仕組みを意識する必要がない。 今回はごく短い文字列を送ったけど、結構大きめのファイルも送受信できるみたい。

インストールは、build.gradleに以下の行を追加するだけ。 APIキーの発行とかも不要。

implementation 'com.google.android.gms:play-services-nearby:16.0.0'

あとは、メッセージの受信や接続時のコールバックを書いてあげて接続するだけでよい。

// 接続時の処理を書くval connectionCallback = object: ConnectionLifecycleCallback() { ... }

// メッセージ受信した時の処理を書くval payloadCallback = object: PayloadCallback() { ... }

// トポロジー設定。スター型とクラスター型を選べるval advertisingOptions = AdvertisingOptions.Builder().setStrategy(Strategy.P2P_STAR).build()

 mConnection
    .startAdvertising("hostNickname", "projectId", connectionCallback,  advertiseOptions)
    .addOnSuccessListener { /* 起動成功時の処理 */ }
    .addOnFailureListener { /* 失敗時の処理 */ }

このように便利なAPIだけど、欠点もいくつかある。

まず、たまにメッセージの取りこぼしがある。 メッセージによって状態遷移するようなアプリの場合、何もメッセージが無い時は一定の時間で自動的にデフォルト状態に戻るようにする必要がある。

また、なぜか接続に失敗することがある。 接続が切れたら自動で再接続するようにしたけど、同時エラーが出続けて、最悪の場合は端末を再起動するまで直らなかった。 一度接続してしまえば滅多に切れないので、アプリを起動した時さえ気をつければ大丈夫なんだけどね……。

オフラインで気軽に通信できて面白いので、興味のある人はゲームとか作ってみてください。

Androidについて

今回初めてAndroidアプリを作ったんだけど、Android Studioがメチャクチャ良くできてるし、Kotlinも書きやすかった。

Kotlin、便利ですね。 言語的にはScalaにめっちゃ似てる。case class的な物があったり、コンパニオンオブジェクトがあったり、valとvarの扱いが全く同じだったり。JVM言語だから当然か……。 僕はJavaはほとんど書いたことが無いんだけど、前職でScalaを書いていたので、Kotlinはほぼノーコストで書けた。

あと、Android開発の基本的な事をググると、古のジャバに関する情報や、怪しいSE塾みたいなページがたくさん出てきて困るんだけど、検索ワードに「Kotlin」を入れるだけで、ある程度信頼できる情報が出てくるのも便利だった。

とはいえ、UIはほぼモック画像を貼り付けただけだし、アプリ全体の設計をどうしたら良いか全然わからなかった。 次アプリやるときはその辺ちゃんと勉強したいな〜〜


今回のプロジェクトでは技術スタックは完全に僕に任せられており、短い納期でもいろいろ試行錯誤できたのはチャレンジングでとても楽しかった。 こんな感じでいろんな分野をつまみ食いして技術の幅を広げていけると良いな。

参考URL

Houdiniやってる

$
0
0

最近、HoudiniというCGソフトに入門している。

twitter.com

twitter.com

twitter.com

twitter.com

業務で水のシミュレーションをする機会があったんだけど、どうやらHoudiniって奴を使うと高品質なシミュレーションができそうということで、今月からHoudini入門することになった。 基本的なところ k2に教えてもらいつつ、土日も色々さわって遊んでみている。

感想

あんまり体系的に学んでないけど、特徴としては以下のような感じ。

  • プロシージャルな表現が得意
  • 物理シミュレーションがすごい
  • プログラマーフレンドリー

Houdiniでは、基本的なジオメトリーにノードを繋げていって、動きや形状を操作していく。 ので、ある3Dモデルをグリッドに大量に並べたり、ノイズで動かしたり、更にパーティクルだしたり、みたいな事がボタンポチポチするだけで出来る。

TouchDesignerというリアルタイムパフォーマンス向けソフトがあるが、これは実はHoudiniのforkらしく、基本的な操作がよく似ている。 僕は去年からTouchDesignerをちょいちょい使っていたので、勘で操作したら思い通りに動いてくれてとても助かった。

「Houdiniはプログラマーフレンドリー」ということもよく言われている。 これはスクリプトで頂点やattributeを制御できるというのもあるけど、なんというか、勘ビリティ……勘で操作していい感じに動くっていう所が大きい気がする。 例えば、オブジェクトの位置の入力欄に勘で sin($FF)と入れたらサイン波の動きになったりして、コード書ける人なら適当にいじったら動く。

CG/シミュレーションを学びたい

先日MTRL KYOTOで行われたSPEKTRAのイベントで、ゲストの比嘉さんが「CGを学ぶためにHoudiniを学んだ」と言っていた。 僕も最近まさにCGをちゃんと勉強したいと思っていたので、今回仕事で触らせてもらえてラッキーだと思ってる。

僕はシェーダーからグラフィックスの世界に入って、初歩的なシェーディングやレンダリングパイプラインはなんとなくわかってきたけど、 ゲームCGや、HoudiniやC4Dのようないわゆるプリレンダ系のグラフィックスを見ると、一度ちゃんとグラフィックスを学ばないといけないな~と思っていた所だった。

Houdiniは物理シミュレーションに力を入れていて、水流やパーティクル、炎や煙、布などのリアルなシミュレーションがボタンぽち~で出来る。 別にシミュレーション手法の中身に詳しくなれるわけではないけど、現代のCGのトピックをザッとさらうことができる。 ハリウッドでも使われてる今時のCGってこんな感じなのか~。

公式チュートリアル動画見てると「シニアマセマティシャン」って肩書の人が出てきてビビる。アカデミック~

今回水のシミュレーションを行うにあたって、HoudiniやNVIDIAのライブラリがどういうアルゴリズムを採用してるのか調べていくと、現代の最先端の手法と最新のPCでも、リアルタイムできれいなシミュレーションをするのはまだまだ難しいことがわかってきた。 僕はゲームをやらないので、なんとなく「今時のゲームCGはメチャクチャ高品質だし、リアルタイムシミュレーションもサクサクなんやろな~」と思っていたんだけど、認識の甘さを痛感させられた。 しかし、同時にシミュレーションの世界の奥深さを垣間見ることができて面白かった。

(めっちゃ勉強したらリアルタイムFLIPソルバー実装できないかな……)


なんかオススメのチュートリアルとかあったら教えてください~~

最近読んだ本(ソマリランド、密漁、Go、ファクトフル、水害、ダークウェブ、素数、爺さん)

$
0
0

今年の目標、ブログを書くというのは全然できてないけど、本を読むのは結構うまくいってる。 寒いのでしばらくバス通勤なのと、予定を入れすぎずゆっくりする時間を取るようにしてるのが成功してるのかな。

今年に入って読んだ本は以下。

謎の独立国家ソマリランド

オススメ度: ☆☆☆☆★

Slackで友人が勧めていたので読んでみた。

ソマリアの中にソマリランドという国があって、国際社会からは存在を認められていないけど、戦国状態のソマリアにおいて長いこと平和を維持している、というルポ。 ソマリランドは平和で治安も良いということだけど、海外の同胞からの送金で成り立ってるって書いてあって心配になった。 あと、隣のプントランドは海賊が主産業であり、外国からの身代金で経済を回しているらしく、「現代でも海賊ってあるんだなあ〜」と関心しつつ、そういうノリでまだ破綻していないっていうのが不思議な感じする。

あと生きてるうちに1回くらいカートをやってみたくなる。

サカナとヤクザ

オススメ度: ☆☆☆☆☆

東北、築地、銚子、北海道、九州と、日本全国に蔓延る密漁の実態を探ったルポ。 「日本のアワビの45%が密漁」など、データだけでもかなりパンチがあるけど、他にも銚子のヤクザと共産党員の対立とか、北海道の密漁はソ連との二重スパイも担っていたとか、戦後日本の歴史ドラマがふんだんに盛り込まれてて面白かった。

この本を読んでから、魚を食べるたびに「これも密漁なんだろうな……」と思ってしまう。

みんなのGo言語

みんなのGo言語【現場で使える実践テクニック】

みんなのGo言語【現場で使える実践テクニック】

オススメ度: ☆☆☆☆★

唯一の技術書…… VEDA for VSCodeでGo言語をやる必要があったので購入。 意外ともう2年以上前の本になるけど、その時点での要所が簡潔にまとまってて良かった。

Go,前職で4行くらいだけ書いて「いい言語だなー」って思ってたんだけど、やっぱりWeb出身のプログラマーにはめっちゃ触りやすいな。

ファクトフルネス

FACTFULNESS(ファクトフルネス) 10の思い込みを乗り越え、データを基に世界を正しく見る習慣

FACTFULNESS(ファクトフルネス) 10の思い込みを乗り越え、データを基に世界を正しく見る習慣

オススメ度: ☆☆☆☆☆

ベストセラー。 洋の東西を問わず、ほとんどの人は「世界は悪くなっている」「格差は無くならない」などと考えてしまう傾向があるが、実は良くなってる!ちゃんとデータを見て考えよう!騙されないようにしよう!という本。

人口について、僕は日本で生活していて「少子化困ったな、人増えないかな〜」って思っていたんだけど、本書では「子供が減っていて、一人あたりの教育にリソースが割ける!人口爆発も止まる!最高!」みたいな感じで、そりゃ地球規模で考えたらそうなるか〜となった。

文章がかなり易しいのでサクサク読める。 翻訳がchibicodeさんなの、あとがきを読んで気付いた。

ドキュメント豪雨災害

オススメ度: ☆☆☆★★

業務で水害について調べる必要があったので読んだ。 「2階で避難していたら外からバンバン叩く音が聞こえたので窓の外を見たら、水に流されそうな人が助けを求めて家を叩いてる音だったんだけど、水圧でドアが開かなくて入れてあげられない」とか、とにかく被災者のコメントが滅茶苦茶怖い。 あと東京の江東デルタは地盤沈下のせいで海抜がマイナスの場所が多いけど、住民にはあまり知られていない、とか。

日本沈没

日本水没 (朝日新書)

日本水没 (朝日新書)

オススメ度: ☆☆★★★

災害シリーズ。 めっちゃデータが羅列されてる割に出典が全く示されていないのが不思議。 その辺気にしない人向けに書いてるんかな……。

ダークウェブアンダーグラウンド

オススメ度: ☆☆☆☆★

ダークウェブにおける犯罪、カウンターカルチャー新反動主義の歴史をザクッと解説した本。 この本に興味あるのインターネットフレンズだけだろうな〜と思ってたけど、このまえ丸善行ったら話題の書籍コーナーに沢山おいてあってびっくりした。

僕は常々グーグルあたりが太平洋上に人工島建てて超リベラル実験国家つくってくれないかな〜って思ってたんだけど、既に計画を進めてる人たちがおり、しかもピーターティール率いる新反動主義勢力がやっているという事を知って驚いた。西に向かい続けたアメリカ人が閉塞感を打破するために太平洋にExitしようというのは自然な展開だよなあ。

https://www.seasteading.org/

めちゃくちゃ面白いけどちょっと暗い気持ちになるので星4つ。

素数の音楽

素数の音楽 (新潮文庫)

素数の音楽 (新潮文庫)

オススメ度: ☆☆☆☆★

未解決のリーマン予想を巡って、百年以上もの間、多くの数学者が人生を捧げてきた歴史を綴った本。 休日に出町座でなんとなく購入したらめちゃくちゃ面白くて一気に読んでしまった。

リーマン予想や数学的な内容については全然わからなかったけど、数学者のエピソードが面白いのでサクサク読めると思う。 昔から、偉大な数学者には異常者が多いことがわかる……。

めちゃくちゃ面白いけど長い(600ページ!)ので星4つ。

道をひらく

道をひらく

道をひらく

オススメ度: ☆★★★★

全ページ「がんばろう」って書いてあった。

今読んでる本

今は以下の本をカバンとkindleに入れてパラパラ読んでます。

  • 失敗の本質
  • いつも時間がないあなたへ
  • 錯乱のニューヨーク

何かオススメあったら教えてください。

痛みを忘れさせる装置

$
0
0
  • たまにテレビつけると陰惨なニュースを大量に見せられて気が滅入る
    • Twitterはてブ見てるだけでも、この世には問題だらけだということがわかるのに
  • 怒りは得てして時間とともにエネルギーを失う
    • 不祥事や炎上は解決をみずに忘れられる事が多い
  • この世には対処すべき問題が多すぎる
  • 対処できない問題や不正義は忘れるしかない事もある
  • ニュースなどのメディアは、雑多な情報を脳に浴びせて、古い記憶を忘れさせるための麻酔装置として機能しているのではないか
    • 情報の質はどうでもいい、あるいは忘れたい記憶と似た形状の、似た刺激を呼び起こすもののほうがいいのかもしれない(似た形状の情報であるほど、脳内の、忘れたい記憶のある場所にすっぽりはまって、選択的に効率的に痛みを緩和できるのかもしれない)
  • そうして人は、悲劇を忘れるために悲劇を求める

最近ブクマじゃなくてスター付ける事が多くなった

$
0
0

はてなブログブコメ付けるより、スター付けることの方が多くなってきた。

  • 議論を呼ぶタイプの記事において、ブコメが一つの意見に極端に寄っている場合、コメントを付けることで不要な諍いを生みそうだな、と萎縮してしまうことがある
    • 過激なコメントにスターが集まり、ブコメ一覧の雰囲気が一つに染まってしまうケースが多々ある
    • 僕は、はてブはあくまで情報整理 + SNSシェアツールとして利用しているので、炎上やrantには加わりたくない
  • 知り合いの記事にはブコメよりスターのほうがしっくり来る場合がある
    • 「あなたの記事、良かったよ」という気持ちを、無言ブクマに埋もれないように伝えたい
    • リアル知り合いかつはてなブログユーザーが多いので、身内ブクマで互助会となるのを避けたい、というのもある

DOMMUNEでライブコーディングVJした

$
0
0

3/21(木)、DOMMUNEでVJしました。 僕は自作のVJシステムVEDAを使って、GLSLのライブコーディングを行いました。

目次

出演の経緯

www.dommune.com

DOMMUNEは言わずと知れた映像配信メディア。 大学生の頃から観ていたので、自分が出演できることになるとは……

収録は恵比寿駅から徒歩20分のDOMMUNEのスタジオで行われた。 高級マンション街に急にクラブっぽい文化が現れて不思議な感じだった。

今回のイベントは、日本のオーディオビジュアル集団BRDGと、中国の音楽レーベルFunctionLabのコラボ企画だ。 BRDGは主に東京でイベントを開催してるんだけど、これまでに何度か中国遠征をしている。 今回は中国ツアーの締めくくりとして、FunctionLabのメンバーと共にDOMMUNEでライブすることになった。

僕のVJについて

僕はUnityやTouchDesignerを使ってVJすることもあるけど、今回は「ライブコーディングしてくれ」というオーダーがあったので、自作のVJシステムであるVEDAを使うことにした。

VEDAはGLSLでライブコーディングVJをするためのAtomパッケージだ。 僕は昨年の東京Node学園祭やAlgoraveなど、数々のイベントでVEDAを使用してVJしてきた。

blog.gmork.in

DOMMUNEでは、DJを写したカメラの映像に、VJの映像を合成して配信する。 VJの映像は黒抜きで合成するため、映像を黒メインで作っておくと効果的、とのことだった。

「ライブコーディングっぽさ」「黒メイン」を考えた結果、僕の作戦は以下のようになった。

  • 素材は基本モノトーンで作っておく
  • 色収差やカラーリマッピングなどのエフェクトで色を乗せる
  • ライブコーディングで座標変換や変形を行う

GLSLでのVJというと、レイマーチングによる3D表現を行う人が多いけど、僕はあまりレイマーチングに慣れていないのと、シンプルな絵面を目指したので、今回はレイマーチングの採用を見送ってオール2Dで表現することにした。

VJの反省としては、ネタをシンプルに寄せすぎてしまったな〜というのがある。 DJがミニマルな感じだったので上手いことマッチして助かった……。 次に向けて、もっとバキバキした絵を出せるような仕組みも持ちネタとして作っておきたい。

あと、ライブコーディング成分をもっと出せると良かったな。 事前のトラブルとかで緊張してしまい、簡単な座標変換くらいしか出来なかった。

システム/機材

VJに使用したGLSLのコードは以下で公開している。

github.com

今回はVEDAの本体にも手をいれており、そのままでは動かせない。 というのも、VEDAが依存しているAtomパッケージに不満が生じ、やっつけで自前実装しているからだ。 具体的には、glslifyというGLSLバンドラーが重いので、単純に #includeでファイルを連結できるようにした。 また、#include使用時にエラーが正しく表示されるよう、linterも自分で実装している。

この辺の修正をリリースするかどうかはまだ迷っている。 できるだけ既存のエコシステムには乗っかりたいという気持ちもあるので……。

使用した機材はnanoKontrol2とLaunchpad Mini。 シーンのフェードイン/アウトにnanoKontrolを、エフェクトやシーンの切り替えにはLaunchpad Miniを使用した。 以前からLaunchpadのMIDI信号をOSCに変換するスクリプトをNode.jsで作って愛用してきたんだけど、今回はよりリズミカルに制御しつつテンポの変更にも対応できるよう、シーケンサー/タップテンポ機能を追加した。

github.com

リズムにあわせて一番右下のボタンを押すとループが始まる。 あとは記録ボタンを押しながら適当にボタンを押すと、演奏内容を記録してループしてくれる。 こんな感じ↓

launchpad mini + nanoKontrol2の組み合わせ、かさばらなくて助かってるけど、ボタンの押しづらさとかフェーダーの固さでちょっと不満が出てきたな。 オススメのVJ用MIDIコンあったら教えてください > VJ各位

KORG USB MIDIコントローラー NANO KONTROL2 ナノコントロール2 ブラック

KORG USB MIDIコントローラー NANO KONTROL2 ナノコントロール2 ブラック

Novation パフォーマンスコントローラ Launchpad Mini MK2

Novation パフォーマンスコントローラ Launchpad Mini MK2


自分のVJがリアルタイムで配信されるのは初めてでメッチャ緊張したけどすごく楽しかった!!! 妻が京都の家から観てくれてたりして、不思議な感覚だった。

観てくれた皆様、ありがとうございました!!

σo

$
0
0

月並だが、

怖い事、悲しいこと、嫌なこと、苦しいこと、ストレス、を構成する出来事と記憶、記憶から感情を演繹するための回路、がいつか短絡してしまい、正しい、と我々が今思っている論理、認識、それと感情、を永遠に失ってしまうイベントというのが低確率ではあるが誰にでも実装されていて、なにかの拍子に、例えば事故、薬、老化、あるいはたった一度、いつもの悲しい夜のたった一瞬「論理はもういいや」という事を思ってしまった事が原因で、ほんの一度世界を全否定してしまうだけで、回路が閉じてしまい、もう二度と正しい感情を生み出せない、視界には光の輪が、耳元では天使の囀りが、家には知らない同居人がいて、あなたは何度1+1を試しても3になってしまう、そんな日がいつか来るかもしれない

というのを子供の頃から恐れている。

Unityで透明なオブジェクトにDepth of Fieldが効かない時の対処法

$
0
0

PostProcessingStack、便利ですよね~。 僕はUnity新しいプロジェクト始めるとき、大抵最初にMain Cameraにセットして、Bloom、Depth of Field (DoF)、色収差ビネット、ACESトーンマップを有効にしてます。

ただ、最近の案件で、透過画像のスプライトにDoFが効かないという現象に出くわして苦労しました。 なんとか対処したので、対処法を書いておきます。

半透明部分の表示がおかしいなど、完全な解決策ではないので、詳しい方はぜひ教えてください~

問題のシーン

今回問題になるのは、このような半透明部分を含んだ透過png画像です。
表面の光沢も表現したいので、Standardマテリアルで Renderting ModeをFadeにしてみます。
この状態でシーンに配置してみましょう。

f:id:amagitakayosi:20190509172909p:plain

うーん、ピントが合わない……

シーン上には、キューブと半透明のスプライトを等間隔に並べています。
左のキューブにはフォーカスが当たっていますが、右側のスプライトは全てボヤケてしまっています。

f:id:amagitakayosi:20190509142123p:plain

半透明な部分がない画像の場合、StandardマテリアルでRendering ModeをCutoutにしてしまえばピントが合うのですが、今回のような画像だと半透明の部分が消えてしまいます。

f:id:amagitakayosi:20190509143535p:plain

Transparentなオブジェクトはデプスを書き込まない

unity transparent dofでググってみると、PostProsessingStackのissueが見つかりました。

github.com

Transparentなオブジェクトはデプスバッファに書き込まないため、デプスを利用するDoFでは無視されてしまう。 なので、明示的にデプスを書いてあげれば良いようです。

また、このissueでは、デプスを書き込むシェーダーのサンプルが紹介されています。

Dummy transparent shader that writes to depth (per request) · GitHub

シェーダーを読んで見ると、どうやら Tags { "LightMode"="ShadowCaster" }なPassを追加し、フラグメントシェーダー内で SHADOW_CASTER_FRAGMENT(i)を呼んでやれば、デプスバッファに書き込めるみたいです。

ShadowCasterのシェーダーは名前の通り影の計算に用いられますが、デプスバッファにも反映されます。

さっそく問題のスプライトでもやってみましょう。 シェーダーを Create > Shader > Standard Surface Shaderから作成し、ShadowCasterのSubShaderを追加して、スプライトのマテリアルに指定します。

SubShader
{
    Pass
    {
        Name "ShadowCaster"
        Tags { "LightMode"="ShadowCaster" }

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #pragma multi_compile_shadowcaster
        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
        };

        struct v2f {
            V2F_SHADOW_CASTER;
            float2 uv : TEXCOORD1;
        };

        sampler2D _MainTex;
        float4 _MainTex_ST;
        float _Cutout;

        v2f vert(appdata v)
        {
            v2f o;
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            TRANSFER_SHADOW_CASTER(o)
            return o;
        }

        float4 frag( v2f i ) : COLOR
        {
            fixed4 texcol = tex2D( _MainTex, i.uv );
            if (texcol.a < _Cutout)
            {
                discard;
                }
            SHADOW_CASTER_FRAGMENT(i)
        }
        ENDCG
    }
}

実行!

f:id:amagitakayosi:20190509172400p:plain

あれー

不透明な部分だけデプスバッファに書きこむ

どうやら、半透明な部分もデプスが書き込まれ、黒として描画されてしまったようです。

仕方ないので、半透明な部分にピントを合わせるのを諦め、ShadowCasterのPassではdiscardするようにします。
幸い、今回の画像で半透明な部分はドロップシャドウだけなので、ボヤケててもあまり気にならないはず……

float4 frag( v2f i ) : COLOR
{
    fixed4 texcol = tex2D( _MainTex, i.uv );
    if (texcol.a < _Cutout)
    {
        discard;
    }
    SHADOW_CASTER_FRAGMENT(i)
}

終結

f:id:amagitakayosi:20190509144038p:plain

やったー

よく見ると半透明部分の描画がおかしいけど、許容範囲ということで……

f:id:amagitakayosi:20190509174757p:plain

まとめ

必要な手順をまとめると以下のとおりです:

  • カメラをDeferredにする
  • シェーダーに ShadowCasterのパスを追加
  • 画像のアルファ値によって、透明部分をdiscardする

今回作ったSurfaceシェーダーはこちらに置いておきます。

https://gist.github.com/fand/31bcfa5cd9008a270efb628503200871

もっと良いやり方知ってる人教えてください、頼む!!!!!!

開発と制作のバランス

$
0
0

最近、開発と学習ばかりで、制作できていない

  • 開発と制作
    • 制作: 作品をつくること(映像、Webサイト、インスタレーション、デモ等)
    • 開発: 制作のためのツール開発、および技術の習得
  • 開発をすると制作の効率があがる
    • 制作に100%の時間を費やすより、開発と制作で50%ずつのリソースを割り振る方が、トータルでの成果は大きくなる
  • 制作は楽しい
    • 細部に拘れば拘るほど楽しい
    • 気づいたら時間が大量に溶けてしまう
  • 開発も楽しい
    • 制作と同じく、気づいたら時間が大量に溶けてしまう
    • しかし、「開発をすればするほど制作効率があがる」という大義名分がある
  • 開発にハマった人間は制作を疎かにしがち
    • 制作に時間を費やすことが恐ろしくなる
      • 木こりの寓話
      • 自分は斧を研ぐことをサボっているのではないか?

俺は開発ばかりして、まともに制作をしないまま一生を終えることになるのではないか?という恐怖がある

Webエンジニアがクリエイティブ系企業に転職して一年が経った

$
0
0

1年働いて見えてきた、業種の違い、エンジニアとしての生き方の違いをまとめてみる。

誰?

  • 天城孝義 (id:amagitakayosi)
  • 男 29歳 既婚 京都在住
  • 好きなメタル: Djent

クリエイティブ系って何やねん

この記事では、1→10やチームラボ、ライゾマティクスのような、技術やアート、デザイン、エンターテイメントを扱う会社のことを「クリエイティブ系」と呼びます。

なんか鼻につくというか、他の仕事がクリエイティブじゃないとでも思ってるの?みたいな印象を受ける人もいるかもしれない。 ただ、実際に「クリエイティブ系」という呼び方は業界ではよく使われるので、この記事のタイトルでも採用しました。

他の呼び方も考えたけど、「広告系」だとアドテクと紛らわしいし、「制作会社」だと何を制作する会社なのかわからない。 もっと良い呼び方があればいいんだけど……。

前職: Webサービスの会社

新卒で某Webサービスの会社に入社して、3年ほどWebエンジニアとして働いていた。

「Webエンジニア」と言っても事業会社のエンジニアと受託系とは別物だが、この会社は前者。 どのサービスも2〜3年は継続する前提で動いており、エンジニアは半年から長ければ2,3年同じチームに携わることになる。 そのかわり、技術スタックの選定はチームのエンジニアに任されていた。 運営中のサービスに新しい技術を取り入れることは可能だし、会社としても(適切な範囲で)新技術の導入を推奨していた。

チーム当たりの人数は、エンジニア5,6人、デザイナー1,2人程度。 僕は勝手にフロントエンドエンジニアを名乗っていたけど、エンジニアにフロント/バックエンドの区別はなく、チームメンバー全員がどのタスクも引き受ける、という体制だった。 (インフラだけは別で、インフラチームから個々のプロジェクトにインフラエンジニアがアサインされていた)

僕は仕事の内容に不満はなかったけど、趣味で始めたグラフィックスプログラミングや映像が楽しくなってきて、どうせなら20代のうちに新しい仕事をしてみたい、ということで転職することにした。

現職: 1→10, inc.

1→10(ワントゥーテン。以下「1→10」と呼ぶ)は京都発のクリエイティブスタジオ。 受託Web制作から映像、製品のプロトタイプ、ゲーム制作まで、業態は多岐にわたる。 僕はゲームやインスタレーションを制作する部署のプログラマーとして採用された。

オフィスは東京と京都の2箇所にある。 部署で分かれているわけではないが、個人的には東京都京都でかなり雰囲気が違うな〜と感じている。 東京のほうが広告っぽいというか、ガッツがあるというか。 京都のほうは、各自が自由にそれぞれの仕事に打ち込んでいて、大学の研究室に近い雰囲気がある。

従業員数は現在、全体で180人程度。 プロジェクト当たりの人数は、僕が経験した限りだと、エンジニアが1〜3人、デザイナーが1人程度の場合が多い。 かなり少ないと思われるかもしれないが、案件のサイクルが早いこともあり、プロジェクトが動きだした後にチーム人数が足りないと感じることはあまり無い。

友人に会社の働き方を聞かれたときは、よく「フリーランスのギルドみたいな感じ」と説明している。 プロジェクトにアサインされるメンバーは毎回全然違っていて、会ったこともない東京のメンバーと一緒に開発する、なんてのもしょっちゅうだ。 もちろん、営業の人がバンバン仕事を取ってくれて、事務手続きも総務の方々がやってくれるので、いちエンジニアとしては実際にフリーランスで活動するよりもずっと楽に働けているはず。 (僕はフリーランス経験がないので、想像だけど)

そんな感じなので、技術の選択に関しては、クライアントから指定がある場合を除いて、ほぼ完全にチームメンバーに一任される。 特に受託案件でエンジニアが一人の場合は、モノさえできればほとんど何をやってもよい。 もちろん、他の人に引き継ぎもできて、会社の技術領域の拡大につなげられる、という前提ではある。

入社してからやったこと

去年6月に入社してから携わったプロジェクトは以下の通り。

時期 案件 使用した技術
2018年6月 受託 水族館のインスタレーション Unity
2018年8月 ~ 2018年12月 自社 ミニゲーム 3本 Unity
2018年9月 ~ 2018年10月 受託 Webサービスリニューアル Three.js
2019年1月 受託 音声認識Androidアプリ Kotlin
2019年4月 受託 TV番組用CG制作 Unity
2019年2月 ~ 進行中 受託 VRコンテンツ Unity, Houdini
2019年5月 ~ 進行中 自社 iOSアプリ 進行中 Swift

Three.js以外は、入社するまで未経験だったツール/技術をつかって開発している。 これは、僕が新しい事を学べそうな案件を狙ってアサインしてもらってるのもあるが、会社の性質として案件の期間が短く、扱う技術の範囲が広いため、「広く浅く速く」回すスキルが求められるという事なんだと思っている(後述する)。

振り返ってみて感じたこと

ヾ(。>﹏<。)ノ゙

前職との比較や、一年働いてみてわかったことを書いてみる。

従業員の多様性

前職では、良くも悪くも同質性の高い人間が集まっていた。 採用のハードルも高く、会社のカルチャーにマッチする人を慎重に選んだ結果、非常に優秀な人が集まりつつ、どうしても「ザ・エンジニア」といった趣味趣向を持った人が集まってしまう。 なんか独特なオーラがあったり……

もちろん同質性が高いからといって悪いわけではなく、前提知識を共有する手間が省けたり、技術的な興味も近いので、社内での知見共有もしやすいという利点がある。 技術的な内容だけではなく、チームビルディングやプロジェクト管理に対する意識も高いので、少なくともワークフローを常に改善しつづけようという共通認識を得やすい。

ただし、長い間その中にいると、そのうち極度に会話が簡略化されていき、「nrhd」「h」「j」とかで会話をするようになる…… あと、これはWeb系の全体が抱える問題なんだけど、男女比が極端に偏っている!!!

一方、1→10では扱うスキルが多いこともあり、様々なバックエンドを持った人が集まっている。 過去の職歴を聞いてみると、SEやWeb制作会社だけでなく、ゲーム、おもちゃ、広告代理店、映像、建設会社など、皆バラバラの業界からバラバラのスキルを持って入ってきている。 そういった話を聞くだけでも刺激になって面白いし、実際それぞれの知見があるおかげで仕事が回っている。

ただ僕は長い間インターネット大好きコミュニティに浸かりすぎたので、リアルでのコミュニケーションに手こずっていたりはする。 前日にTwitterで盛り上がった話題について、チームのMTGで嬉々として話したら「へ〜」という反応だったりした。 世の中の人はインターネット上の炎上に詳しくない……!

案件のサイクル

現職は前職と比べると、案件の規模、とくに期間が短い。 1年以上続く案件もあるにはあるが、大抵の案件は開発期間が2,3ヶ月、長くても半年くらいのプロジェクトになる。 また、「待ち時間」が多々発生するため、エンジニアやデザイナーは複数のプロジェクトを並行して進める事が多い。

これは、弊社が受託Web会社としてスタートした事が大きく影響していると思う。 今は自社開発の割合も増えてきているけど、いきなり長期間がっつり開発リソースを確保するのも難しく、リソースの管理は受託案件に引きずられる事になる。

最初は落ち着かなかったけど、最近はペースが掴めてきて、これはこれでエンジニアとしては良いと感じるようになった。 入社後1ヶ月で納品の案件にアサインされたときはビビったけど、短いスパンで案件を回すことで、会社の雰囲気や仕事のおおまかな流れが掴めてきた。 コミュ障でも強制的にいろんな人と話せるし、上手くいけば、いろんな技術を短期間で身につけることもできる。 (念の為書いておくけど、この案件は決して無茶なスケジュールではなかった)

ただし、案件ごとに実際のワークフローは異なるんだけど、案件が終わるたびにチームを再編成することになるので、段階的にワークフローを改善する、といった事が難しいというデメリットもある。

いろんな技術を広く浅く触れる

1→10では扱う技術の幅が広い。 エンジニアの場合、Web系の技術やUnity/UE4といったゲーム系の技術に加えて、インスタレーションやプロトタイピングでセンサーを扱うための低レイヤーの知識も必要になる。 デザイナーの場合も、Webデザイナーやグラフィックデザイナーだけでなく、映像を作る人や、製品に用いるパーツを3Dプリンターで作ったりもする。 他にも機械学習系の案件を得意とする人や、イベント会場の設営/施工を担当するスタッフまでいる。

こうした状況は、いろんなバックグラウンドを持った人が集まることで成り立っている。 かつてソフトウェア会社、映像会社、施工会社など、異なる分野の専門家として働いてきた人々が協力することで、なんとか広い分野をカバーできているようだ。

(余談だが、弊社だけではなく、いわゆるクリエイティブ系の人たちと交流していると、元Flashエンジニアの姿を見かけることが多い。 かつてFlash全盛の時代に活躍していたエンジニア達は、現在はそれぞれ別々の技術を身に着け、別々の分野で活躍しているようだ。)

ただ、それぞれの領域に特化したメンバーがいるとはいえ、案件には別のメンバーがアサインされることが多い。 例えば、現在開発中のiOSアプリは、iOSの得意なエンジニア1人 + そうでもないエンジニア2人、という体制で回している。 そのため、いちエンジニアとしては、知らない技術を仕事で使う機会が増えることになる。

エンジニアが実際にどういう案件にアサインされるかは、所属部署や本人の希望、スキルセットによってかなり変わってくる。 ほぼUnity一本の人もいるし、自社開発のシステムに時間をかけてじっくり取り組みたい、という人はずっとそれを担当していたりもする。 僕の場合は、なるべく知らない技術を使えそうな案件を狙ってアサインしてもらってたのもあるけど、自社コンテンツが多くスケジュールが調整しやすい部署に入ったおかげもあって、それなりに短期間でいろんな案件を経験できた。

自分の武器は自分で作らないといけない

短期間でいろんな技術を使うのは当然良いことばかりではなくて、一つ一つの技術を深く学ぶことや、キャリアプランを考えるのが難しいという問題がある。

あんまり多くの技術に手を出したり、小規模な開発だけを続けていると、なかなか一つの技術について体系的に学ぶ事ができない。 いわゆる「赤魔道士」のような状況だ。 もちろん案件を回していくうちに個々人の開発スキルは向上するんだけど、部署内でベストプラクティスを共有したり、チーム開発を行うスキルを身につけるのは難しい。 例えば、もし弊社のエンジニアが業務で得たUnityスキルだけを持ってゲーム会社に転職し、5年規模のプロジェクトの立ち上げに参加して、いきなりバリバリ開発できるかというと、最初のうちはかなり大変になると思う。

いろんな技術を「広く浅く」、かつ「速く」回すスキルというのは、それ自体が特殊なスキルで、クリエイティブ系の業界では特に重宝されるだろう。 しかし、いちエンジニアとして将来のキャリアを考えると、自分の武器と呼べるようなスキルを増やしていきたい。

そんなわけで、自分のキャリアを考えた上でどんな技術にベットするか、各自が自分でプランを立てて行動する必要がある。

僕が最近Houdiniを学んでいたのも、案件で使うという理由もあるけど、そういう観点から次に学ぶべき技術を考えた時、最も合理的だと判断したからだ。 Unityでゲームや映像を作れるようにはなったけど、3Dグラフィックを根本から学び、かつコンテンツを一から制作できるようになるには、何かしらDCCツール(BlenderやMaya等、3Dアセットを制作するツール)を身につけた方が良いと思った。 その中で一番応用が効き、かつプログラマーとしての能力が活かせそうなのがHoudiniだった。

ジェネラリストを目指すのは難しい

入社した当時、インスタレーションの開発から設営まで一通り出来るようになるのを目標に設定したんだけど、これはかなり難しい事が段々わかってきた。 映像や3Dモデリング周りの知見は片手間で身につくものではなく、それこそプログラミング言語を1つ、業務で使えるレベルで覚えるくらいの労力が必要だ。 また、インスタレーションなどの現場設営のスキルは、身につけようと思っても手を出す事が難しい。 なぜなら片手間でやると人が死ぬから……。

案件ごとに必要になるスキルセットも全然違っていて、「これとこれを覚えればどの案件も大丈夫」というような、標準となるスタックがない。 必要になりそうな技術を先手を打って学ぶのは難しく、案件にアサインされた時、その案件に必要な技術を調査し、最低限の時間で身につける、というスキルが大事になる。

せめて自分が経験したことをTipsとして残しておいて、他のメンバーが同じ道を通るときにスムーズに開発に入れるよう、部内の知見をScrapboxにまとめる活動をしている。

仕事に波がある / 働き方は自由

この辺はWeb系とクリエイティブ系との違いというより、自社事業と受託メインの違いなのかもしれないが、弊社では仕事の忙しさの波がとても大きい。

僕のいる部署では、年末からGWにかけてはイベントが多いため、受託の案件が集中する。 反対に、夏から秋にかけてはクライアントワークの締切に追われることが少なくなり、空いた時間で自社開発のシステムやコンテンツの制作を進める事になる。

案件単位でも忙しさの波があり、特にイベント系の仕事の場合、締切間際はどうしても忙しくなる。 これは単なる見積もりやスケジュールの問題ではなくて、現地調整や設営があるからだ。 イベント会場での設営は、多くの場合は施設の営業終了後、つまり深夜に作業をする必要がある。 場合によっては、その後さらにコンテンツの最終調整が入ることもある。

このように、忙しさや働く時間にバラツキがあるせいか、働き方やオフィス環境には個人にかなり裁量が与えられている。 うちの部署では、本社オフィス以外にも大きな機材を集めたアトリエがあるのだけど、必要に応じてどちらで作業するかは個々人の裁量に任せられている。 他にも、何らかの理由でリモートで作業したりだとか、時間をずらして働いている人も普通にいる。

この辺の事情は、あまり赤裸々にして会社ごとの違いを比較できるものではないけど、僕個人の肌感だと、大抵のWeb系よりは自由だろうな〜、と感じる。

僕はなるべく定時より早く来て早く帰るようにしていたり、自分のデスクに勝手にパーティションを作って作業していたりする。 あと、この秋に子供が生まれるのだけど、男性でもちゃんと育休を取れそうで安心している。


そんなこんなで、課題感もありつつ、今のところ楽しくやれています。 もし、この記事で1→10に興味を持ってくれた人がいたら、応募してくれると嬉しいです。

www.1-10.com

Viewing all 186 articles
Browse latest View live