<p>Webサイトやブログ記事で外部サイトへのリンクを貼る際、単なるURLだけでは情報が伝わりにくく、ユーザーのクリックを促しにくいことがあります。そこで活用したいのが<strong>OGP (Open Graph Protocol)</strong> です。OGPは、Webページの内容をSNSなどで魅力的に表示させるためのメタデータで、これを利用することで、リンクを<strong>画像付きのリンクカード</strong>として表示できるようになります。<br>この記事では、OGPデータを取得して記事内のリンクを自動的にリッチなリンクカードに変換するJavaScriptコードとその仕組み、そしてその見た目を整えるCSSについて解説します。<br>この記事ではNext.jsのApp routerを使って下記のようなリンクカードを作る方法をご紹介します！<br><br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/55c2386be523426eb7840307f47ca2d0/image.png" alt=""><br></p><h2 id="hbb0cd1e87d">OGPをリンクカードにすることの効能</h2><p>OGP（Open Graph Protocol）を使ってブログ記事のリンクをカード形式で表示することには、以下のような効能があります。</p><h3 id="hdf12f6407f">1. 視認性・訴求力の向上</h3><p>リンクカードはタイトル・説明・画像がまとまって表示されるため、テキストリンクよりも目立ち、ユーザーの興味を引きやすくなります。</p><h3 id="h4778f30e29">2. クリック率の向上</h3><p>画像や説明文があることで、リンク先の内容が直感的に伝わり、クリックされやすくなります。</p><h3 id="h36ebcbecea">3. SNSシェア時の最適化</h3><p>OGP情報が正しく設定されていれば、TwitterやFacebookなどSNSでシェアされた際にも美しいカード形式で表示され、拡散効果が高まります。</p><h3 id="hf8a33d97af">4. サイトの信頼性向上</h3><p>リンクカードはデザイン的にも整って見えるため、サイト全体の信頼感やプロフェッショナル感がアップします。<br>ブラキオではこのようにヘッドレスCMSから取得した記事をカスタマイズすることも可能<br></p><h2 id="h933754d026">リンクカード自動生成の仕組みを支える2つの主要なコード</h2><p>今回ご紹介するリンクカードの自動生成は、主に以下の2つのJavaScriptコードと、その見た目を定義するCSSによって実現されます。</p><ol><li><strong><code>getOGPData</code></strong>: 指定されたURLからOGPデータを取得するサーバーサイドの関数</li><li><strong><code>useParseBody</code></strong>: 記事本文からリンクを抽出し、<code>getOGPData</code>で取得した情報をもとにリンクカードに変換するReactフック</li><li><strong>CSS</strong>: 生成されたリンクカードの見た目を整えるスタイルシート</li></ol><h3 id="h6460b243cb"><code>getOGPData</code>: OGPデータを取得する</h3><p>まず、外部サイトのOGP情報を取得するための関数<code>getOGPData</code>から見ていきましょう。この関数は、指定されたURLにアクセスし、そのページのHTMLからOGP関連のメタデータを抽出します。</p><pre><code>'use server'
import * as cheerio from 'cheerio'

export type OGPData = {
  title: string
  description: string
  image: string
}

export async function getOGPData(url: string): Promise&lt;OGPData&gt; {
  try {
    // 1. 指定されたURLからHTMLを取得
    const response = await fetch(url)
    const html = await response.text()
    // 2. cheerioを使ってHTMLをパース
    const $ = cheerio.load(html)

    // 3. メタタグからOGP情報を抽出するヘルパー関数
    const getMetaTag = (name: string) =&gt; {
      return (
        $(`meta[name=${name}]`).attr('content') || // 通常のmetaタグ (name属性)
        $(`meta[property="og:${name}"]`).attr('content') || // Open Graphプロパティ
        $(`meta[property="twitter:${name}"]`).attr('content') // Twitter Cardsプロパティ
      )
    }

    // 4. 抽出した情報をOGPDataオブジェクトとして返す
    return {
      title: getMetaTag('title') || 'No title', // タイトル
      description: getMetaTag('description') || 'No description', // 説明
      image: getMetaTag('image') || '' // サムネイル画像
    }
  } catch (error) {
    console.error('Error fetching OGP data:', error)
    throw new Error('Failed to fetch OGP data')
  }
}</code></pre><h3 id="h315ce60898">コードのポイント</h3><ul><li><strong><code>'use server'</code></strong>: Next.jsのサーバーコンポーネントまたはサーバーアクションであることを示します。これにより、クライアントサイドではなくサーバーサイドでデータのフェッチが行われ、APIキーなどの機密情報を安全に扱うことができます。</li><li><strong><code>cheerio</code></strong>: Node.jsでHTMLをパースし、jQueryのようなシンタックスでDOM操作を可能にするライブラリです。<code>cheerio.load(html)</code>で取得したHTMLを読み込み、DOM要素にアクセスできるようになります。</li><li><strong><code>fetch(url)</code></strong>: 指定されたURLにHTTPリクエストを送信し、ページのHTMLコンテンツを取得します。</li><li><strong><code>getMetaTag</code></strong><strong>関数</strong>:<ul><li>OGP情報は<code>&lt;meta&gt;</code>タグに記述されています。このヘルパー関数は、<code>name</code>属性、<code>property="og:"</code>、<code>property="twitter:"</code>のいずれかで指定されたメタタグの<code>content</code>属性値を取得しようとします。</li><li>これは、サイトによってOGP情報の記述方法が異なる場合があるため、汎用的に情報を取得できるようにするための工夫です。</li></ul></li><li><strong>返り値</strong>: 取得した<code>title</code>、<code>description</code>、<code>image</code>の各情報を<code>OGPData</code>型として返します。情報が見つからなかった場合はデフォルト値が設定されます。</li></ul><h2 id="h22bc4dc2ea"><code>useParseBody</code>: 記事本文のリンクをリンクカードに変換する</h2><p>次に、実際の記事本文を解析し、OGPデータを利用してリンクカードを生成するReactフック<code>useParseBody</code>を見ていきましょう。</p><pre><code>import { useEffect, useState } from 'react'
import * as cheerio from 'cheerio'
import { getOGPData, OGPData } from '../actions/getOGPDataActions'

const urlPattern = /^(https?:\\\\/\\\\/[^\\\\s$.?#].[^\\\\s]*)$/ // URLの正規表現パターン

export function useParseBody(body: string) {
  const [parsedBody, setParsedBody] = useState&lt;string&gt;(body || '') // パース後のHTMLを保持

  useEffect(() =&gt; {
    const parseAndFetchOGP = async () =&gt; {
      const $ = cheerio.load(body || '') // 記事本文をcheerioで読み込み
      const links: string[] = [] // 処理対象となるリンクを格納する配列

      // リンクを収集する関数
      const collectLinks = () =&gt; {
        $('p &gt; a').each((_, link) =&gt; { // &lt;p&gt;タグの子要素の&lt;a&gt;タグを走査
          if ($(link).find('img').length === 0) { // &lt;img&gt;タグを含まないリンクのみを対象
            const href = $(link).attr('href')
            const linkText = $(link).text()

            // hrefが存在し、かつリンクのテキストがURLパターンに一致する場合
            if (href &amp;&amp; urlPattern.test(linkText)) {
              links.push(href) // リンクを収集リストに追加
            }
          }
        })
      }

      // OGPデータを取得する関数
      const fetchOGPData = async () =&gt; {
        // 収集した各リンクに対してgetOGPDataを並行して実行
        const ogpDataPromises = links.map((href) =&gt; getOGPData(href))
        return await Promise.all(ogpDataPromises) // 全てのOGPデータ取得を待つ
      }

      // リンクカードを生成する関数
      const generateLinkCards = (hrefToOgpData: Map&lt;string, OGPData&gt;) =&gt; {
        $('p &gt; a').each((_, link) =&gt; {
          if ($(link).find('img').length === 0) {
            const href = $(link).attr('href')
            const linkText = $(link).text()

            if (!href || href.startsWith('#')) return // リンクがない、またはページ内リンクの場合はスキップ

            const meta: OGPData | undefined = hrefToOgpData.get(href) // 対応するOGPデータを取得
            if (!meta || !urlPattern.test(linkText)) return // OGPデータがない、またはテキストがURLでない場合はスキップ

            // リンクカードのHTML構造を生成
            const linkCardHTML = `
  &lt;div class="link-card"&gt;
    &lt;a href="${href}" target="_blank" rel="noopener noreferrer"&gt;
      &lt;div class="link-card-body"&gt;
        &lt;div class="link-card-info"&gt;
          &lt;div class="link-card-head"&gt;
            &lt;div class="link-card-title"&gt;${meta.title}&lt;/div&gt;
            &lt;div class="link-card-description"&gt;${meta.description}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="link-card-url"&gt;${href}&lt;/div&gt;
        &lt;/div&gt;
        ${meta.image ? `&lt;div class="link-card-thumbnail"&gt;&lt;img src="${meta.image}" alt="thumbnail" /&gt;&lt;/div&gt;` : ''}
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
`
            $(link).replaceWith(linkCardHTML) // 元のリンクを生成したリンクカードHTMLに置き換える
          }
        })
      }

      // 実行フロー
      collectLinks() // 記事内のリンクを収集
      const ogpDataResults = await fetchOGPData() // 収集したリンクのOGPデータを一括取得

      // リンクのURLとOGPデータをマッピング
      const hrefToOgpData = new Map&lt;string, OGPData&gt;()
      links.forEach((href, index) =&gt; {
        hrefToOgpData.set(href, ogpDataResults[index])
      })

      generateLinkCards(hrefToOgpData) // OGPデータを使ってリンクカードを生成

      setParsedBody($.html()) // 変換後のHTMLを状態として設定
    }

    parseAndFetchOGP() // useEffectの初回マウント時とbodyが変更された時に実行
  }, [body])

  return { parsedBody } // パース済みのHTMLを返す
}</code></pre><h3 id="h315ce60898">コードのポイント</h3><ul><li><strong><code>useEffect</code></strong>: <code>body</code>プロパティが変更されたときに、記事のパースとOGPデータのフェッチ処理を実行します。</li><li><strong><code>useState</code></strong>: パースおよびOGPデータ適用後のHTMLコンテンツを<code>parsedBody</code>として保持します。</li><li><strong><code>cheerio.load(body)</code></strong>: 渡された記事のHTML文字列をCheerioで解析し、DOM操作を可能にします。</li><li><strong><code>collectLinks</code></strong><strong>関数</strong>:<ul><li>記事中の<code>&lt;p&gt;</code>タグの下にある<code>&lt;a&gt;</code>タグを走査します。</li><li>特に、画像を含まない（つまり、テキストリンクである）<code>&lt;a&gt;</code>タグのみを対象とし、その<code>href</code>属性とリンクテキストがURLパターンに一致するかを確認します。これにより、単なるテキストとしてのURLがリンクカードの対象となります。</li></ul></li><li><strong><code>fetchOGPData</code></strong><strong>関数</strong>:<ul><li><code>Promise.all</code>を使って、収集した複数のリンクに対して<code>getOGPData</code>関数を並行して実行します。これにより、OGPデータの取得処理が高速化されます。</li></ul></li><li><strong><code>generateLinkCards</code></strong><strong>関数</strong>:<ul><li>OGPデータが取得できたリンクに対して、事前に定義されたHTMLテンプレートにOGPのタイトル、説明、画像を埋め込み、<strong>リッチなリンクカードのHTML</strong>を生成します。</li><li>元の<code>&lt;a&gt;</code>タグをこの生成されたリンクカードのHTMLに置き換えます。</li></ul></li><li><strong><code>urlPattern</code></strong>: リンクテキストが有効なURL形式であるかをチェックするための正規表現です。</li><li><strong><code>parsedBody</code></strong><strong>の更新</strong>: 全ての処理が完了した後、最終的に変換されたHTML文字列が<code>setParsedBody</code>によって状態として更新され、このフックを利用するコンポーネントで利用できるようになります。</li></ul><h2 id="h37d62eadd8">CSS: リンクカードの見た目を整える</h2><p>最後に、生成されたリンクカードを美しく表示するためのCSSを見ていきましょう。このCSSは、リンクカード全体のレイアウト、画像（サムネイル）、テキストの表示方法などを定義しています。</p><pre><code>:global(.link-card) {
    display: block; // ブロック要素として表示
    height: fit-content; // コンテンツに合わせて高さを調整
    margin: 0 0 1.5rem; // 下に余白
    overflow: hidden; // はみ出たコンテンツを隠す
    background-color: white; // 背景色
    border:
      1px solid theme.$color-border-default, // 枠線
      rgb(46 37 3 / 13%);
    border-radius: theme.$radius-sm; // 角の丸み

    p {
      margin: 0; // 内部のpタグの余白をリセット
    }

    a {
      display: block;
      height: 100%;
      text-decoration: none; // デフォルトのアンダーラインを削除

      &amp;:hover {
        text-decoration: none;

        :global(.link-card-title) {
          color: theme.$color-text-brand; // ホバー時にタイトル色を変更
        }

        :global(.link-card-thumbnail) {
          img {
            transform: scale(1.2); // ホバー時に画像を拡大
          }
        }
      }
    }
  }

  :global(.link-card-body) {
    display: flex; // flexboxで内部要素を配置
    gap: 1.5rem; // 要素間の隙間
    height: 100%;
  }

  :global(.link-card-thumbnail) {
    display: flex;
    flex-shrink: 0; // 縮小しない
    align-items: center; // 垂直方向中央揃え
    justify-content: center; // 水平方向中央揃え
    width: auto;
    height: 128px; // 高さ固定
    aspect-ratio: 1 / 1; // アスペクト比1:1
    overflow: hidden;

    @include theme.breakpoints(md) { // ミディアム以上の画面サイズの場合
      height: 150px;
      aspect-ratio: 1.91 / 1; // アスペクト比を変更
    }

    img {
      width: 100%;
      height: auto;
      object-fit: cover; // 領域に合わせて画像を切り取る
      transition: transform 0.2s ease; // ホバー時のアニメーション
    }
  }

  :global(.link-card-info) {
    display: flex;
    flex-direction: column; // 垂直方向に要素を配置
    flex-grow: 1; // 可能な限り幅を広げる
    justify-content: space-between; // 要素間のスペースを均等にする
    padding: 1.5rem; // 内側の余白
  }

  :global(.link-card-title) {
    @include theme.font-size(14); // フォントサイズ

    display: -webkit-box; // 複数行のテキストを制御
    width: 100%;
    max-height: 1.55em; // 最大高さ
    margin: 0 0 0.5rem;
    overflow: hidden;
    color: theme.$color-text-default;
    -webkit-line-clamp: 1; // 1行に制限
    -webkit-box-orient: vertical;
  }

  :global(.link-card-description) {
    @include theme.font-size(12);

    display: -webkit-box;
    width: 100%;
    margin: 0 0 0.5rem;
    overflow: hidden;
    color: theme.$color-text-subtlest;
    -webkit-line-clamp: 2; // 2行に制限
    -webkit-box-orient: vertical;
  }

  :global(.link-card-url) {
    @include theme.font-size(12);

    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: theme.$color-text-subtle;
    -webkit-line-clamp: 1; // 1行に制限
    -webkit-box-orient: vertical;
  }</code></pre><h3 id="hcb29679c28">CSSのポイント</h3><ul><li><strong><code>:global()</code></strong>: CSSモジュールやScoped CSSを使用している場合でも、グローバルなスタイルを適用するために使用されます。</li><li><strong><code>.link-card</code></strong>: リンクカード全体のスタイル（背景色、枠線、角丸、余白など）を定義します。</li><li><strong>ホバー時のエフェクト</strong>: リンクカードにカーソルを合わせた際、タイトル色が変わったり、サムネイル画像が拡大するアニメーションが設定されており、ユーザーエクスペリエンスを高めます。</li><li><strong><code>.link-card-body</code></strong>: カードのメインコンテンツ部分をFlexboxでレイアウトし、情報とサムネイル画像を横並びに配置します。</li><li><strong><code>.link-card-thumbnail</code></strong>: サムネイル画像のサイズ、アスペクト比、画像の表示方法（<code>object-fit: cover</code>）を調整します。レスポンシブ対応として、メディアクエリ (<code>@include theme.breakpoints(md)</code>) でブレークポイントごとに異なるアスペクト比を設定しています。</li><li><strong><code>.link-card-info</code></strong>: タイトル、説明、URLのテキスト情報を格納する部分のレイアウトを定義します。</li><li><strong><code>.link-card-title</code></strong><strong>, </strong><strong><code>.link-card-description</code></strong><strong>, </strong><strong><code>.link-card-url</code></strong>: 各テキスト要素のフォントサイズ、色、および**<code>webkit-line-clamp</code>**プロパティを使って表示行数を制限し、テキストがはみ出ないように制御しています。これにより、デザインが崩れるのを防ぎ、見た目をきれいに保ちます。</li></ul><h2 id="ha214098e44">まとめ</h2><p>この記事で紹介した<code>getOGPData</code>と<code>useParseBody</code>、そして関連するCSSを組み合わせることで、<strong>手軽に記事内のURLをリッチなOGPリンクカードに自動変換</strong>することができます。これにより、ブログ記事やWebサイトの視認性が向上し、ユーザーが外部サイトのコンテンツを理解しやすくなり、クリック率の向上にも繋がるでしょう。<br>ご自身のサイトにこの機能を組み込んで、より魅力的なコンテンツ表示を実現してみてはいかがでしょうか。</p>

microCMSの投稿からOGPを取得して画像とリンクカードを作る

<p>近年注目を集めるウェブサイト構築アーキテクチャ「Jamstack」。その特徴の一つとして、高いセキュリティ性が挙げられます。本記事では、Jamstackがセキュリティに優れる理由を解説し、広く利用されているWordPressと比較しながら、具体的な対策についても掘り下げていきます。</p><h3 id="he605fdcf24">Jamstackがセキュリティに優れる理由</h3><p>Jamstackが従来のアーキテクチャと比較してセキュリティが高いと言われる主な要因は、以下の点に集約されます。</p><ol><li><strong>サーバーレスアーキテクチャ:</strong> 静的なファイルをCDN経由で配信し、動的な処理はAPIに依存するため、ウェブサーバー自体が攻撃対象となるリスクを大幅に低減できます。常時稼働するデータベースやサーバーサイドアプリケーションが存在しないため、侵入経路が減少します。</li><li><strong>攻撃対象の縮小:</strong> WordPressのようなCMSは、データベース、PHP実行環境、CMS本体、プラグイン、テーマなど、多岐にわたる要素が攻撃対象となり得ます。一方、Jamstackサイトは静的なファイルが中心であり、これらの攻撃対象を大幅に削減できます。</li><li><strong>機能の分離:</strong> 動的な機能は、認証、データベース、フォーム処理など、特定のタスクに特化した外部APIやサービスに委譲されます。これにより、単一の脆弱性がサイト全体に影響を及ぼすリスクを軽減できます。</li><li><strong>CDNによる配信:</strong> CDNは一般的にセキュリティ対策が施されたインフラストラクチャ上で動作し、DDoS攻撃などへの耐性が高い傾向があります。また、静的ファイル配信はサーバーサイド処理の必要がないため、サーバー側の脆弱性を利用した攻撃を防ぎます。</li></ol><h3 id="h258a42baef">WordPressとのセキュリティ比較</h3><p>WordPressは非常に普及しているCMSであるため、常に攻撃者の標的となりやすい状況にあります。プラグインやテーマの脆弱性、本体のアップデート遅延、サーバー設定の不備などがセキュリティインシデントの原因となる可能性があります。SQLインジェクションやPHPの脆弱性を利用した攻撃も懸念されます。<br>一方、Jamstackは静的ファイルが中心であるため、これらの攻撃経路は基本的に存在しません。動的な処理はAPIに依存しますが、適切に選定・管理されたAPIサービスを利用することで、ウェブサーバー自体の脆弱性リスクを低減できます。<br>ただし、Jamstackも完全に安全ではありません。利用するAPIサービスのセキュリティ、フロントエンドのJavaScriptコードの脆弱性、ビルドプロセスのセキュリティなどが新たなリスクとなる可能性があります。重要なのは、それぞれのアーキテクチャの特性を理解し、適切なセキュリティ対策を講じることです。</p><h3 id="hee32166cdb">Jamstackサイトが改竄される可能性と対策</h3><p>Jamstackアーキテクチャは、その特性から従来の動的なウェブサイトと比較してセキュリティが高いと考えられていますが、完全に改竄のリスクがないわけではありません。ここでは、Jamstackサイトが改竄される主な経路と、それに対する具体的な対策を掘り下げて解説します。</p><h4 id="h83a93811bd">1. 利用するAPIサービスの脆弱性</h4><p>Jamstackサイトでは、フォームの送信、認証、Eコマース機能、検索など、動的な処理を外部のAPIサービスに依存するケースが多くあります。これらのAPIサービスにセキュリティ上の脆弱性があった場合、そこを足がかりに不正アクセスが行われ、データが改竄されたり、悪意のあるコンテンツが挿入されたりする可能性があります。<br><strong>改竄の例:</strong></p><ul><li>フォームから送信されたデータが不正に操作され、意図しない情報がバックエンドに送られる。</li><li>認証APIの脆弱性を突かれ、不正なユーザーが管理者権限を奪取する。</li><li>EコマースAPIの脆弱性を利用して、商品情報や価格が改竄される。</li></ul><p><strong>対策:</strong></p><ul><li><strong>信頼できるAPIサービスの選定:</strong> 実績があり、セキュリティ対策に力を入れているAPIプロバイダーを選びましょう。提供しているサービスのセキュリティに関する情報を確認し、脆弱性への対応状況などを把握することが重要です。</li><li><strong>APIキーの適切な管理:</strong> APIキーは機密情報であり、ソースコードや公開リポジトリに直接埋め込むことは絶対に避けるべきです。環境変数やサーバーレス関数の環境設定などを利用して安全に管理し、不正なアクセスから保護しましょう。</li><li><strong>APIの利用範囲の制限:</strong> APIによっては、利用元のドメインやIPアドレスを制限できる場合があります。可能な限り設定し、不正なリクエストを遮断しましょう。</li><li><strong>APIのアップデートの適用:</strong> 利用しているAPIサービスのアップデート情報を常に把握し、セキュリティ関連のアップデートが提供された場合は速やかに適用しましょう。</li><li><strong>レート制限の実装:</strong> APIへの過剰なリクエストを防ぐために、レート制限を実装することを検討しましょう。DoS攻撃などのリスクを軽減できます。</li></ul><h4 id="hfff050d148">2. フロントエンドのJavaScriptの脆弱性</h4><p>Jamstackサイトのインタラクティブな要素は、主にJavaScriptによって実現されます。もしJavaScriptコードにセキュリティ上の欠陥（脆弱性）があった場合、クロスサイトスクリプティング（XSS）などの攻撃を受ける可能性があります。XSS攻撃を受けると、悪意のあるスクリプトがユーザーのブラウザ上で実行され、Cookieやセッション情報が盗まれたり、サイトの表示が改竄されたりする可能性があります。<br><strong>改竄の例:</strong></p><ul><li>悪意のあるスクリプトが埋め込まれ、サイトの見た目が意図しないものに変更される。</li><li>ユーザーが入力した情報が、攻撃者のサーバーに不正に送信される。</li><li>Cookieが盗まれ、攻撃者がユーザーになりすましてサイトを操作する。</li></ul><p><strong>対策:</strong></p><ul><li><strong>ユーザー入力の適切なエスケープ処理:</strong> ユーザーからの入力（例えば、検索フォームのキーワード、コメントなど）をそのままHTMLに出力する前に、必ずエスケープ処理を行いましょう。これにより、悪意のあるスクリプトが実行されるのを防ぎます。</li><li><strong>Content Security Policy (CSP) の設定:</strong> CSPは、ブラウザが読み込むことを許可するリソース（スクリプト、スタイルシート、画像など）の配信元を制限する仕組みです。CSPヘッダーを適切に設定することで、XSS攻撃の影響を大幅に軽減できます。</li><li><strong>Subresource Integrity (SRI) の利用:</strong> SRIは、CDNなど外部の配信元から読み込むファイル（JavaScriptライブラリなど）の整合性を検証する仕組みです。<code>&lt;script&gt;</code>タグや<code>&lt;link&gt;</code>タグに<code>integrity</code>属性を追加することで、ファイルが改竄されていないことをブラウザが確認できます。</li><li><strong>信頼できるライブラリの利用と定期的なアップデート:</strong> 利用するJavaScriptライブラリは、セキュリティに関する実績があり、活発にメンテナンスされているものを選びましょう。また、ライブラリに脆弱性が発見された場合は、速やかに最新バージョンにアップデートすることが重要です。</li><li><strong>セキュリティレビューの実施:</strong> コードレビューや静的解析ツールなどを活用して、JavaScriptコードに潜在的な脆弱性がないか定期的にチェックしましょう。</li></ul><h4 id="h8cbed502fb">3. ビルドプロセスの侵害</h4><p>Jamstackサイトは、通常、静的サイトジェネレーター（SSG）などを用いて、ソースコードから静的なファイルを生成するビルドプロセスを経ます。もしこのビルドプロセスが侵害された場合、生成された静的ファイルに悪意のあるコードが埋め込まれる可能性があります。<br><strong>改竄の例:</strong></p><ul><li>ビルドスクリプトが改竄され、意図しないJavaScriptコードが最終的なHTMLファイルに挿入される。</li><li>依存しているパッケージに脆弱性があり、ビルド時に悪意のあるコードが混入する。</li><li>ビルドを実行するサーバーが侵害され、生成されたファイルが改竄される。</li></ul><p><strong>対策:</strong></p><ul><li><strong>ビルド環境のセキュリティ強化:</strong> ビルドを実行するサーバーのアクセス制御を厳格に行い、不正なアクセスを防ぎましょう。</li><li><strong>依存関係の管理と監査:</strong> <code>package-lock.json</code>や<code>yarn.lock</code>などを利用して依存関係を正確に管理し、セキュリティスキャンツールなどで脆弱性を定期的にチェックしましょう。</li><li><strong>ビルドパイプラインの監視:</strong> CI/CDパイプラインの各ステップを監視し、不審なアクティビティがないかを確認しましょう。</li><li><strong>ビルド成果物の検証:</strong> ビルドされた静的ファイルの内容を定期的に確認し、意図しない変更がないかをチェックしましょう。</li><li><strong>信頼できるツールの利用:</strong> ビルドプロセスで使用するツールは、信頼できる開発元が提供しているものを選びましょう。</li></ul><h4 id="h2d3b967460">4. CDNのアカウントの侵害</h4><p>Jamstackサイトの静的ファイルは、通常CDN（コンテンツ配信ネットワーク）を通じて配信されます。もしCDNのアカウントが不正にアクセスされた場合、配信されている静的ファイルが改竄され、サイトの見た目が変わったり、悪意のあるコンテンツが表示されたりする可能性があります。<br><strong>改竄の例:</strong></p><ul><li>CDNに保存されているHTMLファイルが書き換えられ、偽のログインフォームが表示される。</li><li>JavaScriptファイルが改竄され、ユーザーの行動を追跡するスクリプトが埋め込まれる。</li><li>画像ファイルが差し替えられ、不適切なコンテンツが表示される。</li></ul><p><strong>対策:</strong></p><ul><li><strong>強力なパスワードと二段階認証の設定:</strong> CDNアカウントのパスワードは複雑なものを使用し、可能な限り二段階認証を設定しましょう。</li><li><strong>アクセス権限の適切な管理:</strong> 複数人でアカウントを共有する場合は、担当者ごとに必要な権限のみを付与し、不要なアクセス権限は削除しましょう。</li><li><strong>アクセスログの監視:</strong> CDNのアクセスログを定期的に監視し、不審なアクセスがないかを確認しましょう。</li><li><strong>HTTPSの強制:</strong> CDN経由での通信をHTTPSで暗号化し、中間者攻撃による改竄を防ぎましょう。</li><li><strong>WAF (Web Application Firewall) の導入:</strong> CDNによっては、WAF機能を提供している場合があります。WAFを導入することで、悪意のあるリクエストを遮断し、改竄のリスクを軽減できます。</li></ul><h4 id="hd7a20b0468">5. 開発環境の侵害</h4><p>開発者のPCや開発環境がマルウェアに感染した場合、意図しないコードがリポジトリにコミットされ、それがデプロイされてしまう可能性があります。<br><strong>改竄の例:</strong></p><ul><li>開発者の意図しないバックドアがコードに仕込まれ、デプロイされてしまう。</li><li>マルウェアによって、機密情報（APIキーなど）が盗まれ、悪用される。</li></ul><p><strong>対策:</strong></p><ul><li><strong>開発者PCのセキュリティ対策:</strong> オペレーティングシステムやソフトウェアを常に最新の状態に保ち、信頼できるセキュリティソフトを導入しましょう。</li><li><strong>不審なメールやファイルを開かない:</strong> フィッシング詐欺などに注意し、不審なメールやファイルは安易に開かないようにしましょう。</li><li><strong>バージョン管理の徹底:</strong> Gitなどのバージョン管理システムを利用し、変更履歴を適切に管理しましょう。不審なコミットを発見した場合、速やかにロールバックできるように備えておきましょう。</li><li><strong>リモートアクセスの制限:</strong> 開発環境へのリモートアクセスは必要最低限に留め、アクセスする場合は安全な接続方法（SSHなど）を利用しましょう。</li></ul><p>これらの対策を講じることで、Jamstackサイトのセキュリティレベルを大幅に向上させ、改竄のリスクを低減することができます。Jamstackの特性を理解した上で、多角的なセキュリティ対策を実践していくことが重要です。</p>

なぜJamstackはセキュアと言われるのか？WordPressとの比較と対策

<p>Web制作の世界は常に進化しており、新しい技術が次々と登場しています。その中でもJamstackは、より高速でセキュア、そしてスケーラブルなウェブサイトを実現するための革新的なアプローチとして注目を集めています。しかし、新技術の導入は不安や挑戦を伴うもの。そんな時、ブラキオがパートナーとして、皆さんのJamstackにおける挑戦を全力でサポートします。</p><h2 id="h79f76d2a79">こんなお悩みはありませんか？</h2><ul><li>Jamstackの導入に興味はあるけれど、どこから手を付けていいかわからない</li><li>必要なノウハウや自信がなく、一歩を踏み出せないでいる</li><li>日々の業務に忙殺され、新たな技術を学ぶ余裕がない</li><li>技術的な課題を乗り越えるため、信頼できるフロントエンドのパートナーを探している</li></ul><h2 id="h93d087dce8">ブラキオにお任せください！</h2><p>ブラキオは、フロントエンド開発における豊富な実績を持ち、Jamstack開発においても皆さんをテックリードとして支援できます。コーポレートサイトからwebサービスまで、あらゆるフロントエンド開発のお手伝いをします。また、コーディングだけのお仕事も大歓迎です。</p><h2 id="h2e4fdc2256">私たちのポリシー</h2><ul><li>進捗報告: 定期的な報連相を通じて、プロジェクトの進捗を透明に共有します。</li><li>納期厳守: 設定したマイルストーンに沿って、余裕をもって納品します。お客様の期待を裏切ることはありません。</li></ul><h2 id="h7291455f5b">ご興味があれば、まずはお気軽にご連絡ください</h2><p>プロジェクトの成功は、良いコミュニケーションから始まります。ZoomでのオンラインMTGや、Slackなどのチャットツールを通じて、いつでも柔軟に対応させていただきます。まずはお問合せいただければ、お見積もりを含め、具体的なご提案をさせていただきます。<br>Jamstackでのウェブサイト制作は、多くの可能性を秘めています。ブラキオと一緒に、新たな挑戦に踏み出しませんか？あなたのビジョンを現実のものとするために、全力でサポートさせていただきます。</p>

Jamstack開発の下請けをお探しですか？ブラキオがあなたの強力なパートナーに

<p>Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/25a11da6c11344aa872928013293c13e/image.png" alt=""><br>まずは、実際に試してみて、その振る舞いを体験してみましょう。</p><h2 id="h77a16da6bb">react-scrollライブラリを活用しよう</h2><p>このような機能を簡単に実装するためには、<code>react-scroll</code>というライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。</p><pre><code>npm i --save react-scroll</code></pre><p>そして、以下のように呼び出して使用します。</p><pre><code>import { Link as Scroll } from 'react-scroll'

export const Nav: FC&lt;Props&gt; = () =&gt; { 
  return (
    &lt;ul&gt;
      &lt;li&gt;
        &lt;Scroll to={'/#about'} smooth&gt; About &lt;/Scroll&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  ) 
}</code></pre><p><br></p><h3 id="hee335831b4">注意しておきたいポイント</h3><p>ここでのimport文では、<code>Link as Scroll</code>という形でエイリアスを設定しています。これは、<code>Link</code>という名前がNext.jsの <code>Link</code>と名前が重複してしまい、混乱を避けるためです。<br>そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素に<code>id="about"</code>のようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。<br>以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。</p>

Next.jsにおけるページ内スクロールの実装ガイド

<p>私自身もともとWordPressでweb制作の仕事を受けていた。プラグイン依存、CSS設計問題、サーバー代などのコスト面 etc。賛否両論あると思うけど、個人的にはしんどかった。<br><br>また、業務委託先でReactでサービス開発をずっとやっているのでJamstackでできたらと思っていた。なので、趣味でGatsbyやったりNetlifyCMSやったりして試していたりはしたが、趣味では良いけどクライアントに納品するものとしてと考えると難しいなという印象だった。<br><br>特に基本が英語なので、どうしても敷居が高くなってしまう。あとはリテラシーが高くないと無理かなとも率直に思った感じ。Jamstackを実際の案件でやりたいけど二の足を踏んでいたという状態だった。<br><br>そうこうしているうちにmicroCMSの存在を知って「あ、これなら案件でいける」と思い、実際の案件に投入することに決めた。<br><br>なぜJamstackでWEB制作の仕事を受けようと思ったのかは「microCMS」が比重を多く占めるのだけれど、Jamstack案件をここ数ヶ月で立て続けに3サイト作ったので実際の業務でやったプラクティス的なことをまとめる。<br></p><h2 id="hb293e863f7">開発体験最高だよ</h2><p><br>フロントエンドエンジニア御用達のprettier、eslint、TypeScriptが使えるの最高。<br><br>ReactやVueでサービス開発をしたことある人なら問題なくJamstackいける。これはかなりの利点だと思っていて、ある程度フロントをかじった人ならweb制作で受注をして稼ぐことが容易になったと思う。<br></p><h2 id="haae249dfe1">ホスティングは迷うならNetlify一択</h2><p><br>firebase, Amplifyなどがあるけど迷うならNetlifyで良い。<br><br>デプロイの設定が楽だし迷うこともない。また、お問合せが簡単に作れるのも魅力。<br><br>ちなみに、firebaseでお問合せを作ろうと思うとCloud Functionsに書かなければいかず有料になってしまう。Amplifyもそんな感じかな？？やったことないからわからない。例えばDBに溜め込むとかしたいならfirebaseを選ぶけど、一般的な中小企業のコーポレートサイトならほぼほぼNetlifyで良い。またそういったコーポレートサイトであれば無料で済む。<br><br>ただ、泣きどころはTokyoリージョンがNetlifyにないため若干遅い。<br><br>これはゆくゆくは解決されるのではと思っているけど・・・。<br></p><h3 id="h29fce8b3b3">webhookでSlackに通知は怠るな</h3><p><br>デプロイの可否をSlackに通知できたり、お問合せがあったらなど各種連携が取りやすいので運用フェーズに入った時に絶対に必要になるから必ず設定すべし<br><br><a href="https://ja.unflf.com/tech/netlify/slack/" target="_blank" rel="noopener noreferrer">NetlifyへのデプロイをSlackに通知する | Unselfish Meme</a><br><br><a href="https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53" target="_blank" rel="noopener noreferrer">【Netlify】Forms機能を利用して問い合わせフォームを作成する - Qiita</a><br><br>2021/01/14 追記<br>どうやら以前の価格改定により無料枠ではSlackやメールなどの通知ができなくなっている。ちなみに、無料枠である私のアカウントはできる。もしかしたら改訂前にアカウント持っていた場合は通知ができるのかもしれない。<br><br>アカウント持っている方はホスティングしたサイトを選択 &gt; Site settings &gt; Build &amp; Deploy &gt; ページ下部のDeploy notifications &gt; Add notification で確認した方が良い。<br>notificationができるのであれば下記のように選べるようになっている。<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/3bf7e3668fb04beea810003e9473c975/https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47844_940462ac-67be-940c-1a11-3147c3503a29.avif" alt=""><br><br><br>もし今後アカウントを取得してNetlifyで通知したい場合は「pro」にしなければならない。<br><br><a href="https://www.netlify.com/pricing?_ga=2.186381993.183739533.1610513213-658925115.1582597672#features" target="_blank" rel="noopener noreferrer">Netlify Pricing and Plans</a><br></p><h2 id="hadc4170e23">microCMSを選ぶべし</h2><p><br>microCMSのまわし者みたいだけど、まじでmicroCMSが今のところ一番良い<br><br>日本語だし、UIも日本人にわかりやすく受け入れられやすい<br><br><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS | APIベースの日本製ヘッドレスCMS</a><br></p><h3 id="h4a83b95bc2">プレビュー機能は絶対入れとけ</h3><p><br>どのクライアントにも言われたけど「記事作成したんだけどプレビューできないんですか？」<br><br>そんなに難しいことをせずに実装できるので絶対に入れるべし<br><br>`[https://your-service-name.netlify.app/draft/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}](https://your-service-name.netlify.app/draft/?id=%7BCONTENT_ID%7D&amp;draftKey=%7BDRAFT_KEY%7D)` を叩くプレビュー用のページがあれば良いだけ。<br><br><a href="https://microcms.io/blog/nuxt-jamstack-preview/" target="_blank" rel="noopener noreferrer">microCMSとNuxtでプレビュー画面を作成する</a><br></p><h3 id="h34951ed23c">記事更新などでデプロイが走るようにするのを忘れるべからず</h3><p><br>APIのエンドポイントごとの設定なので注意すべし<br><br>これやっておかないと「記事更新したのにサイトに反映されてないんですけど！」と連絡来てしまう。<br><br><a href="https://microcms.io/blog/webhook-multiple-settings/" target="_blank" rel="noopener noreferrer">Webhook機能がパワーアップしました</a><br></p><h2 id="had7aa69075">lighthouseで満点狙うべし</h2><p><br>私はNextJSでしか開発をしていないが多少の知識があれば満点ないしかなりの高得点は簡単に出る<br><img src="https://images.microcms-assets.io/assets/8bff96c5d9204d3083faff96106ef6b7/60c512310b0942f99b430402a855125a/https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47844_65e92705-f171-b1bc-91d7-0ad0e1c08cab.avif" alt=""><br>基本的にはlighthouseで採点 &gt; 注意されたとこを直すフローで良いが、service-workerに関してはプラグインを入れればすぐに解決できてオフラインでも閲覧できるようになる。<br><br><a href="https://github.com/hanford/next-offline" target="_blank" rel="noopener noreferrer">hanford/next-offline: make your Next.js application work offline using service workers via Google's workbox</a><br><br>あとは、やはり画像は重いことが多いので、画像サイズには注意する必要がある。<br><br>画面いっぱいまで画像を広げたい時などは、簡単に済ますなら画質をある程度落としてしまうし、もしくはsrcset属性を使って最適化するように心がける。また、[TinyPNG](https://tinypng.com/)などを使って圧縮もするようにする。<br></p><h2 id="hb29156e8f7">Jamstackの泣きどころ</h2><p>これはstg/prdで分けて開発をしにくい点にあると思う。プレビュー機能の実装である程度は補えるとしても、開発者としてはstgは欲しいなと思う。<br>graphcmsではenvironment-endpointsとして `master` と `dev` でエンドポイントのだしわけが可能なよう。が、残念ながら思いっきり英語なので実務では難しい。(microCMSさんお願い！！！)<br><br><a href="https://graphcms.com/docs/environments#environment-endpoints" target="_blank" rel="noopener noreferrer">https://graphcms.com/docs/environments#environment-endpoints</a><br><br>## 個人的に今後やっていきたいこと<br><br>今後は案件をもっと獲得できるようにするつもり。また、それに合わせて外注も増やさざるをえないかなと思っていて、外注しても一定の品質が保てるようにしたいので開発フローの整備等をしていきたい。<br></p><ul><li>storybookを入れて別ドメインにデプロイして共有するようにしたい</li><li><a href="https://github.com/reviewdog/reviewdog" target="_blank" rel="noopener noreferrer">reviewdog</a> の導入（TSのチェックをPR作成時などでチェックするようにしたい）</li><li>ガイドラインなどのドキュメント作成</li></ul><p><br></p>

なぜJamstackでWEB制作の仕事を受けようと思ったのか

【それでもCSSは破綻する】 CSSの設計手法と書き方を考える

- WEBサービスのフロントエンド開発
- ホームページ制作

株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。Next.js, React, TypeScriptなどモダンな技術でつくる高品質なソリューションを低価格でご提供します。フロントエンド開発・Jamstackで作るホームページ制作をご依頼ならブラキオにお任せください。

THANKSお問合せありがとうございます