Nuxt.jsとAMPを使って作られたこのブログの構成要素をざっくりとまとめてみる

このサイト/ブログの構成について紹介したいと思います。
主に技術的なお話となっております。

このサイトのテーマ


このブログのテーマです。
特に技術実装の部分でのテーマ。

それは、ビジュアルのデザイン、インタラクション、先進の技術の実装が、「ユーザーの満足度(UX)はもちろん、SEOやアフィリエイトなどのマネタイズと直結する」という信念を証明をすることです。

よって、積極的に新しい技術を取り入れています。

また、もう一つは、手作りにこだわることです。
可能な限り自分で作る。
ここは、単なる趣味ですw

導入した技術的な要素を並べてみる

  1. NUXT.JS
  2. AMP
  3. PUG, STYLUS
  4. GULP
  5. インフラ系(GITHUB, CIRCLE CI, FIREBASE)
  6. MARKDOWN
  7. まとめ:自分の実益と結びつけると効率アップ

NUXT.JS


ベースとなるフレームワークはnuxt.jsです。
フレームワークと言ってみたものの、ほとんど理解できていません。

Nuxt.js は Vue アプリケーションを作成するフレームワークです。
ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。

Nuxt.js Official

ご覧の通りVue.jsがベースです。

Nuxt.jsを使った理由は、静的サイトのジェネレートができることです。
他にもたくさんの静的サイトのジェネレータはありますが、個人的にVueを体験してみたかったというのがあります。

流石に、静的サイトの出力は超便利。
ただし、ブログを構成するのは素人にはなかなか頭を使う必要がありました。
それでも、web上にあるたくさんの知識を借りてなんとか構築することができました。

AMP


ちょうどこの計画を考えたときに、AMPの技術と触れ合う機会を得ました。
通常のHTMLではなく、AMP HTMLとすることで、表示速度を爆速にできるという考え方にかなりシビレた ので、このブログにもAMPを採用することにしました。

AMP では、既存のスキルセットとフレームワークを活用してウェブページを作成できます。

ampproject.org

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


安定のgulpですが、ごく一部しか利用していません。
画像の最適化を行っています。
軽量化と画像サイズを切り抜いています。
これによってすべての画像は100kb以下に抑えています。

また、セクションごとの画像は他の記事とも共有することでスピードアップを図っています。

インフラ系(GITHUB, CIRCLE CI, FIREBASE)


インフラ系には最も疎く、全く知識がない状態でした。
githubは実務で使っていたものの、いわゆる「サーバーレス」という環境を触るのが初めて。
というか、それすらわからない状態。

詳細はわかっていないにも関わらず、かなり快適な環境を作ることに成功しています。

github


やはりこれなしでは語れません。
個人でもissuで思考を整理しながら進めています。
つまり、どんな小さな規模でも使う価値アリ。プライベート・プランで課金は間違いのない選択と思ってます。

また、静的なサイトのホスティング・サービスとしても優秀でした。
github pagesを使えば、ほとんど手間なしで公開までできちゃいます。

静的サイト公開に最適すぎるGithub Pages!privateだとより便利に使えますよ!
無料なのに使いやすすぎるUIとブランチにプッシュするだけのワークフローは制作がはかどりまくりのgithub pages!レンサバには戻れませんねぇ。...

githubをより好きになりましたね。

Circle CI

CIツールの導入にチャレンジしました。
この恩恵はかなり大きかったです。

  1. github masterにマージ
  2. circle CIにシグナル
  3. circle CIがnuxt generate
  4. firebaseにデプロイ

generateにかかる時間を気にしなくて済むようになったのも、ストレス軽減の一つ。

CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジ
シンプルな直列のワークフローを実現して効率化を測る!素人でもできるCircleCIの活用法...

Firebase

とにかく表示スピードの早いホスティングサービスを選びました。
選択肢としては、netrifyとgithub pagesも上がったのですが、それぞれ試してみたところ、firebaseが一番早かったです。

爆速な静的サイト・ホスティングサービス選び Github Pages vs netlify vs Firebase
Firebaseが速くておどろいた!静的サイトをホスティングするサービスを、ためしに幾つか使用してみて、メリットとデメリットを比較・検討しました。...

また、googleのサービスということで、AMPとの相性やSEOなどにも有利かも?という「あわよくば感」満載のチョイス。

firebaseはローカルからコマンドを叩かなきゃいけないのがストレスでしたが、circle CIの導入でクリアしました。

MARKDOWN

マークダウンで記事を書きます。
markdownの使い勝手の良さに驚愕しました。

まず、記事ごとにパラメータを設定できること。
yamlスタイルで記事固有の情報を書き込めます。
例えば、こんな感じに

---
category: カテゴリー
title: 記事タイトル
digest: descriptionやリンクされた記事のダイジェストとして使用
tag: 同じタグを持たせると、その記事同士がまとめてリストにできる
series: 次の記事を指定する
img: 記事のアイキャッチ画像を設定する。metaに設定されるのでいろんな場面で活用される
cv: アフィリエイトコードをできるだけ簡単に入力できるように工夫中
---

自分で好きにパラメータを作ったり増やしたりできるのが良いですね。

まとめ:自分の実益と結びつけると効率アップ

個人プロジェクトとして始めたことですが、めちゃくちゃエキサイティングで楽しいものとなりました。

メリット

  • 新しい技術を積極的に習得する
  • 問題や課題が出しやすい
  • マネタイズを指標とする為、改善のモチベーション高い

使い古された表現ですが、「自分ごと化」の最もたるものになりました。
アフィリエイト含め、お金が絡むとモチベーションと改善の視点が変わります。
UXと密接に関わる部分ということも、理解できました。

the next
#blog

AMP警告「推奨サイズより大きい画像を指定してください」が出たので対応する

ブログの古い記事を見直したらアクセスが少しだけど上がりました

モバイルファーストインデックス(MFI)が検索順位やインデックスに与える影響とは?

CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジ

サイトのAMP化を検討している方へ導入によるメリットとそうじゃない部分を解説します

ブログサービスの選び方。静的サイトという選択肢はいかがでしょう?

構造化データ(JSON-LD)をAMPブログに設置する方法