こんにちは、お久しぶりです！
最近↓の「ぬるさくAI本」を書いていたので、ブログの方をお休みさせていただいてました！
（もしよかったら買ってください。）
norwegian-geek.booth.pm
ところで、友人がやっているSeijisyukyoproyakyuというバンドのHPを作りました。
サクッと作れたので、そのノウハウを今回の記事でお伝えできればと思います！
今回つくったもの
seijishukyoproyakyuという友人がやっているバンドのホームページを作りました。
（私やデザイナーの人件費を除けば）インフラなどの費用はゼロ！です。
ひとえにNetlifyのおかげでしょう。
https://seijisyukyoproyakyu.tokyo
友人のバンド Seijishukyoproyakyu （@seijishukyo_）のHPを作成させていただきました！
— takayama.k (@pco2699) 2019年6月5日
Nuxt.js + Netlifyで作ってます！
Nuxt.jsだとなにも考えずにPWAにしてくれるの便利〜〜！！！！ pic.twitter.com/p5xMImKPwi
構成・利用技術
以下の技術を利用しました。
要件定義
バンドのHPの要件定義をするときに、だいたい以下のようなものが必要だと思います。
- ニュース
- ブログ
- ディスコグラフィー
- バイオグラフィー
具体例としてはこんな感じですね↓
(CHAIというバンドのHPを拝借させていただきました。(https://chai-band.com))
しかし、バンドのリーダーと話していて 社会人の本業がある傍らでやってるバンドなので、こういうHPってトゥーマッチじゃね？という結論に至りました。
そのため、以下の形で要件を決めました。
- バンドのホームページはニュースなどのトランザクション系の情報は載せない。
Twitterに情報を集約する。 - ページ遷移も行わない。
- スマホユーザーが多いので、レスポンシブ対応は必須にする。
利用技術選定
ホスティングサービス
要件１によって、ブログ的なトランザクションを扱う必要がなくなったので、ただの静的ページを作れば良くなりました。
静的ページのホスティングを行うサイトですと、主に、以下があります。
- Firebase Hosting
- Netlify
- Github Pages
今回は、以下の理由からデプロイがしやすい Netlify を利用することにしました。
- GithubにコミットするとNetlify側で、Nuxt.jsなどの静的サイト作成(nuxt generate)をしてくれる
- プルリクを出すと、プルリクに対応した、サイトを自動で立ち上げてくれる。
フロントエンドフレームワーク
当初、シンプルなサイトなので、HTML/CSS/JSかフロントエンドフレームワークを利用するか迷いましたが フロントエンドフレームワークでNuxt.jsを利用することにしました。 ja.nuxtjs.org
結果的には、以下のツイートにもある通り、フロントエンドフレームワークを利用してよかったです。
Nuxtで友達のバンドのホームページ作ったんだけど、当初「普通にHTML/CSSで良くね？」とか自分でも思ったけど、明らかにNuxtにしてよかった、と今ならはっきりと言える。
— takayama.k (@pco2699) 2019年4月20日
CSSフレームワーク
これもデザイナーの人がデザインしてくれるということだったので、CSSフレームワークを利用するか、素のCSSを書くか迷いましたが、tailwind CSSを利用することにしました。 tailwindcss.com
tailwind cssはUIコンポーネントが一切、含まれていないCSSフレームワークのため、以下のような要件に適しています。
UIパーツはデザイナーが作ってくれるから要らないけど、レスポンシブ対応とかめんどくさいからやってほしい
開発
利用技術の選定は終わったので、サクッとサイトを作ります！ GithubとNetlifyとかの連携方法は他のサイトにたくさん載ってると思うので、割愛させていただき ここでは、tailwind cssやNuxt/Vueプラグインを用いたお手軽ページコーディングを中心に説明します。
レスポンシブ対応
tailwind cssを利用するとレスポンシブ対応はかなり楽です！
mdやlgなどBootstrapでおなじみの画面幅を表す識別子を各クラスに付与することで
画面幅に応じて適用することができます。
この際、ポイントとしてtailwind cssはモバイルファーストCSSフレームワークのため 何も画面幅の識別子を指定しない場合には、小さい画面幅から適用されます。
例えば以下の例だと、スマホの画面幅で適用されるのは何も識別子を適用していないtext-2xl、md（タブレット幅）より大きい画面幅はmd:text-3xlが適用されます。
<p class="text-2xl md:text-3xl tracking-wide leading-tight"> Inspired by post-punk, <br class="md:hidden" /> new wave and <br /> <u><a href="mailto:seijishukyoproyakyu@gmail.com">your voice.</a></u> </p>
まとめて、CSSで適用したい！という場合にはCSSで@screen 画面幅と指定して
画面幅ごとにスタイルを指定することができます。
@screen md {
.title {
@apply text-4xl;
@apply mr-4;
}
.section {
@apply mt-20;
}
}
画像処理周り
シンプルなサイトなのに、画像が超重かったりすると、目も当たられないので、画像周りは少しこだわることにしました。
といっても、やったことはシンプルで、以下のNuxtプラグインを導入して、少しページに手を加えただけです。
こちらのプラグインは、以下の画像処理を自動でやってくれる非常に便利なプラグインです。
- PNG -> WebPへの変換
- SVG画像 -> HTMLへの埋込
- LazyLoad用の軽量画像作成*1
WebPへ変換するには、webp-loaderというライブラリをインストールした上で、Nuxtのテンプレートでrequire('URLパス?webp')と?webpをパスに付与して画像を指定すれば、勝手にデプロイ時にWebpに変換してくれます！めっちゃ便利。
<picture class="block mx-auto w-64 md:w-2/3"> <source :srcset="require('~/assets/img/logo.png?webp')" type="image/webp" /> <source :srcset="require('~/assets/img/logo.png')" type="image/png" /> <img :src="require('~/assets/img/logo.png')" alt="logo" /> </picture>
パララックス効果
パララックス効果を実装してほしい！という要望が出てきたのですが、これもVueのプラグインで実装できました。 Nuxt/Vueエコシステムに感謝しかねぇ...
効果をかけたい要素についてv-parallaxというattributeを付与することで、その要素の動きを
実スクロールよりも遅く見せることができます。（=パララックス効果)
<div class="main mt-16 md:mt-24"> <div v-parallax.absY="0.3" class="parallax"> <header></header> <nuxt /> <footer class="mt-16 md:mt-32 text-center text-xs"> COPYRIGHTS ALLRIGHTS RESERVED© seijishukyoproyakyu. </footer> </div> </div>
このパララックスプラグイン、iPhone、MacなどのSafari系のブラウザだと、ページ最下部が見切れるという不具合があるので、以下の形で、Safari系のときのみ、無理やり最下部にマージンをぶちこむ、という手法で解決しました。。。
/* Safari系のみに適用される */
_::-webkit-full-page-media,
_:future,
:root .main {
/* 画面幅によって見切れる長さが異なっていたのでviewportに合わせて引き算した */
margin-bottom: calc(400px - 12vw);
}
ソースコード
ソースコードは以下のGithubに置いてあります。
*1:LazyLoadを実装するには、別途、LazyLoadを行うプラグインと組み合わせる必要があります。
