large_eycatch-gemini-vs-cloud.png

medium_eycatch-gemini-vs-cloud.png

small_eycatch-gemini-vs-cloud.png

thumbnail_eycatch-gemini-vs-cloud.png

eycatch-gemini-vs-cloud.png

画像処理系AIの Gemini 2.5 Flash Image と Cloud Vision API を比べてみる（Next.jsの実装例付き）

## はじめに

データを分析する際、数値をそのまま眺めるだけでなく、グラフなどで可視化して視覚的に分かりやすくすることが重要です。
そんな時に活用できるのが、Google が提供する無料の BI ツール<a href="https://lookerstudio.google.com" target="_blank" rel="noopener noreferrer">Looker Studio</a>です。

今回は Looker Studio の基本的な使い方から、少し応用的な機能までを紹介します。

## Looker Studio とは？

Looker Studio（ルッカースタジオ）とは、Google が提供する無料の BI（ビジネスインテリジェンス）ツールです。

点在する様々なデータを一つに集約し、グラフや表、地図などを用いて視覚的に分かりやすいダッシュボードやレポートを自動で作成できます。

プログラミングなどの専門知識は不要で、直感的なマウス操作（ドラッグ＆ドロップ）で誰でも簡単に見やすいレポートを作成できるのが大きな特長です。

以前は「Google データポータル」という名称で知られていましたが、2022 年 10 月に Google のデータ分析プラットフォーム「Looker」ファミリーに統合され、現在の名称に変更されました。

## Looker Studio でできること

### 様々なデータソースへの接続

Google アナリティクス（GA4）や Google 広告、Google スプレッドシートはもちろん、YouTube アナリティクス、BigQuery（Google Cloud のデータウェアハウス）など、様々な Google サービスに接続できます。さらに、CSV ファイルのアップロードや、外部のデータベース（MySQL など）にも対応しており、社内外に散らばるデータを一元的に管理できます。

### データの可視化（ビジュアライゼーション）

棒グラフ、折れ線グラフ、円グラフ、地図、スコアカード、ピボットテーブルなど、多彩なグラフを作成できます。また、色やフォント、レイアウトを自由に変更し、ブランドイメージに合ったレポートを作成可能です。

### インタラクティブなレポート作成

静的なグラフを並べるだけでなく、閲覧者が期間を指定したり、特定の項目で絞り込み（フィルタ）をかけたりできる「動的なレポート」を作成できます。これにより、レポートの閲覧者は自身でデータを深掘りし、必要な情報を得ることができます。

### レポートの共有と共同編集

作成したレポートは、URL を共有するだけで、チームや顧客と簡単に共有できます。閲覧のみ、編集可能といった権限設定も柔軟に行えるため、安全なデータ共有が可能です。また、Google ドキュメントのように、複数人で同時にレポートを編集することもできます。

### レポート作成の自動化

一度レポートを作成すれば、元のデータソースが更新されると、Looker Studio のレポートも自動的に最新の状態に更新されます。これにより、「毎週」「毎月」といった定期的なレポート作成の手間から解放されます。

## Looker Studio の使い方（基本）

### データ追加

今回はサンプルとして、<a href="https://www.data.jma.go.jp/risk/obsdl/" target="_blank" rel="noopener noreferrer">気象庁のサイト</a>からダウンロードした、以下のような気象データを使用します。

![add_data_02.png](https://cont.sterfield.co.jp/uploads/add_data_02_1a8ab6e92a.png)

Looker Studio にデータを追加するには、ヘッダーメニューの「データを追加」ボタンをクリックします。

![add_data_01.png](https://cont.sterfield.co.jp/uploads/add_data_01_6b95f9f27b.png)

次に、接続したいデータソースのコネクタ（今回は Google スプレッドシート）を選択し、必要な設定を行って「追加」ボタンをクリックすると、データがレポートに追加されます。

![add_data_03.png](https://cont.sterfield.co.jp/uploads/add_data_03_a5b2662327.png)

スプレッドシートを選択した場合は、以下のように対象のシートやオプションを設定できます。

![add_data_04.png](https://cont.sterfield.co.jp/uploads/add_data_04_bea158b4f6.png)

### グラフ追加

上部のツールバーから「グラフを追加」をクリックし、表示されるリストから追加したいグラフの種類を選択します。そして、レポートのキャンバス上の任意の場所をクリックするとグラフが配置されます。グラフの種類は後からでも変更可能です。

![add_graph_01.png](https://cont.sterfield.co.jp/uploads/add_graph_01_afdb9d1f57.png)

### ディメンションと指標

Looker Studio では、主に「ディメンション」と「指標」を使ってグラフを作成します。

- **ディメンション**: データをどのような切り口で見るかを定義する項目です（例：日付、商品カテゴリ、地域など）。グラフでは主に軸として使われます。
- **指標**: 集計・計算される具体的な数値データのことです（例：売上、ユーザー数、気温など）。グラフでは主に値として使われます。

例えば、折れ線グラフでディメンションを「年月日」、指標を「平均気温(℃)」に設定すると、以下のような時系列グラフが作成されます。

![dimension_metric_01.png](https://cont.sterfield.co.jp/uploads/dimension_metric_01_11a1ff756e.png)

### コントロール

コントロールは、閲覧者がレポートの表示内容を動的に変更できるようにする機能です。例えば、表示するデータの期間を任意に変更したり、特定の流入経路だけのデータを表示するなど、インタラクティブな操作が可能になります。

コントロールは、上部ツールバーの「コントロールを追加」から追加できます。

![control_01.png](https://cont.sterfield.co.jp/uploads/control_01_a60e4026c4.png)

先ほど作成したグラフに「期間設定」のコントロールを追加すると、以下のように閲覧者が表示期間を自由に変更できるようになります。

![control_02.png](https://cont.sterfield.co.jp/uploads/control_02_dbb96f3ee0.png)

### レポートの共有

画面右上の「共有」ボタンから、作成したレポートを他のユーザーと共有できます。共有する際には、「閲覧者」「編集者」といった権限をユーザーごとに設定できます。

![share_01.png](https://cont.sterfield.co.jp/uploads/share_01_f0f4339505.png)

## Looker Studio の使い方（応用）

### スタイル調整

各グラフや表を選択した際に表示される「スタイル」タブから、タイトル、フォント、色、凡例の表示などを細かく調整できます。レポート全体のデザインを統一したり、ブランドイメージに合わせたりすることが可能です。

![layout_01.png](https://cont.sterfield.co.jp/uploads/layout_01_eb5dccc5a9.png)

### データ統合

データ統合は、複数のデータソースを 1 つのデータソースにまとめることができる機能です。これは、SQL の JOIN のように、異なるデータソースを共通のキー（結合キー）で紐づける機能です。

今回は例として、<a href="https://www.data.jma.go.jp/risk/obsdl/" target="_blank" rel="noopener noreferrer">気象庁のサイト</a>から追加でダウンロードした、別の気象データを使用して説明します。

![join_02.png](https://cont.sterfield.co.jp/uploads/join_02_a1c65241db.png)

メニューの「リソース」→「統合を管理」から統合の管理画面に移動し、「統合を追加」をクリックします。

![join_01.png](https://cont.sterfield.co.jp/uploads/join_01_b169ba434f.png)

結合するテーブルを選択し、それぞれのテーブルから使用するディメンションと指標を設定します。

![join_03.png](https://cont.sterfield.co.jp/uploads/join_03_97eeb6d6c3.png)

次に「結合を設定」から、結合方法（内部、左外部など）や結合条件（キーとなるフィールド）を設定します。

![join_04.png](https://cont.sterfield.co.jp/uploads/join_04_ed2ec6ee9f.png)

統合して作成された新しいデータソースをグラフのデータソースとして選択することで、複数のデータソースをまたいだグラフが作成できます。

![join_05.png](https://cont.sterfield.co.jp/uploads/join_05_e196c456c1.png)

### 計算フィールド

計算フィールドは、既存の項目をもとに、演算子、関数、正規表現などを使って、独自のディメンションや指標を定義できる機能です。

ここでは例として、日ごとの寒暖差（最高気温 - 最低気温）を算出する計算フィールドを作成します。

メニューの「リソース」→「追加済みのデータソースの管理」からデータソースの管理画面に移動し、計算フィールドを追加したいデータソースの「編集」をクリックします。

![calc_01.png](https://cont.sterfield.co.jp/uploads/calc_01_cb7e01df8b.png)

次に「フィールドを追加」→「計算フィールドを追加」をクリックします。

![calc_02.png](https://cont.sterfield.co.jp/uploads/calc_02_176eeb1325.png)

![calc_03.png](https://cont.sterfield.co.jp/uploads/calc_03_1719d9110e.png)


フィールド名と計算式を入力します。計算式には、四則演算や CASE 文、さらには様々な<a href="https://cloud.google.com/looker/docs/studio/function-list" target="_blank" rel="noopener noreferrer">関数</a>を使用できます。

![calc_04.png](https://cont.sterfield.co.jp/uploads/calc_04_b8706b2ab0.png)

作成した計算フィールドは、通常のフィールドと同様に、グラフのディメンションや指標として利用できます。

![calc_05.png](https://cont.sterfield.co.jp/uploads/calc_05_4b0d576972.png)

## まとめ

今回は、Google が提供する無料の BI ツール「Looker Studio」について、基本的な使い方から応用的な機能までを紹介しました。
Looker Studio を活用することで、プログラミングの知識がなくても、様々なデータを可視化し、示唆に富んだインタラクティブなレポートを簡単に作成できます。

主なポイントは以下の通りです。

- **多様なデータソース接続**: Google 系のサービスはもちろん、CSV や外部 DB など、様々なデータに接続可能。
- **直感的な操作**: ドラッグ＆ドロップでグラフや表を自由に配置し、レポートを作成。
- **動的なレポート**: フィルタや期間設定などのコントロールを追加し、インタラクティブな分析を実現。
- **高度な機能**: データ統合や計算フィールドにより、より深いデータ分析が可能。
- **簡単な共有と自動更新**: 作成したレポートは URL で簡単に共有でき、データは自動で最新の状態に保たれる。

本記事が、Looker Studio を使い始めるきっかけとなれば幸いです。

## 参考

- <a href="https://www.dsk-cloud.com/blog/gc/what-is-google-looker-studio" target="_blank" rel="noopener noreferrer">https://www.dsk-cloud.com/blog/gc/what-is-google-looker-studio</a>
- <a href="https://www.dsk-cloud.com/blog/gc/basic-usage-of-looker-studio" target="_blank" rel="noopener noreferrer">https://www.dsk-cloud.com/blog/gc/basic-usage-of-looker-studio</a>
- <a href="https://inhouse-plus.jp/reporting/google-dataportal-guide/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/google-dataportal-guide/</a>
- <a href="https://inhouse-plus.jp/reporting/looker-studio-add-components/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/looker-studio-add-components/</a>
- <a href="https://inhouse-plus.jp/reporting/calculated-field/" target="_blank" rel="noopener noreferrer">https://inhouse-plus.jp/reporting/calculated-field/</a>
- <a href="https://www.plan-b.co.jp/blog/seo/31762/" target="_blank" rel="noopener noreferrer">https://www.plan-b.co.jp/blog/seo/31762/</a>
- <a href="https://cloud.google.com/looker/docs/studio/add-data-to-a-report" target="_blank" rel="noopener noreferrer">https://cloud.google.com/looker/docs/studio/add-data-to-a-report</a>
- <a href="https://www.uncovertruth.co.jp/dx-accelerator/blog/articles/looker_studio/003/" target="_blank" rel="noopener noreferrer">https://www.uncovertruth.co.jp/dx-accelerator/blog/articles/looker_studio/003/</a>
- <a href="https://note.com/tscloud_jp/n/n357732008126" target="_blank" rel="noopener noreferrer">https://note.com/tscloud_jp/n/n357732008126</a>
- <a href="https://it-pocket.com/lookerstudio/797/" target="_blank" rel="noopener noreferrer">https://it-pocket.com/lookerstudio/797/</a>
- <a href="https://www.principle-c.com/column/lookerstudio/looker-studio-data-blending-techniques/" target="_blank" rel="noopener noreferrer">https://www.principle-c.com/column/lookerstudio/looker-studio-data-blending-techniques/</a>

small_eyecatch.png

thumbnail_eyecatch.png

eyecatch.png

Looker Studio の使い方

## はじめに

Node.jsは、Web開発や自動化スクリプト、APIサーバー構築など、幅広い分野で利用されているJavaScript実行環境です。 
本記事では、これからNode.jsを学ぶ方に向けて、基本的な使い方と環境構築の手順を解説します。

## 1. Node.jsとは？

* JavaScriptをサーバーサイドで実行できる環境
* Google ChromeのV8エンジンをベースに開発
* 非同期処理（イベント駆動型）に強く、高速な動作が可能
* Webアプリ、APIサーバー、CLIツール、IoT開発など幅広く利用されている

**フロントエンド開発者が、そのままJavaScriptを活かしてサーバーサイド開発できるのが最大のメリットです。**

**特徴：**
- **非同期処理が得意**（高速なI/O）
- **npm** という豊富なパッケージ管理システム
- クロスプラットフォーム対応（Windows / macOS / Linux）

## 2. Node.jsのインストール

Node.js をインストールする前に、まず nvm を使うかどうか を決めましょう。

### 2.1 先に考える：nvmを使うかどうか

* nvm を使う場合 
先に nvm をインストールしてから、nvm 経由で Node.js を入れる

* nvm を使わない場合 
公式サイトから直接 Node.js をインストール

**これにより、複数バージョンを切り替えたい場合も迷わず手順を進められます。**

### 2.2 公式サイトからダウンロード（nvm を使わない場合）
1. [Node.js公式サイト](https://nodejs.org/) にアクセス
2. **LTS（安定版）** を選んでダウンロード
3. インストーラーの指示に従ってインストール

#### 2.2.1 バージョン確認
インストール後、ターミナルで以下を実行してバージョンを確認します。

```
node -v # Node.js のバージョンを確認
npm -v # パッケージ管理ツール npm のバージョンを確認
```
👉 正しくバージョンが表示されればインストール成功です。

### 2.3 Node Version Manager (nvm)を使う方法

プロジェクトごとに異なる Node.js バージョンを使い分けたい場合に便利なのが nvm（Node Version Manager）です。 
nvm を使えば、複数バージョンを簡単に切り替えることができます。

#### 2.3.1 nvm の使い方（macOS / Linux の例）

```
# nvm のインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Node.js LTS をインストール
nvm install --lts

# バージョン確認
node -v
npm -v
```
Windows の場合は [nvm-windows](https://github.com/coreybutler/nvm-windows/releases)を利用します。

## 3. 最初のプログラムを作ってみよう

1. 任意のフォルダを作成
2. app.js を作成して以下を記述

```js
console.log("Hello, Node.js!");
```
そのフォルダで、次のコマンドを実行します。

```
node app.js
```
👉 ターミナルに Hello, Node.js! と表示されれば成功です。

## まとめ

本記事では、Node.jsの基本と環境構築について解説しました。

* Node.jsは JavaScriptをサーバーサイドで実行できる環境
* 初心者はまず 公式サイトからLTS版をインストール すればOK
* 実務や学習を進めるときは nvm を使うと便利
* node app.js を実行して「Hello, Node.js!」が表示されればスタート成功

次回は、npm の使い方と簡単なサーバー構築について解説します。

Node.js入門 ― 基本の使い方と環境構築

## はじめに
最近のソフトウェア開発では、AIの活用が急速に進み、すっかり当たり前のものとなりました。コードの自動補完やエラーチェックを行うAIコーディング支援ツールはすでに多くの開発者に利用されていますが、さらに一歩進んだ「AIコーディングエージェント」という概念をご存知でしょうか？ まるで開発チームの一員のように自律的にタスクをこなすAIの登場は、私たちの開発スタイルを大きく変えるでしょう。

### AIコーディング支援とAIコーディングエージェントの違い
AIコーディング支援は、開発者がコードを書く際の補助を目的としています。例えば、入力中のコードの自動補完、構文チェック、簡単なリファクタリングの提案などがこれにあたります。IDE（統合開発環境）に組み込まれているCopilotのようなツールがこれにあたります。これらは開発者の作業を「支援」するものであり、最終的な判断や実装は開発者自身が行います。

一方、AIコーディングエージェントは、より自律的に開発タスクを実行する能力を持つツールです。単にコードを提案するだけでなく、要件を理解し、開発計画を立て、実際にコードを生成・修正し、テストまで実行できます。与えられたタスクに対して一連のプロセスを自律的に進めていくのが特徴です。

### Julesの簡単な紹介と始め方

今回体験したのは、そんなAIコーディングエージェントの一つである「[Jules](https://jules.google/)」です。Julesは、開発者が自然言語で与えた指示に基づき、コードの生成、テスト、デバッグ、リファクタリングといった一連のソフトウェア開発タスクを自動化するツールです。まるで優秀なペアプログラミングパートナーがいるかのように、開発者はより本質的な問題解決に集中できるようになるでしょう。

Julesの詳しい始め方については、以下の参考リンクをご確認ください。GitHubリポジトリにJulesのGitHub Appをインストールし、Write権限を付与すれば、すぐにタスクを依頼できます。

#### 参考リンク
- https://jules.google/docs/
- [Note記事: AIコーディングエージェントの導入](https://note.com/tandago/n/n2363371f46b8)
- https://qiita.com/syukan3/items/2c8989a59d7800b1c896#4-%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%865-%E5%88%86%E3%81%A7%E5%AE%8C%E4%BA%86

### 実際にやってみた例の紹介

今回は、「Dependabotの指摘に対応するため、Honoのバージョンアップを実施してください。」と日本語で依頼してみました。

![planning](https://cont.sterfield.co.jp/uploads/planning_03e7631bf6.jpg)

Julesはまず、与えられたタスクを詳細に分解し、実装の手順をプランニングしました。

---

![complete](https://cont.sterfield.co.jp/uploads/complete_f0fb0989f6.jpg)

プランニング結果を承認すると、Julesは実際にコードの修正を開始しました。注目すべきは、具体的な指示を与えていないにもかかわらず、Julesが自律的に動作確認の方法（npm run devによるローカル実行）を特定し、実行した点です。これは、単にコードを生成するだけでなく、開発プロセス全体を理解しているJulesの能力を強く示すものです。

上記の画像は、すべての作業が完了し、Julesが変更内容を「dependabot/npm/hono-4.7.11」というブランチにプッシュした後の状態です。

### やってみた所感

Julesを体験してみて、まず感じたのはその自律性の高さです。従来のAIコーディング支援ツールでは、開発者が積極的に指示を出し続ける必要がありましたが、Julesは一度タスクを与えれば、まるでジュニアエンジニアがタスクを進めるかのように自律的に動きます。これにより、開発者はより複雑な問題解決やアーキテクチャ設計などに集中できる時間が格段に増えると感じました。

一方で、まだ完璧ではない点もいくつかありました。例えば、レスポンスに時間がかかる場合がある点や、日本語入力時の細かなUI挙動に改善の余地がある点など、少しストレスを感じる場面もありました。しかし、これらは現在ベータ版として提供されているため、今後の改善に期待しています。

### まとめ

AIコーディングエージェント「Jules」を体験してみて、その将来性を強く感じました。まだ発展途上ではありますが、今後AIコーディングエージェントがさらに進化することで、ソフトウェア開発のあり方は大きく変わっていくでしょう。単純作業はAIに任せ、人間はより創造的で戦略的な業務に集中する、そんな未来がすぐそこまで来ているのかもしれません。

皆さんもぜひ一度、JulesのようなAIコーディングエージェントを体験してみてはいかがでしょうか。

large_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

medium_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

small_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

thumbnail_Gemini_Generated_Image_tibdtetibdtetibd.jpeg

Gemini_Generated_Image_tibdtetibdtetibd.jpeg

Julesで体験！AIコーディングエージェントの可能性

## はじめに
ChatGPTなどのAPIを使うことで、これまで難しかった書類から必要な情報をピックアップする処理や、多言語への変換などがとても容易に行えるようになりました。
しかしながら、その処理はある程度の曖昧さを含まざるを得ないため、1回だけで最適な答えを出すこと難しいケースは多々あります。
そこで今回は、再帰的にChatGPTのAPIへ指示を出すことで、答えを洗練させられるかどうか、検証してみました。

## OpenAIチャットAPIでアイディアを再帰的に洗練させる

OpenAIのチャットAPIとTypeScriptを使い、アイディアを段階的に洗練させるプログラムを紹介します。 

### 作ってみたプログラム

```typescript
import dotenv from "dotenv";
import OpenAI from "openai";
import { zodResponseFormat } from "openai/helpers/zod";
import { z } from "zod";

dotenv.config({ path: `${__dirname}/.env` });

// APIの返答の形式を安定化させるため、Zodを使ってフォーマット指定を行います
const responseFormat = z.object({
 idea: z.string()
});

const main = async () => {
 // OpenAIの初期設定
 const client = new OpenAI({
 organization: process.env.CHAT_GPT_ORGANIZATION_ID,
 project: process.env.CHAT_GPT_PROJECT_ID,
 apiKey: process.env.CHAT_GPT_API_KEY
 });

 const MAX_COUNT = 5; // 再帰処理で呼び出す回数制限

 const getIdeas = async (
 question: string,
 ideas: string[],
 count: number = 1
 ) => {
 // 最初の指示
 let content = `## 指示
次に挙げる議題について、アイディアを出してください
「${question}」

## 制限事項
- 200文字程度で出してください`;

 // 再帰的に呼び出された時の指示
 if (count > 1) {
 content = `## 指示
次に挙げるアイディアを類推を使って洗練させてください
課題: ${question}
アイディア：「${ideas[ideas.length - 1]}」

## 制限事項
- 200文字程度で出してください`;
 }

 // チャットAPIの実行
 const chatCompletion = await client.chat.completions.create({
 model: "gpt-4o-mini",
 response_format: zodResponseFormat(responseFormat, "idea"),
 messages: [
 {
 role: "user",
 content
 }
 ]
 });

 // APIのレスポンスをパースして、情報を取得
 const responseMessage =
 JSON.parse(chatCompletion?.choices?.[0]?.message?.content ?? "{}")
 ?.idea ?? "";

 // 過去データに追加
 ideas.push(responseMessage);

 // 再帰的に呼び出す
 if (count < MAX_COUNT) {
 return getIdeas(question, ideas, count + 1);
 }

 return {
 question,
 ideas
 };
 };

 // 関数の実行
 const result = await getIdeas(
 "アジア向け越境ECを国内メーカーの販売担当者へ広告する場合の効果的なバナーデザイン",
 []
 );

 console.log(result);
};

main()
 .then(() => {
 console.log("Done");
 })
 .catch((error) => {
 console.error("Error:", error);
 });
```

#### プログラムの解説

- `.env`ファイルに定義されたAPIキーなどの環境変数を`dotenv`で読み込みます。
- Zodを使い、APIレスポンスの形式（idea: string）を指定することで、レスポンスの型を保証し、安定性を高めます。
- `getIdeas`関数は、指定回数（MAX_COUNT）まで再帰的にChatGPT APIへリクエストを送り、毎回新しいアイディアを生成・洗練します。
- 1回目は議題からアイディアを生成し、2回目以降は直前のアイディアをさらに洗練するよう指示します。
- すべてのアイディアは配列に蓄積され、最終的にまとめて出力されます。

### 実行結果例

#### 1回目
```md
1. クリーンでモダンなデザインを使用し、アジア市場を象徴する色彩（赤、金など）を取り入れる。
2. 商品写真を大きく配置し、目立たせることで視覚的インパクトを強調。
3. アジア顧客のニーズを反映したメッセージ（例：トレンド性や伝統的価値）を強調。
4. 言語はターゲット地域に応じたローカリゼーションを施し、親しみやすさを演出。
5. "越境ECで新市場開拓！"などのキャッチコピーで興味を引く。
```

#### 3回目
```md
アジア向け越境ECのバナーデザインには、
1. アジア特有の色（赤、金）を取り入れたクリーンでモダンなデザインが効果的。
2. 大きな商品写真でインパクトを与え、
3. トレンドと伝統を融合させたメッセージで興味を引く。
4. 各地域の言語で親しみやすさを演出し、
5. "新市場開拓のチャンス！"などの魅力的なキャッチコピーを加えることで、販売担当者の関心を高める。
```

#### 5回目
```md
「アジア向け越境ECのバナーデザインでは、
1. アジアの文化に根ざした明るい色合い（特に赤や金）を使用し、パッと目を引くデザインに。
2. 商品の魅力を伝えるために、大きな商品画像を配する。
3. トレンドと伝統を融合したキャッチコピーで感情に訴えかけ、
4. 地域ごとの言語で表記して親しみを感じさせる。
5. 更に、「新市場開拓は今がチャンス！」というポジティブなフレーズで顧客の関心を引く。
```

### 感想
結果を見てみると、アイディアそのものが洗練されているというより、文章として洗練されていっているという感じでした。
「洗練させる」ということが、人間にとっても解釈が難しいように、そもそも曖昧な指示なのが原因かもしれませんね。
また、ただ繰り返せばいいというわけではなさそうです。
ただし、情報を絞り込んでいくなど、プロンプトや利用目的を工夫すれば、この方法も有効に活用できる可能性があります。

### 注意
- 実案件でAPIを再帰的に利用する場合、API利用コストの増大や、レスポンスの質が頭打ちになる可能性についても、さらなる検証が必要です。

### 参考サイト
- <a href="https://platform.openai.com/docs/overview" target="_blank" rel="noopener noreferrer">Overview - OpenAI API</a>

large_eycatch.png

medium_eycatch.png

small_eycatch.png

thumbnail_eycatch.png

eycatch.png

OpenAIのチャットAPIを再帰的に呼び出す方法を検証してみた

## はじめに

GitHub Actions を利用する際、似たような処理を何度も記述していませんか？ ワークフローが複雑になるにつれて、メンテナンスコストが増大し、変更への対応も煩雑になりがちです。 
この記事では、GitHub Actions の処理を共通化することで、これらの問題を解決するための手法を、具体的な例を交えながら解説します。

## 再利用可能なワークフローによる共通化

まずは、<a href="https://docs.github.com/ja/actions/sharing-automations/reusing-workflows" target="_blank" rel="noopener noreferrer">ワークフローの再利用</a>を活用した共通化の方法を説明します。

**on** キーワードで、ワークフローを直接トリガーするイベントの代わりに **workflow_call** イベントを指定すると、別のワークフローからそのワークフローを呼び出すことができます。

**例: .github/workflows/deploy.yml**

```yaml
name: Deploy to Production

on:
 workflow_call: # ワークフローを再利用可能にするイベント
 inputs: # 呼び出し元のワークフローからパラメータを受け取る
 environment:
 required: true
 type: string
 target_host:
 required: true
 type: string

 secrets: # シークレットを受け渡す場合は明示的に指定する必要がある
 SSH_PRIVATE_KEY:
 required: true

 outputs: # 処理結果を呼び出し元のワークフローに返す
 deployment_status:
 description: "The status of the deployment job"
 value: ${{ jobs.deploy.outputs.status }}

jobs:
 deploy:
 runs-on: ubuntu-latest
 outputs:
 status: ${{ job.status }}
 steps:
 - name: Checkout code
 uses: actions/checkout@v4
 - name: Set up SSH
 run: |
 mkdir -p ~/.ssh
 echo "${{ secrets.SSH_PRIVATE_KEY }}" | tr -d '\r' > ~/.ssh/id_rsa
 chmod 600 ~/.ssh/id_rsa
 ssh-keyscan -H ${{ inputs.target_host }} >> ~/.ssh/known_hosts
 - name: Deploy to server
 run: rsync -avz -e "ssh -i ~/.ssh/id_rsa" ./ ${{ inputs.environment }}@${{ inputs.target_host }}:/var/www/html
```

上記のワークフローを呼び出すには、以下のように記述します。 
**jobs** セクションで新しいジョブを定義し、そのジョブ内で **uses** キーワードを使って、再利用可能なワークフローのパスを指定します。

**例: .github/workflows/deploy.yml**

```yaml
name: Deploy Application

on:
 push:
 branches: [main]

jobs:
 deploy-staging:
 uses: ./.github/workflows/deploy.yml # 共通化したワークフローのパス
 with: # 呼び出し元の inputs で定義した値を渡す
 environment: "staging"
 target_host: "staging.example.com"
 secrets: # 呼び出し元の secrets で定義した値を渡す
 SSH_PRIVATE_KEY: ${{ secrets.STAGING_SERVER_SSH_KEY }}

 deploy-production:
 uses: ./.github/workflows/deploy.yml
 with:
 environment: "production"
 target_host: "prod.example.com"
 secrets:
 SSH_PRIVATE_KEY: ${{ secrets.PRODUCTION_SERVER_SSH_KEY }}

 post-deployment-check:
 needs: [deploy-staging, deploy-production]
 runs-on: ubuntu-latest
 steps:
 - name: Check deployment status
 # 呼び出し元の outputs で定義した値を受け取る
 run: |
 echo "Staging deployment status: ${{ jobs.deploy-staging.outputs.deployment_status }}"
 echo "Production deployment status: ${{ jobs.deploy-production.outputs.deployment_status }}"
```

## Composite Action による共通化

次に、<a href="https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action" target="_blank" rel="noopener noreferrer">Composite Action</a> を活用した共通化の方法を説明します。

Composite Action は、通常のワークフローとは異なり、フォルダ階層は自由ですが、ファイル名は **action.yml** にする必要があります。 <a href="https://www.google.com/search?q=https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action%23creating-a-composite-action-within-the-same-repository" target="_blank" rel="noopener noreferrer">GitHub Docs</a> では、**.github/actions/{任意の名前}/action.yml** というフォルダ構成で作成することが推奨されています。

また、現時点では secrets の受け渡しはできません。 <a href="https://www.google.com/search?q=https://github.com/actions/runner/blob/main/docs/adrs/0549-composite-run-steps.md%23secrets" target="_blank" rel="noopener noreferrer">今後サポートされる予定</a> のようです。

**例: .github/actions/test/action.yml**

```yaml
name: "Node.js Test"
description: "Test implemented in node.js"
inputs: # 呼び出し元のワークフローからパラメータを受け取る
 working-directory:
 description: "Path to the working directory"
 required: true

outputs: # 処理結果を呼び出し元のワークフローに返す
 test_report_path:
 description: "Path to the test report file (if generated)"
 value: ${{ steps.report.outputs.test_report_path }}

runs:
 using: "composite" # Composite Action であることを宣言
 steps:
 - name: Checkout code
 uses: actions/checkout@v4

 - name: Set up Node.js ${{ inputs.node_version }}
 uses: actions/setup-node@v4
 with:
 node-version: 22.X

 - name: Install dependencies
 run: npm install
 shell: bash # コマンド実行には shell を明示的に指定する
 working-directory: ${{ inputs.working-directory }}

 - name: Run tests
 run: npm run test --report_output=./test-results.xml
 shell: bash
 working-directory: ${{ inputs.working-directory }}

 - name: Set test report output
 id: report
 run: echo "test_report_path=$(pwd)/test-results.xml" >> "$GITHUB_OUTPUT"
 shell: bash
 working-directory: ${{ inputs.working-directory }}
```

上記の Composite Action を実行するには、以下のように記述します。

**例: .github/workflows/test.yml**

```yaml
name: Test Application

on:
 push:
 branches: [main]

jobs:
 test-app1:
 runs-on: ubuntu-latest
 steps:
 - name: Test
 id: test
 uses: ./.github/actions/test # 実行する Composite Action のディレクトリ
 with:
 working-directory: "./app1" # 呼び出し元の inputs で定義した値を渡す

 - name: Output test results
 # 呼び出し元の outputs で定義した値を受け取る
 run: cat ${{ steps.test.outputs.test_report_path }}

 test-app2:
 runs-on: ubuntu-latest
 steps:
 - name: Test
 id: test
 uses: ./.github/actions/test
 with:
 working-directory: "./app2"

 - name: Output test results
 run: cat ${{ steps.test.outputs.test_report_path }}
```

## どちらの方法を選ぶべきか

再利用可能なワークフローは、ワークフロー全体を共通化する仕組みです。 GitHub Actions は job 単位で別々のコンテナで実行されるため、共通処理内で変更した内容 (生成したファイルやインストールしたパッケージなど) は、後続の処理に引き継ぐことができません。

一方、Composite Action は step 単位で共通化するため、共通処理内で変更した内容は後続の処理に引き継がれます。 また、再利用可能なワークフローは実行のたびに新しいコンテナを立ち上げる必要があるため、単純で実行回数の多い処理の場合は Composite Action を利用することで、処理時間の短縮と料金の節約につながります。

以上の点を考慮すると、以下のように使い分けるのが適切です。

**再利用可能なワークフロー**

- 共通処理内で変更した内容を後続の処理に引き継ぐ必要がない場合（例: ビルド、デプロイ処理、セキュリティスキャンなど）
- 環境を変えて (Node.js のバージョンなど) 共通処理を実行する場合

**Composite Action**

- 共通処理内で変更した内容を後続の処理に引き継ぐ必要がある場合（例: 依存関係のインストール、環境設定、複数のコマンド実行など）
- 単純または実行回数の多い処理（例: テスト結果やデプロイ結果の出力、チャット通知など）

## まとめ

この記事では、GitHub Actions におけるワークフローの共通化手法として、再利用可能なワークフローと Composite Action の 2 つを紹介しました。

どちらの手法を選択するかは、共通化したい処理の粒度や、処理内で変更した内容を後続の処理で利用する必要があるかどうかなどを考慮して判断する必要があります。 これらの手法を適切に活用することで、ワークフローのメンテナンス性を向上させ、開発効率を高めていきましょう！

## 参考サイト

- <a href="https://docs.github.com/ja/actions/sharing-automations/reusing-workflows" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/actions/sharing-automations/reusing-workflows</a>
- <a href="https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action" target="_blank" rel="noopener noreferrer">https://docs.github.com/ja/actions/sharing-automations/creating-actions/creating-a-composite-action</a>
- <a href="https://zenn.dev/moaikids/articles/32363c5386978e" target="_blank" rel="noopener noreferrer">https://zenn.dev/moaikids/articles/32363c5386978e</a>
- <a href="https://zenn.dev/kinjosan/articles/bd82e07aa69080" target="_blank" rel="noopener noreferrer">https://zenn.dev/kinjosan/articles/bd82e07aa69080</a>

small_github.png

thumbnail_github.png

github.png

GitHub Actions 共通化手法

## はじめに

GitHub Copilot Chat は、VS Code 内でチャット形式でコードに関する質問やエラー修正、最適化の提案を依頼できる強力なツールです。本記事では、Copilot Chat の活用方法を紹介し、コーディング効率を大幅に向上させるための具体的な手順やコマンドを解説します。

## Copilot Chat のメリット

- **リアルタイムサポート**：コードに関する疑問をその場で解決でき、作業効率が向上します。
- **コード生成と最適化**：テストコードの作成や重複コードの排除を自動化し、コードの質を改善します。
- **エラー修正**：エラー箇所を素早く指摘し、具体的な修正案を提示してくれるため、デバッグ作業がスムーズに進みます。
- **ドキュメント生成**：JSDoc コメントを自動生成し、コードの可読性と保守性を高めます。

これらの機能を活用することで、コーディングの効率が大幅に向上します。次のセクションでは、GitHub Copilot Chatのセットアップ手順について説明します。

## セットアップ手順

1. **VS Codeのインストール**
   - [公式サイト](https://code.visualstudio.com/download)から最新のVS Codeをダウンロードし、インストールします。

2. **GitHub Copilotのインストール**
   - VS Codeを開き、拡張機能ビューを開きます。
   - 検索バーに「GitHub Copilot」と入力し、拡張機能をインストールします。

3. **GitHubアカウントのリンク**
   - GitHub Copilotを使用するには、GitHubアカウントが必要です。アカウントを作成し、VS Codeにログインします。

これで準備完了です。

![copilot_img_01.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_01_0ee6bdf5c3.jpg)

## Copilot Chat の便利なスラッシュコマンド

以下に、特に役立つ Copilot Chat のスラッシュコマンドを5つ紹介します。

### 1. /explain: コードを解説
1. 解説したいコードを選択。
2. Ctrl + / で Copilot Chat を開き、/explain と入力。

```css
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```
Copilot Chatで /explain と送信すると、選択したコードの解説をCopilotが提供してくれます。コードの意図や動作を理解するのに役立ちます。

![copilot_img_02.png](https://cont.sterfield.co.jp/uploads/copilot_img_02_92bd6d0f25.png)

### 2. /tests: テストコード生成
1. テストを書きたい関数を選択。
2. Copilot Chat を開き、/tests と指示。

```javascript
export function add(a, b) {
  return a + b;
}
```
![copilot_img_03.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_03_e615f7b1ca.jpg)
Copilot Chatで /tests と送信すると、次のようにテストコードが生成してくれます。
```javascript
// add.test.js
import { add } from './add';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});
```

![copilot_img_09.png](https://cont.sterfield.co.jp/uploads/copilot_img_09_49fadbe438.png)
Copilot Chatで jest.config.js を作成してください と送信すると、次のようにテストコードが生成してくれます。

```javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
};
```

Jest を使うなら、次の手順を実行します。

```bash
npm install --save-dev jest ts-jest @types/jest
```

`package.json` にスクリプトを追加：
```json
{
  "scripts": {
    "test": "jest"
  }
}
```

テスト実行：
```bash
npm test
```

結果：
![copilot_img_04.jpg](https://cont.sterfield.co.jp/uploads/copilot_img_04_e905eee6a0.jpg)

### 3. /fix: エラー修正
1. エラーがあるコードを選択。
2. Copilot Chat を開き、/fix と入力。

```css
/* 修正前：セミコロン抜けやプロパティのミス */
.example {
  width: 100px
  height: 100px;
  background-colour: blue;
}
```
![copilot_img_05.png](https://cont.sterfield.co.jp/uploads/copilot_img_05_61595bd033.png)

Copilot Chatで /fix と送信すると、次のようにセミコロンの抜けやプロパティのミスなどを自動で修正してくれます。

```css
/* 修正後 */
.example {
  width: 100px;
  height: 100px;
  background-color: blue;
}
```

### 4./optimize: コードの最適化
1. 改善したいコードを選択。
2. Copilot Chat を開き、/optimize と送信。

```css
/* 最適化前：冗長なプロパティ */
button {
  display: block;
  display: flex;
  color: black;
  color: #000000;
  padding: 10px;
  padding-left: 10px;
}
```
![copilot_img_06.png](https://cont.sterfield.co.jp/uploads/copilot_img_06_03aa376538.png)

Copilot Chatで /optimize と送信すると、次のように重複プロパティを削除し、無駄を減らします。

```css
/* 最適化後：無駄を削減 */
.button {
  display: flex;
  color: #000;
  padding: 10px;
}
```

### 5./doc: ドキュメントコメント生成

1. ドキュメントが必要な関数を選択。
2. Copilot Chat で、/doc と送信。

```javascript
function add(a, b) {
  return a + b;
}
```
![copilot_img_07.png](https://cont.sterfield.co.jp/uploads/copilot_img_07_5664e6cbc8.png)

Copilot Chatで /doc と送信すると、次のように読み手に優しいコメントを付けてくれる便利な機能です。
```javascript
/**
 * Adds two numbers together.
 *
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(a, b) {
  return a + b;
}
```

## まとめ
GitHub Copilot Chat は、開発者のコーディング体験を大きく向上させる強力なツールです。本記事で紹介したスラッシュコマンドを活用することで、コードの理解、エラー修正、最適化、テスト作成、ドキュメント生成といった作業を効率よく進められます。特に、/explain でコードの意図を確認したり、/fix でエラーを素早く修正したりと、日々の開発をサポートしてくれる便利な機能が満載です。

今回紹介したもの以外にも、Copilot Chat には便利なコマンドがたくさんあります。ぜひ Copilot Chat を使いこなして、より快適で生産的な開発環境を手に入れてください！

## 参考サイト
[https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227](https://qiita.com/kohashi/items/05bc01cbb3a74fdc7227)



GitHub Copilot Chat を活用して効率的にコーディングする方法

## はじめに

ChatGPT API 呼び出しを含むコードのユニットテストは、レスポンスが一定でないため難しいと思われがちですが、いくつかのポイントを押さえることで実装可能です。本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について、実例を交えながら解説します。

## 対象読者

- ChatGPT API を利用する開発者
- Jest を用いたユニットテストの経験者
- API 連携を含むコードのテストに課題を感じている方

## 前提知識

- JavaScript の基本的な知識
- Jest を用いたユニットテストの経験
- ChatGPT API の利用経験

## 実装例

ChatGPT API を利用したコードのテスト実装例として、2 つの入力を比較して大きい方を返す関数 `greaterOf` のテストコードを作成します。

**テスト対象のコード (greaterOf.js)**

```javascript
import OpenAI from "openai";

/**
 * OpenAIのAPIを使用して2つの入力を比較し、大きい方を返します。
 */
const greaterOf = async (
 openai: OpenAI,
 a: string,
 b: string
): Promise<string> => {
 const chatCompletion = await openai.chat.completions.create({
 model: "gpt-4o-mini",
 response_format: { type: "text" },
 messages: [
 {
 role: "system",
 content: `1件目の入力と2件目の入力を比較して大きい方の入力をそのまま返してください。`,
 },
 {
 role: "user",
 content: a,
 },
 {
 role: "user",
 content: b,
 },
 ],
 });

 return chatCompletion?.choices?.[0]?.message?.content?.trim() ?? "";
};

export default greaterOf;
```

**テストコード (greaterOf.test.js)**

```javascript
import OpenAI from "openai";
import greaterOf from "./greaterOf";

const runTests = process.env.CHAT_GPT_TEST;

(runTests ? describe : describe.skip)("greaterOf", () => {
 const openai = new OpenAI({
 organization: "********", // API接続情報を外部から注入
 project: "********", // API接続情報を外部から注入
 apiKey: "********", // API接続情報を外部から注入
 });

 test.each`
 a | b | expected
 ${"木星"} | ${"土星"} | ${"木星"}
 ${"北海道"} | ${"スコットランド"} | ${"スコットランド"}
 ${"セーム・シュルト"} | ${"シャキール・オニール"} | ${"シャキール・オニール"}
 `("greaterOf($a, $b) should return $expected", async ({ a, b, expected }) => {
 for (let i = 0; i < 3; i++) {
 const result = await greaterOf(openai, a, b);
 expect(result).toBe(expected); // 結果を検証
 }
 });
});
```

## 実装のポイント解説

- **テスト対象の関数は同じ入力に対して同じ出力を返すように設計する:** 出力が一定にならない関数の動作はテストケースで確認するのが難しいです。
- **API 接続情報の外部注入:** テストコードでは、API キーなどの接続情報を環境変数から取得しています。これにより、本番環境とテスト環境で異なる設定を使用できます。
 - **対応箇所:** テストコードの `const openai = new OpenAI({ ... });`
- **テストデータの準備:** `test.each`を用いて、複数のテストケースを簡潔に記述しています。各テストケースでは、入力値 `a`、`b` と期待される出力値 `expected` を定義しています。
 - **対応箇所:** テストコードの `test.each`
- **繰り返し実行:** 各テストケースを 3 回繰り返して実行しています。ChatGPT API のレスポンスは変動する可能性があるため、複数回実行することで結果の安定性を確認しています。
 - **対応箇所:** テストコードの `for (let i = 0; i < 3; i++) { ... }`
- **テストのスキップ:** 環境変数 `CHAT_GPT_TEST` が設定されている場合のみテストが実行されるようにしています。これにより、CI 環境などで API キーを保護し、テスト実行時間を短縮できます。
 - **対応箇所:** テストコードの `(runTests ? describe : describe.skip)("greaterOf", () => { ... });`

## まとめ

本記事では、Jest を用いた ChatGPT API のユニットテスト実装方法について解説しました。API 接続情報の外部注入、テストデータの準備、繰り返し実行、テストのスキップなどのポイントを押さえることで、ChatGPT API を含むコードのテストを効果的に行うことができます。

ユニットテストはコードの品質向上に不可欠です。ChatGPT API を利用したアプリケーション開発においても、ユニットテストを積極的に導入し、より信頼性の高いソフトウェア開発を目指しましょう。

small_OpenAI-black-monoblossom.png

thumbnail_OpenAI-black-monoblossom.png

OpenAI-black-monoblossom.png

Jest で実装する ChatGPT API のユニットテスト

今回は、GitHubの便利機能の紹介です！ 
⚠️現時点ではPublic Previewの機能紹介になります 


## こんな人向け

- 大規模なタスク/プロジェクトを分割して管理したい
- 分割したタスクを一目で進捗を見えるようにしたい

⚠️組織(organization)アカウントの人しか使えません


## Sub-Issues機能
GitHubでは、Issueに親子関係を作成することができ、Sub-Issue を Issue に追加することで、大きな作業をタスクに分割できます。 
Sub-Issue は、親の Issue との関係が表示されるため、GitHub 全体で作業を追跡できます。 
これにより、ビューの作成、親の問題によるフィルター処理、グループ化を行うことができます。

Sub-Issue 自体に Sub-Issue を含めることができるため、プロジェクト全体または作業の一部を視覚化し、Issue 間の関係を示す Issue の完全な階層を作成できます。

親 Issue ごとに最大 100 個のサブ Issue を追加でき、最大 8 レベルの入れ子になったサブ Issue を作成できます。 
つまり、最大100の8乗個のIssueを管理できます。

## Sub-Issueの作成手順
1. Issue画面の「Create Sub-Issue」から子Issueを作成できます。
2. Issue の説明の下部にある、[Sub-Issue の作成] をクリックします。
 
 ![](https://cont.sterfield.co.jp/uploads/1_a946d23684.png) 
3. テンプレートが準備されている場合には、ダイアログで、Issue のテンプレートを選択できます。
 
 ![](https://cont.sterfield.co.jp/uploads/2_fc9a7ceff4.png) 

4. 必要に応じて、Issueの情報を入力し、Issue の種類を設定し、 担当者、ラベル、プロジェクト、マイルストーンを設定します。 
 ![](https://cont.sterfield.co.jp/uploads/3_66a99f2eb1.png) 
## 既存の Issue を Sub-Issue として追加する方法
1. Issue画面の「Add existing Issue」から子Issueを作成できます。 
 ![](https://cont.sterfield.co.jp/uploads/4_cb14540079.png) 
2. Sub-Issue として追加する問題を選択します。
 ・提案の 1 つから Issue を選択します。
 ・[Issue の検索] フィールドに、Issue のタイトルまたは Issue 番号を入力し、結果をクリックします。
 ・他のリポジトリから Issue を追加するには、リポジトリ名の横にある をクリックし、別のリポジトリを選択します。
 ![](https://cont.sterfield.co.jp/uploads/5_59fafbf05a.png) 
子Issueが登録された親Issueには、子Issueの進捗状況が表示されます。 
 ![](https://cont.sterfield.co.jp/uploads/6_d5394fd099.png) 
 ![](https://cont.sterfield.co.jp/uploads/7_7c52dd58b2.png) 

## Sub-Issueの解除手順
1. Issue画面の解除したいSub-Issue横の[…]をクリックします。
2. 「Remove Sub-Issue」をクリックする
 ![](https://cont.sterfield.co.jp/uploads/8_c6aa8fc7e9.png) 
## まとめ
今までもISSUEの概要に書いたタスクリストからISSUEを生成する機能がありましたが、Sub-Issue機能の方がIssue同士のリレーションがしっかりしているので、確認する際に迷子になりづらい点がgoodです◎ 
そんな理由で、GitHubをチームで利用しているなら、必ず使ったほうがいい機能だと思いました。 
個人的には、Sub-Issue作ったタイミングで、自動的に親Issueに紐づいてくれたらいいのに。と思ったりしました（笑）

small_pixta_50037742_S.jpg

thumbnail_pixta_50037742_S.jpg

pixta_50037742_S.jpg

GitHubの便利機能紹介シリーズ「Sub-Issue機能」

## はじめに
サイトの監視アラート通知をメールで受け取ると埋もれがちなので、普段使っているチャットツールで受け取りたいということがあります。

今回は、[さくらクラウドのシンプル監視](https://cloud.sakura.ad.jp/products/simple-monitor/)のアラート通知をGoogle Chatで受け取る方法を紹介します。

シンプル監視はSlackのみを公式にサポートしています。弊社ではGoogle Chatをメインで利用しているため、SendGridとGoogle Apps Scriptを活用し、Google Chatにアラート通知を送信する仕組みを構築しました。この方法であれば、追加費用をかけずに、柔軟なカスタマイズが可能です。

以下、具体的な設定方法を解説します。

## 概要 
![Overview](https://cont.sterfield.co.jp/uploads/overview_f0a47bc2aa.png) 

図のとおりシンプル監視からのメール通知をSendGridで受信して、そこからGoogle App Sriptを経由してGoogle Chatに書き込む仕組みです。

### ポイント
- シンプル監視のWebhook通知は、ZapierやIFTTT経由でGoogle Chatに通知できますが、2024年12月現在は有料プランが必要なため、今回は無料のメール通知を利用します。
- SendGridのInbound Email Parse Webhook自体は無料で利用可能ですが、SendGrid自体のアカウント開設には審査が必要となっています。また、Inbound Email Parse Webhookを利用するためには、SendGrid上でドメイン認証を行ったドメインのメールアドレスのみ設定可能です。詳細は[SendGridのヘルプ](https://sendgrid.kke.co.jp/docs/User_Manual_JP/Settings/parse.html)を参照してください。
- Google Chatで外部からWebhookを受け取る機能は無料版では使えません。有料のGoogle Workspaceを契約している必要があります。

## Google ChatのWebhook設定
スペースの設定画面でアプリと統合メニューを開いた画面で下の方にあるWebhookを追加からWebhookを追加してリンクをコピーしておきます。

![Google Chat](https://cont.sterfield.co.jp/uploads/google_chat_29b557565c.png) 

## Google App Scriptの設定
コピーしたリンクを使って下記のスクリプトを作成して外部から起動できるようにデプロイしてください。シンプル監視から送られるメールのエンコードはISO-2022-JP(いわゆるJISコード)のため、文字コード変換が必要です。

```js
function doPost(e) {
  const { text } = e.parameter;

  // Google ChatのWebhook URL (事前にコピーしたURLを貼り付ける)
  const webhookurl = 'https://chat.googleapis.com/v1/spaces/**********/messages?key=**********';

  // JISコードで送信されてくるメールデータを、Google Chatで扱えるUTF-8に変換します。
  const data = {
    'text': Utilities.newBlob(text).getDataAsString("JIS")
  };

  const options = {
    'method': 'post',
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload': JSON.stringify(data)
  };
  UrlFetchApp.fetch(webhookurl, options);
}
```

デプロイが完了したらウェブアプリのURLをコピーしおきます。

![deploy](https://cont.sterfield.co.jp/uploads/deploy_d3a68796ab.png) 

## SendGridの設定
SendGridにログインして、Setting > Inbound Parseを開いてAdd & Hostボタンを押して、下記の設定値を入力してWebhook設定を追加します。

Receiving Domain:

シンプル監視からのメール通知を受け取るためのメールのドメイン

Destination URL:

前項でコピーしておいたウェブアプリのURL

![sendgrid](https://cont.sterfield.co.jp/uploads/sendgrid_1a2731c45b.png) 

## シンプル監視の設定
さくらのクラウドの設定画面でオプション > メールアドレスを開いて、前項で設定したドメインのメールアドレスでアラートの通知を受け取るように設定します。

![simple](https://cont.sterfield.co.jp/uploads/simple_b79b0c893e.png) 

アラートの通知設定はデフォルトのまま（通知方法：メール、メールタイプ：テキスト）にしておきます。

## アラート通知の例
シンプル監視でアラートが発生した際にGoogle Chatに下記の通知が表示されたら設定成功です。

![example](https://cont.sterfield.co.jp/uploads/example_fe539f6c67.png) 

## まとめ
以前はIFTTTの有料プランを利用して通知の自動化を行っていましたが、今回構築した新しい仕組みによって、運用コストの削減が実現できました。

今後は、Google App Scriptのコードをカスタマイズしてサイトごとに通知先スペースをわけて複数サイトのアラート通知をうまく受け取れる仕組みの構築を進めてもっと活用していこうと思います。皆様も是非参考にしてみてください。

## 参考リンク
- [お知らせをWebhookでGoogle Chatに通知してみよう &ndash; Shopらんサポートサイト](https://shoprun.support-dreamarts.com/hc/ja/articles/17847405156377-%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%92Webhook%E3%81%A7Google-Chat%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)
- [ISO-2022-JP（7bit JIS）のeml形式データをApps Scriptで解読する #JavaScript - Qiita](https://qiita.com/takatama/items/696557f4eb51d4e50b8f)

medium_3-4-2line-rgb-blackback-solidcolor.png

small_3-4-2line-rgb-blackback-solidcolor.png

thumbnail_3-4-2line-rgb-blackback-solidcolor.png

3-4-2line-rgb-blackback-solidcolor.png

さくらのシンプル監視のアラートをGoogle Chatで受け取る方法

## はじめに
UXデザインを改善しようとする際、どこから手をつければ良いか迷うことがあります。UXデザインを向上させるためには、アフォーダンス(Affordances)、シグニファイア(Signifiers)、フィードバック(Feedback)の3つの要素に分けて改善方法を検討すると、わかりやすくなります。これら3つの要素に分けて考えることで、UX改善に効果的にアプローチできることを学びましたので、それぞれの段階についてまとめてみました。

### アフォーダンス(Affordances)とは
デザイン用語としてのアフォーダンスとは、人と物との関係のことです。Webデザインの例では、クリックやスクロール、スワイプなどの操作が挙げられます。
元々の心理学の用語では、動物と物の間に存在する行為の関係性を表す言葉で、行為の選択肢の一つという意味合いが強いですが、デザインの領域では、**要素に対する行為**（**操作**）という意味で使われることが多いようです。
アフォーダンスを適切にデザインすることで、ユーザーの利用可能性を広げるだけでなく、間違った操作を予防する効果も期待できます。

### シグニファイア(Signifires)とは
シグニファイアとは、人と物との関係をユーザーに伝達するもので、わかりやすく言い換えると、**行為(操作)へ誘導するためのヒント**のことです。Webデザインの例では、クリックすることで意図した画面へ移動できるようにナビゲーションを工夫することや、スワイプが可能であることをわかりやすくすることが挙げられます。
シグニファイアを適切にデザインすることで、ユーザーが目的を達成するまでストレスなく到達できます。

### フィードバック(Feedback)とは
フィードバックとは、操作やアクションの後に即時の手応えや反応のことです。Webデザインの例では、クリックしたときのボタンの色の変化や、コンテンツの読み込み中や処理中のプログレスバーの表示などが挙げられます。
フィードバックを適切にデザインすることで、ユーザーに正しい操作をしていることを確信させ、安心して操作することをサポートできます。

## アフォーダンスを改善する方法
アフォーダンスには明示的なものと暗黙的なものがあり、特にWebデザイン領域では暗黙的なアフォーダンスが多く使われる傾向があります。例えば、画像をクリックすると拡大して表示されたり、左にスライドさせると削除される、一覧の一番上でさらに下にスクロール操作をすると最新情報に更新されるといった操作は、明確にUIとして示されず、ユーザーの経験によって成り立っています。

暗黙的なアフォーダンスはユーザーの直感に頼るため、学習コストが低い一方で、新しいユーザーには理解しづらい場合があります。逆に、明示的なアフォーダンスは誰にでも理解しやすいですが、デザインが煩雑になる可能性があります。したがって、広く一般化されたアフォーダンスではない限り、積極的に隠さない明示的なアフォーダンスを選択することが最善と言えます。

アフォーダンスを改善するためには、以下の点に注意することが重要です。
- **意図せず隠すアフォーダンスを避ける**: ユーザーが直感的に理解できるように、明示的なアフォーダンスを優先する。
- **デザインシステムの活用**: 既存のデザインシステムを利用するだけでなく、オリジナルのデザインシステムを構築する場合も、一般的なUIコンポーネントやパターンを参考にする。これにより、一貫性のあるデザインを実現しやすくなります。
- **多様な視点からの参考**: [マテリアルデザイン](https://m3.material.io/)や[Appleのデザインシステム](https://developer.apple.com/jp/design/)に加え、[Bootstrap](https://getbootstrap.jp/)や[Ant Design](https://ant.design/)などの他のデザインフレームワークも参考にする。これらのフレームワークから得られるベストプラクティスを取り入れることで、オリジナルのデザインシステムを強化できます。
- **ユーザーテストの実施**: オリジナルのデザインシステムを構築する際には、ユーザーテストを実施してフィードバックを収集し、アフォーダンスの改善に役立てる。

これらの方法を取り入れることで、アフォーダンスの質を向上させ、ユーザーが直感的に操作を理解できます。

## シグニファイアを改善する方法
シグニファイアは、ユーザーに対して行為(操作)を誘導するためのヒントを提供します。例えば、ハンバーガーメニューのアイコンがナビゲーションを開くためのボタンを意味していたり、虫眼鏡のアイコンがキーワード検索を開始するためのボタンを意味しているなど、アイコン自体がシグニファイアの役割を果たしている場面をよく見かけます。

シグニファイアを改善するためには、以下の点に注意することが重要です：
- **複数の手段を組み合わせる**: 一つの記号に頼らず、テキスト、コントラスト、色、シンボル、テクスチャなどを適切に組み合わせることで、ユーザーに対するヒントを強化します。
- **文化的背景を考慮する**: アイコンやシンボルが異なる文化や世代に対してどのように解釈されるかを考慮し、普遍的に理解されるデザインを目指します。例えば、フロッピーディスクを知らない世代には保存の意味が伝わりにくい、郵便マークも各国でシンボルが異なることがあるなどを考慮する必要があります。
- **補足情報を提供する**: アイコンだけでなく、テキストやツールチップを併用して意味を明確にすることで、ユーザーが直感的に操作を理解できるようにします。
- **一貫性を保つ**: 同じ意味を持つシグニファイアを一貫して使用することで、ユーザーの混乱を防ぎます。

これらの方法を取り入れることで、シグニファイアの効果を最大化し、ユーザーが直感的に操作を理解できます。

## フィードバックを改善する方法
Webにおいてフィードバックは、色の変化、画面の遷移、プログレスバー、メッセージの表示などで表現されます。適切なフィードバックは、ユーザーが操作の結果を理解しやすくし、次のアクションを促す役割を果たします。

例えば、ボタンをクリックした後に何も変化がないと、ユーザーはクリックできなかったと判断して操作を中断してしまいます。また、入力フィールドで間違った入力をしても何も変化がなければ、ユーザーは次のアクションを起こしづらくなります。

フィードバックを改善するためには、以下の点に注意することが重要です。
- **即時性**: ユーザーのアクションに対して即時にフィードバックを提供する。例えば、ボタンをクリックした際に色が変わる、プログレスバーが表示されるなど。
- **視覚的な変化**: 色の変化やアニメーションを利用して、ユーザーに操作が成功したことを視覚的に伝える。CSSの`:active`や`:focus`擬似クラスを利用すると簡単に実装できます。
- **明確なメッセージ**: エラーメッセージや成功メッセージを表示して、ユーザーが次に何をすべきかを明確に伝える。
- **ユーザーストーリーに沿った設計**: ユーザーの行動パターンを理解し、それに合わせたフィードバックを設計する。例えば、フォームの入力エラーをリアルタイムで表示するなど。

これらの方法を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

## まとめ
UXデザインを向上させるためには、アフォーダンス、シグニファイア、フィードバックの3つの要素を適切にデザインすることが重要です。

- アフォーダンスは、ユーザーが直感的に操作を理解できるようにするための要素です。明示的なアフォーダンスを優先し、意図せず隠すアフォーダンスを避けることが重要です。既存のデザインシステムを活用するだけでなく、オリジナルのデザインシステムを構築する際には、一般的なUIコンポーネントやパターンを参考にし、ユーザーテストを実施してフィードバックを収集することが効果的です。
- シグニファイアは、ユーザーに対して行為を誘導するためのヒントを提供します。複数の手段を組み合わせ、文化的背景を考慮し、補足情報を提供することで、ユーザーが直感的に操作を理解できるようにします。また、一貫性を保つことで、ユーザーの混乱を防ぎます。
- フィードバックは、ユーザーの操作に対する即時の反応を提供し、次のアクションを促す役割を果たします。即時性、視覚的な変化、明確なメッセージ、ユーザーストーリーに沿った設計を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

これらの要素を総合的に改善することで、ユーザーエクスペリエンスを向上させ、ユーザーが直感的に操作を理解し、ストレスなく目的を達成できます。

UXを改善したいけど、どこから直していけば良いか迷った場合は、ぜひ参考にしてみてください。

## 参考にさせていただいたサイト

- [3 Key Elements for Great UX Design: Affordances, Signifiers, and Feedback](https://careerfoundry.com/en/blog/ux-design/affordances-signifiers-feedback/)


large_image1.webp

medium_image1.webp

small_image1.webp

thumbnail_image1.webp

image1.webp

UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

デザインワークに使うツールといえば、Adobe社のPhotoshopやIllustratorが最も有名です。デザイナーの求人情報を見ると、募集要項に「PhotoshopやIllustratorの使用スキル」が必須の条件として記載されており、クリエイティブワークを行う上で必要不可欠なツールと言えます。

しかし近年、Webデザイナーの求人欄には「Figmaの開発経験者歓迎」など、Figmaを推奨する記述を見かけるようになり、業界の必須ツールも変わりつつあることが感じられます。Figmaと同様の機能や役割を持つツールとしてAdobeのXDもありましたが、2023年に単体での販売が終了したため、Figmaの存在感がますます強まっています。
  
## Figmaとは
  
FigmaはUIやUXデザインに適したプロトタイプデザインツールです。WebサイトやWebアプリを作成する際、ボタンを押したときの画面遷移やメニューの開閉など、複雑な動きが求められます。また、切り替え時のフェードインやアニメーションなども演出としてよく使用されます。

通常、こういったアクションを表現するにはプログラムを組む必要がありますが、Figmaではグラフィック作成の段階からこれらの動きを再現できます。さらに、データを共有する機能があるため、関係者と完成イメージを共有しやすいのも利点です。

Figmaはブラウザ上で動作するため、アプリのインストールが不要で、インターネットに接続されたパソコンさえあれば使用できます。このため、環境に依存せずデザイン作業を進められるというメリットもあります。

## 実際にFigmaを使ってみた感想


私は長年Webデザイナーとして、主にIllustratorでデザインし、写真や画像の加工はPhotoshopで行ってきました。Figmaには業務で触れたことがある程度だったため、今回はその違いを確認するために実際にFigmaを使用してみました。

全体的な使用感としては、ツールの配置が異なるため少し戸惑う部分もありましたが、Illustratorに近い印象でした。Illustratorが使える人であれば、比較的簡単に慣れるでしょう。しかし、いくつかIllustratorと明確に異なる点がありましたので、挙げていきます。

### デフォルトで紙媒体を作成する機能が無い

FigmaはWebサイトやアプリなどのデジタルメディアのコンテンツをデザインするためのツールであるため、印刷物を作る機能がありません。そのため、紙媒体のデザインをする場合、フレーム（アートボード）のサイズを紙の規格のサイズで指定する、余白設定やトンボ（裁断時の目印）の設定をデザイナーが意図的に追加する手間が生じます。

ただし、プラグインを利用することで、紙媒体の設定も可能なようです。しかし、色指定に関しては、CMYKモードをIllustratorほど詳細には設定できません。そのため高品質が求められる場合はIllustratorのほうが適しています。Figmaはインターネット接続が可能であればどのパソコンでも編集が可能なため、頻繁にテキストを編集し、そこまで高品質が要求されない場合の物はFigmaの方が便利です。

### パスファインダー機能について

パスファインダーとは、複数の図形を組み合わせたり、重なり部分を切り抜いたりする機能で、デザイン作成によく使用されます。
結論から言うと、収納されている場所が違うだけでIllustratorと、ほぼ同じことができます。

 ![](https://cont.sterfield.co.jp/uploads/img_A_1_1378b85707.png) 

しかし、Illustratoreのパスファインダーにある「分割」に相当する機能がありません。

 ![](https://cont.sterfield.co.jp/uploads/img_A_2_45184b55ef.png) 

そのため、図形を複数のオブジェクトとして使いたい場合は、コピーを用意してそれぞれ切り抜きの設定を変えて作成する必要があり、少し手間がかかります。


### ペンツールでのパス描画

IllustratorやFigmaは基本的にベジェ曲線を制御して図形を描きます。そこでペンツールを使って図形を描くことを試してみました。 今回はフリー素材のサクランボのイラストを下絵にしてペンツールで描いてみました。

先ずはillutratorで描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_1_0c343f8462.png) 

ペンツールで先ずは始点となる頂点を選択しクリックし、ドラックをすると線が曲線になります。そして次の頂点を選択して下絵の輪郭をなぞります。
このようにして3つの図形を描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_2_873e4b36c9.png) 

茎の部分は緑色を指定して、実の部分にグラデーションを指定して色付けすます。最後に白い光沢描いて仕上げます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_3_bf1463921d.png) 

同様の作業をFigmaでも試してみました。

ペンツールが収納されている位置は違いますが、Illustratorで行う作業と同じで特に違和感なく作業ができます。しかし、2つ目のオブジェクトを描いた時点でIllustratorとの違いに気が付きました。

 ![](https://cont.sterfield.co.jp/uploads/img_B_4_3ad2f76b6c.png) 

普通に描いていたのですが、この時点で2つのパスで1つのオブジェクトになる扱いでIllsutratorで言うところの複合パスになっていました。そのためこの状態でグラデーションを設定すると、オブジェクト全体にグラデーションが描画されてしまいます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_5_c1a0890346.png) 


どうやら、ペンツールを使用する場合、 ペンツールアイコンの上に表示される×のアイコンをクリックしない限り、描いた物は1つのオブジェクトとして扱われるようです。

 ![](https://cont.sterfield.co.jp/uploads/img_B_6_bf0edd4ef9.png) 


また、一度描いた図形を編集したい場合、Illsutratorなら頂点を選択すれば編集できましたが、Figmaの場合、描いたオブジェクトを選択してエンターキーを押して 編集モードにしてから編集するようです。
 ![](https://cont.sterfield.co.jp/uploads/img_B_7_ce745450f3.png) 


これらのことを知らないと、意図しない複合パスができてしまったり、編集したくてもできないという事態になりかねません。  
  
また、Illustratorと違い、1つの頂点を起点にして複数の線を描いて枝分かれすることもできます。これを利用して矢印の形も描くことができます。
 ![](https://cont.sterfield.co.jp/uploads/img_B_8_3e8d5b59cc.png) 




### テキストの変形について

 ![](https://cont.sterfield.co.jp/uploads/img_C_1_8219f2283f.png) 

デザインをしていく上で、時にはテキストを変形してグラフィカルに見せることもあります。
このようなときはIllustratorの場合、先ずは普通にテキストを入力しは標準に備わっているワープツールを使うケースが多いです。

今回はワープツールの円弧を使って下方向に湾曲するテキストのサンプルを作ってみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_2_08a797d87f.png) 

これと同じことがFigmaでできるか試してみました。

先ずはIllustratorと同じようにテキストを入力します。このときに気が付いたのですが、Figmaはパソコンにインストールされているフォントではなく、
googleフォントなど、オンライン環境で使用できるフォントデータを読み込んでいるようです。このような点もIllustratorとの違いを実感しました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_3_e396dbcb00.png) 

ただ、ワープツールに相当する物はFigmaの標準の機能ではないようです。調べてみるとプラグインで提供されており、プラグインで変形できるみたいなので実際に使ってみました。

今回は「Warp IT」というプラグインを使用してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_4_cf64d3c0cd.png) 


テキストを選択してプラグインを起動すると図のように編集画面が出ますこの画面で頂点を編集して、「APPLY RESULTS」ボタンを押すと編集した通りに形ができます。

 ![](https://cont.sterfield.co.jp/uploads/img_C_5_1a01f2c368.png) 

編集の仕方はIllustratorと違いますが、それでも問題なく加工ができそうです。しかし、作成してから気が付きましたが、作成した物はテキストデータ
ではなく、パスデータに変わっていました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_6_d708119777.png) 

この点、Illustratorはテキストデータの形を保持しているので別の文字に変える編集も可能です。なので、更新の可能性が高い物はIllustratorで作成した方がよいと思います。

 ![](https://cont.sterfield.co.jp/uploads/img_C_7_ec1e911ba1.png) 


## まとめ

Figmaを使用してみて、Illustratorでできることは概ねFigmaでも可能だと感じました。また、Figmaはインターネット環境があればどのパソコンでも使える手軽さがあり、導入コストが低いのも魅力です。  
  
ただし、IllustratorにはIllustratorの利点もあり、どちらか一方に代替されるのではなく、用途によって棲み分けられていく印象でした。  
  
今後のWeb業界でのツールの主な使い分けとしては、  
  
画面デザインはFigma  
写真加工はPhotoshop  
ロゴなど精密なデザインはIllustrator  
  
といった形になるのではないでしょうか。時代の変化に応じて、新しいツールも柔軟に取り入れていきます。


medium_25307319_m.jpg

small_25307319_m.jpg

thumbnail_25307319_m.jpg

25307319_m.jpg

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

## はじめに

Gulpは、フロントエンド開発の作業を効率化するための自動化ツールです。ファイルを一つひとつ手作業で処理する代わりに、Gulpを使えば、様々なタスクを自動で実行できるため、時間を大幅に節約できます。さらに、CSSを効率よく管理するためにSassという拡張機能を導入することで、コードの見やすさが向上し、メンテナンスもしやすくなります。

この記事では、Gulpの基本的な導入方法から、Sassを使った開発の進め方までを解説します。

## 1. Gulpとは？

Gulpは、開発作業を自動化するための「タスクランナー」です。
手動で行うと時間がかかる以下のような処理を、簡単なコマンドで自動実行できるのが特徴です。

* Sass/LESSファイルのCSSへの自動変換
* JavaScriptやCSSの圧縮・結合
* ファイルの変更監視
* ローカルサーバーの起動やブラウザの自動リロード
* 画像の最適化 など
  
Gulpを使えば、作業の効率が上がり、開発時間を短縮できます。

## 2. 環境準備
### 2.1 事前準備

まず、Gulpを使用するために、Node.js をインストールします。

* Node.js（[公式サイト](https://nodejs.org/en)からインストール）
  
インストール後、以下のコマンドでバージョンが確認できます。

```
node -v
```

![](https://cont.sterfield.co.jp/uploads/img01_6befb058cd.png) 
  

### 2.2 プロジェクトの初期化

プロジェクトのディレクトリで以下のコマンドを実行し、package.json を自動生成します。
```
npm init -y
```
これで、プロジェクトディレクトリに package.json が作成されます。

 ![](https://cont.sterfield.co.jp/uploads/img02_a439d94563.png) 

## 3. Gulpのインストール
プロジェクトのローカルにGulpをインストールします。
```
npm install gulp --save-dev
```
これで　node_modules フォルダと package-lock.json が作成され、package.json の "devDependencies" に Gulp が追加されます。

 ![](https://cont.sterfield.co.jp/uploads/img03_420bdf6b5b.png) 

## 4. Gulpfileの作成
次に、プロジェクトのルートディレクトリに gulpfile.js を作成し、基本的なタスクを設定します。
```
const gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!');
});
```

## 5. Sassの導入
以下のコマンドで、Sassをコンパイルするための gulp-sass と sass をインストールします。
```
npm install --save-dev gulp-sass sass
```

## 6. Sassコンパイルタスクの設定
以下のコードを gulpfile.js に追加し、SassファイルをCSSに変換するタスクを追加します。
```
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('dev_src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));
```

## 7. ディレクトリ構造（例）
```
my-project/
│
├── dev_src/                 ← ソースファイルを格納するフォルダ
│   ├── files/               ← 静的ファイルやアセットを格納
│   │   └── assets/          ← 画像やフォントなどのリソース
│   │       └── images/      ← 画像ファイル
│   ├── pug/                 ← Pugテンプレートファイルを格納
│   │   └── index.pug        ← メインのPugファイル
│   └── scss/                ← Sassファイルを格納
│       └── style.scss       ← メインのSassファイル
├── gulpfile.js              ← Gulpのタスク設定ファイル
├── package.json             ← プロジェクトの設定情報
└── package-lock.json        ← インストールしたパッケージの依存関係
```

## 8. Sassファイルの作成
dev_src/scss/style.scss に以下のコードを追加します:
```
$primary-color: #333;

body {
  color: $primary-color;
}
```

## 9. 動作確認
以下のコマンドを実行して、Gulpを起動します。
```
 npx gulp
```

## 10.　CSS 内容の確認

Gulpを実行した後、dist/フォルダにはコンパイルされたHTMLやCSSファイルが生成されます。具体的には、以下のようなファイルが出力されます。
```
my-project/
│
├── dist/               ← コンパイルされたHTMLやCSSが出力される
│   ├── index.html      ← Pugから生成されたHTMLファイル
│   └── style.css       ← Sassから生成されたCSSファイル
├── dev_src/
│   ├── files/
│   │   └── assets/
│   │       └── images/
│   ├── pug/
│   │   └── index.pug
│   └── scss/
│       └── style.scss
├── gulpfile.js
├── package.json
└── package-lock.json
```
特に、dist/style.cssの中身が以下のようになっていれば、Sassから正常にコンパイルされていることが確認できます。
```
body {
  color: #333;
}
```

## 11. まとめ

これで、Gulpを使ったプロジェクトのセットアップとSassファイルのコンパイルの手順が完了しました。Gulpを使うことで、Sassのコンパイルやファイルの変更を自動で監視できるようになり、開発の効率が上がります。

**他にもできること**

Gulpを使用すると、以下のような他のタスクも簡単に自動化できます。

* JavaScriptの圧縮と結合

  gulp-uglify や gulp-concat を使って、JavaScriptファイルを圧縮し、一つにまとめることで、読み込み時間を短縮できます。

* CSSの圧縮

  gulp-clean-css を利用して、生成されたCSSファイルを圧縮し、ファイルサイズを小さくできます。

* 画像の最適化

  gulp-imagemin を使用して、画像ファイルのサイズを削減し、ページの読み込み速度を向上させることが可能です。

これらの機能を活用することで、さらに開発がスムーズになります。Gulpには他にも多くの便利な機能がありますので、自分のプロジェクトに合ったタスクを見つけて、効率的なフロントエンド開発を進めてみてください。

## 参考
* https://ics.media/entry/3290/
* https://stand-4u.com/css/sass/setup_gulpsass.html

Gulpを使ったプロジェクトの基本設定とSass導入手順

ノーコードでAIアプリを開発することができる「Dify」というサービスを用いて簡単なチャットボットを自作してみたので、その紹介をしたいと思います。

こんな人向け
- ノーコードツールに興味がある人
- ノーコードツールで業務改善や新規事業を行いたい企画・マーケティング職、営業職の人
- アプリ制作に興味がある人
- 生成AIの活用に興味がある人

## Difyとは
Dify（読み方：ディーファイ）とは、生成AIを用いたアプリをフローベースで開発することができる環境で、フリープランを用いることで無料でアプリを作ることができます。 
また、チャットボットに関していえば数カ所設定するだけですぐ作成することができるため、非エンジニアの方でもお気軽に作成することができるのが特徴です。 
外部ファイルを読み込ませることができるので。ローカル(社内)のファイルを読み込ませることができるのが利点です。

## 作成の手順
0. 各種アカウントの作成（Googleアカウント、Difyアカウント）
1. Gemini APIとの連携（今回は、「Gemini 1.5 Flash」を利用）
2. ナレッジの作成（PDF、CSVのアップロード）
3. チャットbotの作成
4. Chatflowで質問を振り分ける

具体的な手順は、[参考動画](https://www.youtube.com/live/1psidvPxQqM?t=700s)を見ていただければ、迷わず進めることができます

## 成果物の共有
### チャットのワークフロー
どんな処理を行いたいかを視覚的にカスタマイズできる
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_04_16_747d107750.png) 
### チャットボットアプリでのやりとり
ちゃんと会話できてる！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_16_56_b5208c7558.png) 
### サイトでの活用
DIfy管理画面内で、サイトに反映するためのJavaScriptのコードが用意されている
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_20_34_abfe1a3b02.png)
そのコードを反映させたいサイト/ページに追記するだけで、作成したチャットが利用できる ！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_27_26_84769fe1c7.png) 

### チャットのログ
どんなことを聞かれているのか確認できる！！今後の返答の質UPに活用できる！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_12_02_35_8939f51787.png) 

### 利用できる他のツール
Googleなどの検索エンジンや、WikiPediaやYahooFinanceなど多岐にわたるツールが利用できるので、作りたいアプリに応じてこれらのツールを活用するのが良いと思います。
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_38_10_67ecf51844.png) 

### おまけ(チャットボットと大喜利をしてみた結果)
 ![](https://cont.sterfield.co.jp/uploads/unnamed_f238feeaf4.png) 

## まとめ
今回のチャットボットを利用するにあたり、生成AIにはGeminiを利用しましたが、ChatGPTなど他のAIに置き換えることもできます。お好みのAIを利用してもらえたらいいかなと思います。 
既存の生成AI+独自のルールで、独自のアプリが簡単にできるので、すごく便利だと思いました。 
1時間足らずで、それっぽいチャットボットができたので、他にも良さそうなアイデアがあれば、Difyを活用してみてください。

medium_logo_Dify.png

small_logo_Dify.png

thumbnail_logo_Dify.png

logo_Dify.png

Difyを用いたチャットボットを作成してみた

## はじめに
[Cloudflare Workers](https://www.cloudflare.com/ja-jp/)の実践的なサンプルコードを事例を交えて紹介します。

すでにCloudflareを利用していてCloudflare Workersのことは知っているが、使い所が分からず手が出せてない方の参考となれば幸いです。

以下で紹介するコードはWebフレームワークの [Hono](https://hono.dev/) を使って実装しています。Cloudflare Workersにいち早く対応し、シンプルかつ型システムを活用した堅牢なコードが書けるのでおすすめです。

## サンプル1: オブジェクトストレージにデプロイしたHTMLにBASIC認証をかける

問題：
AWSやGoogle Cloudのようなクラウド事業者が提供しているオブジェクトストレージでWebサイトを構築しているが、そのサイトにBASIC認証をかけたい。

解決方法：WebサイトのネームサーバーをCloudflareに移行した上で、下記のWorkersを作成します。Workersの[ルート設定](https://developers.cloudflare.com/workers/configuration/routing/#matching-behavior)を行い、Workers→オブジェクトストレージの流れでリクエストが処理されるように設定します。

```
import { Hono } from "hono";
import { basicAuth } from "hono/basic-auth";

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.all("*", basicAuth({ username: "username", password: "password" }), (c) => {
 return fetch(c.req.url);
});

export default app;
```

## サンプル2: ルールにそってURLを書き換えてリダイレクトする
問題：複数のサブドメインにわかれているシステムを運用しているが、外部のシステムと連携するにあたって、連携先のドメインが1つしか登録できない。

解決方法：下記のWorkersを作成して[カスタムドメイン設定](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/)を行い、そのドメインを外部連携先として利用します。このサンプルコードでは、URLを加工してリダイレクトしていますが、マッピング表をコード上に持つようにしたり、外部に保存したマッピングを参照してリダイレクトすることも可能です。

```
import { Hono } from 'hono';

const app = new Hono();
const domain = "example.com";

app.get('/:subdomain/', (c) => {
	const { subdomain } = c.req.param();
	const url = `https://${subdomain}.${domain}/`;
	return c.redirect(url);
});

export default app;
```

使用例：
```
https://redirect.example.com/aaa/ => https://aaa.example.com/
https://redirect.example.com/bbb/ => https://bbb.example.com/
```

## サンプル3: APIとして使える簡易的なKVS
問題：一時的なデータの保存場所としてMemcachedやRedisのようなKVSが必要になったが、サーバーを立ち上げたりクラウド上のサービスを使うとなると費用がかかるので、お金がかからない方法で検証までは行いたい。

解決方法：Cloudflare Workersに付随するサービスであるCloudflare Workers KV(以下KV)を使ってデータの保存と読み取りを行うWorkersを作成します。事前にKVの[名前空間の作成](https://developers.cloudflare.com/queues/tutorials/web-crawler-with-browser-rendering#2-create-kv-namespace)を行います。その後、下記のコードのWorkersを作成してデプロイします。

```
import { Hono } from "hono";

export interface Bindings {
 kvs: KVNamespace;
}

const app = new Hono<{ Bindings: Bindings }>();

app.post("/set/:key", async (c) => {
 const key = c.req.param("key");
 const obj = await c.req.json();

 await c.env.kvs.put(key, JSON.stringify(obj));

 return c.json({});
});

app.get("/get/:key", async (c) => {
 const key = c.req.param("key");
 return c.json(JSON.parse((await c.env.kvs.get(key)) || "{}"));
});

export default app;
```

使用例：
```
$ curl -X POST -H "Content-Type: application/json" -d '{"Name":"aaaa", "Age":"100"}' https://kvs-sample.****.workers.dev/set/123
{}

$ curl https://kvs-sample.****.workers.dev/get/123
{"Name":"aaaa","Age":"100"}
```

## まとめ
今回紹介したサンプルはすべて無料プランのCloudflareアカウントでも利用可能です。是非気軽に試してみてください。

## 参考リンク
- [Cloudflare Workersで手っ取り早くBasic認証を設定する](https://qiita.com/AnaKutsu/items/1c8bd0eb938edd3c0e0a)

large_CF_logo_stacked_blktype.jpg

medium_CF_logo_stacked_blktype.jpg

small_CF_logo_stacked_blktype.jpg

thumbnail_CF_logo_stacked_blktype.jpg

CF_logo_stacked_blktype.jpg

Cloudflare Workersの実践的サンプルの紹介

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

medium_img_202450830__title.png

small_img_202450830__title.png

thumbnail_img_202450830__title.png

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

## はじめに

Google Cloud 上でバッチ処理を行う際に、[Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)を使用したので紹介します。
本記事では、他サービスとの比較と[Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)の使い方について説明します。

## Google Cloud でバッチ処理できるサービス

Cloud Run jobs を使用するにあたって、他のサービスについても調べたのでそれぞれの特徴をまとめました。

### [Cloud Functions](https://cloud.google.com/functions)

様々なイベントをトリガーにできるので、特定のイベントが発生したときに動かしたいバッチ処理の場合は Cloud Functions を使うと良さそうです。
例えば [Cloud Storage](https://cloud.google.com/storage) に画像がアップロードされた際に、自動的にサムネイルを作成したり、画像にフィルターをかけたりする処理が簡単に作れます。
しかし、最大実行時間に制限(60 分)があるため長時間の処理には適さない場合があります。

### [Batch](https://cloud.google.com/batch)

大規模なバッチ処理ワークロードを効率的に実行するためのフルマネージドなサービスです。
高性能コンピューティング（HPC）、機械学習、データ処理など、さまざまな種類のバッチジョブをスケーラブルかつ柔軟に実行できます。
また、最大実行時間に制限が無いので長時間の処理に適しています。
しかし、Cloud Functions や Cloud Run jobs よりも設定が複雑になってしまうので採用しませんでした。

### [Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)

Cloud Run の一機能で、バッチ処理や非同期タスクの実行に特化したサービスです。
最大実行時間に制限がありますが、24 時間実行できるのでほとんどのバッチ処理は問題ないでしょう。

## Cloud Run jobs の基本要素

### Cloud Run jobs のリソース構造

Cloud Run jobs は以下のようなリソースで構成されています。 
 ![リソース構造](https://cont.sterfield.co.jp/uploads/resource_a778e2a692.jpg) 

### ジョブ (Job)

実行したいタスクの全体像を定義するルートリソースです。

ジョブでは以下の項目を設定できます。

- コンテナイメージ
- タスク数
- 並列実行数
- リソース(各タスクに割り当てる CPU やメモリなどのリソース量)
- 環境変数
- サービスアカウント

### タスク (Task)

ジョブによって定義されたタスクのインスタンスです。
タスクはジョブに設定された数だけ実行されます。コンテナインスタンスを 1:1 で用意し、コンテナインスタンスごとの進捗を管理します。タスクがエラーで終了した場合は、タスク単位で再実行もできます。

### 実行 (Execution)

タスクの実行履歴です。
ジョブの設定に応じてタスクを実行し、全てのタスクが完了するまでの状態を管理します。1 度作成した実行は、何度でも再実行が可能です。

## Cloud Run jobs の作成・実行方法

### サンプルアプリケーションの用意

以下のコードを適当なフォルダに作成します

環境変数に`SLEEP_MS`を設定すると、設定した時間だけスリープするようになり、時間のかかる処理を再現できます。
`FAIL_RATE`を設定すると、指定した確率でジョブがエラーになり、エラー時の挙動を確認できます。

main.js

```js
// Retrieve Job-defined env vars
const { CLOUD_RUN_TASK_INDEX = 0, CLOUD_RUN_TASK_ATTEMPT = 0 } = process.env;
// Retrieve User-defined env vars
const { SLEEP_MS, FAIL_RATE } = process.env;

// Define main script
const main = async () => {
 console.log(
 `Starting Task #${CLOUD_RUN_TASK_INDEX}, Attempt #${CLOUD_RUN_TASK_ATTEMPT}...`
 );
 // Simulate work
 if (SLEEP_MS) {
 await sleep(SLEEP_MS);
 }
 // Simulate errors
 if (FAIL_RATE) {
 try {
 randomFailure(FAIL_RATE);
 } catch (err) {
 err.message = `Task #${CLOUD_RUN_TASK_INDEX}, Attempt #${CLOUD_RUN_TASK_ATTEMPT} failed.\n\n${err.message}`;
 throw err;
 }
 }
 console.log(`Completed Task #${CLOUD_RUN_TASK_INDEX}.`);
};

// Wait for a specific amount of time
const sleep = (ms) => {
 return new Promise((resolve) => setTimeout(resolve, ms));
};

// Throw an error based on fail rate
const randomFailure = (rate) => {
 rate = parseFloat(rate);
 if (!rate || rate < 0 || rate > 1) {
 console.warn(
 `Invalid FAIL_RATE env var value: ${rate}. Must be a float between 0 and 1 inclusive.`
 );
 return;
 }

 const randomFailure = Math.random();
 if (randomFailure < rate) {
 throw new Error("Task failed.");
 }
};

// Start script
main().catch((err) => {
 console.error(err);
 process.exit(1); // Retry Job Task by exiting the process
});
```

package.json

```json
{
 "main": "main.js",
 "scripts": {
 "start": "node main.js"
 },
 "engines": {
 "node": ">=20.0.0"
 }
}
```

Dockerfile

```Dockerfile
FROM node:20
WORKDIR /app
COPY . .
RUN npm install
CMD [ "npm", "start" ]
```

### コンテナをプッシュ

次のコマンドで [Artifact Registry](https://cloud.google.com/artifact-registry) にコンテナをプッシュします。`${REGION}`と`${PROJECT_ID}`は各自で置き換えてください。

```
gcloud builds submit --tag ${REGION}-docker.pkg.dev/${PROJECT_ID}/gcr.io/job-sample
```

### ジョブを作成

今回は、以下の Cloud Run のコンソールから作成します。 
https://console.cloud.google.com/run/jobs

「ジョブの作成」をクリックします。 
 ![ジョブの作成ボタン](https://cont.sterfield.co.jp/uploads/job_create_1_691d934c36.png) 

「コンテナ イメージの URL」に先ほど作成したコンテナを選択します。
イメージ名が自動的に設定されます。
リージョンやタスク数はお好みで設定して下さい。 
 ![ジョブの詳細](https://cont.sterfield.co.jp/uploads/job_create_2_c2c65e6a14.png) 

### ジョブの実行

「実行」をクリックし、ジョブを開始します。 
 ![実行ボタン](https://cont.sterfield.co.jp/uploads/job_create_3_3049895faf.png)

しばらく経つと、全てのタスクが完了し、実行が完了します。実行の詳細を開くとタスクが完了していることが確認でき、各タスクのログ等が確認できます。 
 ![タスク](https://cont.sterfield.co.jp/uploads/job_create_4_6281075873.png) 

### 作成した Job を定期実行する方法

「トリガー」タブを選択し、「スケジューラ トリガーを追加」をクリックします。 
 ![トリガー追加ボタン](https://cont.sterfield.co.jp/uploads/scheduler_1_1e1f8511c4.png) 

頻度を unix-cron 形式で選択します。
今回は 5 分ごと(`*/5****`)に実行してみます。 
 ![トリガー詳細](https://cont.sterfield.co.jp/uploads/scheduler_2_f70181ea5b.png) 

指定した通り、5 分ごとにジョブが実行されました。 
 ![ジョブ一覧](https://cont.sterfield.co.jp/uploads/scheduler_3_69acf4aa19.png) 

## まとめ

今回は Cloud Run jobs について説明しましたが、各サービスのメリット・デメリットを比較し、要件に合った最適なサービスを選択することが重要です。
今後、他サービスにも触れる機会がありましたら紹介したいです。

## 参考

- https://speakerdeck.com/satohjohn/gcptenohatutichu-li-hatanwokao-etemiru
- https://zenn.dev/google_cloud_jp/articles/cloudrun-jobs-basic
- https://cloud.google.com/run/docs/quickstarts/jobs/build-create-nodejs

small_cloud-run.png

thumbnail_cloud-run.png

cloud-run.png

Cloud Run jobs を利用したバッチ処理

## はじめに

2023 年 10 月ごろに、[Recoil と Jotai に関する記事](https://sterfield.co.jp/blog/which-recoil-or-jotai/)を投稿しましたが、2023 年 3 月以降、Recoil の更新が進められていない状況で、React 19 以降では正常に動作しない見込みとなってきました[<a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">参考</a>]。 
そのため、これまで Recoil を使ってきた React のプロジェクトにおいて、別の状態管理ライブラリへの移行が必要となり、対応を進めています。 
その選択肢の一つとして、Redux への移行を行ったので、そのときの方法を Recoil と Redux のコードを比べながら、通常の状態と、API との通信を伴う非同期の状態の移行に分けて、ご紹介します。 
ここでご紹介する方法は、Redux は、Redux Toolkit と React Redux の利用を前提にしています。

## インストール

Recoil から Redux へ移行する場合、Redux Toolkit と React Redux を使うことで、Recoil のときと同じようなコードの書き方で、スムーズに移行できるので、そちらをインストールします。

```bash
npm i @reduxjs/toolkit react-redux
```

## ファイルの準備

以下はファイル構成の例です。

```
redux
├ hooks/ // React用のHooksを格納する
│ ├ normalExample.ts
│ ├ familyExample.ts
│ ┗ asyncExample.ts
├ slices/ // ReduxのSliceを格納する
│ ├ normalExampleSlice.ts
│ ├ familyExampleSlice.ts
│ ┗ asyncExampleSlice.ts
┗ store.ts // Reduxのstore
```

## 通常の状態

### Recoil

```typescript
import {
 atom,
 useRecoilValue,
 useResetRecoilState,
 useSetRecoilState,
} from "recoil";

// Recoilのatomを設定
export const normalExampleState = atom<string>({
 key: "normalExample",
 default: "",
});

// get state
export const useNormalExampleValue = () => useRecoilValue(normalExampleState);

// set state
export const useSetNormalExampleState = (key) =>
 useSetRecoilState(loadingState);

// reset state
export const useResetNormalExampleState = () =>
 useResetRecoilState(normalExampleState);
```

上記のような状態を Recoil で設定していた場合、Redux Toolkit と React Redux を使って以下のように置き換えることができます。 
ご覧いただくとわかりますが、reducer による action の設定や Root の store.ts への設定のところが Recoil にはない記述ですが、それ以外は似たコードで構成できることがわかります。

### Redux

redux/slices/normalExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

const initialState = "";

// ReduxのSliceを設定
export const normalExampleSlice = createSlice({
 name: "normalExample",
 initialState,
 reducers: {
 // set
 setNormalExample: (state, action: PayloadAction<string>) => {
 state.normalExample = action.payload;
 },
 // reset
 resetNormalExample: (state) => {
 state.normalExample = "";
 },
 },
});

export const { setNormalExample, resetNormalExample } =
 normalExampleSlice.actions;

export default normalExampleSlice.reducer;
```

redux/store.ts

```typescript
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useSelector } from "react-redux";
import normalExample from "./slices/normalExampleSlice";

// 用意したSliceをstoreに登録する
export const store = configureStore({
 reducer: {
 normalExample,
 },
});

export type AppStore = typeof store;

export type RootState = ReturnType<AppStore["getState"]>;

export type AppDispatch = AppStore["dispatch"];

// useSelectorでは型が引き継がれないので、TypeScriptでは型を引き継げるuseAppSelectorを用意する
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

React 用の Hooks は、以下のように React Redux の useDispatch と useSelector（TypeScript の場合は store.ts で定義した useAppSelector）を利用して以下のように構成できます。

redux/hooks/normalExampleSlice.ts

```typescript
import { useDispatch } from "react-redux";
import { useCallback } from "react";
import {
 setNormalExample,
 resetNormalExample,
} from "@/redux/slices/normalExampleSlice";
import { useAppSelector, type RootState } from "../store";

// get state
export const useNormalExampleValue = () =>
 useAppSelector((state: RootState) => state.normalExample);

// set state
export const useSetNormalExampleState = () => {
 const dispatch = useDispatch();
 return (value: string) => {
 dispatch(setNormalExample(value));
 };
};

// reset state
export const useResetNormalExampleState = () => {
 const dispatch = useDispatch();
 return () => {
 dispatch(resetNormalExample(value));
 };
};
```

## AtomFamily からの移行

Recoil では、atomFamily という、同じ型の状態をキーごとに再利用するための便利な機能が用意されていますが、Redux Toolkit の Slice でも、以下のように構成することで、似た機能を実装できます。

### Recoil

```
import { atomFamily } from "recoil";

import {
 atom,
 useRecoilValue,
 useResetRecoilState,
 useSetRecoilState,
} from "recoil";

// RecoilのatomFamilyを設定

export const familyExampleState = atomFamily<string, string>({
 key: "familyExample",
 default: null
});

// get state
export const useNormalExampleValue = (key: string) => useRecoilValue(familyExampleState(key));

// set state
export const useSetNormalExampleState = (key: string) =>
 useSetRecoilState(familyExampleState(key));

// reset state
export const useResetNormalExampleState = (key: string) =>
 useResetRecoilState(familyExampleState(key));
```

### Redux

redux/slices/familyExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

export interface FamilyExampleState {
 [key: string]: string | null;
}

const initialState: FamilyExampleState = {
 default: null,
};

const familyExampleSlice = createSlice({
 name: "familyExample",
 initialState,
 reducers: {
 // set
 setFamilyExample(
 state,
 action: PayloadAction<{ key: string; value: string }>
 ) {
 state[action.payload.key] = action.payload.value;
 },
 // reset
 resetFamilyExample(state, action: PayloadAction<string>) {
 state[action.payload] = null;
 },
 },
});

export const { setFamilyExample, resetFamilyExample } =
 familyExampleSlice.actions;

export default familyExampleSlice.reducer;
```

redux/hooks/familyExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import {
 setFamilyExample,
 resetFamilyExample,
} from "../slices/familyExampleSlice";

export const useFamilyExampleValue = (key: string) =>
 useAppSelector((state: RootState) => state.familyExample[key], shallowEqual);

export const useSetFamilyExampleState = (key: string) => {
 const dispatch = useDispatch();
 return (value: string) => {
 dispatch(setFamilyExample({ key, value }));
 };
};

export const useResetFamilyExampleState = (key: string) => {
 const dispatch = useDispatch();
 return () => {
 dispatch(resetFamilyExample(key));
 };
};
```

## API 通信を伴う非同期の状態

API からのデータ取得など、非同期を伴う場合、Redux への移行には少しなれがひつようかもしれません。
以下のような Recoil では selector で API からのデータ取得を伴う状態を構成していた場合を移行する場合の例です。

### Recoil

```typescript
import {
 atom,
 selector,
 useSetRecoilState,
 useRecoilValue,
 useRecoilRefresher_UNSTABLE,
} from "recoil";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery } from "@/api/query/exampleQuery";

export const asyncExampleState = selector({
 key: "asyncExample",
 get: async () => {
 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 fetchPolicy: "no-cache",
 });
 if (errors) {
 throw errors;
 }
 return data.example;
 },
});

// get state
export const useAsyncExampleValue = () => useRecoilValue(asyncExampleState);

// reset state
export const useResetAsyncExampleState = () =>
 useRecoilRefresher_UNSTABLE(asyncExampleState);
```

### Redux

Redux Toolkit で非同期を伴う Slice を作成する場合、createAsyncThunk と createSlice の extraReducers で構成します。

redux/slices/asyncExampleSlice.ts

```typescript
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import type { ApolloError } from "@apollo/client";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";
import type { RootState } from "../store";

// API用の状態の型を定義
const initialState: {
 data: Example[];
 status: "idle" | "loading" | "succeeded" | "failed";
 error: ApolloError;
} = {
 data: [],
 status: "idle",
 error: null,
};

// 非同期用のreducerを設定
export const fetchAsyncExample = createAsyncThunk<
 Example[],
 void,
 { state: RootState }
>("asyncExample/fetchAsyncExample", async (_, { rejectWithValue }) => {
 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 fetchPolicy: "no-cache",
 });

 if (error) {
 return rejectWithValue(error);
 }

 return data.example;
});

// SliceにextraReducersを使って非同期用のreducerを紐づける
export const asyncExampleSlice = createSlice({
 name: "asyncExample",
 initialState,
 reducers: {},
 extraReducers: (builder) => {
 builder
 .addCase(fetchAsyncExample.pending, (state) => {
 state.status = "loading";
 })
 .addCase(fetchAsyncExample.fulfilled, (state, action) => {
 state.status = "succeeded";
 state.data = action.payload;
 })
 .addCase(fetchAsyncExample.rejected, (state, action) => {
 state.status = "failed";
 state.error = action.payload as any;
 });
 },
});

export default asyncExampleSlice.reducer;
```

redux/hooks/asyncExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import { fetchAsyncExample } from "../slices/asyncExampleSlice";

// get state
export const useAsyncExampleValue = () => {
 const dispatch: AppDispatch = useDispatch();
 const { data, status } = useAppSelector(
 (state: RootState) => state.example,
 shallowEqual
 );

 // 状態が"idle"の時はfetchを実行する
 useEffect(() => {
 if (status === "idle") {
 dispatch(fetchAsyncExample());
 }
 }, [status, dispatch]);

 return data;
};

// reset state
export const useResetNormalExampleState = () => {
 const dispatch = useDispatch();
 return () => {
 dispatch(fetchAsyncExample());
 };
};
```

## 移行途中で Recoil と依存する状態を連携させる場合

移行途中で共存させなければならない場合、以下のように Recoil に依存する状態を Redux と連携できます。
ただし、Recoil 同士の状態と違い、Redux の状態の変化を Recoil は自動で検知してくれないので、Redux の状態を変更するときに、Recoil で Reset や Refresh を実行する必要があることの注意が必要です。

```typescript
import { selector } from "recoil";
import { store } from "@/redux/store";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";

export const exampleState = selector({
 key: "exampleState",
 get: async ({ get }) => {
 const keyword = store.getState().keyword;

 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 variables: {
 keyword,
 },
 fetchPolicy: "no-cache",
 errorPolicy: "all",
 });
 if (errors) {
 throw errors;
 }
 return data.example;
 },
 cachePolicy_UNSTABLE: {
 eviction: "most-recent",
 },
});
```

## まとめ

Recoil の atom や selector の書き方と Redux Toolkit の createSlice の書き方が似ていることもあり、意外とコードの移行の親和性が高いと感じました。 
ただ、非同期関係では Redux において createAsyncThunk を利用するなど、Recoil にはない独特の記述も必要で、慣れが必要な部分も実感しました。

## 参考リンク

- Recoil の更新状況: <a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>
- Recoil の更新状況: <a href="https://recoiljs.org/blog" target="_blank">Blog | Recoil</a>
- Redux Toolkit の使い方 (はじめ方): <a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank">Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (TypeScript): <a href="https://redux-toolkit.js.org/tutorials/typescript" target="_blank">TypeScript Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (非同期の状態): <a href="https://redux-toolkit.js.org/api/createAsyncThunk" target="_blank">createAsyncThunk | Redux Toolkit</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2025/10/02

2025/09/05

2025/08/22

2025/06/20

2025/05/22

2025/05/16

2025/03/21

2025/02/21

2025/01/17

2024/12/20

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19