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


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

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

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

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

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

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

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

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

記事のサムネスクリーンショット-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」とは？

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

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

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

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

スクリーンショット-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改善の重要性、流れ＆ポイント！

medium_og-image-768x330.png

small_og-image-768x330.png

thumbnail_og-image-768x330.png

og-image-768x330.png

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

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

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

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

スクリーンショット-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>

Node.jsがベースのオープンソースのヘッドレスEコマースについて調べてみました

<p>皆さんにとってのトレンドカラーなどはありますか？</p>
<p>実は毎年PANTONE社というところが「パントン･カラー･オブ･ザ･イヤー」というものを12月頃発表しており、来年のトレンドカラーが選ばれます。</p>
<p>また、PANTONE社以外でもJAFCAという団体からトレンドカラーを発表していましたので両方とも紹介しようと思います。</p>
<h3>PANTONE社とは</h3>
<p>アメリカに本社がある色見本の企業で、アパレルをはじめ、美容、インテリア、工業デザイン等、あらゆる業界をサポートしており、PANTONEの色見本帳は、製品の色を決定する際のヒントとして、あらゆる業界で使われています。</p>
<h3>JAFCAとは</h3>
<p>カラーデザインの向上と、豊かな色彩生活を目指してアパレルファッション、プロダクツ&amp;インテリア、化粧品、学校等多業種の会員により構成されたカラーデザインに関する様々な活動をしている団体です。</p>
<h2>PANTONE社2022年トレンドカラー</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-9277" src="/uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128.png" alt="" width="992" height="495" srcset="/uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128.png 992w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-300x150.png 300w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-768x383.png 768w, /uploads-archive/lc/2022/01/0bfedfd66f2098deae28351c6b303128-600x299.png 600w" sizes="(max-width: 992px) 100vw, 992px" /></p>
<p><span style="color: #6667ab; font-weight: bold;">ベリー・ペリ（Very Peri）</span></p>
<p style="padding-left: 40px; font-weight: bold;">カラーコード：#6667AB<br />
RGB値：102,103,171<br />
HSV値：239,40,67<br />
CMYK：40,39,0,32</p>
<p>今回の為に発表された新色であり、「その勇気ある存在は、個人の発明や創造性を促す」という意味を込めた色となっております。<br />
ブルーの持つ誠実さと不変性、レッドの持つエネルギーと興奮を融合させた、この最も幸せで暖かいブルーの色合いは、元気を与える新しさの素を注入します。</p>
<p>ラベンダーのような配色はすぐに目に飛び込んでくる優しい暖かみを醸し出しており、幻想的なデジタルの世界であったり、物理的な素材の中であれ、グラフィックやマルチメディア・デザイン、パッケージングなどの多くの用途に理想的な色合いとなっております。<br />
またこれらの媒体以外にもアパレル・美容・インテリアデザインにも今後多く取り入れられていくかと思われます。</p>
<p><a href="https://www.pantone-store.jp/coy2022/palette.html">公式ホームページ</a>ではベリー・ペリを使ったカラーパレットを紹介しており、デザインをする上で参考になるかと思われます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9280" src="/uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1.png" alt="" width="811" height="631" srcset="/uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1.png 811w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-300x233.png 300w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-768x598.png 768w, /uploads-archive/lc/2022/01/4464189190254b47a0b17df789878ab1-600x467.png 600w" sizes="(max-width: 811px) 100vw, 811px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-9281" src="/uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396.png" alt="" width="809" height="693" srcset="/uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396.png 809w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-300x257.png 300w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-768x658.png 768w, /uploads-archive/lc/2022/01/62d0a2934728b0a8dbe823c3ea143396-600x514.png 600w" sizes="(max-width: 809px) 100vw, 809px" /></p>
<h2>JAFCA2022年トレンドカラー</h2>
<p><img loading="lazy" class="aligncenter size-full wp-image-9278" src="/uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4.jpeg" alt="" width="500" height="601" srcset="/uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4.jpeg 500w, /uploads-archive/lc/2022/01/38026-1-20211209073910_b61b1b29e7e0c4-250x300.jpeg 250w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p><span style="color: #f18d5f; font-weight: bold;">ジョリー・コーラル（Jolly Coral）</span></p>
<p style="padding-left: 40px; font-weight: bold;">カラーコード：#F18D5F<br />
RGB値：241,141,95<br />
HSV値：19,61,95<br />
CMYK：0,41,60,5</p>
<p>公式サイトによると、ジョリー・コーラルを 「2020年、2021年と暗く長いトンネルを歩いてきた私たちを導き、心身をいたわってくれるかのよう」と表現しています。<br />
見た通り、オレンジをベースとした明るく優しめなカラーとなっております。<br />
2020,2021年で暗い気持ちだったのを2022年では晴れやかに、そして前を向いていく表現が込められており今まで以上に未来へ期待というものがこもった鮮やかな色が選ばれました。</p>
<p>以上、2022年のトレンドカラーの発表でした。<br />
２社とも赤色の要素が入っており、やはり今年のイメージは前向きな気持ちやエネルギーを感じる年ということがわかりました。</p>
<p>今年は目にする機会も増えるかもしれませんね。</p>
<p>&nbsp;</p>
<h4>参考サイト</h4>
<p><a href="https://goworkship.com/magazine/2022-trendcolor/">https://goworkship.com/magazine/2022-trendcolor/</a></p>
<p><a href="https://coliss.com/articles/build-websites/operation/design/color-of-the-year-2022-lavender-very-peri.html">https://coliss.com/articles/build-websites/operation/design/color-of-the-year-2022-lavender-very-peri.html</a></p>
<h4>公式サイト</h4>
<p>Pantone：<a href="https://www.pantone.com/uk/en/color-of-the-year-2022">https://www.pantone.com/uk/en/color-of-the-year-2022</a></p>
<p>JAFCA：<a href="https://www.jafca.org/colorcolumn/20211210.html">https://www.jafca.org/colorcolumn/20211210.html</a></p>


2022年のトレンドカラーはこれだ！！

<h1>クラウドとは</h1>
<p>クラウドコンピューティングとは一般的にインターネット経由で提供されるコンピュータ資源を利用することと定義されていて、要するにユーザーがインフラやソフトウェアを持っていなくても、インターネットを通じて、サービスを必要な時に必要な分だけ利用できる概念です。</p>
<p>クラウドは<strong>SaaS</strong> 、<strong>PaaS</strong>、<strong>IaaS</strong>の3種類に分類されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17416" src="/uploads-archive/2021/12/cloud-300x300.png" alt="" width="300" height="300" srcset="/uploads-archive/2021/12/cloud-300x300.png 300w, /uploads-archive/2021/12/cloud-150x150.png 150w, /uploads-archive/2021/12/cloud-768x765.png 768w, /uploads-archive/2021/12/cloud-228x227.png 228w, /uploads-archive/2021/12/cloud-120x120.png 120w, /uploads-archive/2021/12/cloud.png 812w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h2>SaaS[サース]（Software as a Service）</h2>
<p>SaaSとはSoftware as a Serviceの略で、日本語では「<strong>サービスとしてのソフトウェア</strong>」と訳されます。ソフトウェアをユーザーがインターネット経由で使えるサービスのことです。</p>
<p>主な例ではGoogleのGmailなどです。</p>
<p>パソコンにソフトウェアをインストールしていなくても、クラウドサービスのアカウントさえ持っていれば、Google Chromeなどのブラウザを通してメールを利用することができます。</p>
<h2>PaaS[パース]（Platform as a Service）</h2>
<p>PaaSは<strong>アプリケーション開発実行環境</strong>を提供するクラウドサービスのことです。</p>
<p>例としてはMicrosoft Azureなどがあげられます。</p>
<p>PaaSがクラウドを通じて提供するのはサーバーやOSなど、システムを構築するためのプラットフォームです。</p>
<p>そのプラットフォームを使って、利用者は自分たちが必要なソフトウェアの開発などを行います。</p>
<p>開発するための場所（プラットフォーム）だけ借りて、後の開発はユーザー自身が行うため、SaaSよりも自由度の高いシステムを構築することが可能です。</p>
<h2>IaaS[イアース]（Infrastructure as a Service）</h2>
<p><strong>サーバ（インフラ）</strong>を提供するクラウドサービスのことです。</p>
<p>物理的なハードウェアを持っていなくてもインターネット上でインフラとなる仮想のネットワーク機器やサーバを提供してくれるサービスです。</p>
<p>例としてはAWSなどがあげられます。</p>
<h3>書籍　インフラエンジニアの教科書</h3>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17417" src="/uploads-archive/2021/12/infra-231x300.png" alt="" width="231" height="300" srcset="/uploads-archive/2021/12/infra-231x300.png 231w, /uploads-archive/2021/12/infra-228x296.png 228w, /uploads-archive/2021/12/infra.png 500w" sizes="(max-width: 231px) 100vw, 231px" /></p>
<p><a href="https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E4%BD%90%E9%87%8E-%E8%A3%95/dp/4863541333/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=3KX833QMJU9HO&amp;keywords=%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8&amp;qid=1639460735&amp;sprefix=%E3%81%84%E3%82%93%E3%81%B5%E3%82%89%2Caps%2C295&amp;sr=8-1">インフラエンジニアの教科書</a></p>
<p>インフラに関する知識について幅広く網羅されて紹介されていて、今回はその中のクラウドについてピックアップしました。</p>
<p>こちらの書籍ではクラウドの3つの中のIaaSについて紹介されています。</p>
<h2>IaaS[イアース]について</h2>
<h3>IaaSの特徴</h3>
<p>・自社で物理サーバを持たずに使えるため物理サーバーを管理するエンジニアが不要</p>
<p>・利用申請後、短期間でOSがインストールされた状態ですぐ使える</p>
<p>・自社で物理サーバを持たないため、物理制約を意識せず利用したい分だけサーバ増強が可能</p>
<p>・安価、かつ使った分だけ費用が発生する従量課金に対応している</p>
<p>・インフラの運用はクラウド事業者に任せられる</p>
<h4>IaaSのデメリット</h4>
<p>・開発自由度の高さを活かせるだけの専門知識が必要になる</p>
<p>・他社のサーバに機密情報を置かれることやデータの送受信の際にインターネット経由でデータが流れることから情報流出のリスクがあり、またセキュリティ面の責任範囲に注意が必要</p>
<h2><span id="IaaSVPS">IaaS（クラウド）とVPS（仮想サーバ）の違い</span></h2>
<h4>VPSとは</h4>
<p>VPSとは、「Virtual Private Server」の略で、物理的に存在するサーバーにインストールされているホストOSの上に、ユーザーそれぞれに仮想サーバーが割り当てられていて、ユーザーはその仮想サーバーを自分だけのサーバーとして使用できます。<br />
ユーザーは仮想サーバーのオーナーなので、管理者権限を持つことができ、自分好みのアプリケーションをインストールできるのはもちろんのこと、インストールするOSも選ぶことができます。</p>
<h4><span id="IaaS-5">IaaSのほうが柔軟性がある</span></h4>
<p>IaaSは従量課金制であり、使用するリソースによって利用料金が変更される仕組みとなっており、リソースの変更が容易です。<br />
一方で、<strong class="red">VPSは月極制となっているため、契約内の範囲でリソースをいくら使おうが料金は変わりませんが、リソースの変更の際には契約自体を変更しなければならないため、IaaSより柔軟性は低いと言えます。</strong></p>
<h3>本を読んで</h3>
<p>クラウドシステムにはSaaS、PaaS 、IaaSがあり、それぞれにメリット、デメリットや特徴があるように、インフラの知識は本当に幅広く、しっかり技術として身につけば、状況によってサーバやクラウドなどのどの技術を使うのが一番最適なのかの選定が可能になるんだなと思いました。</p>
<p>かなり奥が深いので業務にいかせるまでにはまだまだ勉強が必要ですが、しっかりと状況を見極めて、最適な技術選定ができるようにしたいです。</p>
<h3></h3>
<p>&nbsp;</p>


medium_cloud-768x765.png

small_cloud-768x765.png

thumbnail_cloud-768x765.png

cloud-768x765.png

クラウドについて

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


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

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

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


thumbnail_41F3M3hosRL._SX260_-2.jpg

41F3M3hosRL._SX260_-2.jpg

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

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


large_61KPtQRcdKL.jpg

medium_61KPtQRcdKL.jpg

small_61KPtQRcdKL.jpg

thumbnail_61KPtQRcdKL.jpg

61KPtQRcdKL.jpg

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

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

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

2022/01/08

2021/12/17

2021/12/11

2021/12/10

2021/12/03

2021/11/27

2021/11/26