<p>繰り返し処理を実装する際は<code>setInterval</code>を使用することが多いかと思いますが、今回は<code>GSAP</code>の<code>onRepeat</code>で実装する方法をご紹介します。</p><h2 style="text-align: start" id="ha60190c19c"><strong>setInterval で実装する際の気になる点</strong></h2><p style="text-align: start"><code>setInterval</code>で繰り返し処理を実装する際の気になる点は以下です。</p><ul><li><strong>別タブを選択すると実行間隔が間引きされて実行され続ける</strong></li></ul><p style="text-align: start">ブラウザはパフォーマンスを最適化するため、アクティブでないタブ（別タブを選択している場合など）のJavaScript実行を制限します。この現象は「<strong>スロットリング</strong>」と呼ばれ、ブラウザによって実行制限は変化します。</p><p style="text-align: start">例えば、以下のコードを実行中に別のタブに切り替えると、3秒ごとの正確な実行がブラウザによって保証されなくなります。</p><pre><code class="language-javascript">setInterval(() =&gt; {
  console.log(&quot;Hello!&quot;);
}, 3000);
</code></pre><ul><li><strong>繰り返し処理を停止するためにインターバル</strong><code>ID</code><strong>を保存する必要がある</strong></li></ul><p style="text-align: start"><code>setInterval</code>で開始した処理を停止するには、<code>clearInterval</code>に引数としてインターバルIDを渡す必要があります。そのため、<code>setInterval</code>の戻り値をどこかに保存しておく必要があります。</p><pre><code class="language-javascript">const intervalId = setInterval(() =&gt; {
  // 繰り返し処理
}, 3000);

clearInterval(intervalId);
</code></pre><p style="text-align: start">また、一時停止・再開といった制御をしたい場合、処理も少し冗長になります。</p><p style="text-align: start"><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval">https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval</a></p><h2 style="text-align: start" id="hebbb255ee8"><strong>GSAP の onRepeat での実装例</strong></h2><p style="text-align: start">別の記事で何度も紹介させていただいてますが、この問題を解決するために、今回もGSAPを使用します！</p><p style="text-align: start"><a href="https://gsap.com/">https://gsap.com/</a></p><p style="text-align: start"><code>gsap.to()</code>に空のオブジェクトを登録して<code>repeat</code>に<code>-1</code>を指定することで、その処理を無限に繰り返します。後は<code>onRepeat</code>で繰り返し処理の開始時のコールバックを設定できます。</p><pre><code class="language-javascript">gsap.to({}, {
  duration: 3, // 実行間隔
  repeat: -1, // -1を指定することで処理を無限に繰り返す
  onRepeat: () =&gt; {
    console.log(&quot;3秒ごとに繰り返し処理が実行されました。&quot;);
  }
});
</code></pre><p style="text-align: start">GSAPは内部的に<code>requestAnimationFrame</code>を使用しているので、<strong>別タブに切り替わると自動で処理が停止します。</strong></p><p style="text-align: start">また、一時停止・再開といった制御もシンプルに実装することができます。</p><pre><code class="language-javascript">const animation = gsap.to({}, {
  duration: 3, // 実行間隔
  repeat: -1, // -1を指定することで処理を無限に繰り返す
  onRepeat: () =&gt; {
    console.log(&quot;3秒ごとに繰り返し処理が実行されました。&quot;);
  }
});

animation.pause() // 停止
animation.resume() // 再開
</code></pre><h2 id="ha214098e44">まとめ</h2><p>GSAPには便利なメソッドやユーティリティが多数存在して、ぼくもまだまだ勉強できていないです...。</p><p>クリエイティブなWEBサイト制作には必須とも言えるライブラリなので、今後もインプットしていこうと思います。</p><p style="text-align: start">GSAPで別の良い書き方があれば、ぜひ<a href="mailto:kuritahisami@gmail.com" target="_blank" rel="noopener noreferrer">お問い合わせ</a>で教えてください。</p>

【繰り返し処理の最適化】JavaScriptの setInterval を使わずに GSAP の onRepeat で実装する。

<p>WEB制作で良く使用する機能の一つで、スムーススクロールがあります。スムーススクロールとは<strong>リンクをクリックした際にページ内の目的の要素まで滑らかに移動させるアニメーション</strong>のことです。</p><p>この機能に独自のイージングやアニメーションの間隔を指定する方法を紹介します。</p><h2 style="text-align: start" id="hc045bfa44f"><strong>window.scrollTo では独自のイージングやアニメーションの間隔を指定できない</strong></h2><p style="text-align: start">初めに、スムーススクロールはJavaScriptの<code>window.scrollTo</code>を使用して実装するのが一般的だと思いますが、<code>window.scrollTo</code>はブラウザの持つデフォルトのスムーススクロール機能が使用されるので、独自のイージングやアニメーションの間隔を指定できません。</p><pre><code class="language-javascript">window.scrollTo({
  top: 1000, // スクロール先の位置
  behavior: &apos;smooth&apos; // ブラウザのスムーススクロールを利用
});
</code></pre><p style="text-align: start"><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo">https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo</a></p><p style="text-align: start"></p><p style="text-align: start">より柔軟なスムーススクロールを実装するためには、<code>GSAP</code>などのアニメーションライブラリを使用する方法があります。</p><p style="text-align: start"><a href="https://gsap.com/">https://gsap.com/</a></p><h2 style="text-align: start" id="he865ad2046"><strong>GSAPでスムーススクロールに独自のイージングを適用させる実装例</strong></h2><p style="text-align: start">GSAPにもscrollToメソッドが存在して、こちらを使用すると独自のイージングとアニメーションの間隔をシンプルに指定できます。</p><pre><code class="language-javascript">gsap.to(window, {
    duration: 1.0,
    ease: &quot;power2.out&quot;,
    scrollTo: {
        y: 1000 // スクロール先の位置
    },
});
</code></pre><p><a href="https://gsap.com/docs/v3/Plugins/ScrollToPlugin/">https://gsap.com/docs/v3/Plugins/ScrollToPlugin/</a></p><p>⚠️ <code>scroll-behavior: smooth</code>が指定されていると競合します。</p><p style="text-align: start">または、下記のように<code>onUpdate</code>メソッドを使用する方法でも実装できます。</p><pre><code class="language-javascript">const targetScroll = { value: window.pageYOffset };

gsap.to(targetScroll, {
    duration: 1.0,
    ease: &quot;power2.out&quot;,
    value: 1000, // スクロール先の位置

    onUpdate: () =&gt; {
        window.scrollTo({
            top: targetScroll.value,
        });
    },
});
</code></pre><h3 style="text-align: start" id="hf98e3b76e6"><strong>スムーススクロールに独自のイージングを適用させるメリット</strong></h3><p style="text-align: start">スムーススクロールだけでなく、サイト内で共通したイージングを適用させることで、ブランドイメージに一貫性のある、洗練されたユーザー体験を提供できます。</p><h2 id="ha214098e44">まとめ</h2><p>個人的にブラウザの持つデフォルトのスムーススクロール機能だと、アニメーションのスピードが速すぎるのと、いつも使用しているイージングをスムーススクールにも適用したくなったので、今回調べてみました。</p><p style="text-align: start">GSAPを使用して柔軟なスムーススクロールを実装してみてください！</p>

GSAPでスムーススクロールに独自のイージングを適用させるシンプルな実装例

<p>検索機能を実装する際、ユーザーの入力する文字列の全角・半角の違いはよくある課題だと思います。「<strong>株式会社アイウエオ</strong>」と検索したいユーザーが誤って「<strong>株式会社ｱｲｳｴｵ</strong>」と半角カナで入力した場合でも、正しく検索結果を返す必要がありますよね。</p><p style="text-align: start">また、登録データ自体が「<strong>株式会社アイウエオ</strong>」と「<strong>株式会社ｱｲｳｴｵ</strong>」のように全角カナと半角カナや、「<strong>株式会社ＡＢＣＤ</strong>」と「<strong>株式会社ABCD</strong>」のように全角英数字と半角英数字が混在しているケースも考えられます...。</p><h2 style="text-align: start" id="haaf17272c5"><strong>normalize で文字列を「正規化」する</strong></h2><p style="text-align: start"><code>normalize()</code> メソッドは、文字列の Unicode 正規化形式を返します✅</p><p style="text-align: start">引数として、以下の4つの Unicode 正規化形式を指定できるようになっていて、検索機能では、<code>NFKC</code>の形式が推奨されます。</p><ul><li><code>NFC</code> : 正規化形式 C。正準等価性によって分解され、再度合成される。</li><li><code>NFD</code> : 正規化形式 D。正準等価性によって分解される。</li><li><code>NFKC</code> : 正規化形式 KC。互換等価性によって分解され、正準等価性によって再度合成される。</li><li><code>NFKD</code> : 正規化形式 KD。互換等価性によって分解される。</li></ul><p style="text-align: start"><code>NFKC</code>の形式で文字列を正規化すると、<strong>半角カナを全角カナ</strong>に、<strong>全角英数字を半角英数字</strong>に変換されるため、幅広い表記揺れを吸収できます。</p><p style="text-align: start"><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/normalize">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/normalize</a></p><h2 style="text-align: start" id="ha387e567f0"><strong>検索機能で文字列の半角・全角の差を吸収する実装例</strong></h2><p style="text-align: start">検索機能でのシンプルな実装例です✅</p><pre><code class="language-javascript">/**
 * 配列から検索キーワードに一致する要素を抽出する関数
 * @param data - 検索対象の文字列配列
 * @param keyword - ユーザーが入力した検索キーワード
 * @returns 検索結果の配列
 */
const searchWithNormalization = (data: string[], keyword: string): string[] =&gt; {
  // 検索キーワードをNFKC形式で正規化する
  const normalizedKeyword = keyword.normalize(&quot;NFKC&quot;);

  // 配列の各要素も正規化してキーワードと比較する
  return data.filter((item: string): boolean =&gt; {
    const normalizedItem = item.normalize(&quot;NFKC&quot;);
    return normalizedItem.includes(normalizedKeyword);
  });
};

// 登録されているデータ
const companyList = [
  &apos;株式会社アイウエオ&apos;, // 全角カナ
  &apos;株式会社ｱｲｳｴｵ&apos;, // 半角カタカナ
  &apos;株式会社ＡＢＣＤ&apos;, // 全角英数
  &apos;株式会社ABCD&apos;, // 半角英数
];

// 実行例: ユーザーが全角カナで検索した場合
const result1 = searchWithNormalization(companyList, &apos;株式会社アイウエオ&apos;);
console.log(result1); // [&apos;株式会社アイウエオ&apos;, &apos;株式会社ｱｲｳｴｵ&apos;]

// 実行例: ユーザーが半角カナで検索した場合
const result2 = searchWithNormalization(companyList, &apos;株式会社ｱｲｳｴｵ&apos;);
console.log(result2); // [&apos;株式会社アイウエオ&apos;, &apos;株式会社ｱｲｳｴｵ&apos;]

// 実行例: ユーザーが全角英数で検索した場合
const result3 = searchWithNormalization(companyList, &apos;株式会社ＡＢＣＤ&apos;);
console.log(result3); // [&apos;株式会社ＡＢＣＤ&apos;, &apos;株式会社ABCD&apos;]

// 実行例: ユーザーが半角英数で検索した場合
const result4 = searchWithNormalization(companyList, &apos;株式会社ABCD&apos;);
console.log(result4); // [&apos;株式会社ＡＢＣＤ&apos;, &apos;株式会社ABCD&apos;]

// 全ての例でユーザーの入力する文字列が全角・半角の場合でもヒットしている⭕️</code></pre><h3 style="text-align: start" id="h25c28a2a0c"><strong>Unicode 正規化形式について</strong></h3><p style="text-align: start">Unicode 正規化形式は、「<strong>見た目は同じでも内部データが異なる文字</strong>」を統一するための仕組みです。<code>NFKC</code>の形式は半角・全角だけでなく、以下の文字の表記揺れも吸収できます。</p><ul><li>アクセント記号<br>「é」は2つの表現方法があり、見た目は同じですが、内部のデータは異なる文字です。<pre><code class="language-javascript">&quot;é&quot;    // é (1文字)
&quot;é&quot;    // \e\u0301 (e + アクセント記号)

// 検索で両方ヒットさせたい場合NFKC形式で正規化すると吸収できる
&quot;é&quot;.normalize(&apos;NFKC&apos;) === &quot;é&quot;.normalize(&apos;NFKC&apos;) // true
</code></pre></li><li>丸数字・特殊文字<br>丸数字や特殊文字は通常文字に変換されます。<pre><code class="language-javascript">&quot;①②③&quot;.normalize(&apos;NFKC&apos;) // &apos;123&apos;
&quot;㈱アイウエオ&quot;.normalize(&apos;NFKC&apos;) // &apos;(株)アイウエオ&apos;
&quot;㍿アイウエオ&quot;.normalize(&apos;NFKC&apos;) // &apos;(株)アイウエオ&apos;</code></pre></li></ul><h2 id="ha214098e44">まとめ</h2><p style="text-align: start">最初、半角と全角の表記揺れの吸収は正規表現と<code>replace</code>で処理を書かないといけないのかな...と思っていたんですが、調べてみたら文字列にも「正規化」の概念が存在するんですね！</p><p style="text-align: start">大変便利だったので、紹介させていただきました。皆さんも文字列の「正規化」をしてシンプルに実装しましょう。</p>

JavaScriptのnormalizeで文字列の「正規化」をして、検索機能の半角・全角の差をシンプルに吸収する

<p>クリエイティブなWEBサイト制作をする際によく使用する<code>requestAnimationFrame</code>は、JavaScriptで滑らかなアニメーションを実現する際、ブラウザの描画サイクルに同期してコールバック関数を実行する非常に便利なAPIですよね。</p><p><a href="https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame">https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame</a></p><p>しかし、近年、リフレッシュレートが120Hzやそれ以上のディスプレイが普及する中で、このAPIを適切に使用しないと、アニメーションが意図せず2倍の速さで実行されてしまう「<strong>120FPS問題</strong>」が発生してしまいます。</p><h2 id="he0bdd2c6b2">requestAnimationFrame の実行回数はディスプレイのリフレッシュレートに依存する</h2><p><code>requestAnimationFrame</code>の「描画サイクル」はディスプレイのリフレッシュレートに同期しているため、実行回数はリフレッシュレートに依存します。</p><p>例えば、リフレッシュレート60Hzのディスプレイでは、<code>requestAnimationFrame</code>のコールバック関数は1秒間に約<strong>60</strong>回実行されますが、リフレッシュレート120Hzのディスプレイでは、<code>requestAnimationFrame</code>のコールバック関数は1秒間に約<strong>120</strong>回実行されます。</p><p>これがアニメーションにどういう影響を与えるかというと次のようなケースです。</p><pre><code class="language-javascript">let position = 0;

function animate() {
 position += 1; // 1pxずつ移動
 element.style.left = ${position}px;

 requestAnimationFrame(animate);
}

requestAnimationFrame(animate);</code></pre><p>1回の描画サイクルで<code>position</code>を1ずつ増やす計算をする場合、60Hzのディスプレイでは1秒間に<code>position</code>が<strong>60</strong>増えますが、120Hzのディスプレイでは1秒間に<code>position</code>が<strong>120</strong>増えるため、60Hzを基準にした時に120Hzのディスプレイでは、アニメーションの速度は<strong>2倍</strong>になります。</p><p>このように、リフレッシュレートが高い画面ではアニメーションが速く実行されてしまう「<strong>120FPS問題</strong>」が発生するため、速度を一定に保つには、<code>timestamp</code>引数を使用して前のフレームからの経過時間を計算することで、速度をリフレッシュレートに依存しないように制御する必要があります。</p><pre><code class="language-javascript">let lastTimestamp = 0;
let position = 0;
const speed = 100; // 1秒間に100px移動する速度

function animate(timestamp) {
 const deltaTime = (timestamp - lastTimestamp) / 1000; // 経過時間を計算
 position += speed * deltaTime; // 経過時間に応じた距離だけ位置を更新
 element.style.left = ${position}px;
 lastTimestamp = timestamp;

 requestAnimationFrame(animate);
}

requestAnimationFrame(animate);</code></pre><h2 id="h2b9132e18c">gsap.ticker を使用してアニメーションを60FPSで制御する</h2><p><code>gsap.ticker</code>は、<code>requestAnimationFrame</code>を内部的に使いつつ、経過時間やフレームレートを自動的に管理してくれるユーティリティです。</p><p><a href="https://gsap.com/docs/v3/GSAP/gsap.ticker()/">https://gsap.com/docs/v3/GSAP/gsap.ticker()/</a></p><p><code>gsap.ticker</code>には、アニメーションの最大フレームレートを制御する<code>fps()</code>があります。</p><p><code>gsap.ticker.fps(60)</code>と記述するだけで、リフレッシュレートが120Hzのディスプレイであっても、アニメーションの更新を意図的に60FPSに制限することができます🙆‍♂️</p><pre><code class="language-javascript">let position = 0;

function animate() {
 position += 1; // 1pxずつ移動
 element.style.left = ${position}px;
}

gsap.ticker.fps(60);
gsap.ticker.add(animate);</code></pre><h3 id="hf792d3f297">gsap.ticker は登録したコールバック関数の解除もシンプルに記述できる</h3><p><code>gsap.ticker</code>は、登録したコールバック関数の解除も非常に簡単です。</p><p><code>requestAnimationFrame</code>の場合は次のアニメーションフレームの<code>ID</code>を保存しておく必要があります。</p><pre><code class="language-javascript">let animationId;
let position = 0;

function animate() {
 position += 1;
 element.style.left = ${position}px; 
 // 次のアニメーションフレームをリクエストし、IDを保持
 animationId = requestAnimationFrame(animate);
}

animate();

// 保持しておいたIDを使ってアニメーションをキャンセル
cancelAnimationFrame(animationId);</code></pre><p><code>gsap.ticker</code>は、<code>add()</code>で登録したコールバック関数を<code>remove()</code>で簡単に解除できます🙆‍♂️</p><pre><code class="language-javascript">let position = 0;

function animate() {
 position += 1; // 1pxずつ移動
 element.style.left = ${position}px;
}

// add()でコールバックを登録
gsap.ticker.add(animate);

// remove()でコールバックを解除
gsap.ticker.remove(animate);</code></pre><h2 id="ha214098e44">まとめ</h2><p>この問題、結構あるあるなんじゃないでしょうか。フロントエンド開発って多様なデバイスに最適化した書き方をしないといけないから難しいですよね...。</p><p>「このデバイスだけアニメーションが速いんだけど...」と指摘された際には、この問題を疑ってみてください。皆さんもぜひ<code>gsap.ticker</code>を使用してシンプルにアニメーションのFPSを管理しましょう<strong>。</strong></p>

【120FPS問題の解決策】 gsap.ticker を使用してアニメーションを60FPSで制御する

<p><br>CSSアニメーションの<code>animation-iteration-count: infinite</code>を指定している要素で、画面外でも無制限にアニメーションを繰り返しているWEBサイトをよく見かけます。</p><p>ブラウザは画面外のアニメーションもケアしないと実行され続けるので、CPU・GPUリソースは消費され続けます。画面外での不要なアニメーションを制御してパフォーマンスのよいWEBサイトを制作しましょう。</p><h2 id="h3997ab17f3">Intersection Observer で画面外のCSSアニメーションを制御するコードと実装例</h2><div style="left: 0; width: 100%; height: 300px; position: relative;"><iframe src="https://codepen.io/hisamikurita/embed/preview/GgpmgVp?default-tabs=js%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=GgpmgVp" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><h2 id="hb07f158db8">Intersection Observer を使用して画面内・画面外の判定をする</h2><p>要素が画面外の時の判定は<code>Intersection Observer</code>を使用します。</p><p><a href="https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver">https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver</a></p><p><code>scrollイベント</code>ではなく<code>Intersection Observer</code>を使用することでターゲット要素がビューポート（または指定したルート要素）に「交差」したかどうかを効率的に監視することができます。</p><pre><code class="language-javascript">const targets = document.querySelectorAll(&apos;.js-intersection&apos;);

const io = new IntersectionObserver((entries) =&gt; {
  entries.forEach((entry) =&gt; {
    if (entry.isIntersecting) {
      // 要素が画面内に入った場合
      entry.target.classList.add(&apos;is-intersection&apos;);
    } else {
      // 要素が画面外に出た場合
      entry.target.classList.remove(&apos;is-intersection&apos;);
    }
  });
}); // オプションは省略してデフォルト値を使用する。要素がビューポートに少しでも入るか出るかしたときに実行される。

targets.forEach((target) =&gt; io.observe(target));</code></pre><h3 id="h9a8c3d0060">scrollイベント で実装した場合の懸念点</h3><p><code>scrollイベント</code>でも同様にターゲット要素の画面内・画面外の判定は行えますが、<code>scrollイベント</code>はスクロールする度に頻繁に発火します。逆にパフォーマンスが悪化してしまう可能性が高いため<code>Intersection Observer</code>で実装しましょう🙆‍♂️</p><h2 id="haf499feb75">animation-play-state でCSSアニメーションの制御をする</h2><p>CSSアニメーションの制御には<code>animation-play-state</code>を使用します。</p><ul><li><code>running</code>  :アニメーションが現在実行中です。</li><li><code>paused</code> :アニメーションが現在停止中です。</li></ul><p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state">https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state</a></p><p>初期状態ではアニメーションを停止させておき、要素が画面内に侵入した際に付与される<code>is-intersection</code>クラスをトリガーとしてアニメーションを実行します。</p><pre><code class="language-css">.animation {
 animation: oneturn 10s linear infinite;
 animation-play-state: paused;
}

.animation.is-intersection {
 animation-play-state: running;
}

@keyframes oneturn {
 100% {
  transform: rotate(oneturn);
 }
}
</code></pre><h2 id="h1635405f20">【応用】 Intersection Observer でスクロールイベントの制御をする</h2><p><code>Intersection Observer</code>は、CSSアニメーションの制御だけでなく、<code>scrollイベント</code>でスクロール値に連動した計算を必要とする要素にも実装することで、画面外の時に不要なイベントハンドリングを削除してパフォーマンスを改善することができます✅</p><pre><code class="language-javascript">const target = document.querySelector(&apos;.js-scroll-target&apos;);

const handleScroll = () =&gt; {
  // スクロール値に連動した計算処理をしたい場合
  const scrollY = window.pageYOffset;
  target.style.transform = `translateY(${scrollY}px)`;
};

const io = new IntersectionObserver((entries) =&gt; {
  entries.forEach((entry) =&gt; {
    if (entry.isIntersecting) {
      // 要素が画面内に入った場合
      window.addEventListener(&quot;scroll&quot;, handleScroll);
    } else {
      // 要素が画面外に出た場合
      window.removeEventListener(&quot;scroll&quot;, handleScroll);
    }
  });
});

io.observe(target);
</code></pre><h2 id="ha214098e44">まとめ</h2><p>個人的にクリエイティブなWEBサイト制作を行う時には必須で意識したいことです。</p><p>基本的に画面外のアニメーションは停止させることを意識しましょう！</p>

Intersection Observer で画面外のCSSアニメーションを停止してパフォーマンスを改善する

<p>こんにちは、くりちゃんです。</p><p>先日、<strong>「LGTM GENERATOR WITH EMOJI」</strong>というLGTMジェネレーター(画像作成WEBサービス)を作成してみました。</p><p>この記事では、LGTMジェネレーターの制作過程をご紹介します。</p><h2 id="hbb8d5f9357">そもそも「LGTM」とは？</h2><p><span style="color: #000000d1">「LGTM」とは、Looks Good To Me の略で、チーム開発において、他のメンバーが書いたコードを承認する際に使われる、開発者の慣習的な言葉です。その際に単に「LGTM」というコメントだけでなく、</span><strong>「LGTM」を表す画像を貼ったら楽しいですよね。</strong></p><p><span style="color: #000000d1">エンジニアはテキストのコミュニケーションが多いので、チームの雰囲気を明るくするため、</span><strong>「LGTM」</strong><span style="color: #000000d1">の楽しげな画像を貼る慣習があったりします。</span></p><p><span style="color: #000000d1">真面目そうな人から、ちょっとふざけたLGTM画像が来たりすると心が和んだりします(笑) 個人的にもこの慣習は結構気に入っています。</span></p><h2 id="heb36f547ec">公開した LGTMジェネレーター</h2><p><s>下記のリンクからご覧いただけます。</s></p><p><a href="https://lgtm-generator-with-emoji.com"><s><u>https://lgtm-generator-with-emoji.com</u></s></a></p><p><a href="https://github.com/hisamikurita/lgtm-generator-with-emoji">https://github.com/hisamikurita/lgtm-generator-with-emoji</a></p><p>2025年現在サービスの公開を終了しました。</p><h3 id="h03726fb0df">技術スタック</h3><ul><li>Design: Figma</li><li>FrontEnd: Next.js / TypeScript / Tailwind</li><li>BackEnd: PHP Laravel</li><li>Hosting: AWS EC2</li></ul><h3 id="h5f4b56fab5">システム構成図</h3><figure><img src="https://images.microcms-assets.io/assets/6f002fc31ce344fb8317072804ccb410/0ad543880e0847d2a80fcd0b951a1771/lgtm.jpg" alt="" width="1028" height="385"></figure><h3 id="hcf3e7c4761">画像生成・保存フロー</h3><ol><li>ユーザーが絵文字を選択</li><li>フロントエンド（Canvas API）で画像生成</li><li>Base64エンコードしてLaravel APIへ送信</li><li>LaravelがBase64をデコード</li><li>S3に画像ファイルを保存</li><li>DBにメタデータ（URL、作成日時など）を保存</li></ol><h3 id="h8980a47662">画像表示フロー</h3><ol start="7"><li>LaravelがS3の画像URLをレスポンスで返却</li><li>ブラウザが返却されたURLにアクセス</li><li>CloudFrontがS3から画像を取得</li><li>CloudFront経由でブラウザに画像を配信・表示</li></ol><h2 id="h23f1ec4741">公開後の反響</h2><p>1年運用してみて数百件程画像を作成していただきました。</p><h2 id="h1413f4cdef">なぜサービスを終了したのか</h2><p>AWSの勉強のためにLaravelのホスティング先にEC2を採用したのですが、こちらのコストに月3000円程度かかっており、それに限界が来て...という感じでした😢</p><h3 id="h1d2c37b1e5">個人開発はランニングコストがどれだけ低く抑えられるかが重要</h3><p>今回は勉強のためだったとはいえ、個人で毎月払うにはちょっと痛い金額でした。現在であればCloudflareを使うことで、より低コストで運用できたのではないかと感じています。</p><p>今後、時間があれば、生成AIを活用して Laravel を Edge ランタイム環境で動作するコードへ変換するチャレンジをしてみたいです。</p>

【個人開発】LGTMジェネレーター(画像作成WEBサービス)を作成してみました

<p>先日、ポートフォリオを公開しました。<br><br>フロントエンドで関わったプロジェクト実績をまとめています。<br><br>CMSには <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer nofollow">microCMS</a> を採用しました！この記事では、ポートフォリオの制作過程をご紹介します。</p><h2 style="text-align: start" id="h133f9c2c15"><strong>公開したポートフォリオ</strong></h2><figure><img src="https://images.microcms-assets.io/assets/6f002fc31ce344fb8317072804ccb410/2a0230f4a0f34c57a6be9a4c2095c325/hisamikurita-portfoliosite-v2022-works-02.gif" alt="" width="1280" height="734"></figure><figure><img src="https://images.microcms-assets.io/assets/6f002fc31ce344fb8317072804ccb410/9db25dec0aaf4a0b926f6ceeb95c37e0/hisamikurita-portfoliosite-v2022-works-01-_online-video-cutter.com_-_1_.gif" alt="" width="1280" height="734"></figure><figure><img src="https://images.microcms-assets.io/assets/6f002fc31ce344fb8317072804ccb410/47f75662b2c4467c94fae92142e2692e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-08-13%2011.44.51.png" alt="" width="3420" height="1962"></figure><p>下記のリンクからご覧いただけます。<br><br><a href="https://hsmkrt1996.com/">https://hsmkrt1996.com/</a><br><br>リポジトリも公開しているので、良かったら参考にしてみてください。<br><br><a href="https://github.com/hisamikurita/hisamikurita-portfoliosite-v2022">https://github.com/hisamikurita/hisamikurita-portfoliosite-v2022</a></p><h2 id="h06b1f6fa38"><strong>ポートフォリオを作成しようと思ったきっかけ</strong></h2><p>ポートフォリオを作成しようと思ったきっかけが主に二つです。</p><ul><li>フロントエンドエンジニアとしての、自分の実力が知りたかった</li><li>目標にしていたWEBデザインアワードを受賞したかった</li></ul><p style="text-align: start">特にWEBサイト制作者であればご存知の方も多いであろう、<a href="https://www.awwwards.com/sites/hisami-kurita-portfolio" target="_blank" rel="noopener noreferrer nofollow">Awwwards</a> の<strong>「SOTD」</strong>を受賞することを目標してました。<br><br><strong>「SOTD」</strong>は応募中の全サイト中、その日のベストスコアを獲得すれば表彰されます。応募が承認されてから2ヶ月間はSOTDを受賞する対象になります。</p><h2 style="text-align: start" id="h971e889766"><strong>ポートフォリオ制作の流れ</strong></h2><p style="text-align: start">デザインは同僚のデザイナーさんにお願いしてました。<br><br>当時一緒によく案件をやっていて、<strong>以前デザイナーさんが自己研鑽で制作していたデザイン案がとても好みだったので、そのテイストにして欲しい、パーティクルを使って欲しい、WEBデザインアワードを取れるクオリティにして欲しい</strong>と伝えました。<br><br>今振り返るとすごくふわっとした要求だったと思うのですが、そこから載せたいコンテンツやページ数を相談して、約一ヶ月ほどでデザインを完成させてくれました。<br><br>ほんとにすごい...。<br><br>デザインを超速で作っていただけたので、ここから実装フェーズです。<br><strong>WEBデザインアワード</strong>は今まで見たことがない革新的なコンテンツを評価する傾向があります。その上で<strong>「遊び心」</strong>のあるインタラクションは欠かせません。<br><br>本業の方もあったので、ちまちまやっていたら実装には<strong>1年</strong>ぐらいかかってしまいました。特に<strong>WebGL</strong>の実装は難しくて、デザイナーさんと自分が実装できるラインの「落とし所」は常に探っていました。</p><h2 id="h730f33c8a3"><strong>Awwwards に応募してみて</strong></h2><p>完成後に Awwwards に応募してみて無事 2022年7月13日の<strong>「SOTD」</strong>を受賞しました〜🎉🎉<br><br><strong>Developer Award</strong> も同時に受賞して、デザインだけでなく開発の品質も評価されたことがすごく嬉しかったです。<br><br><a href="https://www.awwwards.com/sites/hisami-kurita-portfolio">https://www.awwwards.com/sites/hisami-kurita-portfolio</a></p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">ポートフォリオを制作することで主体的なキャリア形成ができるようになったり、副業でお仕事をいただけたり、色々良かったことがあるので、こちらはまた別でブログを書きたいと思います！</p>

【WEBデザインアワード受賞】フロントエンドエンジニアがポートフォリオを公開しました

<h2 id="h8e2b124f85">このブログを作ったきっかけについて</h2><p>はじめまして。<span style="color: #000000">東京で働くクリエイティブ・フロンエンドデベロッパーの「くりちゃん」です。</span></p><p></p><p>最近は <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer nofollow"><u>microCMS</u></a> を活用して、<strong>SSG（静的サイトジェネレーション）</strong>でWEBサイトを作る案件が増えてきました。</p><p>つい 2〜3 年前までは「CMS＝WordPress」が定番だったように感じていたのに…WEBの流れは本当に早くて、ついていくのが精一杯です。</p><p></p><p>そこで、<strong>「いつか microCMS でブログを作りたい」</strong>と思っていたこともあり、年末年始のスキマ時間でこのブログを作っちゃいました。</p><p></p><p>リポジトリも公開してるので、良かったら参考にしてみてください。</p><p></p><p><a href="https://github.com/hisamikurita/hisamikurita-techblog"><u>https://github.com/hisamikurita/hisamikurita-techblog</u></a></p><p></p><h2 id="h54efd535b8">使用技術について</h2><ul><li>Next.js</li><li>TypeScript</li><li>Tailwind CSS</li><li>microCMS</li><li>Github Actions</li></ul><p>使用技術はざっくりこんな感じです。フロントエンドフレームワークは <code>Gatsby.js</code> と<code>Astro</code>を試す機会があったのですが、しばらくは安定感のある<code>Next.js</code>に落ち着きそうです。どんな要件にも柔軟に対応できるのとトレンドなので採用しました。</p><p></p><p>スタイリングは現在いろいろ試しているところで、今回は<code>Tailwind CSS</code>を採用しました。シンプルなWEBサイトとは特に相性がよく、複数人で開発するときにもCSSに対する共通認識が取れるのが良い感じです。デザイン重視のクリエイティブなWEBサイトを制作する時は<code>CSS Modules</code>を採用するようにしています。</p><p></p><p>CICDは<code>Github Actions</code>で実装しています。必要なモジュールをインストールしていくだけなので、そんなに難しくなかったです。</p><p></p><h2 id="h1d6747a940">ブログのシステム構成図</h2><figure><img src="https://images.microcms-assets.io/assets/6f002fc31ce344fb8317072804ccb410/921d11b73ec044efb2a59ca30d6ee446/293331242-8d9e53a2-f36f-4b71-9a0c-8aeab3c1d70c.jpg" alt="" width="1169" height="619"></figure><p>このブログのシステム構成はとてもシンプルな運用になっています。本業だとサーバーレス構成の<code>S3</code>と <code>CloudFront</code>で、本番環境・ステージング環境・開発環境をしっかり分けることが多いので、もう少し複雑になります。</p><p></p><p>microCMSの<strong>プレビュー機能</strong>実装のためにNext.jsの<code>pages</code>配下に<code>preview</code>フォルダを作成しています。このページは更新者が「下書き → SSGのビルドを待たずにすぐ確認」できるように、<strong>CSR（クライアントサイドレンダリング）</strong>で画面を表示しています。そして、一般の閲覧者には見えないように<strong>Basic認証</strong>もかけています。</p><p></p><h2 id="hdc10b0f971">ブログの「機能」開発について</h2><p>WordPressの場合は豊富なプラグインでブログの主要な以下の機能は楽に実装できると思います。</p><ul><li>絞り込み機能</li><li>検索機能</li><li>目次機能</li><li>ページネーション</li></ul><p>microCMSの場合はこれらの全てをフロントエンド側で実装する必要がありますが、公式ドキュメントが充実していて、機能自体もしっかり揃っているので、困ることはなかったです。</p><p></p><h2 id="h0378d5c43d">今後の方針</h2><p>せっかく作ったこのブログ、作って終わりではなく、実験の場として、思いついたアイデアや試してみたい技術は、気軽に投入していきたいと思います。</p>