Nuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみる
2020-06-11
(LastUpdated: 2020-06-11)
普段はwebデザイナー的な立ち位置で仕事しています。 そんな僕でも、Nuxt.jsを使ってブログを構築することができました。 Nuxt.jsの他には、AMP、github、firebase、CircleCI などの技術を導入しています。
簡単にはいきませんでしたが、とても学びがいのある、楽しい体験となりました。
この記事では、このブログの構成を振り返り、それらについて説明をしてみたいと思います。
このサイトのテーマ
まずは、このブログそのもののテーマと、採用した技術や実装に関する方針について明確にしたいと思います。
ビジュアルのデザイン、インタラクション、先進の技術の実装が、「ユーザーの満足度（UX）はもちろん、SEOやアフィリエイトなどのマネタイズと直結する」という信念を証明をすることです。
よって、ユーザーにとって快適な体験を提供 できそうな技術があれば、積極的を実装していきます。
さらに、個人的なテーマ
もう一つのこだわりは、手作りすることです。 時間がかかっても、可能な限り自分で構築する。
如何せん、技術への習得スピードが早くないので、実装には四苦八苦しておりますが、それを乗り越えた分は成長できると信じてやっています。
効率とか度外視ですが、趣味の延長として楽しむこと をベースの心構えとしています。 それでは、導入した技術的な要素と、その解説をしてみたいと思います。
[[ toc ]]
NUXT.JS
ベースとなるフレームワークはnuxt.jsです。
フレームワークと言ってみたものの、ほとんど理解できていません。
Nuxt.js は Vue アプリケーションを作成するフレームワークです。 ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
Nuxt.js Official
ご覧の通りVue.jsがベースです。
Nuxt.jsを使った理由は、静的サイトのジェネレートができることです。 他にもたくさんの静的サイトのジェネレータはありますが、個人的にVueを体験してみたかったというのがあります。
流石、静的サイトの出力は超便利。 ただし、ブログを構成するのは素人にはなかなか頭を使う必要がありました。 それでも、web上にあるたくさんの知識を借りてなんとか構築することができました。
AMP(Accelerated Mobile Pages)
ちょうどこの計画を考えたときに、AMPの技術と触れ合う機会を得ました。
通常のHTMLではなく、AMP HTMLとすることで、表示速度を爆速にできるという考え方にかなりシビレた ので、このブログにもAMPを採用することにしました。
AMPが何かとということを、公式のサイトではこう書いてあります。
AMP では、既存のスキルセットとフレームワークを活用してウェブページを作成できます。 ampproject.org
単なるHTMLではなくて、フレームワークであるところが、ミソ。 当初はHTMLの代替と考えていたのですが、その考えと一致する部分はほんの30%ほどでした。 実はNuxt.jsを使わなくとも、AMPだけで静的なブログを生成することが可能です。
まず、実装ルールがそんなに難しくない。 機能の追加が簡単で、JSが使えなくても問題ないくらいにコンポーネントが充実しています。
しかし、このブログの構築では一筋縄では行かない部分が多々ありました。 そもそも、nuxt.jsがJSでできているわけですから、JSが絡むことくらいは認識しておくべきでしたね。
結局、これもクリアしてみれば恩恵の嵐。 このブログの表示パフォーマンスを見れば、それはわかっていただけるかと思います。
PUG, STYLUS
vueではHTML及びCSSのコーディングするのに、メタ言語の導入が簡単です。 安定のpug。 もうこれは必須です。 atom editorを使用しているのですが、vueファイルでpugを書こうとするとうまく言語設定がされないのが、微妙にストレスでした。
そして、初めてstylusを使ってみました。 これは大正解で無茶苦茶楽です。
scoped css
Vueの大きなメリットであるscoped CSS。 ですが、AMPを採用しているので、一切使えません。 これは微妙に不便です。
ただ、scoped CSSを使いだすと依存関係がカオスになりがちな気もするので、結果オーライです。
GULP
最近は別のプロジェクトでnpm scriptsに挑戦しています。 このブログレベルなら、そっちの方が向いている感じがします。
また、セクションごとの画像は他の記事とも共有することでスピードアップを図っています。
インフラ系(GITHUB, CIRCLE CI, FIREBASE)
インフラ系には最も疎く、全く知識がない状態でした。
githubは実務で使っていたものの、いわゆる「サーバーレス」という環境を触るのが初めて。
というか、それすらわからない状態。
詳細はわかっていないにも関わらず、かなり快適な環境を作ることに成功しています。
github
やはりこれなしでは語れません。
個人でもissuで思考を整理しながら進めています。
どんな小さな規模でも使う価値はありますね。 プライベート・プランの課金がなくなったので、気軽に使えるようになったのも嬉しい！
ホスティング機能も見逃せない
また、静的なサイトのホスティング・サービスとしても優秀 でした。 他のホスティングサービスをわざわざ選択しなくても、github pagesだけで機能、使い勝手ともに十分です。 ワークフロー的にも理想的で、githubリポジトリにプッシュするだけで、自動的に更新が走ったりと、至れり尽くせり。
こういったことを、専門的な知識不要で、しかも簡単に実現できるのは素晴らしい。 githubを好きにならない理由が見つからない！
Circle CI
CIツールの導入にチャレンジしました。 この恩恵はかなり大きかったです。
- github masterにマージ
- circle CIにシグナル
- circle CIがnuxt generate
- firebaseにデプロイ
generateにかかる時間を気にしなくて済むようになったのも、ストレス軽減の一つ。
Firebase
とにかく表示スピードの早いホスティングサービスを選びました。 選択肢としては、netrifyとgithub pagesも上がったのですが、それぞれ試してみたところ、firebaseが一番早かったです。
また、googleのサービスということで、AMPとの相性やSEOなどにも有利かも？という「あわよくば感」満載のチョイス。
firebaseはローカルからコマンドを叩かなきゃいけないのがストレスでしたが、circle CIの導入でクリアしました。
MARKDOWN
マークダウンで記事を書きます。 markdownの使い勝手の良さに、改めて驚愕しました。
このブログにおいては、記事ごとにパラメータを設定できるのが素晴らしいです。 jsonに変換する際に、記事ごとに紐づいていたら便利なデータをパラメータとして書いておけます。
例えば、こんな感じに
`yaml
category: カテゴリー title: 記事タイトル digest: descriptionやリンクされた記事のダイジェストとして使用 tag: 同じタグを持たせると、その記事同士がまとめてリストにできる 次の記事を指定する img: 記事のアイキャッチ画像を設定する。metaに設定されるのでいろんな場面で活用される アフィリエイトコードをできるだけ簡単に入力できるように工夫中
yamlスタイル（スタイルは選べるようです）で、記事固有の情報を書き込めます。
パラメータ自身も途中で増やしたりできるのも利便性が良いです。
## PWA(progressive web app)
PWA化しています。
AMPでPWAすることを、PWAMPと呼ぶらしいですね。
現段階では、ServiceWorkerを実装しており、ホーム画面に追加することが可能です。
そもそも爆速であるがゆえに、速度面でServiceWorkerの恩恵を感じづらいのがアレですね。
現在、OneSignalを使った通知も実装準備しています。
ただ、iOS関連の対応がされていないので、少し温めている状況ですね。
## まとめ：自分の実益と結びつけることが続ける秘訣
個人プロジェクトとして始めたことですが、めちゃくちゃエキサイティングで楽しいものとなりました。
メリット
- 新しい技術を積極的に習得する
- 問題や課題が出しやすい
- マネタイズを指標とする為、改善のモチベーション高い
アフィリエイト含め、お金が絡むとモチベーションと改善の視点が変わります。
そういう意味で、「自分ごと化」の好例と言える結果となりました。
そして何より思うのは、技術はコンテンツを支える重要な要素であることです。
コンテンツが良いだけではダメだし、技術が先進的なだけでも、人に受け入れられるとは限りません。
その両方が、文脈に沿ってバランスよく融合された時に、ユーザーに好かれるものになるのだと学ぶことができました。
