突然だが、ポートフォリオサイトを作った。
最近競プロばかりしていて、開発を全然していなかったので、久しぶりに競プロじゃないプログラミングもするか、と思い立った。何となくウェブサイトを作ってみたかったので、ポートフォリオサイトを作ることにした。受験が終わった2月の中頃から少しずつ作り始め、先月完成した。
作り方
開発はHTML/CSS/JavaScriptを使った。これらの言語は昔触ったことがあるので、ググれば基本的なことは大体できる感じだった。しかし素のHTML/CSSでまともなデザインのサイトを作れる気がしなかったので、ここは外部のライブラリに頼ることにした。そこで使ったのがBootstrapである。
Bootstrapは、HTMLのタグにクラスを指定することで、様々な機能が使えるようになる。デザインもシンプルできれいだし、何より自動でモバイルに対応してくれるのがうれしい。CSSとかJavaScriptをあまり書かなくても、HTMLでクラスを指定するだけで大体完結するので、とても簡単に素早く開発ができたと思う。
あとjQueryも使ってみた。まあ大したことはしてないんだけど、トップ画面のメッセージをフェードインするようにしたり、日本語と英語の切り替えの機能を実装したり、スキルのページの星のところを実装したりした。まあJavaScriptだけでもできるようなことばっかりだけど、プログラムが割とシンプルに書けるような気がした。
ヘッダーは、すべてのページで共通なので、そこだけ抜き取って別のファイルを作り、各ページからそれを取得して挿入する感じにした。普通のウェブサイトがどうやってるのかはわからないが、このポートフォリオサイトはページ数も大して多くないので普通にそのまま書いてもよかったかもしれない。しかしヘッダーを変更したときすべてのファイルに同じ変更を及ぼさなければならないのはめんどくさいし、間違いのもとなので、単一の場所から変更できるようにした。しかし、ローカルのテスト環境だとヘッダーの変更が反映されない（時間がかかる）という問題があった。（サーバーを再起動してもまだ反映されないので、ブラウザの問題かもしれない。キャッシュとかが原因かも）
あと競プロのレーティングを自動で取得するスクリプトをどこかから拝借してきて貼った。AJAXとかなんかを使っているらしいがよくわからん。
ウェブサイトはGitHub Pagesを使って公開した。GitHubのレポから直接サイトをホストできるのでとても便利。
UI
前述の通り、UIはBootstrapを使った。適当に書いてもとてもきれいなサイトになったので素晴らしい。
個人的にはミニマルなデザインが好きなので、このポートフォリオサイトも余分な要素は削って、シンプルな見た目にするように心がけた。最初はフッターもつけていたのだが、いらなくね？ってなり消した。ほかのページも白と黒を基調として余計な文字は入れないようにした。
でもやはり、一番見てほしいのはトップページである。背景で動いているのはライフゲームと呼ばれるプログラムである。ライフゲームとは生物の生存のプロセスを非常にシンプルなルールでシミュレーションしたものだ。隣接するセルのうち3つが生きているなら次の世代が誕生し、2つか3つが生きているならすでに生きているセルは生存し、1つ以下なら過疎で、4つなら過密で死滅する。これらの単純なルールから、神秘的な幾何学的パターンが生み出される。
俺はライフゲームが好きだ。ライフゲームは俺がプログラミングを始めて最初に作ったもののひとつである（当時もHTML canvasとJavaScriptで作ったので、今回のコードもそれを引っ張ってきた）ので、結構思い入れがある。ライフゲームはほんの数十行のコードで記述が可能な非常にシンプルなプログラムで初心者にぴったりでありながら、成果が可視化されやすくしかもそれがとてもきれいなので、当時はかなり興奮したものだ。あとアニメ「すべてがFになる」のエンディングがライフゲームを取り入れたものだったので、これを見てライフゲームを使ったデザインをしてみたいと思うようになった。
ライフゲームはきれいなので、まじでずっと眺めていられる。これの開発中に疲れたとき、トップページを開いて背景のライフゲームをぼーっと眺めていたことが何度あったろう。
このライフゲームの初期状態は完全にランダムにした（確か1/3の確率で生存とかだった気がする）。しかしこれだとありふれた物体しかできないんだよな。しばらく放っとくとブロックとか蜂巣とかしかない。振動子が一個も出てこないのは何でだろう、バグか？初期状態が悪いのか？
感想
当初想像していたよりもずっとしっかりしたものができて感動している。Bootstrapに感謝。
あとライフゲームを取り入れたデザインがかっこよく決まった（よね？）のでうれしい。
このプロジェクトはなかなか楽しかったけど、これを通して、俺がやりたいのはこれではないんだなと実感した。Androidアプリを作ったりゲームを作ったりしたときも思ったけど、やっぱり俺はUIのデザインとかじゃなくて、ひたすらプログラミングがしたい。
まあでもウェブ関連の技術はあまり触ったことがなかったから勉強になった。今度はバックエンドとかも勉強してウェブアプリケーションを作ってみたい。ブロックチェーンを使ってDappとかもやってみたい。あと機械学習のプロジェクトやりたい。Kaggleやるか。競プロも勉強しなきゃ。やりたいことが多すぎて困っちゃうな。コロナで大学休みになっている間にいろいろ手を出してみるか。
GitHubにソースが公開されてるので興味があったら見てみてください
