このたび個人事業主 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の高解像度ディスプレイで閲覧した時に間延びする印象を受けました。横に長過ぎる文章は非常に読みづらく、無駄にスペースが空いてしまってどうにも気持ち悪さがあります。文章を読ませるサイトでは幅を固定あるいは制限した方が良いかもしれません。

おしまい

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

近代以降、人は時間にしばられ、あるいは守られながら生活をするようになりました。 ここでそれが良いことだとか悪いことだとか考えるような詮無い事はしません。 今日は、私達の暮らしに欠かせない「時間」を測定する装置について考えていきたいと思います。

つまり時計である

時間を計測する装置、つまるところ「時計」と呼ばれる装置なのですが、 今あるアナログ時計のデザインに私達はあまりにも慣れ親しみすぎてしまいました。 なのでその存在からは一旦離れて、 改めて私達の生活に必要な「時間」を測る装置のデザインについて思いを馳せます。

なんでこんな事を考え始めたのか

VueでSVGベースのコンポーネントを試してみたかったからです。 ハワイの住人は非常に緩やかな時間感覚をもっていて、それは「ハワイアン・タイム」などと呼ばれるそうです。 常日頃時間に追われて生活していると、ふとそういう物に憧れをもつ事があります。 「大雑把な時間感覚で、ゆるく生きていきたい」と。

そこで、大雑把に時間を把握できるデザインの時計を考えてみようと考えました。

作ってみたサンプル達

そしてこちらが作ってみたサンプルです。 実用性等はあまり深く考えずに自由に、4種ばかり作ってみました。

• ArClock

サンプル1 : 比較的普通なそれ

普段目にするアナログ時計にかなり近いデザインです。 異なる点と言えば、針が円弧になり、時間を表す部分が12時間ではなく24時間単位、つまり1日で1周になる所です。

なぜ今あるアナログ時計が24時間ではなく12時間で1週なのかは詳しく調べていないのでわかりませんが、 12時間の方がぱっと見てより精細に時間を知ることが出来るのは確かです。 ですので、より大雑把にする為に24時間にしてみました。

サンプル2 : 波の様なそれ

このサンプルはちょっとお気に入りです。

時間部分のトータルが24時間になっているのはサンプル1と同様ですが、基点が朝の6時になっていて、右端からスタートします。 つまり、右の円弧は6時から18時までの「昼間」を表し、左の円弧は18時から翌6時までの「夜間」を表します。 右から左にしたのは、東から昇って西に沈む太陽をイメージしていたりします。

分と秒も一応なんとなく分かるようにはなっていますが、これは、あまりに動きがないとつまらないので付けたただの飾りです。 昼間/夜間のだいたい何時くらいなのかがわかれば良いというテーマの時計です。

サンプル3 : 週を意識したそれ

もっと大雑把にしてみました。一週を一つの単位として表現してみた時計（？）です。 月曜日を起点として、現在週のどの辺りなのかを大まかにあらわします。 今回作った時計（？）の中で最も動きの無い、面白みのない物となりました。

日曜日を中央に押し込んだ理由は3つあります。 1つ目は、Saturday と Sunday で “S” が続いて見づらいこと、 2つ目は、7だと360を割り切れないこと、 3つ目は、6ならばリボルバーの弾倉っぽくなるのでイメージとして採用してみようと思った次第です。 （しかし、調べたら7発装填のリボルバーも存在する様でした。 ナガンM1895 – Wikipedia ）

この7つの曜日が全て赤く染まる時、我々は月曜日の到来に恐れおののく事でしょう。

サンプル4 : 年を意識したそれ

さらに単位を大きくして、年にしてみました。 年輪をイメージしていますが、輪になってないしひとつの層は別に年じゃないでしょう？というのは野暮な突っ込みです。 むしろゼンマイをイメージしていると言った方が理解を得られるかもしれません。

このゼンマイ状の線は、現在が1年のどの辺りなのかを示しますが、 半径ではなく線分の長さであらわしている為、見た目と実際に感覚としてズレが生じるでしょう。 しかし、年始の一ヶ月よりも年末の一ヶ月の方が短く思えるのはわりと一般的な感覚のように思えます。 そんな錯覚も表現出来てしまう時計であります。

角層の塗りは60秒で終端にたどり着きます。 ちょっとした動きが欲しかったのと、ぐるぐる動いているのが楽しかったので付けてみました。

技術的な話

これらのサンプルは全てインラインSVGで作られていて、 パスは一部の物を除いてほとんど <path> の A コマンドで描画してあります。 動きはほとんど stroke-dash-array と stroke-dash-offset で実装されていて、アニメーションは全て transition です。

せっかく Vue で作ったサンプルなので <path>　の d 属性を直接書き換えてアニメーションを、とも思ったのですが、 頂点の数が変わると transition は効かないので他の方法をとりました。

SVGベースのVueコンポーネント

インラインSVGをベースにしたVueコンポーネントを今回試してみましたが、なかなか面白いものです。 <path> の描き方を理解すると大抵の物は描けますし、動的に操作する事も容易です。 例えばデータを渡してグラフを描画するコンポーネント実装などでその実力を大いに発揮しそうです。というか、まさにそういうケースで先日発揮しました。

そういった部品を実装しててふと思い出したのが ActionScript3 で作るFlashコンテンツで、非常に類似しています。 AS3でも受け取ったデータから Graphics クラスで動的に描画をするなどしていましたね。 あんなイメージです。

Netlify

Netflix とよく似ている為よくタイポしてしまいがちな Netlify にデプロイしてみました。

Netlify: All-in-one platform for automating modern web projects.
Build, deploy, and manage modern web projects

このサービスは、GitHub等のリポジトリサービスと連携して、そのリポジトリの指定したブランチにpushするだけでデプロイが完了するというお手軽なWebサーバーです。 それに加えて、様々な機能をご利用いただけます。

• ビルドコマンドをデプロイ前に実行してくれる
• Functions 機能で AWS Lambda にもデプロイできる
• Form 機能でフォームリクエストをハンドリングできる
• Let’s Encrypt によるSSL対応（独自ドメインが必要）

Lambdaと連携出来るので、開発コストはさておき大体の事は実現できそうですね。 今回はビルドコマンドの実行ぐらいしか活用していませんが、機会があればがっつり使ってみたい所存です。

まとめ

色々な時計を作ってみましたが、先に申し上げたとおり、実用出来る代物ではありません。 少なくとも、この国で今の生活をしているかぎりは…。

アップデートのきっかけ

LESSTESTERを見直すきっかけになったのは、StackOverflowで「バージョンが古い。5年前のバージョン。（意訳）」と言及されていたのを見かけた事。 実際は、Less v1.7.0が出たのが2014年2月でLESSTESTERアップデートが翌3月なので3年しか経ってない事をここに釈明しておきます。 しかし、Lessのバージョンがv2.7.2まで上がっている間ずっと放置してしまったのは反省しないといけませんね。

cf) https://github.com/less/less.js

本当はLessユーザーも希少な様子なので閉めようかとも考えましたが、 せっかく公式にも取り上げてもらっていた事ですし、 案件で得られた経験値を試すついでにまるっと作り直してみようと思いました。

そして出来たもの

新しくついた機能 :

• ドラフトが端末に保存できるようになりました
• Lessのバージョンを選択できるようになりました
• キーマップに sublime が追加されました
• リアルタイムコンパイル

新しくつけようと思ったけどやめた機能 :

• URLでシェアする機能（理由 : コストのわりに使われ無さそう）

活用した技術など :

• Vue.js – https://jp.vuejs.org/
• AWS S3の静的サイトホスティング
• AWS Route53 + CloudFront でSSLに対応
• （おまけ） さくらのメールボックス

感想

ゼロから組み直したにしては、AWSとVue.jsが大変便利だったおかげで短時間で完成しました。

Vue.js

現在進行系で進んでいるプロジェクトで使っているのですが、 低い学習コストのわりに高機能かつ使い勝手が良く、規模問わず動的なWebアプリケーションを作るのに大変便利です。

AWS S3

言わずと知れたS3さんは便利すぎる。 もう全部これでいいんじゃないでしょうか。

AWS Route53 + CloudFront

SSL対応がこんなに簡単で安価になるとは、時代を感じます。 CloudFrontは高機能である反面、デプロイと変更の適用で結構待たされるので、いろいろな設定を試す段階ではちょっと辛い部分はありました。

また、今回は使っていませんが API Gateway / Lambda / RDS あたりは触る機会がどんどん増えていくのではないかなと思っています。

さくらのメールボックス

SSL対応の際にドメイン所有者の確認のためメールが送られるので、それを受け取る為に使いました。 年額1000円程度で複数ドメインを使用できるのでかなりリーズナブルです。 メールサーバの構築はなにかと面倒なので、ぜひ利用していきたい選択肢ですね。

セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】

まとめ

お買い物もホビーも開発もAmazonに依存する時代の到来です。 それぞれのリソースについては時間があれば追って使い方などを記事にまとめておきたいところです。