はじめに
転職活動用に自己紹介ページを作りました。
でも私はもうエンジニア4年生なのに、ただの静的な自己紹介ページだと一応CRUDとかをやってる入門用のTODOリストにも及ばないし……。。
と思って一応背景を動くようにしたりログインの有無によって表示内容を変えたりするようにしました。
背景がキラキラしています。
ただ、背景がうるさいと肝心の自己紹介を読むときにとても気が散ると思うので、止められるようにもしました。
右上のカメラのアイコンのところでドラッグしたりスクロールしようとしたりすると、視点を変えて見ることができます。
成果物
コード
構成図
説明
左上にログインボタンがありますが、ログインすると私の本名やら経歴やらにアクセスできてしまうので採用担当者の人以外は秘密です！
ネット上で真名を決して出してはならないという教えを守り続けるインターネット老人なので、ごめんなさい。
直近の仕事でNuxt.jsを使っていたので、これのTypeScript対応をしたらどんな感じになるのだろう、と思ってNuxt + TypeScriptを実験的にやってみました。
それから、ログインはFirebase Authを、これまた初めて使ってみました。ログインだけFirebaseを利用しつつもバックエンドは普通のAPIサーバーやMySQLを使いたかったので、クライアント側でFirebaseにトークンを取得しに行って、クライアントが取得したトークンを、自前のExpressのAPIで受け取った後にFirebase Admin SDKを使って検証し、ログインを確認するというようなことをやっています。
Herokuは無料なのでありがたく使わせて頂いています。MySQLの接続情報やFirebase Admin SDKのアクセス情報などの大事な情報は当然コード中に書くわけにはいきません。今回はそういった情報はHerokuの都合もあってすべて環境変数に持たせるようにしています。
背景の動くキラキラはThree.jsで作りました。実は最初はCanvas APIでパーティクルを作ろうとしたのですが、処理がとてつもなく重たくなってしまって普通のPCやスマホでは動かせない……つらい……となりました。そこからWebGLやThree.jsなるものを知って勉強して作り直しました。私のiPhone6上でもヌルヌル動きます。WebGLのパワーはすごい。
感想
「次転職する時は最低限ポートフォリオないとあかんやろなぁ…」と思ってまとまった休みが取れたお盆休みとかでわーっと作っていたのですが、今まで触ったことのない技術（FirebaseとかWebGLとか）に触れるのはなんだかんだ楽しかったです。
特にWebGLは面白く、大学生の時に映像を少しだけかじっていたのもあってインタラクティブに動くパーティクルの楽しさに惹き込まれました。仕事に生きるかは全く不明ですが、時間のある時にちょいちょい触っていきたいですね。