## はじめに
処理水の問題などで、日中関係は、2023年9月現在決して良いと言えませんが、7月に日本の商品を売り込む大型販売施設がオープンしたというニュースを見つけました。いわゆるショールーミングストアです。

## 施設の概要
 ![](/uploads/cb52c7206e3a8ef0cfcaba048ca828aa_5b6acdb621.jpg) 
> 中国東北部の遼寧省大連市で19日、電子商取引（EC）と連動して日本商品を売り込む大型販売施設が開業した。地元新興企業の大連万衆雲倉科技孵化園が運営し、山口フィナンシャルグループ（FG）などと組んで商品を輸入する。中国で越境EC向けの常設施設は珍しい。

山口フィナンシャルグループは、山口・広島・北九州を中心に展開する銀行です。大連万衆雲倉科技孵化園の親会社は建設業が主力で、保税倉庫、通関、物流、サイトの運営など、越境ECに関わる幅広い領域を新規事業として進めているようです。


## 日本商品の調達方法
記事では、日本商品の調達方法についても書かれていました。
大企業の商品については、万衆雲倉が自社で調達するようです。
万衆雲倉は、2019年すでにこの地区内に保税倉庫を建設しており、あくまでも私の推測ですが、すでに日本企業ともパイプがあるのではないでしょうか。

また、中小企業の商品は、山口FGや中国銀行などが企業を発掘するそうです。中国に中小企業単独で進出するのは難しいので、普段取引をしている銀行を通じて、海外展開できるのは、面白い取り組みと感じました。

## ショールーミングストアについて
ECのデメリットは言わずもがな、商品を手に取ったり、触ったり、食品なら試食したりできないことです。越境ECでは単価も高くなりがちですから、文字情報と写真だけで、購入の判断をしなければなりません。
そういったデメリットを解消しつつ、越境ECを活気づける一つの案がショールーミングストアだと思います。
日経新聞の記事には、施設内の写真も掲載されていました。1枚だけなので限られた情報ではあるのですが、お酒や洗剤が展示されていることがわかります。
このような商材の場合、試飲できるようにしたり、匂いを嗅げるようにできてこそ、ショールーミングストアの真価が発揮されると思います。この施設が実施しているかどうかまでは、分かりません。    
        
## まとめ
ショールーミングストアは越境ECを身近にするよい取り組みと思いますので、この流れが中国のみならず、さらに広まっていくことを願います。

### 参考
日本経済新聞 
`https://www.nikkei.com/article/DGXZQOGM192A30Z10C23A7000000/`




large_volc-xia-nrPaNONc_0k-unsplash.jpg

medium_volc-xia-nrPaNONc_0k-unsplash.jpg

small_volc-xia-nrPaNONc_0k-unsplash.jpg

thumbnail_volc-xia-nrPaNONc_0k-unsplash.jpg

volc-xia-nrPaNONc_0k-unsplash.jpg

中国大連に登場　越境ECショールーミングストア

## はじめに
越境EC物流最大の味方、国際eパケットが2023年10月1日より廃止されることが決定しました。

これまで国際eパケットを利用してきた事業者様にとっては、輸送方法の切り替えをしなくてはいけません。

今回は、国際eパケットの代わりになりそうな日本郵便の輸送方法とその金額を簡単にまとめてみました。

## 小形包装物（Small Packet）
まず、国際eパケットの代わりに最適なのは「小型包装物」です。

サイズや重量の規定（2kgまで）等が国際eパケットと全く同じで、料金体系も、100gから2000gまで100g刻みなところも同じです。

異なるのは、地帯区分の分け方で、国際eパケットだと第4地帯までしかなかったのが、小型包装物は第5地帯まであります。

こちらでは、中国・台湾・韓国向けの第1地帯（国際eパケットの場合、他のアジア諸国も可）と、アメリカ向けの第4地帯を比較してみます。

※実際の料金表は、100gごとに料金体系が変わりますが、こちらでは一部のみの記載とさせていただきました。

<style>
table {
   table-layout: fixed;
   width: 100%;
}
</style>
<table>
<tbody>
<tr>
<th>重量</th>
<th>eパケット（第1地帯）</th>
<th>小型包装物（第1地帯）</th>
<th>eパケット（第4地帯）</th>
<th>小型包装物（第4地帯）</th>
</tr>
<tr>
<td>100g</td>
<td>690円</td>
<td>350円＋410円</td>
<td>1150円</td>
<td>830円＋410円</td>
</tr>
<tr>
<td>300g</td>
<td>870円</td>
<td>550円＋410円</td>
<td>1410円</td>
<td>1250円＋410円</td>
</tr>
<tr>
<td>500g</td>
<td>1050円</td>
<td>750円＋410円</td>
<td>1670円</td>
<td>1670円＋410円</td>
</tr>
<tr>
<td>1000g</td>
<td>1500円</td>
<td>1250円＋410円</td>
<td>2320円</td>
<td>2720円＋410円</td>
</tr>
<tr>
<td>1500g</td>
<td>1950円</td>
<td>1750円＋410円</td>
<td>2970円</td>
<td>3770円＋410円</td>
</tr>
<tr>
<td>2000g</td>
<td>2250円</td>
<td>2400円＋410円</td>
<td>3620円</td>
<td>4820円＋410円</td>
</tr>
</tbody>
</table>

小型包装物の金額で、+410円とされているのは、書留料金です。

国際eパケットにも書留料金が含まれていたので、輸送料だけを考えると、値上げどころか値下げですが、書留量も含むと、全体的に数百円程度値上がりしたことが分かります。

## EMS
次に検討されるのは、EMSでしょう。
国際配送で最も利用されているのがEMSかもしれません。
小型包装物や国際eパケットと違い、大きな荷物も送れる＆リードタイムも短い、というのが特徴的です。

<table>
<tbody>
<tr>
<th>重量</th>
<th>eパケット（第1地帯）</th>
<th>EMS（第1地帯）</th>
<th>eパケット（第4地帯）</th>
<th>EMS（第4地帯）</th>
</tr>
<tr>
<td>100g</td>
<td>690円</td>
<td>-</td>
<td>1150円</td>
<td>-</td>
</tr>
<tr>
<td>300g</td>
<td>870円</td>
<td>-</td>
<td>1410円</td>
<td>-</td>
</tr>
<tr>
<td>500g</td>
<td>1050円</td>
<td>1450円</td>
<td>1670円</td>
<td>3900円</td>
</tr>
<tr>
<td>1000g</td>
<td>1500円</td>
<td>2200円</td>
<td>2320円</td>
<td>5300円</td>
</tr>
<tr>
<td>1500g</td>
<td>1950円</td>
<td>2800円</td>
<td>2970円</td>
<td>6600円</td>
</tr>
<tr>
<td>2000g</td>
<td>2250円</td>
<td>3400円</td>
<td>3620円</td>
<td>7900円</td>
</tr>
</tbody>
</table>

ただ、国際eパケットからEMSに切り替えを検討する場合は、場所や重さによっては2倍近い金額の値上がりになる事が分かりました。

これまでリードタイムで受取人様からのクレームがない、重たい・大きい荷物ではない、という場合には、小型包装物の方が無難でしょう。

## まとめ
今回は、国際eパケット廃止に伴い、類似サービスのコスト比較をしてみました。

越境ECの難点が「輸送費用」。
毎年のように輸送費が値上がりしているので、いつになったら昔のように戻るんだろう・・と願うばかりです。

### こちらの料金表を参考に作成しました
https://www.post.japanpost.jp/int/download/epacket-charges.pdf
https://www.post.japanpost.jp/int/2023fee_revision_kokusai/pdf/charge04.pdf
https://www.post.japanpost.jp/int/charge/list/ems_all.html

※こちらでご紹介した料金表は、2023年9月時点の情報です。

実際に輸送される際には、日本郵便が発表している正しい料金表をご参照ください。

medium_h1.jpg

small_h1.jpg

thumbnail_h1.jpg

h1.jpg

【国際eパケット廃止】<br>代わりになるサービスと料金の比較！

<h2>はじめに</h2>
<p>日本でいうところの「zozotown」にあたる、ドイツ発最大手オンラインファッションECサイト「ザランド（Zalando）」。このZalandoのサスティナブル消費に対する取り組みには様々な形があります。</p>

[前回](https://sterfield.co.jp/blog/zalando-1-sustainability-platform/)はその取り組みの1つである、「サステナビリティプラットフォーム」を紹介しましたが、今回は新たな支払システム「SNBL」を紹介したいと思います。

<h2>BNPL 対 SNBL</h2>
最近よく見かける似た名前のサービスが「BNPL（Buy now pay later）」。顧客が先に商品を受け取り、後で支払うというこの、近年各国の買い物客の間で非常に人気があります。日本のECでもよく見かけるようになりました。
  
SNBL（Save now buy later）、つまり「今は貯めて後で買う」というこのサービスはその逆です。<br>
顧客は貯蓄目標を設定し、その目標を達成するために毎月お金を積み立てます。目標を達成すると、そのお金を使えるようなるだけでなく、Zalandoで使える「ボーナス（バウチャー）」も受け取ることができます。
 ![](/uploads/2023_09_08_180226_95f1bb532f.png) 

※写真は公式サイトのキャプチャ

もし購入したくない場合は、ボーナスなしでお金を引き出すことができます。<br>
また、途中で計画を変更することはできませんが、キャンセルすることはできるので、途中でお金が必要になったら、すぐに引き出せるので安心ですね。

## SNBLはサスティナブル？

購入者に「買わせない」期間を設けるといのは、販売者側からすると異質なサービスに見えるかもしれません。
しかし、世界的に借金やクレジットカード破産、短期ローンが増加する中で、貯蓄を促し、健全な購買活動を生み出すことは、持続可能な社会を実現するの一役買うと言えるではないでしょうか。

また、持続的に購買活動ができる消費者を育てることは、継続的に購入者数を維持・増加させることであり、長期的には売上増加につながっていきます。

実際、目標達成後に買い物をした額は以前より増加している購入者も少なくないのだとか。
 ![](/uploads/2023_09_08_174006_62c32be17f.png) 
※写真は公式サイトを機械翻訳したもののキャプチャ

## SNBLを提供するSavrrとは    
Savrrはドイツのスタートアップ企業です。まだ無名だったこの会社がSNBLを開発を終える前に、Zalandoは契約を結んだそうです。

Savrrは、消費者の金融行動にどのようにプラスの影響を与えることができるかを考え、消費者にもブランドにも利益を与えることを目指しています。

<h2>まとめ</h2>
ヨーロッパのEC業界においてZalandoが与えるインパクトは非常に大きいものです。そのような会社が牽引することで、ヨーロッパのファッションECは持続可能な社会に向けて進んでいくことでしょう。


参考：https://ecommercenews.eu/zalando-pioneers-with-save-now-pay-later/　<br>
https://www.savrr.de/zalando


medium_スクリーンショット 2023-09-08 180202.png

small_スクリーンショット 2023-09-08 180202.png

thumbnail_スクリーンショット 2023-09-08 180202.png

スクリーンショット 2023-09-08 180202.png

健全な購買活動を育てるZalandoの取り組み(2) SNBL導入

## はじめに

本記事では、これから TDD の導入を考えている方や、TDD を導入している案件に携わる方に向けて、私が実際に TDD をやってみて感じたメリット・デメリットをまとめたいと思います。

## テストの重要性

テストは、ソフトウェアの品質向上や開発効率化に欠かせないものになってきています。テストを効果的に活用することで、ソフトウェアの品質や信頼性を向上させ、開発コストを削減することができます。

## TDD(テスト駆動開発)とは

テスト駆動開発（Test-Driven Development、TDD）は、ソフトウェア開発の手法の一つで、テストの作成から始めて、その後にコードを実装するというサイクルを繰り返すことで、品質の高いソフトウェアを開発する手法です。
手動テストするのではなく、[Jest](https://jestjs.io/ja/)や[JUnit](https://junit.org/junit5/)などのテストフレームワークを使用します。

一般的な開発では、下図のように設計とテスト作成は分けて行うと思います。

 ![image](/uploads/20230908_2_b6073f3e4b.png) 

TDD では、最初にテストを作成します。
テスト作成 ≒ 設計のようなイメージです。

 ![image](/uploads/20230908_3_11d5709f45.png) 

## TDD の基本サイクル

TDD は「レッド」「グリーン」「リファクタリング」と呼ばれる工程で進められます。各工程で何をするのか、説明していきます。

### レッド

要件から、実装する機能のテストを作成します。この段階では実装をしていないので、テストはすべて失敗します。
テストツールを使っているときにテストが失敗すると赤色でエラー表示されるため、この工程はレッドと呼ばれます。

### グリーン　

レッドで作成したテストをもとに、実装を行います。
ここで重要なのは、完璧なコードを書くことではなく、先に設定したテスト条件を全てクリアさせるだけの「最小限」のコードを書くということです。
テストツールを使っているときにテストが通ると緑色でエラー表示されるため、この工程はグリーンと呼ばれます。

### リファクタリング

すべてのテストが通るようになったら、リファクタリングを行ってコードの可読性を高めます。
この工程は後回しになりがちですが、プログラムの規模が大きくなると大変になってしまうので、こまめにリファクタリングすることをお勧めします。

## TDD のメリット

TDD を実施すると、以下のようなメリットがあります。

### 安心して実装ができる

テスト条件を全てクリアさせるように実装することで、実装漏れやバグの発生を抑制できます。
また、何を実装すれば良いのかはテストを見ればすぐにわかるので、工数の削減が期待できます。

### 品質向上

テストが既にあることで、開発者がコードを変更する際にも、影響を受ける他の部分に対して問題がないかを確認できます。また、テストが十分にカバレッジされている場合、バグやエラーを早期に発見できるため、ソフトウェアの信頼性が向上します。

### ドキュメントとしての役割

テストコードはソフトウェアの仕様や振る舞いを示すドキュメントとして機能します。ソフトウェアの動作がテストによって明確になり、コードの理解が容易になります。
テストコードはソフトウェアの変更に伴って、常に最新の状態に保つ必要があります。そのため、テストコードはソフトウェアのバージョン管理システムに登録し、管理することが一般的です。

### リファクタリングのサポート

リファクタリングを行う前に、テストケースを実行して、リファクタリング後にもテストが通ることを確認することで、ソフトウェアの外部的な振る舞いを保てていることになるため、安全にリファクタリングを行うことができます。
また、リファクタリングで起きがちなデグレ(デグレード)やバグの発生を防止できます。

## TDD のデメリット

TDD は、ソフトウェアの品質向上や開発効率化に効果的な手法ですが、導入にはいくつかの課題があります。

### テストを作るのに時間(工数)がかかる

TDD は、テストコードを先に作成する必要があるため、開発プロセス全体において時間がかかることがあります。
ただし、長期的にはバグの減少や品質向上が見込めることから、開発全体で考えると時間の節約と考えることもできます。

### 熟練度と学習コスト

TDD は、初めて取り組む開発者にとっては学習コストがかかる場合があります。
効果的なテストを作成するためには、適切なテストケースを選択し、適切なカバレッジを持つことが必要です。
しかし、開発の初期段階に完璧なテストコードを書くのは難しいので、今思い浮かぶ機能の中でテストを作成し、仕様変更などのタイミングでより細かいテストを増やしていく方針で進めていました。

### テストの保守

ソフトウェアの変更に伴い、テストコードも頻繁に更新する必要があるため、テストの保守に工数がかかることがあります。
TDD を導入する際にはその負担をチームに理解してもらう必要があります。

## 課題の解決策

TDD の課題を解決するためには、以下のような対策が考えられます。

### テストコードの自動生成ツールを活用する

テストコードの自動生成ツールとは、ソフトウェアの設計や仕様を元に、テストコードを自動的に生成してくれるツールです。
例えば、テストフレームワークに[Jest](https://jestjs.io/ja/)を使用しているのであれば、[jest-test-gen](https://github.com/egm0121/jest-test-gen)などがあります。
テストコードの自動生成ツールを活用することで、テストコードの作成にかかる時間を短縮することができます。

### テストケースの標準化を図る

テストケースの標準化とは、テストケースの作成や評価に使用するルールや手法を定義することです。
テストケースの標準化をすることで、開発者の経験やスキルに依存することなくテストコードを作成できるため、テストコードの作成や保守の効率化を図ることができます。

### チームでのテスト文化を醸成する

チームでのテスト文化を醸成することで、テストの重要性や必要性を理解してもらい、テストへの協力を得やすくなります。

## まとめ

私は気になるところがあるとすぐにリファクタリングしたくなっちゃう性格なので、TDD にはとても助けられています。
TDD は、一見面倒な手法に思われるかもしれませんが、バグの早期発見や仕様の理解、コードの品質向上など、多くのメリットがあります。
メリットとデメリットを理解した上で、適切に活用していきましょう！

## 参考リンク

- [テスト駆動開発（TDD）とは？基本サイクルと運用時の注意点を解説！【ソフトウェア開発・テスト用語 】| Qbook](https://www.qbook.jp/column/713.html)
- [テスト駆動開発（TDD）入門](https://products.sint.co.jp/ober/blog/tdd)
- [テスト駆動開発（TDD）とは？目的やメリット・デメリット、やり方を解説 ｜ソフトウェアテストの SHIFT](https://service.shiftinc.jp/column/4654/)

medium_20230908_1.jpg

small_20230908_1.jpg

thumbnail_20230908_1.jpg

20230908_1.jpg

TDD(テスト駆動開発)について

<h2>はじめに</h2>
Shopeeを始める上で、事前に確認するべきことがいくつかあります。

1. 商品は販売できるか
2. 現地の類似商品に比べて、機能的な特徴や価格競争力がある（＝売れる見込みが少しだけでもあるか）
3. 輸送ができるか

などなど、かなり基本的な事が多いですが、越境ECを始めるとなると、沢山の事を考えないといけないので、意外と大切なことを見落としてしまう事も多いです。

今回は、その中でも配送、特にShopeeの独自配送サービスであるSLSについてまとめてみました。

<h2>SLSとは</h2>
Shopee Logistics Serviceの略で、Shopeeが海外顧客まで直接商品を安心安全に運んでくれるサービスの事を指します。
実際の物流業者名ではなく、サービスの総称をSLSと読んでいます。

<h2>SLS発送以外の違い・メリット</h2>
ちなみに、SLS以外の発送を、Other Logistics といいます。

<h3>国内配送だけで良い</h3>
SLSの一番のメリットは、日本国内にあるShopee倉庫に商品を送るだけで、顧客向けの配送も管理画面のステータス変更も、全て自動化してくれるという事です。

Shopeeの国内倉庫に商品が届き、後述のSLSラベルがスキャンされた段階で、Shipping（運送中）にステータスが変わる仕組みになっています。


<h3>関税のトラブルがなくなる</h3>
一般的な郵便で配送をすると、受取人（Shopeeで購入してくれたお客様）側に関税の請求がされてしまいます。

関税率の高い商品を販売しているショップさんにとっては、クレーム対策や事前の関税についての周知等、苦労されているでしょう。

SLSを利用すれば、Shopeeが立て替えてくれて、売上から相殺（マレーシア・フィリピン）だったり、事前に商品価格に上乗せ（シンガポール）したりすることで、購入者にShopeeの販売ページでの表示価格以上の請求がされないようになっています。


<h3>Shopeeの管理画面で貨物の追跡ができる</h3>
<img src="/uploads-archive/lc/2023/04/f5611327ef48879d9b73e31c08f6d466-300x269.png" alt="" width="300" height="269" class="aligncenter size-medium wp-image-11804" />

海外配送の場合、一般に荷物がどこまで届いているのか追跡できなかったり、できたとしても更新が遅かったりする場合があります。

SLSでは、Shopeeが荷物のステータスを細かく更新してくれるため、かなり正確に荷物の状況を把握できます。

また、不在で届けられなかった等、トラブルがあった際にも記録をしてくれているので、安心です


<h3>売上金のサイクルが早くなる</h3>
バイヤーが受け取りボタンを押すと、オーダー完了とみなされ、管理画面に売上が反映されます。
しかし、この受け取りボタンを押してくれるバイヤーは少なく、Shopee側で自動的にオーダー完了にしてもらうまで待たないといけません。

SLSの場合、配達が完了した時点で、貨物追跡ステータスが「Parcel has been delivered 」に更新されます。その後、3日後（Shopee Guarantee Period）には自動的にオーダー完了してくれます。

一方、Other Logisticsの場合は、EDD（Estimated Delivery Date）に加えて、台湾、タイどちらも7日間のShopee Guarantee Period が経たないと、オーダー完了にしてもらえません。

Shopeeの方で、配達した記録が残っているからこそ受け取られた注文の売上が早く入ってくる、というメリットがある、と言えるでしょう。


<h2>SLS発送の注意点・デメリット</h2>
良いことばかりのSLSですが、いくつかデメリットもあるので、共有します。

<h3>二重梱包が必須</h3>
SLS発送の注文は、各注文の梱包にラストワンマイルラベルを貼り付ける必要があります。加えて、それらの注文を１つにまとめて、日本国内のShopee倉庫に送らなければいけません。

Shopee専用のラベルの貼り付けに関しては、倉庫によっては対応できなかったり、別料金が発生する事があるでしょう。SLSが必須のシンガポール、マレーシア、フィリピン向けの販売を検討している人は、Shopeeを始める前にSLSの発送対応をどのようにするか、考える事がオススメです。


<h3>送料がダブルでかかる</h3>
国内倉庫への国内配送と、SLSの送料がかかります。
1回の発送で1注文しかない・・という状況だと、なかなか送料負担が大きくなってしまうので、たくさん売れるショップに早く育てて、1回の送料分を抑えられるようにしないといけません。

また、送料関連ではもう1つ注意すべきことがあります。

日本国内はサイズでの課金、国際配送は、一定のサイズ以下で重量課金です。
軽くて小さいものは、送料の面でかなり有利ですが、大きくて軽いもの、小さくて重いものなどは、国内・海外どちらかの配送料で少し悩むことになるかもしれません。


<h2>まとめ</h2>
ということで、本日はShopeeのSLSについてまとめてみました。

スターフィールドでは、Shopee運営にお困りの企業様向けに、Shopeeの支援サポートをさせていただいています。

一緒にShopeeで売り上げを上げて、アジア展開を目指していきたい企業様、お問い合わせお待ちしています！

large_arron-choi-kRK1Bne4xEw-unsplash-scaled.jpg

medium_arron-choi-kRK1Bne4xEw-unsplash-scaled.jpg

small_arron-choi-kRK1Bne4xEw-unsplash-scaled.jpg

thumbnail_arron-choi-kRK1Bne4xEw-unsplash-scaled.jpg

arron-choi-kRK1Bne4xEw-unsplash-scaled.jpg

【Shopee配送方法】<br>Shopee独自の配送サービス、SLSについてまとめてみた

<h2>はじめに</h2>
Xin chào（シンチャオ）！

ゴールデンウィークに初めてベトナムへ行きました。

ベトナム語って、アルファベット表記っぽいですが、見慣れない記号（こんなの⇒「ữ」や、こんなの⇒「ốc」）がいっぱいあって、その語源はなんなんだろう？と気になって調べてみました。
<h2>もともとは漢字を使っていた！</h2>
現在のベトナム語は、Xin chào（シンチャオ・意味：こんにちは）のようにアルファベット表記ですが、昔のベトナムは<strong>独自の言葉はあったものの、文字は存在しませんでした。</strong>

ベトナムの北部は紀元前111年から938年の約1,000年間、中国から属国のように支配されていました。この期間を「北属期」といいます。この間に中国語や漢字文化の強い影響を受けました。

938年に中国との闘いに勝利し、「北属期」から「独立期」になります。しかし独立後も<strong>しばらくの間、独自の文字は存在せず、公文書などは引き続き中国語を使っていました。</strong>
<h2>中国語をアレンジしたベトナム独自の文字の誕生</h2>
15世紀になると、ベトナム独自の文字を使用しようという動きが広がります。

そこで、中国語をアレンジしたベトナム独自の文字が生まれました。

その文字を<strong>「Chữ nôm（チュ ノム）」と言い、「漢越語」と言われる言葉です。</strong>

Chữは「字」、Nômは「ベトナム」という意味です。

<img class="aligncenter size-full wp-image-11864" src="/uploads-archive/lc/2023/05/FB_IMG_1473788779523.jpg" alt="" width="559" height="813" />

ベトナムの国旗のところにあるのが、チュ ノム（漢越語）で書かれた「漢字文化圏」という文字です。

<img class="aligncenter size-full wp-image-11865" src="/uploads-archive/lc/2023/05/4eeebcbe40297dd8172368581a96c70c.png" alt="" width="864" height="253" />

たしかに漢字っぽくて、意味がわかりそうでわからない・・・

チュ ノム（漢越語）は、漢字より複雑で一般層にあまり普及せず、識字率も低い状態が続きました。
<h2>いまのベトナム語文字に変化</h2>
17世紀初頭に転機が訪れます。

ポルトガル人宣教師がラテン語のアルファベットを応用した「アンナム語」を生み出します。

「アンナム語」は、チュ ノム（漢越語）よりかなりシンプルなため、一般層にもなじみやすい言語でした。

同時期にフランス人宣教師が、声調を付ける文字を考案し、現在のベトナム語を作り上げました。

<img class="aligncenter size-full wp-image-11866" src="/uploads-archive/lc/2023/05/img_20221220-2.jpg" alt="" width="1280" height="720" />
<h2>中国語由来の日本語・ベトナム語の共通点</h2>
日本語もベトナム語も中国語由来の言葉が多いため、発音が近い言葉が多くあります。

<img class="aligncenter size-full wp-image-11867" src="/uploads-archive/lc/2023/05/ad51b71f031db556f9cf812cc8870003.png" alt="" width="1174" height="591" />

似てますよね！
<h2>まとめ</h2>
言葉のルーツをたどっていくと、その国の歴史を知ることになり、楽しいですね。言葉は文化であり歴史だなと思いました。
<h3>参考文献</h3>
<a href="https://vietomato.com/han-viet-la-gi">https://vietomato.com/han-viet-la-gi</a>

<a href="https://www.arc-c.jp/translation/blog/20150604/">https://www.arc-c.jp/translation/blog/20150604/</a>

<a href="https://vietlovelog.com/4659/">https://vietlovelog.com/4659/</a>

small_hoian.jpg

thumbnail_hoian.jpg

hoian.jpg

ベトナム語の語源って？

## はじめに
この夏、マレーシアの東側の島、ボルネオ島の最大都市、コタキナバルへ行きました。コタキナバルで感じたことを書きます。

## コタキナバルとは
 ![](/uploads/Malaysia_Map_d8b4a74597.png) 
マレーシアは首都クアラルンプールがある西の半島側と、東のボルネオ島北部にある東マレーシアの2エリアに分かれます。
コタキナバルは、東マレーシア最大の都市です。

## 驚いたこと①トイレ
マレーシアの国教はイスラム教ですが、多宗教国家です。
###### イスラム教　61％
###### 仏教　20％
###### キリスト教　9％
###### ヒンズー教　6％
###### その他　4％

イスラム教の人はトイレットペーパーを使わず、トイレに備え付けのシャワーを使って、自分の左手でお尻を洗います。
 ![](/uploads/toiletin_Malay_a5c0949aac.jpg) 
なので、トイレは結構水でびちゃびちゃ。
トイレットペーパーがないトイレも多いので、常に携帯しておけばよかったなと思いました。

なお、コタキナバルの空港は、"WET"側と"DRY"側に分かれていました。　"DRY"側にしかトイレットペーパーはありません、と書いてありました。

## 驚いたこと②州またぎでパスポート
主に滞在したのは、コタキナバルがあるサバ州という州でした。
マレーシアは西の半島側に11州、東のボルネオ島側に2州、その他1つの連邦直轄領があります。
サバ州は州独自の出入境管理が行われていて、サバ州から同じマレーシア内の別の州へ出る際、またサバ州へ戻る際もパスポートチェックとスタンプが押されます。

↓出たとき
 ![](/uploads/IMG_3158_8f6a8a591c.png) 
↓入ったとき
 ![](/uploads/IMG_3159_5002e63953.png) 

特にサバ州へ入るときのチェックがものすごく厳しかったというか、チェックに時間が掛かりました。
ただ、何をチェックしているわけでもなさそうで、ずーっとパスポートとにらめっこしている感じでした。
あとから現地の人に聞くと、いろいろな歴史的背景もあり、サバ州は他の州と仲が悪いとのこと。
ここらへんはもう少し勉強したいところです。

## 驚いたこと③祝日の勤務協力体制
 ![](/uploads/member_blog_3066_5e240cb2a78db_6537f305c9.jpg) 
前述の通りマレーシアは多宗教国家です。　宗教が異なれば宗教毎に祝日も異なります。

### 祝日例
#### `イスラム教の祝日`
・断食明け大祭（**2023年は4月21日**）

・イスラムの新年（**2023年は7月19日**）
#### `キリスト教の祝日`
・イースターサンデー（**4月17日**）

・クリスマス（**12月25日**）

このように多宗教国家の場合、宗教によって祝日が異なるため、仕事はどうしているのかと聞いてみました。

すると、

> イスラム教が祝日の日：イスラム教以外の人たちで仕事をカバーする。


> キリスト教が祝日の日：キリスト教以外の人たちで仕事をカバーする。


という風にカバーする協力体制ができているとのことでした。



てっきり、どの宗教の祝日でもすべて休んでしまうのかと思ってましたが、これは素晴らしいですね。


## まとめ
コタキナバル滞在中に驚いたことを3つご紹介しました。

日本に留まらず海外へビジネス販路を求めるには、もっともっと海外へ出て、見て・聞いて・触って・感じて　が必要と思いました。

コタキナバルで日本人は多少見ましたが、その10倍くらいの韓国人を見ました。　もっともっと世界へ出ていきましょう。


small_shutterstock_149197103.jpg

thumbnail_shutterstock_149197103.jpg

shutterstock_149197103.jpg

コタキナバル（マレーシア）で驚いたこと

## はじめに
越境EC支援事業を行う中で、スイーツや生鮮品など保冷品の国際宅配便サービスについてご相談いただくことがあります。今回は、冷蔵品・冷凍品に関わらず、保冷品の小包配送についてご紹介します。

## 保冷品とは？
保冷品は、温度を一定の低温で保ちながら商品や食品を保存・運送するための製品や仕組みのことをいいます。例えば食品の場合、保冷品は食材や冷凍食品を冷たい温度で保存し、腐敗や品質の劣化を防ぐのに役立っています。

## 海外への保冷輸送手段
ここでいう海外への保冷輸送は、越境ECでの小包の直送モードについて言及します。国際宅配便各社について調べたところ、以下の結果となりました。

 ![](/uploads/_52886e389a.png) 

唯一保冷輸送が可能なのは、日本郵便が提供するクールEMSでした。発送前の確認と発送準備を以下の手順で進めていく必要があります。

- [ ] 希望する取扱い国の有無を調べる
- [ ] 取扱い国が該当する場合は配送料金を調べる
- [ ] 取扱い郵便局・引き受け可能曜日を確認する
- [ ] 発送可能日を確認する
- [ ] 事前予約申込書を記載する
- [ ] 差出希望日の5日前の正午までに差出郵便局にFAXで申し込みをする
- [ ] 申込締切日の翌日までに、郵便局から連絡がある
- [ ] 予冷、梱包準備の上発送する

現在クールEMSで配送できるのは、台湾、ベトナム、マレーシア、シンガポールの4か国(2023年8月現在)。香港とタイに関しては引き受け停止中となっています。なお、現在西日本地域ではクールEMSの受託が停止されています。
詳しくはこちらのリンクをご参照ください。
https://www.post.japanpost.jp/int/ems/cool/


保冷設備の整った状態で配送できるのはクールEMSでしたが、国際宅配便事業者によっては、事前に各社へ相談の上で荷物にドライアイスをつめた状態での輸送を受託することが可能な場合があります。この場合、通常要求されることのない以下を満たす必要があります。

・荷物外装へのマーキング

- 荷送人と荷受人の住所・氏名
- DRY ICE UN1845
- ドライアイスの正味量(kg)

・荷物外装へのラベル貼り付け

- クラス9のIATAの危険性ラベルの貼付

・送り状ラベルへの記載

- 　Dry Ice, UN1845, ドライアイス梱包の数 x ドライアイスの正味重量(kg)

梱包についても炭酸ガスの蓄積を防ぐために、荷物を完全に密閉しないようにする工夫が必要です。なお、危険物申告書は不要です。

ドライアイスを充填して輸送する場合は、上記のような別途準備が必要となることと、輸送料金とは別途手数料がかかること、ドライアイスを充填することで荷物の重量自体が重くなって輸送料金が高くなる点を考慮しなければなりません。

## まとめ
国際宅配便による保冷品の輸送手段は限られていることがわかりました。越境ECで販売する商材や商品単価、出荷の負荷を考慮した上で適切な配送手段を選択していきましょう。


small_72846cbcb5b523da8a4150515895e821_t.jpeg

thumbnail_72846cbcb5b523da8a4150515895e821_t.jpeg

72846cbcb5b523da8a4150515895e821_t.jpeg

保冷品の国際宅配便サービス

Shopeeの商品情報は非常に複雑で、そのため出力できるCSVデータも複雑であり正直わかりやすい状態ではありません。
なので出力できるファイルとその中身についてまとめます。

出力できるファイルは以下の5つです。

mass_update_basic_info
mass_update_sales_info
mass_republish_items
mass_update_shipping_info
mass_update_media_info

それぞれの内容と項目は以下のとおりです。

### mass_update_basic_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Product Description: 商品說明
Fail Reason: 基本的に空欄

### mass_update_sales_info
Product ID: Shopeeの商品IDです
Product Name: 商品名
Variation ID: バリエーションIDです。バリエーションの有無に関わらず値が入ります        
Variation Name: バリエーション名です。バリエーションが2つある場合はセル内にカンマ区切りで2つ入ります     
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
SKU	Price: バリエーションごとの価格です    
Stock; バリエーションごとの在庫です    
Fail Reason: 基本的に空欄

### mass_republish_items
Product ID: Shopeeの商品IDです
Product Name: 商品名
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Sales: 過去の販売件数
Stock: バリエーションごとの在庫    
Action: ステータスをDelist または Publish
Fail Reason: 基本的に空欄

### mass_update_shipping_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Product Weight/kg: 重さ
Length: 長さ
Width: 横幅
Height: 高さ
Shipping Toggle: 配送切替onまたはoffを指定
I will cover shipping fee: 送料無料onまたはoffを指定
Shipping fee: 配送料
Fail Reason: 基本的に空欄

### mass_update_media_info
Product ID: Shopeeの商品IDです
Parent SKU: 該当商品の登録情報「Parent SKU」が出力されます
Product Name: 商品名
Category: カテゴリのIDと構造。例: 100893 - Beauty/Skincare/Facial Moisturize
Cover image: カバー画像のURL
Item Image 1〜8: 画像1〜8のURL
Size Chart: サイズチャート画像のURL
Variation Name1: バリエーション1の名前    
Option 1 Name〜Option 30 Name: オプション1〜30の名前
Option 1 Image〜Option 30 Image: オプション1〜30の画像URL
Fail Reason: 基本的に空欄


一括での引っ越し作業などの際参照いただければ幸いです。

Shopeeで出力できる商品CSVの種類と内容

# 軽量でセキュアなコンテナイメージを使ってみよう

## はじめに
みなさんは開発にDockerコンテナを使っていますか？ここでいうコンテナとはDockerやDocker互換のコンテナエンジンで動作させられるものを指します。
当社でもDockerコンテナを積極的に利用して開発環境から本番までシームレスな開発、運用ができるよう導入を進めています。

さてそんなDockerコンテナですが、コンテナイメージを管理するためのDockerfileは適切に管理できているでしょうか。
ファイルシステムが差分構成になっていることなどDocker特有の仕組みがあり、ネット上にあるサンプルをそのまま使っているだけで自分たちで中身を書くところまではできてない人が多いのではと想像します。

本記事ではそのような状態から一歩レベルアップするため、Distrolessというベースイメージを使うようDockerfileを書き換えるやり方とその結果どういうことが得られるかを解説していきます。

## Distrolessとは
そもそもDistrolessとはどういうもので、どういう利点があるのでしょうか？
開発元でGoogleのAIであるBardに聞いてみた内容を引用します。

> 引用：Bard（Google AI）

> 質問
> distrolessを使う利点はなんですか？
> 
> 回答
> Distroless は、Google によって開発された、Linux オペレーティングシステムを最小化した Docker コンテナイメージです。Distroless は、アプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むため、軽量でセキュリティに優れています。
> 
> Distroless を使用する主な利点は次のとおりです。
> 
> - 軽量：Distroless は、従来の Linux ベースの Docker コンテナイメージよりも軽量です。これは、Distroless がアプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むためです。
> - セキュリティに優れている：Distroless は、セキュリティに優れています。これは、Distroless がアプリケーションを実行するために必要な最小限のファイルとライブラリのみを含むため、攻撃対象領域が狭いためです。
> - スケーラブル：Distroless はスケーラブルです。これは、Distroless が軽量であるため、多くのコンテナを実行してもシステムに負荷がかかりにくいためです。
> 
> Distroless は、軽量でセキュリティに優れた Docker コンテナイメージを必要とするアプリケーションに最適です。たとえば、Web サーバ、データベースサーバー、アプリケーションサーバなどです。

「軽量でかつセキュリティに優れている」というところに着目してDistrolessを使って進めていきます。

## プログラム
実際の運用イメージにあわせるため、下記のようなExpressを使ったNode.jsアプリを動作させるコンテナを作るDockerfileを対象にします。

- app/app.ts
  ```
  import express from "express";

  const app = express();
  const port = 3000;

  app.get("/", (_req, res) => {
    res.send("Hello World!");
  });

  app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
  });
  ```
- package.json
  ```
  {
    "dependencies": {
      "express": "^4.18.2",
      "typescript": "^5.1.6"
    },
    "devDependencies": {
      "@types/express": "^4.17.17"
    },
    "scripts": {
      "build": "tsc"
    }
  }
  ```
- tsconfig.json
  ```
  {
    "compilerOptions": {
      "target": "es2016",
      "module": "commonjs",
      "outDir": "./dist",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

      /* Type Checking */
      "strict": true /* Enable all strict type-checking options. */,
      // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
      // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
      // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
      // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
      // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
      // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
      // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
      // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
      // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
      // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
      // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
      // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
      // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
      // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
      // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
      // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
      // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
      // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

      /* Completeness */
      // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
      "skipLibCheck": true /* Skip type checking all .d.ts files. */
    },
    "include": ["./src/**/*"]
  }
  ```

### Dockerfile(変更前)
```
FROM node:18-slim
WORKDIR /app
COPY . .
RUN npm install && npm run build

CMD [ "node", "./dist/app.js" ]
```
変更前のDockerfileは上記の通りで、公式で提供されているNode.jsのイメージをそのまま使うだけのDockerfileになります。

### Dockerfile(変更後)
```
FROM node:18-slim as builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM gcr.io/distroless/nodejs:18
ENV NODE_ENV production
WORKDIR /app
COPY --from=builder --chown=nonroot:nonroot /app/dist/app.js ./dist/app.js
COPY --from=builder --chown=nonroot:nonroot /app/node_modules ./node_modules
USER nonroot
CMD [ "./dist/app.js" ]
```
Distrolessを使うように書き換えたものがこちらになります。その中でも特に2点について下記で解説します。

### 変更内容のポイント
1. マルチステージビルド

    Distrolessには実行に必要な最低限のパッケージしか含まれていないため、npmコマンドどころかshell環境自体が存在しません。
    そのため、Dockerのマルチステージビルド機能を利用します。詳細な仕組みの説明は割愛しますが、Dockerfileの前半部分(1行目〜4行目)で
    標準Node.jsイメージを使ってアプリケーションをビルド(ライブラリのインストールとTypescriptのコンパイル)、
    後半部分(6行目〜12行目)でdistrolessに前半でビルドしたファイルのコピーするという2段階構成にします。
    このように変更することでnpmコマンドや、ソースファイルのようなアプリケーション実行に必要がないファイルをイメージファイルに含めないことを実現します。

2. 非root化

    Distrolessとは直接関係ないですが、Docker公式にもベストプラクティスとして書かれている非root化も一緒に行ってます。
    Distrolessイメージではrootユーザー以外にnonrootというユーザーが存在しているため、ファイルのコピー時とCMD実行前にnonrootを指定することでroot権限を持たないユーザーでプログラムを実行できるようになります。

### イメージのサイズの比較
まずはビルドしたイメージのサイズを比較してみます。

- 変更前→express-slim
- 変更後→express-distroless

となります。

```
➜ docker image ls
REPOSITORY           TAG       IMAGE ID       CREATED        SIZE
express-slim         latest    afe678706d58   37 hours ago   312MB
express-distroless   latest    6a1421f17b86   37 hours ago   207MB
```

3割程度小さくなっていることがわかります。
サイズが小さくなることでビルド後のイメージを保存する先のストレージ容量の節約や、デプロイ時間の短縮が期待できます。

### 脆弱性の数の比較
次に[Trivy](https://trivy.dev/)というコンテナイメージの脆弱性スキャナーをつかって検出される脆弱性の個数を比較してみます。

```
➜ trivy image express-slim
(省略)
Total: 51 (UNKNOWN: 0, LOW: 50, MEDIUM: 0, HIGH: 1, CRITICAL: 0)
(省略)

➜ trivy image express-distroless
(省略)
Total: 23 (UNKNOWN: 0, LOW: 11, MEDIUM: 8, HIGH: 4, CRITICAL: 0)
(省略)
```

今回は細かい内容までは追わずに単純な個数で比較しますが、脆弱性の数が半分以下になっていることがわかります
（HIGHが多いのが気になりますが・・）

## その他TIPSなど
### 開発中はSSHできないと不便
:debugタグをつけたイメージを利用することで一般的なコンテナイメージと同様にdocker runコマンドでsshログインが可能になります。

```
FROM gcr.io/distroless/nodejs:18
↓
FROM gcr.io/distroless/nodejs:18:debug
```

### 軽量なコンテナイメージとしてはAlpineのほうが有名なのになぜDistrolessを採用しているのか
Alpineは軽量にするため特殊構成をとっているディストリビューションであり、標準Cライブラリに一般的なglibcではなくmuslを採用しています。
Node.jsではmuslを採用しているプラットフォームで動作させる場合のサポートレベルはExperimentalとなっています(2023年8月現在)。
この点から、実運用時の安定性のことを考えて一般的なディストリビューションであるDebianベース(=標準Cライブラリがglibc)のDistrolessを使いました。

## まとめ
今回はNode.jsのアプリケーションを動かすコンテナをDistrolessを使って構築してみましたが、変更自体も簡単で、記事内で解説したとおり軽量かつセキュアなコンテナにするという目的が達成できそうです。

その要因として、Node.jsインストール済みのイメージがDistrolessで提供されていることが大きかったのですが、たとえばPHPのように標準で提供されてないアプリケーションのコンテナイメージを構築する場合、自前でミドルウェアを追加する作業が必要になり、軽量かつセキュアというメリットがあまり活かせないことになりそうです。

用途に応じた使い分けが必要だと感じました。

## 参考リンク
- [Distroless](https://github.com/GoogleContainerTools/distroless)
- [Best practices for writing Dockerfiles](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/)
- [DockerでNode.jsを動かすときのベストプラクティス](https://blog.shinonome.io/nodejs-docker/)
- [Node.js Docker baseイメージには alpine < distroless < ubuntu+slim 構成がよさそう](https://zenn.dev/jrsyo/articles/e42de409e62f5d)

large_20230825_1.png

medium_20230825_1.png

small_20230825_1.png

thumbnail_20230825_1.png

20230825_1.png

軽量でセキュアなコンテナイメージを使ってみよう

##  1.はじめに
GitHubは、ソフトウェア開発者にとって欠かせないツールの一つとなっています。Issue管理機能を活用すれば、プロジェクトのタスクやバグ、提案などを効率的に管理できます。今回は、GitHubのIssueを自動的にGoogleスプレッドシートに取得する方法を紹介します。

前回の記事では、RestAPIを通してIssueを取得するという方法を試みましたが、Issueの全件取得ができないなど課題を残すものになりましたが、もう一つの手法としてGraphQLにて取得する方法があり、GraphQLではIssueの全件取得に成功致しましたので、そのGASの全文もシェア致します。

https://sterfield.co.jp/blog/git-hub-gas/

### REST API と graphQLの違い

ChatGPTが教えてくれた違いを記載します。

REST (Representational State Transfer) APIとGraphQLは、クライアントとサーバー間でデータをやり取りするための方法として使用されるインターフェイスですが、設計思想や操作方法が異なります。以下に主な違いを挙げます。

設計思想:

REST: RESTful設計はリソース指向です。それぞれのリソース（例：ユーザー、記事など）に対して一つのエンドポイントがあります。HTTPメソッド（GET、POST、PUT、DELETEなど）を使ってリソースに対する操作を行います。
GraphQL: GraphQLはデータ指向です。クライアントは必要なデータの構造を指定し、サーバーはその構造に基づいてデータを返します。一つのエンドポイントを持ち、クエリ言語を用いてデータの取得や変更を行います。
データの取得:

REST: クライアントはサーバーから提供されるエンドポイントに従ってデータを取得します。このため、過不足のデータが返されることがよくあります。
GraphQL: クライアントは必要なデータだけを指定して取得できます。これにより、過不足のデータが返されることが少なくなります。
エンドポイント:

REST: それぞれのリソースや操作に応じて多数のエンドポイントが存在します。
GraphQL: 一般的には一つのエンドポイント（たとえば /graphql）で全ての操作をカバーします。
エラーハンドリング:

REST: HTTPステータスコード（200, 404, 500など）を使ってエラーの種類を示します。
GraphQL: ほとんどの場合、200のHTTPステータスコードで応答し、エラーの詳細はレスポンスボディの中に含められます。
バージョン管理:

REST: 新しいバージョンのAPIをリリースする際、URLにバージョン情報を含めるなどの方法で旧バージョンとの互換性を維持することがよくあります。
GraphQL: フィールドやタイプを非推奨にするなどの方法で、APIの変更をスムーズに管理できます。
フレキシビリティ:

REST: サーバーサイドで提供されるエンドポイントとその構造に従わなければなりません。
GraphQL: クライアントがどのデータを必要としているかを明確に指定できるため、クライアントサイドでのフレキシビリティが高まります。
それぞれの技術には独自の利点と制約があります。使用する場面やニーズに応じて最適なものを選ぶことが重要です。

## 2.必要なもの
Googleアカウント  
GitHubアカウント  
GitHubのPersonal Access Token (リポジトリへのアクセス権限を持つもの)

## 3. 事前準備
### 3.1 GitHubのPersonal Access Tokenの取得
 ![](/uploads/Fine_grained_Personal_Access_Tokens_861a8dbc65.png) 
GitHubにログインして、Settings > Developer settings > Personal access tokens に進む。
"Generate new token" ボタンをクリック。
必要な権限を選択し、トークンを生成。

### 3.2 Google Apps Scriptの準備
 ![](/uploads/Chat_GPT_GAS_Google_1_8c0845570a.png) 

Google Driveにアクセスし、新しいスプレッドシートを作成。
Extensions > Apps Script から、スクリプトエディタを開く。
## 4. スクリプトの作成
Google Apps Scriptのコードをスクリプトエディタにコピー&ペースト  
※最下部にGAS全文掲載しています。  
YOUR_GITHUB_TOKENとORGANIZATION_NAMEを、それぞれ適切な値に置き換える。

## 5. スクリプトの実行
スクリプトエディタの上部にある実行ボタンをクリック。
必要な権限を付与し、スクリプトを実行。

今回のGASでは実行できるメニューを追加しています。
 ![](/uploads/GAS_Github_Google_553126d37c.png)
 
## 6. 結果
 ![](/uploads/GAS_Github_Google_e97d4e37e8.png) 
Googleスプレッドシートに、GitHubのIssueの情報が自動で追記される。リポジトリ名、Issue番号、タイトル、作成日、更新日、URLなどの情報を取得できる。

## 7. まとめ
GitHubのIssueをGoogleスプレッドシートに自動取得する方法を紹介しました。この方法を利用することで、プロジェクトの進捗管理やレポート作成を効率的に行うことができます。さまざまなカスタマイズや拡張が可能なので、ご自身のニーズに合わせて活用してみてください。
当社では、一ヶ月毎にIssueの棚卸しに活用できそうだと話しています。

## 8. Google Apps Script全文

### 機能

- スプレッドシートのメニューに実行ボタンを追加
- アクティブなスプレッドシートを取得し、内容をクリア    
- リポジトリ名、Issue番号、タイトル、作成日、更新日、URLを列に追加

### 注意点

- リポジトリの中の最初の100件のIssueを取得します。(first: 100)の値を変えることができるかは未検証
- スクリプト実行の度にスプレッドシートの内容をクリアするため、書き込んだ内容も消えてしまいます。
- 
```
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  
  // カスタムメニューを追加
  ui.createMenu('GitHub Menu')
      .addItem('Fetch GitHub Issues', 'fetchAllRepoIssuesAndAppendToSheetWithUrl')
      .addToUi();
}

function fetchAllRepoIssuesAndAppendToSheetWithUrl() {
  var GITHUB_API_URL = 'https://api.github.com/graphql';
  var GITHUB_TOKEN = 'YOUR_GITHUB_TOKEN';  // GitHubのPersonal access token
  var ORG_NAME = 'ORGANIZATION_NAME';
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  // スプレッドシートの内容をクリア
  sheet.getRange(1, 1, sheet.getLastRow(), sheet.getLastColumn()).clearContents();
  
  // リポジトリ一覧の取得
  var repoQuery = `
  {
    organization(login: "${ORG_NAME}") {
      repositories(first: 100) {
        edges {
          node {
            name
          }
        }
      }
    }
  }
  `;

  var headers = {
    'Authorization': 'bearer ' + GITHUB_TOKEN,
    'Content-Type': 'application/json'
  };

  var options = {
    method: 'post',
    headers: headers,
    payload: JSON.stringify({query: repoQuery})
  };

  var response = UrlFetchApp.fetch(GITHUB_API_URL, options);
  var jsonResponse = JSON.parse(response.getContentText());
  
  if (jsonResponse.errors) {
    Logger.log(jsonResponse.errors);
    return;
  }

  var repositories = jsonResponse.data.organization.repositories.edges;
  
  // 各リポジトリからIssueを取得してスプレッドシートに追加  
  repositories.forEach(function(repo) {
    var issueQuery = `
    {
      repository(owner: "${ORG_NAME}", name: "${repo.node.name}") {
        issues(first: 100, states: OPEN) {
          edges {
            node {
              number
              title
              createdAt
              updatedAt
            }
          }
        }
      }
    }
    `;

    options.payload = JSON.stringify({query: issueQuery});
    response = UrlFetchApp.fetch(GITHUB_API_URL, options);
    jsonResponse = JSON.parse(response.getContentText());

    if (jsonResponse.errors) {
      Logger.log(jsonResponse.errors);
      return;
    }

    var issues = jsonResponse.data.repository.issues.edges;
    
    issues.forEach(function(issue) {
      var issueUrl = `https://github.com/${ORG_NAME}/${repo.node.name}/issues/${issue.node.number}`;
      
      sheet.appendRow([
        repo.node.name,
        issue.node.number,
        issue.node.title,
        issue.node.createdAt,
        issue.node.updatedAt,
        issueUrl  // F列にURLを追加
      ]);
    });
  });
}

```



medium__744f5a47-585b-4840-a782-b47ed954000c.jpg

small__744f5a47-585b-4840-a782-b47ed954000c.jpg

thumbnail__744f5a47-585b-4840-a782-b47ed954000c.jpg

_744f5a47-585b-4840-a782-b47ed954000c.jpg

GitHubリポジトリからIssueを取得してスプレッドシートに追記するGAS(GraphQLバージョン)

## はじめに

今回は、インドのECモールであるmeeshoをとりあげます。meeshoというモールを聞いたことがない人がほとんどだと思います。しかし、このモールのアプリは実は2022年世界で2番目にダウンロードされたショッピングアプリなのです。ではmeeshoについて見ていきましょう。

 ![](/uploads/9e698164fdd4a9ccd34715d260b027e7_a65a273735.png) 
画像引用：[https://blog.apptopia.com/worldwide-and-us-download-leaders-2022](https://blog.apptopia.com/worldwide-and-us-download-leaders-2022)
## meeshoとは
 ![](/uploads/c0cdb02ffa8f4bcf4870b03ad55ca359_77290b90c9.png) 
Meeshoはインド初のECプラットフォームです。2015年にVidit Aatrey 氏と Sanjeev Barnwal 氏が立ち上げました。

現在では、月間9000万件もの注文がある巨大ECモールに成長しました。Google playとi OS appでの合計アプリダウンロード数は5億回を超えています。5億回まで約6年間で到達し、その速さは世界最速です。

最大の特徴は、銀行口座とインドの納税者番号さえあれば、誰でも販売者になれることです。法人も出店していますが、小規模事業者や個人での出店も多いようです。なんと販売手数料は0とのことです。どこから利益を取っているのでしょうか、、。

 ![](/uploads/09381f44477ea087f2b91d46d39cc7d9_9414f1edcd.png) 



公式HPサイトでは、創業者の二人がビジネスを始めた目的は、女性のエンパワーメントだと紹介しています。投資ゼロでオンライン販売ビジネスを始める個人を支援し、自営業者となった多くの個人がチャンスを掴んで欲しいのだと。

サイト内の記事でも機織り職人から陶芸家、竹細工職人など地方田舎で伝統工芸品を製作している女性が、EC販売を始めるストーリーが掲載されています。

ブランディングとしての意味合いもあるかもしれませんが、インドの全ての人にチャンスを提供するという思想で設計されたECモールと言えるでしょう。

 ![](/uploads/c487758ecb8828776ccde068f3bdb799_c22f3ee746.png) 


## まとめ

日本で暮らしていると知らないECモールがたくさんあります。またECモールによって思想も様々です。今後もウォッチしていきたいと思います。




large_a0dd563be0e1d437497dcfbf19d68490.png

medium_a0dd563be0e1d437497dcfbf19d68490.png

small_a0dd563be0e1d437497dcfbf19d68490.png

thumbnail_a0dd563be0e1d437497dcfbf19d68490.png

a0dd563be0e1d437497dcfbf19d68490.png

世界で2番目にDLされたショッピングアプリmeeshoとは？

## はじめに
越境ECをはじめる上で、ネックになるのは「言語」！

今回は、越境ECでよく見かける単語を厳選して、英語と中国語を表形式でまとめてみました。

越境ECサイトを覗き見したり、自身で運営されている方、ぜひ活用してみてください！

## 越境ECでよく使う単語
今回は、基本編・決済編・プロモーション編で分けてお伝えします！

### 基本編
<style>
table {
   table-layout: fixed;
   width: 100%;
}
</style>
<table>
<tbody>
<tr>
<th>英語</th>
<th>中国語（簡）</th>
<th>中国語（繁）</th>
<th>日本語</th>
</tr>
<tr>
<td>Order</td>
<td>订单</td>
<td>訂單</td>
<td>注文</td>
</tr>
<tr>
<td>Payment</td>
<td>付款 / 付钱</td>
<td>付款 / 付銭</td>
<td>支払い</td>
</tr>
<tr>
<td>Shipping</td>
<td>出货</td>
<td>出貨</td>
<td>発送</td>
</tr>
<tr>
<td>Cancellation</td>
<td>取消</td>
<td>取消</td>
<td>キャンセル</td>
</tr>
<tr>
<td>Return</td>
<td>退货</td>
<td>退貨</td>
<td>返品</td>
</tr>
<tr>
<td>Refund</td>
<td>退款</td>
<td>退款</td>
<td>払い戻し</td>
</tr>
<tr>
<td>Price</td>
<td>价格</td>
<td>價格</td>
<td>価格</td>
</tr>
<tr>
<td>Shipping Fee</td>
<td>运费</td>
<td>運費</td>
<td>送料</td>
</tr>

<tr>
<td>Shipping Address</td>
<td>收件地址</td>
<td>收件地址</td>
<td>お届け先</td>
</tr>
<tr>
<td>TEL</td>
<td>电话号码</td>
<td>電話號碼</td>
<td>電話番号</td>
</tr>
</tbody>
</table>

### 決済編
決済編では、主な決済方法をまとめてみました。
<table>
<tr>
<th>英語</th>
<th>中国語（簡）</th>
<th>中国語（繁）</th>
<th>日本語</th>
</tr>
<tr>
<td> Credit Card</td>
<td>信用卡</td>
<td>信用卡</td>
<td>クレジットカード</td>
</tr>
<tr>
<td> COD<br> (Cash On Delivery)</td>
<td>英語</td>
<td>英語</td>
<td>代引き</td>
</tr>
<tr>
<td>BLPL <br>(Buy Now Pay Later)</td>
<td>後支付</td>
<td>後支付</td>
<td>後払い決済</td>
</tr>
</tbody>
</table>

### プロモーション編
プロモーション編では、お得な情報を伝える時の便利単語をまとめています。

特に中国語の〇％OFFは、日本語や英語と表現が違うので、必見です。
<table>
<tbody>
<tr>
<th>英語</th>
<th>中国語（簡）</th>
<th>中国語（繁）</th>
<th>日本語</th>
</tr>
<tr>
<td>20％OFF</td>
<td>8折</td>
<td>8折</td>
<td>20％引き</td>
</tr>
<tr>
<td>Buy3 Get 20%OFF</td>
<td>3件8折</td>
<td>3件8折</td>
<td>3つ買って20%OFF</td>
</tr>
<tr>
<td>Free Shipping</td>
<td>免费送货</td>
<td>免運</td>
<td>送料無料</td>
</tr>
<tr>
<td>Buy1 Get 1 more</td>
<td>买一送一</td>
<td>買一送一</td>
<td>1個買ったら1個付いてくる</td>
</tr>
<tr>
<td>Coupon</td>
<td>优惠券</td>
<td>優惠券</td>
<td>クーポン</td>
</tr>
</tbody>
<table>

## まとめ
いかがでしたでしょうか？

もし、他にもこんな単語載せて欲しい！というのがあったら、ぜひご連絡ください！

large_towfiqu-barbhuiya-5u6bz2tYhX8-unsplash.jpg

medium_towfiqu-barbhuiya-5u6bz2tYhX8-unsplash.jpg

small_towfiqu-barbhuiya-5u6bz2tYhX8-unsplash.jpg

thumbnail_towfiqu-barbhuiya-5u6bz2tYhX8-unsplash.jpg

towfiqu-barbhuiya-5u6bz2tYhX8-unsplash.jpg

越境ECを始める前に知っておきたい！<br>越境ECでよく使われる英語&中国語翻訳リスト！


<h2>新規輸出１万者支援プログラムとは</h2>



<p>新規輸出１万者支援プログラムは、2022年10月の閣議決定により、12月よりスタートしました。<br>現在の円安を輸出増加の好機と捉え、これまで輸出をしたことがない中小企業・地域企業の新規輸出をサポートする取り組みです。</p>



<p>経済産業省、中小企業庁、ジェトロ及び中小機構が一体となり、全国の商工会・商工会議所等とも連携しています。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="532" src="/uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-1024x532.png" alt="" class="wp-image-12019" srcset="/uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-1024x532.png 1024w, /uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-300x156.png 300w, /uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-768x399.png 768w, /uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-600x312.png 600w, /uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49-1536x799.png 1536w, /uploads-archive/lc/2023/07/d1a671b9cbb27488e4400413969d7f49.png 1654w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>主な流れは上記の通りで、商工会や商工会議所、金融機関などが、<strong>輸出の可能性を秘めた事業者を掘り起こし</strong>、ジェトロの「新規輸出１万者支援プログラム」のポータルサイトに登録します。</p>



<p>その後、<strong>専門家による個別カウンセリング</strong>で具体的な支援策の提案があり、実際に支援が行われます。</p>



<p>支援の内容としては、<strong>専門家による経営計画の立案や、補助金を活用したサイト構築、マーケティング</strong>など多岐にわたります。</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="新規輸出1万者支援プログラム：「はじめて輸出」を応援します" width="500" height="281" src="https://www.youtube.com/embed/Mxpf3NZ1rJo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div></figure>



<p>なぜアンバサダーがヒロミなのかは疑問が残るところですが、この動画に流れがまとまっています。</p>



<p></p>



<h2>スターフィールド社の関わりは…</h2>



<p>このように、円安という現在の状況を受けて、日本としては国を上げて輸出を増やそうとしています。しかも、これまでのように、一部の大企業による輸出に頼るのではなく、これまで輸出をしていない中小企業の支援を目的としています。</p>



<p>スターフィールドとしても積極的にこの事業をサポートしていきます。<br>私は2022年度から中小機構の販路開拓アドバイザーを任命されています。<br>その活動の一環として、<strong>セミナーを通じ輸出の可能性を秘めた事業者にプロジェクトを拡散</strong>したり、<strong>定期的に専門家として越境ECのアドバイス</strong>を行っています。</p>



<p>先日は、「販路開拓サポートDAY　春」というオンラインイベントに登壇してきました。<br>中小機構が地域活性を行うパートナー企業と連携し、中小・小規模事業者様の販路開拓支援に取り組む一環として、行われているものです。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="604" src="/uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-1024x604.png" alt="" class="wp-image-12021" srcset="/uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-1024x604.png 1024w, /uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-300x177.png 300w, /uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-768x453.png 768w, /uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-600x354.png 600w, /uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627-1536x906.png 1536w, /uploads-archive/lc/2023/07/683f6b0b1978a9d21fdc7d7d64202627.png 1628w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="521" src="/uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-1024x521.png" alt="" class="wp-image-12022" srcset="/uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-1024x521.png 1024w, /uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-300x153.png 300w, /uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-768x391.png 768w, /uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-600x305.png 600w, /uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b-1536x781.png 1536w, /uploads-archive/lc/2023/07/e03b4894ebe5176ed1b1d9130f24599b.png 1762w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>私は、各支援パートナーの説明が始まる前段として、本企画の全体像をお示しする基調講演を行いました。</p>



<p>想像していたよりもしっかりした配信環境だったので、けっこう緊張しました。。</p>



<h2>最後に</h2>



<p>中小企業の海外進出を多方面から支援する動きが活発化しています。</p>



<p>会社としても個人としてもこの流れを加速させる一助になれればと思います。</p>


small_スクリーンショット 2023-09-22 11.39.19.png

thumbnail_スクリーンショット 2023-09-22 11.39.19.png

スクリーンショット 2023-09-22 11.39.19.png

新規輸出１万者支援プログラムとは？！

## React初体験

今月にスターフィールド のWebサイトが新しくリニューアルされました。この開発に伴い始めてReact環境で開発を体験しました。
ReactはJavaScriptのライブラリの一種と聞いてはいましたが、Webデザイナーとして経験してきたJavaSciptの開発とは全く別物のように感じました。

このブログでは、React環境での開発体験を詳しくまとめて、初心者がReactに挑戦する際に直面するであろう注意点、気づいたポイントについてまとめます。


## そもそもReact とは？

ReactはJavaScriptライブラリであり、主にユーザーインターフェースを構築するのに向いています。近年、Webサイトを構築する上でheader、footerなど
共通部分をモジュール化し、それを読み込ませてページを作ります。
Reactはこのモジュール化の考え方が色濃く表れてる言語という印象を受けました。また、そのため今までの開発環境と大きく変わりました。

例えば、jQuery環境で開発する場合、一般的には<head>タグ内にjQueryファイルを読み込むコードを記載するでしょう。そして、topページ内ではメインビジュアルをslickスライダーなどのモジュールを読み込み動きを設定し、CSSで装飾をする。などの流れで動きのあるリッチコンテンツを作ります。

しかし、Webサイト全体を見た場合、例えばプライバシーポリシーページなど、ただテキストを配置するだけで、特別な仕掛けもないページも存在します。このとき、不要なページにもjQueryファイルを読み込ませてしまい、サーバーには余計な負荷を書けることになります。

一方、Reactの場合、例えばメインビジュアルのスライダーは<slider>などの名前でモジュール化します。そして、このモジュール専用のHTMLとCSSを作成してまずこの部分だけ完成させます。その後、必要なページの必要な箇所でこの<slider>を読み込みWebページを作成します。
各ページ毎に読み込むページが必要最低限で済むのでデータ通信の容量を軽くできます。

一見すると、WordPressでもよく使われる「include」により、各パーツを指定してページを構成する方法と似ていますが、大きく違うのはWordPressは呼び出すデータはHTMLだけになります。そのため呼び出したページのCSSで、読み込んだHTMLに改めてスタイルを適用させる必要があります。  
しかし、Reactの場合はCSSも適用された完成形の形でモジュールが呼び出されるため、改めてスタイルを適用させるを必要もありません。

例えるなら、ブロック工法（機械や建物の製造時に、いくつかの要素を分けて同時に製造し、最後に繋ぎ合わせて完成させる工法）に近い考え方でページを作ります。


## 実際の記述について

開発を体験してみて、記述の仕方が独特と感じました。実際に特徴的だと思った点を主にまとめてみました。

・各ページ、モジュールを「.tsx」ファイルで作る。

先ずは各ページのモジュールを作ります。

```
import Head from 'next/head';
import styles from '@/styles/career.module.scss';


function 関数() {
  return (
       実際のHTML
  );
}

```


という形で記述します。

また、HTMLの記述も全てのタグを「 /(スラッシュ)」を記述して閉じなくてはいけません。大概のタグは/(スラッシュ)で閉じるので当たり前ですが、<br>や<img>タグにもそのルールが適用されて、まるでXHTMLのような記述をする必要があります。

またCSSも

```
<div className={styles.textArea}>

```

などのような形で指定していきます。


少しでもミスがあるとエラーが出てしまい、表示が崩れてしまうレベルではなく、ページその物が閲覧できない状態となり戸惑いました。


## 外部ライブラリーやプライグインを使う場合

トップ画面などで、複数枚の画像をスライダーで見せるホームページはよくあります。jQuery環境下ではこのようなコンテンツを作る際は、主に、slickスライダーなど、有名なプラグインを使うケースが多いです。Reactでもこのようなプラグインを使うことができます。

slickスライダーを例に、React で プラグインを使う場合は以下のようにします。

先ず、

```
$ npm install react-slick

（yarn を使っている場合は yarn add react-slick ）

```

とコードを導入して、プロジェクトに　silick スライダーをインストールします。

そして、.tsvファイルにCSSと同様に

```
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

```

と記述します。
これで　sickスライダーが使える環境が整います。

後は他のモジュールと同様に作成していきます。
例えば、


```

function slickContents() {
  const settings = {
    dots: true,
    autoplay: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  }
  
  return (
    <ul>
      <Slider {...settings}>
        <li><img src={img1} alt='img1' /></li>
        <li><img src={img2} alt='img2' /></li>
        <li><img src={img3} alt='img3' /></li>
      </Slider>
    </ul>
  );
}

```

などのように記述します。

```
  const settings = {
  }

```


こちらの箇所でslickスライダーの設定をします。
jQueryでは外部ファイルのjsファイルに記述して設定するケースが多いですが、記述する位置が違うだけで設定の方法は概ね同じです。

スライダーの動きを設定したあと　

```
  return (　)

```


で実際のHTMLを書き、モジュールを作成します。

そして、実際にスライダーを掲載したい位置に

```

<slickContents/>

```


と記載する事でスライダーが設置されます。

reactは全般的にこのような流れで開発を進めていきます。



## プラグインを使わないコードについて

jQuery環境で開発をする際、プラグインを使わず自分で簡単なコードを記述してコンテンツを作る場合があります。
例えば、クリックしたらclss 「on」 を追加し、CSSで実際にその変化を作るということはよくありました。

同じ事をReact環境下でも行いました。

今回実際にアコーディオン形式でクリックしたら配下のコンテンツの表示、非表示が切り替える動きを作りました。

li="dropListItem" をクリックしたら　これにon を追加したり、削除する。という動きを作りました。
そして、CSSで　li="dropListItem on"　の時は配下の hideArea が表示されるという仕掛けを作成しました。


実際には以下のように記述しました。

```
import React, {useState} from 'react';


function DropListItem ({title , text}) {
  const [isOn, setIsOn] = useState(false);
  const handleClick = () => {
    setIsOn(!isOn);
  };

  return (
    <li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>
      <div className={styles.showArea}>
        <p>{title}</p>
      </div>

      <div className={styles.hideArea}>
        <p>{text}</p>
      </div>
    </li>
  )
}

```

先ずはReqctの「useState」という関数を使うので先に、

```
import React, {useState} from 'react';

```
と記述します。

そして、

```
function DropListItem  ({title , text})

```
と従来の流れ通りにモジュールのタイトルを設定します。

```
{title , text}

```
の部分は最後に解説します。


今回はHTMLに　on  と off　の二段階の変化があります。このように変化するとき
useStateを使います。

```
const [isOn, setIsOn] = useState(false);

```

と、記述したのは「isON」という状態になるときと、「setIsOn」という状態になるときがある。
そして、

```
useState(false);

```

と書くことで書記状態は useState で指定する変化がない状態という意味合いになります。

```
  const handleClick = () => {
    setIsOn(!isOn);
  };

```


この関数は hadleClick という関数が呼び出される度に、「setIsOn」と「isOn」　という状態が切り替わるという意味になります。

そして、実際にHTMLを記載する際に

```
<li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>

```


と記載しました。
解説すると、先ず、

```

className={ dropListItem } 

```


と記載し、liに「dropListItem」　というclass名を付けます。

```

${isOn ? 'on' : ''}

```


この部分の意味は　isOnの状態では、class「on」を追加、そうでないときは空白を入れる、つまり何も入れない状態にする。という意味になります。

```

onClick={handleClick}

```

はクリックした際に 「handleClick」を呼ぶという状態になります。

事前に、「handleClick」は「isOn」と「setIsOn」を切り替えるように設定しているのでクリックする度に on が挿入した状態とされない状態に切り替わるようになります。

これで、動作については完成しました。後は、実際にを配置したい場所に

```

<DropListItem />

```


と記述することで配置できます。

しかし、この<DropListItem />は配下のテキストを変えて複数配置するコンテンツです。そのため、実際に変えるテキスト部分は関数にして、各<DropListItem />ごとにテキストを変えられようにしました。

そのため、先ず、

```

function DropListItem  ({title , text})

```

と記載し、

実際にテキストを変えるHTMLには


```
    <li className={`dropListItem ${isOn ? 'on' : ''}`} onClick={handleClick}>
      <div className={styles.showArea}>
        <p>{title}</p>
      </div>

      <div className={styles.hideArea}>
        <p>{text}</p>
      </div>
    </li>

```
と記載しました。

最終的には以下のように記述します。

```

<ul>タイトル1の詳細情報を記載ます。
  <DropListItem title="タイトル1" text="タイトル1の詳細情報を記載します。"/>
  <DropListItem title="タイトル2" text="タイトル2の詳細情報を記載します。"/>
  <DropListItem title="タイトル3" text="タイトル3の詳細情報を記載します。"/>
  <DropListItem title="タイトル4" text="タイトル4の詳細情報を記載します。"/> 
</ul>

```

このような流れでアコーディオン形式のコンテンツの作成ができました。


6　まとめ

Reactは今までのHTMLとCSS、それにjQueryによる開発に慣れている人から見たら全く違う物のように感じます。そのため戸惑う部分が多くあります。
しかし、モジュール単位で開発をするという性質上、複数人での開発に適していると感じました。

せっかく会社に属して仲間と共に開発の仕事をしているので、積極的に覚えてより良い物を作りたいと思いました。








large_react.jpg

medium_react.jpg

small_react.jpg

thumbnail_react.jpg

react.jpg

 初めてReactで開発して感じたことのレポート

<h2>はじめに</h2>
<p>日本でいうところの「zozotown」にあたる、ドイツ発最大手オンラインファッションECサイト「ザランド（Zalando）」。ベルリンに拠点を置き、フランス、イギリスなど欧州25ヶ国でECサービスを提供しています。<br>欧州ではアマゾンに引けをとらないほどのマーケットプレイスであるZalandoは、単にオンラインショップを提供するだけではなく、ブランドと消費者に健全な生産／購買活動を促しています。</p>
<p>今回はその取り組みの1つである、「サステナビリティプラットフォーム」を紹介します。</p>

<h2>Zalandoの環境への取り組み</h2>

 ![](/uploads/zalando_1_18fb3c00b1.png) 

※画像は[コーポレートサイト](https://corporate.zalando.com/en/our-impact/sustainability)のキャプチャ

ファッション業界は世界最大の環境汚染産業の一つであり、世界の排出量の約 10% を占めており、Zalando は年間 500 万トンから 600 万トンの温室効果ガスを排出していると推定されています。

そんなZalandoは、2020年、2023年からは環境に配慮したブランドしか提供しないことを決定しました。同社のオンラインファッションサイトは、当時取引のあった2,500ブランドに、環境と社会への影響に関する必要な情報をすべて提示するように求め、基準を満たさない場合は、小売業者はすべての取引を中止するとしたのです。
もちろん即時に注視するというわけではなく、パートナー企業には3年ほどの猶予期間が与えられています。

<h2>ファッションEC3社によるsustainability platform</h2>
<p>2022年、大手ファッションECのAbout You、Yoox Net-a-Porterとともに、Zalandoはsustainability platformを開始しました。<br>このプラットフォームは、Science Based Targets initiative（SBTi／科学と整合した目標設定）に沿って、温室効果ガス排出量の測定と気候目標の設定に関する「段階的な学習」を提供します。各ECのブランドパートナーはこのサービスを無料で受けることができ、またパートナー同士は、いわゆるサステナビリティの専門家と連携することもできます。</p>
<p>Zalandoの排出量の大部分は、4,500 のブランド パートナーによるものです。そのため、2025年までにパートナーの90パーセントがSBTを達成するという目標を設定しました。新しいプラットフォームは「この目標の実現に向けた重要な取り組み」であるとZalandoの共同最高経営責任者（CEO）のデビッド・シュナイダー氏は述べています。</p>
<p>さらに将来的には、関心のあるすべてのファッションブランドや小売業者がこのプラットフォームを利用できるようになる可能性があるとのことです。<br>ファッションEC業界全体を健全化し、リードしていこうとする姿勢がうかがえます。</p>

<h2>まとめ</h2>
ヨーロッパのEC業界においてZalandoが与えるインパクトは非常に大きいものです。そのような会社が牽引することで、ヨーロッパのファッションECは持続可能な社会に向けて進んでいくことでしょう。

参考：https://ecommercenews.eu/zalando-about-you-and-net-a-porter-launch-sustainability-platform/
https://ideasforgood.jp/glossary/science-based-targets/


large_claudio-schwarz-Y0oZ-0AcUBM-unsplash.jpg

medium_claudio-schwarz-Y0oZ-0AcUBM-unsplash.jpg

small_claudio-schwarz-Y0oZ-0AcUBM-unsplash.jpg

thumbnail_claudio-schwarz-Y0oZ-0AcUBM-unsplash.jpg

claudio-schwarz-Y0oZ-0AcUBM-unsplash.jpg

健全な購買活動を育てるZalandoの取り組み(1)sustainability platform

<h2>はじめに</h2>



<p>「拼多多」（ピンドゥオドゥオ）によって運営されている格安越境ECサイト「Temu」。</p>



<p>2022年10月に紹介した際は、利用可能国はアメリカだけでした。その後、順調に対象国を広げ、カナダ、オーストラリア、ニュージーランド、イギリス、ドイツ、オランダなど12か国で利用できます。そしてついに2023年6月末、日本に上陸しました。今回は、実際にサイトの特徴や購入フローを確認してみます。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-launchcart-越境ec専用カート wp-block-embed-launchcart-越境ec専用カート"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="2cWM2vQ8GN"><a href="https://launchcart.jp/contents/temu/">アメリカ向け 拼多多！Temuって？</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;アメリカ向け 拼多多！&lt;br&gt;Temuって？&lt;!--ikuta--&gt;&#8221; &#8212; LaunchCart | 越境EC専用カート" src="https://launchcart.jp/contents/temu/embed/#?secret=2cWM2vQ8GN" data-secret="2cWM2vQ8GN" width="500" height="282" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<h2>アプリの使い勝手について</h2>



<p>実際にアプリを入れて、色々見てみました。ログインはメールアドレス、GoogleアカウントのみならずLINEでもでき簡単でした。さらにレビューなどももちろん自動翻訳ですが、高精度でされている印象です。</p>



<p>利用規約を見ると「拼多多」を運営するPDD Holdingsではなく、日本ではアイルランド企業であるWhaleco Technologyとの間で、締結されるようです。Whaleco Technologyは、PDDの関連会社でしょう。ちなみにアイルランドは、法人税率が低いことで知られている国の一つです。</p>



<div class="wp-block-columns">
<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-461x1024.png" alt="" class="wp-image-12006" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-175705-5.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>トップ画面</figcaption></figure>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-461x1024.png" alt="" class="wp-image-12007" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-175903-2.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>利用規約</figcaption></figure>
</div>



<div class="wp-block-column">
<figure class="wp-block-image size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-461x1024.png" alt="" class="wp-image-12008" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-180930-3.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>レビュー</figcaption></figure>
</div>
</div>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:100%"></div>
</div>



<h2>アフターサービスについて</h2>



<p>中国越境として、不安感を持つ消費者がいることを意識してか、保証サービスも充実しています。商品到着後90日以内なら返品無料。返品用のラベルもアプリから印刷できるようです。</p>



<p>また、購入保証というサービスもあります。これは、注文した商品が写真や説明と違ったり、破損して届いたりした際に全額返金になるものです。</p>



<p>さらに商品の価格が購入後30日以内に値下げされた場合、その差額が支払われるサービスもあります。総じて、消費者に優しいプラットフォームではあると思います。</p>



<div class="wp-block-columns">
<div class="wp-block-column" style="flex-basis:33.34%">
<figure class="wp-block-image size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-182751-461x1024.png" alt="" class="wp-image-11999" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-182751-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-182751.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>返品について</figcaption></figure>
</div>



<div class="wp-block-column" style="flex-basis:33.34%">
<figure class="wp-block-image size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-461x1024.png" alt="" class="wp-image-12001" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-182745-1.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>購入者保護プログラム</figcaption></figure>
</div>



<div class="wp-block-column" style="flex-basis:33.33%">
<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="/uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-461x1024.png" alt="" class="wp-image-12002" width="259" height="575" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-180910-1.png 1080w" sizes="(max-width: 259px) 100vw, 259px" /><figcaption>価格保証</figcaption></figure>
</div>
</div>



<h2>実際に購入してみた</h2>



<p>実際に幾つかの商品を購入してみました。購入までのフローはわかりやすかったのですが、クレジットカードとGoogle payの決済が通りませんでした。面倒だなと思いながら普段使わないPaypalを利用しました。越境サービスのため仕方ないかも知れませんが、CVRが下がりそうなポイントです。</p>



<p>送料は無料でした。ただし最低注文価格が決まっているようで、1400円以上でないと注文ができません。高い送料を加えるより最低注文価格が決まっていた方がお得感があっていいなと思いました。1400円の注文で送料は少なくとも郵便で600円程度はかかるでしょうから、なかなかすごいです。</p>



<div class="wp-block-columns">
<div class="wp-block-column">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-461x1024.png" alt="" class="wp-image-12009" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-181939-1.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>カートの中身</figcaption></figure></div>
</div>



<div class="wp-block-column">
<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" width="461" height="1024" src="/uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-461x1024.png" alt="" class="wp-image-12010" srcset="/uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-461x1024.png 461w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-135x300.png 135w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-768x1707.png 768w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-600x1333.png 600w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-691x1536.png 691w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1-922x2048.png 922w, /uploads-archive/lc/2023/07/Screenshot_20230703-182942-1.png 1080w" sizes="(max-width: 461px) 100vw, 461px" /><figcaption>決済できず</figcaption></figure></div>



<p></p>
</div>



<div class="wp-block-column"></div>
</div>



<h2>まとめ</h2>



<p>今回は、購入までにフォーカスしてまとめました。ローカライズもしっかりされており、また消費者に安心・安全と感じてもらうためのサービスが充実している印象でした。次回は、配送など商品が届くまでの体験についてレビューします。</p>

small_temu .png

thumbnail_temu .png

temu .png

日本上陸！中国発格安EC「Temu」の分析


<h2>はじめに</h2>



<p>2023年6月8日現在、コロナウイルスも収束し街中では、多くの外国人観光客を見かけるようになりました。中国の水際対策も撤廃され、さらに多くの観光客が期待できるでしょう。</p>



<p>コロナ以前にインバウンドに頼っていた小売店やメーカーにとっては、コロナは大きな打撃になりました。「この数年でインバウンドのありがたさを実感した」との声も聞きます。</p>



<p>そういった中で、タビアトとしての越境ECに再び注目が集まるとも言われています。タビナカで商品を購入してもらい、その後も越境ECで中長期的な関係を築いていこうというものです。今回は、そのタビアトとしての越境ECについて考えてみます。</p>



<h2>越境ECで購入する必然性について</h2>



<p>以前こちらの記事でもタビアトとしての越境ECについてまとめました。この記事では、タビアト越境ECがあまり盛り上がっていない理由として、</p>



<p>①大企業や自治体だとECとインバウンドでは、扱う部署が違うこと</p>



<p>②越境ECで買う理由（必然性）がある商品が少ないこと</p>



<p>以上を挙げました。</p>



<figure class="wp-block-embed is-type-wp-embed is-provider-launchcart-越境ec専用カート wp-block-embed-launchcart-越境ec専用カート"><div class="wp-block-embed__wrapper">
<blockquote class="wp-embedded-content" data-secret="7GWh45c7S6"><a href="https://launchcart.jp/contents/ekkyo-ec_tabiato/">インバウンドが再び盛り上がる中タビアト越境ECの可能性はあるのか</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;インバウンドが再び盛り上がる中&lt;br&gt;タビアト越境ECの可能性はあるのか&#8221; &#8212; LaunchCart | 越境EC専用カート" src="https://launchcart.jp/contents/ekkyo-ec_tabiato/embed/#?secret=7GWh45c7S6" data-secret="7GWh45c7S6" width="500" height="282" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div></figure>



<p>この必然性について、もう少し掘り下げて考えてみたいと思います。</p>



<p>越境ECというビジネスモデル自体、国内ECと比較して送料などが掛かるわけですから構造的なハンディキャップがあります。そもそも越境ECで買う理由（必然性）が必要なことは、タビアト越境ECに限りません。</p>



<p>越境ECで買う理由（必然性）についてさらに分解すると、「機能的な価値」と「情緒的な価値」に分けられると言われています。マーケティングの教科書に載っているような内容です。</p>



<p>「機能的な価値」は例えば、いろいろな機能がついてるだとか、サイズがコンパクトだとか他の製品と比べてより便利だから購入するということです。</p>



<p>「情緒的な価値」は、この商品を持っているとかっこいいだとかブランドの理念に共感しただとか、そういった商品のファンになってもらえるような価値を指しています。</p>



<h2>情緒的な価値の追求？</h2>



<p>この「情緒的な価値」の追求とそれに共感する人を増やすことこそが、タビアト越境ECの成功の秘訣なのではと思います。</p>



<p>「機能な価値」についてはものが溢れる現在では、なかなか差別化した訴求が難しくなっています。かつて中国人観光客が爆買いをしていた時期に購入されていたのは、ドラックストア商材や日本製の家電でした。しかし、現在では中国でもコストパフォーマンスの高い家電を購入できますし、かつてのように炊飯器を5個も6個も抱えて秋葉原を練り歩く姿は見られなくなっています。</p>



<p>「情緒的な価値」を高めブランドのファンになってもらうには、インバウンドで店舗に来てもらうのが最も効果的と思います。ブランドに対するファンになってもらい、継続的に商品を購入してもらえる状態はECにおいて理想的な状態です。EC販売は、顧客と中長期的な関係を持つ前提に設計をすることが多いです。一度店舗に来店してもらいブランドの雰囲気やカスタマーサービスで、ファン化する。来店のタイミングで、インスタグラムなどSNSに登録してもらい、長期的なコミュニケーションを図り、再度の購入を促す。そんなフローの実現が、タビアト越境ECのキモになるのではないでしょうか。</p>



<p></p>



<p></p>



<h2>まとめ</h2>



<p>「情緒的な価値」をいかに高め、越境ECという多少購買ハードルが高いスキームでも購入してもらうか、考え続けたいと思います。</p>


large_ross-parmly-rf6ywHVkrlY-unsplash.jpg

medium_ross-parmly-rf6ywHVkrlY-unsplash.jpg

small_ross-parmly-rf6ywHVkrlY-unsplash.jpg

thumbnail_ross-parmly-rf6ywHVkrlY-unsplash.jpg

ross-parmly-rf6ywHVkrlY-unsplash.jpg

インバウンド復活！タビアト越境ECについて考える

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2023/09/14

2023/09/14

2023/09/08

2023/09/08

2023/09/01

2023/09/01

2023/08/31

2023/08/30

2023/08/25

2023/08/25

2023/08/24

2023/08/04

2023/08/03

2023/07/28

2023/07/28

2023/07/28

2023/07/26

2023/07/26