「Nuxt + Netlify + HeadlessCMS で SPA ハンズオン」に行ってきました！【JS Builders】
11/9 に JS Builders というハンズオンに参加してきました。
https://js-builders.connpass.com/event/105516/
実はハンズオンに行くのは今回が初めてだったのですが、特に詰むこともなく 2時間で JAMstack なブログをデプロイすることができました！
今回のハンズオンで使用したリポジトリは下記です。
https://github.com/ryamakuchi/nuxt-blog
実際に公開されているサイトは下記です。
https://nuxt-contentful-blog.netlify.com/
対象者
Nuxt.js に興味がある方
Netlify に興味がある方
HeadlessCMS に興味がある方
JavaScript が好きな方
こんな感じの方が対象でした。 事前準備も Git、Node.js のインストールと GitHub アカウントの用意くらいなので、サクッと簡単にできた印象です。
ゼロから 2時間でできたブログなので、セキュリティ対策や SSR などブログとして未完成な部分も少しあります。 しかし HeadlessCMS を触ったことがなく、且つこれからやっていくぞーという導入としてはとても最適な内容だったと思います！ 何より内容を分かりやすく説明してくれたのがとてもありがたかったです！
どんな構成のブログなの？
使用した技術は以下のとおりです。
Nuxt.js
Nuxt.js は Vue アプリケーションを作成するフレームワークです。
- 規約のある Vue.js アプリケーションを作りたいとき
- Vue.js で SSR したいとき
- Vue.js で静的なサイトを生成したいとき
などの用途として使われるフレームワークです。
書籍でいうと「Nuxt.js ビギナーズガイド」という本が出ており、 こちらが Nuxt.js をきちんと体系的に知るためにとてもいい本なので紹介させていただきます。
Nuxt.js ビギナーズガイド - Vue.js ベースのフレームワークによるシングルページアプリケーション開発
（著者は Qiita でも有名な @potato4d さんですね）
Netlify
読み方は（ねっとりふぁい）です。 静的サイトホスティングサービスの中でもかなり高機能で、無料で色々なことができます。 詳しくはこちらの記事をどうぞ。
高機能ホスティングサービス Netlify について調べて使ってみた
- Nuxt.js で作った静的ファイルをホスティングする
- GitHub の master ブランチに push したら自動デプロイが走る
- Contentful とも連携できる
- Contentful で記事を投稿したら自動デプロイが走る！
- サブドメインも無料枠で設定できる
Contentful
Contentful とは、HeadlessCMS のサービスのひとつです。
私は今回のハンズオンで初めて存在を知ったのですが 👀 Contentful はその名の通りコンテンツを管理するための API で、WordPress のように分かりやすい管理画面を提供しています。
投稿するコンテンツはこちらで自由に設定することができ、Nuxt.js を使う方法も記事として上がっているので、やりやすいのではないかなと思います。
- 投稿する記事の内容を設定できる
- ブログ記事を投稿できる
実際にハンズオンでやった内容
事前にやっておくことは、
これだけです。簡単！
Nuxt.js を Netlify にデプロイする
とりあえず Nuxt.js を Netlify にデプロイしました。 ここらへんは公式ドキュメントに手順が書いてあり、何度かやってみたことがあるので簡単にできました！
講師の方が何人かいて、やったことがない人でもちゃんとついてこられるように優しく教えてくださいました。
大事なポイント
npm run generate して、静的ファイルが generate されるのを確認しました。
同じ設定を Netlify にもして、これで git push したら、自動的に Netlify でも静的ファイルが generate されて dist/ 配下が配信されるんだなーと分かります。
ブログ用のページを作成する
Nuxt.js は pages ディレクトリ配下に拡張子が .vue の単一ファイルコンポーネントのファイルを作ると自動でルーティングされます。
詳しいソースをみたいときはこちらをどうぞ。
ちなみに _slug.vue と、 "_" プレフィックスがついているのは、パラメータを使って動的なルーティングを定義するためのものです。
Contentful の構築
Contentful のサイトから GitHub アカウントでサインアップします。 最初に Content Model を作成して、field をどんどん追加していきます。
このとき Field ID が超重要になってくるので間違えないように
Nuxt.js に Contentful を組み込む
Contentful は npm で JavaScript SDK が用意されているので、こちらで Nuxt.js と Contentful を連携しました。
公式リファレンスはこちら。
公式リファレンスどおりにやってもらえるとできるかと思いますが、詳しいソースをみたいときはこちらをどうぞ。
https://github.com/ryamakuchi/nuxt-blog/commit/d1cd9548bf50aa01d12c76776a88d020c619410f
Webhook の設定をする
とりあえず完成！と思いますが、もうひといき設定が必要です。
Contentful から記事を投稿した際に Netlify で検知して、自動的にビルドする設定を Webhook で行います。
Webhook はあるアプリケーションから別のアプリケーションに対してリアルタイムな情報提供を実現するための仕組みです。
まず Netlify 側で hook URL の発行をして、Contentful 側で hook URL を登録すれば、おしまいです。
あとは、記事をどんどん投稿すればいい感じのブログの出来上がりです！！！
以上がハンズオンでやった内容です。
おわりに
JavaScript Builders さんでは、月 1〜2位の頻度でモダンな JavaScript 開発のためのハンズオンをやっているようです。
https://js-builders.connpass.com/
いま次のハンズオンを見たら、参加枠の埋まり具合がハンパなくて、、めっちゃ人気じゃないですか！笑 （人気なだけあって初心者には最高の、とっても分かりやすいハンズオンでした）
このハンズオンを生かして、自分の自己紹介サイトに Contentful を組み込んだ簡易ブログを作りたいなーなんて考えている今日このごろです。
以上、ブログ書く枠で参加したにもかかわらず、ブログ書くのが遅れてしまってすみませんでした！
今後ははてなブログをもっと活用していきたいと思います！
【歌詞和訳】Warpaint - New Song
Warpaint の New Song という曲が好きです。 特にこの PV がイイ。 好きすぎて和訳してみました。
歌詞
"New Song"
You come along, you come along And wash away the rain You are the sun, you are the sun That leads me babe, to where I belong Where I come from Because of you, I know where I belong
You're a new song You're a new song baby You're a new song to me You're a new song You're a new song baby You're a new song to me
I was, I was, I wasn't wrong To think, to think that it was wrong for me I want, I want it, I want it all I want, I want, I want it all so sweet You got the moves, you got the moves You got the moves, bang bang baby You got the moves, you got the moves
I have never felt this strong Dancing to you all night long
You're a new song You're a new song baby You're a new song to me You're a new song You're a new song baby You're a new song to me
You're a new song You're a new song baby You're a new song to me You're a new song You're a new song baby You're a new song to me
Dancing to you all night long Dancing to you all night long (you're a new song baby) Dancing to you all night long (you're a new song to me)
You're a new song You're a new song baby You're a new song to me You're a new song You're a new song baby You're a new song to me
AZLyrics より引用 https://www.azlyrics.com/lyrics/warpaint/newsong.html
和訳
あなたが来る あなたが来るの 洗い流す雨とともに
あなたは太陽 太陽よ 私に元気をくれる 居場所はどこ
私はどこから来たのだろう あなたのおかげで、私は居場所を得たの
あなたは新しい歌 あなたは新しい歌よ ねぇ あなたは私にとって新しい歌なの
私は、私はそう、間違っていた 思うのだけれど、それは私には間違ったことだったの
ほしい、私は全てがほしいよ 私はその全てをとっても甘いものにしたい
あなたは動いてる あなたは動きを持ってる あなたは動いてるのよ、どんどんと あなたは動いてる…
これほど力強さを感じたことはないわ あなたと一晩中踊っていたいの
あなたは新しい歌 あなたは新しい歌よ ねぇ あなたは私にとって新しい歌なの
あなたと一晩中踊っていたいの
あなたは新しい歌 あなたは新しい歌よ ねぇ あなたは私にとって新しい歌なの
感想
ベースで弾きたいわー
9月も半ばになって、初めてLTした!
はいこんにちは。
9/15 (土) に、初めてLTをしてきました!
緊張しいなので、最初は5分くらいの初心者向けのもので。
参加したのは、こちら!
ただいま勉強中のVue.jsについてのLT型勉強会です。
- LT発表資料 (5分くらいのみじかい内容です。超超初心者向け)
初心者だけど、LTしてみて良かったこと
- いろんな会社の人とお話できた。世の中にはいろんな会社があることを知れる。
- ちょっとだけ、緊張しいが、克服できた気がする…
- どんなにすごい人でも、初心者の頃があったはず! (と思ってがんばるモチベになった)
- Rails + Vue とかLaravel + Vue とかが今は主流で、はやく追いつかないと流れに乗り遅れる危機感がある。
反省点
準備は大事だぜ 話す練習をしないと、直前になって意外と発音があっているのか不安になる単語がある。
- axios ... あくしおす
- lodash ... ろーだっしゅ(間違ってたらごめんなさい)
今回はChapter-4のことというより、vue-cliの基本的なことのお話になってしまった。
- 次の勉強会では何か動くものを作って、それをLTする形にしたいな!
実は、、、 Chapter-4のLTのために「入力した画角のアスペクト比を、リアクティブに表示する」 というものを作っていたのですが、 作りかけで挫折してしまい。。。
何に挫折したかというと、アスペクト比を計算するために、 最大公約数を求める というコードをcomputedに繰り返し処理で書こうとして、 結局うまくいかなくてやめた。笑
ちなみにアスペクト比の計算方法はこのサイトhttp://tech.artprojectteam.jp/asepct-ratioがとても参考になるので、 またチャレンジする気になったら、やりたい＼(^o^)／
まとめ
初心者でも頑張ればLTできる!ということを知った。なんでもやってみるものですね。 あと、本で学ぶのが個人的には性に合っているのですが、 Vueで言えば公式ドキュメントがあんなに充実しているのだから、公式を参考に写経しても良いかも。 と思い始めてきました。
今後頑張っていきたいのは、
です。
8/1からGithub草生やし運動をして半月たった。
毎日草をはやして良かったこと
2週間で何を書いていたか
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方という本の、シングルページレイアウトを写経した。 基礎は大事だよねーということで、CSSでまずは写経。そうすると、SCSSを使って組んでみたくなるのが人の性なので、2周目はSCSSでカンプを見ながら書きました。
