LaunchCartでページごとのCSSやJSの読み込みの振り分けを設定する方法

vimでdebug

<h2>新世代無線LAN規格「Wi-Fi 6」について</h2>
<h3>Wi-Fi 6とはなにか</h3>
<p>WI-Fi 6は、Wi-Fiの新たな規格として、現在標準化作業が進められている次世代の標準Wi-Fi規格である。まだ対応したデバイスがほとんど出ていないため、現時点では使用できないが、１年後には確実に話題になるであろう規格である。</p>
<p>&nbsp;</p>
<h3>過去のWi-Fi規格との比較</h3>
<table style="width: 564px;height: 145px">
<tbody>
<tr style="height: 24px">
<td style="width: 116px;height: 24px;text-align: center">Wi-Fi規格</td>
<td style="width: 177px;height: 24px;text-align: center">IEEE規格の正式名称</td>
<td style="width: 249px;height: 24px;text-align: center" colspan="2">開始時期</td>
</tr>
<tr style="height: 24px">
<td style="width: 116px;height: 24px;text-align: center">Wi-Fi 4</td>
<td style="width: 177px;height: 24px;text-align: center">IEEE 802.11n</td>
<td style="width: 249px;height: 24px;text-align: center" colspan="2">2009</td>
</tr>
<tr style="height: 24px">
<td style="width: 116px;height: 24px;text-align: center">Wi-Fi 5</td>
<td style="width: 177px;height: 24px;text-align: center">IEEE 802.11ac</td>
<td style="width: 249px;height: 24px;text-align: center" colspan="2">2014</td>
</tr>
<tr style="height: 24px">
<td style="width: 116px;height: 24px;text-align: center">Wi-Fi 6</td>
<td style="width: 177px;height: 24px;text-align: center">IEEE 802.11ax</td>
<td style="width: 249px;height: 24px;text-align: center" colspan="2">2019(だといいな)</td>
</tr>
</tbody>
</table>
<h5>＊IEEEとは、アメリカの電気電子の学会。米国電気電子学会、または米国電気電子技術者学会と表記される。</h5>
<p>&nbsp;</p>
<h3>理論上での最大通信速度</h3>
<p><strong>　Wi-Fi4   300Mbps</strong></p>
<p><strong>　　&#x2b07;︎　23倍</strong></p>
<p><strong>　Wi-Fi5   6.9Gbps</strong></p>
<p><strong>　　&#x2b07;︎　1.4倍</strong></p>
<p><strong>　Wi-Fi6   9.6Gbps</strong></p>
<p>&nbsp;</p>
<h3>実行スループットの一般的な上限値</h3>
<p><strong>　Wi-Fi4   150Mbps</strong></p>
<p><strong>　　&#x2b07;︎　5.3倍</strong></p>
<p><strong>　Wi-Fi5   800Mbps</strong></p>
<p><strong>　　&#x2b07;︎　最低でも1.25倍</strong></p>
<p><strong>　Wi-Fi6   1Gbps ~</strong></p>
<h4></h4>
<p>これまでの規格に比べても、格段に早いことがわかる。また、速度以外でも</p>
<ul>
<li><strong>容量の向上</strong></li>
<li><strong>省エネ性の工場</strong></li>
<li><strong>マルチユーザーでの使用の安定性向上</strong></li>
</ul>
<p>が見込まれている。</p>
<p>&nbsp;</p>
<h2>周波数帯について</h2>
<p>Wi-Fiの周波数は、主に2.4GHzと5GHzの二種類がある。</p>
<h3>2.4GHzの特徴</h3>
<p><strong>　[メリット]</strong></p>
<ul>
<li><strong>障害物に強い</strong></li>
<li><strong>安価</strong></li>
</ul>
<p><strong>　[デメリット]</strong></p>
<ul>
<li><strong>電波同士が干渉しやすい</strong></li>
</ul>
<h3>5GHzの特徴</h3>
<p><strong>　[メリット]</strong></p>
<ul>
<li><strong>2.4GHzに比べて通信速度が速い</strong></li>
<li><strong>電波の干渉を受けにくい</strong></li>
</ul>
<p><strong>　[デメリット]</strong></p>
<ul>
<li><strong>障害物に弱い</strong></li>
</ul>
<p>&nbsp;</p>
<h2>さいごに</h2>
<p>大量のデータをインターネットで扱うことが多くなってきた中で、安定して速い通信電波がこれから使えることに期待している。</p>


新世代無線LAN規格「Wi-Fi 6」

<p>小数の計算は実は簡単とは言えません。<br />
これはコンピューターの計算が10進数ではなくて、2進数のわけです。</p>
<h2>10進数→2進数</h2>
<p>例 0.1 を2進数にすると</p>
<p>(1) 0.1 x 2 = 0.2  整数は 0 → 0.0<br />
(2) 0.2 x 2 = 0.4  整数は 0 → 0.00<br />
(3) 0.4 x 2 = 0.8  整数は 0 → 0.000<br />
(4) 0.8 x 2 = 1.6  整数は 1 → 0.0001<br />
(5) 0.6 x 2 = 0.2  整数は 1 → 0.00011<br />
(6) 0.2 x 2 = 0.4  整数は 0 → 0.000110<br />
(7) 0.4 x 2 = 0.8  整数は 0 → 0.0001100<br />
(8) 0.8 x 2 = 1.6  整数は 1 → 0.00011001<br />
(9) 0.6 x 2 = 1.2  整数は 1 → 0.000110011</p>
<p>結果は0.000110011…と無限循環小数になる</p>
<h2>計算誤差が起きる</h2>
<p></p>

		<div id="crayon-64954026514e5553989388" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var tmp = 0.2 + 0.4;
console.log("0.2 + 0.4 = " + tmp);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026514e5553989388-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954026514e5553989388-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026514e5553989388-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">tmp</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0.2</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-cn">0.4</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954026514e5553989388-2"><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"0.2 + 0.4 = "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">tmp</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>0.2 + 0.4 = 0.6000000000000001</p>
<h2>どうすればいいか</h2>
<p>使う言語によって、ライブラリがあるはずです。</p>
<p>金額周りに関する精度が大事なので、<br />
できれば、整数で計算にましょう。</p>
<p>ちなみに、自分の対応方法は下記です。<br />
(1) 小数点桁数を決める。この小数と10の桁数乗をかける<br />
(2) 一度小数になったら、精度が失うので、小数点以下は捨てて、整数とする<br />
(3) 計算<br />
(4) 結果は10の桁数乗を割る（この時も精度が失うが）</p>

プログラミングで小数の計算がちょっとおかしいところ

Sphinxでドキュメント生成してカスタマイズするまで

【jQuery】LaunchCartでAjaxによるカートイン

<p>先週ミャンマーに行きました。<br />
行かなかった国なので、ビザ、服装、レート、インターネットなど、行く前に事前調査をしっかりしました。<br />
今回は旅行中に役に立ったアプリを紹介したいと思います。</p>
<h2>GRAB</h2>
<p><div id="attachment_14976" style="width: 190px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-14976" decoding="async" loading="lazy" src="/uploads-archive/2019/03/image.jpg" alt="grab" width="180" height="180" class="size-full wp-image-14976" srcset="/uploads-archive/2019/03/image.jpg 180w, /uploads-archive/2019/03/image-150x150.jpg 150w" sizes="(max-width: 180px) 100vw, 180px" /><p id="caption-attachment-14976" class="wp-caption-text">grab</p></div><br />
一番よかったのはGRABです。<br />
運転手さんと話しなくても目的地に行けますし、クレジットカードも使えます。<br />
先にホテルの住所を保存すれば、とても便利です。</p>
<p>登録する際にSMSの認証が必要なので、<br />
念のため国内のうちに登録しましょう！</p>
<p><a href="https://www.grab.com/" target="_blank">サイト</a><br />
<a href="https://play.google.com/store/apps/details?id=com.grabtaxi.passenger" target="_blank">google play</a><br />
<a href="https://itunes.apple.com/SG/app/id647268330?mt=8" target="_blank">itunes</a></p>
<h2>VoiceTra</h2>
<p><div id="attachment_14975" style="width: 190px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-14975" decoding="async" loading="lazy" src="/uploads-archive/2019/03/voicetra.png" alt="voicetra" width="180" height="180" class="size-full wp-image-14975" srcset="/uploads-archive/2019/03/voicetra.png 180w, /uploads-archive/2019/03/voicetra-150x150.png 150w" sizes="(max-width: 180px) 100vw, 180px" /><p id="caption-attachment-14975" class="wp-caption-text">voicetra</p></div><br />
<img decoding="async" loading="lazy" src="/uploads-archive/2019/03/Screenshot_20190312-161921-576x1024.png" alt="" width="576" height="1024" class="alignnone size-large wp-image-14981" srcset="/uploads-archive/2019/03/Screenshot_20190312-161921-576x1024.png 576w, /uploads-archive/2019/03/Screenshot_20190312-161921-169x300.png 169w, /uploads-archive/2019/03/Screenshot_20190312-161921-768x1365.png 768w, /uploads-archive/2019/03/Screenshot_20190312-161921-228x405.png 228w, /uploads-archive/2019/03/Screenshot_20190312-161921.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>相手か自分の話すことを翻訳してくれます。<br />
翻訳結果をもう一度自分の言語に翻訳して、逆翻訳結果が表示されますので、<br />
正しく伝わっているか確認できます。<br />
ただしネットが必須なので、ネットが繋ぎにくい場所が使えないのは唯一不便なところです。</p>
<p><a href="http://voicetra.nict.go.jp/" target="_blank">サイト</a><br />
<a href="https://play.google.com/store/apps/details?id=jp.go.nict.voicetra
" target="_blank">google play</a><br />
<a href="https://itunes.apple.com/jp/app/id581137577?mt=8" target="_blank">itunes</a></p>
<h2>わかりやすいミャンマー語レッスン</h2>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2019/03/lang.png" alt="" width="180" height="180" class="alignnone size-full wp-image-14974" srcset="/uploads-archive/2019/03/lang.png 180w, /uploads-archive/2019/03/lang-150x150.png 150w" sizes="(max-width: 180px) 100vw, 180px" /><br />
<img decoding="async" loading="lazy" src="/uploads-archive/2019/03/Screenshot_20190312-164839-576x1024.png" alt="" width="576" height="1024" class="alignnone size-large wp-image-14985" srcset="/uploads-archive/2019/03/Screenshot_20190312-164839-576x1024.png 576w, /uploads-archive/2019/03/Screenshot_20190312-164839-169x300.png 169w, /uploads-archive/2019/03/Screenshot_20190312-164839-768x1365.png 768w, /uploads-archive/2019/03/Screenshot_20190312-164839-228x405.png 228w, /uploads-archive/2019/03/Screenshot_20190312-164839.png 1080w" sizes="(max-width: 576px) 100vw, 576px" /></p>
<p>数字などすぐに使えるようなミャンマー語を覚えましょう！<br />
オフラインでも使えますので、VoiceTraが使えない時に助かります。</p>
<p><a href="http://simplylearnlanguages.com/burmese/index.html" target="_blank">サイト</a><br />
<a href="https://play.google.com/store/apps/details?id=simply.learn.burmese
" target="_blank">google play</a><br />
<a href="https://itunes.apple.com/us/app/learn-burmese-101-phrasebook/id1119979097?l=de&#038;ls=1&#038;mt=8" target="_blank">itunes</a></p>
<h2>おまけで</h2>
<p>観光地だったら、英語も通じますが、<br />
その以外のほうが大体ミャンマー語しか使えないです。（たまに中国語も通じます）<br />
先にダウンロードすれば、きっと役に立つと思います。</p>


ミャンマーに役に立つアプリ

Nuxt.jsをコーディングツールとして使えるか試してみる

CSSでユーザーのトラッキング

デバッガの導入

JavaScriptでIoTの組み込みプログラミングが学習できるobnizを試してみました

データの可視化ツール Echarts

ネイティブアプリ並みのパフォーマンス！WebAssemblyでフロントエンド開発が変わる

シェルスクリプトで案件クローズの自動化

Vue CLIとVue RouterでVueのSPAをはじめる

認証などが必要なサイトの情報を使っての通知処理

<h2>スマホのクリックイベント順</h2>
<p>1.touchstart<br />
2.touchmove<br />
3.touchend<br />
4.mouseover (focusを当てた)<br />
5.mousemove (一回のみ)<br />
6.mousedown<br />
7.mouseup<br />
8.click</p>
<p>mousemoveイベントは一回のみ発生しますので、<br />
マウスの移動で出るアニメーションはスマホには出ません。</p>
<p>または、ダブルタップによるズームイン/ズームアウトを検知するため、300ms~350msの遅延が発生します。</p>
<h2>解決方法</h2>
<h3>1.<a href="https://github.com/ftlabs/fastclick ">FastClick.js</a>などlibraryを使う</h3>
<h3>2.以下をページに入れる</h3>
<p></p>

		<div id="crayon-649540264fabb372473436" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name="viewport" content="width=device-width"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264fabb372473436-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264fabb372473436-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>そうなるとダブルタップによるズームイン/ズームアウトが無効になります。<br />
<a href="https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay ">サポートされているブラウザ</a></p>
<h3>3.preventDefault()</h3>
<p>タッチイベントを優先し、preventDefault()を呼び出し、<br />
マウスイベントを発生させないようにしています。</p>
<p>参考サイト</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events/Supporting_both_TouchEvent_and_MouseEvent ">TouchEvent と MouseEvent の両方をサポートする</a><br />
<a href="https://www.html5rocks.com/en/mobile/touchandmouse/ ">Touch And Mouse</a><br />
<a href="https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away ">300ms tap delay, gone away</a></p>

タッチイベント &#038; マウスイベント

<p>最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、<br />
これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、<br />
若干戸惑ってしまいました。</p>
<p>しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。<br />
そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。</p>
<p>そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。<br />
アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、<br />
原子（Atoms; 部品の最小単位）<br />
→ 分子（Molecules; 2個以上の最小単位の組み合わせ）<br />
→ 有機体（Organisms; 機能を成す分子の集まり）<br />
→ テンプレート（Templates; ページのレイアウト）<br />
→ ページ(Pages; 実際の内容をテンプレートに組み込んだもの)<br />
という様に、細部からより大きな単位へとデザインしていく方法です（参考: <a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a>）。</p>
<p>アトミックデザインの方法を使うことで、効率の高い自由度の高いデザインが可能となります。<br />
アトミックデザインでは独立した機能を持ったパーツを単位としてデザインするため、レイアウトの変更や変化によって機能が失われることがありません。そのため、必要に応じて自由にレイアウトすることが可能です。<br />
デバイスごとにレイアウト変更が必要なレスポンシブデザインには最適です。</p>
<p>さて、WEBページのデザインをするためのアプリとして、最近私はAdobeのXDをよく使います。<br />
日々アップデートされ、段々と使いやすくなっているのを感じます。</p>
<p>ただ、XDを使ってアトミックデザインをやってみようとしたときに、問題にぶつかりました。<br />
XDで部品を組み合わせる場合、シンボルという機能を使って実現することになります。<br />
このシンボルは、再利用する部品をプロジェクトのアセットとしてストックしていく仕組みです。<br />
XDではシンボルをシンボルで構成するような入れ子の構造も可能なので、アトミックデザインも可能かと思われたのですが、シンボルではテキストとビットマップ形式の画像以外はパーツの差し替えができないため、アトミックデザインの利点を活かしきることができません。</p>
<p>2019.06.11追記）<a href="https://launchcart.jp/blog/adobe-xd%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%82%A2%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank" rel="noopener">XDにコンポーネントが導入されました！</a></p>
<div class="lcLink js-loadLcLink" data-lclink="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/"><a href="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" target="_blank">記事へのリンク</a></div>
<p>&nbsp;</p>
<div id="attachment_14396" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif"><img aria-describedby="caption-attachment-14396" decoding="async" loading="lazy" class="size-full wp-image-14396" src="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif" alt="" width="640" height="448" /></a><p id="caption-attachment-14396" class="wp-caption-text">XDではアイテムごとにアイコンを変更したい場合、シンボルから解除した上で、アイコンを差し替える必要があるので、レイアウトを変更するときに別々の変更が必要になる</p></div>
<p>一方、XDと同じくUI/UXデザインツールとして人気のSketchでは、パースそれぞれの中で、パーツを差し替えることも可能なので、アトミックデザインに最適だと言われています。<br />
しかし、Sketchは年間$99の支払いが必要で、Windows環境に対応しておらず、プロトタイプの共有はまた別途in visionの契約が必要になるため、導入のハードルが少し高いと感じていました。</p>
<p>そこで別のアプリを探してみたところ、<a href="https://www.figma.com" target="_blank" rel="noopener">Figma</a>というUI/UXデザインツールがとても優れているという<a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">記事</a>を見つけました。</p>
<p>Figmaはブラウザで動作するため、Mac、Windowsを問いません。<br />
実際使ってみると、ブラウザで動作するアプリにもかかわらず、ネイティブアプリを操作しているかのような快適な操作感で、とても使いやす印象でした。</p>
<p>更に、Sketchと同じように、XDのシンボルに当たるパーツの管理機能は、マスターコンポーネント→インスタンスという形式をとっているので、同じパーツであっても、それぞれで違うパーツへ差し替えることが可能で、アトミックデザインを行う上で優れていることがわかりました。</p>
<div id="attachment_14411" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif"><img aria-describedby="caption-attachment-14411" decoding="async" loading="lazy" class="size-full wp-image-14411" src="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif" alt="" width="640" height="405" /></a><p id="caption-attachment-14411" class="wp-caption-text">Figmaでは同じパーツ（コンポーネント）の中のパーツをそれぞれ差し替え可能</p></div>
<p>3プロジェクトまで無料で利用できますので、まずはFigmaでアトミックデザインを覚え、なれてきたらSketchというのも方法としてはありかもしれません。</p>
<p>また、Figmaは30日間分のバージョン管理も可能。<br />
Sketchと違い、単独でプロトタイプの共有が可能なのも魅力です。<br />
また、無料版では2人まで、月$12の有料版では人数無制限の同時編集も可能で、<br />
チームでデザインを行う場合には、Sketchよりも優れたツールだと感じました。</p>
<p>&nbsp;</p>
<h3>参考にさせていただいたサイト</h3>
<p><a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a></p>
<p><a href="https://goworkship.com/magazine/atomic_design/" target="_blank" rel="noopener">アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法 | Workship MAGAZINE(ワークシップマガジン)</a></p>
<p><a href="https://www.webcreatorbox.com/inspiration/component-design" target="_blank" rel="noopener">これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス</a></p>
<p><a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">一人で「UIデザインツールどれがいいのか論争」をしてみる｜ノムラギミック｜note</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2019/05/14

2019/05/07

2019/04/10

2019/04/10

2019/04/10

2019/04/09

2019/03/13

2019/03/12

2019/02/20

2019/02/20

2019/02/19

2019/01/09

2019/01/09

2019/01/09

2018/12/12

2018/12/12

2018/11/14

2018/11/14