2019.3.21
2020.1.14

ブログサイトのリニューアルについて(AMP、Vue.js、ASP.NET Core)

今年に入って行った本ブログサイトのリニューアルについてです。

新しいサイト自体はローカルで昨年の前半にもう少しで完成というところまで作成していたのですが、そこから忙しくなって、なかなか完成までもっていくことができず、今年に入ってようやく時間が空いたので、以前の内容を思い出しながら、サイトをリニューアルすることができました。

目次

  • リニューアルの目的と内容
  • AMPへの対応について
  • トップ(検索)ページでのVue.js利用について
  • ASP.NET Coreについて
  • 最後に

リニューアルの目的と内容

今回のリニューアルの目的はAMPへの対応だったのですが、以前のサイトは使っているフレームワークやライブラリがだいぶ古いもので、公開用のサイトだけではなく、管理サイトも含めて一から作り直したため、かなり時間がかかりました。

また、ある程度完成したところで、見切り発車レベルでサイトの移行を行ったため、AMPのエラーやその他の不具合が多く、その対応が落ち着いてきたのが最近になります。

公開サイトでは、AMPへの対応、トップ(検索)ページにVue.jsの導入、さらには動的・静的サイトを別々で用意したり、ステージング用の環境も用意したりと、以前のものと比較したら、比べ物にならないくらい便利になり、かつ、使いやすくなっています。

UI自体はそこまで変わっていないので、私にしか分からないところなのが申し訳ないですが。

一方、管理サイトの方は、以前は簡単にしか作っていなかったものをきちんと作ったり、静的ページを作成するための機能などを作成したのですが、まだまだ追加したい機能があるので、それは今後、徐々に追加していきたいと思っています。

なお、公開、管理サイトの両方とも、今回はASP.NET Coreを使って開発しました。

AMPへの対応について

今回のリニューアルで一番苦労したのが、一番の目的でもあったAMPへの対応です。

開発前に軽く調査した際は、JavaScriptが使えないとか、外部ファイルの参照ができないとか、ある程度の制限があるんだな、くらいに思っていましたが、実際にやってみると、ある程度ではなく、かなりの制限があることが分かり、AMP用のコンポーネントが用意されているので、それで対応できるだろうと思ってやると、意外と細かな調整ができないので、設計から見直さないといけなかったりと、上手くいかないことばかりでした。

また、PCとAMP(モバイル)でファイルを分けた方がいいのか、それともAMPで統一すべきなのか、とか、AMPページはGoogleのURLから読み込まれるので、URL関連はすべて絶対パスで指定しておかないといけなかったり、とか、作成したAMPページや設定したJSON-LDの情報が正しいのかどうかはどうやって検証するのだとか、やってみないと分からないことばかり。

なので、個人でAMPに手を出す場合は、なめてかからない方がいいと思います。

トップ(検索)ページでのVue.js利用について

記事ページはAMPに対応したのでJavaScriptは使えませんが、トップ(検索)ページはそれではさすがに厳しかったので、AMPの対応からは除外し、Vue.jsを導入して、検索処理を実現しています。

Vue.js は Angular や React に比べると、軽量で扱いやすく、ページの一部に導入する場合にも向いているので、非常に使いやすいフレームワークになっているかと思います。

日本語のドキュメントが充実しているのもいいですね。

ASP.NET Coreについて

公開・管理サイトの両方で使ったASP.NET Coreですが、やはり、すべてのプロジェクトを一つのIDE上(Visual Studio 2017)で管理できるのはいいですね。

以前のサイトは、初めて自分で一からREST系のWebアプリケーションを作成したもので、フロントエンドのフレームワークも初めて。分からないなりに四苦八苦しながら、何度も作り直したりしたので、全体を見るとツギハギだらけで管理はかなり煩雑。しばらく触ってなかったりすると、なにをどうすればいいのか思い出すのに一苦労していました。

ASP.NET Coreを使うことで懸念だったLinux環境へ配置についても、意外と簡単にできて、問題らしい問題はなく、これについては拍子抜けするほど。

ただ一点だけ、最初はサブディレクトリ経由でASP.NET Coreで作成したサイトにアクセスしようとしていましたが、これは画像の読み込みや内部リンクが上手く動作しなかったので、すべてサブドメインでアクセスするように切り替えました。

私の設定がよくなかっただけかもしれませんが、そういった理由があったので、Let's Encryptでワイルドカードでの証明書を発行できるようになったのは、大変ありがたかったです。

あとは、フロントエンド系のソース(HTML、CSS、JavaScript)はやっぱりVisual Studio Codeの方で開発したいところですね。

ResharperなしのVisual Studioはやはり使いづらいです。

最後に

今後は、基本的には今までと同じように記事の追加とUIの見直しを行い、それに合わせて管理側の機能を追加していく予定です。

Works】関連記事