Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。
Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。
作ったものと動機
「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標)
アイコンはこんな感じのデザインです。
ここがこだわり
- サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像を表示している(全ページテキストデータしかない)
- PNGファイルダウンロードはSVGファイルからPNG形式のラスターデータをJSで生成。動的に生成しているのでユーザーの好きなサイズでダウンロード可能
- 同様に、SVGファイルの中身をJS書き換えられるので背景色を変えられる
- サイトで配布しているアイコンを使ってアイキャッチ画像を簡単に作成できるツールを作成
- i18n対応
普段はバックエンドの開発をしているのですが、何か新しい技術に触れてみたいと考えて、バックエンドなし、DBなし、APIなしで純フロントのみで何か作ってみたいと思って開発をはじめました。また、その時にユーザーにコンテンツを増やしてもらう型のサービスはアイデアがなかったので、興味を持って手を動かし始めていたフラットアイコン制作で自分でコンテンツを作ろうと思ってこの形になりました。
VueもReactも触れたことがなく、フロント技術については初めてなことが多かったですが、公式や技術記事で情報が豊富だったのでなんやかんや形になるまでになりました。
Gatsby.jsかNuxt.jsか
作りはじめはNuxt.jsでVueベースの開発をしていたのですが、半分くらい作ったところでReact製のGatsby.jsに乗り換えました。
Gatsby.jsは言わずと知れたReact製の静的サイトジェネレーターです。
乗り換えた理由は単純で、世界的なシェアの記事をたまたま見て、Nuxtに比べてGatsbyやNextが海外で圧倒的シェアを取っていたこと。せっかくなので世界の流れに乗ってみようかなと考えました。
個人的にはNuxt.jsのHTML, CSS, JSがそれぞれ一つのファイル内で分離して記述できるやり方がわかりやすくて楽しかった一方、Gatsbyは全てJSの中で記述するという感じで慣れるのに時間がかかりました。それでも、少しずつReact Hooksやコンポーネント分離を考えて実装していくことでだいぶ慣れてきました。なお、出来上がったもののコンポーネント分割についてはクソです。pageに全部書いているところもあります。もっと勉強してそのうちリファクタリングします(するのか？)
TailwindCSS
ユーティリティーファーストという考え方で作られているCSSフレームワークです。正直、信者になりつつあるくらいTailwindCSS最高と言いたい。
何が良い？
TailwindCSSはpadding: 8px;みたいな最小単位の（ユーティリティのみの）スタイルがあらかじめCSSクラスp-2のように一つ一つ定義されていて、開発者は定義済みクラスを組み合わせてスタイルを構築していくことができるフレームワークです。
CSSのクラス名考えて、CSSにスタイル記述して、HTMLに書いてという一連の流れを一切せずに、ひたすらHTMLにクラスを並べて書いていくだけでデザインが構築できます。ファイル間を行ったり来たりすることなく、速くUIが作れます。
下にあるのは、FLAT SVG DESIGNSで使っているとあるボタンに書いてあるクラスです。一見「うっ」となりますが、スタイルの全てがここに書いてあるので、慣れればボタンが透けて見えます(本当に)。
class="w-full h-full text-sm cursor-pointer bg-teal-600 hover:bg-teal-500 text-teal-100 py-2 px-4 rounded inline-flex flex-col justify-center items-center border border-gray-400"
class="green-button"みたいなセマンティックなスタイルに比べて詳細が全て把握できるし、CSSファイルをみにいく必要がなくなります。
慣れたらスタイルを当てていくのが楽しくてしょうがないです。何が良いってひたすら楽しい。これに尽きます。
技術的な話だったり、思想的な話は詳しい記事がたくさんありますのでそちらを参照いただくとして、僕からは「楽しい！」これだけ言っておきます。
こちらはgithubの言語別の記述量の割合ですが、スタイルドコンポーネント使っていなくて、Tailwindで表現出来なかった部分は純粋なCSSに書いてます。書いたCSSはメディアサイズの分岐含めても100行くらいです。
Netlify
無料で始めたかったのでホスティングサービスはNetlifyにしました。GatsbyでもNuxtでもGithubのリポジトリにプッシュすると勝手にビルドしてくれて、チュートリアル通りに設定して特に詰まることなく設定できました。https, IPv6もボタン一つで対応しています。
バックエンドとかインフラのこと何にも気にしなくて良いの楽しい。
画像検索
一応検索機能があります。DBを持っていないのでクライアント側で検索します。どうやっているかというと簡単で、全てのSVG画像のファイル名、カテゴリ、タグ情報(arrow, 矢印, 右など)を含んだJSONデータを手作りしてこれを検索のタイミングでクライアント側から取得し、簡易キーバリューストアに見立ててJSで検索するだけです。
JSONデータには最小限の情報しかないので今のところファイルサイズも15KBくらい。ネットワークの速度に全く影響しない範囲です。仮に1000個くらいアイコン作っても200KBくらいでしょうか。機密情報も何にもないので見られても何にも問題ありません。
ファイルが大きくなってきたらWeb Storageに期限つきで保存してそこから検索というのを試してみてもいいかも知れません。
また、このJSONデータですが、Gatsbyビルド時に参照して、トップページやアイコン一覧ページを自動生成する役割もあります。この辺りはGatsby.jsのGraphQLでよしなにやってくれていて、トップページも一覧ページも静的なファイルになっています。
i18n
英語と日本語対応してみました。gatsbyプラグインのgatsby-plugin-intlを使っています。公式サイトの手順通りに作っていったら問題なく英語への切り替えができるようになりました。
ちなみに一部ですが、こんな感じでen.jsonとja.jsonをひたすら書いていく感じです。
{
"title": "FLAT SVG DESIGNS",
"under construction": "Sorry, this page is Under Construction...",
"category": {
"home": "Home",
"icons": "Icons",
"illusts": "Illustrations",
"animes": "Animations",
"tools": "Tools",
"refs": "Refferences",
"about": "About",
"terms": "Terms of Use",
"contact": "Contact",
"download": "Download"
},
"side": {
"welcome": "Welcome to FLAT SVG DESIGNS!",
"about": "Free vector(SVG) icons and illustrations with flat design.",
"check terms": "Check Terms of Use"
}
}
こうやって準備していた要素を、各ページの文字を表示したいところで
{intl.formatMessage({ id: "side.about" })}
と書くだけ。これで公式通りに設定をちょっとすると勝手に/en/と/ja/のURL切り替えをしてくれる。とってもに簡単にできました。できれば中国語も作ってみたい。
アイコン、イラスト作成
アドビの月額を払うお金がないので、Affinity Designerという買い切りソフトを使用してアイコンとイラストを作成しています。正直、デザイン系の知識皆無から少しずつ使い方を覚えて作っているので最初に作ったアイコンのクオリティはお察しレベルです。。。
一番大変だったのはサイト独自のカラーパレットを選ぶこと。5回くらいカラーパレットを試行錯誤してこの配色に決まりました。このサイトとしては一生付き合っていく色になります。
なお、イラストツールからエクスポートしたSVGデータはSVGOを使って軽量化してます。
PNGファイル生成
PNGファイルの生成には偉大なるJSライブラリのCanvgとhtml2canvasを使わせてもらっています。
アイキャッチ画像ジェネレーター
当サイトのアイコンを一つ選んで、エフェクトと文字と色を入力すればこの画像が生成できます。こちらもCanvgとhtml2canvasを使っています。html2canvasはSVG画像を直接PNG変換出来ない仕様なので、Canvgを使ってPNG変換した後にhtml2canvasで画像生成をしています。
制作期間
Nuxt.jsでサービスを作り始めた時のinitial commitが2020/09/02でしたので、ここまでの制作期間は子供寝かした後に毎日ちょこちょこ進めて1ヶ月半というところです。途中のGatsby.jsへの乗り換えと、アイコン作成も含みます。
ロードマップ
今後やりたいことは今のところこんな感じです。
- SVGアニメーションを入れたアイコン作成
- SVGの使い方を網羅した技術記事の作成(逆引きリファレンス的な)
- SVG→PNG変換する系のいろんなツール作成
- いろんなカラーパレットを用意して好きに選べるように
- アイコンとイラスト増やす(一番大事)
- アイコンが増えたらページネーション
ここまで作ってみての感想
イラスト作成からフロント周りまで初めての体験が多かったですが、チュートリアルが豊富に用意されていてどハマりすることはありませんでした。いい時代ですね。ちなみにフラットアイコンの作り方なんてのもYoutubeにたくさんハンズオンあるので、いたれりつくせり。
あと、DB持たない、ユーザー認証持たないサービスなのでセキュリティ周り何にも気にせず作れました。個人開発で本番ユーザーデータを持つのがまだ怖いので、ちょうどよかったなと思います。
あともう一度言います。TailwindCSS最高。
じっくり育てていこうと思いますので、今後ともよろしくお願いします！
Discussion