[Nuxt.js]2.9以下 Google material icon(マテリアルアイコン)を使う

みんな大好きGoogle fontsではアイコンも利用できますね。私は少し前までfontawesomeを使用していたのですが、最近はちょっと非推奨の環境が増えてきたので、Google fontsのアイコンに鞍替えしました。

以下はnuxt.js2.9以下で実装するための手順です。それ以降はこちらの記事にまとめました。

[Nuxt.js]2.9以上 Google material icon(マテリアルアイコン)を使う

参考

https://developers.google.com/fonts/docs/material_icons

https://fonts.google.com/icons?selected=Material+Icons

nuxt.config.jsにリンクを追加

nuxt.config.jsにGoogle Material Iconsのリンクを追加します。


    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
      },
    ],

Google fontsサイトから使いたいアイコンを取得

下記サイトでアイコンを検索し、任意のアイコンを選択します。

https://fonts.google.com/icons?selected=Material+Icons

選択すると右側にコードが出ますので。

material icon

コピーします。

ページやコンポーネントにペースト

試しにheader.vueへ入れてみました。

header.vue
header.vue

表示結果

※左端のシェアアイコンです

[Nuxt.js]コンポーネントが表示されない(nuxt.config.jsにパスは通した?)

久しぶりにNuxtプロジェクト作成していつも通りコンポーネント作成したらコンポーネントが表示されなくて困ったので備忘録。Atomic Design(アトミックデザイン)など、componentsフォルダの中に分類のためのフォルダを作成している人のための記事です。

結論から言うと、

  • 新バージョンではコンポーネント名に内包されているフォルダ名をつけなければいけない(例:Atomsフォルダに入っているButton.vueコンポーネントは<AtomsButton/>と表記)
  • それが嫌ならnuxt.config.jsでパス通してね(下記に記載)

ということでした。

全部公式に載ってます。

https://nuxtjs.org/docs/directory-structure/components/#nested-directories

当方環境

  • @nuxt/cli v2.15.8
  • MacOS 12.1

nuxt.config.jsでパスを通す

以下公式からの引用ですが、

components/
  base/
      foo/
         CustomButton.vue

このような階層構造を持つコンポーネントをほかのコンポーネントやページで使用する際、コンポーネントの記載はこのようになります。

<BaseFooCustomButton />

でもいちいち上位フォルダの名前記載するの面倒ですよね。というわけパスを通します。
nuxt.config.jsを開き、componentsの箇所に追記します。

以下、Atomic Designを採用している場合の例です。

  components: {
    dirs: [
      '~/components',
      '~/components/atoms',
      '~/components/molecules',
      '~/components/organisms',
    ],
  },

これで、今まで(?)通り、コンポーネントのタグ名は<Button />のみでOKとなりました!

 

めでたしめでたし。

 

 

[備忘録]Google Analytics4(GA4)とUniversal Analytics(UA)の違い

免責:

  • GA4は本格的な導入が始まって間もないため、今後管理画面の内容や名称が変わる可能性があります。本記載は2022年5月22日現在のものに則ります。
  • 私は英語表記を採用しているため、画面の表記と文章内での名称が異なる場合があります。できるだ本文内では日本語での説明を行うように注力していますが、お含みおきください。

そもそもUAとGA4の違いってなんでしょう

 

レポート

  • UA…ABC分析
  • GA4…ライフサイクル(集客->エンゲージメント->収益化->維持)

UAはABC分析

ABC分析のABCは、Acquisition(集客)、Behavior(行動)、Conversion(コンバージョン)を指しています。その名の通り、集客がどれくらいできているか?その後のユーザ行動はどのようになっているか?そして顧客はどれくらいコンバージョンに至っているか?ということを分析するのが、ABC分析で、それがUniversal Analyticsのレポートの根幹を成していました。

GA4はその先まで分析

対して、GA4は一味違います。トップのメニューはよりシンプルになったように見えますが、レポートを開いてみると、リアルタイム分析の下に、ライフサイクルがAquisition(集客)、Engagement(エンゲージメント)、Monetization(収益化)、Retention(維持率)…と続木、そしてユーザー分析メニューが配置されています。

このことからもわかるように、GA4はコンバージョンをゴールとしていません。

購入や登録してもらったら終わり、ではなく、その後のユーザーのコミットメント、つまり顧客維持(LTV/Life Time Value)まで分析することで、より顧客満足度をアップさせられる施策を目指せるツールとなっているのです。

レポートの基本的な考え方

GA4のレポートは、全部で19ほど。大きくは

  • レポート
  • 広告

の2種類ですが、レポート内のカテゴリとしては先ほどのメニューからもわかるとおり、

  • ライフサイクル
  • ユーザー

の2つに分類できます。

 

標準レポート

UAのみならず、GA4でもディメンションと指標の意味を知っておくことはレポートを読み取る上で重要です。

GA4ではレポートの数が減っているように見えますが、実はディメンションの切り替えを行うことで、レポートの表示が変わる仕組みとなっています。

▼ユーザー>ユーザー属性>ユーザー属性の詳細

ディメンションには、国や地域、言語、年齢、性別などが用意されています。ですので、ディメンションを読み取る際には国別の、言語別の、年齢別の、性別ごとの、などと、ことばを置き換えて解釈していただくとわかりやすいと思います。

つまり、それぞれのレポートはデフォルトのディメンションが初期設定として採用されていますが、ユーザー属性の詳細からディメンションを切り替えることで、多様なレポートを参照することができるのです。

印のついたそれぞれの項目について、ディメンションを変更できる(イベントやコンバージョンなど、項目によっては単一のディメンションのみ採用可能)。

各項目において使用できるディメンションは公式にまとめられていますので、必要に応じて参照してみてください。

 

探索

アナリティクスに訪れるたびに期間やディメンションなど設定を切り替えたりするのは面倒ですから、UAではカスタムレポート機能を使用していた方も多いのではないでしょうか。

このUAで備わっていたカスタムレポートは、GA4でExplore(探索)にまとめられています。

探索
サイドメニュー3つめ

また探索のレポートには6つのテンプレートがあり、用途に応じてレポートを選べます。GA4の大きな強みの1つと言えると思います。

テンプレート
選べる6種類

 

セグメント

UAでは、レポートページ上部に大きく鎮座していたセグメントですが、

セグメント(UA)
セグメント(UA)

GA4ではこのセグメントが探索にまとめられています。

探索メニューから任意のフォーム形式を選ぶと、その中にセグメントのセクションを確認できます。

探索内のセグメント
探索内のセグメント

 

ユーザーの識別

GA4ではユーザーごとの分析が強化された、とはよく聞く話かもしれませんが、そのベースとなっているのが、ユーザーの識別方法です。

UAもGA4も、ユーザーの識別にはCookieを使用していますが、それはブラウザごとに保存されるため、同じユーザーの異なるブラウザでのアクセスは特定できない仕様です。User ID(ログインID)を利用したユーザー特定のみ、User ID ビューで実現していました。

一方、GA4では

  • User ID(ログインID)
  • Google シグナル
  • Cookie

という3つの要素を利用し、確度の高い順にユーザーを識別しているため、たとえば同じユーザーが複数のデバイスを使用してアクセスしている場合でも、同一ユーザーとして識別できるようになる可能性が高くなります。

一連の行動はそれぞれ別個のセッションとして記録されていますが、Google アナリティクス 4 なら、以下の 3 種類の識別情報を組み合わせることにより、デバイスをまたいだ 1 つのユーザー ジャーニーとして認識できます。

[GA4] レポート用識別子

設定方法

サイドメニューの設定>プロパティ>ユーザーの識別子を選択。

デフォルトの設定にもよるかもしれませんが、Googleシグナルは有効にされていない場合があります。

Reporting Identtity(ユーザーの識別子)
Reporting Identtity(ユーザーの識別子)

有効にするには、

  1. アナリティクスの管理画面にて管理をクリック
  2. Googleシグナルを有効するプロパティに移動
  3. [プロパティ]列で[データ設定]>[データ収集]に移動し、画像におけるGet startedボタンをクリック。
  4. 案内に沿って許可します。

どうやらプロパティごとに許可しないといけないみたいですね。

こちらを許可した場合、エンドユーザーに対しては、Googleとデータを共有している旨をプラポリなどに記しましょう。

Google シグナルのデータ収集設定下にも、確認ボタンが仕込まれています。

※GoogleシグナルをONにしても、Google広告をユーザーがOpt-inしていなければGoogleシグナルによるデータ収集は行えません

データモデル

GAがどのような形でデータが存在しているのかを理解することで、GA4とUAの違いが少し見えてきます。言ってしまえば、データ構造のことですね。

GA4では、イベントとパラメータというデータ構造を持っています。パラメータと聞くと分かりにくいかもしれませんが、イベントの「属性」と置き換えてしまっても構いません。

たとえば、add_payment_info(ユーザーの支払い情報)送信に関して持たせられるパラメータは、

  • 通貨(currency)
  • 金銭的価値(value)
  • クーポンコード(coupon)
  • 支払い方法(payment_type)
  • 購入商品(item)

などがあります。その中にさらにデータ構造を入れ込むこともできて、購入商品パラメータの中に商品idや商品名を含ませることもできます。こういう感じ↓

gtag("event", "add_payment_info", {
  currency: "USD",
  value: 7.77,
  coupon: "SUMMER_FUN",
  payment_type: "Credit Card",
  items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
  ]
});

参照:Google アナリティクス 4 イベント

上の例では、イベント「add_payment_info」に対して、currency: “USD”,   value: 7.77,などのパラメータが紐づいています。

UAでは、ページビューやイベント、タイミングなどがヒット数として1階層の構造でカウントされていましたが、GA4ではこのヒットが「イベント」として複数の構造でまとめられるようになったということです。こうしたデータを「構造化データ」と言います。

参考:

https://www.seerinteractive.com/blog/ga4s-custom-dimension-parameter-data-model/

https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja

主なイベントには下記のようなものがあります。

  • first_visit … 初回訪問発生時に送信
  • session_start … セッション開始時に送信
  • page_view … ページビュー発生時
  • user_engagement … ユーザーがページフォーカスしていた時間を取得
  • scroll … 90%スクロール発生時に送信
  • click … 外部リンクへのクリック発生時に送信
  • view_search_result … サイト内検索が実行された時に送信

各イベントに対して、パラメータがあります。個々のイベント×パラメータ(key:value)の組み合わせは下記から確認できます。

https://support.google.com/analytics/answer/9234069?hl=ja

[GA4] 自動的に収集されるイベント
[GA4] 自動的に収集されるイベント
GA4ではExplore(探索)の機能が充実した分、自分好みのフィルタを自由にカスタマイズできるようになりました。そうなると、たとえば

  1. ディメンション:市区町村、国
  2. 指標:イベント数
  3. フィルタ:市区町村「Chiyoda City」
  4. フィルタ2:…
  5. フィルタ3:…

データ構造を理解していると、上記における1. ディメンション2. 指標は選択後、3.フィルタの設定を適切に行えるようになります。実際の探索画面に沿うとこんな感じです。

変数(緑色のボックス部分)から任意のディメンション、指標を登録し、右側のタブの設定(青ボックス部分)へドラッグ&ドロップ。

タブの設定の下を見ると、さらにフィルタ項目があるのが分かります。選択すると、現在タブの設定で登録されている変数が現れます。

任意の項目を選択し、フィルタ追加します。

上の例では市区町村だったので、

市区町村:Chiyoda City

のようにイベント名とプロパティの組み合わせがわかりやすかったですが、これが例えばイベント名をディメンションに設定した際、

イベント名:page_view

 

ユーザーを中長期的にわたって利用してくれるかどうかで分析するツール

 

 

活用方法

 

 

 

Webサイト制作 開発環境構築(Local環境)の流れ

備忘録です。

環境・前提

下記の環境・前提で開発しています。

  • Mac OS Monterey 12.1
  • Google Chrome  101.0.4951.54(Official Build) (arm64)
  • VSCode
  • Git管理

免責

仕事としてのWebサイト制作業務経験は多くなく、初学者です。

ドメイン名・サーバの確認

※ドメイン名とサーバがどのようにローカル環境に関わってくるか

 

ディレクトリを作成

デスクトップやDocumentsの中など、任意の場所にプロジェクトフォルダを作成します。

ネーミングは[projectname_frontend]などのようにしています。

例:

  • NPO法人Xのフロント作成の場合 … npox_frontend
  • 株式会社Yのバックエンド作成の場合 … y_backend

VSCodeで開く

VSCodeを起動し、⌘+Oから作成したプロジェクトフォルダを選択。

まだ何もない状態

New Fileを選択したらindex.htmlを作成します。

作成したhtml内で半角!を入力し、tabキーを押下するとhtmlのフォーマットが出てくるはずです。

あるいはHTMLテンプレートのBoilerplateを使っても良いと思います。

https://html5boilerplate.com/

langをjaに変更、title入力など現時点でわかる箇所を入力し、保存(⌘+S)。

全体の骨組みだけ先にマークアップしておきます。

VSCodeの場合は(htmlファイル内で)下記画像の状態でEnterキーを押すとHTMLに変換してくれます。省エネ!

VSCode成形前
VSCode成形後

ざっくり枠組み

<div id="wrap" class="st-wrap">
  <header id="header" class="sp-header">
     <h1 class="sp-header-logo">
       <a href="">
         <img src="" alt="" />
       </a>
     </h1>
     <p>test view</p>
  </header>

  <main id="container" class="sp-container"></main>

  <div class="sp-pagetop js-scrolltop" style="display: none"></div>

  <footer id="footer" class="sp-footer"></footer>
</div>
ちなみに保存したプロジェクトを素早くブラウザで確認するためのプラグインがあります。下記にまとめましたので、気になる方はぜひ。
https://nolyc.net/programming/vscode-live-server/

git管理

チームで分業したりしているとgit管理が必要になります。そうでなくても、一通りコーディングを終えた後にやっぱり前のバージョンに戻したい!という時があるので、私はどのプロジェクトでもgit管理はしておくことにしています。
会社ではbacklogを使用していますが、個人の方であればgithub(非公開)で管理するなどすれば良いと思います。
githubでのやり方は下記にまとめました。
https://nolyc.net/programming/git-connect-localtoremote/
上記記事ではSourceTreeを使用したGit管理方法を記載していますが、何もSourceTreeを使用せずともGit管理はVSCode上でできます。
https://code.visualstudio.com/docs/editor/versioncontrol
ここでは詳しい操作は省きますが、気になる方はググってみてください。
私が行った手順は以下の通りです。

VSCode上でのGit初期化

赤のアンダーラインが実行コードです

VSCode上でのGit初期化
VSCode上でのGit初期化
  1. VSCode上で⌘ + jでターミナルを開き
  2. cd ディレクトリパス(パスはVSCodeのフォルダ名を選択しOption + ⌘ +Cで取得できる)で該当ディレクトリに移動
  3. gitを初期化(git init)
  4. ブランチ名を変更(git branch)
  5. 現在のワークツリーの内容を全てindexに追加(git add *)
  6. コミット(git commit -m ‘first commit’)

GitHubへのリモートリポジトリへのpush方法は先ほど紹介した記事「[git]すでに作成したフォルダをgit管理してリモートと紐付け」にも書きました。

 

以降、随時アップデートしていく予定です。