このたび個人事業主 MATSUKAZE. のWebサイトをリニューアルしましたのでご報告いたします。

ドメインも装いも新たに

MATSUKAZE.design

旧サイト（www.mach3.jp）からドメインを改めて生まれ変わった「MATSUKAZE.design」です。自分的にナウいアレコレを盛り込んで創ってみました。制作期間はおよそ一ヶ月。

リニューアル自体は去年のはじめから進めてはいたのですが、2018年は色々と学ぶことが多かった年で、年末にそこまでに行った全てを無かった事にしたい衝動に駆られ、勢いだけで制作した一品です。お収めください。

技術的な話

技術的にはそんなに大層な事はしていませんが記録として四方山話をここに残しておこうと思います。

TL;DR

• Nuxt + Netlifyははかどるぞ
• NuxtでextractCSSは避けるべき
• Slack送信はお手軽で良い
• 読ませるサイトにリキッドレイアウトは不向きか

Nuxt + Netlify

Nuxt.js を使って静的サイトをジェネレートして Netlify にデプロイしています。

Vueはこれまでも触ってきましたがNuxt.jsについてはこれが初見でした。簡単に説明しておきますと、Vueとそれにまつわる便利なアレコレをパッケージングしてプロジェクトをクイックスタートするためのフレームワークです。名前からもReactのNextを模したものと言ってよさそうです。

Nuxtは静的ファイルの配信機能も備えていて、Nuxt自体が静的サイトジェネレータとして機能します。今回使っているのはこれですね。

一方のNetlifyは、このNuxtの静的サイト配信機能と非常に良くマッチしています。Nuxtで静的サイトを出力するために nuxt generate というコマンドを使用するのですが、これをNetlify側で自動で行ってくれます。（勿論そのように設定する必要はありますが）

図解するとこんなイメージ :

制作者が行うのはリポジトリへのpushだけで、あとはNetlifyがその変更を検知してサイトを再ビルドして公開してくれます。便利な世の中になったものです。

extractCSSには罠が潜んでいる

結論から先に書くと、extractCSSはtrueにすべきではないと考えます。

NuxtではデフォルトでCSSをHTMLファイル内に展開します。つまりドキュメントの style 要素の中にそのページで使用されているスタイルをすべて出力するのです。旧来のWeb制作者の感覚ですとCSSは別ファイルにしたい気持ちがあるかもしれません。その場合は nuxt.config.js 内で extractCSS: true にするという設定が必要になります。

しかし、この extractCSS は落とし穴があります。仕組みとしては恐らく

1. インポートされた vue ファイルの style セクションに書かれたスタイルを抽出
2. それを一旦まとめたものを適正なサイズに切り分けてcssファイルとして出力する

といった感じだと思われ、その役割を担うのが mini-css-extract-plugin なのですが、これが時折エラーを吐きます。

WARNING in chunk …  [mini-css-extract-plugin]
Conflicting order between:

Conflicting order とあるのでコンポーネントを読み込む import 文の順番を少しかえて見たところ、改善したり、逆にエラーが増えたりする症状が見られました。WARNING in chunk なのでcssファイルに切り分ける段階でプラグインがパニックを起こしているのではないかと推察します。

それとは別の問題として、ページを訪問した際に一瞬表示が乱れる不具合が発生しました。これも推測に過ぎませんが、切り分けられたスタイルの読み込み順が制作者の意図を担保出来ないので起きている現象ではないかと思います。最終的に描画されるスタイルは正しい形ですが、MATSUKAZE.design の様にアニメーションを使用しているページでは、読み込み時にかなり滑稽な挙動をします。

そもそもHTMLファイルにスタイルシートを直接展開するのはリクエストを減らしてページ描画までの時間を短縮しようという意図に則った物だと思うので、そこでわざわざ別ファイルに分けるのは愚策なのでしょう。どうしても別ファイルにしたいのならば nuxt.config.js で webpack の設定を拡張して1ファイルにまとめる方法を選択した方が良いと考えます。

クイックコンタクト（Slack）

お問い合わせフォーム とは別に、「クイックコンタクト」という物を設置しました。お問い合わせフォームはメールが送られますが、クイックコンタクトはMATSUKAZE.のSlackにダイレクトメッセージが送られます。クイックコンタクトは全てのページの右下のボタンからアクセスできます。

Slackへの送信のあまりの手軽さに「これだけで良いのでは（メールフォームいらないのでは）」という思いもありましたが、これは「自動返信メール」を送りません。自動返信メールが必要かどうかという議論は脇に置いておいて、送り先も安心と信頼のEメールであるべきという考えもあり、両方実装しておきました。

匿名でOKで自動返信も不要で、かつ重要度の高くないフィードバック等の送信はSlackで十分そうですね。

リキッドの悩み

今回、幅を制限しない純粋なリキッドレイアウトを試みてみました。タブレット・スマートフォン向けのレスポンシブ対応が幾分か楽になった一方で、PCの高解像度ディスプレイで閲覧した時に間延びする印象を受けました。横に長過ぎる文章は非常に読みづらく、無駄にスペースが空いてしまってどうにも気持ち悪さがあります。文章を読ませるサイトでは幅を固定あるいは制限した方が良いかもしれません。

おしまい

フリーランスにとって自サイトの制作は怠りがちになってしまいますよね。なってしまいますよね？しかし、自サイトは蓄えてきた知見の復習と新しい物の実験が存分に出来る楽しい砂場です。すきあらば挑戦していきたいですね。