月 の 上

YOKOITO INC.のWebサイトリニューアルを手伝いました

f:id:amagitakayosi:20180721171934p:plain

yokoito.co.jp

こんにちは天城です。 縁あって、YOKOITO INC. のWebサイトリニューアルのお手伝いをしました。

僕はトップページのWebGLアニメーションを実装しました。 他にもJSちょっと弄ったり、OGP設定したりした。


YOKOITO Inc. について

YOKOITO Inc. は、いわゆるFab系の京都のベンチャー企業です。 3Dプリンタの販売や関連サービスを提供したり、Autodesk製CADツールのワークショップを開催したりしている。

京都の伝統産業である西陣織の職人の方と組んで、機織りの部品を3Dプリントで作ったりもしてたみたい。

yokoito.co.jp

東京・京都でFab系に興味のある方はぜひチェックしてみてください!

実装について

Three.jsです。 TubeBufferGeometryでガガガっと球やウニャウニャを作ってる。 あと携帯だとデバイスの傾きを取得してグルグル回ったりする。

Three.js、関連ツールが現代のフロントエンド開発に全く追いついてなくてメッチャ厳しい。 ちょっと凝った事しようとすると、ES3時代かな?みたいなコードを書くことになる。

とはいえ、WebGL系のライブラリだとThree.jsがデファクトなんだよな。 Three.js最高!!はやくWebGL2対応PRをマージしてくれ!!!!! いま見に行ったらGLSL ES 3.0対応のPRがマージされてた!!!!!最高!!!!!うおおおおおおおおお!!!!!

https://github.com/mrdoob/three.js/pull/13717:

裏側はWordPressWordPress部分は僕はほとんど触っていないんだけど、やっぱ良く出来てるな〜って感動した。 良く出来てるというか……なんかこう……世界中の人々が頑張って仕事をやっている……

感想

僕はずっとWebサービスの会社にいたんだけど、今回はじめて、いわゆる「Web屋」っぽい仕事をした事になる。 規模はとても小さい仕事だけど、Three.jsやSVG Animation、WordPressを「仕事で触ったことがあります」と言えるようになったのは、とても良い経験ができた、と思っている。

また、デザイナーやディレクターと意見交換しながら進めたら、結構時間がかかってしまったのも印象的だった。 前職でWebサービスを開発してた時は、根本的なUXについてはデザイナーとエンジニア間で意見をすり合わせて実装を始めるが、最終的なルック&フィールは、機能の実装完了後にデザイナーが調整することができた。 WebGLの場合、実装とビジュアルが密接に結びついているので、うかつに実装を初めてしまうと、エンジニア→デザイナー→エンジニア……みたいな調整の無限ループが発生することになる。

まあそれはそれで楽しいんだけどね。


もしこの記事を読んで興味を持ってくれた方、WebGLを利用した面白Webサイトを作りたい!という方がいらっしゃれば、ぜひ声をかけてください〜

天城孝義 (@amagitakayosi)

Unityで縁をボカすだけのアセット作った

https://user-images.githubusercontent.com/1403842/42360534-5743042c-8124-11e8-940f-9ddc4eb040b0.gif

Unityアプリをプロジェクタで投影する際、画面を丸くボカしたいことって良くありますよね……? 画像とかシェーダーでマスク作ったは良いものの、現場で投影してみると微妙で、パラメータ変えてビルドして、NGが出てまたビルドして……みたいな経験ある方もいるのでは無いでしょうか。

という訳で、現場でキー操作だけで見え方を調整できるアセットをつくりました。 一度設定を変更したら、再起動後も自動でロードされます。

github.com

使い方はREADMEに書いてあるとおりです。

実装でやった事としては、シェーダー書いて、PlayerPrefsで設定を保存して、テスト書いた、くらい。 Uniyのテスト、公式のドキュメントだけで書けるようになるのはだいぶ厳しいので、もうちょいまとまった情報がほしい気がする……

Unity歴1ヶ月だけどまだまだ全然分かってないので、「PlayerPrefsの使い方はこう」とか「キーの選びかたおかしくない?」「テストもっといい書き方あるよ」等々、マサカリお待ちしてます!!!!!!!