Google Fontsをタグ付けし、Goofonts.comを作成する方法

Goofontsis開発者妻とデザイナー夫によって署名されたサイドプロジェクト。どちらもタイポグラフィの大ファンです。 Fontsandをタグ付けしてきました。これにより、適切なフォントを検索して見つけやすくするWebサイトが作成されました。

フロントエンドのバックエンドおよびnuxtjs（avue.jsフレームワーク）のgoofontsuses wordpress。 Goofonts.comの背後にあるストーリーをお話しし、私たちが選択したテクノロジーと、このプロジェクトにどのように適応して使用したかに関するいくつかの技術的な詳細を共有したいと思います。

Goofontsを構築した理由

この記事を書いている時点で、Google Fontsが提供する977の書体があります。 TheGoogle Fonts Developer APIを使用して、いつでも正確な番号を確認できます。すべてのフォントの動的リストを取得できます。

Google Fonts Webサイトには、すべてのフォントをプレビューし、トレンド、人気、日付、または名前で並べ替えることができる美しいインターフェイスがあります。

しかし、検索機能はどうですか？

Serif、Sans-Serif、ディスプレイ、手書き、およびMonospaceの5つのカテゴリでフォントを含めて除外できます。

スクリプト内で検索できます（拡張、キリル語、またはDevanagari（Googleフォントのサブセットと呼ばれる）。ただし、複数のサブセット内で一度に検索することはできません。

厚さ、スラント、幅、「幅スタイル」の4つのプロパティで検索できます。バリアントとも呼ばれるスタイルは、スタイル（イタリコールレギュラー）とウェイト（100,200、最大900）の両方を指します。多くの場合、ボディフォントには、通常、太字、斜体の3つのバリエーションが必要です。 「スタイルの数字」プロパティは、多くのバリエーションを備えたフォントを整理しますが、「通常の大胆な、斜体」コンボにあるフォントを選択することはできません。

また、クエリを入力できるカスタム検索フィールドもあります。残念ながら、検索はフォントの名前のみで実行されます。したがって、結果には、Googleフォント以外のサービスからFontファミリが独自に含まれています。

例として「漫画」のクエリを取りましょう。その結果、外部鋳造リノタイプから「漫画」が生じます。

2つの高度に様式化された書体を要求したプロジェクトに取り組んだことを覚えています。1つは古いワイルドウェストを呼び起こし、もう1つは脚本を模倣しています。それは私がGoogleフォントにタグを付けることにした瞬間でした。:)

Goofonts in Action

Goofontsの仕組みをお見せしましょう。右側の暗いサイドバーは、「検索」領域です。検索フィールドにキーワードを入力できます。これにより、「と」検索が実行されます。たとえば、一度に漫画とスラブのフォントを探すことができます。

キーワードの束を引き出しました。それらのいずれかをクリックします。プロジェクトに特定のサブセットが必要な場合は、サブセットセクションで確認してください。また、フォントに必要なすべてのバリエーションを確認することもできます。

フォントが好きな場合は、そのハートアイコンをクリックすると、ブラウザのLocalStorageに保存されます。 goofonts.com/bookmarkspage.togetherでブックマークされたフォントを見つけることができます。それらを埋め込む必要があるかもしれません。

私たちがそれを構築する方法：WordPress部分

開始するには、各フォントをプレビューしてタグ付けできるインターフェイスが必要でした。また、Thosetagsを保存するためにデータベースも必要でした。

WordPressの経験がありました。さらに、WordPressにはREST APIが付属しており、フロントエンドのデータを処理するための複数の可能性が開きます。 thatchoiceは迅速に作られました。

私は最も簡単な可能な初期セットアップに行きました。各フォントは投稿であり、キーワードに投稿タグを使用します。 Acoustom Post Typecは同様に機能するはずですが、データにのみWordPressを使用しているため、デフォルトのコンテンツタイプは完全に機能します。

明らかに、すべてのフォントをプログラムで追加する必要がありました。また、新しいものを追加したり、利用可能な新しいバリアントやサブセットを追加したりするなど、フォントをプログラム的に更新できる必要がありました。

以下に説明するアプローチは、外部APIを介して利用可能な他のデータで役立ちます。カスタムWordPressプラグインでは、APIからの更新を確認できるメニューページを登録します。簡単にするために、ページにはタイトル、更新をアクティブにするボタン、および視覚的なフィードバックのために進行状況バーが表示されます。

 /**
 *カスタムメニューページを登録します。 
 */
function Register_custom_menu_page（）{
  add_menu_page（ 
    「WordPressへのGoogleフォント」、 
    「WP Goofonts」、 
    「manage_options」、 
    'wp-goofonts-menu'、 
  function（）{？>        
    <h1 id="GoogleフォントAPI"> GoogleフォントAPI </h1>
    実行
    <p> </p>        
    <progress max="100" value="0"> </progress>
  <p><br> JavaScriptPartを書くことから始めましょう。 AjaxをWordPressを使用して使用する例のほとんどは、jQueryとthejquery.ajaxmethodを実装しますが、データのシリアル化を使用して、Jqueryを使用せずに同じことを取得できます。</p><p> LoadingAxioSandqsの後、カスタムスクリプトインチフッターをtoloadしたいです<em>。</em></p><pre rel="PHP" data-line=""> add_action（ 'admin_enqueue_scripts' function（）{
  wp__script（ 'axios'、 'https://unpkg.com/axios/dist/axios.min.js'）;
  wp_enqueue_script（ 'qs'、 'https://unpkg.com/qs/dist/qs.js'）;
  wp_enqueue_script（ 'wp-goofonts-admin-script'、plugin_dir_url（__file__）。
}）;

JavaScriptがどのように見えるかを見てみましょう：

 const button = document.getElementById（ 'WP-GOOFONTS-BUTTON'）
const info = document.getElementById（ 'Info'）
const Progress = document.getElementById（ 'Progress'）
constupdater = {
  TotalCount：0、
  Total -checked：0、
  更新：[]、
  init：async function（）{
    試す {
      const allfonts = wait axios.get（ 'https://www.googleapis.com/webfonts/v1/webfonts?key=api_key&sort=date'）
      this.totalcount = allfonts.data.items.length
      info.textContent = `fetched $ {this.totalcount} fonts.`
      this.updatePost（allfonts.data.items、0）
    } catch（e）{
      console.error（e）
    }
  }、
  updatepost：async function（els、index）{
    if（index === this.totalcount）{
      戻る
    }                
    const data = {
      アクション： 'gooofonts_update_post'、
      フォント：els [index]、
    }
    試す {
       const apirequest = axios.post（ajaxurl、qs.stringify（data））
       this.totalchecked  
       Progress.setattribute（ 'value'、math.round（100*this.totalchecked/this.totalcount））））））
       this.updatePost（els、index 1）
    } catch（e）{
       console.error（e）
      }
   }
}

button.addeventlistener（ 'click'、（）=> {
  updater.init（）
}）

theinitmethodは、thegooglefonts APIにリクエストを行います。 APIからのデータが利用可能になったら、WordPressサーバーへのPOSTリクエストでSansanIndidividualフォントを送信する再帰的な非同期PostMethodを呼び出します。

現在、WordPressがAjaxを特定の方法で実装することを覚えておくことが重要です。まず第一に、各リクエストはtowp-admin/admin-ajax.phpを送信する必要があります。このURLは、グローバルJavaScriptvariableajaxurlとして管理エリアで利用できます。

第二に、すべてのWordPress Ajax要求には、データにAnactionArgumentを含める必要があります。アクションの値は、サーバー側で使用されるフックタグを決定します。

私たちの場合、アクション値はasgoofonts_update_postです。つまり、サーバー側で起こることは、thewp_ajax_goofonts_update_poshookによって決定されます。

 add_action（ 'wp_ajax_goofonts_update_post'、function（）{
  if（isset（$ _post ['font']））{
    / * POSTタイルはフォントの名前です */
    $ title = wp_strip_all_tags（$ _post ['font'] ['family']）;
    $ variants = $ _post ['font'] ['variants'];
    $ subsets = $ _post ['font'] ['Subsets'];
    $ category = $ _post ['font'] ['category'];
    / *投稿が既に存在するかどうかを確認 */
    $ object = get_page_by_title（$ title、 'object'、 'post'）;
    if（null === $ object）{
      / *新しい投稿とセットカテゴリ、バリアント、サブセットをタグとして作成します */
      gooofonts_new_post（$ title、$ category、$ variants、$ subsets）;
    } それ以外 {
      / * $バリアントまたは$サブセットが変更されたかどうかを確認 */
      Goofonts_update_post（$ object、$ variants、$ subsets）;
    }
  }
}）;

function gooofonts_new_post（$ title、$ category、$ variants、$ subsets）{
  $ post_id = wp_insert_post（array（
    'post_author' => 1、
    'post_name' => sanitize_title（$ title）、
    'post_title' => $タイトル、
    'post_type' => 'post'、
    'post_status' => 'ドラフト'、
    ））
  ）;
  if（$ post_id> 0）{
    / *タグ付けの簡単な部分;）フォントカテゴリ、バリエーション、サブセット（これら3つはGoogleフォントAPIから来ています）をタグとして追加します */
    wp_set_object_terms（$ post_id、$ category、 'post_tag'、true）;
    wp_set_object_terms（$ post_id、$ variants、 'post_tag'、true）;
    wp_set_object_terms（$ post_id、$ subsets、 'post_tag'、true）;
  }
}

このようにして、1分も経たないうちに、ダッシュボードのドラフトをほぼ1,000人のポストドラフトにすることになります。それらはすべて、いくつかのタグが既に設置されています。それは、プロジェクトの重要で最も時間のかかる部分が始まる瞬間です。各フォントのタグを1つずつ手動で追加する必要があります。
この場合、デフォルトのWordPressエディターはあまり意味がありません。必要なのは、フォントのプレビューです。 fonts.google.comのフォントのページへのリンクも便利です。

Acaustom Metaboxdoは仕事を非常にうまくいきます。ほとんどの場合、カスタムフォーム要素にメタボックスを使用して、投稿に関連するカスタムデータを保存します。実際、メタボックスの含有量は、実際にはすべてのHTMLである可能性があります。

関数display_font_preview（$ post）{
  / *フォント名、たとえばAbril Fatface */
  $ font = $ post-> post_title;
  / * urlのようにフォント、たとえばablil fatface */
  $ font_url_part = inprode（ ''、Explode（ ''、$ font））;
  ？>
  <div> 
    <link href="<%EF%BC%9Fphp%20echo%20'https://fonts.googleapis.com/css?family='%E3%80%82%24%20font_url_part%E3%80%82%20'%EF%BC%86display%20=%20swap';%EF%BC%9F>" rel="styleSheet">
    
      <h2>  </h2>
      <a href="<%EF%BC%9Fphp%20echo%20'https://fonts.google.com/specimen/'%E3%80%82%24%20font_url_part;%EF%BC%9F>" blank rel="noopener"> Google fonts </a>
    
    <div contentedable="true" style="font-family：<？php echo $ font;？>">
      <p>クイックブラウンフォックスは怠zyな犬を飛び越えます。</p>
      <p style="Text-Transform：大文字;">クイックブラウンフォックスが怠zyな犬を飛び越えます。</p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p>＆！ ; ？ {} [] </p>
    </div>
  </div>
<p>タグ付けフォントは、多くの繰り返しを伴う長期的なタスクです。また、大量の一貫性が必要です。そのため、タグ「プリセット」のセットを定義することから始めました。たとえば、それは次のとおりです。</p><pre rel="JavaScript" data-line=""> {
  / * ... */
  コミック：{
    タグ：「コミック、カジュアル、非公式、漫画」
  }、
  筆記体：{
    タグ：「筆記体、書道、台本、原稿、署名」
  }、
  / * ... */
}

次に、いくつかのカスタムCSSとJavaScriptを使用して、プリセットボタンのセットで濃縮することにより、WordPressエディターとタグフォームを「ハッキング」しました。

私たちがそれを構築する方法：フロントエンドパーツ（nuxtjsを使用）

thegoofonts.cominterfaceは、フランスのグラフィックアンドウェブデザイナー（たまたま私の夫）であるシルヴァンギザードによって設計されました。私たちは、「検索」領域を際立たせたシンプルウィッタが欲しかった。 Sylvainは、Google Fontsのアイデンティティからそれほど遠くない色に意図的に行きました。私たちは、ユーザーの混乱を招くユニークなものとオリジナルのものを構築することのバランスを探していました。

IdidはhesitateCoing WordPress fortheTheback-endではありませんが、Ididはフロントエンドでそれを使用したくありません。私たちはアプリのようなエクスペリエンスを目指していましたが、私は個人的には、特にvue.jsを使用してJavaScriptでコーディングしたいと考えていました。

WordPressを使用してWebサイトの例に出くわし、試してみることにしました。選択はすぐに行われました。 Nuxtjsは非常に人気のあるVue.jsフレームワークであり、そのシンプルさと柔軟性を本当に楽しんでいます。
100％の静的なWebサイトで終わるために、さまざまなNuxtJS設定を走り回っています。完全に静的なソリ​​ューションは最もパフォーマンスが高いと感じました。全体的なエクスペリエンスは最も流動的であるように見えました。つまり、ワードプレスサイトはビルドプロセス中にのみ使用されることを意味します。したがって、それは私のローカルホストで実行できます。ホスティングコストを排除するため、これは無視できません。何よりも、セキュリティ関連のWordPress構成をスキップして、セキュリティ関連のストレスの緩和を軽減できます。）

Nuxtjsに精通している場合、おそらく完全な静的生成は（まだ）Nuxtjsの一部ではないことを知っています。プレレンダリングされたページは、ナビゲートするときに再度データを取得しようとします。

だからこそ、私たちは何らかの形で100％の静的生成を「ハッキング」しなければなりません。この場合、各ビルドプロセスの前に、フェッチされたデータの有用な部分をAjsonfileに保存しています。これは、特にそのビルダーフックに感謝します。

フックは通常、NUXTモジュールで使用されます。

 / * modules/beforedbuild.js */

const fs = require（ 'fs'）
const axios = require（ 'axios'）

const sourcepath = 'http：//wpgoofonts.local/wp-json/wp/v2/'
const path = 'static/allfonts.json'

module.exports =（）=> {
  / *ファイルにデータを書き込み、既に存在する場合はファイルを置き換えます */
  const storedata =（data、path）=> {
    試す {
      fs.writefilesync（path、json.stringify（data））
    } catch（err）{
      console.error（err）
    }
  }
  async関数getData（）{    
    const fetchedtags = axios.get（ `$ {sourcePath}タグ？per_page = 500`）
      .catch（e => {console.log（e）; return false}）
    
  / * tag_idのオブジェクトを作成：tag_slug */
    const tags = fetchedtags.data.reduce（（acc、cur）=> {
      acc [cur.id] = cur.slug
      ACCを返します
    }、{}）
    
  / *総数またはページを知りたい */
    const mhead = axios.head（ `$ {sourcePath}投稿？per_page = 100`）
      .catch（e => {console.log（e）; return false}）
    const totalpages = mhead.headers ['x-wp-totalpages']

  / *すべてのフォントを取得しましょう */
    fonts = []
    i = 0とします
    while（i <totalpages const response="wait" axios.get post fonts.push.apply fonts="（fonts）.reduce（（acc、el）="> {
      acc [el.slug] = {
        名前：el.title.rendered、
        タグ：el.tags.map（i => tags [i]）、
      }
      ACCを返します
    }、{}）

  / *フォントオブジェクトを.jsonファイルに保存 */
    保存された（フォント、パス）
  }

  / *各ビルドの前にこれが起こることを確認してください */
  this.nuxt.hook（ 'build：before'、getData）
}</totalpages>

 / * nuxt.config.js */
module.exports = {
  // ...
  buildmodules：[
    ['〜モジュール/beforebuild']
  ]、、
// ...
}

ご覧のとおり、タグのリストとリスト投稿のみをリクエストします。習得したことは、デフォルトのWordPressRest APIエンドポイントのみを使用し、構成は必要ありません。

最終的な考え

Goofontsに取り組むことは長期的な冒険でした。また、積極的に維持する必要があるのは、この種のプロジェクトでもあります。新しい書体、サブセット、またはバリアントのGoogleフォントを定期的にチェックし続けています。新しいアイテムにタグを付けてデータベースを更新します。最近、私は家族と共同で共同であることを発見することに本当に興奮していました。また、あまり知られていない標本の中に個人的なお気に入りがあります。

定期的なワークショップを提供するトレーナーとして、Goofontsで遊んでいる実際のユーザーを観察できます。プロジェクトのこの段階では、できるだけ多くのフィードバックを取得したいと考えています。 Goofontsは、Webデザイナーにとって便利で便利で直感的なツールであることを望んでいます。ToDo機能の1つは、その名前でフォントを検索しています。また、ブックマークされたセットを共有し、フォントの複数の「コレクション」を作成する可能性を追加したいと思います。

開発者として、私はこのプロジェクトの学際的な側面を本当に楽しんだ。 WordPress Rest APIで作業したのは初めてでした。Vue.jsでの最初の大きなプロジェクトであり、タイポグラフィについて多くのことを学びました。

できれば、何か違うことをしますか？絶対に。それは学習プロセスでした。一方、メインツールを変更するとは思いません。 WordPressとnuxt.jsの両方の柔軟性が正しい選択であることが証明されました。今日から始めて、私は間違いなくグラフクルを探索するのに時間がかかりました。おそらく将来それを実装するでしょう。

議論された方法のいくつかが役立つと思うことを願っています。前にも言ったように、あなたのフィードバックは非常に貴重です。質問や発言がある場合は、コメントでお知らせください！

以上がGoogle Fontsをタグ付けし、Goofonts.comを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。