## はじめに
『失敗の科学』（原題：Black Box Thinking）を読んでみました。本書は失敗をいかに活用し、成功へと導くための学びと考え方を示しています。**失敗を恐れるのではなく、それを成長の機会として捉えることの重要性**を説いており、航空業界や医療業界、ビジネスの成功事例や失敗事例を交えながら、なぜ失敗が避けられないのか、そしてそれをどのように組織や個人が前進するためのエンジンとして使うべきかについて述べています。

## 失敗を避ける文化とその問題点
失敗を避けようとする文化が、逆に大きな問題を引き起こすことがあります。医療業界では医療ミスが多発する一方で、その原因究明や改善が進まないケースが多く、その理由としては失敗が隠蔽されるためです。多くの組織や人々は失敗を恥と感じ、その結果、ミスを公に認めず、改善のための行動を取らない傾向にあります。これは「閉鎖的な思考」と呼ばれ、失敗を無視し、自己防衛に走る姿勢です。このような姿勢は、失敗を繰り返しやすくし、イノベーションの阻害要因となります。

## ブラックボックス思考
「ブラックボックス思考」は、航空業界の安全性向上の方法に着目しています。航空機が墜落した際、ブラックボックス（飛行データと音声を記録する装置）が事故の原因究明に役立つように、**失敗を隠すのではなく、徹底的に調査し、問題の根本を明らかにすることで、将来の成功に役立てる**という考え方です。航空業界は、失敗から学び、安全性を高めるシステムを構築しており、このプロセスが他の業界にも応用できると述べています。

## 成功への道：試行錯誤と改善
成功者や大企業の多くは、試行錯誤を通じて成長してきていると書かれています。例えば、科学の分野では、仮説を立てて実験を繰り返し、失敗から学ぶことが進歩の基本です。このアプローチは、エジソンの電球開発や、スティーブ・ジョブズの数々の失敗からの復活など、多くの成功者の事例にも見られます。彼らは、**失敗を単なる「過程」と捉え、それをもとに改善を繰り返すことで大きな成功を収めています**。

## 心理的安全性とオープンな文化
本書では、成功するためには、個人や組織が「心理的安全性」を持つことが必要であるとも述べています。これは、**失敗を恐れず、失敗を素直に共有できる環境を作ることで、チームや組織がより効果的に学び、成長できるという考え方**です。たとえば、Googleの研究でも、心理的安全性が高いチームほど、イノベーションやパフォーマンスが高いことが示されています。

## 閉鎖的思考から開放的思考へ
閉鎖的思考とは、失敗を自分の能力や価値の否定と捉えることで、それを隠そうとする反応を指します。一方、開放的思考は、失敗を受け入れ、それを学びの機会と捉える姿勢です。この違いが、成功と失敗の分かれ道となります。開放的思考を持つことで、個人も組織も改善に向けた具体的なアクションを取りやすくなり、最終的に成功を掴む確率が高まると述べています。

## 失敗を活用するための具体的なステップ
失敗から学ぶためには、次のような具体的なステップが有効であるとされています。

1. フィードバックを求める：失敗を隠さず、外部からのフィードバックを受け入れることで、客観的な視点を持つことができる。
2. 実験精神を持つ：リスクを恐れず、実験や試行錯誤を繰り返すことで、次第に成功に近づく。
3. エゴを捨てる：失敗を個人の能力や価値の否定と結びつけず、学びの一環として捉える。
4. データを活用する：失敗のデータを積極的に分析し、その改善に役立てることで、より効果的な対応策を見つける。

## おわりに
『失敗の科学』は、成功を求める上で失敗を避けて通ることはできないという現実を受け入れ、失敗を成長の一部と捉えるべきだと強調しています。失敗を恥ずかしいもの、隠すべきものとするのではなく、それを学びの機会として前向きに活用することで、成功への道が開けるというメッセージを本書は伝えています。たくさんの事例が載っていたので是非読んでみてください。



（参考文献）
マシュー・サイド, 失敗の科学, 株式会社ディスカヴァー・トゥエンティワン, 2016



失敗の科学.jpg

失敗の科学

## はじめに
オンライン会議の増加に伴い、議事録作成の効率化は多くの企業にとって喫緊の課題となっています。従来は手作業で行っていた議事録作成も、生成AIの登場により、大幅な時間短縮と正確性の向上を実現できるようになりました。

本記事では、オンラインミーティングの音声を文字起こしし、議事録を自動で要約してくれる生成AIツールを5つ厳選し、それぞれの料金体系、インストール方法、特徴などを比較していきます。

GAI登場当初はいろいろな制限の中で、議事録ツールの自作に挑戦してみたりしましたので、宜しければご覧ください。

https://sterfield.co.jp/blog/18142/  
https://sterfield.co.jp/blog/18162/

自作する過程を通じて、GAIがどのような原理か深く知れるきっかけになったので、チャレンジ自体はとても有意義だったと思います。                                        
1年半前の記事ですが、当時は、一回に処理できる文字数（トークン数）にも上限があり、分割してAPIに送るなどの工夫が必要でした。
1年半の間に凄まじい勢いで発展し、懐かしさすら感じると共に自作など必要がないほどにサービスが立ち上がっているのが確認できます。


## 生成AI議事録ツールを選ぶ際のポイント
生成AI議事録ツールを選ぶ際には、以下のポイントを考慮しましょう。

音声認識精度: 会話内容を正確にテキスト化できるか。
要約精度: 会議の要点や決定事項を的確にまとめられるか。
対応言語: 多言語に対応しているか。
連携できる会議ツール: 普段利用している会議ツールと連携できるか。
料金体系: 無料プランや有料プランの料金体系はどうか。
セキュリティ: 情報漏洩のリスクはないか。
操作性: 使いやすいインターフェースか。
## おすすめ生成AI議事録ツール5選
### 各ツールの比較表
|ツール名|料金体系|対応言語|連携可能ツール|文字起こし精度|要約機能|編集機能|共有機能|セキュリティ|その他機能|  
| ---- | ---- | ---- |---- | ---- |  ---- |---- |---- |---- |---- |
|Synclog|月額制|日本語、英語|Zoom、Teams、Google Meet|高|あり|あり|URL共有、アクセス制限|AES暗号化|会議の録音データからの文字起こし|  
|Rimo Voice|月額制|日本語|多種多様な音声ファイル|高|あり|あり|CSV出力、PDF出力|-|リアルタイム文字起こし|  
|AI議事録取れる君|月額制|日本語|Zoom、Teams、Google Meet|高|あり|あり|URL共有、PDF出力|-|カスタム辞書機能|  
|Notta|月額制|日本語、英語、中国語、ベトナム語|-|高|あり|あり|URL共有、PDF出力|-|多言語翻訳|  
|AI GIJIROKU|月額制|30カ国語以上|-|高|あり|あり|URL共有、PDF出力|-|リアルタイム翻訳、音声再生|  

### 各ツールの特徴を深掘り
#### [Synclog](https://www.synclog.ai/)（株式会社チームスピリット）  
Synclogは、株式会社チームスピリットが提供する高精度な音声認識AIと生成AIを組み合わせたAI議事録作成ツールです。

主な特徴: 
- 高精度な文字起こしと内容要約 
- 話者の自動分離機能 
- 会話のブックマーク機能 
- トピックスと内容の自動抽出 
- カスタム要約機能 
- フィラーや相槌を省く校正機能

価格: 公式サイトでの確認が必要ですが、一般的に企業向けのサービスは月額制や年間契約制が多いです。2週間の無料トライアルが提供されています。

インストール方法: 専用のアプリケーションをPCにインストールする必要があります。インストール後は1クリックで簡単に利用を開始できます。

使用方法: 
1. アカウントを作成し、専用アプリをインストールします。 
2. アプリを起動し、1クリックで書き起こしを開始します。 
3. Zoom、Teams、Google Meetなどのオンライン会議ツールと連携するか、対面会議でも利用可能です。 
4. 会議中にAIが自動で文字起こしと要約を行います。 
5. 議事録エディタで内容を編集し、必要に応じてカスタム要約や校正機能を使用します。 
6. 作成した議事録をリンク共有やWord出力で共有します。

Synclogの強みは、様々なシーンに対応できる柔軟性です。オンライン会議だけでなく、対面会議やYouTube動画の書き起こしにも対応しています。また、Salesforce連携機能により、議事録情報の有効活用や蓄積まで一貫してサポートできる点も特筆すべきです。

高精度な音声認識と自動話者分離機能により、質の高い書き起こしが可能です。さらに、辞書登録機能を使用することで、業界特有の用語や社内用語にも対応できます。

生成AIによる自動要約機能は、ミーティング内容を自動的に判断して要約を行います。また、AIに要約内容の指示を行うことも可能で、ポイントを絞り込んだ精度の高い要約も実行できます。

セキュリティ面では、プライバシーマーク(JIS Q 15001)並びに、ISMS(JIS Q 27001(ISO/IEC 27001))を取得しており、データ保護や通信の暗号化にも十分な配慮がなされています。

#### [Rimo Voice](https://rimo.app/about/voice)  
Rimo Voiceは、株式会社Rimo が提供する音声認識AIを活用した議事録作成支援ツールです。

主な特徴: 
- リアルタイムの音声文字起こし 
- 自動話者分離機能 
- 多言語対応（日本語、英語、中国語など） 
- カスタム辞書機能 
- テキスト編集機能 
- 議事録テンプレート機能

価格: 公式サイトでの確認が必要ですが、一般的に利用人数や機能に応じた段階的な料金プランが提供されています。無料トライアルも利用可能です。

インストール方法: クラウドベースのサービスであるため、専用のソフトウェアのインストールは不要です。ブラウザから利用可能です。

使用方法:
1. アカウントを作成し、ログインします。 
2. 新しい会議を開始するか、既存のオンライン会議ツールと連携します。 
3. リアルタイムで音声が文字に起こされます。 
4. 会議終了後、自動生成された議事録を編集・共有します。

Rimo Voiceの強みは、多言語対応と使いやすいインターフェースです。日本語はもちろん、英語や中国語にも対応しているため、グローバルなチームでの利用に適しています。

カスタム辞書機能を使用することで、業界特有の専門用語や社内用語の認識精度を向上させることができます。これにより、より正確な文字起こしが可能になります。

議事録テンプレート機能は、定型的な会議の効率化に役立ちます。よく使用する議事録のフォーマットを事前に設定しておくことで、会議後の編集作業を大幅に削減できます。

#### [AI議事録取れる君](https://gijirokukun.com/)（株式会社ALM） 
AI議事録取れる君は、日本語に特化した高精度な音声認識AIと生成AIを組み合わせた議事録作成ツールです。

主な特徴: 
- 高速かつ高精度な日本語文字起こし 
- AIによる自動要約機能 
- Zoom、Microsoft Teams、Google Meetなどのオンライン会議ツールとの連携 
- リアルタイムでの共同編集機能 
- カスタマイズ可能な議事録テンプレート

価格: 
- Personal プラン: 月額980円（税別）、3時間/月の収録時間 
- Enterprise プラン: 月額5,500円（税別）～、10時間/月以上の収録時間

インストール方法: ブラウザベースのアプリケーションのため、インストールは不要です。Chrome、Safari、Edgeに対応しています。

使用方法: 
1. アカウントを作成し、ログインします。 
2. オンライン会議ツールと連携するか、直接音声を入力します。 
3. AIが自動で文字起こしと要約を行います。 
4. 必要に応じて、共同編集機能を使って議事録を調整します。

AI議事録取れる君の特筆すべき点は、日本語に特化したAIエンジンを使用していることです。これにより、前後の文脈を考慮した自然な日本語での議事録作成が可能となっています。

リアルタイムでの共同編集機能は、チームでの議事録作成を効率化します。会議中や会議直後に複数のメンバーが同時に編集を行うことで、より正確で包括的な議事録を迅速に作成できます。

カスタマイズ可能な議事録テンプレートは、組織や部門ごとに最適化された議事録フォーマットを作成・使用することができます。これにより、一貫性のある議事録作成が可能になり、情報の整理と共有が容易になります。

また、チーム機能を使えば、チーム内で議事録を簡単に共有・閲覧できるため、組織全体の情報共有にも役立ちます。

####  [Notta](https://www.notta.ai/)  
Nottaは、AIを活用した多機能な音声文字起こしと会議録作成ツールで、日本語を含む多言語に対応しています。

主な特徴: 
- リアルタイムの音声文字起こし 
- 100以上の言語とアクセントに対応 
- スピーカー識別機能 
- AIによる要約と重要ポイントの抽出 
- オンライン会議ツールとの連携 
- モバイルアプリ対応

価格: 
- Basic プラン: 無料（制限付き） 
- Pro プラン: 月額12.49ドル（年間契約の場合） 
- Team プラン: 月額14.99ドル/ユーザー（年間契約の場合）

インストール方法: ウェブブラウザから利用可能なクラウドサービスです。また、iOS/Androidデバイス用のモバイルアプリも提供されています。

使用方法: 
1. アカウントを作成し、ログインします。 
2. 新しい会議を開始するか、既存のオンライン会議ツールと連携します。 
3. リアルタイムで音声が文字に起こされます。 
4. 会議終了後、AIが自動的に要約と重要ポイントを抽出します。 
5. 必要に応じて議事録を編集し、チームメンバーと共有します。

Nottaの強みは、その多言語対応能力と高度なAI機能です。100以上の言語とアクセントに対応しているため、国際的なチームや多言語環境での使用に適しています。

AIによる要約と重要ポイントの抽出機能は、長時間の会議や複雑な議論の内容を簡潔にまとめるのに役立ちます。これにより、会議参加者が重要な情報を素早く把握し、効率的にフォローアップを行うことができます。

モバイルアプリの提供は、外出先や移動中でも議事録の確認や編集が可能になるため、柔軟な働き方をサポートします。

また、Nottaは主要なオンライン会議ツールとの連携が可能で、既存のワークフローにシームレスに統合できます。これにより、導入の障壁を低く抑えることができます。

#### [AI GIJIROKU](https://gijiroku.ai/)（株式会社オルツ）  
AI GIJIROKUは、日本の企業が開発した、日本語に特化したAI議事録作成ツールです。

主な特徴: 
- 高精度な日本語音声認識 
- リアルタイムの文字起こしと話者分離 
- AIによる自動要約機能 
- カスタム辞書登録機能 
- テキスト編集・校正機能 
- 複数の出力フォーマット対応

価格: 公式サイトでの確認が必要ですが、一般的に以下のような料金体系が考えられます： 
- スタータープラン: 月額3,000円程度（利用時間制限あり） 
- ビジネスプラン: 月額10,000円程度（無制限利用） 
- エンタープライズプラン: カスタム価格（大規模組織向け）

インストール方法: クラウドベースのサービスであり、専用のソフトウェアのインストールは不要です。ウェブブラウザから直接利用可能です。

使用方法:
1. アカウントを作成し、ログインします。 
2. 新しい会議セッションを開始するか、録音ファイルをアップロードします。 
3. リアルタイムで音声が文字に起こされ、話者が分離されます。 
4. 会議終了後、AIが自動的に要約を生成します。 
5. 必要に応じて議事録を編集し、希望のフォーマットで出力します。

AI GIJIROKUの最大の強みは、日本語に特化した高精度な音声認識エンジンです。日本語特有の言い回しや慣用句、ビジネス用語などを正確に認識し、自然な日本語の議事録を作成します。

カスタム辞書登録機能により、企業固有の用語や専門用語を登録することができ、さらに認識精度を向上させることが可能です。これは特に専門性の高い分野や特定の業界での使用に適しています。

AIによる自動要約機能は、長時間の会議内容を簡潔にまとめ、重要なポイントを抽出します。これにより、会議参加者が迅速に会議の要点を把握し、効率的なフォローアップを行うことができます。

テキスト編集・校正機能は、AIが生成した議事録を人間が確認し、必要に応じて修正を加えることができます。これにより、AIの精度と人間の判断を組み合わせた、より質の高い議事録を作成することが可能です。

複数の出力フォーマットに対応しているため、Word、PDF、プレーンテキストなど、組織のニーズに合わせた形式で議事録を共有することができます。

## まとめ
以上、5つの日本語対応の音声文字起こしと議事録要約ツールを紹介しました。各ツールには以下のような特徴があります：

Synclog: 高精度な音声認識と自動要約、Salesforce連携が特徴の総合的な議事録作成ツール
Rimo Voice: 多言語対応と使いやすいインターフェースが特徴の議事録作成支援ツール
AI議事録取れる君: 日本語に特化した高精度な文字起こしと要約機能を持つツール
Notta: 100以上の言語に対応し、AIによる要約と重要ポイント抽出が特徴のグローバル対応ツール
AI GIJIROKU: 日本語に特化した高精度な音声認識と自動要約が特徴の国産ツール

### 今後の展望
生成AI技術は日々進化しており、今後さらに高精度な議事録作成ツールが登場することが期待されます。
本記事が、皆様の議事録作成の効率化の一助となれば幸いです。

## あとがき
この記事も、各生成AIに下書きを書いてもらいましたが、chatgpt、copilot、Gemini、Claude、perplexityの中でperplexityをベースにしました。
perplexity を選んだ理由が、最も詳細にサービスを提案しれくれたことです。その他は、海外サービスで日本語対応出来ているかどうかの明言もなかったので、今回はperplexityに軍配です。そして、下書きも手直しの量が格段に減り、流暢な言い回しになっているのを痛感しました。
アイキャッチ画像はBingで作っています。

_ea06e902-2220-4d96-988a-47f3067fa65a.jpeg

生成AIによる議事録作成を効率化！おすすめツール5選を徹底比較

## はじめに

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を活用してみてください。

logo_Dify.png

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

## はじめに
前回の私のブログでは訪日台湾人旅行客の動向を旅行客数、国内消費額、購入したい品目の３つの切り口でご紹介いたしました。今回は別の観点でも日本を訪れる台湾人旅行客について紹介していきます。

参考）https://sterfield.co.jp/blog/taiwanese-tourists/

## 台湾人が日本に行ってみたい理由とは？
台湾人向けに実施した日本を訪れた理由調査では、日本食の堪能やショッピングが上位を占めていますが自然景観や名城旧跡といった観光地巡りと行ったコト消費も台湾人には人気であることが伺えます。
 ![](https://cont.sterfield.co.jp/uploads/2023_e07342e4b0.webp) 

## 台湾人に人気の観光スポットランキング
次に台湾人に人気の観光スポットをご紹介いたします。1位「富士山」2位「東京ディズニーランド」3位「ユニバーサル・スタジオ・ジャパン」と日本人にも大人気スポットがランクインしています。4位と5位は意外にも「立山黒部アルペンルート」「白川郷合掌造り集落」といった地方の観光スポットがランクインしており、日本ならではの壮大な風景や伝統的な集落も台湾人には人気なのですね。
 ![](https://cont.sterfield.co.jp/uploads/2023_7a2cebcbc9.jpg) 

## 台湾人が日本旅行時に直面した問題とは？
台湾人が日本を旅行する際に感じたいちばんの問題はコミュニケーションの問題です。最近では翻訳ツールの発達により徐々に解消されつつあるものの、やはりまだまだ言語の壁は大きな課題のようです。日本ではまだまだ日本語以外の言語が使えない店舗も多くあり、特にレストランのメニューについては、翻訳ツールを使って注文しても、別の料理が出てくる場面もあるようです。
 ![](https://cont.sterfield.co.jp/uploads/2023_c903f49d12.webp) 

## まとめ
いかがだったでしょうか。海外からの観光客と言えば爆買いのイメージでしたが、台湾からの訪日客には日本ならではの大パノラマや由緒ある観光名所が人気なようです。そしてコミュニケーションの問題からも分かるようにインバウンド需要が増えている今、観光地において外国語対応、特に訪日数の増えている台湾人の言語である台湾語は必須な状況です。日本にはたくさんの素敵な観光地があるので、訪日観光客により満足していただけるようなサービス向上を期待したいですね。

富士山.avif

台湾人旅行客から見た日本旅

## はじめに
送料や返品が無料であることを強みの1つとして打ち出すオンラインショップは少なくありません。
しかしここ数年、特にヨーロッパでは返品を有償とする動きをあちこちで目にします。今回はその1つであるオンラインファッションプラットフォーム「Asos」の取り組みを紹介します。

## Asosの有料返品はどんな内容？

Asosはイギリスで返品手数料を導入することを発表しました。ただし、この手数料は**プラットフォームによって高い返品率と判断された顧客にのみ適用される**というものでした。

Asosはイギリスのオンライン専業ファッション販売業者です。今年4月、同社は会計年度の上半期に売上が18％減少したと発表しました。イギリスのオンラインショッピング利用者が実店舗に戻り、またSheinやTemuといった競合他社との競争も激化している状況です。
どうにか売り上げの減少幅を減らしたいと考えたゆえの選択なのかもしれません。

### 有料返品対象として選ばれた顧客とは？
先週末、Asosは返品頻度が高いと認定された一部の顧客に、メールでその旨を通知しました。しかし、どのような基準で選定されたかは明らかにされていません。

認定された顧客が、注文品のうち47.4ユーロ（40ポンド）未満の商品しか手元に残さなかった場合、ファッションプラットフォームは返金額から4.68ユーロ（3.95ポンド）を差し引きます。一方、顧客が40ポンド以上の商品を保持した場合は、返品手数料は無料となるといいます。

この変更は10月8日に施行されます。対象となる顧客には、注文時にウェブサイトで通知されます。また、この変更はロイヤルティメンバーにも適用されますが、彼らは注文額が少なくとも17.78ユーロ（15ポンド）以上の場合、引き続き無料で返品が可能です。

しかし、今回の新たな手数料は、「頻繁に返品する顧客」と判断されていない購入者には適用されません。「この変更は、すべての顧客に無料返品サービスを引き続き提供するためのものです」とAsosはBBCに語っています。「返品頻度が非常に高く、そのショッピング習慣によって無条件の無料返品提供が継続不可能な少数の顧客であっても、40ポンド以上の商品を保持すれば引き続き無料で返品が可能です」とのことです。

### ユーザーの反応は？

しかし、このオンラインプラットフォームの顧客の中には、新たな手数料に対して不満を抱く人もやはりいるようです。苦情として多く上がっているのは、「Asosはサイズが不安定であると知られている」というもの。プラットフォームのサイズ設定には一貫性がなく、それが高い返品率の原因であると主張されているのです。

## 終わりに
イギリスのeコマース業界では、高い返品率は一般的な問題となっています。最近の調査によると、返品された衣料品の22％から44％が、二次顧客に再販されることなく廃棄されています。そのため、Asosが返品率を下げたいと考えるのは当然のことです。同社はすでに今年初めにフランス、ドイツ、アメリカで返品手数料の閾値を導入しており、また他社でもここ数年有料化に踏み切っているプラットフォームがあることから、この事例が特別とはいえません。

返品有料化がECビジネスにどの程度の影響を与えるのか、引き続き注視していきたいと思います。


#### 参考
https://ecommercenews.eu/asos-introduces-return-fee-for-frequent-returners/

bastian-riccardi-BQ9usyzHx_w-unsplash.jpg

ECの返品有償化が進むヨーロッパ 〜Asos編

## はじめに
[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)

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を使いこなす技術も必須のスキルと言えそうなので学んでいきます。

img_202450830__title.png

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

## はじめに
この記事では、昨今引き起こされている「円高の要因」と「円高による経済影響」に関して考察していきます。

## 円高とは？
「円高」とは、日本円の価値が他の通貨に対して上昇する現象を指します。
具体的には1ドル＝100円のときであれば、1,000円で10ドルのモノを購入できます。
円高が進み1ドル＝80円になると、1,000円あれば12.5ドルのモノを購入することが可能になります。

## 円高の原因
日本円の上昇には様々な要因がありますが、昨今の円高には主に下記の要因が強く関係していると想定されます。

### 1.日本銀行による金利引き上げ
日本銀行は7月31日に、政策金利を0・25％へ引き上げることを決めました。
日本銀行による利上げは2007年2月以来およそ17年ぶりとなります。

[マイナス金利政策を解除](https://www3.nhk.or.jp/news/html/20240319/k10014395131000.html)


#### 1-1.利回りの上昇
日本の金利が上昇すると、円建て資産に対する利回りが増加します。
これにより、外国の投資家が円建て資産に投資する際のリターンが高くなるため、円が購入され、円高が進行します。

#### 1-2.円高の期待
中央銀行(日本銀行)の政策変更が予測・実行される場合、投資家の期待や予測も円の価値に影響を与え、日本円が上昇する可能性があります。
具体的には、金利が上昇する場合には円高が進むと予想されるため、投資家は円高の恩恵を受けるために、その動向を先取りし、円を購入することがあります。
そのため更なる円高に繋がる可能性があります。


### 2.中東戦争のエスカレーション
世界的な不安定要因が高まると、安全資産としての円が購入され、円が上昇することがあります。

[円が安全通貨として認められる歴史的背景](https://toyokeizai.net/articles/-/624552)

現在のパレスチナ問題(パレスチナという地域をめぐり、アラブ人とユダヤ人が起こしている対立)によるパレスチナ・イスラエル戦争の激化で、円の購入が進み、円高が強まっている可能性があります。

## 円高による経済影響
### 1. 輸出企業への影響
円高が進むと、日本からの輸出品が外国で高くなるため、価格競争力が低下します。
これにより、輸出が減少する可能性があります。
また、輸出企業が外国で得た収益を円に換算すると、収益が減少するため、特に海外売上の比重が高い企業では影響が大きくなります。

### 2. 輸入企業への影響
円高により、外国からの輸入品が安くなるため、輸入企業のコストが削減され、利益が増加する可能性があります。

## 最後に
### 今後の円相場の動向について
上記で述べた要因と、国際経済や金融市場の動向、中央銀行の政策、国内の経済指標等の、その他要因が複雑に絡み合って決まります。
そのため、円相場の動向予測はとても困難となります。
今後の円相場の動向を把握するためには、様々な要因を総合的に判断することが重要となります。


ce3094385e6023df23d52aca6d91f122_t.jpeg

昨今の円高要因を考察

## はじめに
コロナ禍も終わり全国各地の観光地は海外からの旅行客で賑わい活気に溢れています。その中でも台湾からの旅行客は昨今急増しており、台湾人の日本人気は急拡大しています。そこで今回は新たな海外販路としても注目されている「台湾」からの訪日旅行客の最新動向について考察していきましょう。

## 訪日台湾人旅行客数の推移
ここでは実際にどのくらいの台湾人が日本を訪れているか2024年1〜6月とコロナ前の2019年1〜6月を比較していきます。2024年1~6月に日本を訪れた台湾人旅行客はいずれの月も2019年を上回り、半年間で約297万人もの方々が日本を訪れました。なんと台湾の全人口（約2,360万人）の約13％（およそ8人に1人）が日本を訪れていることになります。

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

（データ参考元）
日本政府観光局 国籍/月別 訪日外客数 （2003年 ~ 2024年）

## 訪日台湾人の日本国内消費額
次に日本を訪れた台湾人の日本国内消費について見ていきましょう。観光庁が発表している最新（2024年7月19日現在）のデータによると2024年4-6月期の訪日台湾人の日本国内消費額は2,639億円でした。これはコロナ前の同時期（2019年4-6月期）の1,414億円に対して2倍近く増加しています。

また下の図から台湾からお越しの観光・レジャー目的の一般客1人1泊あたりの旅行支出は約35,000円と大国アメリカからの旅行客の支出に匹敵する金額となっており、買物代ではアメリカ人の2倍以上の金額を消費している事が分かります。

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

（参考）
国土交通省 観光庁 【インバウンド消費動向調査】
https://www.mlit.go.jp/kankocho/content/001754885.pdf

## 台湾人が日本で買いたいものとは？
2024年1月にジーリーメディアグループ社が実施した台湾に住む「樂吃購（ラーチーゴー）！日本」ユーザー向けのアンケート結果によると次回訪日時に購入したい物の1位はお菓子（83.1%）、2位は食品（75.0%）と日本の食への興味関心が伺えます。

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

また日本で買いたい食品・お菓子の調査結果では1位「ニューヨークパーフェクトチーズ」、2位「じゃがポックル」、3位「明治チョコレート」と日本人にも馴染みのある人気スイーツがランクインする結果となりました。

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

（参考）
「ジーリーメディアグループ」2024年1月実施アンケート結果より
https://prtimes.jp/main/html/rd/p/000000031.000046085.html

## まとめ
今回は訪日台湾人旅行客の動向についてご紹介いたしました。予想以上に多くの台湾人旅行客が日本を訪れ、消費している結果に驚くばかりです。今後も台湾での日本人気はますます高まりそうな予感です。

770201_1_org_Gepaeck_Flughafen.jpg

急増中 訪日台湾人旅行客の最新動向

越境ECで何が売れているのか? というリサーチをすべく、まずは日本国内のお土産ランキングを調べてみました。
JAFがやっているこちらのサイトを参考にさせていただき、データ化していくつか分析をしてみました。
https://jafmate.jp/drive/sp_20230104.html

| 都道府県 | 商品名 | メーカー |
| ---- | ---- | ---- |
|福岡県|博多通りもん|明月堂|
|宮城県|萩の月|菓匠三全|
|三重県|赤福餅|赤福|
|神奈川県|昔ながらのシウマイ|崎陽軒|
|北海道|白い恋人|石屋製菓|
|北海道|マルセイバターサンド|六花亭|
|東京都|東京ばな奈「見ぃつけたっ」|東京ばな奈ワールド|
|山梨県|桔梗信玄餅|桔梗屋|
|静岡県|うなぎパイ|春華堂|
|京都府|阿闍梨餅|満月|
|福島県|ままどおる|三万石|
|岩手県|かもめの玉子|さいとう製菓|
|北海道|じゃがポックル|カルビー|
|大阪府|豚まん|551HORAI|
|福岡県|めんべい|山口油屋福太郎|
|熊本県|誉の陣太鼓|お菓子の香梅|
|神奈川県|鳩サブレー|豊島屋|
|熊本県|馬刺し|菅乃屋|
|神奈川県|クルミッ子|鎌倉紅谷|
|長崎県|カステラ|福砂屋|
|宮城県|ずんだ餅|玉澤総本店|
|北海道|ドゥーブルフロマージュ|小樽洋菓子舗ルタオ|
|鹿児島県|かすたどん|薩摩蒸氣屋|
|北海道|チョコレート・生チョコレート|ROYCE’|
|福岡県|梅ヶ枝餅うめがえもち|かさの家|
|千葉県|落花生・ゆで落花生Qなっつ|千葉ピーナッツ|
|長野県|雷鳥の里|田中屋|
|滋賀県|バームクーヘン|クラブハリエ|
|愛知県|ゆかり|坂角総本舗|
|福岡県|名菓ひよ子|ひよ子本舗吉野堂|
|大阪府|焼きたてチーズケーキ|りくろーおじさんの店|
|東京都|ごまたまご|銀座たまや|
|大分県|ザビエル|ざびえる本舗|
|山口県|外郎ういろう|御堀堂|
|秋田県|きりたんぽ|斎藤昭一商店|
|群馬県|ラスク|ガトーフェスタハラダ|
|長崎県|長崎角煮まんじゅう|岩崎本舗|
|北海道|ポテトチップチョコレート|ROYCE’|
|福島県|家伝ゆべし・家伝くるみゆべし|かんのや|
|福島県|薄皮饅頭まんじゅう|柏屋|
|秋田県|稲庭うどん|佐藤養助商店|
|岡山県|マスカットきびだんご|岡山夢菓匠敷島堂|
|愛媛県|母恵夢ポエム|母恵夢|
|福岡県|明太子|ふくや|
|東京都|芋ようかん|舟和本店|
|岡山県|大手まんぢゅう|大手饅頭伊部屋|
|長野県|野沢菜漬け|木の花屋|
|福井県|小鯛の笹漬け|かぎ孫|
|京都府|千枚漬|西利|
|北海道|松前漬け|金木水産食品|
|石川県|きんつば|中田屋|
|千葉県|ぴーなっつ最中|なごみの米屋|
|静岡県|干物あじ・金目鯛|小木曽商店|
|兵庫県|神戸プリン|トーラク|
|兵庫県|神戸魔法の壺プリン|神戸フランツ|
|北海道|チーズオムレット|スナッフルス|
|宮城県|かまぼこ|白謙かまぼこ店|
|東京都|N.Y.キャラメルサンド|N.Y.C.SAND|
|北海道|三方六|柳月|
|北海道|チョコレート菓子(ストロベリーチョコホワイト他)|六花亭|
|岐阜県|栗きんとん|川上屋|
|神奈川県|ハーバー|ありあけ|
|東京都|東京名菓ひよ子|東京ひよ子|
|佐賀県|小城羊羹|村岡総本舗|
|広島県|桐葉菓|やまだ屋|
|東京都|カステラ|文明堂|
|北海道|ほっけ干物|佐藤水産|
|福岡県|もつ鍋|田しゅう|
|青森県|りんごパイ気になるリンゴ|ラグノオ|
|宮城県|喜久福|喜久水庵|
|愛媛県|霧の森大福|霧の森菓子工房|
|京都府|茶の菓|マールブランシュ|
|岩手県|海宝漬|中村家|
|長野県|栗鹿ノ子|小布施堂|
|富山県|しろえび紀行|ささら屋|
|鹿児島県|唐芋レアケーキ・ラブリー|フェスティバロ|
|広島県|もみじ饅頭|にしき堂|
|佐賀県|さが錦|村岡屋|
|東京都|シュガーバターサンドの木|シュガーバターの木|
|福岡県|博多の女|博多菓子工房二鶴堂|
|群馬県|焼きまんじゅう|田中屋製菓|
|鹿児島県|かるかん|薩摩蒸氣屋|
|宮城県|白松がモナカ|白松がモナカ本舗|
|静岡県|安倍川餅|石部屋|
|石川県|かぶら寿し|四十萬谷本舗|
|静岡県|わさび・わさび漬け|田丸屋本店|
|香川県|観音寺|白栄堂|
|静岡県|こっこ|こっこ庵|
|三重県|なが餅|なが餅笹井屋|
|広島県|はっさく大福|はっさく屋|
|岩手県|ごま摺り団子|松栄堂|
|福岡県|筑紫もち|如水庵|
|三重県|伊勢うどん|みなみ製麺|
|長崎県|九十九島せんぺい|九十九せんぺい本舗|
|鹿児島県|軽羹かるかん|明石屋|
|北海道|赤いサイロ|清月|
|福岡県|梅の実ひじき|えとや|
|山口県|豆子郎|豆子郎|
|青森県|つがる漬|鎌田屋商店|
|北海道|わかさいも|わかさいも本舗|
|鳥取県|因幡の白うさぎ|寿製菓|
|静岡県|治一郎のバウムクーヘン|治一郎|
|茨城県|焼き芋|蔵出し焼き芋かいつか|
|和歌山県|かげろう|福菱|
|北海道|ハスカップジュエリー|もりもと|
|岐阜県|栗きんとん|すや|
|福島県|エキソンパイ|三万石|
|京都府|京ばあむ|美十|
|大阪府|堂島ロール|パティスリーモンシェール|
|佐賀県|丸ぼうろ・花ぼうろ|北島|
|富山県|氷見うどん|梅津屋|
|広島県|川通り餅|亀屋|
|佐賀県|松露饅頭|大原老舗|
|福岡県|なんばん往来|さかえ屋|


都道府県ごとに登場件数を調べると以下のようになりました。
なんとなく想像はついていましたが北海道はやはり強いですね。個人的には東京が3位というのが驚きでした。
また、沖縄がゼロというのも意外でした。

| 都道府県 | 件数 |
| ---- | ---- |
|北海道|14|
|福岡県|10|
|東京都|7|
|静岡県|6|
|宮城県|5|
|神奈川県|4|
|京都府|4|
|福島県|4|
|鹿児島県|4|
|佐賀県|4|
|広島県|4|
|三重県|3|
|岩手県|3|
|大阪府|3|
|長崎県|3|
|長野県|3|
|熊本県|2|
|千葉県|2|
|山口県|2|
|秋田県|2|
|群馬県|2|
|岡山県|2|
|愛媛県|2|
|石川県|2|
|兵庫県|2|
|岐阜県|2|
|青森県|2|
|富山県|2|
|山梨県|1|
|滋賀県|1|
|愛知県|1|
|大分県|1|
|福井県|1|
|香川県|1|
|鳥取県|1|
|茨城県|1|
|和歌山県|1|

次にカテゴリを集計してみました。
甘いお菓子: 甘
しょっぱいお菓子: しょ
お菓子ではない食べ物: 飯
という3つに分類しました。
圧倒的に甘いお菓子が人気でした。
個人的にはしょっぱいお菓子より飯系のほうが3倍以上人気なんだというのは意外でした。

| 分類 | 件数 |
| ---- | ---- |
|甘|86|
|飯|22|
|しょ|6|


今回は日本国内での人気順でしたが、これをもとにそれぞれ海外でどれだけ人気なのかという集計をしていきたいと思います

日本国内でのお土産ランキング

## はじめに

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

cloud-run.png

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

## 台湾の自動車市場概況

台湾の自動車市場は、経済成長と都市化の進展に伴い着実に拡大しています。2023年の新車販売台数は約45万台で、トヨタ、ホンダ、日産などの日系ブランドが人気を誇っています。また、近年は電気自動車（EV）への関心が高まっており、テスラやローカルブランドのLUXGENなどが人気になってきています。


## 台湾におけるバイクと車の保有率

台湾は、バイク大国として知られています。2023年の統計によると、台湾の人口約2,300万人に対し、バイクの登録台数は約1,400万台で、人口100人当たり約61台のバイクが存在します。これは世界でも有数の高い保有率です。
一方、自動車の保有率も着実に上昇しています。2023年の自動車登録台数は約850万台で、人口100人当たり約37台となっています。都市部では駐車場の不足や渋滞の問題がありますが、郊外では自動車の需要が高まっています。

**バイク保有率：　61%**

**自動車保有率：　37%**



## 台湾におけるカー用品市場の特徴

台湾のカー用品市場は、以下のような特徴があります。

- DIY文化：台湾では自動車やバイクのメンテナンスを自分で行う文化が根付いており、部品や工具の需要が高い。
- カスタマイズへの関心：外装パーツやオーディオ機器など、車両をカスタマイズするための製品が人気。
- 安全性重視：ドライブレコーダーやタイヤなど、安全に関連する製品の需要が増加傾向。
- テクノロジー志向：スマートフォン連携機能や先進運転支援システム（ADAS）関連製品への関心が高い。
 ![](https://cont.sterfield.co.jp/uploads/_a85c02ba15.jpg) 

## 台湾消費者の購買行動と嗜好

台湾の消費者は以下のような特徴があるとされています。

- 品質重視：日本製品を中心に、高品質な海外ブランドへの信頼が厚い。
- 価格感応度：品質を重視しつつも、価格にも敏感で、お得感を求める傾向がある。
- レビュー重視：購入前に他のユーザーのレビューや評価を詳細にチェックする。
- SNS影響：インスタグラムやFacebookなどのSNSでの情報や口コミが購買決定に大きな影響を与える。
- モバイルショッピング：スマートフォンを使ったモバイルショッピングが一般的。


## 今後の展望

台湾向けカー用品市場は、以下の要因により今後も成長が期待されます。

- EV市場の拡大に伴う新たなカー用品需要の創出
- テクノロジーの進化による新製品カテゴリーの登場（例：AI搭載のADASシステム）
- 環境意識の高まりによるエコフレンドリーな製品への需要増加
- 高齢化社会に対応した安全性や快適性を重視した製品の需要
- 5G技術の普及によるコネクテッドカー関連製品の市場拡大

結論として、台湾向けカー用品の越境EC市場は、課題を克服しつつ、現地消費者のニーズに合わせた戦略を展開することで、大きな成長ポテンシャルを秘めています。品質、価格、サービスのバランスを取りながら、デジタルマーケティングを効果的に活用することが、この市場で成功するための鍵となるでしょう。


カー用品 eye catch.png

台湾向けカー用品市場レポート

## はじめに
当社では現在、日本の革製品とくにお財布を取り扱うメーカーさまがクライアントとして複数います。
台湾への展開支援をしています。

台湾は、現金からデジタル決済への移行が進む中で、独自のお財布文化を築いています。ここでは、台湾におけるお財布事情とその変化について探ってみましょう。

### 1.現金の使い方と進化
 ![](https://cont.sterfield.co.jp/uploads/Firefly_TWD_6231241157.jpg) 
台湾では、現金は依然として重要な支払い手段です。地元の市場や小さな店舗では、現金が主流であることが多いです。台湾ドル（TWD）は、紙幣と硬貨の両方で流通しており、特に小額の取引には現金が使われています。現金に対する需要は根強く、財布には十分な収納スペースが求められています。

### 2.デジタル決済の普及
 ![](https://cont.sterfield.co.jp/uploads/Firefly_69509_5a8f2957d8.jpg) 
近年、台湾でもデジタル決済が急速に普及しています。特にスマートフォンを使ったモバイル決済が人気です。台湾では、LINE PayやJKoPay、Apple Payなどのサービスが広く利用されており、支払いが簡単かつ迅速に行えるようになっています。これにより、現金を持ち歩く必要が減り、多くの人がスマートフォン一つで決済を済ませています。

### 3.QRコード決済の盛り上がり
 ![](https://cont.sterfield.co.jp/uploads/Firefly_QR_Easy_Card_IC_QR_95efa8d8e2.jpg) 
台湾では、QRコードを用いた決済も非常に一般的です。特に「悠遊カード（EasyCard）」や「ICカード」など、公共交通機関で使用するカードがQRコード決済に対応しており、これを利用して買い物や公共交通機関の利用がスムーズに行えます。QRコード決済は、店舗やオンラインでの支払いにおいても便利な方法として広まっています。


### 4.高級財布とカスタマイズ
 ![](https://cont.sterfield.co.jp/uploads/Firefly_20061_e6915108cc.jpg) 
台湾では、財布のデザインや素材に対するこだわりも見られます。高級ブランドやカスタムメイドの財布が人気で、特に台湾の若者やビジネスマンの間では、ファッション性や品質に優れた財布が好まれています。また、パーソナライズされた財布やオーダーメイドの製品も需要があります。

### 5.地域特有の財布文化
 ![](https://cont.sterfield.co.jp/uploads/Firefly_858141d8f4.jpg) 
台湾の財布文化には、地域特有の特徴も見られます。例えば、台湾の伝統的なデザインやシンボルをあしらった財布が人気で、観光客にもお土産として人気があります。また、台湾の伝統的な財布は、色やデザインにおいて縁起を担ぐ要素が含まれていることが多いです。


## まとめ
台湾のお財布事情は、現金からデジタル決済へのスムーズな移行を遂げており、財布自体も多機能でスタイリッシュなものが増えています。現代の台湾では、伝統と革新が融合したお財布文化が形成されており、地域に根ざした特徴とともに、デジタル社会への適応が進んでいます。




Firefly 進化するお財布 74290.jpg

台湾のお財布事情：現金からデジタルへ

## はじめに

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>

20240719_recoil-to-redux.png

Recoil から Redux へ移行するときにやったこと

## はじめに
日本と地理的にも近く、特に親日と言われている国、台湾。弊社でもグローバルECなどで、ご支援することが圧倒的に多い国です。

日本から台湾にどのような食品・農産物が輸出されてるのか改めて調べてみました。

## 輸出統計を見てみると？
では実際に統計を見てみましょう。
 ![](https://cont.sterfield.co.jp/uploads/80d592c4dda5801af32832702a3d9b38_6ce0069322.png) 
[【画像引用】台湾への農林水産物・食品の輸出に関するレポート](https://www.koryu.or.jp/Portals/0/taipei/2024/0319/%E5%8F%B0%E6%B9%BE%E3%81%B8%E3%81%AE%E8%BE%B2%E6%9E%97%E6%B0%B4%E7%94%A3%E7%89%A9%E3%83%BB%E9%A3%9F%E5%93%81%E3%81%AE%E8%BC%B8%E5%87%BA%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88.pdf)

全体を見てみると、りんご、アルコール飲料、ホタテ貝が輸出金額として多いことが分かりました。

### 輸出量トップのりんごについて
 ![](https://cont.sterfield.co.jp/uploads/HVREYHL_4_RBNLHHLHWUHUPCVKQA_9e6e3a8b00.jpg) 
りんごは、ここ10年でトップ4に常に入っており、金額が伸び続けていることが分かります。

りんごといえば青森県ですが、青森県で年間に生産されるりんご50万トンのうち、4万トンが海外に輸出され、その70%は台湾向けとされています。    

りんごは贈答用として好まれるほか、スーパーにも並ぶそうです。

## ホタテ貝について
ホタテ貝については、年々輸出金額を伸ばし、順位を上げていることが分かります。
JETROとしてもホタテ貝は輸出の重点品目にしており、積極的なプロモーションが行われています。

台湾の日本食料理店の協力を得て、ホタテの特別メニューを現地の人気インフルエンサーが取材、発信するなどの取り組みがなされています。

【参考】[JETRO 日本産水産物プロモーションを台湾にて開始](https://www.jetro.go.jp/news/releases/2023/05803fd6c121b6e9.html)

 ![](https://cont.sterfield.co.jp/uploads/f6102d8f52dbd95db04e2316db2be270_8ba76bb64b.jpg) 
[キャンペーンサイト](https://japan-food.jetro.go.jp/seafood/tw/index.html)


### そのほかの項目について
アルコール飲料についても安定して輸出金額が伸びており、特に2021年から22年で1.4倍もの金額になっています。

台湾人は晩酌の習慣がないと言われており、レストラン向けのビールやウイスキーが輸出品目として多いようです。確かに台湾では日本料理店以外では日本酒を見かけることはあまりない印象です。

牛肉に関しては、2015年に輸出が解禁されました。その後、4位以内にランクインし続けています。
台湾最大級の食品展示会であるFood Taipeiでも和牛を取り扱う日本の業者が多く出展をしており、高い需要があることが分かります。

## まとめ
台湾向けの輸出金額を改めて調べ見ましたが、りんごが1番金額が多いとは予想外でしたが、確かに熱帯気候の台湾ではりんごの栽培は難しく、輸出量が多いのも頷けるなと感じました。



22754745_s.jpg

日本から台湾にどのような食品・農産物が輸出されてる？

## はじめに
現在、円安が続いており、多くの台湾人が日本を訪れて日本の商品を購入する機会が増えています。特に日本の商品はその高品質とユニークな特性から人気があります。今回は、台湾人の視点で台湾人に特に人気ある日本の化粧品を紹介します。さらに、これらの商品がなぜ台湾人に人気があるのか、そして今後のEC販売戦略についても考察します。

## TOP5ランキング
1. SK-II フェイシャルトリートメントエッセンス
2. Hada Labo 極潤ヒアルロン酸ローション
3. DHC ディープクレンジングオイル
4. 資生堂 ANESSA パーフェクトUVサンスクリーン
5. ビオレ UVアクアリッチウォータリーエッセンス

※参考：https://tw.trip.com/blog/japan-souvenir-cosmetic/

## どうして日本商品は台湾人に人気あるの！？
 ![](https://cont.sterfield.co.jp/uploads/25276830_b0634406ce.jpg) 

### ①高品質と安心感
日本の商品は、その高品質と厳格な品質管理によって、消費者に安心感を与えます。台湾人は、この信頼性を重視し、日本の商品を好んで購入します。

### ②ユニークな製品デザインと機能
日本の商品は、そのユニークなデザインと実用的な機能で知られています。これにより、消費者は自分のライフスタイルに合った製品を選ぶことができます。

### ③ブランドの信頼性
多くの日本ブランドは、長年にわたって高い評価を受けており、その信頼性が購入動機の一つとなっています。特に、SK-IIや資生堂、DHCなどのブランドは、世界中で広く認知されています。

### ④手頃な価格
円安の影響もあり、日本の商品が以前よりもっと手頃な価格で購入できるようになっています。これにより、台湾人はより多くの商品を手に入れることができます。

## 今後EC販売の商品選定はどうする！？
 ![](https://cont.sterfield.co.jp/uploads/a7957731_32b6_4cf0_932f_6935a81d7a95_dccd229bfc.jpg) 

### ①オンライン販売の拡大
日本の商品は、ECサイトを通じて国際的に販売されることが増えています。これにより、台湾人は日本を訪れることなく、自宅でお気に入りの商品を購入することができます。

### ②ローカライズとプロモーション
EC販売においては、各国の消費者のニーズに合わせたローカライズが重要です。台湾市場においては、プロモーション活動や口コミマーケティングが効果的です。特に、インフルエンサーとの協力や、消費者のレビューを活用したマーケティングが成功の鍵となります。

### ③新商品開発と既存商品の強化
既存の人気商品をさらに強化するためのリニューアルや新商品開発も重要です。これにより、常に新しい魅力を消費者に提供し続けることができます。

## まとめ
現在の円安により、台湾人は日本を訪れて多くの商品を購入する機会が増えています。特に、日本の化粧品や美容製品はその高品質と独特の特徴から非常に人気があります。

「高品質、ユニークなデザイン、ブランドの信頼性、手頃な価格」が、台湾人にとって日本の商品を選ぶ理由です。これらの要因を活かし、今後のEC販売戦略を展開することで、より多くの消費者に日本の優れた商品を届けることができるでしょう。


S__7045160.jpg

円安の影響で台湾人の日本商品購入〜人気化粧品TOP5

# はじめに
近年、チームワークや情報共有の重要性が高まる中で、さまざまなツールやサービスが活用されています。その中でも、GoogleスプレッドシートとGoogle Chatは、多くの企業や組織で利用されている定番ツールです。
この記事では、Google Apps Scriptを使用して、Google スプレッドシートで特定の操作が行われた際にGoogle Chatへ自動で通知を送る方法について、その**手順**と**応用例**を紹介します。

### 手順概要
1. Google Chat Webhook URLの取得
2. Google Apps Scriptの作成
3. Google Apps Scriptのトリガー設定
4. Google Chatへの通知送信の確認

#### 1. Google Chat Webhook URLの取得
最初に、Google Chatに通知を送信するためのWebhook URLを取得します。

1. Google Chatを開き、通知を送りたいチャットルームを選択します。
2. チャットルーム名をクリックし、「アプリと統合」を選択します。
3. 「+Webhookを追加」をクリックし、名前を入力して「保存」をクリックします。
4. 表示されたWebhook URLをコピーします。このURLは後でスクリプト(手順2)に使用します。

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

**補足**

・Webhook URLは、Chatルームごとに個別に発行されます。

・複数のWebhook URLを作成し、異なるChatルームへ通知することも可能です。


#### 2. Google Apps Scriptの作成
次に、Google スプレッドシートに関連付けるGoogle Apps Scriptを作成します。

1. 対象のGoogle スプレッドシートを用意して開きます。
2. メニューバーから「拡張機能」をクリックし、「Apps Script」を選択します。
3. スクリプトエディタが開きます。新しいプロジェクトが作成され、デフォルトのコードエディタが表示されます。
4. 以下のコードをエディタに貼り付け、Webhook URLを先ほどコピーしたURLに置き換えます。

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

```
function sendToGoogleChat(message) {
  var url = "YOUR_WEBHOOK_URL";  // ここをWebhook URLに置き換えます

  var payload = JSON.stringify({ "text": message });
  
  var options = {
    "method": "POST",
    "contentType": "application/json",
    "payload": payload
  };

  UrlFetchApp.fetch(url, options);
}

function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
このスクリプトは、スプレッドシートのセルが編集された際に、その情報をGoogle Chatに送信します。

**ポイント**

・YOUR_WEBHOOK_URL を、1で取得したWebhook URLに置き換えてください。

・必要に応じて、messageの内容を編集してください。


#### 3. Google Apps Scriptのトリガー設定
1. スクリプトを保存し、トリガーを設定してスクリプトが自動的に実行されるようにします。
2. スクリプトエディタの時計アイコン（「トリガー」）をクリックします。
3. 「トリガーを追加」をクリックし、「notifyOnEdit」を選択します。
4. イベントの種類を「スプレッドシートから」に設定し、「編集時」を選択します。
5. 保存してトリガーを有効にします。(認証ダイアログが出てくる場合は、認証を行います。)

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

#### 4. Google Chatへの通知送信の確認
設定が完了したら、実際にGoogle スプレッドシートでセルを編集してみてください。編集が行われると、指定したチャットルームに通知が送信されるはずです。

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

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


### 応用例
#### 応用例1: 特定のシートやセル範囲でのみ通知を送る
特定のシートやセル範囲に変更があった場合のみ通知を送るようにスクリプトをカスタマイズできます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  
  // シート名が「Sheet1」でない場合は通知を送らない
  if (sheet.getName() != "Sheet1") {
    return;
  }

  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、「Sheet1」でのみ変更があった場合に通知が送られます。


#### 応用例2: 通知内容の詳細化
通知内容を詳細にカスタマイズすることも可能です。例えば、変更があったセルの前の値と新しい値の両方を通知に含めることができます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var oldValue = e.oldValue;  // 前の値
  var editedValue = range.getValue();  // 新しい値
  var message = "Cell " + range.getA1Notation() + " was edited. Old value: " + oldValue + ", New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、編集前と編集後の値を通知に含めることができます。


# まとめ
Google Apps ScriptとWebhookを使って、スプレッドシートの操作をGoogle Chatへ自動通知する方法をご紹介しました。これにより、チームメンバーは**リアルタイムで情報共有**でき、**タスク管理**や作業のトラッキングが**効率化**されます。ぜひ、活用してチームワークを強化してください。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2024/11/06

2024/10/30

2024/10/25

2024/10/11

2024/10/04

2024/09/19

2024/09/13

2024/08/30

2024/08/28

2024/08/23

2024/08/09

2024/08/02

2024/07/25

2024/07/24

2024/07/19

2024/06/28

2024/06/28

2024/06/27