ウェブサイトをリニューアルした

ウェブサイト10周年ということで最近の技術を使ってリニューアルしました。(もう2ヶ月経ったけど)
いい勉強になった。
しかし、10年も続くとはね…

ウェブサイトの抱えていた課題

早い段階からHTML5やSSL/TLSに対応したりと頑張ってはいたのですが、
色々と時代遅れ感が否めませんでした。
(そもそも個人ウェブサイト自体が古臭い文化というのはさておき)
課題を列挙するとこういう感じ。

  • 古臭い技術を使っている(SSIとか)
  • トップページのタブ切り替えに問題がある(ブラウザバック時や更新時など)
  • ソースコード管理が手作業(一応DropBoxに入れているが)
  • レンタルサーバにいちいちFTPでアップロード

これらを解決すべく、ここ数年で一番大きく手を加えました。
とはいえ、デザインには大きく手を加えていないので見た目のインパクトはあまり感じないと思います、
というかそうだと狙い通りなんですがどうでしょう?

使った技術

勉強も兼ねて色々と新しい技術を使いました。

GitHub(ソースコード管理)

Gitでのソースコード管理は、界隈にもよるかもしれませんが最近は当たり前ではないでしょうか?
個人的には数年前から使っていたものの、ウェブサイトでの採用は今回が初となりました。
本当は、開発用のブランチを切るべきなんでしょうが、めんどくさくてmasterだけでやっています(よくない)。

Nuxt.js(フレームワーク)

Nuxt.jsは静的サイトを作りやすそうだったので採用しました。

実はNuxt.jsで作る前にReact Staticで作りかけたこともあったのですが、勉強不足やモチベーション低下等で途中で断念してしまいました。
Nuxt.jsのほうがググって出てくる情報量も多く感じたので作りやすかったです。
いろいろな理由からVue.jsを勉強したかったので、それも採用の理由です。

課題に挙げたトップページのタブ切り替えもうまく解決しました。
他にも各ページ共通のヘッダーをコンポーネントにして使いまわしたりと、今までしたかったことができて楽しかったです。

もっとCMSっぽくしようとも考えていますが、それをするとブログの存在価値が揺らぎそうなので迷うところ。
まだ勉強途中なのでこれからも改善していこうと思っています。

Netlify(ホスティング)

せっかく、GitHubで管理したので、コミットしたら勝手に公開してくれるようなサービスを使いたいなと思って、Netlifyを採用しました。
Firebaseとか他のサービスとかも色々調べたのですが、安心して無料で使えそうなNetlifyにしました。

これで、かなりウェブサイトの管理が楽になりそうです(更新頻度が上がるとは言っていない)。

現時点で残っている課題

デザインの改良

デザインは今回大きく手を加えることはありませんでした。
一応、各コンテンツページのヘッダーのデザインを変えたのですが、それぐらいです。
今後、UIフレームワークを導入するかなども検討しています。

モバイル対応

モバイル対応もデザインの話とかぶってしまいますが、まだまだ不十分だと感じています。
モバイルユーザのほうが多いのでもう少しなんとかしないとな…とは思っているのですが。

運用アプリのリメイク

あと、今回運用アプリのリメイクは間に合わず、今までのアプリをiframeで埋め込む形でごまかしています。
これもNuxt.jsで置き換えたい次第。あと、デザインもずっと仮のままなのでなんとかしたい。

おわりに

まだまだ不十分だとは感じていますが、10周年までにリニューアルしようと思ってたので、
それができたのはよかったです。

上に挙げた課題以外にも色々とできそうなことはあるのですが、そのうちということで…
これで少し現代風になったので、もう少しウェブサイトをやっていけそうな気がします。

ちなみにブログも画像をwebpにしたり、アナリティクスのキャンペーンURLを設定したりなど、
時々ひっそりと改良しています。

ネットの片隅でarumic.netはこれからもやっていきます。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください