【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のショットカットキー５選

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

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

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()」とは？

<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>
<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>


hsph-logomock-s-1024x768-1-768x576.jpeg

無料でコンピューターサイエンスが学べるCS50について

記事のサムネスクリーンショット-2022-03-31-20.01.48.png

GraphQLのページネーション機能を実装する方法: Apollo client + express-graphql

【Javascript】var let const の使い分けとObjectの凍結・封印

<p>CSVファイルでデータのやり取りを行う場合、文字化けしてしまった！といったトラブルが発生することがあります。</p>
<p>この文字化けの原因は「文字コード」。</p>
<p>今回は、文字化けしてしまったCSVファイルをちゃんと見れるようにする方法や、文字化けしないように気を付ける方法についてご紹介します。</p>
<h2>文字コードって？</h2>
<p>コンピューターでは、私たちが扱っている「あ・い・う」といった文字は認識できないので、数値で管理されています。そのため、文字１つ１つにコードが割り当てられており、それらのルールを「文字コード」といいます。<br />
世界で最も一般的な文字コードは「UTF-8」なのですが、日本でメジャーに使用されているは「Shift_JIS」と呼ばれるものです。<br />
例えば、「あ」はUTF-8では「E38182」とされ、Shift-JISでは「82A0」とされています。<br />
この文字コードの指定が異なることが原因で、文字化けが発生してしまうのです。</p>
<h2>文字化けしたCSVファイルの対処法</h2>
<p>文字化けが発生してしまった際には、文字コードを変換する必要があります。<br />
いくつか方法がありますが、今回はいくつかの方法をご紹介します。</p>
<h3>EXCEL上で変換する方法</h3>
<p>１．EXCELのシートを新規で開く<br />
２．「データ」より「テキストまたはCSVから」をクリック、開きたいファイルを選択<br />
３．文字コードの部分を「UTF-8（65001: Unicode（UTF-8））」か「Shift-JIS（932: 日本語（Shift-JIS））」に変更<br />
※プレビューで見ることができるので、プレビューで文字化けがなくなったことを確認してください。<br />
４．右下の「読み込み」をクリック、EXCEL上で文字化けせずにファイルを開くことができます。</p>
<h3>Windowsの「メモ帳」を使って変換する方法</h3>
<p>１．開きたいファイルを右クリック、「プログラムから開く」から「メモ帳」を選択し、メモ帳でCSVファイルを開く<br />
２．メモ帳を開いた状態で「ファイル」から「名前をつけて保存」を選択<br />
３．保存ボタンの左隣、「文字コード」のプルダウンを「ANSI」に変更して保存<br />
※ANSIはShift-JISの別称です（正確には異なりますが）<br />
４．CSVファイルを開くと、文字化けしていないことが確認できます。</p>
<h3>Macの「テキストエディット」を使って変換する方法</h3>
<p>１．開きたいCSVファイルを右クリックし「このアプリケーションで開く」から「テキストエディット」を選択<br />
２．ファイルメニューから「複製」を選択<br />
３．文字コードを「Shift_JIS」か「Unicode（UTF-16）」に変更して保存<br />
４．複製して保存したCSVファイルを開き、文字化けしていないことが確認できます。</p>
<h2>このCSVファイル、どの文字コード？確認する方法</h2>
<p>また、CSVファイルをシステムにアップロードする際に、CSVファイルとシステムの受け入れる「文字コード」が異なると、システム上で文字化けが発生する危険性があります。特に海外のサービスを利用したり、海外の文字が含まれているCSVファイルを取り扱う際に注意する必要があります。</p>
<p>事前にCSVファイルの文字コードを確認することがオススメです。</p>
<h3>Windowsの「メモ帳」を使って文字コードを確認する方法</h3>
<p>１．CSVファイルを右クリック、「プログラムから開く」から「メモ帳」を選択し、メモ帳でCSVファイルを開く<br />
２．メモ帳の右下に文字コードが記載されているので、そこで確認することができます。</p>
<p><img loading="lazy" src="/uploads-archive/lc/2022/03/c5e752c33d67a1823f5126781d1a39dd-300x201.png" alt="" width="300" height="201" class="aligncenter size-medium wp-image-10005" srcset="/uploads-archive/lc/2022/03/c5e752c33d67a1823f5126781d1a39dd-300x201.png 300w, /uploads-archive/lc/2022/03/c5e752c33d67a1823f5126781d1a39dd-600x402.png 600w, /uploads-archive/lc/2022/03/c5e752c33d67a1823f5126781d1a39dd.png 618w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>まとめ</h2>
<p>CSVファイルが文字化けした時の対応法についてまとめました。<br />
アジア越境ECカートシステム、LaunchCartでは、CSVの入出力で文字コードを選択することができます。<br />
海外の顧客情報を扱う時など、文字化けが発生した際には「文字コード」が原因なことが多いため、一度文字コードの変換をして、対応してみてください。</p>


CSVファイルが文字化けした時の対応法

<p><span class="keiko_yellow">VYOND（ビヨンド）とは、<strong>アニメーション制作に特化した動画編集ソフト</strong>です。</span><br />
VYONDを使えば、あらかじめ用意された素材と背景スライドを組み合わせるだけで、簡単に以下のような動画が作成できます。</p>
<p>素材が豊富で、BGMや効果音も簡単に挿入できることから、プロが作るようなアニメーションを誰でも短時間で作成できるのが特徴です。作成できる動画パターンも3つあり、目的に応じてアニメーションを作れます。</p>
<h3>メリット</h3>
<p>・イラストが描けなくてもOK（カスタマイズ可能）<br />
・アニメーションはプリセットから選べる<br />
・作った素材を保存しておくことが出来る</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9987" src="/uploads-archive/lc/2022/03/3styles.png" alt="" width="798" height="487" srcset="/uploads-archive/lc/2022/03/3styles.png 798w, /uploads-archive/lc/2022/03/3styles-300x183.png 300w, /uploads-archive/lc/2022/03/3styles-768x469.png 768w, /uploads-archive/lc/2022/03/3styles-600x366.png 600w" sizes="(max-width: 798px) 100vw, 798px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9990" src="/uploads-archive/lc/2022/03/ca03.jpeg" alt="" width="1161" height="591" srcset="/uploads-archive/lc/2022/03/ca03.jpeg 1161w, /uploads-archive/lc/2022/03/ca03-300x153.jpeg 300w, /uploads-archive/lc/2022/03/ca03-1024x521.jpeg 1024w, /uploads-archive/lc/2022/03/ca03-768x391.jpeg 768w, /uploads-archive/lc/2022/03/ca03-600x305.jpeg 600w" sizes="(max-width: 1161px) 100vw, 1161px" /></p>
<p>人物は表情のパーツや服装などそこそこ細かくカスタマイズできるため、比較的汎用性が高いと言えます。<br />
また、動きとなるアニメーションの数が多い為何かしら求めている様な動きをさせることが出来る。<br />
ソフトではなく、ブラウザ上で編集する為容量を圧迫したりもせず、素材を共有することが可能となっている。</p>
<h3>デメリット</h3>
<p>・導入コストは高め（メーカーサイトでは年額$999）<br />
・テイストが海外寄り（メリットにもなり得る）<br />
・基本英語のみなので苦手な人は使いづらい</p>
<p>国内代理店ですと165,000円と比較的高額でメーカーから直接であれば約11万円ほどです（Professional年間契約）<br />
３種類のテイストが選べますが海外メーカーのツールの為どれもキャラクターが海外テイストのものが多く、ターゲットによってはハマらない場合もあり得そうです。</p>
<p>&nbsp;</p>
<h3>アニメーション動画の制作手順</h3>
<p>&nbsp;</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9989" src="/uploads-archive/lc/2022/03/33267_fb1.jpeg" alt="" width="1200" height="630" srcset="/uploads-archive/lc/2022/03/33267_fb1.jpeg 1200w, /uploads-archive/lc/2022/03/33267_fb1-300x158.jpeg 300w, /uploads-archive/lc/2022/03/33267_fb1-1024x538.jpeg 1024w, /uploads-archive/lc/2022/03/33267_fb1-768x403.jpeg 768w, /uploads-archive/lc/2022/03/33267_fb1-600x315.jpeg 600w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
<p>&nbsp;</p>
<p><span style="color: #ff9900;">STEP.1</span><br />
<strong>絵コンテ作成</strong><br />
まずはアニメーション全体の絵コンテを作成します。絵コンテは全体のわかりやすさを決める重要なポイント。<br />
作成者の力量が一番問われる部分でもあります。</p>
<p><span style="color: #ff9900;">STEP.2</span><br />
<strong>キャラクターや文字を配置する</strong><br />
各スライドに置きたい素材を並べていきます。<br />
人や車、動物などの素材を置きましょう。</p>
<p>このときはまだ動きをつけず、先に全ページ素材の配置だけ終えてください。</p>
<p><span style="color: #ff9900;">STEP.3</span><br />
<strong>それぞれに動きをつける</strong><br />
素材をすべて配置したら、それぞれの動きを指示します。<br />
右から登場、ふわっと出てくるなど、ここで考えるのは動き方だけ。タイミングは無視して、まずは出方だけ決めましょう。</p>
<p><span style="color: #ff9900;">STEP.4</span><br />
<strong>音声を追加する</strong><br />
ここまで作業を終えたら、音声ファイルを差し込みます。</p>
<p><span style="color: #ff9900;">STEP.5</span><br />
<strong>音声と動きのタイミングを合わせる</strong><br />
音声に合わせて、素材の動きのタイミングを合わせます 。また、各スライドの尺を決めます。</p>
<p><span style="color: #ff9900;">STEP.6</span><br />
<strong>全体を最終調整</strong><br />
最後に全体を確認して、動きがかぶっているところやずれているところを微修正します。</p>
<p>&nbsp;</p>
<p>まとめ</p>
<p>動画制作の中でもキャラクターアニメーションを使ったものとなるとハードルが上がってしまいがちですが、Vyondを使用することで特別な知識等はなく動きのある動画を作成できることから需要は今後もあると感じました。実際に案件によっては高額だったりする為デメリット部分を含めたとしてもメリットの方が上回ると思いました。</p>
<p>&nbsp;</p>
<h4>参考サイト</h4>
<p class="entry-title single-title">【プロ監修】VYONDの評判は最悪？アニメーション制作で稼ぐコツまで完全公開</p>
<p> skill-hacks.co.jp/media/vyond/</p>


アニメーション動画制作ツール「Vyond」とは？

スクリーンショット-2022-02-24-13.07.51-1024x605.png

Typescriptでの単体テストの書き方(Jest)

<p>成功した製品/サービスは、たくさんの秘策や成功要因を持っていると思いますが、ユーザー体験もその中の大きな一部分となります。例えば、SEOと広告などで訪問率を上げるのはできますが、サービス自体が優れたユーザー体験を提供してくれないと「訪問者」が「顧客」になるのは限界があると思います。</p>
<h2>UXの復習</h2>
<p>事典的な意味では、”人間は経験という概念を持っている。この経験のうち、製品・サービス・人工物などの独立したシステムを対象として、人間がユーザーとしてそれらに出会い利用した経験をユーザーエクスペリエンスという。”です。<br />
整理すると、</p>
<ul>
<li>あるシステム/製品/サービスを利用して感じて思う総体的な体験</li>
<li>人がコンピューターと相互作用しながら人の中に蓄積されるあらゆる知識や記憶、感情</li>
</ul>
<p>になります。<br />
優れたUXは、製品/サービスの価値を理解し、ユーザーのためのフローを考慮した体験をさせなければなりません。</p>
<h2>なぜ重要なのか</h2>
<ul>
<li>68％のユーザーは、悪いUXのせいでWebサイトを離れます</li>
<li>44％ユーザーは、友人と悪いオンラインショッピング体験を共有しています</li>
<li>62％ユーザーは、過去の経験に基づいて買い物を選択しています</li>
<li>UXの問題の85％は、5人のユーザーがテストすることでわかります</li>
</ul>
<p>少し古い資料から見た情報なので、パーセンテージは変わってきたかもしれませんが、その事実は変わってないと思います。</p>
<h2>UIとの関係</h2>
<p>UIが製品の一部であるのに対して、UXはユーザーの心の中に生じるものです。そのため同じ製品を使っても、ユーザーごとにUXは異なります。こちらの図の方がわかりやすいと思います。「牛乳＆シリアル」という製品があって、ユーザーは「スプーン」という接点を介して、「食べる」体験をします。その体験で、おいしいって言うユーザーもいれば、おいしくないと感じるユーザーもいます。おいしくないと感じるユーザーは「スプーン」を変えても多分同じ感想でしょう。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-9843" src="/uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1024x725.png" alt="" width="1024" height="725" srcset="/uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1024x725.png 1024w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-300x212.png 300w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-768x543.png 768w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-600x425.png 600w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8-1536x1087.png 1536w, /uploads-archive/lc/2022/02/cffcbbb30c3ddb41527ae1068dbe41f8.png 1778w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>優れたUIは優れたUXの必要条件ですが、優れたUIがあるから優れたUXになる訳ではなくUIはUXという概念の中に含まれているものなのです。</p>
<h2>流れ</h2>
<p>一般的な流れはやはり存在します。ただ、各会社やプロジェクトには需要、予算などが異なるため、必ずしも守る流れや決まった方法はありません。<br />
<img loading="lazy" class="alignnone size-large wp-image-9842" src="/uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1024x293.png" alt="" width="1024" height="293" srcset="/uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1024x293.png 1024w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-300x86.png 300w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-768x220.png 768w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-600x172.png 600w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-1536x440.png 1536w, /uploads-archive/lc/2022/02/7d54ad7dc7debc7a17a43e72f27c6ca4-2048x587.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
大きくは、四つの部分に分けられます。</p>
<ol>
<li>背景→競合他社分析→アンケートでのUXリサーチ</li>
<li>ペルソナ(共感マップ-ペルソナの視点で感情や行動を整理)→カスタマージャーニー(ユーザーが商品・サービスとの関わりの中でたどる一連のプロセスを視覚化したもの-ユーザーフロー)</li>
<li>ワイヤフレーム→ペーパープロトタイプ→1回目の使用テスト</li>
<li>モックアップ(ここてUIデザイン、動きなし)→プロトタイプ(動きあり)→2回目の使用テスト</li>
</ol>
<h2>ポイント</h2>
<h4>目的を明確に</h4>
<p>目的がないと、揺れるしかないと思います。自社の商品やサービスの存在理由にとらわれ、自己満足的なものにならないように、誰に向けて発信するかを明確にする必要があります。</p>
<h4>利用者の使用イメージを検証</h4>
<p>上で目的のユーザーを決定後、ユーザーが使用する場面を徹底的に検証することです。ユーザー目線で、ターゲットとなるユーザーが求めているものは一体何であるのかを明確にすると、どのようなUI/UXデザインで実装していけばいいのかも明確になります。</p>
<h3>終わりに</h3>
<p>UIは「User Interface」の略語、UXは「User experience」の略語で 、言葉通りUserが主役です。「正解」はサービスを利用する側のユーザーが持っています。UXは思った以上に重要な部分かもしれません。サービスの価値を高めるには優れたUXデザインが求められ、UXを高める要素の一つとしてUIがあります。<br />
市場や消費者の動向は時代とともに変化しており、ユーザーが求める体験も常に変化していくので、「一度改善したら終わり」ではなく、ビジネスの目線からでも、こまめな改善をし続けるのと同時に定期的な見直しも行う必要がある思います。</p>


UX改善の重要性、流れ＆ポイント！

og-image-768x330.png

GraphQLを触ってみました〜REST APIとGraphQLの決定的な違い

スクリーンショット-2022-01-28-11.46.26-768x535.png

Serverlessアプリケーションに特化したIaCツールServerless Devsを紹介

<p>Node.jsでは有志たちによって非常に多くの便利な機能を提供してくれるモジュールを利用して様々なことができますが、<br>そういったサービスの中にはヘッドレスEコマースも存在していることを個人的に最近知ったので、そちらについて調べてみました。</p>



<p>今回は、以下のサイトで紹介されていたサービスの中から、Node.js ではじめられるものを2つピックアップして調べてみました。<br><a href="https://medevel.com/17-os-headless-ecommerce-solutions/" target="_blank" rel="noreferrer noopener">17 Best Open-source Headless eCommerce Solutions</a></p>



<p>ちなみにヘッドレスEコマースとは、ECのシステムにあたるバックエンドとECのサイトにあたるフロントを切り離し、バックエンド部分のみを提供し、APIを経由してフロントと連動するEC構築のサービスです。</p>



<p>ヘッドレスEコマースのメリットは、バックエンドがフロントエンドの出力を省略できるため、本来の役割に専念でき高いパフォーマンスを提供できることと、フロントエンドがバックエンドの制限を受けないため、幅広い方法でフロントエンドの開発を行えることです。</p>



<h2><a href="https://www.vendure.io/" target="_blank" rel="noreferrer noopener">vendure</a></h2>



<figure class="wp-block-image size-large"><a href="https://www.vendure.io/" target="_blank" rel="noopener"><img loading="lazy" width="1024" height="512" src="/uploads-archive/lc/2022/01/www.vendure.io_-1024x512.png" alt="" class="wp-image-9400" srcset="/uploads-archive/lc/2022/01/www.vendure.io_-1024x512.png 1024w, /uploads-archive/lc/2022/01/www.vendure.io_-300x150.png 300w, /uploads-archive/lc/2022/01/www.vendure.io_-768x384.png 768w, /uploads-archive/lc/2022/01/www.vendure.io_-600x300.png 600w, /uploads-archive/lc/2022/01/www.vendure.io_.png 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption><a rel="noreferrer noopener" href="https://www.vendure.io/" target="_blank">https://www.vendure.io/</a></figcaption></figure>



<p>インストールを以下のコマンド一発、5分で作れてしまうのが驚異的です。</p>





		<div id="crayon-64d1a7a2c67a1969614852" 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;">
npx @vendure/create my-shop</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-64d1a7a2c67a1969614852-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-64d1a7a2c67a1969614852-1"><span class="crayon-i">npx</span><span class="crayon-h"> </span><span class="crayon-sy">@</span><span class="crayon-i">vendure</span>/<span class="crayon-e">create </span><span class="crayon-i">my</span>-<span class="crayon-i">shop</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>





<p>GraphQLで通信を行います。</p>



<p>商品管理、注文管理、多言語・多通貨・複数の税率設定などのグローバル対応、画像のCloudストレージ、様々な決済プロバイダーやフルフィルメントへの接続方法の提供などに対応しています。</p>



<p>インストール自体は簡単ですが、実際に決済や配送などできる状態にするには、利用する開発者がそれなりに構築作業をする必要があり、誰でも簡単に始められるという感じではなさそうですが、<br>0からECを構築するよりは便利で、拡張性もあるため、自由にECを作りたい、でもすべて開発は…という層に人気が出るかもしれません。</p>



<p></p>



<h2><a href="https://www.medusajs.com/" target="_blank" rel="noreferrer noopener">Medusa</a></h2>



<figure class="wp-block-image size-large"><a href="https://www.medusajs.com/" target="_blank" rel="noopener"><img loading="lazy" width="1024" height="592" src="/uploads-archive/lc/2022/01/www.medusajs.com_-1024x592.png" alt="" class="wp-image-9402" srcset="/uploads-archive/lc/2022/01/www.medusajs.com_-1024x592.png 1024w, /uploads-archive/lc/2022/01/www.medusajs.com_-300x173.png 300w, /uploads-archive/lc/2022/01/www.medusajs.com_-768x444.png 768w, /uploads-archive/lc/2022/01/www.medusajs.com_-600x347.png 600w, /uploads-archive/lc/2022/01/www.medusajs.com_.png 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><figcaption><a href="https://www.medusajs.com/" target="_blank" rel="noreferrer noopener">https://www.medusajs.com/</a></figcaption></figure>



<p>REST APIで通信を行います。</p>



<p>商品管理、顧客管理、決済プロバイダーやフルフィルメントへの接続方法の提供などに対応しています。<br>vendure と異なり、フロントエンドのためのスターターの提供や、プラグインでstripe、paypalなどの支払い方法を追加できるので、<br>導入のハードルはこちらの方が低くなりそうです。</p>



<p></p>



<h2>調べてみた感想</h2>



<p>いずれもインストールは簡単ですが、実際に動くECを作るためにはかなり専門的な開発の知識が必須と言えそうです。<br>専門知識がなくても越境ECを始めたい方には、様々な機能がはじめから内包されているLaunchCartをおすすめしたいと思います。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2022/06/02

2022/05/20

2022/05/20

2022/05/20

2022/05/13

2022/04/23

2022/04/16

2022/04/15

2022/04/02

2022/04/01

2022/03/25

2022/03/08

2022/03/05

2022/02/24

2022/02/16

2022/02/11

2022/01/28

2022/01/22