【React】Dexie.jsでIndexedDBを使ってみました

<p>多くのカートでは休日を設定できます。</p>
<p>カレンダーを表示して問い合わせなどの対応可能日時を伝えるというような内容に加え、バックエンドでは休日には発送処理ができないので、お届け日や発送日といったシステムで使用する日付の調整に使っています。</p>
<p>日本国内だけの運用であれば簡単なのですが、越境ECや海外でのECの場合、更にはその組み合わせや複数国にまたがって在庫を置いている場合などは各国ごとの休日を管理する必要があります。</p>
<p>日本にいるとあまり感じることはありませんが、国によっては休日は複雑で、例えば州によって異なったり、年によって祝日の日程が変化したりなどの事情があります。</p>
<p>カートとしてはそれらを自動登録できるとユーザーにとって使いやすいですが、それらの情報をリアルタイムで正しく知る必要があります。今回はそれを解決できるサービスを検証し5つ選定しました。</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>サービス名</th>
<th>年額</th>
<th>リクエスト数</th>
<th>対応国数</th>
<th>対応地域数</th>
</tr>
<tr>
<td><a href="https://holidayapi.com/" target="_blank" rel="noopener">Holiday API</a></td>
<td>349USD</td>
<td>無制限</td>
<td>250</td>
<td>3680</td>
</tr>
<tr>
<td><a href="https://calendarific.com/" target="_blank" rel="noopener">CALENDARIFIC</a></td>
<td>300USD</td>
<td>無制限</td>
<td>230</td>
<td>3300</td>
</tr>
<tr>
<td><a href="https://getfestivo.com/" target="_blank" rel="noopener">festivo</a></td>
<td>599USD</td>
<td>100万</td>
<td>231</td>
<td>1737</td>
</tr>
<tr>
<td><a href="https://dev.timeanddate.com/holidays/" target="_blank" rel="noopener">dev.timeanddate.com</a></td>
<td>999USD</td>
<td>50万</td>
<td>230</td>
<td>?</td>
</tr>
<tr>
<td><a href="https://developers.google.com/calendar/api" target="_blank" rel="noopener">Google Calendar API</a></td>
<td>無料</td>
<td>100万</td>
<td>79</td>
<td>?</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>多数の国、地域に対応する場合はHoliday APIが最もコスパが良さそうです。</p>
<p>Google Calendar APIは無料ですがGoogle Calenderがサービス展開している79カ国でしか使用できないのと、地域での区分がありませんでした。簡易的に使用するのでGoogle Calendar APIが最も良さそうです。</p>
<p>&nbsp;</p>


世界の休日を取得できるAPI5選

覚えておいて損はない？モダンcssを使用した要素の中央揃え

<p>最近GitHubを触る機会が多くなって、日々利用しているので、今日はGitHubのショットカットキーを紹介したいと思います。</p>
<h2>s または /</h2>
<p>左上にある検索バーでリポジトリの検索ができますが、キーボードから「s」または「/」を押すと検索バーが活性化されます。訪問したリポジトリがプルダウンに出てくるので方向キーでナビゲーションすることもできますし、キーワードを入れて検索することもできます。</p>
<p><img loading="lazy" class="alignnone wp-image-10620 size-medium" src="/uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-300x35.png" alt="" width="300" height="35" srcset="/uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-300x35.png 300w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-1024x121.png 1024w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-768x90.png 768w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637-600x71.png 600w, /uploads-archive/lc/2022/05/808e2fbc7f1dd11cbf791f155145c637.png 1070w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>w</h2>
<p>リポジトリで、「w」を押すとブランチ/タグ切り替えにフォーカスします。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10621" src="/uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-300x204.png" alt="" width="300" height="204" srcset="/uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-300x204.png 300w, /uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0-600x409.png 600w, /uploads-archive/lc/2022/05/3dff6abff98e14c238cfeff51a2227f0.png 716w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>t</h2>
<p>リポジトリで、色々ファイルを確認できますが、一つずつクリックして確認するよりは、キーボードから「t」を押すとファイルファインダーが開きます。Tipにも出た通り方向キーやEnterキー、キーワード検索を利用して、キーボードのみで便利に使えます。</p>
<p><img loading="lazy" class="alignnone wp-image-10622 size-medium" src="/uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-300x139.png" alt="" width="300" height="139" srcset="/uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-300x139.png 300w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-1024x476.png 1024w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-768x357.png 768w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-600x279.png 600w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-1536x714.png 1536w, /uploads-archive/lc/2022/05/222694e95e13c5432a95585c04319c28-2048x952.png 2048w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>.(dot)</h2>
<p>リポジトリで(ブランチを選択し)、「.」を押すと、Codespaces(コードスペース)が開きます。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10623" src="/uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-300x42.png" alt="" width="300" height="42" srcset="/uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-300x42.png 300w, /uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75-600x84.png 600w, /uploads-archive/lc/2022/05/290c0e556a96b384997b69d39dfc6e75.png 718w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2><span class="notion-enable-hover" data-token-index="1" data-reactroot="">⌘</span> + k (Mac) / Ctrl + k (Windows)</h2>
<p>こちらでcommand palette（コマンドパレット）が出てきます。</p>
<p>コマンドパレットを使用することにより、リポジトリや組織、プルリクエスト、issue、プロジェクト、ファイルなどを検索して素早く移動できます。検索する時は必要に応じて以下+キーワードを入れてください。</p>
<ul>
<li><code>「#」</code>   issue、プルリクエスト、ディスカッション、プロジェクトを検索する</li>
<li><code>「!」</code>   プロジェクトを検索する</li>
<li><code>「/」</code>  リポジトリスコープ内のファイルを検索する</li>
<li><code>「&gt;」</code>   コマンドモードに入る</li>
<li><code>「@」</code>   ユーザー、組織、およびリポジトリを検索する</li>
</ul>
<p>コマンドパレットはまだベータ版なので今後変更事項はありそうです。</p>
<p><img loading="lazy" class="alignnone size-medium wp-image-10624" src="/uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-300x161.png" alt="" width="300" height="161" srcset="/uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-300x161.png 300w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-1024x551.png 1024w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-768x413.png 768w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-600x323.png 600w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-1536x826.png 1536w, /uploads-archive/lc/2022/05/04adeea8c72fbf371d165fd81841f632-2048x1102.png 2048w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>まとめ</h3>
<p>以上GitHubのショットカットキー５選でした。</p>
<p>他に、キーボードで「?」を押すと、そのページで使えるショットカットキー一覧が出てくるので、色々確認できます。</p>
<p>クリックして探すよりは地味に効率上がりますので、使ってない方は使ってみてください〜</p>


すぐ使えるGitHubのショットカットキー５選

<p>2022年5月10日、かがやきグループ 株式会社経理バンク様と共に、It導入補助金を活用した越境ECセミナーを開催いたしました。今回は、そのダイジェスト版を実際にセミナーで用いられたスライド（一部抜粋）を使ってご説明いたします。</p>
<ol>
<li>IT導入補助金活用セミナー<br />
〜コストを抑えてITツール・ITサービスを導入するチャンスです！～</li>
<li>アジア越境EC導入実績No1のカート会社が語る、初期コストを抑えた越境EC進出法</li>
</ol>
<h2>１．IT導入補助金活用セミナー〜コストを抑えてITツール・ITサービスを導入するチャンスです！～</h2>
<p>第1部では、かがやきグループ 株式会社経理バンクの大沢様より、IT導入補助金の概要や、申請のポイントについて教えていただきました。<br />
<img loading="lazy" src="/uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46-1024x766.png" alt="" width="1024" height="766" class="aligncenter size-large wp-image-10580" srcset="/uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46-1024x766.png 1024w, /uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46-300x224.png 300w, /uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46-768x574.png 768w, /uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46-600x449.png 600w, /uploads-archive/lc/2022/05/519f506789864ef3f1484c8404baca46.png 1388w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>IT導入補助金の全体的な概要はもちろんのこと、特に今回は、弊社スターフィールドとの共催ということもあり、弊社サービスLaunchCart（ランチカート）で申請ができる「デジタル化基盤導入類型（デジ類）」についてお話しいただきました。</p>
<p>今回、デジタル化基盤導入類型は、補助率や賃上げ要件について、他の枠に比べても優遇されている点があります。越境ECのコストを抑えたいという方にはピッタリです。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-1024x524.png" alt="" width="1024" height="524" class="aligncenter size-large wp-image-10581" srcset="/uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-1024x524.png 1024w, /uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-300x154.png 300w, /uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-768x393.png 768w, /uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-600x307.png 600w, /uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad-1536x787.png 1536w, /uploads-archive/lc/2022/05/c003952c75c5bc9c4fed8e967337efad.png 1861w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>そして、セミナー中にも実際に<a href="https://www.it-hojo.jp/first-one/digital-type.html#anchor02" rel="noopener" target="_blank">シュミレーター</a>を使ってお話しいただきました。</p>
<p>こちらのシュミレーターは、デジタル化基盤導入類型の補助金申請可能額をシミュレーションできるものです。</p>
<p>デジタル化基盤導入類型で申請をご検討されている際には、こちらのシュミレーターを使って補助費用や負担額を調べてみてください。</p>
<h2>２．アジア越境EC導入実績No1のカート会社が語る、初期コストを抑えた越境EC進出法</h2>
<p>第二部では、弊社の生田より、越境EC初めての方向けに越境ECの始め方や、補助金を活用した際のスケジュール感についてお話させていただきました。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2022/05/9fa342abc5c2275268ee188302a8f82f.jpg" alt="" width="960" height="540" class="aligncenter size-full wp-image-10583" srcset="/uploads-archive/lc/2022/05/9fa342abc5c2275268ee188302a8f82f.jpg 960w, /uploads-archive/lc/2022/05/9fa342abc5c2275268ee188302a8f82f-300x169.jpg 300w, /uploads-archive/lc/2022/05/9fa342abc5c2275268ee188302a8f82f-768x432.jpg 768w, /uploads-archive/lc/2022/05/9fa342abc5c2275268ee188302a8f82f-600x338.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>まずは、他の海外進出と比べた際の、越境ECのメリットとデメリットについてお話いたしました。</p>
<p>越境ECのメリットは、「日本にいながら海外顧客と直接繋がれる」点です。一方、売れるごとに国際配送をしなくてはいけないため、送料が高くなるというデメリットがあります。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-1024x573.png" alt="" width="1024" height="573" class="aligncenter size-large wp-image-10582" srcset="/uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-1024x573.png 1024w, /uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-300x168.png 300w, /uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-768x429.png 768w, /uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-600x336.png 600w, /uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d-1536x859.png 1536w, /uploads-archive/lc/2022/05/e063ba03addbd97c9ef9a8014763669d.png 1867w" sizes="(max-width: 1024px) 100vw, 1024px" /> </p>
<p>そして、2021年度のIT導入補助金を活用した事例についてもお話させていただきました。補助金は、交付決定をしてからご契約、制作開始となるため、意思決定をしてから公開まで時間がかかります。</p>
<p>また、直近の締切に間に合わず、次回締切まで待たないといけない、ということにならないためにも、補助金の締切に間に合う形で、検討を進めることをオススメいたします。</p>
<h2>まとめ</h2>
<p>小規模での開催とさせていただきましたが、IT導入補助金の申請のポイントから越境ECの始め方まで、幅広い内容を網羅したセミナーとなりました。ご満足いただける方も多かったようで、大変嬉しく思っています。</p>
<p>IT導入補助金を使って越境ECを始めたい方がいらっしゃれば、ぜひお声がけください。</p>
<p>今回のセミナー内容や、各社サービスに関してご質問がございましたら、各社にお問い合わせください。</p>


【越境ECセミナーレポート】最大350万円のコスト減！ プロの語る「IT導入補助金」の詳細と、越境ECの初期コストを徹底公開！

<h2>ミャンマー銀行お金引き落とし（2022年)</h2>
<p>２０２１年２月のクーデター後の銀行からお金引き落とす方法</p>
<h3>以前と変わったところ</h3>
<p>普段のようにATMとかは全然使えなくなりました。<br />
窓口で引き出し人はオンライン予約して、週に決められた金額は出せます。<br />
しかし、予約はいつも満員で、予約ができない。<br />
予約できてもビジネスをする人が足りる金額ではない。</p>
<h3>現状の流れ</h3>
<p>口座の中にあるお金を出したいときは、<br />
現金持っている人にオンラインから送金し、<br />
現金をもらうという流れになってしまいます。<br />
手数料として最初１４％〜現在は５％~３％など払う必要があります。<br />
つまり、口座に入っているお金は<br />
少なくとも３％が損していると言う状況です。</p>
<h3>商売にも大きな影響</h3>
<p>元々現金でもオンライン決済でも支払いができる店が現金払いだけになり、<br />
オンライン決済で支払いたい場合は合計金額＋％を払うようになりました。</p>
<p>最近では「オンライン決済でも０％」と言うような発言でマーケティングをする業者が増えていて、<br />
海外の人から見て、当たり前のことを何言っているだろうと思うかもしれません。</p>
<p>個人的にはキャッシュカードのパスワードすら忘れていますが、<br />
多くの人もそうなっているだろうと思います。</p>


ミャンマー銀行お金引き落とし

スクリーンショット-2022-05-13-10.33.24-768x321.png

GraphQL Code GeneratorでGraphQlのschemaからTypescriptの型定義を生成する方法

eyechatc-gcp-terraform-2.jpg

Terraform で Cloud Functions をデプロイしてみた

<h1 class="ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC ClapLv1TextBlock_Chie-TextBlock__Text--mediumRelative__3HSR8 ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma">「どんなメールでも受信しなければいけない時代」の 終わりを告げた</h1>
<h2>はじめに</h2>
<p>2022年3月1日から<a href="https://www.koregasiritai.com/gmail-550-5-7-26-authentication-fails/" rel="noopener" target="_blank">Gmailのスパム判定が厳しくなった</a>ようで、Gmailアドレス宛てに送信すると送信できない旨のエラーが多発しているようです。実際に送信できなかった時の内容を見ていくと、以下の内容でした。</p>
<p><img loading="lazy" class="aligncenter wp-image-10502 size-full" src="/uploads-archive/lc/2022/04/image_2022_4_27.png" alt="" width="690" height="371" srcset="/uploads-archive/lc/2022/04/image_2022_4_27.png 690w, /uploads-archive/lc/2022/04/image_2022_4_27-300x161.png 300w, /uploads-archive/lc/2022/04/image_2022_4_27-600x323.png 600w" sizes="(max-width: 690px) 100vw, 690px" /></p>
<h4>reason: 550-5.7.26 This massage does not have authentication information or fails to</h4>
<p>つまり、「認証するための情報がない/認証に失敗してますよ」という内容です。</p>
<p>知りたいのは、<strong>どうやってこの認証を通したらいいのか</strong>ということですよね。その情報をお伝えしていきます。</p>
<h2>メール認証の対応方法</h2>
<p>結論からお伝えすると、メール認証(SPFやDKIMなど)の設定を行う必要があります。</p>
<p><small></p>
<p>※SPF (Sender Policy Framework)とは、 電子メールの送信元ドメインが詐称されていないかを検査するための仕組みです。</p>
<p>※DKIM (DomainKeys Identified Mail)は、 電子メールにおける送信ドメイン認証技術の一つであり、 メールを送信する際に送信元が電子署名を行い、 受信者がそれを検証することで、 送信者のなりすましやメールの改ざんを検知できるようにするものです。</p>
<p></small></p>
<p>本稿では、SPFについてお伝えしようと思います。</p>
<h3>SPFレコードの設定</h3>
<p><a href="https://www.onamae.com/guide/p/70" rel="noopener" target="_blank">お名前.comのDNS設定</a>を例にお伝えします。<br />
上のリンク(マニュアル)に従って、DNSレコード設定ページまでたどり着いてください。</p>
<p>このページの中盤に、レコードの追加が可能なフォームがあるので、以下のように追加をしてください。</p>
<p><img loading="lazy" class="aligncenter wp-image-10517 size-full" src="/uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc.png" alt="" width="1714" height="484" srcset="/uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc.png 1714w, /uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc-300x85.png 300w, /uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc-1024x289.png 1024w, /uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc-768x217.png 768w, /uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc-600x169.png 600w, /uploads-archive/lc/2022/04/3054a72fe9877aa4830c0cfcfd28d4cc-1536x434.png 1536w" sizes="(max-width: 1714px) 100vw, 1714px" /></p>
<table style="width: 100%; text-align: center;" border="1">
<tbody>
<tr>
<td style="width: 20%; background-color: #f5f5f5;">ホスト名</td>
<td style="width: 80%; background-color: #f5f5f5;">空欄</td>
</tr>
<tr>
<td style="width: 20%; background-color: #f5f5f5;">TYPE</td>
<td style="width: 80%; background-color: #f5f5f5;">TXT</td>
</tr>
<tr>
<td style="width: 20%; background-color: #f5f5f5;">TTL</td>
<td style="width: 80%; background-color: #f5f5f5;">3600</td>
</tr>
<tr>
<td style="width: 20%; background-color: #f5f5f5;">VALUE</td>
<td style="width: 80%; background-color: #f5f5f5;">v=spf1 +ip4:{ 利用しているサーバーのIPアドレス } +a:{ 送信メールサーバー情報(SMTP) } -all</td>
</tr>
</tbody>
</table>
<h4>送信元サーバーとして、Gmailを利用している場合</h4>
<table style="width: 100%; text-align: center;" border="1">
<tbody>
<tr>
<td style="width: 20%; background-color: #f5f5f5;">VALUE</td>
<td style="width: 80%; background-color: #f5f5f5;">v=spf1 +ip4:{ 利用しているサーバーのIPアドレス } +a:smtp.gmail.com -all</td>
</tr>
</tbody>
</table>
<h2>スパムとして判断されやすいメールの特徴</h2>
<p>特にスパムとして判断されやすいメールは、このようなメールです。<br />
ECサイトだと、メルマガや自動返信は基本になってくるので、しっかりと設定をしておく必要があります。</p>
<ul>
<li>メルマガ配信などで定型文を一斉送信している</li>
<li>自動返信メールを送っている</li>
<li>別のサーバー経由で送られている</li>
</ul>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p>これからの認識として、「きちんと設定していないとメールは送信できない/届かない」ということを知っておく必要があります。</p>
<p>メール認証を設定しておくと、組織から送信するメールが相手側で迷惑メールに分類されるのを防ぐことができます。<br />
また、スパマーがあなたのドメインまたは組織を偽装して、なりすましメールやフィッシング メールを送信することを防ぎます。</p>
<p>メールを送信することができないことがわかったら、メール認証の設定を行うようにしてみてくださいね。</p>

Gmailアドレス宛てにメールが送れない時の対処法を解説


<h2>はじめに</h2>



<p>ECには様々な商戦と呼ばれるものがあります。</p>



<p>越境EC界隈で、近年最も有名で大規模なセールといえば11月11日の「独身の日」といえるのではないでしょうか。それらに対抗するように、618セールというのを盛り上げようとする新しい流れがあったりしますが、伝統的なイベントを商業化するのも、一般的なECにおける商戦です。</p>



<p>今回は、そんな中で身近に迫った「母の日」にスポットを当ててみたいと思います。</p>



<h2>日本の「母の日」</h2>



<p>そもそも母の日って世界でどのように捉えれているの？と疑問に持つ方もいらっしゃると思うので、まずは、日本の母の日から紹介します。</p>



<blockquote class="wp-block-quote"><p><strong>母の日</strong>（ははのひ）は、日頃の母の苦労をねぎらい、母への感謝を表す日。アメリカでは以下のアン・ジャービスへの教会での追悼にさかのぼり、毎年5月の第2日曜日に祝い、日本もそれに倣っている</p><cite>出典：<a href="http://参考；Wikipediahttps://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" data-type="URL" data-id="参考；Wikipediahttps://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5">Wikipedia</a></cite></blockquote>



<blockquote class="wp-block-quote &quot;wp-block-quote&quot;"><p>大日本連合婦人会が1931年（昭和6年）に結成された。その際、同組織は皇后（香淳皇后）の誕生日である3月6日（地久節）を「母の日」としたが、普及しなかった。</p><p>1937年（昭和12年）5月8日に、第1回「森永母の日大会」（森永母を讃へる会主催、母の日中央委員会協賛）が豊島園で開催された。その後、1949年（昭和24年）ごろからアメリカに倣って5月の第2日曜日に行われるようになった。</p><p>母の日には、カーネーションなどを贈るのが一般的である。母親が健在の場合は赤いカーネーションを贈り、母親が鬼籍に入っている場合は白いカーネーションを贈ることが一般的である。</p><p>なお、5月5日のこどもの日は、国民の祝日に関する法律第2条によると「こどもの人格を重んじ、こどもの幸福をはかるとともに、母に感謝すること」が趣旨となっている。<small></small></p><cite>参考：<a href="https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" data-type="URL" data-id="https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" target="_blank" rel="noreferrer noopener">Wikipedia</a></cite></blockquote>



<p>「母の日」の歴史は、昭和初期に遡ることが分かりました。カーネーションを贈る風習もまたアメリカを起源としているようですが、そこから 「母の日」 を商業的に捉える動きが発展していったと推測されます。</p>



<p>昨今では 「母の日」 商戦までに発展し、オフライン、オンライン問わず母の日がイベント化しております。日本の3大モールの例を見てみると漏れなく特集が組まれています。</p>



<p>※Amazonはトップページからの導線は見当たらないものの、検索エンジンからは特集ページに遷移することが出来ます。</p>



<h3>楽天の「母の日」特集</h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="852" src="/uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-1024x852.png" alt="" class="wp-image-10251" srcset="/uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-1024x852.png 1024w, /uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-300x250.png 300w, /uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-768x639.png 768w, /uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-600x499.png 600w, /uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0-1536x1278.png 1536w, /uploads-archive/lc/2022/04/dd0033af0f993104f14f440e9e3097e0.png 1660w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://event.rakuten.co.jp/mother/" target="_blank" rel="noreferrer noopener">https://event.rakuten.co.jp/mother/</a></figcaption></figure>



<h3>Amazonの「母の日」特集</h3>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="/uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56-1024x881.png" alt="" class="wp-image-10252" width="840" height="722" srcset="/uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56-1024x881.png 1024w, /uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56-300x258.png 300w, /uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56-768x660.png 768w, /uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56-600x516.png 600w, /uploads-archive/lc/2022/04/ce52dbd005e94c86e8dc5b70e97c9b56.png 1293w" sizes="(max-width: 840px) 100vw, 840px" /><figcaption><a href="https://www.amazon.co.jp/%E6%AF%8D%E3%81%AE%E6%97%A5/b?ie=UTF8&amp;node=4915940051" data-type="URL" data-id="https://www.amazon.co.jp/%E6%AF%8D%E3%81%AE%E6%97%A5/b?ie=UTF8&amp;node=4915940051" target="_blank" rel="noreferrer noopener">https://www.amazon.co.jp/%E6%AF%8D%E3%81%AE%E6%97%A5/b?ie=UTF8&amp;node=4915940051</a></figcaption></figure>



<h3>Yahooショッピングの「母の日」特集</h3>



<figure class="wp-block-image size-full"><img loading="lazy" width="991" height="888" src="/uploads-archive/lc/2022/04/e6d6d5ebab1101ae6a4ef8ea2ad97278.png" alt="" class="wp-image-10253" srcset="/uploads-archive/lc/2022/04/e6d6d5ebab1101ae6a4ef8ea2ad97278.png 991w, /uploads-archive/lc/2022/04/e6d6d5ebab1101ae6a4ef8ea2ad97278-300x269.png 300w, /uploads-archive/lc/2022/04/e6d6d5ebab1101ae6a4ef8ea2ad97278-768x688.png 768w, /uploads-archive/lc/2022/04/e6d6d5ebab1101ae6a4ef8ea2ad97278-600x538.png 600w" sizes="(max-width: 991px) 100vw, 991px" /><figcaption><a href="https://shopping.yahoo.co.jp/promotion/event/seasonal/mothersday/" data-type="URL" data-id="https://shopping.yahoo.co.jp/promotion/event/seasonal/mothersday/">https://shopping.yahoo.co.jp/promotion/event/seasonal/mothersday/</a></figcaption></figure>



<h2>世界の「母の日」</h2>



<p>次に世界の「母の日」を見てみます。</p>



<blockquote class="wp-block-quote"><p>アイルランドとイギリス<br>「マザリングサンデイ」は移動祝日で、キリスト教暦のレント（四旬節）期間の第4日曜日（復活祭の3週間前）に祝われる。17世紀に始まったとされ、奉公中の子供が教会で母親と面会するなどの行事が行われる。</p><p>アメリカ</p><p>1916年、ノーザン・パシフィック鉄道による母の日のポストカード<br>アメリカでは南北戦争終結直後の1870年、女性参政権運動家ジュリア・ウォード・ハウが、夫や子どもを戦場に送るのを今後絶対に拒否しようと立ち上がり「母の日宣言」（Mother&#8217;s Day Proclamation）を発した。ハウの「母の日」は、南北戦争中にウェストバージニア州で、「母の仕事の日」（Mother&#8217;s Work Days）と称して、敵味方問わず負傷兵の衛生状態を改善するために地域の女性を結束させたアン・ジャービス（Ann Jarvis）の活動にヒントを得たものだが、結局普及することはなかった。</p><p>ジャービスの死後2年経った1907年5月12日、その娘のアンナ・ジャービスは、亡き母親を偲び、母が日曜学校の教師をしていた教会で記念会をもち、白いカーネーションを贈った。これが日本やアメリカでの母の日の起源とされる。</p><p>アンナの母への想いに感動した人々は、母をおぼえる日の大切さを認識し、1908年5月10日に同教会に470人の生徒と母親達が集まり最初の「母の日」を祝った。アンナは参加者全員に、母親が好きであった白いカーネーションを手渡した。このことから、白いカーネーションが母の日のシンボルとなった。アンナ・ジャービスは友人たちに「母の日」を作って国中で祝うことを提案。</p><p>1914年に「母の日」はアメリカの記念日になり、5月の第2日曜日と定められた</p><cite> 参考：<a href="https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" data-type="URL" data-id="https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" target="_blank" rel="noreferrer noopener">Wikipedia</a></cite></blockquote>



<p></p>



<p>起源はグレートブリテンおよびアイルランドで17世紀。そこからアメリカへ渡り、1914年に記念日となったことで定着したようです。そして、キリスト教が起源にありながらも「母の日」は日本やその他、キリスト教以外の諸外国へも広がっていきます。</p>



<h3>世界の「母の日」の日付</h3>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="/uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c-1024x441.png" alt="" class="wp-image-10254" width="840" height="361" srcset="/uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c-1024x441.png 1024w, /uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c-300x129.png 300w, /uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c-768x331.png 768w, /uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c-600x258.png 600w, /uploads-archive/lc/2022/04/fe92043daa282ef8ccc76bb23e88e78c.png 1454w" sizes="(max-width: 840px) 100vw, 840px" /><figcaption><a href="https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5" target="_blank" rel="noreferrer noopener">https://ja.wikipedia.org/wiki/%E6%AF%8D%E3%81%AE%E6%97%A5</a></figcaption></figure>



<p>上図もWikipediaの引用からとなりますが、5月がボリュームゾーンではあるものの、3月を母の日とする国も多いことが分かります。各国では、「母の日」は商業化されているのでしょうか？アジアに焦点を絞り、各国のモールを見ていきます。</p>



<h3>Shopeeシンガポールの「母の日」特集</h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="918" src="/uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore-1024x918.png" alt="" class="wp-image-10255" srcset="/uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore-1024x918.png 1024w, /uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore-300x269.png 300w, /uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore-768x689.png 768w, /uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore-600x538.png 600w, /uploads-archive/lc/2022/04/Mothers-Day-Celebration-Sale-2022-_-Special-Promotions-On-Mothers-Day-Gifts-_-Shopee-Singapore.png 1180w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://shopee.sg/m/mothers-day-gifts" data-type="URL" data-id="https://shopee.sg/m/mothers-day-gifts" target="_blank" rel="noreferrer noopener">https://shopee.sg/m/mothers-day-gifts</a></figcaption></figure>



<h3>LAZADAフィリピンの<meta charset="utf-8">「母の日」特集2019</h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="858" src="/uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines-1024x858.png" alt="" class="wp-image-10278" srcset="/uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines-1024x858.png 1024w, /uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines-300x251.png 300w, /uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines-768x643.png 768w, /uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines-600x502.png 600w, /uploads-archive/lc/2022/04/Mother-s-Day-Gift-2019-Check-out-Best-Deals-Up-to-90-Off-Lazada-Philippines.png 1224w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://pages.lazada.com.ph/wow/i/ph/PHCampaign/mothers-day-gift-shop?hybrid=1&amp;scm=1003.4.icms-zebra-5000377-2587038.OTHER_5916691061_3934930" data-type="URL" data-id="https://pages.lazada.com.ph/wow/i/ph/PHCampaign/mothers-day-gift-shop?hybrid=1&amp;scm=1003.4.icms-zebra-5000377-2587038.OTHER_5916691061_3934930" target="_blank" rel="noreferrer noopener">https://pages.lazada.com.ph/wow/i/ph/PHCampaign/mothers-day-gift-shop?hybrid=1&amp;scm=1003.4.icms-zebra-5000377-2587038.OTHER_5916691061_3934930</a></figcaption></figure>



<h3><meta charset="utf-8">PChome台湾の<meta charset="utf-8">「母の日」特集</h3>



<figure class="wp-block-image size-full"><img loading="lazy" width="600" height="288" src="/uploads-archive/lc/2022/04/1588144816-1539081902_n.jpeg" alt="" class="wp-image-10279" srcset="/uploads-archive/lc/2022/04/1588144816-1539081902_n.jpeg 600w, /uploads-archive/lc/2022/04/1588144816-1539081902_n-300x144.jpeg 300w" sizes="(max-width: 600px) 100vw, 600px" /><figcaption><a href="https://eventblog.pixnet.net/blog/post/68910775-pchome-24h%E8%B3%BC%E7%89%A9%E5%85%AC%E5%B8%83%E6%AF%8D%E8%A6%AA%E7%AF%80%E5%8D%81%E5%A4%A7%E7%86%B1%E6%90%9C%E6%8E%92%E8%A1%8C%E6%A6%9C---%E5%BB%9A" data-type="URL" data-id="https://eventblog.pixnet.net/blog/post/68910775-pchome-24h%E8%B3%BC%E7%89%A9%E5%85%AC%E5%B8%83%E6%AF%8D%E8%A6%AA%E7%AF%80%E5%8D%81%E5%A4%A7%E7%86%B1%E6%90%9C%E6%8E%92%E8%A1%8C%E6%A6%9C---%E5%BB%9A" target="_blank" rel="noreferrer noopener">https://eventblog.pixnet.net/blog/post/68910775-pchome-24h%E8%B3%BC%E7%89%A9%E5%85%AC%E5%B8%83%E6%AF%8D%E8%A6%AA%E7%AF%80%E5%8D%81%E5%A4%A7%E7%86%B1%E6%90%9C%E6%8E%92%E8%A1%8C%E6%A6%9C&#8212;%E5%BB%9A</a></figcaption></figure>



<h2>母の日と越境EC</h2>



<p>上記から、アジア各国でも母の日は大事なイベントとされていることが分かりました。実際にスタッフにヒアリングも行いましたが中国や、ミャンマーでも母の日は大切な日とされており、お花やギフトを贈るのが一般的とされているようです。</p>



<p>最後に、越境ECにおいて商機はあるのか、簡単なデータと共にご紹介いたします。。</p>



<h3>京東の 「母の日」の結果レポート </h3>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="633" src="/uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog-1024x633.png" alt="" class="wp-image-10266" srcset="/uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog-1024x633.png 1024w, /uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog-300x185.png 300w, /uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog-768x474.png 768w, /uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog-600x371.png 600w, /uploads-archive/lc/2022/04/JD-Releases-Data-on-Mothers-Day-Gifting-JD-Corporate-Blog.png 1389w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption><a href="https://jdcorporateblog.com/jd-releases-data-on-mothers-day-gifting/" data-type="URL" data-id="https://jdcorporateblog.com/jd-releases-data-on-mothers-day-gifting/" target="_blank" rel="noreferrer noopener">https://jdcorporateblog.com/jd-releases-data-on-mothers-day-gifting/</a></figcaption></figure>



<p>去年のデータが中国2番手のモールである「京東」のコーポレートブログのリリースがありました。</p>



<ol><li>化粧品</li><li>家電</li><li>食品</li><li>ジュエリー</li><li>アパレル</li><li>バッグ＆革製品</li><li>健康用品</li><li>家具</li><li>キッチン用品</li><li>スポーツ＆アウトドア</li></ol>



<p>良くも悪くも目新しいものもないラインナップであることが分かり、「母の日」だから・・・ということはないようです。特別なギフトラッピングやお手紙を同梱できたりといったオプションの運用を行うことが出来れば、越境ECでもジャンルを問わず、「母の日」商戦にのっていけるということを示唆していると思われます。</p>



<h2>まとめ</h2>



<p>今回は、日本とアジア各国の「母の日商戦」について調べてみました。</p>



<p>まずはご自身のお母さまに「母の日」ギフトと共に感謝を伝えるのはいかがでしょうか？</p>

世界の「母の日」と越境EC

<h2>はじめに</h2>
<p>アジア越境ECのマーケティング施策として、日本国内EC市場以上によく耳にするのが、CGM（Consummer Gernerated Media）や口コミ施策。</p>
<p>越境ECで販売している商品を宣伝してもらうために、「インフルエンサーやKOLを使った施策をします」という形で、よく飛び出てくる「インフルエンサー」、「KOL」、「KOC」の定義の違いや、効果的な活用方法をご存じでしょうか？</p>
<p>なんとなくあやふやに、「SNS上で有名な人に商品を紹介してもらったり、ライブ配信してもらうんでしょ～」と思っている方、ぜひ一度この記事を読んで、それぞれの意味の違いをチェックしてみてくださいね！</p>
<h2>インフルエンサー、KOL、KOCの違い</h2>
<p>まず、最も説明が簡単なKOLからご説明します。</p>
<h3>KOLとは</h3>
<p>・「Key Opinion Leader（キーオピオニオンリーダー）」の略<br />
・高い専門性、深い知識・技術がある<br />
・ユーザーからの質問にも、専門的な視点から回答する<br />
・KOCに比べてフォロワー数もかなり多い（具体的な基準はないですが）<br />
・複数かつ幅広いプラットフォームで活躍している場合も多い</p>
<p>このような特徴があります。</p>
<p>そのため、<br />
・商品の効果効能・機能を専門的な目線で宣伝をしてもらうことで、信頼性を高めたい<br />
・特定の層へのブランディングを行いたい<br />
というニーズにはピッタリです。</p>
<h3>KOCとは</h3>
<p>「Key Opinion Consumer（キーオピニオンコンシューマー）」<br />
・KOLに比べてフォロワーが少ない（1000人～2万人という目安も！）<br />
・KOLに比べて特定のプラットフォーム（口コミサイト、SNS）での発信力がある<br />
・消費者目線で商品を使っていて、正直に良いことも悪いことも発信<br />
・企業とのタイアップでなく、個人での発信も多いため、「KOLより信頼できる！」との声もある。</p>
<p>といった特徴があります。</p>
<p>拡散力は弱いかもしれないですが、効果効能や機能を消費者目線で説明してもらう訴求が必要な場合はぴったりです。</p>
<p>また、KOCの方がマーケティングコストを抑えることもできるので、複数のKOCに異なるプラットフォームで発信してもらうといった活用方法もあります。</p>
<h3>インフルエンサー</h3>
<p>・「影響」という意味の単語、influenceから派生した造語<br />
・とにかく有名（タレント、著名人、ブロガー専門家等）<br />
・専門性は持たず、素人的な目線でのレビュー<br />
・ブランディングに活用できる（インフルエンサー＝企業というイメージが持たれることもある）</p>
<p>KOLやKOCはSNS上で個々で活動しているイメージが強いですが、インフルエンサーはTVや雑誌など他の媒体で有名な方の傾向が強いです。<br />
そのため、幅広い認知を必要としている場合にピッタリでしょう。</p>
<p>また、情報の発信方法によっても異なりますが、例えばインフルエンサーをTVCMや公式SNSで発信すると、インフルエンサー＝企業というイメージを持たれやすくなることも特徴です。</p>
<p>KOLやKOCは自分の目線で商品のレビューをしているという印象が強い一方、インフルエンサーは（KOL以上に）企業目線でのレビューという印象が持たれやすい傾向にあります。</p>
<p><strong>【※注意】日本にKOLやKOCという概念が浸透していないため、時には、KOLやKOCを含んでSNS上で情報発信している人を「インフルエンサー」と呼ぶ場合もあるので注意が必要です。</strong></p>
<h3>図で表してみると&#8230;</h3>
<p>▽有名度（フォロワー数）</p>
<table border="2" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td>低 ←</td>
<td><center><B>有名度レベル</B></center></td>
<td style="text-align: right;">→ 高</td>
</tr>
<tr>
<td>KOC</td>
<td>KOL</td>
<td>インフルエンサー</td>
</tr>
</tbody>
</table>
<p>▽専門性</p>
<table border="2" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td>低 ←</td>
<td><center><B>専門性レベル</B></center></td>
<td style="text-align: right;">→ 高</td>
</tr>
<tr>
<td>インフルエンサー</td>
<td>KOC</td>
<td>KOL</td>
</tr>
</tbody>
</table>
<p>▽企業との繋がり具合（※消費者の持つ印象）</p>
<table border="2" style="table-layout:fixed;" width="100%">
<tbody>
<tr>
<td>近 ←</td>
<td><center><B>企業繋がりレベル</B></center></td>
<td style="text-align: right;">→ 遠</td>
</tr>
<tr>
<td>インフルエンサー</td>
<td>KOL</td>
<td>KOC</td>
</tr>
</tbody>
</table>
<h2>まとめ</h2>
<p>最近話題の「KOL」「KOC」「インフルエンサー」についてまとめてみました。<br />
特にKOLに関して、ネット上では「中国で流行っている」との記述も多いですが、筆者の感覚としては、中国を起点に東アジア・東南アジア各国でどんどん似たようなプロモーション手法が好まれてきているように感じています。<br />
単に「有名人を起用して、SNS上で拡散してもらう」と言っても、狙いや効果によって、使い分ける必要があります。<br />
アジア越境ECでプロモーションを行う際には、ぜひこの辺りも頭の片隅に入れておいてみてください。</p>
<p><small><br />
《参考・画像出典》<br />
https://www.digima-japan.com/knowhow/china/17544.php<br />
https://eczine.jp/article/detail/11168<br />
https://www.future-8.com/%E3%83%96%E3%83%AD%E3%82%B0/item/7-blog_20200419.html<br />
https://www.atglobal.co.jp/strate/17624<br />
</small></p>

good-faces-Lv2lW5ImegQ-unsplash.jpg

インフルエンサー、KOL、KOCは何が違う？アジア越境EC販売戦略で重要なキーワードを解説

unnamed.png

Firebase CLIなしでFirestoreをローカル環境のテストで利用する

<h2>まず:has()とは</h2>
<p>CSS4で新たに定義される擬似クラスの１つで、引数として渡されるセレクタに一致する要素が1つ以上ある要素を表します。<br />
これは指定した要素を含む要素を選択するセレクタで、つまり要素の関連によって要素を選択できます。<br />
今まではJavaScriptsのみでしかできませんでしたが:has()を使う事で引数の要素を含んでいるかをCSSで判別できるようになります。</p>
<p>2022年4月段階ではまだ開発段階で殆どのwebブラウザには対応していませんがSafariではバージョン Safari15.4からmaxOSとiOSでサポートされています。</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-10281" src="/uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-1024x587.png" alt="" width="1024" height="587" srcset="/uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-1024x587.png 1024w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-300x172.png 300w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-768x441.png 768w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec-600x344.png 600w, /uploads-archive/lc/2022/04/dc50524f627d848d38a200719e685fec.png 1400w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h2>:has()の使用例</h2>
<p>&lt;a&gt; 要素のうち直接 &lt;img&gt; を含んでいるものを選択<br />
次のセレクターは、 &lt;img&gt; を直接子に持つ &lt;a&gt; 要素のみを選択します。</p>

		<div id="crayon-64d1a7a2c7765083410771" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !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: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" 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: 12px !important; line-height: 15px !important;">
a:has(&gt; img)</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: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c7765083410771-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c7765083410771-1"><span class="crayon-i">a</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">img</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&lt;h1&gt; 要素のうち直後に &lt;p&gt; があるものを選択</p>
<p>次のセレクターは、直後に &lt;p&gt; 要素を持つ &lt;h2&gt; 要素のみfont-size:30pxにします。</p>

		<div id="crayon-64d1a7a2c776b441646392" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !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: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" 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: 12px !important; line-height: 15px !important;">
h2:has(+p){
font-size:30px;
}</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: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c776b441646392-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64d1a7a2c776b441646392-2">2</div><div class="crayon-num" data-line="crayon-64d1a7a2c776b441646392-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c776b441646392-1"><span class="crayon-i">h2</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span>+<span class="crayon-i">p</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64d1a7a2c776b441646392-2"><span class="crayon-i">font</span>-<span class="crayon-i">size</span><span class="crayon-sy">:</span><span class="crayon-cn">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64d1a7a2c776b441646392-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>.contentsBoxの中に.itemが含まれている場合</p>

		<div id="crayon-64d1a7a2c776e856889063" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !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: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" 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: 12px !important; line-height: 15px !important;">
.contentsBox:has(.item){
}</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: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c776e856889063-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64d1a7a2c776e856889063-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c776e856889063-1"><span class="crayon-sy">.</span><span class="crayon-i">contentsBox</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">item</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64d1a7a2c776e856889063-2"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>逆に</p>

		<div id="crayon-64d1a7a2c7771662105320" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !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: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" 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: 12px !important; line-height: 15px !important;">
.contentsBox:not(:has(.item))</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: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c7771662105320-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c7771662105320-1"><span class="crayon-sy">.</span><span class="crayon-i">contentsBox</span><span class="crayon-sy">:</span><span class="crayon-st">not</span><span class="crayon-sy">(</span><span class="crayon-sy">:</span><span class="crayon-e">has</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">item</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とすると.contentsBoxの中に.itemが含まれていない場合となる。</p>
<p>&nbsp;</p>
<p>Googleデベロッパーによるデモのツイート↓</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">:has() + container queries = the component-based logical styling we&#8217;ve always dreamed of 😍</p>
<p>In this demo:<br />
🖼 If the card has an image: make the font smaller &amp; at &lt; 400px wide, stack it<br />
✨ If no image: bigger font, no stacking<a href="https://t.co/UJuXCXUrvV">https://t.co/UJuXCXUrvV</a></p>
<p>⚠️ Need flags on in Canary <a href="https://t.co/ThhPLHDWak">pic.twitter.com/ThhPLHDWak</a></p>
<p>— una.css 👩🏻‍💻🇺🇦 (@Una) <a href="https://twitter.com/Una/status/1510357767453818881?ref_src=twsrc%5Etfw">April 2, 2022</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>CSS4で追加予定とのことでまだまだ実用段階ではありませんが親要素に対して指定したりできるようになる事でこれが実装された際にはだいぶ効率化できそうだなと感じました。</p>

これから実装？新しい擬似クラス「:has()」とは？

<h2>はじめに</h2>
<p>以下の数字は、あるファッションブランドの記録です。みなさんはどのようなブランドを思い起こしますか？</p>
<ul>
<li>世界54カ国のiOSプラットフォームでのダウンロード数がトップ。Androidプラットフォームでも13カ国で最もダウンロードされたECアプリとなる。</li>
<li>評価額1000億ドル突破。ZARAとH＆M足した時価総額を超える。</li>
<li>2021年に約157億ドル（約1兆8000億円）の売り上げ。</li>
<li>220カ国向けにオンライン販売。</li>
</ul>
<p>これらの記録は中国発のファッションブランド「SHEIN」が成し遂げたことのほんの一部です。ユニクロやZARAを超えたとも言われる「SHEIN」。とはいえ日本での知名度は高くありません。ご存じの方はどれくらいいらっしゃるのでしょうか？</p>
<p>今回は謎に包まれたファッションブランド「SHEIN」について紹介したいと思います。</p>
<h2>「SHEIN」ってどんなブランド？</h2>
<p>「SHEIN」のWEBサイトを訪れてまず驚くのが圧倒的な安さです。例えば、570円のTシャツ、1000円以下のスカート、2600円のジャケットなどとにかく激安です。さらに、2000円以上の購入で送料無料、6000円以上の購入で500円off、15000円以上の購入で2000円offといった割引があります。</p>
<p><div id="attachment_10272" style="width: 522px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-10272" loading="lazy" class=" wp-image-10272" src="/uploads-archive/lc/2022/04/2022-04-14-8-1024x683.png" alt="shein" width="512" height="341" srcset="/uploads-archive/lc/2022/04/2022-04-14-8-1024x683.png 1024w, /uploads-archive/lc/2022/04/2022-04-14-8-300x200.png 300w, /uploads-archive/lc/2022/04/2022-04-14-8-768x512.png 768w, /uploads-archive/lc/2022/04/2022-04-14-8-600x400.png 600w, /uploads-archive/lc/2022/04/2022-04-14-8.png 1227w" sizes="(max-width: 512px) 100vw, 512px" /><p id="caption-attachment-10272" class="wp-caption-text">引用　「SHEIN」</p></div></p>
<p>さらに驚きなのが新作の多さです。毎日なんと4000以上の新作が発売されています。例えば、2022年4月11日は6300品、12日は8300品が新しく発売されたというから、信じられません。アパレルに疎い私からすると、そんなに新しく商品をデザインできるなぁと感心してしまいます。店舗型では、棚の入れ替えがあるため到底不可能な数字といえますね。</p>
<p>このブランドの特徴は、Z世代と言われる若い世代から支持されていることです。日経MJの記事によると「SHEIN」の利用者は、10代の割合が40.4%（2021年9月）と非常に高いです。また、利用者に占める女性の割合も85％以上です。</p>
<p><div id="attachment_10273" style="width: 312px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-10273" loading="lazy" class=" wp-image-10273" src="/uploads-archive/lc/2022/04/bdde5d379414bc5065a421798d6d4480.jpg" alt="SHEINグラフ" width="302" height="519" srcset="/uploads-archive/lc/2022/04/bdde5d379414bc5065a421798d6d4480.jpg 680w, /uploads-archive/lc/2022/04/bdde5d379414bc5065a421798d6d4480-174x300.jpg 174w, /uploads-archive/lc/2022/04/bdde5d379414bc5065a421798d6d4480-595x1024.jpg 595w, /uploads-archive/lc/2022/04/bdde5d379414bc5065a421798d6d4480-600x1032.jpg 600w" sizes="(max-width: 302px) 100vw, 302px" /><p id="caption-attachment-10273" class="wp-caption-text">出典　日経新聞</p></div></p>
<h2>なぜこんなにも安いのか？</h2>
<p><div id="attachment_10275" style="width: 498px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-10275" loading="lazy" class=" wp-image-10275" src="/uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-scaled.jpg" alt="" width="488" height="325" srcset="/uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-scaled.jpg 2560w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-300x200.jpg 300w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-1024x683.jpg 1024w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-768x512.jpg 768w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-600x400.jpg 600w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-1536x1024.jpg 1536w, /uploads-archive/lc/2022/04/adrian-sulyok-sczNLg6rrhQ-unsplash-2048x1365.jpg 2048w" sizes="(max-width: 488px) 100vw, 488px" /><p id="caption-attachment-10275" class="wp-caption-text">画像はイメージです。</p></div></p>
<p>激安価格と圧倒的に早い周期での新商品発売で、世界中のZ世代の人気を集める「SHEIN」。なぜこんなにも安く、次々と新商品を生み出せるのでしょうか？</p>
<p>「SHEIN」は、2008年に許仰天（クリス・シュー）氏により創業された会社が母体となっています。同氏は、当初ウエディングなど複数の事業を手掛けていましたが、2015年から「SHEIN」ブランドが本格的にスタートしました。</p>
<p>Tシャツ500円、新作一日4000品以上という圧倒的な数字を生み出す秘密は、サプライチェーンにあります。これまでのアパレルブランドでは、企画を欧米の本社が行い、その後、材料の仕入計画を貿易部門が作り、途上国の工場で大量生産するというモデルが一般的でした。一方、「SHEIN」ではこれらを一貫して中国国内で行っています。「世界のアパレル工場」と呼ばれる広州に約300の協力工場があり、売れ行きに応じ、毎日増産減産の指示が自動的に届きます。</p>
<p>新商品は、SNSや通販サイトのAIによる分析に加え、800名のデザイナーとバイヤーが情報を日々集めることによって、生み出されています。<br />
各工場は100着ほどの小スロットに対応しており、売れ行きの悪かったものはすぐに終売、良いものはAIによって売れ行きを予測し、増産をかけます。企画から生産・販売までにかかる日数は最短で3日。ZARAの最短2週間、1週間のboohooを上回っており、ファストファッションの極地とも言えるでしょう。</p>
<h2>越境ＥＣからの観点</h2>
<p>「SHEIN」は越境ECのしくみを最大限活用したブランドということもできるでしょう。</p>
<p>中国の他にもアメリカやインド、ベルギーに倉庫を持ち、そこから世界中に商品が届けられています。</p>
<p>各国に店舗を持たないため、個人輸入の扱いになる点も興味深いです。例えば、日本では商品と送料を含む総額が16,666円以下なら関税がかからないため、この点も輸入時に関税がかかる店舗型のブランドと比べ、安価に商品を購入できる一因となっています。</p>
<h2>まとめ</h2>
<p>今回は中国発の越境ECファッションブランド「SHEIN」を紹介しました。物流の発展により世界中どこにいても、同じ商品を比較的短時間で手にすることができるようになりました。越境EC業界で一歩先を行く企業として今後も目が離せません。</p>
<p><small><br />
《参考・画像出典》<br />
<a href="https://jp.shein.com/"><span style="font-weight: 400;">SHEIN</span></a><br />
<a href="https://toyokeizai.net/articles/-/452310"><span style="font-weight: 400;">アパレル初！謎の1兆円未上場企業『SHEIN』の正体</span></a><br />
<a href="https://36kr.jp/181485/"><span style="font-weight: 400;">中国発アパレルEC『SHEIN』、評価額1000億ドル突破。ZARAとH＆M足した時価総額超える</span></a><br />
<a href="https://www.nikkei.com/article/DGXZQOUC082KN0Y1A001C2000000/"><span style="font-weight: 400;">10代に広がるファッション系越境ECアプリ『SHEIN』</span></a><br />
<a href="https://mp.weixin.qq.com/s/fBfGBjmzGy9CxB7VsoYjEA"><span style="font-weight: 400;">SheInの謎を解き明かす：中国で最も神秘的な100億ドルの企業の台頭</span></a><br />
<a href="https://enjoy-japan.jp/column/shein/"><span style="font-weight: 400;">中国アパレル通販『SHEIN（シーイン）』とは？企業戦略を徹底解説</span></a><br />
<a href="https://forbesjapan.com/articles/detail/45626"><span style="font-weight: 400;">中国ファストファッションSHEIN　NY上場のうわさが再浮上</span></a><br />
<a href="https://www.sbbit.jp/article/cont1/76198"><span style="font-weight: 400;">急躍進『SHEIN』の影で勢力伸ばす“AI企業”の正体、中国アパレルがもっと爆速になる理由</span></a><br />
</small></p>

越境ECで世界中に拡大！<br>中国発ファッションブランド「SHEIN」とは？

<div data-pm-slice="1 1 []" data-en-clipboard="true">
<div data-pm-slice="1 1 []" data-en-clipboard="true">Webページやアプリに躍動感を吹き込むWebアニメーション、今回は簡単にアニメーションを作るのに役立つJavaScriptアニメーションライブラリー5つを紹介します。</div>
<h3>TypeIt</h3>
<p>公式：<a href="https://www.typeitjs.com/"　target="_blank">https://www.typeitjs.com/</a></p>
<div>ポイントフレーズを活かせるテキストタイピングアニメーションです。このライブラリーを使用するとタイピング効果を簡単に実現することができます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="dyJgvNx" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/dyJgvNx"><br />
TypeIt test</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>SrollOut</h3>
<p>公式：<a href="https://scroll-out.github.io/" target="_blank" rel="noopener">https://scroll-out.github.io/</a></p>
<div>CSS属性や変数を使い手軽にアニメーションをつけられます。1kbもいかない非常に軽いライブラリーであるし、どんなフレームワークを使っているとかには関係なく部分的に適用できるため、プロジェクトにも負担がないです。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="eYyPvwX" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/eYyPvwX"><br />
Untitled</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>rellax</h3>
<p>公式：<a href="https://dixonandmoe.com/rellax/" target="_blank" rel="noopener">https://dixonandmoe.com/rellax/</a></p>
<div>ページをスクロールする時、要素毎に異なる速さでスクロールされるように調整することができます。rellaxオプジェットを生成するだけでデフォルトの速さでスクロールされます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="ExodmaY" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/ExodmaY"><br />
Untitled</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>GSAP-greensock</h3>
<p>公式：<a href="https://greensock.com/" target="_blank" rel="noopener">https://greensock.com/</a></p>
<div>公式サイトを見ると「開発者をアニメーションヒーローにしてくれるライプラリ」と書いていて、それほど強力なライブラリーでできることが多いので、余裕を持って一個づつやってみたら良いかと思います。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="NWXOpwv" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/NWXOpwv"><br />
ScrollOut test</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
<h3>animejs</h3>
<p>公式：<a href="https://animejs.com/" target="_blank" rel="noopener">https://animejs.com/</a></p>
<div>シンプルでありながら強力なAPIを備えた軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトで動作します。ドキュメントもよくできていますので、どんなアニメーションができて、それを実現するためにはどんなコードを作成すればいいのかもすぐ確認できます。</div>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="poERmEM" data-user="codewitharyann">See the Pen <a href="https://codepen.io/codewitharyann/pen/poERmEM"><br />
Porduct delivery status card for website</a> by Aryankapoor (<a href="https://codepen.io/codewitharyann">@codewitharyann</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div data-pm-slice="1 1 []" data-en-clipboard="true">
<div>見て楽しい、作って楽しいアニメーションが簡単に作れて、しかも軽いライプラリでした。今後のWebサイト制作でも活用できればと思います！</div>
</div>
<div></div>
<div>
<div data-pm-slice="1 1 []" data-en-clipboard="true"></div>
</div>


JavaScriptアニメーションライブラリー5選

<h2>はじめに</h2>
<p>国際郵便においてまたルール改正の動きがありましたので紹介いたします。2021年1月1日に施行された<a href="https://www.post.japanpost.jp/int/ead/index.html" rel="noopener" target="_blank">通関電子データの送信義務化</a>ですが、対象地域が拡張され、<a href="https://www.post.japanpost.jp/notification/pressrelease/2022/00_honsha/0322_04_01.pdf" rel="noopener" target="_blank">ヨーロッパ等へも通関電子データの登録が必須</a>となります。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2022/04/bnr_ead_ja.jpg" alt="" width="840" height="160" class="aligncenter size-full wp-image-10221" srcset="/uploads-archive/lc/2022/04/bnr_ead_ja.jpg 840w, /uploads-archive/lc/2022/04/bnr_ead_ja-300x57.jpg 300w, /uploads-archive/lc/2022/04/bnr_ead_ja-768x146.jpg 768w, /uploads-archive/lc/2022/04/bnr_ead_ja-600x114.jpg 600w" sizes="(max-width: 840px) 100vw, 840px" /></p>
<h2>「通関電子データ」とは</h2>
<p>初めての方は、最初の義務化が決定された際に、対象範囲や電子申請の登録サイト等を詳しく書いておりますので、下記の記事を参照ください。簡単にまとめると、「手書き」のラベルだけでは送れませんよという内容です。</p>
<p>  <div class="lcLink">
    <a href="https://launchcart.jp/contents/ekkyo-ec_data-trafficing/">
      <figure class="lcLink__figure"><img src="/uploads-archive/lc/2020/09/claudio-schwarz-purzlbaum-q8kR_ie6WnI-unsplash-300x200.jpg" alt="2021年1月1日施行!「通関電子データ送信義務化」について"></figure>
      <div class="lcLink__text">
        <h3 class="lcLink__title">2021年1月1日施行!「通関電子データ送信義務化」について</h3>
        <div class="lcLink__info">
          <p class="lcLink__category">ルール</p>
          <p class="lcLink__date">2020.9.25</p>
        </div>
      </div>
    </a>
  </div> </p>
<h2>新しい通関電子データ送信義務化内容</h2>
<h3>義務化開始日</h3>
<p>2022年6月20日（月）以降引き受け分</p>
<h3>電子データ送信が必須の国・地域</h3>
<p>2022年6月20日時点</p>
<ul>
<li>米国（2021年1月1日から施行済み）</li>
<li>アイスランド</li>
<li>アイルランド</li>
<li>アゼルバイジャン</li>
<li>アルバニア</li>
<li>アルメニア</li>
<li>アンドラ</li>
<li>イタリア</li>
<li>ウクライナ</li>
<li>ウズベキスタン</li>
<li>英国
<ul>
<li>ジブラルタ</li>
</ul>
</li>
<li>エストニア</li>
<li>オーストリア</li>
<li>ガーンジー</li>
<li>カザフスタン</li>
<li>北マケドニア</li>
<li>キプロス</li>
<li>ギリシャ</li>
<li>キルギス</li>
<li>クロアチア</li>
<li>コソボ</li>
<li>サンマリノ</li>
<li>ジャージー</li>
<li>ジョージア</li>
<li>スイス</li>
<li>スウェーデン</li>
<li>スペイン</li>
<li>スロバキア</li>
<li>スロベニア</li>
<li>セルビア</li>
<li>タジキスタン</li>
<li>チェコ</li>
<li>デンマーク
<ul>
<li>グリーンランド</li>
<li>フェロー島</li>
</ul>
</li>
<li>ドイツ</li>
<li>トルクメニスタン</li>
<li>ノルウェー</li>
<li>バチカン</li>
<li>ハンガリー</li>
<li>フィンランド</li>
<li>フランス
<ul>
<li>ガドループ</li>
<li>南極における フランスの地域</li>
<li>仏領ギアナ</li>
<li>マルチニーク</li>
<li>レユニオン</li>
</ul>
</li>
<li>ブルガリア</li>
<li>ベラルーシ</li>
<li>ベルギー</li>
<li>ポーランド</li>
<li>ボスニア・ ヘルツェゴビナ</li>
<li>ポルトガル</li>
<li>マルタ</li>
<li>マン島</li>
<li>モナコ</li>
<li>モルドバ</li>
<li>モンテネグロ</li>
<li>ラトビア</li>
<li>リトアニア</li>
<li>リヒテンシュタイン</li>
<li>ルーマニア</li>
<li>ルクセンブルク</li>
<li>ロシア</li>
</ul>
<p><small>参考：<a href="https://www.post.japanpost.jp/int/ead/country_tsukan.pdf" target="_blank" rel="noopener">https://www.post.japanpost.jp/int/ead/country_tsukan.pdf</a></small></p>
<h3>義務化対象国</h3>
<p>全世界　※米国宛は電子データがないものは引受拒否</p>
<h3>義務化対象サービス</h3>
<p>EMS（物品）、国際小包、小形包装物、国際eパケット、国際eパケットライト</p>
<h3>義務化対象外サービス</h3>
<p>EMS（書類）、書留付き印刷物</p>
<h3>申請必要情報</h3>
<p>差出人名・住所、受取人名・住所、内容品名、総重量、郵便物番号（追跡番号）</p>
<h3>申請登録サイト</h3>
<p><img loading="lazy" src="/uploads-archive/lc/2022/03/image.png" alt="" width="759" height="642" class="aligncenter size-full wp-image-10185" srcset="/uploads-archive/lc/2022/03/image.png 759w, /uploads-archive/lc/2022/03/image-300x254.png 300w, /uploads-archive/lc/2022/03/image-600x508.png 600w" sizes="(max-width: 759px) 100vw, 759px" /></p>
<p><a href="https://www.post.japanpost.jp/intmypage/whatsmypage.html" rel="noopener" target="_blank">国際郵便マイページサービス</a>にて、登録と同時にラベルの作成を行う必要があります。</p>
<p>一度登録すれば、同じ送り先や似たような荷物を送る場合、過去のデータを活用できるので便利です。しかし、送る商品が多い場合は作業に時間がかかるので、要注意です。</p>
<h2>まとめ</h2>
<p>その他の地域に関しては、引き続き</p>
<blockquote>
<p>遅延や返送のリスクがあることをご承知いただければ、通関電子データの送信が無くても引き受けが可能ですが、可能な限り送信にご協力をお願いします。</p>
</blockquote>
<p>と記載があります。また、今回は対象地域の追加以外は、2021年1月1日施行の内容から変更はないようです。前回記事でもご紹介させて頂きましたこういった背景は、下記の内容と照らし合わせるとより理解が深まるかもしれません。</p>
<p><small>《参考》<a href="https://www.kuronekoyamato.co.jp/ytc/ad/opinion/ems/" target="_blank" rel="noopener">https://www.kuronekoyamato.co.jp/ytc/ad/opinion/ems/</a></small></p>

sticker-mule-3IkH9VN3QT8-unsplash-scaled.jpg

2022年6月20日施行!<br>ヨーロッパ向け郵便「通関電子データ送信義務化」について

<h2>はじめに</h2>
<div>
<div>無料でコンピューターサイエンスを学習をする方法として</div>
<div>アメリカのハーバード大学のコンピュータサイエンスの授業がオンラインで見れるサイト</div>
<p>&nbsp;</p>
<div>CS50 for Japanese</div>
<div><a href="https://cs50.jp/">https://cs50.jp/</a></div>
<p>&nbsp;</p>
<div>を紹介いたします。</div>
<p>&nbsp;</p>
<div>本題に入る前に少し自分のことを説明すると今はエンジニアとして働いていますが</div>
<div>学生時代はコンピューターサイエンスについては基礎をすこし学んだだけで</div>
<div>しっかり勉強する機会がないまま就職してしまい、いつかちゃんと学び直したいなという気持ちを</div>
<div>持ちながらもお金や時間の問題もあり何もできてないという状態でした。</div>
<p>&nbsp;</p>
<div>そこで見つけたのが CS50 for Japanese でした。</div>
<div>動画自体は以前から Youtube 上でアップロードされていたようなのですが</div>
<div>去年（2021年）、日本語サイト公開と動画に日本語字幕が追加されました。</div>
</div>
<p>&nbsp;</p>
<h2>Week0を見た感想</h2>
<blockquote class="wp-embedded-content" data-secret="pftyqThR9u"><p><a href="https://cs50.jp/x/2021/week0/">Week0</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="&#8220;Week0&#8221; &#8212; CS50 for Japanese: コンピュータサイエンスの入門" src="https://cs50.jp/x/2021/week0/embed/#?secret=MV4bmNynYR#?secret=pftyqThR9u" data-secret="pftyqThR9u" width="500" height="282" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<div>上記のリンク先の埋め込み動画で、字幕をONにして言語を日本語にすると日本語字幕付きで見れます。</div>
<div></div>
<div></div>
<div>Week0は未経験者が最初に受ける講義のため、</div>
<div>まず</div>
<div>・コンピュータってなんだろう</div>
<div>・プログラミングって何をしてるんだろう</div>
<div>という話から始まり、</div>
<div>・ビジュアルプログラミング言語のScratchでプログラムを書いてみる</div>
<div>という流れで講義が進みます。</div>
<p>&nbsp;</p>
<div>私のように改めて復習したいって人にも良いし、</div>
<div>今まで触れてこなかったけどちょっと興味があるって人にも良いと思います。</div>
<div></div>
<div>私個人としては、コンピュータやプログラムのことを非エンジニアにも理解できる言葉で説明するやり方が参考になりました。</div>
<div>仕事柄、エンジニア同士だけじゃなく、エンジニアじゃない人に自分のやってることを説明する機会も多いのでそういう機会に活かせそうです。</div>
<p>&nbsp;</p>
<h2>まとめ</h2>
<div>Week1以降ではC言語やPythonを使った講義があるそうなので、もう少し歯応えのある内容のようです。</div>
<div>このシリーズ（〜Week10）を全部見終わることを今年の目標のにして頑張っていこうと思います。</div>
<h2>参考リンク</h2>
<ul>
<li><a href="https://prtimes.jp/main/html/rd/p/000000017.000049664.html">https://prtimes.jp/main/html/rd/p/000000017.000049664.html</a></li>
<li><a href="https://cs50.jp/">https://cs50.jp/</a></li>
</ul>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2022/06/02

2022/05/20

2022/05/20

2022/05/20

2022/05/17

2022/05/13

2022/05/13

2022/05/13

2022/04/29

2022/04/27

2022/04/27

2022/04/23

2022/04/16

2022/04/15

2022/04/15

2022/04/05

2022/04/02

2022/04/01