<p>最近よく利用したサイトやブックマークしていたサイトをまとめてみました。</p>
<h2>カラー＆アイコン関連</h2>
<h3>Random Material Palette Generator &#8211; THREEBÙ</h3>
<p>クリックするたびにランダムで色の組み合わせを提案してくれるサイトです。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9072" src="/uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-1024x544.png 1024w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-300x159.png 300w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-768x408.png 768w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94-600x319.png 600w, /uploads-archive/lc/2021/12/ee209a8c1a21e7525182b733339d8e94.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.threebu.it/random-material-palette/" target="_blank" rel="noopener">https://www.threebu.it/random-material-palette/</a></p>
<h3>Adobe カラー</h3>
<p>メインカラーを真ん中に入れると、色の理論をもとにカラーを提案してくれます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9083" src="/uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1024x462.png" alt="" width="1024" height="462" srcset="/uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1024x462.png 1024w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-300x135.png 300w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-768x346.png 768w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-600x271.png 600w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6-1536x693.png 1536w, /uploads-archive/lc/2021/12/2d5fd863c62d745af3264ae71e45b0f6.png 1539w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://color.adobe.com/ja/create/color-wheel" target="_blank" rel="noopener">https://color.adobe.com/ja/create/color-wheel</a></p>
<h3>icons8</h3>
<p>無料のアイコンが充実しています。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9073" src="/uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-1024x542.png" alt="" width="1024" height="542" srcset="/uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-1024x542.png 1024w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-300x159.png 300w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-768x406.png 768w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022-600x317.png 600w, /uploads-archive/lc/2021/12/78a8d7d511ba59f741927a3848034022.png 1357w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://icons8.jp/" target="_blank" rel="noopener">https://icons8.jp/</a></p>
<p>&nbsp;</p>
<h2>デザインギャラリーサイト</h2>
<p>日本</p>
<h3>SANKOU!</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9077" src="/uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1024x538.png" alt="" width="1024" height="538" srcset="/uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1024x538.png 1024w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-300x158.png 300w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-768x403.png 768w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-600x315.png 600w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1-1200x630.png 1200w, /uploads-archive/lc/2021/12/36c0eb8d6eeb63bf6e94528e81dbdbd1.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://sankoudesign.com/" target="_blank" rel="noopener">https://sankoudesign.com/</a></p>
<h3>MUUUUU.ORG</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9076" src="/uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-1024x544.png 1024w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-300x159.png 300w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-768x408.png 768w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad-600x319.png 600w, /uploads-archive/lc/2021/12/4ea4956f1659c708c304156726f611ad.png 1361w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://muuuuu.org/" target="_blank" rel="noopener">https://muuuuu.org/</a></p>
<h3>I/O 3000</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9085" src="/uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-1024x477.png 1024w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-300x140.png 300w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-768x357.png 768w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9-600x279.png 600w, /uploads-archive/lc/2021/12/1dd7379dee60acc7ca84f804f99318c9.png 1530w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://io3000.com/" target="_blank" rel="noopener">https://io3000.com/</a></p>
<h3>81-web.com</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9080" src="/uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-1024x546.png" alt="" width="1024" height="546" srcset="/uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-1024x546.png 1024w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-300x160.png 300w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-768x409.png 768w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2-600x320.png 600w, /uploads-archive/lc/2021/12/c8b96339f88af0f6619a2815e7e7adf2.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://81-web.com/" target="_blank" rel="noopener">https://81-web.com/</a></p>
<p>&nbsp;</p>
<p>海外</p>
<h3>dribbble</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9078" src="/uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-1024x542.png" alt="" width="1024" height="542" srcset="/uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-1024x542.png 1024w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-300x159.png 300w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-768x407.png 768w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2-600x318.png 600w, /uploads-archive/lc/2021/12/205dcbb8374500ef21dc06ce7e2669a2.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://dribbble.com/shots/popular/web-design" target="_blank" rel="noopener">https://dribbble.com/shots/popular/web-design</a></p>
<h3>css design awards</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9079" src="/uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-1024x543.png" alt="" width="1024" height="543" srcset="/uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-1024x543.png 1024w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-300x159.png 300w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-768x408.png 768w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c-600x318.png 600w, /uploads-archive/lc/2021/12/6b4460e8e2877255e852820721cb3a2c.png 1355w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.cssdesignawards.com/" target="_blank" rel="noopener">https://www.cssdesignawards.com/</a></p>
<h3>awwwards</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9081" src="/uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-1024x511.png" alt="" width="1024" height="511" srcset="/uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-1024x511.png 1024w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-300x150.png 300w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-768x383.png 768w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d-600x300.png 600w, /uploads-archive/lc/2021/12/3822b1f8a4423070800cd508e002de8d.png 1358w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.awwwards.com/" target="_blank" rel="noopener">https://www.awwwards.com/</a></p>
<h3>siimple</h3>
<p><img loading="lazy" class="alignnone size-large wp-image-9084" src="/uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-1024x479.png" alt="" width="1024" height="479" srcset="/uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-1024x479.png 1024w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-300x140.png 300w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-768x359.png 768w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b-600x281.png 600w, /uploads-archive/lc/2021/12/62d7c1223eb7b308a472552a1199df8b.png 1533w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://siiimple.com/" target="_blank" rel="noopener">https://siiimple.com/</a></p>
<h2>コーディング＆プログラミング学習サイト</h2>
<h3><span class="md-plain md-expand">Flexbox Froggy</span></h3>
<p><span class="md-plain md-expand">ゲーム感覚でflexboxについて学べるサイトです。codepip ( </span><span class="md-link md-pair-s" spellcheck="false"><a href="https://codepip.com/" target="_blank" rel="noopener">https://codepip.com/</a></span><span class="md-plain md-expand"> ) 社製で他にもgridとか色々あります。</span></p>
<p><img loading="lazy" class="alignnone size-large wp-image-9075" src="/uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1024x537.png" alt="" width="1024" height="537" srcset="/uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1024x537.png 1024w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-300x157.png 300w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-768x403.png 768w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-600x315.png 600w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06-1200x630.png 1200w, /uploads-archive/lc/2021/12/f181879ba3faffaf622b26f1692a8f06.png 1356w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://flexboxfroggy.com/" target="_blank" rel="noopener">https://flexboxfroggy.com/</a></span></p>
<h3><span class="md-plain md-expand">LeetCode</span></h3>
<p>色んなプログラミング言語で問題を解くことができるサイトです。プレーンのjsとts、アルゴリズムなどの理解を深めるには良いかと思います。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9074" src="/uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-1024x544.png 1024w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-300x159.png 300w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-768x408.png 768w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7-600x319.png 600w, /uploads-archive/lc/2021/12/6b711aa7fe90fb7444201487871cecd7.png 1360w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://leetcode.com/problemset/all/" target="_blank" rel="noopener">https://leetcode.com/problemset/all/</a></span></p>
<h3><span class="md-plain md-expand">Progate</span></h3>
<p>分かりやすく楽しく学べる感じがあって、かつ内容も充実しているのでおすすめです。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9082" src="/uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-1024x477.png 1024w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-300x140.png 300w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-768x358.png 768w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb-600x279.png 600w, /uploads-archive/lc/2021/12/0a4bbf9ffa054fb687bc32cdebb655fb.png 1536w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><span class="md-link md-pair-s" spellcheck="false"><a href="https://prog-8.com/" target="_blank" rel="noopener">https://prog-8.com/</a></span></p>
<p>&nbsp;</p>
<p>今後もいいなと思うのを見つけたらまた更新したいと思います。</p>


フロントエンド必見サイトリンク集

BEM×SASSってもう古いの？？モダンCSSを試してみる(CSS Modules編)

medium_nodejs-1200x630-1-960x504-1.png

small_nodejs-1200x630-1-960x504-1.png

thumbnail_nodejs-1200x630-1-960x504-1.png

nodejs-1200x630-1-960x504-1.png

Node.jsをインストールしてみた

<h2>Alibaba cloudとは</h2>
<p>アリババクラウド（Alibaba Cloud）は中国最大なECサイト「淘宝（Taobao）」や電子決済ツール「Alipay」など、日本でも知られるサービスをサポートしている、アリババグループが提供するパブリッククラウドサービスです。毎年の11月11日（独身の日）に行われる中国最大のネットセール祭り（2019年は4兆円も突破）でも、その膨大なアクセスを制御し、サービスの根幹を朝得るアリババクラウド。中国国内シェアは第１位、世界でもAWSとAzureの次に第３位となるクラウドプロバイダーです。</p>
<p>世界21ヵ国、63ヶ所のアベイラビリティゾーンを運営し、大企業、中小企業、個人のディベロッパー、200 以上の国や地域の公共部門にクラウドコンピューティングサービスを提供しています。特に、アジアリージョンにおいては、世界中の他のクラウドプロバイダーに引けを取らないほど、数多くの国で拠点を設置しています。</p>
<h2>今回紹介する本は『AlibabaCloud構築・運用完全マニュアル 』</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17376" src="/uploads-archive/2021/12/41F3M3hosRL._SX260_-2-232x300.jpg" alt="" width="232" height="300" srcset="/uploads-archive/2021/12/41F3M3hosRL._SX260_-2-232x300.jpg 232w, /uploads-archive/2021/12/41F3M3hosRL._SX260_-2-228x295.jpg 228w, /uploads-archive/2021/12/41F3M3hosRL._SX260_-2.jpg 260w" sizes="(max-width: 232px) 100vw, 232px" /></p>
<p>目次<br />
Chapter 1 Alibaba Cloud 入門<br />
Chapter 2 Alibaba Cloud を始めよう<br />
Chapter 3 仮想サーバサービス<br />
Chapter 4 ネットワークサービス<br />
Chapter 5 データベース<br />
Chapter 6 ストレージとCDN<br />
Chapter 7 ビッグデータ分析<br />
Chapter 8 アプリケーションサービス<br />
Chapter 9 メディアサービス<br />
Chapter 10 セキュリティ<br />
Chapter 11 IoT</p>
<p>アリババクラウドの、初めての日本語解説書。世界最大・最速規模のクラウドを支える技術・豊富なサービスをわかりやすく解説する本であります。</p>
<h2>なぜこの本に興味を持ったか？</h2>
<p>来年のから新しいサービスの開発が始まります。今までは仮想環境で開発してきましたが、今回新しいサービスの開発環境はアリババクラウドに決まりました。自分はクラウド環境での開発の経験や知識がないので、新しいサービスの開発に向けて、この本を購入しました。</p>
<h2>Elastic Compute Service (ECS)</h2>
<p>Elastic Compute Cloudはアリババクラウドで利用できるシステムのひとつです。<br />
アリババクラウド上に仮想サーバーを構築して自由に利用できるのが特徴で、クラウド環境において大きな役割を果たしてます。</p>
<p>Web上からマウスでクリックするだけでで仮想サーバーを構築することができます。</p>
<p>伸縮性や弾力性を意味するElasticという言葉通り、ユーザーの必要に応じてスペックや標準的なOSを変更できるのがECSの魅力です。<br />
継続利用時に起こりがちなスペック不足やディスク容量問題への解決が簡単です。</p>
<p>ECSでは仮想サーバの事を「インスタンス」という単位で扱います。<br />
インスタンスには様々な種類や性能のものがあるため、ユーザーの求める形で利用が可能です。<br />
インスタンスによって柔軟にWeb上のインフラ環境を構築することができるため、サーバーの増強が必要になった場合や、さらなる効率化を求めて改善が行われる際にも、対応がしやすくなります。<br />
さらにインスタンスはコピーも削除も簡単に行えるので、スピーディな業務レベルを維持可能です。<br />
新規でサービスを開発する場合などは、このインスタンスの特性を利用することで開発から公開までをスムーズに進めることができます。</p>
<h2>アリババクラウド上に仮想サーバーを構築する手順</h2>
<h3>仮想環境のスペックを選ぶ</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17380 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2.png" alt="" width="1918" height="773" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2.png 1918w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-300x121.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-1024x413.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-768x310.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-1536x619.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.16-2-228x92.png 228w" sizes="(max-width: 1918px) 100vw, 1918px" /></p>
<h3>OSやストレージ</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17381 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32.png" alt="" width="1914" height="728" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32.png 1914w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-300x114.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-1024x389.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-768x292.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-1536x584.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.32-228x87.png 228w" sizes="(max-width: 1914px) 100vw, 1914px" /></p>
<h3>作られたインスタンスの一覧</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17382 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49.png" alt="" width="1917" height="584" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49.png 1917w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-300x91.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-1024x312.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-768x234.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-1536x468.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.00.49-228x69.png 228w" sizes="(max-width: 1917px) 100vw, 1917px" /></p>
<p>VNC（Virtual Network Computing）機能もあって、ブラウザから直接仮想環境への操作</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-17383 size-full" src="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08.png" alt="" width="1915" height="970" srcset="/uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08.png 1915w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-300x152.png 300w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-1024x519.png 1024w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-768x389.png 768w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-1536x778.png 1536w, /uploads-archive/2021/12/スクリーンショット-2021-12-03-13.05.08-228x115.png 228w" sizes="(max-width: 1915px) 100vw, 1915px" /></p>
<p>&nbsp;</p>
<h2>業務で活かせることができる点</h2>
<p>Launch Cartの今の開発環境からクラウド環境へ移行する作業は私が担当を任せられたので、この本も読んでクラウドやインフラの知識を身に付けたいと思います。</p>


thumbnail_41F3M3hosRL._SX260_-2.jpg

41F3M3hosRL._SX260_-2.jpg

AWS/Azureに迫るAlibaba cloud　ーElastic Compute Service (ECS)

<h2>はじめに</h2>
<p>アジア越境ECに取り組まれる方で、このワードを知らない人はいないのではないでしょうか！アジアECで最大のお祭り、「独身の日」「ダブルイレブン」「W11」が今年も多くのECプラットフォームにて開催されました！</p>
<p>今回は、2021年の独身の日セールについて国別にまとめてみました。<br />
ぜひアジアEC市場の「熱」を感じ取ってください！</p>
<h2>独身の日とは？</h2>
<p>カップルがお菓子やお花をあげる幸せな日、「バレンタインデー」に対抗して出来た、11月11日独身の日。</p>
<p>日本ではポッキーの日としての方が馴染みが深いですが、アジア各国では独身の日に合わせて、ECプラットフォームでセールを行うことが最近の慣習となっています。</p>
<p>ただのセールではなく、欧米のブラックフライデー・サイバーマンデーに匹敵（もはや超えている&#8230;）する、誰もが待ち望んでいるイベントです。多くのEC企業様も、年間の売り上げの山を11月11日に合わせて、プロモーション企画などを計画されているそう。</p>
<h2>様々なプラットフォームで行われるW11</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-8878" src="/uploads-archive/lc/2021/11/0fec0ac57e1e908a91122d118b5ed5c3.jpg" alt="" width="527" height="296" srcset="/uploads-archive/lc/2021/11/0fec0ac57e1e908a91122d118b5ed5c3.jpg 527w, /uploads-archive/lc/2021/11/0fec0ac57e1e908a91122d118b5ed5c3-300x169.jpg 300w" sizes="(max-width: 527px) 100vw, 527px" /><br />
独身の日のセールイベントが始まったのは、中国のアリババグループ、天猫（Tmall）です。<br />
ですが、今ではアリババグループ系列のECプラットフォームのみならず、多くのプラットフォームでイベントが行われています。<br />
多くのメディアでは、中国の天猫の売上高のみを紹介するケースも多いのですが、本記事では他のプラットフォームの様子もできる限りお伝えします。<br />
※「W11セール」は、国やプラットフォーム、開催年によって期間やセール内容が異なります。過去のデータと比較しているものの中には、今年の方が期間が長いもの等も含まれます。ご了承ください。</p>
<h2>中国</h2>
<p>中国のメインのECプラットフォームは、天猫（Tmall）と京東（JD）です。<br />
下記、各プラットフォームごとの売り上げや今年の傾向です。</p>
<h3>天猫（Tmall）※アリババグループ</h3>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="ja">1年に1度の中国のメガセール「天猫ダブルイレブン」の期間中、アリババグループ本社所在地の中国·杭州「アリババ西渓キャンパス」に装飾が施されています。</p>
<p>色とりどりのデコレーション、可愛らしいゆるキャラなどにより、キャンパス内はお祭りのような雰囲気です！ <a href="https://t.co/7r09ovIcRe">pic.twitter.com/7r09ovIcRe</a></p>
<p>— アリババグループ Alibaba Group &#8211; Japan (@AlibabaJapanPR) <a href="https://twitter.com/AlibabaJapanPR/status/1458386983748014080?ref_src=twsrc%5Etfw">November 10, 2021</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>アリババグループの独身の日のセールス全体の流通額は、5403億元（約9兆6173億円）。29万ブランドが参加し、そのうち65%を中小企業や工業地帯にある製品メーカー、新ブランドだったそうです。<br />
※本記事内でご紹介するLazadaやその他アリババグループのECサイトも含みます。<br />
越境ECの観点では、中国国外から2万9000 以上のブランドが参加し、天猫国際（Tモール・グローバル）で130 万以上の新商品を発売されていたようです。</p>
<p>また、今年アリババグループでは、COP26の開催と環境への関心の高まりから、W11とSDGs（持続可能な開発目標）とキャンペーンも多くみられたのが特徴的でした。</p>
<h3>京東（JD）</h3>
<p>京東も、天猫に負けず劣らず、全体で3,491億元（約6兆2,349億円）の流通額を記録しました。</p>
<p>また、31ブランドが10億元を、Appleは100億元を超えたとの報道も。今年の特徴は、ファッションジャンルの販売者が最多なり、6000を超える新しいアパレルブランドが参加したそうです。</p>
<p>e-CNY（デジタル人民元）の紅袋（ラッキーマネー）を配布したとのニュースも目にし、EC企業がこのような試みを行うことによって中国のキャッシュレス化がますます加速しそうな雰囲気を感じました。</p>
<h2>東南アジア</h2>
<p>東南アジアのメインのECプラットフォームは、ShopeeとLazadaです。</p>
<h3>Shopee</h3>
<p><img loading="lazy" class="aligncenter size-full wp-image-8879" src="/uploads-archive/lc/2021/11/6172750ab2f8f.jpeg" alt="" width="820" height="360" srcset="/uploads-archive/lc/2021/11/6172750ab2f8f.jpeg 820w, /uploads-archive/lc/2021/11/6172750ab2f8f-300x132.jpeg 300w, /uploads-archive/lc/2021/11/6172750ab2f8f-768x337.jpeg 768w, /uploads-archive/lc/2021/11/6172750ab2f8f-600x263.jpeg 600w" sizes="(max-width: 820px) 100vw, 820px" /></p>
<p>Shopeeでは、11月11日だけでなく、9月9日の9.9から始まり、12月12日の12.12まで、毎月ゾロ目の日に大規模なセールが行われることが特徴です。</p>
<p>今年は、11.11セール期間中のアンバサダーにジャッキーチェンを起用し、セールの広告塔となっていました。これまでは各国ごとに少しずつセールスの雰囲気が異なっていた印象ですが、今年は複数国に渡りジャッキーチェン一本でプロモーションをしていたことが印象的でした。</p>
<p>報道では、11.11のセール期間中に20億アイテムが販売されたとあり、セールを心待ちにしていた消費者がいかに多かったかが分かります。また、Shopeeではアプリ内での顧客とのコミュニケーションに力を入れていることから、セール期間中のメッセージの送信数35億件、ライブ配信の総視聴時間が30万時間超の記録を達成。</p>
<p>また、日本商品で最も人気だったカテゴリーが、「ヘルスケア・化粧品」だったそうです。</p>
<h3>Lazada　※アリババグループ</h3>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="ja"><a href="https://twitter.com/hashtag/Lazada1111?src=hash&amp;ref_src=twsrc%5Etfw">#Lazada1111</a> キャンペーンのハイライトにご注目<br />
これらの数字はどれも日本ブランド・ <a href="https://twitter.com/hashtag/%E6%97%A5%E6%9C%AC%E8%B6%8A%E5%A2%83?src=hash&amp;ref_src=twsrc%5Etfw">#日本越境</a> セラーさんが支えてくれたおかげです 当初東南アジアでゼロから1111キャンペーンを作り上げ、今は <a href="https://twitter.com/hashtag/Lazada?src=hash&amp;ref_src=twsrc%5Etfw">#Lazada</a> のワンストップサポートを通じて沢山の日本越境セラーさんが東南アジアデビューに成功しています <a href="https://t.co/KDCWL5iTz9">pic.twitter.com/KDCWL5iTz9</a></p>
<p>— Lazada Japan (@lazadajapan) <a href="https://twitter.com/lazadajapan/status/1459340242859737088?ref_src=twsrc%5Etfw">November 13, 2021</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><br />
LazadaもShopeeと同じようにゾロ目の日にセールを行っていますが、特に11.11のセールでは売上が好調だったようです。<br />
各国ごとや商品ジャンルごとの売上のデータがなかなか見つからなかったのですが、マレーシアの中小企業がセール期間中に100万RMの流通額を記録したなどのニュースもあり、11.11セールが消費者にとっても、販売者にとっても重要なイベントであることが伺えました。</p>
<h2>まとめ</h2>
<p>今回は、アジア越境ECでも注目度の高いトピック、独身の日のセールについて2021年の様子をご紹介しました。1年の売り上げの山場となるイベント、ものすごい盛り上がり様でしたね。</p>
<p>独身の日は、一般的にECモールで行われるイベントとの認識が強いですが、実は自社サイトで運営されている企業様もECモールと同じようにお得なオファーを出しています。（日本でも、BlackFridayのセールはAmazonや楽天だけでなく、他の自社サイトや店舗でも行われているのと同じですね。）</p>
<p>まだ越境ECには挑戦していない企業様であっても、競合の独身の日のプロモーション手法だったり、ブランドコンセプトが似ているサイトのセールの打ち方などを調べてみると、いざ越境EC始める際に役立つかもしれません。ぜひ探してみてくださいね。</p>
<p><small><br />
《参考・画像出典》<br />
<a href="https://netshop.impress.co.jp/node/9245" rel="noopener" target="_blank">ネットショップ担当フォーラム</a>, <a href="https://www.wwdjapan.com/articles/1286632" rel="noopener" target="_blank">WWDJapan</a>, <a href="https://ecnomikata.com/ecnews/32625/" rel="noopener" target="_blank">ECのミカタ</a>,<a href="https://eczine.jp/news/detail/10370" rel="noopener" target="_blank">ECZine</a>, <a href="https://www.tsuhannews.jp/shopblogs/detail/67893" rel="noopener" target="_blank">通販通信</a>,<a href="https://jp.alibabanews.com/tmall_2021-11-11-final/" rel="noopener" target="_blank">AlibabaNews</a>, <a href="https://themalaysianreserve.com/2021/11/25/msmes-local-brands-exceed-rm1m-on-lazada-11-11-sale/?__cf_chl_jschl_tk__=ifaHurA8bHpud38WEzpTfBsjbSRIv0ohnl2x8.gftjg-1638151865-0-gaNycGzNCOU" rel="noopener" target="_blank">Malaysian Reverse</a><br />
</small>

small_c94ec4e9a8b86684043ddc5cd88cf6cf.jpg

thumbnail_c94ec4e9a8b86684043ddc5cd88cf6cf.jpg

c94ec4e9a8b86684043ddc5cd88cf6cf.jpg

【過去最高流通額】2021年独身の日セール（W11）がやっぱりすごかった。

<h2>はじめに</h2>
<p>アジアでも有数の先進国であるシンガポール。EC市場もかなり発展しており、多くのECモールも進出しています。クレジットカードの普及率やEC利用人口も非常に高く、現金以外の決済手段や物流がまだ成熟していない他の東南アジア地域に比べて、安定感があります。</p>
<h2>国の定めるEC返品ルールはない？</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-8957" src="/uploads-archive/lc/2021/11/ikea.jpg" alt="" width="737" height="734" srcset="/uploads-archive/lc/2021/11/ikea.jpg 737w, /uploads-archive/lc/2021/11/ikea-300x300.jpg 300w, /uploads-archive/lc/2021/11/ikea-150x150.jpg 150w, /uploads-archive/lc/2021/11/ikea-600x598.jpg 600w" sizes="(max-width: 737px) 100vw, 737px" /></p>
<p>そんなシンガポールですが、ざっと調べた限りでは、国の定めるクーリングオフ制度のようなものは見つかりませんでした。返品の対応方法は、どうやらショップ毎に異なるようです。</p>
<p>大手ECモールの返品ルールを参考に挙げてみます。<br />
※別途商品やショップによって細かい条件が設定されている場合があります。</p>
<ul>
<li>LAZADA：LazMallの商品なら15日以内受付で、基本的に理由は不問。LazMall以外の商品の場合、7日以内なら返品可ですが、「気が変わったから」はNG</li>
<li>Qoo10：ショップによって異なります</li>
<li>Shopee：Shopee Malの商品なら15日以内なら、基本的に理由は問わず返品可能。マーケットプレイス商品の場合は、事前にショップに問い合わせの上、個別対応になるようです</li>
<li>ZALORA：30日以内なら返品可能</li>
<li>Amazon：30日以内なら返品可能</li>
<li>IKEA：365日以内なら返品可能</li>
</ul>
<p>とはいえ、もちろん販売者が返品に関するルールを定めずに好き勝手に商売ができるわけではなく、購入者が支払前に小売業者に対して返金ポリシーの開示を求める権利は保証されているようです。</p>
<h2>Drop Off Pointとは？</h2>
<p>返品方法としては、返品ラベルを利用して返送するという手段もありますがが、大手ブランドのECやECモールの多くは、「Drop Off」という選択肢も提示しています。街の色々なところに設置されたDrop Off Pointに商品を持っていけば、わずかな配送料（無料の場合も少なくない）で返品ができるというサービスです。</p>
<p>街中で荷物を受け取ることが出来る宅配ロッカーなどは日本にもありますが、返品に利用できるというのは今のところ聞いたことがありません。</p>
<h3>POPStation</h3>
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);" data-instgrm-permalink="https://www.instagram.com/p/COT6XiFrwJ5/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14">
<div style="padding: 16px;">
<p>&nbsp;</p>
<div style="display: flex; flex-direction: row; align-items: center;">
<div style="background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div>
<div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div>
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div>
</div>
</div>
<div style="padding: 19% 0;"></div>
<div style="display: block; height: 50px; margin: 0 auto 12px; width: 50px;"></div>
<div style="padding-top: 8px;">
<div style="color: #3897f0; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 550; line-height: 18px;">この投稿をInstagramで見る</div>
</div>
<div style="padding: 12.5% 0;"></div>
<div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;">
<div>
<div style="background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div>
<div style="background-color: #f4f4f4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div>
<div style="background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div>
</div>
<div style="margin-left: 8px;">
<div style="background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div>
<div style="width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg);"></div>
</div>
<div style="margin-left: auto;">
<div style="width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div>
<div style="background-color: #f4f4f4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div>
<div style="width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div>
</div>
</div>
<div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;">
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div>
<div style="background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div>
</div>
<p>&nbsp;</p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;"><a style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;" href="https://www.instagram.com/p/COT6XiFrwJ5/?utm_source=ig_embed&amp;utm_campaign=loading" target="_blank" rel="noopener">Singapore Post(@mysingpost)がシェアした投稿</a></p>
</div>
</blockquote>
<p><script async src="//www.instagram.com/embed.js"></script></p>
<p>Drop Offのサービスの1つが、シンガポール郵便局が提供するPOPStationです。ファッションECモールのZALORAやLAZADAなどでも利用することができます。</p>
<p>自宅への集荷サービスもありますが、POPStationなら24時間好きな時に返品でき、ショッピングモールや郵便局など、街の色々なところに設置してあるので、何かのついでに持っていけば、時間に縛られず楽ですよね（GoogleMapで「POPStation」を検索すれば、どこにあるか簡単に分かります）。</p>
<p>見た目は普通のロッカーのような感じですが、ここで返品ラベルも印刷できるので、スマホと商品さえ持っていけば返品できます。</p>
<h2>まとめ</h2>
<p>欧米発のECモールは元の国同様、購入者の購買体験を重視したルールを定めており、そうでないECは、台湾や日本に近いルールの所が多そうです。多様な文化を抱えるシンガポールらしい状況と言えますね。</p>
<p>とはいえ、近年のトレンドとしては、やはりトータルのショッピング体験の提供を重視する傾向が強まっているのは間違いないので、これからシンガポール向けECを検討している場合は、そういった点も重視すべきでしょう。</p>
<p><small><br />
《参考・画像出典》<a href="https://www.ikea.com/sg/en/customer-service/returns-claims/return-policy/" target="_blank" rel="noopener">IKEA</a>, <a href="https://speedpost.com.sg/what-we-offer/POPStation/Services.html" target="_blank" rel="noopener">SpeedPost</a>, <a href="https://avenueone.sg/style-grooming/best-e-commerce-sites-with-return-policies/" target="_blank" rel="noopener">avenueone</a>, <a href="https://blog.moneysmart.sg/shopping/online-shopping-return-policy/" target="_blank" rel="noopener">moneysmart</a><br />
</small></p>

large_jisun-han-cjSsSQ7Yedk-unsplash.jpg

medium_jisun-han-cjSsSQ7Yedk-unsplash.jpg

small_jisun-han-cjSsSQ7Yedk-unsplash.jpg

thumbnail_jisun-han-cjSsSQ7Yedk-unsplash.jpg

jisun-han-cjSsSQ7Yedk-unsplash.jpg

アジア越境ECで徐々に注目集まる、シンガポールECでの返品事情

<p><img decoding="async" loading="lazy" class="aligncenter" src="https://images-na.ssl-images-amazon.com/images/I/61KPtQRcdKL.jpg" alt="セキュア・バイ・デザイン" width="1000" height="1286" /></p>
<p>&nbsp;</p>
<p><span class="author notFaded" data-width="181">Dan Bergh Johnsson ,<span class="contribution"><span class="a-color-secondary"> </span></span></span><span class="author notFaded" data-width="154"><span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;closeButtonLabel&quot;:&quot;著者ダイアログポップオーバーを閉じる&quot;,&quot;name&quot;:&quot;contributor-info-B09FQ8X6L1&quot;,&quot;position&quot;:&quot;triggerBottom&quot;,&quot;popoverLabel&quot;:&quot;著者ダイアログポップオーバー&quot;,&quot;allowLinkDefault&quot;:&quot;true&quot;}">Daniel Deogun</span><span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="133">Daniel Sawano<span class="contribution"><span class="a-color-secondary">, </span></span></span><span class="author notFaded" data-width="99">須田智之 <span class="contribution"><span class="a-color-secondary">(翻訳)</span></span></span></p>
<h1>どんな本なのか</h1>
<p>ソフトウェア、特にインターネット上で展開されるサービスは常に危険に晒されている状態。これを如何にセキュアに出来るかは常時付き纏う課題と言えます。</p>
<p>この本には、Eric Evans のドメイン駆動設計(DDD)に基づいて確立する、セキュアなソフトウェア設計を指針や実例が記載されています。</p>
<p>「セキュリティ対策本」というよりは、「ソフトウェア設計を良くすることによって、自然とセキュアになっていること」を目指しているようです。</p>
<p>&nbsp;</p>
<h1>なぜこの本を読もうと思ったのか</h1>
<p>サービスのセキュリティを確保する際、旧来セキュリティアプライアンスに頼ることが主ですが、サービスを継続する上で、適用し辛い場面も往々にしてあります。</p>
<p>そもそもなぜセキュリティアプライアンスに頼らなければならないのかを考えた時に、セキュアなシステム企画や要件定義・設計に行き着くためです。</p>
<p>&nbsp;</p>
<h1>注目した点</h1>
<p>本書は、ほぼDDDが絡む内容となっており、DDDはソフトウェアの価値を高めるために考案されたと言えるでしょう。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Clean_Architecture_%2B_DDD%2C_full_application.svg" width="834" height="621" /></p>
<p>DDD を適用することは、旧来のように開発自体をコストとすることから、事業投資としての意識になること、また、ドメインごとの知識をエンジニアと非エンジニアで共有できることの他に、ソフトウェアの複雑さを抑えることができます。</p>
<p>特に 本書の「<strong>第7章 状態の複雑さの軽減」</strong>においては、この複雑さの軽減によりセキュアなコードやアーキテクトが出来上がることのメリットについて言及されており、「部分的普遍エンティティ」や「状態オブジェクトの導入」などのテクニックが紹介されています。</p>
<h1>まとめ</h1>
<p>セキュア・バイ・デザインを適用することで、ソフトウェアがセキュアになるだけでなく、IPA公開している <a href="https://www.ipa.go.jp/files/000055823.pdf">セキュア・バイ・デザイン入門 </a> によれば開発・運用工数の削減に言及されています。</p>
<p>スターフィールドのプロダクトにおいても、よりセキュアなシステム企画・設計をし、より価値のあるサービスを提供していきたいと思います。</p>


large_61KPtQRcdKL.jpg

medium_61KPtQRcdKL.jpg

small_61KPtQRcdKL.jpg

thumbnail_61KPtQRcdKL.jpg

61KPtQRcdKL.jpg

書籍レビュー: セキュア・バイ・デザイン &#8211; 安全なソフトウェア設計 &#8211;

コードを綺麗にするために気をつけること

<h1>要件定義とは</h1>
<p>作って欲しい人と作る人の間で「これを実現しましょう」という合意を定めることです。</p>
<p>要件を日常的な単語に置き換えると「注文（オーダー）」が妥当なものになり、</p>
<p><strong>作ってほしい人が　作る人に出す　依頼事項（リクエスト）</strong></p>
<p>ということになります。</p>
<h2>書籍　はじめよう！要件定義　〜ビギナーからベテランまで〜</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17310" src="/uploads-archive/2021/11/youken-207x300.jpg" alt="はじめよう！要件定義" width="207" height="300" srcset="/uploads-archive/2021/11/youken-207x300.jpg 207w, /uploads-archive/2021/11/youken-708x1024.jpg 708w, /uploads-archive/2021/11/youken-768x1111.jpg 768w, /uploads-archive/2021/11/youken-1062x1536.jpg 1062w, /uploads-archive/2021/11/youken-228x330.jpg 228w, /uploads-archive/2021/11/youken.jpg 1092w" sizes="(max-width: 207px) 100vw, 207px" /><br />
<a href="https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%81%8B%E3%82%89%E3%83%99%E3%83%86%E3%83%A9%E3%83%B3%E3%81%BE%E3%81%A7-%E7%BE%BD%E7%94%9F-%E7%AB%A0%E6%B4%8B/dp/4774172286/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=2LBORBVITPUQU&amp;keywords=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9&amp;qid=1636621831&amp;s=books&amp;sprefix=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%2Cstripbooks%2C291&amp;sr=1-1" target="_blank" rel="noopener">はじめよう！要件定義</a></p>
<h2>この本を読もうと思ったのか</h2>
<p>エンジニアとしてコードをかいたり、技術的なところを磨くことは大事だが、お客様が満足できるサービスを提供するいい仕事や効率のよい仕事をしようと思ったときに、最初の要件定義のところをおざなりにするとお客様にも喜んでいただく仕事ができない、最初の要件があいまいだったばっかりにせっかくつくった機能をもう一度やり直し、自分に時間的な負担もかかり、お客様に迷惑がかかるなど誰にとってもいいことがない状況になり得るので、お互いのためにいい仕事ができるようにしっかりと要件定義をできるようにしたいと思ったので読みました。</p>
<h2>なぜ要件定義をするのか？</h2>
<p>世の中には「お任せ」というオーダーやリクエストもよく見かけます。ではなぜ要件が必要なのか。</p>
<p>たとえば「美味しいものを作って」と依頼したとします。その依頼に基づいてコックさんがコックさんなりに考えた結果、ニンジングラッセを作ったとします。でもリクエストした人がニンジンが苦手だった場合、そのニンジングラッセが本当においしかったとしても決して受け入れることができないでしょう。</p>
<p>もしあなたがコックさん側だとしたら「だったら先にニンジンはNGって言っといてよ」という気持ちになると思います。そうならないように、納めるために必要な条件を後出しにするのではなく、先に提示して合意した上でその仕事を行うことが大切で</p>
<p>言わなくても伝わる「はず」という仮説のもとにお互いに仕事を依頼したりされたりし、その結果生じる困り事を事前に回避するための知恵それが要件定義です。</p>
<h3>定義すべき要件の内訳</h3>
<p><strong>・UI</strong></p>
<p><strong>・機能</strong></p>
<p><strong>・データ</strong></p>
<h4>UI</h4>
<p>UIとはUser Interface(ユーザーインターフェイス)の略です。「ユーザーに接するもの」</p>
<p>代表例は画面（スクリーン）です。PCのみならずスマートデバイスの急速な普及によってUIといえば画面の話になることが大半です。UIとは基本的に画面系である前提に話を進めます。</p>
<h4>機能</h4>
<p>機能とは「ソフトウェアにやらせる仕事」の総称です。</p>
<p>たとえば、「消費税を計算する」などが機能になります。</p>
<h4>データ</h4>
<p>3つ目がデータです。先程の「消費税を計算する」という機能の場合計算結果の消費税はデータです。また計算の基となる「売上金額」もデータです。</p>
<p>&nbsp;</p>
<p>この3つの要素「UI」「機能」「データ」が明確に定まってそこで初めてプログラマーはソフトウェアを作ることができます。つまりこの3つの要素がソフトウェア開発における要件として必要な情報になります。</p>
<h3>ゴール＝完成したソフトウェアの状態とは</h3>
<p>「完成したソフトウェア」というゴールを達成するには</p>
<p><strong>そもそも何をもって完成したと納得できるのか</strong></p>
<p>ということを考える必要があります。作り手が側がいくら「ちゃんとできました」と言っても依頼主が</p>
<p>納得しない限りは完成したとは言えません。</p>
<p>依頼主はいったい何をどうすることで完成しているかどうかを確認することができるのか、それは、</p>
<p><strong>UIを通じてソフトウェアを操作すること</strong>によってです。</p>
<p>その上で<strong>操作に対してきちんと機能が動作すること</strong></p>
<p>さらに必要なデータが保持されていることつまり、<strong>機能が必要とするデータがきちんと揃っていること</strong></p>
<p>が大事になります。</p>
<h3>この本の内容をまとめると</h3>
<p>画面遷移図を描こうになります。それ以外は要件定義そのものではなくその前後の工程で行うべき作業だということです。つまり、要件定義は上流工程ではなく中流工程であると言えます。企画と実装の間のブリッジそれが要件定義です。他の工程と混ざっているところを丁寧に削ぎ取った結果、</p>
<p>（UI、機能、データ）になり、それらを図示化したものが画面遷移図になります。</p>
<p>(例）</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17332" src="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png" alt="" width="300" height="144" srcset="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png 300w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-1024x493.png 1024w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-768x370.png 768w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-228x110.png 228w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55.png 1520w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>業務で活かせることができる点</h3>
<p>自分自身も入社前に自らのポートフォリオ作成を設計から経験し、アプリケーション詳細設計書、画面遷移図、テーブル定義書、ER図、ワイヤーフレームなど制作しましたが、</p>
<p>画面遷移図に関してはこのページにこのボタンがあって、押すとデータが作成され、別の画面に遷移する。作成が失敗すると元の画面でバリデーションメッセージを表示させるなど、遷移図を描こうとしたら一つ一つの機能をしっかりイメージでき、把握していないとできないと思いました。</p>
<p>画面遷移図はアプリケーション開発の実装中に、ここはどうだったかな？どれくらいの機能をつくる必要があるのか、期間はこれくらいかかるかななど、その都度自分が迷わないための道標的な役割を果たし、依頼者にご満足いただけるものを提供することにもつながるのかなと思いましたので、業務でも実践していきたいです。</p>


large_youken-768x1111.jpg

medium_youken-768x1111.jpg

small_youken-768x1111.jpg

thumbnail_youken-768x1111.jpg

youken-768x1111.jpg

要件定義とは？を解決する。

BEM×SASSってもう古いの？？モダンCSSを試してみる(styled-components編)

<p>前期個人OKRで本「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読みました。</p>
<p><div id="attachment_8841" style="width: 224px" class="wp-caption alignnone"><a href="https://www.amazon.co.jp/Atomic-Design-%EF%BD%9E%E5%A0%85%E7%89%A2%E3%81%A7%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%82%92%E5%8A%B9%E7%8E%87%E8%89%AF%E3%81%8F%E8%A8%AD%E8%A8%88%E3%81%99%E3%82%8B-%E4%BA%94%E8%97%A4-%E4%BD%91%E5%85%B8-ebook/dp/B07CJ5TLK2"><img aria-describedby="caption-attachment-8841" loading="lazy" class="wp-image-8841 size-medium" src="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png" alt="AtomicDesign01" width="214" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign01-214x300.png 214w, /uploads-archive/lc/2021/11/AtomicDesign01.png 568w" sizes="(max-width: 214px) 100vw, 214px" /></a><p id="caption-attachment-8841" class="wp-caption-text">出典：Amazon</p></div></p>
<p><span style="font-size: 16px;">本の内容を要約すると</span><span class="md-plain md-expand" style="font-size: 16px;">全部６章で、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第１、２章はUI設計における現状の問題とコンポーネントベースUI開発が必要な理由など、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第３章では、Atomic DesignによるUIコンポーネント設計についての具体的な内容が、</span></p>
<p class="md-end-block md-p"><span class="md-plain">第４、５、６章は前回のブログで紹介した「storybook」と言うUI管理ツールを用いた実践・テスト及び現場における開発ポイントなどで構成されています。</span></p>
<p>今回は、第２、３章元にコンポーネントとAtomic Designの話を少ししたいと思います。</p>
<h2>コンポーネント単位で開発する理由・メリットは？</h2>
<p>コンポーネント化したUIを組み立ていく開発は建築や自動車などにも似ています。大規模であるにもかかわらず、利用者が触れる部分（UI）は、部品単位で組み立てているので、ほとんど不具合はありません。</p>
<ul>
<li class="md-end-block md-p md-focus"><span class="md-plain">コンポーネント単位でテストできる</span></li>
<li class="md-end-block md-p"><span class="md-plain">不具合のリスクを減らせる</span></li>
<li class="md-end-block md-p"><span class="md-plain">メンテナンスがしやすくなる</span></li>
<li class="md-end-block md-p"><span class="md-plain">解決する問題が小さくなる</span></li>
</ul>
<h2>Atomic Designとは？</h2>
<p><a href="https://bradfrost.com/"><span class="md-plain md-expand">アメリカのWebデザイナーBrad Frost氏</span></a><span class="md-plain md-expand">が提唱した、小さいUIコンポーネントを組み合わせて、より大きなコンポーネントを作っていくための<strong>UIデザイン手法(方法論)</strong>です。Atomic Designの「Atomic」は「原子の〜」の意味で、化学からヒントと得たそうで、「Design」は見た目のデザインよりは「設計」の意味が強いです。</span></p>
<p><div id="attachment_8842" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8842" loading="lazy" class="wp-image-8842" src="/uploads-archive/lc/2021/11/AtomicDesign02.png" alt="AtomicDesign02" width="600" height="300" srcset="/uploads-archive/lc/2021/11/AtomicDesign02.png 1015w, /uploads-archive/lc/2021/11/AtomicDesign02-300x150.png 300w, /uploads-archive/lc/2021/11/AtomicDesign02-768x384.png 768w, /uploads-archive/lc/2021/11/AtomicDesign02-600x300.png 600w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8842" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<p class="md-end-block md-p"><a href="https://atomicdesign.bradfrost.com/table-of-contents/">Atomic Design</a>においては、「Atoms（原子）」「Molecules（分子）」「Organisms（有機体）」「Templates（テンプレート）」「Pages（ページ）」の5つのコンポーネントを作り上げることでWebサイトを完成させます。それぞれのコンポーネントについて<span class="md-plain md-expand">各層の役割分担を説明します</span>。</p>
<h3 class="md-end-block md-p"><span class="md-plain">Atoms(原子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">デフォルトUI、スタンダードなUI、レイアウトパタン、セマンティックなデザイン要素（見出し、アイコンなど同じ意味を持つコンテンツに常に同じ見た目を）などはこの層で管理します。デザインの統一性を支える部分となります。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Molecules(分子)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">ユーザーの動機に対する機能（検索、メッセージフォームなど）を提供します。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Organisms(有機体)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">独立して成立するコンテンツを提供します。</span><span class="md-plain">分子との分界が少し曖昧ですが、</span></p>
<p class="md-end-block md-p"><span class="md-plain">分子は、 独立して存在できるコンポーネントではなく、他のコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント</span></p>
<p class="md-end-block md-p"><span class="md-plain">有機体は、独立して存在できるスタンダードアローンなコンポーネントです。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Templates(テンプレート)</span></h3>
<p class="md-end-block md-p"><span class="md-plain">その名の通りページの雛形です。雛形なので具体的なコンテンツは持ちませんが、原子〜有機体層のコンポーネントを実際サービスのページと同様に配置して、レイアウト構造を集中して確認できます。ワイヤの役割だと思います。</span></p>
<h3 class="md-end-block md-p"><span class="md-plain">Pages(ページ)</span></h3>
<p class="md-end-block md-p md-focus"><span class="md-plain">テンプレート層のコンポーネントに実際のコンテンツを流し込んだ物がページです。つまり、ユーザーが実際に触るプロダクトになります。</span></p>
<p>&nbsp;</p>
<p><div id="attachment_8843" style="width: 610px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-8843" loading="lazy" class="wp-image-8843" src="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png" alt="AtomicDesign03" width="600" height="399" srcset="/uploads-archive/lc/2021/11/AtomicDesign03-1024x681.png 1024w, /uploads-archive/lc/2021/11/AtomicDesign03-300x200.png 300w, /uploads-archive/lc/2021/11/AtomicDesign03-768x511.png 768w, /uploads-archive/lc/2021/11/AtomicDesign03-600x399.png 600w, /uploads-archive/lc/2021/11/AtomicDesign03.png 1133w" sizes="(max-width: 600px) 100vw, 600px" /><p id="caption-attachment-8843" class="wp-caption-text">出典：<a href="https://atomicdesign.bradfrost.com/chapter-2/">https://atomicdesign.bradfrost.com/chapter-2/</a></p></div></p>
<h2 class="md-end-block md-p"><span class="md-plain">終わりに</span></h2>
<p class="md-end-block md-p md-focus"><span class="md-plain">Atomic Designって絶対的な正解ではなく、場合によって従来の画面ごとにUIデザインをした方がいい時もあると思うので、現状に合わせて合うものを取り入れたり、柔軟性を持つのが大事だと思います。究極的な目標は同じく堅牢で使いやすいかつ効率よく作ることなので。</span></p>


コンポーネントとAtomic Design


<p>2021年11月09日、信金中央金庫様主催の「Shopee」出品サポートに係る越境EC活用セミナーに登壇させていただきました。</p>



<p>弊社は、Shopee出品施策を活用したのち、プラスアルファでできる施策として、自社サイト越境ECと補助金・助成金を活用したご提案をさせていただきました。</p>



<p>日本の中小企業様が、海外展開や越境ECに挑戦をするためのヒントになりましたら幸いです。</p>


【信金中央金庫様主催】越境EC活用セミナーに登壇させていただきました。

<p>2021年10月28日、Lazada Japan様（以下、Lazada）、アジアンブリッジ株式会社様（以下、アジアンブリッジ）をお招きして、東南アジア越境ECセミナーを開催しました。今回は、そのダイジェスト版を実際にセミナーで用いられたスライド（一部抜粋）を使ってご説明いたします。</p>
<ol>目次</p>
<li>東南アジアを縦横無尽 &#8211; Lazadaがお手伝いします。</li>
<li>ブランドの「顔」となるECサイトを作ろう！自社で行うアジア越境ECの戦略と注意点</li>
<li>越境ECを開始する際の進出形態とその注意点</li>
<li>事業黒字化は戦略次第！海外販売計画の作り方</li>
</ol>
<h2>１．東南アジアを縦横無尽 &#8211; Lazadaがお手伝いします。</h2>
<p>第１部では、Lazadaのアナン様より、東南アジアの市場について、そして東南アジアで1億人が利用しているLazadaのサービスについてお話しいただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8814" src="/uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9.png" alt="" width="1560" height="875" srcset="/uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9.png 1560w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-300x168.png 300w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-1024x574.png 1024w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-768x431.png 768w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-600x337.png 600w, /uploads-archive/lc/2021/11/adbad41f5422a3f8a841b1238388ceb9-1536x862.png 1536w" sizes="(max-width: 1560px) 100vw, 1560px" /></p>
<p>Lazadaは、アリババグループ傘下の東南アジア各国で展開をされているECマーケットプレイスです。アリババグループのノウハウを駆使して、購入者にとってもセラーにとっても使いやすいサービスを提供されています。</p>
<p>例えば、購入者1人1人に合わせたおすすめ商品が表示されたり、ECの買い物以外にも航空券の予約や、タクシーの配車等もLazadaアプリ上で行うことができます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8815" src="/uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0.png" alt="" width="1565" height="881" srcset="/uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0.png 1565w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-300x169.png 300w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-1024x576.png 1024w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-768x432.png 768w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-600x338.png 600w, /uploads-archive/lc/2021/11/669bb5fc77a7e7803c8cc994534994c0-1536x865.png 1536w" sizes="(max-width: 1565px) 100vw, 1565px" /></p>
<p>また、Lazadaは初めて越境ECを行うセラー様にとっても使いやすいサービスです。日本の倉庫から東南アジアの各購入者へ輸送することのできる、自社物流を展開しています。東南アジアでメジャーな代引決済にも対応可能です。</p>
<h2>２．ブランドの「顔」となるECサイトを作ろう！自社で行うアジア越境ECの戦略と注意点</h2>
<p>第2部では、弊社の綛谷より、越境ECをECモールと自社サイトで併用するメリットや、初期コストを抑える補助金のご提案などをさせていただきました。</p>
<p>今回のセミナーのタイトルにもありますが、「ECモール」 or 「自社サイト」ではなく、どちらも併用して、複数チャネルを活用することで、中長期的な越境EC事業の成功を見込みましょうというご提案をさせていただきました。ECモールと自社サイトは強み、弱みが大きく異なり、それぞれの強みを生かすという意味でも、併用することはメリットがあります。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8820" src="/uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6.jpg" alt="" width="960" height="540" srcset="/uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6.jpg 960w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-300x169.jpg 300w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-768x432.jpg 768w, /uploads-archive/lc/2021/11/a9783d6aa22c29b60f0dd4ecbb60f1c6-600x338.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>また、ECモールに比べ、自社サイトの構築は初期投資が大きいですが、補助金や助成金を活用することで、負担を減らすことが可能です。上記、実際に2021年度にIT導入補助金を活用して、越境ECサイトを制作した事例です。</p>
<h2>３．越境ECを開始する際の進出形態とその注意点</h2>
<p>第3部では、アジアンブリッジの嶋様より、海外進出の形態と、越境ECの注意点についてお話しいただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8816" src="/uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b.jpg" alt="" width="1320" height="909" srcset="/uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b.jpg 1320w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-300x207.jpg 300w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-1024x705.jpg 1024w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-768x529.jpg 768w, /uploads-archive/lc/2021/11/3516ccb853c3cd0634cbb2b71208c48b-600x413.jpg 600w" sizes="(max-width: 1320px) 100vw, 1320px" /></p>
<p>まず初めに、嶋様がタイ在住ということで、現地事情について簡単に教えていただきました。タイなど、東南アジア各国では、主要なショッピングモールにて日本の製品が多数販売されています。また、バンコクに新しくできたスシローは3時間待ちの列ができるなど、その人気の高さも伺えます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8817" src="/uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d.png" alt="" width="1318" height="911" srcset="/uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d.png 1318w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-300x207.png 300w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-1024x708.png 1024w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-768x531.png 768w, /uploads-archive/lc/2021/11/165ca88fd550dbf2a23db61d457fb69d-600x415.png 600w" sizes="(max-width: 1318px) 100vw, 1318px" /></p>
<p>そして、越境ECスタート前に事前調査・検討するべき事項についても、お話しいただきました。現地事情を把握した上で、どのような戦略を立てることができそうなのか、検討する必要があります。</p>
<h2>４．事業黒字化は戦略次第！海外販売計画の作り方</h2>
<p>最後には、アジアンブリッジの濱崎様より、越境ECの成功するポイント、販売計画の立て方や、実際の事例についてご紹介いただきました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8818" src="/uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0.png" alt="" width="1319" height="914" srcset="/uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0.png 1319w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-300x208.png 300w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-1024x710.png 1024w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-768x532.png 768w, /uploads-archive/lc/2021/11/13a589d29b483f991ebe29379f9993c0-600x416.png 600w" sizes="(max-width: 1319px) 100vw, 1319px" /></p>
<p>まず初めに、海外販売が成功されている企業様の特徴として、いくつかのポイントをご紹介いただきました。中長期的な目標の中で、現場の意思決定がはやい企業様の方が、成功されているそうです。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8819" src="/uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42.png" alt="" width="1318" height="913" srcset="/uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42.png 1318w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-300x208.png 300w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-1024x709.png 1024w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-768x532.png 768w, /uploads-archive/lc/2021/11/570a40321057c6594c9703b5f315ba42-600x416.png 600w" sizes="(max-width: 1318px) 100vw, 1318px" /></p>
<p>また、ECモールと自社サイトを併用したケースでの事例をお話しいただきました。自社ECへの誘導広告への露出を増やすと、自社ECでもECモールでも売上が上がる相関関係があることが分かります。このような複数チャネルでの販売施策を、越境ECを検討する段階で、検討事項に入れておいても良いでしょう。</p>
<h2>最後に</h2>
<p>終了時刻が過ぎても、たくさんの方が質問をお寄せくださり、大変盛り上がるセミナーとなりました。少しでも、東南アジア越境ECをご検討中の企業様のお役に立つ情報が提供できましたら幸いです。</p>
<p>今回のセミナー内容や、各社サービスに関してご質問がございましたら、各社にお問い合わせください。</p>


越境EC in 東南アジア！複数の販路を活用し、効果的に売り上げを伸ばす戦略＆費用大公開！セミナーレポート

thumbnail_51MgH8Jmr3L-3.jpg

51MgH8Jmr3L-3.jpg

わかりやすいコードを書くシンプルなテクニック


<p></p>



<h2>はじめに</h2>



<p class="crayon-selected">「越境ECでどんな商品が売れているの？」というのは非常によく聞かれる質問ですが、とても答えるのが難しい質問でもあります。</p>



<p>そんななか、「お菓子」を詰め合わせて “毎月１回・定額” で届けるサブスクリプションボックスが越境ECでたいへん伸びているので、こちらでシェアします！</p>



<h2>お菓子詰め合わせの定期便がすごい</h2>



<h3>高級路線のBokksu（ボックス）</h3>



<p>2016年に日本のお菓子をサブスクリプションで提供するサービスをアメリカで開始。コロナ渦で売上を前年比3倍に伸ばし、年間継続売上高は250万ドル（約28億円）に。</p>



<p>月額サブスクで49.95ドル（約5500円）。</p>



<p>日本のスナックを寄せ集めたモノではく、日本の地方メーカーによる名産お菓子を毎月テーマごとにキュレーションし、作り手の職人の物語とともに「体験」として届けています。</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="482" height="596" src="/uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec.png" alt="" class="wp-image-8757" srcset="/uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec.png 482w, /uploads-archive/lc/2021/10/79049a17ad50ca0e0cde2fc9f949c6ec-243x300.png 243w" sizes="(max-width: 482px) 100vw, 482px" /></figure>



<h3>スナック菓子のTokyo Treat Shop</h3>



<p>コンビニやスーパーで見かけるようなスナック菓子の詰め合わせを米国を中心に120か国に向けて越境ECをしています。毎月テーマを決めて、そのテーマに合わせたお菓子やドリンクを詰めています。2021年9月には 「Okinawa」と書いてあって、関東住みの私も知らないようなお菓子までありそうです。</p>



<p>月額のサブスク代は3,800円ほど。</p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="1024" height="523" src="/uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1024x523.png" alt="" class="wp-image-8791" srcset="/uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1024x523.png 1024w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-300x153.png 300w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-768x392.png 768w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-600x306.png 600w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91-1536x784.png 1536w, /uploads-archive/lc/2021/11/ebbac8924be51d1a436f11413a458e91.png 1755w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<h3> 世界中のお菓子が毎月届くTreat </h3>



<p>アメリカ・カリフォルニア州サンフランシスコに拠点を持つ企業が運営しているようです。毎月異なる国のお菓子の詰め合せが入っています。地域は「アジア」「ラテンアメリカ」「オーストラリア」「ヨーロッパ」「アフリカ」「北アメリカ」とまさに世界中が対象。お菓子と一緒に、そのお菓子の解説や、その国の特徴などが書かれたカードも同封されています。</p>



<p>【 STANDARD BOX 】<br>・ 月額 13.95ドル（約 1570円）※アメリカ国内は送料無料。<br>・毎月1回お届け<br>・毎月異なる国のお菓子が4〜6個届く</p>



<p>【 PREMIUM BOX 】<br>・ 月額 25.95ドル（約 2910円）※アメリカ国内は送料無料。<br>・ 毎月1回お届け<br>・毎月異なる国のお菓子が8〜12個届く</p>



<figure class="wp-block-image size-full"><img loading="lazy" width="900" height="600" src="/uploads-archive/lc/2022/01/original-1.jpg" alt="" class="wp-image-9310" srcset="/uploads-archive/lc/2022/01/original-1.jpg 900w, /uploads-archive/lc/2022/01/original-1-300x200.jpg 300w, /uploads-archive/lc/2022/01/original-1-768x512.jpg 768w, /uploads-archive/lc/2022/01/original-1-600x400.jpg 600w" sizes="(max-width: 900px) 100vw, 900px" /></figure>



<h2>海外の反応</h2>



<figure class="wp-block-embed is-type-rich is-provider-埋め込みハンドラー wp-block-embed-埋め込みハンドラー wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="The ULTIMATE Japanese Snacks TASTE TEST! - Tokyo Treat Snack Box REVIEW! Kit Kat, Oreo + MORE!" width="500" height="281" src="https://www.youtube.com/embed/SFNN--S-tZ8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p>楽しそうです^^</p>



<h2>まとめ メリットと新規参入時の課題</h2>



<p>これまでの日本発の越境ECの成功事例は、化粧品やサプリメントの単品リピート通販が多くありました。このモデルが成功した理由としては、<strong>原価が安い、重量が軽いため郵送費が安い、定期なのでマーケティング費用が比較的抑えられる、日本製という強みを活かせる</strong>、などがありました。</p>



<p>この成功の要因が、お菓子のサブスクリプションにはすべて当てはまります。</p>



<ul><li>原価：メーカーから直接仕入れて<em>20%</em>以下に抑えているのではないでしょうか。</li><li>輸送コスト：海外配送費は箱の大きさではなく重さで決まるため、スナック菓子などの軽いお菓子は有利です。<em>500g</em>以下に抑えていると思われます。</li><li>定期便：将来的な売り上げ予測が立てやすく、利益も残しやすいです。</li><li>日本製：「わざわざ越境ECで買わなくてはいけない（日本のものでなくてはいけない）」理由が明確です。</li></ul>



<p>このように考えると、お菓子のサブスクリプションは越境ECにはまる商品として非常に有効です。<br>しかも参入障壁も低いため、新たに進出しようとされる方もいるかもしれません。</p>



<p>しかしながら、このビジネスモデルはアメリカの大手メディアでも特集が組まれるほどで、これから市場に出るのでは後発組と言えます。先行している企業から顧客を奪うには、質・量ともにハイレベルなマーケティングが求められるでしょう。加えて、すぐに仕入れられる商品がゆえに、商品の差別化に苦労すると思われます。</p>



<p>実は私の知人も数年前にお菓子のサブスクを海外向けに行っていたのですが、そこはいつの間にか撤退していました。詳しい理由は把握していませんが、一筋縄ではいかないことは間違いないと思います。</p>



<blockquote class="wp-block-quote"><p>季節やテーマも大事なのですが、珍しいフレーバーや限定商品など、いかにインパクトのある商品を入れるかという部分も意識しています。常に卸やメーカーと連絡を取り合い、発売情報や終売情報をいかに前倒しで入れるかが重要ですね。テーマとラインナップ、そして予算組み。結構こまごまとした調整が必要なんですよ。</p><cite><a href="https://ecnomikata.com/original_news/20941/">Tokyo Treat Shop 担当者のインタビュー</a></cite></blockquote>



<p>上記のインタビューにもあるように、細かな気配り、いわゆる<strong>おもてなし</strong>が求められるのでしょう。</p>


<p><small> 《参考・画像出典》<br />参考：<a href="https://www.bokksu.com/" target="_blank" rel="noopener">BOKKSU</a> , <a href="https://tokyotreat.com/" target="_blank" rel="noopener">tokyo treat</a></p>
<p></small></p>

【2021越境ECトレンド】<br>「お菓子×サブスク×越境EC」がすごい


<h2>はじめに</h2>



<p>ECで海外展開をするときに気を付けるべき返品ルール特集、第3弾は中国です。巨大ECモールが複数あり、非常に発達したEC市場を持つ中国の返品事情は、前回紹介したドイツとは大きく異なります。</p>



<h2>2013年消費者権益保護法改正</h2>



<p>驚異のスピードで近年巨大市場に成長した中国のEC市場ですが、その中で返品関連の大きな動きといえば、まず2013年に消費者権益保護法が改正されたことでした。これにより、インターネットショッピングにおいて、購入者は7日間は理由なく返品する権利を有すると定められました。<br>しかし、適用範囲などの詳細な規定がなかったため、結局返品をめぐるショップと消費者間のトラブルは、数多く発生し続けたようです。</p>



<h2>「返品理由を問わない7日以内のネット通販購入品返品に関する暫定弁法」</h2>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="683" src="/uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1024x683.jpg" alt="" class="wp-image-8790" srcset="/uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1024x683.jpg 1024w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-300x200.jpg 300w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-768x512.jpg 768w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-600x400.jpg 600w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-1536x1024.jpg 1536w, /uploads-archive/lc/2021/11/dan-burton-oNlMfgwLbWI-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>そのような問題をものともせず、ダブルイレブン（独身の日）を始めとしたECショッピングフィーバーも年々勢いを増していき、日本のニュースでも度々取り上げられるようになったのはご存じの通りです。<br>そんな中、2017年1月に「返品理由を問わない7日以内のネット通販購入品返品に関する暫定弁法（网络购买商品七日无理由退货暂行办法）」が公布、同年3月に施行されました。<br>この法律は、ネット販売者が購入者に対して、1回の購入ごとに「購入の確認」を行う必要があるが、もし「購入の確認」が購入者から得られないまま、購入者が7日以内に返品した場合、それがどのような理由であったとしても、原則その返品を拒絶することができないというものです。そして返品をする場合は、購入者は7日間以内（商品を受け取った日の翌日から計算）にショップ側に対して申し立てをしなければなりません。</p>



<p>「購入の確認」というのがピンとこないのですが、こちらの<a href="https://ameblo.jp/puki2018/entry-12662082538.html?frm=theme" target="_blank" rel="noopener">淘宝網（タオバオ）で買い物をしている方のブログ</a>によると、商品到着後に商品を受け取ったことを知らせる（＝取引完了とする）ボタンを押す必要があるそうなので、中国現地ECでは、何かしらの形で「購入確認」ができるようにしなければならないものと思われます。</p>



<p>モールやサイトによるようですが、「購入確認」をしたか否かで、返品のしやすさや返品時の送料負担額が変わってくるようなので、購入者としては注意が必要ですね。もちろんショップ側も、「商品販売過程において、明確な「手続きの流れ」を設けなければならない」と定められているので、モール出店時やECサイト構築時にはきちんと弁法に基づいた返品ルールを定め、それを明示しなければなりません。</p>



<h2>返品できない商品は？</h2>



<p>上記は原則であり、7日間以内でも返品できない商品やケースもあります。この点が明記されたのも、消費者権益保護法改正との大きな違いです。<br>ショップ運営者は、販売する商品が返品不可商品に該当するか事前に確認したうえで、返品ルールを定めるといいでしょう。内容としては日本のクーリングオフ制度に近しいものがあると思います。<br>以下、返品できないものや事例の一例です。</p>



<p><ul>
<li>特注品（オーダーメイド商品）</li>
<li>腐敗しやすい生鮮食品</li>
<li>コンピュータのソフトウェアなどのデジタル製品</li>
<li>開封後に品質が変わってしまうような商品</li>
<li>起動または試用すると、価値が大幅に下がる商品</li>
<li>販売時に品質保証期間が迫っている商品</li>
<li>「完全な状態」でなくなってしまった場合（傷をつけたり、付属品を紛失してしまった場合など）</li>
</ul></p>



<h2>まとめ</h2>



<p>今回は中国の返品ルールについて紹介しました。<br>ルールが明文化されたことで、以前に比べると返品トラブルや返品による販売者・メーカーの負担は減っているとされていますが、問題が解決したとはいいがたいです。特にダブルイレブンなどで安さと熱気につられて衝動買いした購入者が、商品受け取り後に不用品として返品することは少なくありません。また、AIをサクラとして用いて大量買いをし、販売規模を拡大させ、後日返品するといった返品ルールを悪用する販売者もいるらしく、プラットフォーマー側が取り締まりに乗り出すこともあるとか。<br>しかしこの問題がある程度解決していけば、中国EC市場はさらに発展していくことでしょう。</p>


<p><small> 《参考・画像出典》<br />参考：<a href="https://kuno-cpa.co.jp/china_blog/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%81%A7%E3%81%AE%E8%B3%BC%E5%85%A5%E5%95%86%E5%93%81%E3%81%AE7%E6%97%A5%E9%96%93%E7%84%A1%E7%90%86%E7%94%B1%E8%BF%94%E5%93%81%E6%9A%AB/" target="_blank" rel="noopener">中国進出ブログ</a>　<a href="http://j.people.com.cn/n3/2017/0321/c94475-9192990.html" target="_blank" rel="noopener">人民網日本語版</a>　<br /></small></p>

medium_harry-cao-532CMXLd7zg-unsplash.jpg

small_harry-cao-532CMXLd7zg-unsplash.jpg

thumbnail_harry-cao-532CMXLd7zg-unsplash.jpg

harry-cao-532CMXLd7zg-unsplash.jpg

越境ECでも要注意！中国における返品ルールとは

<div>
<div>スターフィールドでは、ソースコードの開発管理に <a href="https://github.com/">GitHub</a> を使っています。</div>
<div>GitHubでは、ソースコードを管理するだけではなく、開発物の承認ですとかサーバーへのデプロイも実行できるのですが、その一連の流れを実施してくれる、<a href="https://github.co.jp/features/actions">GitHub Actions</a>  があります。</div>
</div>
<div></div>
<div>
<div>GitHub Actions については、公式ドキュメント以外にも、ClassmethodさんのDevelopers.IOにて、<a href="https://dev.classmethod.jp/tags/github-actions/">詳しく解説</a>をされているので、 そちらをご覧いただくとして、</div>
<div>この記事では、「GitHub Actions 初心者」としての感想などを書いてみたいと思います。</div>
<div></div>
<h2>どういうことをしたいのか</h2>
<div>PHP のソースコードを書いて、静的コード解析ツールを通して評価する Workflow を作成します。</div>
<div>静的コード解析ツールには、 <a href="https://phpstan.org/">PHPStan </a> を用います。</div>
<h2>実験</h2>
</div>
<div></div>
<h3>Workflowの作成</h3>
<div>
<div>PHPStanは、GitHub Packagesにコンテナが公開されているので、それを利用します。</div>
<div>


		<div id="crayon-64954036ed79d922599881" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
ghcr.io/phpstan/phpstan</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed79d922599881-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed79d922599881-1"><span class="crayon-i">ghcr</span><span class="crayon-sy">.</span><span class="crayon-i">io</span>/<span class="crayon-i">phpstan</span>/<span class="crayon-i">phpstan</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>また、作成するWorkflow の一部には、 Greg Bowler氏による PHP Actionsを利用させていただきました。</div>
<div>https://github.com/php-actions/phpstan</div>
</div>
<div></div>
<div></div>
<div>Workflowは、 .github/workflow/phpstan.yaml として保存しました。</div>
<div>


		<div id="crayon-64954036ed7a1591821963" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">YAML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
name: phpstan

on: [push, pull_request]

jobs:
  php-stan-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: pwd; find  ./
      - run: docker run --rm -v `pwd`:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-4">4</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-6">6</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-8">8</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a1591821963-10">10</div><div class="crayon-num" data-line="crayon-64954036ed7a1591821963-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a1591821963-1">name<span class="">: phpstan</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-2">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-3">on<span class="">: [push</span><span class="crayon-o">,</span><span class="crayon-h"> </span>pull<span class="crayon-sy">_</span>request<span class="crayon-o">]</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-4">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed7a1591821963-5">jobs<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-6"><span class="crayon-h">&nbsp;&nbsp;</span>php-stan-test<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>runs-on<span class="">: ubuntu-latest</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>steps<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>uses<span class="">: actions/checkout@v2</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a1591821963-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: pwd; find&nbsp;&nbsp;./</span></div><div class="crayon-line" id="crayon-64954036ed7a1591821963-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span>run<span class="">: docker run --rm -v `pwd`</span><span class="">:/app -w /app ghcr.io/phpstan/phpstan analyse -c ./conf/phpstan.neon</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>対象とするPHPのコードは、<a href="https://phpstan.org/">PHPStanのトップページ</a>にあるコードです…。</div>
<h3></h3>
<h3>PHPStan Config(neon)の作成</h3>
<div></div>
<div>


		<div id="crayon-64954036ed7a3942773136" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">YAML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
parameters:
    paths:
        - ../src/php_src/
    level: 8</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a3942773136-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-2">2</div><div class="crayon-num" data-line="crayon-64954036ed7a3942773136-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed7a3942773136-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a3942773136-1">parameters<span class="">:</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>paths<span class="">:</span></div><div class="crayon-line" id="crayon-64954036ed7a3942773136-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>-<span class="crayon-h"> </span><span class="crayon-o">.</span><span class="crayon-o">.</span>/src/php<span class="crayon-sy">_</span>src/</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed7a3942773136-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span>level<span class="">: 8</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div></div>
<div>とても短いneonですが、これで十分な動作をします。</div>
<div></div>
<div>
<div>PHPStan には、0〜9までの <a href="https://phpstan.org/user-guide/rule-levels">Rule Level</a>  がありますが、</div>
<div>最高レベルの level: 9を指定すると、</div>
<div></div>
<div>


		<div id="crayon-64954036ed7a4530306882" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
Level config file phar:///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ed7a4530306882-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ed7a4530306882-1"><span class="crayon-e">Level </span><span class="crayon-e">config </span><span class="crayon-e">file </span><span class="crayon-i">phar</span><span class="crayon-sy">:</span><span class="crayon-c">///composer/vendor/phpstan/phpstan/phpstan.phar/conf/config.level9.neon was not found.</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>とのエラーが発生しました。Dockerイメージの中には、level:9 の neon ファイル用意されていないようです。</div>
<div></div>
<div>そのため、level: 8 を指定しました。</div>
</div>
<div></div>
<h3>Workflowの実行</h3>
<div>GitHub Actions の Workflow を通して、PHPStanを実行した結果です。</div>
<div></div>
<div>level:8 だと、</div>
<div><img decoding="async" loading="lazy" class="alignnone wp-image-17230 size-medium" src="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png" alt="" width="300" height="146" srcset="/uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-300x146.png 300w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628-228x111.png 228w, /uploads-archive/2021/10/-2021-10-29-16.10.24-e1635492897628.png 651w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>最低レベルの level: 0 だと、</div>
</div>
<div></div>
<div><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17231" src="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png" alt="" width="300" height="127" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-300x127.png 300w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08-228x96.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-29-16.18.08.png 642w" sizes="(max-width: 300px) 100vw, 300px" /></div>
<div></div>
<div>
<div>level:8 の方が手厳しく指導されてますね！</div>
</div>
<div>そもそも、level:8 で、まともなコードと言えるでしょう。</div>
<div>静的コード解析は、最高レベルで実施するに限ります。</div>
<div></div>
<div>
<h2>まとめ</h2>
<div>コードの品質を保つには、静的コード解析ツールを実行する他にも、コードレビューを確保する必要がありますが、GitHub Actionsを使って、コードが更新されるたびに静的コード解析ツールが実行されると、品質の悪いコードが入り込む余地がありません。</div>
<div>お客さまが触れる製品サービスの品質をあげていく上でも、また、エンジニアの負担軽減のためにも、このようなGitHub Actionsを活用していきたいです。</div>
</div>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2021/12/11

2021/12/10

2021/12/04

2021/12/03

2021/11/29

2021/11/29

2021/11/27

2021/11/26

2021/11/18

2021/11/12

2021/11/11

2021/11/10

2021/11/08

2021/11/05

2021/11/02

2021/11/02

2021/10/30

2021/10/30