フロントエンドの地獄
cover image

日本語のフリーフォントをまとめてためせる:ためしがき

商用フリーな日本語フォントをまとめて試せるWebサービス

制作 2018

https://tameshigaki.jp/

ためしがき - 日本語のフリーフォントを検索できるサイト

日本語のフリーフォントを好きな言葉・文章で試せるサイト

https://tameshigaki.jp/

お好きな文字・文章を入力していただくと、

いろんなフォントをまとめて試せます
いろんなフォントをまとめて試せます

色んなフォントでの見た目をまとめて確認することが出来るサイトです。

サイトで使っているフォントは商用利用可能なフリーフォントとなっており、フォントをタップすると表示される画面から、配布先のサイトに遷移することが出来ます。

フォントを試してシェアするところ
フォントを試してシェアするところ

また、フォントをシェアするボタンを押してから、Twitterやfacebookでシェアすると

こんな感じで入力した文字とフォントのプレビューがされます。

SNS認証なども無いので気軽につぶやいてみてください!

技術的な話

基本的にフロントエンドの技術のみで作っています。

ざっくり図にするとこんな感じです。

ざっくりとしたシステム構成図
ざっくりとしたシステム構成図

基本はシングルページアプリケーションを作る上でのライブラリのNuxt.js(Vue.jsのフレームワーク)と、サーバーレスでバックエンドを代わりにいろいろやってくれるFirebaseの組み合わせで、

コンテンツ管理はヘッドレスCMSであるContentfulを使い、CircleCIでCMSの内容とソースをまとめてFirebase Hostingにデプロイしています。

フォントのシェア機能

  1. 画像の生成はhtml2canvas
  2. Firebase Authで匿名認証
  3. Firebase Strageに匿名認証の認証情報を使って制限をかけてアップロード
  4. Firebase firestoreに認証した権限を使って画像パスを書き込み
  5. Firebase functionsを使ってDBを読み取りOGP表示用HTMLを生成
  6. アクセスがあったらTOPにリダイレクト

大体全部Firebaseを使ってどうにかしています!Firebase最高!

ためしがき - 日本語のフリーフォントを検索できるサイト

日本語のフリーフォントを好きな言葉・文章で試せるサイト

https://tameshigaki.jp/