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


large_youken-768x1111.jpg

medium_youken-768x1111.jpg

small_youken-768x1111.jpg

thumbnail_youken-768x1111.jpg

youken-768x1111.jpg

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

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

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


コンポーネントとAtomic Design

thumbnail_51MgH8Jmr3L-3.jpg

51MgH8Jmr3L-3.jpg

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

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

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

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

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

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

medium_Octocat-768x638.png

small_Octocat-768x638.png

thumbnail_Octocat-768x638.png

Octocat-768x638.png

GitHub Actions を使って静的コード解析を行うのがとても便利

cssのみで実装できる！モーフィングアニメーション

<h1>TCP/IPとは</h1>
<p>TCP／IPとは通信プロトコルの総称です。インターネットは別々に発達してきた様々な通信技術を組み合わせたものです。そのような組み合わせを実現するための応用力を持つ技術がTCP／IPです。</p>
<h3>プロトコルって何？なぜ必要？</h3>
<p>プロトコルとはコンピューターとコンピューターがネットワークを利用して通信するために決められた<strong>「約束ごと」</strong>になります。</p>
<p>メーカーやCPUやOSが違うコンピューター同士でも同じプロトコルを使えば互いに通信することができます。逆にいうとプロトコルを使用しなければ通信することはできません。</p>
<p>プロトコルにはいくつもの種類があり、それぞれ仕様が明確に決められていて、コンピューター同士が互いに通信するためには、両者が同じプロトコルを理解し、処理できなければなりません。</p>
<p>人間なら知能、応用力、理解力を持っているので、ある程度ルールから外れても意思疎通を図ることができますが、</p>
<p>コンピューターによる通信の場合は、コネクタの形状のような物理的なレベルからアプリケーションの種類のようなソフトウェアのレベルまで、様々な部分で明確な「<strong>約束ごと」</strong>を決めてそれを守るようにしなければ正しく通信することができません。</p>
<h2>マスタリングTCP/IP入門編</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17193" src="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png" alt="" width="209" height="300" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png 209w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-228x328.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1.png 445w" sizes="(max-width: 209px) 100vw, 209px" /></p>
<p><a title="amazonマスタリングTCP/IP入門編" href="https://www.amazon.co.jp/%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0TCP-IP%E2%80%95%E5%85%A5%E9%96%80%E7%B7%A8%E2%80%95-%E7%AC%AC6%E7%89%88-%E4%BA%95%E4%B8%8A-%E7%9B%B4%E4%B9%9F/dp/4274224473/ref=asc_df_4274224473/?tag=jpgo-22&amp;linkCode=df0&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvpone=&amp;hvptwo=&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623&amp;psc=1&amp;th=1&amp;psc=1&amp;tag=&amp;ref=&amp;adgrpid=72867581430&amp;hvpone=&amp;hvptwo=&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623" target="_blank" rel="noopener">マスタリングTCP/IP入門編(書籍)</a></p>
<p>TCP/IPについてコンピューターとネットワーク登場の背景から、コンピューターとネットワークの発展の歴史とそれにまつわるTCP／IPについてOSI参照モデルの機能分類にTCP／IPの機能を当てはめる形で一つ一つ詳しく解説されています。</p>
<p>通信に必要な機能について多くの通信のプロトコルはOSI参照モデルの7層のどれかに当てはめて考えることができます。</p>
<p>詳細を知るには、個々のプロトコルの仕様書をその都度読む必要がありますが、おおよその役割はこの階層モデルのどの層に当たるかで見当をつけることができます。</p>
<h3>なぜこの本に興味をもったのか</h3>
<p>業務での通信エラーなどでプロトコルについて幅広く知識をつけておくことで原因を特定しやすくなるのではないかと思ったことと、ネットワークについて歴史的な発展とともに発達してきた技術について背景を知った方が今後の技術習得がスムーズになると思ったので読みました。</p>
<h2>OSI参照モデル7層の各層の役割</h2>
<h6>7.アプリケーション層</h6>
<p>アプリケーションの中で通信に関係する部分を定めていて、ファイル転送や電子メール、遠隔ログイン(仮想端末)などを実現するためのプロトコルがある。</p>
<h6>6.プレゼンテーション層</h6>
<p>機器固有のデータ表現形式（データーフォーマット）などをネットワーク共通のデータ形式に変換する役割がある。</p>
<h6>5.セッション層</h6>
<p>コネクション（データの流れる論理的な通信路）の確立や切断、転送するデータの切れ目の設定などデータ転送に関する管理を行います。</p>
<h6>4.トランスポート層</h6>
<p>宛先のアプリケーションにデータを確実に届ける役目がある。通信を行う両端のノードだけで処理され途中のルーターでは処理されません。</p>
<h6>3.ネットワーク層</h6>
<p>宛先までデータを届ける役割を持ちます。宛先は複数のネットワークがルーターにつながった先にある場合もあり、そのためのアドレス体系決めやどの経路を使うかなどの経路選択の役割を持ちます。</p>
<h6>2.データリンク層</h6>
<p>直接接続された機器間でのデータフレームの識別と転送。0と1の数字の列を意味のあるかたまり（フレーム）に分けて相手に伝えます。（フレームの生成と受信）</p>
<h6>1.物理層</h6>
<p>ビットの列（0と1の数字の列）を電圧の高低や光の点滅に変換したり、逆に電圧の高低や光の点滅をビットの列に変換したりします。</p>
<h3>TCP/IPのアプリケーション層</h3>
<p>TCP／IPのプロトコルは4層に分けて説明されますが、その中のアプリケーション層をOSI参照モデルに当てはめると、第5層、第6層、第7層のすべての機能が埋め込まれます。<br />
通信コネクションの管理などのセッション層の機能や、データフォーマットの変換というプレゼンテーション層の機能、相手ホストのとのやり取りというアプリケーション層の機能はすべてアプリケーションプログラムが担っています。</p>
<h3>学んだこと</h3>
<p>OSI参照モデルでの一つ一つの紹介はここでは長くなるので割愛しますが、業務でSSLの更新などに携わることがあり、工程としてアプリケーション層での遠隔ログインと呼ばれるSSH接続をします。</p>
<p>以前には遠隔ログインシステムにはTELNETというものもあり、TELNETではログイン時でのパスワードが暗号化されずに送信されるので、通信を盗聴されると不正侵入される危険性があり、SSHという通信内容が暗号化される遠隔ログインシステムが登場し普及したなど、当時はTELNETというシステムが一般的だったのが、システムの脆弱性から新しい技術が発展し、今SSHが普及しているなど、今の技術に至るまでの歴史的な背景や仕組みなどが図になって説明されていたのですごく理解が深まりました。</p>
<h4>業務で活かせることができる点</h4>
<p>今、安心安全とされている技術であっても数年後には脆弱性が見つかり使われなくなったりするので、（SSHにはバージョン1とバージョン2が存在しバージョン1には脆弱性があり、バージョン2の利用が推奨されているなど）エンジニアとして常に新しい技術に対してキャッチアップしていきながら、今使用している技術に対して満足することなく問題がないかを確認し、問題がある場合は日々更新、改善していく意識を忘れずにもつことが大事だなと改めて感じました。</p>


small_スクリーンショット-2021-10-12-10.08.38-1-1.png

thumbnail_スクリーンショット-2021-10-12-10.08.38-1-1.png

スクリーンショット-2021-10-12-10.08.38-1-1.png

よく聞くけど知らない？TCP/IPについて

<h3><span class="md-plain md-expand">前書き</span></h3>
<p>全Qの個人OKRで、UIUX関連の本「Atomic Design」を読みました。本ではコンポーネントベースでのUI開発を提唱していて、実践の際にツールとしてstorybookを使います。そこでstorybookを知り、使ってみたり、調べてみたりして、すごい良いツールだと感じました。調べてみたらデザインシステムのこともたくさん出てましたので、一緒にブログにまとめました。コンポーネントベースでのUI開発のメリットなど、本の詳しい内容は次回に共有したいと思います〜</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">デザインシステムとは？</span></h2>
<p>デザインシステムとは、デザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのスタイルガイド、UIコンポーネントライブラリ、そしてそれらの管理・運用ルールや、<strong>コード化されたUIコンポーネントの管理ツール</strong>など、さまざまな構成要素で成り立つ「仕組み」です。</p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">※参考になるブログ記事</span></p>
<p class="md-end-block md-p md-focus"><a href="https://www.uxpin.com/studio/jp/blog-jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E4%BE%8B%E3%83%88%E3%83%83%E3%83%97%EF%BC%98/"><span class="md-plain md-expand">デザインシステム例トップ８</span></a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">なぜ管理ツールが必要なのか？</span></h4>
<p class="md-end-block md-p"><span class="md-plain">もちろん、適しているものに対しての話ですが、システム開発に置いて必須要素ではないですがものすごい生産性を高めることができると思います。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">まず、コンポーネントベースのUI開発の最大目的は複雑なUIを確実に組み上げることです。でも、いくら再利用可能なコンポーネントが作成しても文書化管理されていないと意味がないと思います。なので、デザインと開発の生産性をアップするための文書化管理ができるツールが必要になってきます。メリットとしては、UIコンポーネントのカタログとして視覚的に確認できることで、認識の齟齬を無くしたり、再利用可能になるなどがあります。</span></p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">Storybook とは？</span></h2>
<p>UIコンポーネントの管理・テストをすることが出来るオープンソースツールです。React、Vue、Angular、などのJavaScriptフレームワークをサポートしています。</p>
<p>※<a href="https://storybook.js.org/">Storybook公式サイト</a></p>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適しているもの</span></h4>
<ul>
<li>継続的にリリースしていくアプリ</li>
<li>同じプランドの複数のwebサイト</li>
</ul>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">適していないもの</span></h4>
<ul>
<li>デザインの統一性が重要ではないもの</li>
<li>一度作れば終わりで継続的にUIを管理する必要がないもの</li>
</ul>
<h3 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">環境インストール</span></h3>
<p>※<a href="https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/">公式サイトのチュートリアル</a></p>
<h4 class="md-end-block md-p"><span class="md-plain">大きな流れ</span></h4>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Create React App プロジェクトを生成する</span></p>
<p class="md-end-block md-p"><span class="md-plain">フレームワークに既にセットされているプロジェクトで、インストールする必要があるため、先にReactプロジェクトを生成します。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Storybookを導入</span></p>
<p class="md-end-block md-p"><span class="md-plain">二つの方法があるらしいです。基本機能が揃っているのをインストールするか、必要な機能を一個ずつインストールする方法です。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">コンポーネントを作る</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">実行</span></p>
</li>
</ol>
<p class="md-end-block md-p md-focus"><span class="md-plain">興味がある方は試してみてください〜</span></p>


Storybookでデザインシステムを始めましょう！

JavaScriptのモダンなオブジェクトの構文・演算子

<p>皆さんは普段、webサイトを見る時や商品をネット上で買うときは何で見ますか？<br />
つい最近もiPhone13が出てきたりと何事にもiPhoneをはじめとしたスマートフォンが主流となってきています。<br />
実際webデザインにおいてもスマートフォン表記をメインに置くことも珍しく無くなってきました。</p>
<p>少し話がずれてきてしまったのですが、<br />
スマホ主流となってきた今、SNSというものがプロモーションに使用されており気軽に色んな人の目に触れる機会が多くなってきました。<br />
しかし、色んな情報が多く見られる現代では、より今まで以上に情報の選択をしており、自分の目的に合った物以外をスルーするもしくはシャットダウン（ブロック）することも多くなりました。</p>
<p>今回「Twitter」に限定してしまうのですが、<br />
フォローしてくれている人達が普段どの様なことに興味を持ち、どの様なコミュニティーに参加しているか、そしてそのコミュニティーは一般的なのか？を把握する事ができ、自身のアカウントの調査→ニーズの特定ができる様なサービスがありましたので紹介しようと思います。</p>
<h3>「エコーチェンバー可視化システム」</h3>
<p>まずエコーチェンバーとは何かと言いますと、<br />
閉鎖的空間内でのコミュニケーションが繰り返されることにより、特定の信念が増幅または強化されてしまう状況の比喩である。<br />
世の中には様々な人がおり、様々な意見を持った人と触れ合うことが出来る。世界に開かれたグローバルでオープンな場で、「公開討論」のような形で意見を交換し合うことができるコミュニティがある。一方で、同じ意見を持った人達だけがそこに居ることを許される閉鎖的なコミュニティもあり、そのような場所で彼らと違う声を発すると、その声はかき消され、彼らと同じ声を発すると、増幅・強化されて返ってきて、「自分の声」がどこまでも響き続ける。それが「エコーチェンバー」である。(wikipwdiaより)</p>
<p>つまり、同意見だったりした場合は多くの反応を貰えるが一方、方向性が違ったりした場合は注目はあまりされないということになります。</p>
<p>例えば役に立つ豆知識等や可愛い動物の動画などがバズったりするのはこのエコーチェンバー現象の様に同じ考えを持つ人が多く存在しているからと考えられます。</p>
<h3>実際に使用してみました</h3>
<p>今回は弊社で運営している「コンペナビ」の公式Twitterを例に挙げて検証してみます。</p>
<p><a href="https://torilab.sakura.ne.jp/twitter/echamber/index.html">https://torilab.sakura.ne.jp/twitter/echamber/index.html</a></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8432" src="/uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-1024x363.png" alt="" width="1024" height="363" srcset="/uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-1024x363.png 1024w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-300x106.png 300w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-768x272.png 768w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1-600x213.png 600w, /uploads-archive/lc/2021/10/56b3836f4d63b9681391397b2a05822f-1.png 1196w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Twitterのアカウントでログインした後はその下の「エコーチャンバー可視化」を選択。</p>
<p>そうしますとこのアカウントでの情報が表示されます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-8433" src="/uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-1024x769.png" alt="" width="1024" height="769" srcset="/uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-1024x769.png 1024w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-300x225.png 300w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-768x577.png 768w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51-600x451.png 600w, /uploads-archive/lc/2021/10/e67404fa42bd9b9725a21a593aaeae51.png 1189w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8434" src="/uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-1024x558.png" alt="" width="1024" height="558" srcset="/uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-1024x558.png 1024w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-300x163.png 300w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-768x418.png 768w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208-600x327.png 600w, /uploads-archive/lc/2021/10/3a3138c63b9ff449adaebaec06a77208.png 1181w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8435" src="/uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-1024x325.png" alt="" width="1024" height="325" srcset="/uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-1024x325.png 1024w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-300x95.png 300w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-768x244.png 768w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37-600x191.png 600w, /uploads-archive/lc/2021/10/2a8a3aa8fe3dfc2b306deecb267fda37.png 1187w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8436" src="/uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-1024x563.png" alt="" width="1024" height="563" srcset="/uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-1024x563.png 1024w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-300x165.png 300w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-768x422.png 768w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8-600x330.png 600w, /uploads-archive/lc/2021/10/1dda94d7e740bfb48cd1f1282c1487b8.png 1180w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><img loading="lazy" class="alignnone size-large wp-image-8437" src="/uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-1024x782.jpg" alt="" width="1024" height="782" srcset="/uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-1024x782.jpg 1024w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-300x229.jpg 300w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-768x586.jpg 768w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b-600x458.jpg 600w, /uploads-archive/lc/2021/10/b8469d2e25d03d09373f04c4938a714b.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>この様に自身がいるコミュニティーは一般的なのか、または偏りがあるのか、それによってツイートやリツイートの方向性を考えてみるのが良いと感じました。</p>
<p>元々は自分がどのくらいエコーチェンバーの中に入ってしまっているのかを客観的に評価するためのシステムで、自分のタイムラインに表示される意見がどの程度一般から乖離しているのかを可視化できるものですが、この様な使い方も出来そうだと思い今回は紹介させていただきました。</p>


Twitterでの拡散率が高まる！？フォロワーの傾向を知ろう


<p>WEBデザインの問題で改善が必要になったとき、いろいろな意見をどう整理して形にしていったらよいかで悩んでいたときに、以下の本に出逢いました。</p>



<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="デザインリサーチの教科書" type="text/html" width="500" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com.au/kp/card?preview=inline&#038;linkCode=kpd&#038;ref_=k4w_oembed_E0y9HMFHnIjaQJ&#038;asin=4802511779&#038;tag=kpembed-20"></iframe>
</div><figcaption>デザインリサーチの教科書</figcaption></figure>



<p>この本を探した目的は、デザインする際、どのように情報を収集・整理したらよいかを改めて勉強するためだったのですが、<br>この本に書かれていた内容は、デザイナーの職種を超えて、問題解決のアイディアを形にするものでした。</p>



<p>自分なりにこちらの内容をごく一部ですが整理してみました。</p>



<h2>デザインが対象とするプロダクトと範囲の広がり</h2>



<p>19世紀に生まれた最初のデザインの対象はグラフィックのみでした（第一次デザイン）。デザインの手法はこの第一次デザインがベースとなっています。そこから20世紀にモノのデザイン、つまりインダストリアルデザインに広がります（第二次デザイン）。1980年代からは行動や体験をデザインするインタラクションデザイン（第三次デザイン）、2000年代には更にそこに持続可能性を考慮したデザインであるサービスデザイン（第三次デザイン）、そして2010年代にはビジネス・組織・教育・政府を対象としたシステムデザイン（第四次デザイン）にまで広がっています。この広がりの背景には、プロダクトの意味がモノからサービスへと移行してきたことがあり、それに伴い、デザインが必要とされる範囲もいろがってきたと考えられます。</p>



<p>この変化の中で、デザインの視野も同時に変化してきました。作り手の都合からユーザーの都合へ、ユーザーの都合から社会の都合へ、社会の都合から環境の都合へ。デザインの視野が広がるにつれ、そこに必要とされる要素も増えてきますので、綿密なリサーチが必要となってきます。</p>



<p>デザインの範囲がこれだけ広がってくると、必要な専門知識も広くなってくるため、デザイナーだけでデザインすることにも限界があり、職種をまたいでデザインしていく必要性も出てきます。</p>



<h2>マーケティングリサーチの限界とデザインリサーチの可能性</h2>



<p>未来の不確実性により、「十分に明確な未来」「選択的な未来」「ある範囲内の未来」「予測できない未来」に分けられます。</p>



<p>プロダクトの黎明期においては、十分に明確な未来となり、何を開発すれば売れるかという競争原理が明確です（CPUのクロック数を上げる、デジカメの画素数を上げる）。</p>



<p>プロダクトが成熟してくると、競合が増え「選択的な未来」となります（ブルーレイとHD DVD）。</p>



<p>更に先の未来を予測する場合には、「ある範囲内の未来」となり、ある程度の範囲に落ち着くことはわかっているが、いつになるかはわからないケースが出てきます（AIの浸透）。</p>



<p>更に会社の将来など、「予測できない未来」があります。</p>



<p>マーケティングリサーチで用いられるロジカルシンキングは確実性の高いリサーチに強く、不確実性が高いリサーチに弱いという問題があり、現在の変化が多く不確実性の高い時代においては不利となります。現代においては情報の入手が容易で競合との差がつけられない反面、情報が非常に膨大でロジカルな手法では把握しきれないという問題があるためです。</p>



<p>一方のインスピレーションを主軸とするデザインリサーチは不確実性が高いほど威力を発揮するため、今の時代において必要性が高まっています。競合がいない状況では一人ひとりにフォーカスするよりも、人々を大きく括ってプロダクトを作るほうが理にかなっていますが、競合が登場すると、一人ひとりがどのように生活しているかを知り、ニーズや要望を深く理解する必要があります。デザインリサーチではプロダクトに関わる一人ひとりにフォーカスし、そこからインスピレーションを得てアイディアにつなげていく手法を取ります。また、類推というデザインでよく行われる手法により、直接関係のないユーザーから新たなニーズを引き出すことも可能です。</p>



<p>同じく不確実性に対応するための開発手法であるアジャイルに自然に組み込むことができるのも、デザインリサーチ導入のメリットです。</p>



<h2>デザインリサーチの軸となるデザインプロセス</h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="960" height="647" src="/uploads-archive/lc/2021/09/design-process-1.jpg" alt="" class="wp-image-8272" srcset="/uploads-archive/lc/2021/09/design-process-1.jpg 960w, /uploads-archive/lc/2021/09/design-process-1-300x202.jpg 300w, /uploads-archive/lc/2021/09/design-process-1-768x518.jpg 768w, /uploads-archive/lc/2021/09/design-process-1-600x404.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /><figcaption>「デザインリサーチの教科書」内のBritish Design Council「<a rel="noreferrer noopener" href="https://www.designcouncil.org.uk/resources/report/11-lessons-managing-design-global-brands" target="_blank">Eleven lessons: managing design in eleven global grands | The design process</a>」の改定をさらに改定</figcaption></figure>



<p>デザインリサーチの軸となるデザインプロセスでは、Descover（課題を洗い出す）→ Define（課題を絞り込む）→ Develop（課題を洗い出す）→ Deliver（解決策を絞り込む）という発散・収束を繰り返す4段階を通過します。</p>



<p>実際にはDevelopからDiscoverに戻る、解決から新たな課題を見出し課題に戻るというループを経ます。</p>


デザインリサーチとは１

<p>最近色々出てきたノーコードツールですが、今回はデザインツールであるFigmaと連携でき、尚且つそのままのデザインをwebサイトに変換＆インターネット上に公開できるサービスを紹介したいと思います。</p>
<h3>「Figside」とは</h3>
<p>先ほども簡単に紹介させていただきましたが「Figside」とはデザインツールのFigmaで作成したデザインと連携することでレスポンシブにプレビューする事ができ、それらを数クリックでwebサイトに変換、公開まで可能となっているサービスです。</p>
<h3>使い方</h3>
<p>Figmaとの連携が必須のため、まず初めにFigmaの方でログインしておきます。<br />
今回はFigsideのテンプレートを使用しますのでテンプレートタブから選択します。<br />
選択したテンプレートをFigmaで開く為、右上部の「open in Figma」を押します。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8258" src="/uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a.png" alt="" width="1524" height="651" srcset="/uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a.png 1524w, /uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a-300x128.png 300w, /uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a-1024x437.png 1024w, /uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a-768x328.png 768w, /uploads-archive/lc/2021/09/c72a46eb73077813c29b03b02be3722a-600x256.png 600w" sizes="(max-width: 1524px) 100vw, 1524px" /></p>
<p>&nbsp;</p>
<p>続いて「Duplicate」を押すと先ほど選択したデザインがFigmaで開かれます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8259" src="/uploads-archive/lc/2021/09/0c1b266b5d20f02c06cab04b79d1a123.png" alt="" width="984" height="636" srcset="/uploads-archive/lc/2021/09/0c1b266b5d20f02c06cab04b79d1a123.png 984w, /uploads-archive/lc/2021/09/0c1b266b5d20f02c06cab04b79d1a123-300x194.png 300w, /uploads-archive/lc/2021/09/0c1b266b5d20f02c06cab04b79d1a123-768x496.png 768w, /uploads-archive/lc/2021/09/0c1b266b5d20f02c06cab04b79d1a123-600x388.png 600w" sizes="(max-width: 984px) 100vw, 984px" /></p>
<p>&nbsp;</p>
<p>Figmaの使い方に関してはここでは省略させていただきます。</p>
<p>完成しましたらFigmaのページのURLをコビーしておきます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8260" src="/uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0.png" alt="" width="1604" height="659" srcset="/uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0.png 1604w, /uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0-300x123.png 300w, /uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0-1024x421.png 1024w, /uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0-768x316.png 768w, /uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0-600x247.png 600w, /uploads-archive/lc/2021/09/f97624e8545c586cb31e719a0ff368c0-1536x631.png 1536w" sizes="(max-width: 1604px) 100vw, 1604px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8261" src="/uploads-archive/lc/2021/09/bd909b572f58fbd50750e9ed9b64494f.png" alt="" width="975" height="170" srcset="/uploads-archive/lc/2021/09/bd909b572f58fbd50750e9ed9b64494f.png 975w, /uploads-archive/lc/2021/09/bd909b572f58fbd50750e9ed9b64494f-300x52.png 300w, /uploads-archive/lc/2021/09/bd909b572f58fbd50750e9ed9b64494f-768x134.png 768w, /uploads-archive/lc/2021/09/bd909b572f58fbd50750e9ed9b64494f-600x105.png 600w" sizes="(max-width: 975px) 100vw, 975px" /></p>
<p>&nbsp;</p>
<p>ここでFigsideの方に戻り、Dashboardに先ほどコピーしたURLを貼り付けます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8262" src="/uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3.png" alt="" width="1040" height="663" srcset="/uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3.png 1040w, /uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3-300x191.png 300w, /uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3-1024x653.png 1024w, /uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3-768x490.png 768w, /uploads-archive/lc/2021/09/6e49cf4b7e00cbc0f69209344fb067e3-600x383.png 600w" sizes="(max-width: 1040px) 100vw, 1040px" /></p>
<p>&nbsp;</p>
<p>そうしますと先ほどFigmaで作成したデザインデータがダッシュボードに読み込まれます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8263" src="/uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888.png" alt="" width="1045" height="517" srcset="/uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888.png 1045w, /uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888-300x148.png 300w, /uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888-1024x507.png 1024w, /uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888-768x380.png 768w, /uploads-archive/lc/2021/09/2aa3ebfc658979a01428037b53b71888-600x297.png 600w" sizes="(max-width: 1045px) 100vw, 1045px" /></p>
<p>読み込まれたデータを選択するとプレビュー画面になり、この場面でサイトの設定を変更したり、実際に公開するサイトのURLを決めたり、各デバイスの表示をプレビューしたりとする事ができます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8264" src="/uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75.png" alt="" width="1573" height="568" srcset="/uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75.png 1573w, /uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75-300x108.png 300w, /uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75-1024x370.png 1024w, /uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75-768x277.png 768w, /uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75-600x217.png 600w, /uploads-archive/lc/2021/09/12d0d0acf0f7fd3c7516395d0be43d75-1536x555.png 1536w" sizes="(max-width: 1573px) 100vw, 1573px" /></p>
<p>&nbsp;</p>
<p>公開には「Publish」ボタンを押す事で完了し、大体1分経たないぐらいで実際にネット上にて公開されます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8265" src="/uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1.png" alt="" width="1319" height="960" srcset="/uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1.png 1319w, /uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1-300x218.png 300w, /uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1-1024x745.png 1024w, /uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1-768x559.png 768w, /uploads-archive/lc/2021/09/329ff916058e4b9a4fc5d4c85d987b74-1-600x437.png 600w" sizes="(max-width: 1319px) 100vw, 1319px" /></p>
<p>&nbsp;</p>
<p>公開後、修正したい場合であってもFigmaから修正が可能で終わり次第Figsideの方で再度読み込みし直し、Publishボタンを押すと修正したものが反映されます。</p>
<h3>まとめ</h3>
<p>Figmaで作成したデザインをそのままwebサイトに変換する事でデザインの再現性はかなり高いものとなると思っておりますが、一方動作的な観点からはどこまで細かい動きを再現する事ができるのかなどの疑問点があります。<br />
変換したサイトのソースをダウンロードすることは一部有料ですが出来そうなので簡易的はポートフォリオの様なサイトはそのまま公開しても良いと感じましたが階層が深い企業サイトの様なものはダウンロードしたソースを細かく調整したりする必要がありそうだと感じました。</p>
<p>figside　<a href="https://figside.com/">https://figside.com/</a><br />
FigmaのデザインをそのままWebサイトに変換＆公開できる「Figside」を使ってみた！　<a href="https://paiza.hatenablog.com/entry/2021/08/25/130000">https://paiza.hatenablog.com/entry/2021/08/25/130000</a></p>


「Figside」Figmaで作成したデザインをwebサイトに変換できるサービス

<p>今回はCSS Units（単位）について紹介していきたいと思います。</p>
<h2>はじめに</h2>
<p class="md-end-block md-p"><span class="md-plain">はじめる前に、css文法を少し整理するとselector、 property、valuesで構成されています。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8250" src="/uploads-archive/lc/2021/09/css.png" alt="" width="330" height="156" srcset="/uploads-archive/lc/2021/09/css.png 330w, /uploads-archive/lc/2021/09/css-300x142.png 300w" sizes="(max-width: 330px) 100vw, 330px" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">そして今日は、valuesの中でも、要素の大きさやサイズの長さなどを決める単位についてまとめてみました。サイズを決める単位は大きく2つのカテゴリーに分けられますが、絶対的な長さの単位absoluteと相対的な長さの単位relativeの2つに分けられます。</span></p>
<h3>まず、絶対的な長さの単位（absolute）</h3>
<p><img loading="lazy" class="alignnone size-full wp-image-8242" src="/uploads-archive/lc/2021/09/absolute.png" alt="" width="1008" height="432" srcset="/uploads-archive/lc/2021/09/absolute.png 1008w, /uploads-archive/lc/2021/09/absolute-300x129.png 300w, /uploads-archive/lc/2021/09/absolute-768x329.png 768w, /uploads-archive/lc/2021/09/absolute-600x257.png 600w" sizes="(max-width: 1008px) 100vw, 1008px" /></p>
<p>数多くの単位がありますが、ピクセル(px)を除いた他の単位は、実は物理的な世界にだけ意味があるので、あまり使われてません。 CSSの主な用途もスクリーンやモニターの上でウェブサイトを装飾することですので、ほとんどピクセルを利用しています。</p>
<p>ここに出ているほとんどの単位は、皆さんがよく知っていたり、一度ぐらいは聞いたことがあると思います。 中でもポイント(pt)はGoogle Docs、テキストエディタやデザインツールで、ユーザーがフォントのサイズを調整する時、ピクセルよりはポイント単位で調整する場合が多いです。だから、おそらく皆さんもポイント単位でフォントサイズを指定するのが慣れていると思います。でも、実はブラウザではピクセルに変換されてスクリーンに表記されます。</p>
<p><img loading="lazy" class="alignnone size-large wp-image-8243" src="/uploads-archive/lc/2021/09/docs-1024x477.png" alt="" width="1024" height="477" srcset="/uploads-archive/lc/2021/09/docs-1024x477.png 1024w, /uploads-archive/lc/2021/09/docs-300x140.png 300w, /uploads-archive/lc/2021/09/docs-768x358.png 768w, /uploads-archive/lc/2021/09/docs-600x279.png 600w, /uploads-archive/lc/2021/09/docs-1536x715.png 1536w, /uploads-archive/lc/2021/09/docs.png 1594w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand"><a href="https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB">ピクセル</a>とは？</span></p>
<p class="md-end-block md-p"><span class="md-plain">すでにご存知だと思いますが、モニターの上で画面に表せる一番小さい単位を指します。</span></p>
<p>&nbsp;</p>
<p class="md-end-block md-p"><span class="md-plain md-expand">ピクセルを使ったら生じる問題点は？</span></p>
<p class="md-end-block md-p"><span class="md-plain">1.コンテナのサイズが変更されてもコンテンツがそのまま固定された値で維持される。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">2.ブラウザでフォントサイズ設定を変えても全然反応しない。</span></p>
<p>&nbsp;</p>
<p>なので、コンテンツを流動的に作るためには相対的な長さの単位（relative）が必要です。</p>
<h3>相対的な長さの単位（relative）</h3>
<p><img loading="lazy" class="alignnone size-full wp-image-8244" src="/uploads-archive/lc/2021/09/relative.png" alt="" width="1006" height="536" srcset="/uploads-archive/lc/2021/09/relative.png 1006w, /uploads-archive/lc/2021/09/relative-300x160.png 300w, /uploads-archive/lc/2021/09/relative-768x409.png 768w, /uploads-archive/lc/2021/09/relative-600x320.png 600w" sizes="(max-width: 1006px) 100vw, 1006px" /></p>
<h4 class="md-end-block md-p md-focus"><span class="md-plain md-expand">em (relative to parent element)</span></h4>
<p class="md-end-block md-p"><span class="md-plain">タイポグラフィで現在指定されたサイズを表す単位です。 今のフォントサイズを表す単位だと理解すると良いと思います。つまり同じフォントサイズ16pxでも、どんなフォントファミリーを使うかによって、ユーザーに表示されるテキストの大きさは変わる可能性があります。指定されたフォントファミリーに関係なく、常に固定されたフォントサイズを持っています。</span></p>
<p>ブラウザでhtmlに割り当てられるフォンドサイズは、特にフォントサイズを指定しない限り16pxとなります。</p>
<p>emは親要素のフォントサイズをかけた値に計算されます。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8245" src="/uploads-archive/lc/2021/09/em.png" alt="" width="369" height="119" srcset="/uploads-archive/lc/2021/09/em.png 369w, /uploads-archive/lc/2021/09/em-300x97.png 300w" sizes="(max-width: 369px) 100vw, 369px" /></p>
<h4>rem (relative to root element)</h4>
<p>最初文字のrはルートを表すrです。emと似ていますが、親要素によってサイズが計算されるのではなく、ルートに指定されたフォントサイズによってサイズが決まります。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8246" src="/uploads-archive/lc/2021/09/rem.png" alt="" width="370" height="116" srcset="/uploads-archive/lc/2021/09/rem.png 370w, /uploads-archive/lc/2021/09/rem-300x94.png 300w" sizes="(max-width: 370px) 100vw, 370px" /></p>
<h4>vw (viewport width)</h4>
<p>100vw → ビューポート幅の100％を使用</p>
<h4>vh (viewport height)</h4>
<p>100vh → ビューポートの高さの100％を使用</p>
<h4>%</h4>
<p>親要素の相対的に大きさが計算されます。 emの代わりに%を使うことができます。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-8247" src="/uploads-archive/lc/2021/09/unnamed-file.png" alt="" width="474" height="124" srcset="/uploads-archive/lc/2021/09/unnamed-file.png 474w, /uploads-archive/lc/2021/09/unnamed-file-300x78.png 300w" sizes="(max-width: 474px) 100vw, 474px" /></p>
<p>&nbsp;</p>
<h2>まとめ</h2>
<p class="md-end-block md-p"><span class="md-plain">親要素はpxに、子要素を%にした場合　→　親要素によって相対的に幅が変わります。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8248" src="/uploads-archive/lc/2021/09/unnamed-file.gif" alt="" width="640" height="400" /></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">親要素はpxに、子要素をv*にした場合　→　親要素に関係なく、プラウザービューポートの幅や高さによって変わります。</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-8249" src="/uploads-archive/lc/2021/09/vw.gif" alt="" width="640" height="400" /></p>
<p>このような違いをしっかり理解して使うことが大切だと思います。</p>
<p>使う時の基準を以下にまとめました。ぜひ参考にしてみてください。</p>
<p class="md-end-block md-p"><span class="md-plain"><strong>〜によって変更されるべき</strong>　　　　<strong>単位</strong></span></p>
<p class="md-end-block md-p"><span class="md-plain md-expand">親の要素サイズ　　　　　　　　　%、em</span></p>
<p class="md-end-block md-p"><span class="md-plain">ブラウザサイズ　　　　　　　　　v*、rem</span></p>
<p class="md-end-block md-p"><span class="md-plain">要素の高さ、幅　　　　　　　　　%、v*</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">フォントサイズ　　　　　　　　　em、rem</span></p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p>w3schools :</p>
<p><a href="https://www.w3schools.com/css/css_units.asp">https://www.w3schools.com/css/css_units.asp</a></p>
<p>MDN :</p>
<p><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units">https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units</a></p>


CSSの単位一覧

<h3><strong><span style="font-size: 18pt">WebAPIとは</span></strong></h3>
<p style="text-align: left">Web APIとは、コンピュータプログラムの提供する機能を外部の別のプログラムから</p>
<p style="text-align: left">呼び出して利用するための手順・規約（API：Application Programming Interface）</p>
<p style="text-align: left">の類型の一つで、HTTPなどWebの技術を用いて構築されたもの。ざっくり簡単に言うとオ</p>
<p style="text-align: left">ンライン上でアプリケーションを利用する、というものでデータが欲しい！！等のリクエスト</p>
<p style="text-align: left">を送ったりするとデータがjsonやxml形式で返ってきます。これをAPIを叩くと言います。</p>
<p>&nbsp;</p>
<h3>気象庁公式の天気予報API</h3>
<p>以下のURLにブラウザで直接アクセスすれば、JSONデータを確認できます。</p>
<p>・東京都の天気予報の概要を取得する<br />
<a href="https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json">https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json</a></p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17121" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38.png" alt="" width="1194" height="564" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38.png 1194w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-300x142.png 300w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-768x363.png 768w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-1024x484.png 1024w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-228x108.png 228w" sizes="(max-width: 1194px) 100vw, 1194px" /></p>
<p>JSONなので人間には少し読みにくいですが、読みやすくする方法はあります。</p>
<p>デコードしたjsonのデータにprint_r()を使えば分かりやすく表示してくれます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17123" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00.png" alt="" width="536" height="764" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00.png 536w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00-210x300.png 210w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00-228x325.png 228w" sizes="(max-width: 536px) 100vw, 536px" /></p>
<p>以下が実際もソースコード です。</p>

		<div id="crayon-64954036ed578600716298" 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;?php
$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";

$json = file_get_contents($url);
$data = json_decode($json,true);

$publisher = $data[0]['publishingOffice'];
$publish_time = $data[0]['reportDatetime'];
$area = $data[0]['timeSeries'][0]['areas'][0]['area']['name'];
$today = $data[0]['timeSeries'][0]['areas'][0]['weathers'][0];
$tomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][1];
$dayAfterTomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][2];

echo '発表者　：　'.$publisher.'&lt;/br&gt;';
echo '報告日時　：　'.$publish_time.'&lt;/br&gt;';
echo '対象地域　：　'.$area.'&lt;/br&gt;';
echo '今日の天気　：　'.$today.'&lt;/br&gt;';
echo '明日の天気　：　'.$tomorrow.'&lt;/br&gt;';
echo '明後日の天気　：　'.$dayAfterTomorrow.'&lt;/br&gt;';
?&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-64954036ed578600716298-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-2">2</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-4">4</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-6">6</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-8">8</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-10">10</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-12">12</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-14">14</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-16">16</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-18">18</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-20">20</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-64954036ed578600716298-1">&lt;?php</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-2">$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";</div><div class="crayon-line" id="crayon-64954036ed578600716298-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-4">$json = file_get_contents($url);</div><div class="crayon-line" id="crayon-64954036ed578600716298-5">$data = json_decode($json,true);</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-6">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed578600716298-7">$publisher = $data[0]['publishingOffice'];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-8">$publish_time = $data[0]['reportDatetime'];</div><div class="crayon-line" id="crayon-64954036ed578600716298-9">$area = $data[0]['timeSeries'][0]['areas'][0]['area']['name'];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-10">$today = $data[0]['timeSeries'][0]['areas'][0]['weathers'][0];</div><div class="crayon-line" id="crayon-64954036ed578600716298-11">$tomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][1];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-12">$dayAfterTomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][2];</div><div class="crayon-line" id="crayon-64954036ed578600716298-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-14">echo '発表者　：　'.$publisher.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-15">echo '報告日時　：　'.$publish_time.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-16">echo '対象地域　：　'.$area.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-17">echo '今日の天気　：　'.$today.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-18">echo '明日の天気　：　'.$tomorrow.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-19">echo '明後日の天気　：　'.$dayAfterTomorrow.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-20">?&gt;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><img decoding="async" loading="lazy" class="size-full wp-image-17129 aligncenter" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20.png" alt="" width="390" height="196" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20.png 390w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20-300x151.png 300w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20-228x115.png 228w" sizes="(max-width: 390px) 100vw, 390px" /></p>
<p>このAPIに使い方がすごく簡単なので、よかったら試してみてください。</p>

large_スクリーンショット-2021-09-03-5.36.38-1024x484.png

medium_スクリーンショット-2021-09-03-5.36.38-1024x484.png

small_スクリーンショット-2021-09-03-5.36.38-1024x484.png

thumbnail_スクリーンショット-2021-09-03-5.36.38-1024x484.png

スクリーンショット-2021-09-03-5.36.38-1024x484.png

気象庁公式の天気予報APIを使ってみた

<p>Googleより新しいデザインフレームワーク「Material You」が発表されました。<br />
2014年にマテリアルデザインが導入され、それらのフレームワークはよりシンプルにそして実用的で機能的です。<br />
今回発表された「Material You」ではそんな実用的で機能的なだけではなく、感情を呼び起こす体験を求めているというものでした。</p>
<h3>感情を呼び起こす体験とは</h3>
<p>「フォームが機能だけでなく、感覚にも従うとしたら」<br />
これまでの様にあらかじめ指定されていたカラーパレットから色を選ぶのではなく、一人一人のパーソナルカラーを基に生成されるカラーパレットによってあらゆるスタイル、あらゆるニーズに対応できるというものです。<br />
よって今まで以上にデザインと個人の感覚が密接した関係になってきているということが感じられました。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8046" src="/uploads-archive/lc/2021/08/1946b3f0e10df3e717c2f9a4eb6bfb0f.png" alt="" width="751" height="419" srcset="/uploads-archive/lc/2021/08/1946b3f0e10df3e717c2f9a4eb6bfb0f.png 751w, /uploads-archive/lc/2021/08/1946b3f0e10df3e717c2f9a4eb6bfb0f-300x167.png 300w, /uploads-archive/lc/2021/08/1946b3f0e10df3e717c2f9a4eb6bfb0f-600x335.png 600w" sizes="(max-width: 751px) 100vw, 751px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8047" src="/uploads-archive/lc/2021/08/b407b6a8f91e369c727e6fc7f7b4a158.png" alt="" width="754" height="423" srcset="/uploads-archive/lc/2021/08/b407b6a8f91e369c727e6fc7f7b4a158.png 754w, /uploads-archive/lc/2021/08/b407b6a8f91e369c727e6fc7f7b4a158-300x168.png 300w, /uploads-archive/lc/2021/08/b407b6a8f91e369c727e6fc7f7b4a158-600x337.png 600w" sizes="(max-width: 754px) 100vw, 754px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8048" src="/uploads-archive/lc/2021/08/d7eae5f903398c4d3d3f690db58aca07.png" alt="" width="753" height="425" srcset="/uploads-archive/lc/2021/08/d7eae5f903398c4d3d3f690db58aca07.png 753w, /uploads-archive/lc/2021/08/d7eae5f903398c4d3d3f690db58aca07-300x169.png 300w, /uploads-archive/lc/2021/08/d7eae5f903398c4d3d3f690db58aca07-600x339.png 600w" sizes="(max-width: 753px) 100vw, 753px" /></p>
<h3>あらゆるスタイルに対応</h3>
<p>現在Android端末に適応されているのですが、個人の設定している壁紙からマテリアルパレットを生成しています。<br />
生活の様々な側面に移行するにつれて、新しい画面サイズ、デバイスタイプ、入力モダリティ、及びコンテキストに適応するだけではなく、モーションを使用して一貫性がありながらも人間的な方法で反応します。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8049" src="/uploads-archive/lc/2021/08/55cf6af3088b785b1003237c0bd905f2.png" alt="" width="753" height="424" srcset="/uploads-archive/lc/2021/08/55cf6af3088b785b1003237c0bd905f2.png 753w, /uploads-archive/lc/2021/08/55cf6af3088b785b1003237c0bd905f2-300x169.png 300w, /uploads-archive/lc/2021/08/55cf6af3088b785b1003237c0bd905f2-600x338.png 600w" sizes="(max-width: 753px) 100vw, 753px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8050" src="/uploads-archive/lc/2021/08/c0c847226da927a8941b69187bf84f15.png" alt="" width="755" height="424" srcset="/uploads-archive/lc/2021/08/c0c847226da927a8941b69187bf84f15.png 755w, /uploads-archive/lc/2021/08/c0c847226da927a8941b69187bf84f15-300x168.png 300w, /uploads-archive/lc/2021/08/c0c847226da927a8941b69187bf84f15-600x337.png 600w" sizes="(max-width: 755px) 100vw, 755px" /></p>
<h3>あらゆるニーズにアクセス可能</h3>
<p>コントラスト、サイズ等の制御を以前よりも多くの方法でUIをカスタマイズできるコンテキスト認識システムと共有することで、すべてのユーザーに合わせてUIを調整できます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8051" src="/uploads-archive/lc/2021/08/f8feb8cbae149db192f1a1630f479f0c.png" alt="" width="757" height="425" srcset="/uploads-archive/lc/2021/08/f8feb8cbae149db192f1a1630f479f0c.png 757w, /uploads-archive/lc/2021/08/f8feb8cbae149db192f1a1630f479f0c-300x168.png 300w, /uploads-archive/lc/2021/08/f8feb8cbae149db192f1a1630f479f0c-600x337.png 600w" sizes="(max-width: 757px) 100vw, 757px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-8052" src="/uploads-archive/lc/2021/08/5dcd74335f585819be442dd16025de25.png" alt="" width="756" height="424" srcset="/uploads-archive/lc/2021/08/5dcd74335f585819be442dd16025de25.png 756w, /uploads-archive/lc/2021/08/5dcd74335f585819be442dd16025de25-300x168.png 300w, /uploads-archive/lc/2021/08/5dcd74335f585819be442dd16025de25-600x337.png 600w" sizes="(max-width: 756px) 100vw, 756px" /></p>
<p><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/UHQPdP8qgrk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></p>
<p>参照サイト（<a href="https://material.io/blog/announcing-material-you">https://material.io/blog/announcing-material-you</a>）</p>


次世代のマテリアルデザイン

<p>今回は６つのcss機能を紹介したいと思います。</p>
<p class="md-end-block md-p"><span class="md-plain">該当機能を実現するために以前はjavascriptを使っていましたが、今はcssでできちゃいます。ただ、ブラウザによって、実装されていないのもは使用不可の場合もあります。</span></p>
<p class="md-end-block md-p"><span class="md-plain">各機能の最後にリンクを貼るので、そちらで詳しい仕様や対応ブラウザなどを確認してください。</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">scroll-snap</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらを使用することでスクロールの動きを変えられます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">通常のスクロール</span></p>
<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="LYygxZJ" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/LYygxZJ"><br />
</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p"><span class="md-plain">snapを使用したらスクロールがある要素にくっつくようになります。</span></p>
<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="WNjgaVr" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/WNjgaVr"><br />
scroll-snap</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p md-focus"><span class="md-plain">適用方法は、scroll-snap-typeを親要素に、scroll-snap-alignを子要素に指定すればokです。</span></p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=scroll-snap">https://caniuse.com/?search=scroll-snap</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type">https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type</a></span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align">https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align</a></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">gap</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらはflexboxで余白を便利に指定できるプロパティです。</span></p>
<p class="md-end-block md-p"><span class="md-plain">コンテナ中のアイテムの間に間隔をあけるために普段marginを使用しますが、代わりにgapを指定することができます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">コンテナにgapを指定すればokです。需要によって「row」と「column」二つの値を指定できます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=gap">https://caniuse.com/?search=gap</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/gap">https://developer.mozilla.org/ja/docs/Web/CSS/gap</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">aspect-ratio</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、要素に対してアスペクト比を簡単に指定して、レスポンシブな状態を簡単に保つプロパティです。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="LYygWYw" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/LYygWYw"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=aspect-ratio">https://caniuse.com/?search=aspect-ratio</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio">https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">position: sticky</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、スクロールに応じて要素を固定表示にすることができます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、スクロールダウンで、ヘッダーを上に固定させたい場合などに、普段fixedとabsoluteやjavascriptで実現いていると思いますが、代わりにstickyを使用できます。</span></p>
<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="xxdaQga" data-user="ryusinei">See the Pen <a href="https://codepen.io/ryusinei/pen/xxdaQga"><br />
sticky</a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
on <a href="https://codepen.io">CodePen</a>.</p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=sticky">https://caniuse.com/?search=sticky</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/position">https://developer.mozilla.org/ja/docs/Web/CSS/position</a></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">:is()</span></h2>
<p class="md-end-block md-p"><span class="md-plain">こちらは、CSS指定を見やすくまとめる、疑似クラスの一つです。こちらを使用することで、少ないコードで多い要素を指定できます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、ボタンの色を変えるとしたら</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="VwbEpwY" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/VwbEpwY"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">見た通り、buttonが重複していますね。</span></p>
<p class="md-end-block md-p"><span class="md-plain">isを使用すると下記のように見やすくなります。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="KKmGWKQ" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/KKmGWKQ"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">つまり、要素がheader, nav, formの場合、ボタンの色を指定するように、要素をまとめて指定することができます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=%3Ais()">https://caniuse.com/?search=%3Ais()</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:is">https://developer.mozilla.org/ja/docs/Web/CSS/:is</a></span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">@supports</span></h2>
<p class="md-end-block md-p"><span class="md-plain">これで、ブラウザが該当css機能を対応しているのか否かが判断できます。</span></p>
<p class="md-end-block md-p"><span class="md-plain">例えば、こちらではdisplay:gridを対応しているのかをチェックしています。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="oNWaBVr" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/oNWaBVr"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">対応しているのならdivをグリッドコンテナにします。</span></p>
<p class="md-end-block md-p"><span class="md-plain">また、対応していないのかもチェックできます。</span></p>
<p class="codepen" data-height="200" data-default-tab="css" data-slug-hash="abWRpxX" data-user="ryusinei" style="height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryusinei/pen/abWRpxX"><br />
  </a> by ryusinei (<a href="https://codepen.io/ryusinei">@ryusinei</a>)<br />
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<p class="md-end-block md-p"><span class="md-plain">対応していなければ、代わりにしたいのを指定すればokです。</span></p>
<p class="md-end-block md-p"><span class="md-plain">対応ブラウザ</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://caniuse.com/?search=%40supports">https://caniuse.com/?search=%40supports</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">MDN</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@supports">https://developer.mozilla.org/ja/docs/Web/CSS/@supports</a></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">終わりに</span></h2>
<p class="md-end-block md-p"><span class="md-plain">今回紹介した以外にもたくさんのCSSのプロパティがありますので、他に気になる機能や便利な機能を見つけ出したらぜひ共有できればと思います。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">web標準仕様もどんどん進化しているので、それを理解して使いこなすことによって、エンジニアの作業がもっと楽になることを願います。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></p>


知ってればお得なCSSプロパティ６つ！


<p><a rel="noreferrer noopener" href="https://qiita.com/ikea_shark_jk/items/deba88cbb8e5756fc929" target="_blank">HTML LSとHTML5の違いについてまとめ</a><br>今朝↑こちらの記事を読んで初めて知りましたが、2019年6月にHTMLの標準仕様がW3Cが策定しているものから、WHATWGが策定しているLiving Statndard(リビングスタンダード; 以降 HTML LS)に合意がなされ、以降はHTML LSがHTML5の標準仕様に替わっていました（合意の記事：<a rel="noreferrer noopener" href="https://www.itmedia.co.jp/news/articles/1906/10/news038.html" target="_blank">HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に</a> 2019.06.10）。</p>



<p><a rel="noreferrer noopener" href="https://qiita.com/ikea_shark_jk/items/deba88cbb8e5756fc929" target="_blank">参考記事</a>ではHTML LSとHTML5が別物のような書き方がされていましたが、正式にはHTML5の標準仕様がHTML LSになるということのようです（JavaScriptの標準仕様がECMAScriptである関係性に近いでしょうか）。</p>



<blockquote class="wp-block-quote"><p>Is this HTML5?<br>In short: Yes.<br>In more length: the term &#8220;HTML5&#8221; is widely used as a buzzword to refer to modern web technologies, many of which (though by no means all) are developed at the WHATWG. This document is one such; others are available from the WHATWG Standards overview.</p><cite><a rel="noreferrer noopener" href="https://html.spec.whatwg.org/multipage/introduction.html#abstract" target="_blank">Living Standard — Last Updated 1 July 2021</a> <a rel="noreferrer noopener" href="https://html.spec.whatwg.org/multipage/introduction.html#abstract" target="_blank">https://html.spec.whatwg.org/multipage/introduction.html#abstract</a></cite></blockquote>



<p>10年ほど前、まだスクールに通っていた頃、2つの団体がHTML5の標準規格を巡って対立しているということを何となく教えていただいたのを覚えていますが、それが続いていて、当時圧倒的だったW3Cからもう１つのWHATWGに替わっていたとは驚きです。</p>



<p>WHATWGはApple、Mozilla、Opera、そしてて2017年からはMicrosoftも加わって策定されているそうです（参考: <a rel="noreferrer noopener" href="https://ja.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group" target="_blank">Web Hypertext Application Technology Working Group &#8211; Wikipedia</a>）。これだけ中心的な開発者が推進していれば、W3Cと代替わりしたのも今となっては納得です。と思いましたが、W3CもMozillaとOperaが共同で作成してました。</p>



<p>W3Cが完成されたHTML5の公開を目指しているのに対し、WHATWGはHTMLの生活水準(Living Standard)のために継続的に仕様をアップデートしていくことを基本としていて、技術の進歩を優先しているWHATWGの方針が、新たな技術が次々に求められる今のWEB事情にマッチしたことがWHATWGに標準が移った理由かもしれません。</p>



<p>私がよくHTML、CSS、JavaScriptの仕様を確認するときに利用させていただいている<a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/" target="_blank">MDN Web Docs</a>で仕様確認している場合は、<br>W3Cに限定せず、「信頼できる標準化団体 (W3C、WHATWG、Khronos、IETFなど) の下で公開された仕様書で指定されており、妥当なレベルの安定性に達している」ことと「他のブラウザー開発者が興味を引く兆しを見せており、少なくとも1つのブラウザーで一貫して実装されている場合 」を前提に新しいウェブ標準技術を適切に文書化することを前提としており(参考: <a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/MDN/Guidelines/Conventions_definitions" target="_blank">MDN の慣習と定義 &#8211; MDN プロジェクト | MDN</a>)、W3CとWHATWGの標準仕様がマージされているような状態だと推察されるので、<br>W3CからWHATWGに標準仕様が換わっていることを意識する必要はそれほどないと思いますが、<br><a rel="noreferrer noopener" href="https://www.w3.org/" target="_blank">W3Cのドキュメント</a>で仕様確認されていた場合は注意が必要です。</p>



<p>ルビ（&lt;rb&gt;、&lt;rtc&gt;）や一部属性など、W3Cでは標準仕様だったものが、WHATWGのHTML LSでは策定されていないものもあるようです。<br><a rel="noreferrer noopener" href="https://qiita.com/ikea_shark_jk/items/deba88cbb8e5756fc929" target="_blank">最初にご紹介した記事</a>にW3CのHTML5標準仕様と、WHATWGのHTML LSの違いについて紹介されています。</p>



<h2>参考にさせていただいたサイト</h2>



<ul><li><a rel="noreferrer noopener" href="https://qiita.com/ikea_shark_jk/items/deba88cbb8e5756fc929" target="_blank">HTML LSとHTML5の違いについてまとめ</a></li><li><a rel="noreferrer noopener" href="https://html.spec.whatwg.org/multipage/" target="_blank">Living Standard</a></li><li><a rel="noreferrer noopener" href="https://ja.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group" target="_blank">Web Hypertext Application Technology Working Group &#8211; Wikipedia</a></li><li><a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/MDN/Guidelines/Conventions_definitions" target="_blank">MDN の慣習と定義 &#8211; MDN プロジェクト | MDN</a></li></ul>




HTML5がW3CからWHATWGが策定するLiving Standardに標準仕様が替わって2年たってた

<p>Webサイトを作った際にブラウザやOSによって表示が変わることが多く、多くのコーダーの方達は１つ１つのブラウザで確認したり、またWindowsとMacOSを切り替えて確認したりしています。<br />
有名なものですと「Boot Camp」などが挙げられると思います。</p>
<p>ただ、これらを使用するためにはインストールだったりの環境構築が必要で、手間が掛かったり、容量が重く動作に対して影響が出てしまうことがあります。</p>
<h3>クロスブラウザテストWEBサービス「LambdaTest」</h3>
<p>こちらのサービスは Chrome をはじめ、 Firefox、 Safari、 IE、 Edge、 Operaなどブラウザをサービス上で使用でき、細かいバージョン指定やOS、画面サイズなどから選択して表示することが可能となっています。<br />
またPC、スマホの切り替えも可能となっている為非常にブラウザテストがやり易くなっており、スマホの場合はiOSやAndroidなどのOSも選択することが可能。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7909" src="/uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1.png" alt="" width="1628" height="783" srcset="/uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1.png 1628w, /uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1-300x144.png 300w, /uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1-1024x493.png 1024w, /uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1-768x369.png 768w, /uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1-600x289.png 600w, /uploads-archive/lc/2021/07/bda320df290f87e078138dba0565ce99-1-1536x739.png 1536w" sizes="(max-width: 1628px) 100vw, 1628px" /></p>
<h3>操作</h3>
<p>左メニューにある「Switch」アイコンでは先ほど見た環境選択画面が表示される為簡単にブラウザやOSの切り替えが容易となっている。<br />
録画ボタンなどもある為、テストの様子を動画にして保存することも出来ます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7910" src="/uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc.png" alt="" width="1302" height="876" srcset="/uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc.png 1302w, /uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc-300x202.png 300w, /uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc-1024x689.png 1024w, /uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc-768x517.png 768w, /uploads-archive/lc/2021/07/1b9a0fccd268b76869c87642cf6373fc-600x404.png 600w" sizes="(max-width: 1302px) 100vw, 1302px" /></p>
<p>レスポンシブテストも容易<br />
エディタを切り替えボタンによって選択したデバイスの表示確認ができる。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7913" src="/uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51.png" alt="" width="1586" height="851" srcset="/uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51.png 1586w, /uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51-300x161.png 300w, /uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51-1024x549.png 1024w, /uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51-768x412.png 768w, /uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51-600x322.png 600w, /uploads-archive/lc/2021/07/fd09cf54b33cbd3ca05c23a7998cdc51-1536x824.png 1536w" sizes="(max-width: 1586px) 100vw, 1586px" /></p>
<p>各ブラウザ・OSのスクリーンショットを一括で書き出しが可能となっている</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7911" src="/uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7.png" alt="" width="1582" height="867" srcset="/uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7.png 1582w, /uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7-300x164.png 300w, /uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7-1024x561.png 1024w, /uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7-768x421.png 768w, /uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7-600x329.png 600w, /uploads-archive/lc/2021/07/dad4200e1c20e63ed6cd4c6a55873ab7-1536x842.png 1536w" sizes="(max-width: 1582px) 100vw, 1582px" /></p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7914" src="/uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b.png" alt="" width="1340" height="677" srcset="/uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b.png 1340w, /uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b-300x152.png 300w, /uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b-1024x517.png 1024w, /uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b-768x388.png 768w, /uploads-archive/lc/2021/07/88bb08ef6af30b3c8733108054b54c0b-600x303.png 600w" sizes="(max-width: 1340px) 100vw, 1340px" /></p>
<p>その他多種多様なWEBサービスとの連携も容易。</p>
<p>TRELLO、GITHUB、BACKLOGや、ちょっと前に流行ったCLUBHOUSEなどにも連携出来ます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-7912" src="/uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e.png" alt="" width="1601" height="891" srcset="/uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e.png 1601w, /uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e-300x167.png 300w, /uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e-1024x570.png 1024w, /uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e-768x427.png 768w, /uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e-600x334.png 600w, /uploads-archive/lc/2021/07/91fd0dafc44e75092599cc188547c18e-1536x855.png 1536w" sizes="(max-width: 1601px) 100vw, 1601px" /></p>
<p>&nbsp;</p>
<p>今まで少し手間の掛かっていたブラウザテストもこのサービスを使う事でパソコンの容量も気にする事なく容易にチェックが可能となった。</p>
<p>スクリーンショットや動画などの素材化、他のサービスとの連携も非常に簡単である為コーダー以外の人も使いやすいものだと感じました。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2021/11/18

2021/11/12

2021/11/11

2021/11/05

2021/10/30

2021/10/30

2021/10/21

2021/10/16

2021/10/12

2021/10/01

2021/09/04

2021/09/03

2021/09/03

2021/09/03

2021/08/07

2021/08/06

2021/07/02

2021/07/02