はじめに
久しぶりの更新です。。。
少し時間ができたので、プログラミングのリハビリも含めて、サイトに新要素を追加してみました。以下の2要素です。
- 今月の名盤
- スケッチブック
どちらもサイドバーの一部として追加してみました。
本当はまだまだ修正しなければいけない点や、他にも追加したい要素があるのですが、思ったよりも作業に時間がかかったので、ひとまずここまでで公開してみます。
技術的な詳細については、それぞれの要素についてまた改めて記事を書こうと思っているので（初めて使う技術もあり結構ネタがたまっています）、ここでは簡単な機能の紹介だけを行っていきます。
1. 今月の名盤
「今月の名盤」として、おすすめのアルバムのジャケットを飾れるスペースを作りました。
元々、個人的に気に入っているアルバムの紹介記事を月1程度で書きたいと考えていたので、それと連動してアルバムのカバーアートを月替わりで飾れる場所を作りました。<a>タグも付けているので、クリックすればその紹介記事のページに飛ぶようになっています。（記事執筆時はまだ"Coming Soon"です）
アルバム紹介といった音楽（特にロック）関連の記事はブログを作った当初からずっとやりたいと思っていたのですが、なかなか重い腰が上がらなかったので、これを機に継続的に上げていこうと思っています。というのも、一応少額とは言えサーバ代を払っており、なにかしらブログの更新をしないともったいないので。。。
ちなみに、鏡面反射やホバー時のアニメーションはcssによって実装しました。
2. スケッチブック
描いた落書きなどを保存・公開できる場所を作りました。SNSやPixivで公開するほどでもない練習スケッチなんかを上げていけたらと思っています。
使用技術は、cssのグリッドレイアウトやFetch APIによる非同期通信（async/await）、画像表示のための外部ライブラリ（Luminous.js）です。特に非同期通信については、画面の一部だけを更新するために使用したのですが、クライアントサイド（JavaScript）とサーバサイド（PHP）でのやり取りが必要だったのでなかなか苦戦しました。（実はまだバグ的なものが残っているので、今後修正していこうと思います。。。）
余談
新しい要素を追加するにあたって、初めはReactやVue.jsといった有名なフレームワークを勉強がてらに使用してみようかとも思ったのですが、Reactに少し触れてみたところNode.jsのようなサーバサイドの環境構築も必要ということがわかったので、ローカルで少しいじった後、結局諦めました。。。（一応、Node.jsなしでもCDNから読み込んで使用する方法もありますが、サーバサイドレンダリングができないなどメリットが薄いです→ブラウザだけで動作するNode.jsなしReactの使い方（メタルドラマーのIT備忘録））
Node.jsを導入しようとすると共用のレンタルサーバでは十分ではなく、VPSサーバやAWSなどのホスティングサービス（あるいは自前のサーバ）が必要とのことなのでコスト面、知識面で結構敷居が高い印象です。やはりWebアプリケーションやWebサービスの個人開発は仮にローカル環境で完成させたとしても、公開の際にそういったサーバサイドの事も考えなければならないので割とめんどくさいですね。（もちろんスマホアプリやUnityで作るゲームなどでも通信機能が必要になれば直面する問題なのですが。。。）本格的にやろうとするとセキュリティなどの知識も必要になるので、そこら辺に関してはもう少し勉強が必要だと感じました。
まあ、この程度の個人ブログならばフレームワークなしのjs（Vanilla JSと呼ぶそう）とphpで何とかなるので、当分はこれで行こうと思います。。。
