bookarchivesTwitterFacebookinstagramwebampNuxt.jsとAMPで作ったこのブログの構成要素をざっくりとまとめてみる2018-12-19普段はwebデザイナー的な立ち位置で仕事しています。そんな僕でも、Nuxt.jsを使ってブログを構築することができました。技術を導入しています。簡単にはいきませんでしたが、とても学びがいのある、楽しい体験となりました。この記事では、このブログの構成を振り返り、それらについて説明をしてみたいと思います。このサイトのテーマまずは、このブログそのもののテーマと、採用した技術や実装に関する方針について明確にしたいと思います。ビジュアルのデザイン、インタラクション、先進の技術の実装が、「ユーザーの満足度(UX)はもちろん、SEOやアフィリエイトなどのマネタイズと直結する」という信念を証明をすることです。できそうな技術があれば、積極的を実装していきます。個人的なテーマもう一つのこだわりは、手作りすることです。時間がかかっても、可能な限り自分で構築する。せん、技術への習得スピードが早くないので、実装には四苦八苦しておりますが、それを乗り越えた分は成長できると信じてやっています。ベースの心構えとしています。それでは、導入した技術的な要素と、その解説をしてみたいと思います。]]NUXT.JSベースとなるフレームワークはnuxt.jsです。フレームワークと言ってみたものの、ほとんど理解できていません。アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。Officialご覧の通りVue.jsがベースです。Nuxt.jsを使った理由は、静的サイトのジェネレートができることです。他にもたくさんの静的サイトのジェネレータはありますが、個人的にVueを体験してみたかったというのがあります。静的サイトの出力は超便利。ブログを構成するのは素人にはなかなか頭を使う必要がありました。それでも、web上にあるたくさんの知識を借りてなんとか構築することができました。Pages)ちょうどこの計画を考えたときに、AMPの技術と触れ合う機会を得ました。このブログにもAMPを採用することにしました。AMPが何かとということを、公式のサイトではこう書いてあります。既存のスキルセットとフレームワークを活用してウェブページを作成できます。ampproject.org単なるHTMLではなくて、フレームワークであるところが、ミソ。当初はHTMLの代替と考えていたのですが、その考えと一致する部分はほんの30%ほどでした。実はNuxt.jsを使わなくとも、AMPだけで静的なブログを生成することが可能です。実装ルールがそんなに難しくない。機能の追加が簡単で、JSが使えなくても問題ないくらいにコンポーネントが充実しています。このブログの構築では一筋縄では行かない部分が多々ありました。そもそも、nuxt.jsがJSでできているわけですから、JSが絡むことくらいは認識しておくべきでしたね。結局、これもクリアしてみれば恩恵の嵐。このブログの表示パフォーマンスを見れば、それはわかっていただけるかと思います。STYLUSvueではHTML及びCSSのコーディングするのに、メタ言語の導入が簡単です。