こんにちは天城です。 縁あって、YOKOITO INC. のWebサイトリニューアルのお手伝いをしました。
僕はトップページのWebGLアニメーションを実装しました。 他にもJSちょっと弄ったり、OGP設定したりした。
YOKOITO Inc. について
YOKOITO Inc. は、いわゆるFab系の京都のベンチャー企業です。 3Dプリンタの販売や関連サービスを提供したり、Autodesk製CADツールのワークショップを開催したりしている。
京都の伝統産業である西陣織の職人の方と組んで、機織りの部品を3Dプリントで作ったりもしてたみたい。
東京・京都で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:
裏側はWordPress。 WordPress部分は僕はほとんど触っていないんだけど、やっぱ良く出来てるな〜って感動した。 良く出来てるというか……なんかこう……世界中の人々が頑張って仕事をやっている……
感想
僕はずっとWebサービスの会社にいたんだけど、今回はじめて、いわゆる「Web屋」っぽい仕事をした事になる。 規模はとても小さい仕事だけど、Three.jsやSVG Animation、WordPressを「仕事で触ったことがあります」と言えるようになったのは、とても良い経験ができた、と思っている。
また、デザイナーやディレクターと意見交換しながら進めたら、結構時間がかかってしまったのも印象的だった。 前職でWebサービスを開発してた時は、根本的なUXについてはデザイナーとエンジニア間で意見をすり合わせて実装を始めるが、最終的なルック&フィールは、機能の実装完了後にデザイナーが調整することができた。 WebGLの場合、実装とビジュアルが密接に結びついているので、うかつに実装を初めてしまうと、エンジニア→デザイナー→エンジニア……みたいな調整の無限ループが発生することになる。
まあそれはそれで楽しいんだけどね。
もしこの記事を読んで興味を持ってくれた方、WebGLを利用した面白Webサイトを作りたい！という方がいらっしゃれば、ぜひ声をかけてください〜
天城孝義 (@amagitakayosi)
