どうも、ヒガです。
フロントエンドエンジニアとして働いています。まあ、飽きますよね。技術への飽くなき探究心ってほどではないですが、新しいものに触れ続けなくては死んでしまう病というものがあると思います。僕もいつのころからか、そんな病にかかってしまったのかと。
ここ数年のフロントエンドといえば嵐のような時代でした。次々と新しい仕様になり、さまざまなフレームワークが台頭し、5年前とはまったく違った世界になった気がします。僕はどちらかというと取り残され気味で、やっと少し追いつてきたかなというところです。もちろんそれはそれで楽しいのですが、結局アウトプットするものに大きな違いがあるのかというと、そうでもないと感じています。
カラカラに乾いたこの喉を潤すにはもはやフロントエンドだけでは足りなくなってきているのです。過去はデザイナーだったし、次はバックエンドエンジニアというのもあるのですが、少なからず触れてきてはいます。もはやWebという世界から離れた技術に手を伸ばさなくては、この体を満たすことはできないと判断しました。僕は「井の中の蛙」ならぬ「Webの中のヒガ」だったのです。気づきました、そこから飛び出せば無限の世界が待っていることに。
ということでなにをしようかと考えるわけですが、興味があるのものといえば、発酵とか醸造とか蒸留とかですかね。とはいえ、折角ならフロントエンドの仕事にも少しは活かせるものを始めるのもよいだろうと考えるわけです。あわよくば仕事にしてしまえば、就業時間中に遊べるのだから。前から続けているものもあれば、最近はじめたものもありますが、その中からフロントエンドの仕事に多少なり関わりのある技術をサクッと紹介していきます。
GLSL
GLSL（OpenGL Shading Language）とはOpenGLでつかわれるシェーディング言語です。OpenGLの派生であるWebGLでもGLSLをつかいます。
仕事に活かせること
Three.jsなどでWebGLを比較的簡単にあつかうことはできますが、ひとつ上の表現を実装するにはGLSLを理解することが必要です。他の手法では表現できなかったり、表現できたとしても実用に耐えなかったものでも、GLSLによって実現できるようになりました。
趣味の領域
シェーダアートなどと呼ばれる作品をつくり、ひとつの芸術として楽しむことができます。また、それを3Dの域に拡張したレイマーチングなどの手法による圧倒的な表現力はたまらないものです。
僕との関わり
仕事ではWebGLをつかう案件でGLSLをさわることがあります。たとえばバーテックスシェーダをメインにつかった自主制作サイト『HANABI』や、フラグメントシェーダをメインにつかった採用サイト『D.A.Consortium RECRUIT SITE』などがあります。
去年の12月はじめにはTokyo Demo Festにいきました。デモシーンとよばるコンピュータサブカルチャーのひとつで、その表現としてGLSLがつかわれることがあります。コンポとよばれるカテゴライズされた作品ごとの実演も素晴らしかったですが、個人的にはシェーダライブコーディングバトルが印象的でした。その時は制限時間が40分という中で、参加者の4人が代わる代わる画面を変えながらデモを構築していくさまは圧巻でした。今年は作品を出して参加することはなかったのですが、誰でもコンポに応募することはできますので、来年は参加しようと思います。
去年の終わり頃に開催された社内LT会があり、そのときにレイマーチングについて話しました。正直レイマーチングについての理解は浅いですし、まだまだ自在に操ることはできません。しかし、ライブコーディングバトルをみて、その面白さを少しでもみんなにも伝えたいと考えました。結果としては反応は悪くなかった気がします。よし！ レイマーチングするぞ！ という人はなかなかいないでしょうけれども、少しでも楽しんでもらえたのなら嬉しいかぎりです。
去年から今年にかけてGLSLのスクールを受講しました。もともと主催の方が運用されているサイトをみながらWebGLやGLSLを学んでいましたし、聞く限りでは評判もよかったので、このスクールが開催されることを知り、すぐに受講することを決めました。丁寧な資料と説明で、知らなかったことはもちろん、なんとなく書いていたこともより深く理解することができました。最後には発表会があり、それに向けてひとつの作品をつくりあげることができたのはよい経験になりました。
After Effects
After EffectsはAdobe製品のビデオ加工ソフトです。AdobeのソフトであればPremiereもあるのですが、Premiereは動画を並べてつなぎ合わせるのに向いていて、After Effectsはさまざまな要素を重ね合わせるのに向いています。
仕事に活かせること
インフォグラフィックスやマイクロインタラクションなどのアニメーションをつくりLottieで実装するなど、今までのコードベースとは違った手法を採ることができます。より感覚的により素早く実装できるかと思います。
趣味の領域
動画の編集やモーショングラフィックスの制作などができます。はじめからさまざまなプリセットが用意されており、フロントエンドの領域では難しかったことを簡単に表現できるので、たまらない全能感に浸れるかと思います。
僕との関わり
仕事では一度だけですがアニメーション実装前にデザイナーに確認してもらうために使いました。まだそれだけですが、今後はクライアントへのアニメーション確認や、マイクロインタラクションの実装にLottieをつかうことを考えています。
最近では若く優秀なモーショングラフィッカーが増えている気がします。そんな方々の素晴らしい作品の数々をみて、少なからずアニメーションに関わる者として憧れを抱いてしまいました。モーショングラフィックスをはじめよう。そう思わずにはいられなくなったのです。そして、モーショングラフィックスをつくるソフトとしてAfter Effectsを選びました。
去年12月からですが、社内でAfter Effectsをつかったモーショングラフィックスのモクモク会をはじめました。といっても、就業後の19時から19時半の間にLIG運営のコワーキングスペース（いいオフィス）で気が向いたらひとりでモクモクしてるってだけです。気が向いたら人は一緒にモクモクしましょって感じで。僕も初心者ですが、After Effectsをはじめたい人や、聞きたいことがある人の受け皿になれればと考えています。年が明けてからの頻度はさがってますが、無理せずに続けていきます。
Blender
Blenderとは3DCGソフトです。オープンソースですがさまざまなことができるのが魅力的です。
仕事に活かせること
WebGLであつかうモデリングデータを用意することができます。モデリング自体はフロントエンドの領域ではないと思いますが、モデラーがいなくてもIllustratorなどで用意したデータを平面のモデリングデータに変換することなどはできます。
趣味の領域
作成したモデリングデータをレンダリングして作品としてもよいですし、モンスターをつくりゲームの素材にしてもよいし、美少女アバターをつくり「バ美肉」してもよいのです。そこには無限の可能性があります。
僕との関わり
仕事ではWebGLの素材として、Illustratorで用意したファイルから頂点データを取得するためにつかいました。
かんたんなチュートリアルをしたことがある程度でしたが、やはりWebGLとの親和性やXRへの興味が強くなってきたこともあり、「自分でモデリングできるようになりたい」と考えるようになってきました。最近はとりあえず操作に慣れることが大事だと考え、ときおり起動しては、何かをつくるというよりとにかくショートカットを駆使して色々と動かしてみるようにしています。
VRヘッドセットやトラッカーはないのですが、興味本位でVR Chatにログインしたことがあります。さまざまなワールドがあり、なかにはとてもクオリティの高いワールドもありました。この世界でVRヘッドセットをつけて、自分のアバターを動かせれば、想像を超える楽しさがあるのではないかと感じました。まずはVRヘッドセットを買って、気持ちを盛り上げてオリジナルのアバターをつくりたいと思います。
Tiny Unity
Tiny UnityはUnityのTiny Modeという、小さく軽いゲームをつくるためのモードです。主にメッセージングアプリ内ゲームやプレイアブル広告にブラウザゲームを対象としています。言語はTypeScriptですが、今後C#に移行するようです。現在はまだプレビュー版です。
仕事に活かせること
サイト内に簡易的なゲームを実装するときなどに、Tiny Unityでさらに楽に実装できるかもしれません。
趣味の領域
Tiny Unityはできることが少ない分、覚えることも少なく済みそうなので、ここからUnityを覚えていくのもありかと思います。実行するとブラウザで表示され、QRコードからすぐにスマホで確認できます。気軽に簡単なゲームをつくれそうですね。
僕との関わり
はじめてTiny Unityの話を聞いた時、これからの時代はフロントエンドエンジニアもUnityをつかわないと損する時代がくるなと感じました。それから間が空いてしまい忘れていたのですが、気づけばTiny Unityのプレビュー版が出ていました。
去年の終わり頃にハンズオンがあることを知り、Unity自体もほぼ分からない状態ですが、初心者歓迎の言葉に誘われるがままに参加してきました。まだプレビュー版がリリースしたばかりという状況もあり、よい情報を得ることができました。また続きが開催されるそうですので、タイミングが合えば参加しようと思います。
Arduino
Arduinoとはマイコンボードです。プログラムを組み込み、さまざまなモジュールを動かすことができます。言語はCとC++がベースになっています。
仕事に活かせること
IoTの操作画面のフロントエンドを実装する際などに、ハード面の知識もあるとより理解が深まるのではないでしょうか。
趣味の領域
ハードウェアという今までとはまったく違った領域にふれることは、よい経験になるのではと思います。初めは小さなものから、だんだんと大掛かりなものをつくっていくうちに、ロボットにあこがれていた少年の頃の気持ちを思い出すかもですね。
僕との関わり
去年の11月にArduinoではないのですが、安価なArduinoの互換機のセットを買いました。一応プログラムを組み込むためのソフトはArduinoなのでこのタイトルにしてます。買ってすぐにいわゆるLチカをして、そのあとにさまざまなモジュールのチュートリアルを進めています。いろんなモジュールがついてきたのですが、傾きで反応するチルトスイッチや超音波センサーなどがかんたんに動き、すこし興奮してしまいました。このまま残りのチュートリアルも楽しんで、その後はIoTにも挑戦してみたいと思います。
自作キーボード
そのまんまなんですが、自作するキーボードです。1〜2年前から急激に流行ってきていますね。自作のレベルによる難易度の違いはありますが、手軽にキーボードを自作できるようになってきています。セパレート型だったり、キーの配置だったりと、自分にあったキーボードを作ることもできます。
仕事に活かせること
フロントエンドに限らずですが、こういった仕事を数年もしていると、生きているうちで最も手に触れている時間が長い物体はキーボードになるでしょう。そのキー配置で満足ですか？その姿勢で今後10年駆け抜けられますか？よりよい環境を用意するのも仕事のひとつだと考えています。
趣味の領域
さまざまなPCB（プリント基板）を選ぶこともできますし、自分でつくることも、なんならPCBをつかわない方法もあります。キーの数や配置も自在で、用意されたものを組み上げる簡単なものから、設計から始める難しいものまであり、まさに沼です。
僕との関わり
なんて色々と書いていますが、実はまだつくったことがないのです。とても興味があり沼を覗き込んでいる状態とでもいえばよいでしょうか。すでにつくりはじめている予定だったのですが、色々と調べてるうちに買うか悩んでいたキットが売り切れてしまいました。代わりのものを探したのですが、どうにも気持ちが他に向かなくて。あれこれ悩んでいると、キーボードのキットやパーツなどを販売してるネットショップが、今年の1月に自作キーボード専門店の実店舗をオープンしていました。場所は秋葉原と会社からも近いです。まだ行けていないのですが、近いうちに行ってみようと思います。
色々な技術にふれてみて
すぐにできることもあれば、用意が必要なものもありますが、入り口から難しいというものはない気がしました。もちろんその先には難しいことや、時間のかかることもあるでしょう。だからこそもっと楽しめる可能性が秘められていると思います。楽しくてどうしようもなくなれば、その道のプロになるのもありかもしれません。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
