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

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


[便利なWEBサービスシリーズ]インストールなどの環境構築は不要なクロスブラウザテストサービス

<p><span class="md-plain md-expand">今回は、多くのプログラミング言語の中で、学ぶのに10分もかかりませんが、活用できる分野は本当に様々な言語を一つ紹介しようと思います。それは「</span><span class="md-meta-i-c  md-link"><a href="https://ja.wikipedia.org/wiki/Markdown"><span class="md-plain">markdown</span></a><span class="md-plain">」です！</span><span class="md-entity md-expand" data-content="👏">👏</span></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">markdown とは？</span></h2>
<p class="md-end-block md-p"><span class="md-plain">2004年「ジョン・グルーバー」と「アーロン・スワッツ」により作成されたプレーンテキストフォーマットを基本とした軽量</span><span class="md-meta-i-c  md-link"><a href="https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E8%A8%80%E8%AA%9E"><span class="md-plain">マークアップ言語</span></a><span class="md-plain">です（拡張子は「.md」）。最近はgithubのreadme.mdファイルで多く利用されていますが、自分だけの文書や議事録などを管理する人もたくさんいるそうです。</span></span></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain md-expand">メリット</span></h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">簡単に学べる</span></p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain">プレインテキストよりかっこよく書ける</span></p>
</li>
</ul>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading"><span class="md-plain">基本文法</span></h2>
<h4 class="md-end-block md-heading"><span class="md-plain">1. 見出し</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7891" src="/uploads-archive/lc/2021/06/1_heading-1.png" alt="" width="631" height="192" srcset="/uploads-archive/lc/2021/06/1_heading-1.png 631w, /uploads-archive/lc/2021/06/1_heading-1-300x91.png 300w, /uploads-archive/lc/2021/06/1_heading-1-600x183.png 600w" sizes="(max-width: 631px) 100vw, 631px" /></p>
<h4>2. <span class="md-plain md-expand">ライン</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7892" src="/uploads-archive/lc/2021/06/2_line.png" alt="" width="633" height="91" srcset="/uploads-archive/lc/2021/06/2_line.png 633w, /uploads-archive/lc/2021/06/2_line-300x43.png 300w, /uploads-archive/lc/2021/06/2_line-600x86.png 600w" sizes="(max-width: 633px) 100vw, 633px" /></p>
<h4>3. <span class="md-plain md-expand">強調</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7893" src="/uploads-archive/lc/2021/06/3_emphasis.png" alt="" width="629" height="78" srcset="/uploads-archive/lc/2021/06/3_emphasis.png 629w, /uploads-archive/lc/2021/06/3_emphasis-300x37.png 300w, /uploads-archive/lc/2021/06/3_emphasis-600x74.png 600w" sizes="(max-width: 629px) 100vw, 629px" /></p>
<h4>4. <span class="md-plain md-expand">リスト</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7894" src="/uploads-archive/lc/2021/06/4_list.png" alt="" width="630" height="491" srcset="/uploads-archive/lc/2021/06/4_list.png 630w, /uploads-archive/lc/2021/06/4_list-300x234.png 300w, /uploads-archive/lc/2021/06/4_list-600x468.png 600w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<h4>5. <span class="md-plain md-expand">引用</span></h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7895" src="/uploads-archive/lc/2021/06/5_quote.png" alt="" width="633" height="66" srcset="/uploads-archive/lc/2021/06/5_quote.png 633w, /uploads-archive/lc/2021/06/5_quote-300x31.png 300w, /uploads-archive/lc/2021/06/5_quote-600x63.png 600w" sizes="(max-width: 633px) 100vw, 633px" /></p>
<h4>6. リンク</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7896" src="/uploads-archive/lc/2021/06/6_link.png" alt="" width="705" height="77" srcset="/uploads-archive/lc/2021/06/6_link.png 705w, /uploads-archive/lc/2021/06/6_link-300x33.png 300w, /uploads-archive/lc/2021/06/6_link-600x66.png 600w" sizes="(max-width: 705px) 100vw, 705px" /></p>
<h4>7. イメージ</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7897" src="/uploads-archive/lc/2021/06/7_image.png" alt="" width="753" height="260" srcset="/uploads-archive/lc/2021/06/7_image.png 753w, /uploads-archive/lc/2021/06/7_image-300x104.png 300w, /uploads-archive/lc/2021/06/7_image-600x207.png 600w" sizes="(max-width: 753px) 100vw, 753px" /></p>
<h4>8. テーブル</h4>
<p>Tableのセル項目を中央中央寄せしたい場合は 「&#8211;」の前後に「:」を追加してください。→ | :&#8212;-: | :&#8212;-: |</p>
<p><img loading="lazy" class="alignnone size-full wp-image-7898" src="/uploads-archive/lc/2021/06/8_table.png" alt="" width="749" height="204" srcset="/uploads-archive/lc/2021/06/8_table.png 749w, /uploads-archive/lc/2021/06/8_table-300x82.png 300w, /uploads-archive/lc/2021/06/8_table-600x163.png 600w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<h4>9. <span class="md-plain md-expand">emoji</span></h4>
<p>以下リンクからコードをコピーしてください。</p>
<p><a href="https://www.w3schools.com/charsets/ref_emoji.asp" target="”_blank”" rel="noopener">https://www.w3schools.com/charsets/ref_emoji.asp</a></p>
<p class="md-end-block md-p md-focus"><span class="md-link md-pair-s md-expand" spellcheck="false"><a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="”_blank”" rel="noopener">https://www.webfx.com/tools/emoji-cheat-sheet/</a></span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7899" src="/uploads-archive/lc/2021/06/9_emoji.png" alt="" width="755" height="83" srcset="/uploads-archive/lc/2021/06/9_emoji.png 755w, /uploads-archive/lc/2021/06/9_emoji-300x33.png 300w, /uploads-archive/lc/2021/06/9_emoji-600x66.png 600w" sizes="(max-width: 755px) 100vw, 755px" /></p>
<h4 class="md-end-block md-p">10. code</h4>
<p><img loading="lazy" class="alignnone size-full wp-image-7900" src="/uploads-archive/lc/2021/06/10_code.png" alt="" width="751" height="81" srcset="/uploads-archive/lc/2021/06/10_code.png 751w, /uploads-archive/lc/2021/06/10_code-300x32.png 300w, /uploads-archive/lc/2021/06/10_code-600x65.png 600w" sizes="(max-width: 751px) 100vw, 751px" /></p>
<p>&nbsp;</p>
<p>githubではmarkdown標準から少し変形された「github flavored markdown」（オリジナルmarkdown以外の総称）を支援していますので、もっと勉強したい方はこちらのリンクを参照してください。</p>
<p><a href="https://github.github.com/gfm/">https://github.github.com/gfm/</a></p>
<p><a href="https://guides.github.com/features/mastering-markdown/">https://guides.github.com/features/mastering-markdown/</a></p>
<p>&nbsp;</p>
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">活用編</span></h2>
<h4 class="md-end-block md-heading"><span class="md-plain">github</span></h4>
<p class="md-end-block md-p md-focus"><span class="md-plain">githubでのreadme.mdを作成</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7901" src="/uploads-archive/lc/2021/06/01_github.gif" alt="" width="640" height="400" /></p>
<h4 class="md-end-block md-heading"><span class="md-plain md-expand">vscode</span></h4>
<p class="md-end-block md-p"><span class="md-plain">拡張子が「.md」のファイルを作成</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain">Tip : プリビュー機能を使って書きながら確認できます。(すべてのコマンド「⌘+⇧+P (macOS)」から「markdown」で検索し、「Open Preview」を選択すると新しいタブが表示されます。)</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7902" src="/uploads-archive/lc/2021/06/02_vscode.gif" alt="" width="640" height="400" /></p>
<h4 class="md-end-block md-heading"><span class="md-plain md-expand">typora</span></h4>
<p class="md-end-block md-p"><span class="md-plain">markdownエディタで作成</span></p>
<p class="md-end-block md-p"><span class="md-plain">おすすめのmarkdownエディタtyporaです。</span><span class="md-meta-i-c  md-link"><a href="https://typora.io/" target="”_blank”" rel="noopener"><span class="md-plain">こちら</span></a><span class="md-plain">からダウンロードできます。</span></span></p>
<p class="md-end-block md-p md-focus"><span class="md-meta-i-c  md-link"><a href="https://theme.typora.io/" target="”_blank”" rel="noopener"><span class="md-plain">テーマ</span></a><span class="md-plain">をダウンロードして外観を変えられるので、好みで変えて見てください。（ダウンロードしたテーマを自身でカスタマイズすることもできます！）</span></span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7903" src="/uploads-archive/lc/2021/06/03_typora.gif" alt="" width="640" height="400" /></p>
<p>&nbsp;</p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">以上、markdownのまとめでした。</span></p>
<p class="md-end-block md-p"><span class="md-plain md-expand">ぜひ、皆んなさんも活用して見てください！</span><span class="md-emoji md-expand" data-content="raised_hands">🙌</span>​</p>


markdownまとめ

最近APIで使われるGraphQLについて調べてみました

Symfony2で利用されているDoctrineについて

202005b01.png

Crontabを設定してみた

<p>ベルギーで開発された「Tally(タリー)」というwebサービスは独自のフォームを作成から管理、CSV出力まで一連として完了できるサービスであり、ドキュメントエディタの様な使用感覚によって簡単に使えることが可能となっている。</p>
<p>&nbsp;</p>
<h3>フォームの作成</h3>
<p>ダッシュボードからフォームの作成を選択すると以下のエディタ画面が表示される。</p>
<p>ここではフォームタイトルを決める事とフォームの始め方（１から作成orテンプレートから作成）を選ぶことが可能です。</p>
<p><img loading="lazy" class="size-full wp-image-7473 aligncenter" src="/uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3.png" alt="" width="1352" height="642" srcset="/uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3.png 1352w, /uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3-300x142.png 300w, /uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3-1024x486.png 1024w, /uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3-768x365.png 768w, /uploads-archive/lc/2021/05/b8a340fee1ebfb08c375012b8661bed3-600x285.png 600w" sizes="(max-width: 1352px) 100vw, 1352px" /></p>
<p>１から作成する場合はドキュメントエディタの様に直感的にラベルやフォームパーツを設置することができ、尚且つフォームパーツも入力ボックス、チェックボックス 、ファイルのアップロードなどの一般的なものに加え、決済機能やgoogleスプレッドシート と連携できるものもある為、様々な用途のフォームに対応しています。</p>
<p>また、プレースホルダーも手軽に設定できる為フォームの作成する方も入力する方もより分かりやすい仕様となっています。</p>
<p><img loading="lazy" class="size-full wp-image-7475 aligncenter" src="/uploads-archive/lc/2021/05/5c268210447cc4364851822c137f1c7b.png" alt="" width="519" height="420" srcset="/uploads-archive/lc/2021/05/5c268210447cc4364851822c137f1c7b.png 519w, /uploads-archive/lc/2021/05/5c268210447cc4364851822c137f1c7b-300x243.png 300w" sizes="(max-width: 519px) 100vw, 519px" /></p>
<p><img loading="lazy" class="size-full wp-image-7478 aligncenter" src="/uploads-archive/lc/2021/05/0431f2ced25e15394b960cf4afd23ffd.png" alt="" width="789" height="661" srcset="/uploads-archive/lc/2021/05/0431f2ced25e15394b960cf4afd23ffd.png 789w, /uploads-archive/lc/2021/05/0431f2ced25e15394b960cf4afd23ffd-300x251.png 300w, /uploads-archive/lc/2021/05/0431f2ced25e15394b960cf4afd23ffd-768x643.png 768w, /uploads-archive/lc/2021/05/0431f2ced25e15394b960cf4afd23ffd-600x503.png 600w" sizes="(max-width: 789px) 100vw, 789px" /></p>
<p><img loading="lazy" class="size-full wp-image-7476 aligncenter" src="/uploads-archive/lc/2021/05/31138c46ae0b076ca1b4f5e8ad1fe6ea.png" alt="" width="505" height="368" srcset="/uploads-archive/lc/2021/05/31138c46ae0b076ca1b4f5e8ad1fe6ea.png 505w, /uploads-archive/lc/2021/05/31138c46ae0b076ca1b4f5e8ad1fe6ea-300x219.png 300w" sizes="(max-width: 505px) 100vw, 505px" /></p>
<p>フォームのページを追加したい場合は上のメニューより「page」を選択するとワンクリックで次のページを追加することができます。</p>
<p><img loading="lazy" class="alignnone size-full wp-image-7477" src="/uploads-archive/lc/2021/05/18bc0d50b9600be7e6ea9465908b6334.png" alt="" width="1011" height="847" srcset="/uploads-archive/lc/2021/05/18bc0d50b9600be7e6ea9465908b6334.png 1011w, /uploads-archive/lc/2021/05/18bc0d50b9600be7e6ea9465908b6334-300x251.png 300w, /uploads-archive/lc/2021/05/18bc0d50b9600be7e6ea9465908b6334-768x643.png 768w, /uploads-archive/lc/2021/05/18bc0d50b9600be7e6ea9465908b6334-600x503.png 600w" sizes="(max-width: 1011px) 100vw, 1011px" /></p>
<p>フォームが完成し、フォームを公開する場合は上のメニュー内にある「Publish」を選択します。</p>
<p>この画面では先ほど作成したフォームを共有するためのリンクを生成してくれる事やwebサイトに埋め込むためのコードを生成してくれます。</p>
<p><img loading="lazy" class="size-full wp-image-7479 aligncenter" src="/uploads-archive/lc/2021/05/1331402ec3a625377d778a00caf26990.png" alt="" width="867" height="843" srcset="/uploads-archive/lc/2021/05/1331402ec3a625377d778a00caf26990.png 867w, /uploads-archive/lc/2021/05/1331402ec3a625377d778a00caf26990-300x292.png 300w, /uploads-archive/lc/2021/05/1331402ec3a625377d778a00caf26990-768x747.png 768w, /uploads-archive/lc/2021/05/1331402ec3a625377d778a00caf26990-600x583.png 600w" sizes="(max-width: 867px) 100vw, 867px" /></p>
<p><img loading="lazy" class="size-full wp-image-7480 aligncenter" src="/uploads-archive/lc/2021/05/80b0b6f9a485c19afc087f26c3af9e2b.png" alt="" width="799" height="820" srcset="/uploads-archive/lc/2021/05/80b0b6f9a485c19afc087f26c3af9e2b.png 799w, /uploads-archive/lc/2021/05/80b0b6f9a485c19afc087f26c3af9e2b-292x300.png 292w, /uploads-archive/lc/2021/05/80b0b6f9a485c19afc087f26c3af9e2b-768x788.png 768w, /uploads-archive/lc/2021/05/80b0b6f9a485c19afc087f26c3af9e2b-600x616.png 600w" sizes="(max-width: 799px) 100vw, 799px" /></p>
<p>埋め込んだフォームに実際に入力し、送信ボタンを押すと管理画面の方に「Responses」という項目の中に先ほど入力された情報が表示されます。</p>
<p>また、ここからCSVをダウンロードも可能となっている為、比較的手軽にフォームの導入からCSVの取得までができるということがわかりました。</p>
<p><img loading="lazy" class="size-full wp-image-7485 aligncenter" src="/uploads-archive/lc/2021/05/a037d70b13a4703b798ffc297c9167ab.jpg" alt="" width="960" height="304" srcset="/uploads-archive/lc/2021/05/a037d70b13a4703b798ffc297c9167ab.jpg 960w, /uploads-archive/lc/2021/05/a037d70b13a4703b798ffc297c9167ab-300x95.jpg 300w, /uploads-archive/lc/2021/05/a037d70b13a4703b798ffc297c9167ab-768x243.jpg 768w, /uploads-archive/lc/2021/05/a037d70b13a4703b798ffc297c9167ab-600x190.jpg 600w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<h3>まとめ</h3>
<p>今回「Tally」というフォーム作成webサービスを利用してみて、感じたことはやはりすごく簡単で使いやすいという部分でした。</p>
<p>基本的なフォームパーツは勿論、少し特殊なものも使えたりフォームの簡単なデザインを変更したりと今まで専門知識が必要であったこともこのサービスを利用することによって誰でも手軽にフォームを作成出来るということが検証できました。</p>
<p>管理の部分でも分かりやすいUIでストレスフリーに使える為、例えば簡単なアンケートを作りたいといった際などに作成から公開まで恐らく数分で完結してしまうと思われます。</p>
<p>フォームの公開期間の設定や入力後のメール設定なども可能な為、様々な場面で利用できると感じました。</p>


手軽に独自フォームを作成「Tally」


<p>文字の見やすさや美しさのためにカーニング（文字間隔）はTypographyにおいてとても重要です。<br>かつてWEB上では文字間隔で制御できるのはletter-spacing（等間隔で文字間隔を指定する）に限られ、半ば諦められていた項目でしたが、<br>フラットデザインが浸透し、Typographyの重要性が強くなったことや、text-align: justify;、font-feature-settings: &#8220;palt&#8221;; など文字間隔に関わるCSSの機能が充実してきたことなどで、WEBにおいてもカーニングが重要度を増してきているように感じます。<br>WEBのUIデザインツールとして人気を増しているFigmaでも１文字ごとのカーニングができるようになるなど、ツールの進化にもその重要性が見えてきます。</p>



<p>グラフィックデザインツールの大御所であるPhotoshopやIllustratorでは、カーニングに関する機能が充実しており、自動のオプションでかなり制度の高いカーニングが可能です。<br>ただ、自動オプションであるオプティカルやメトリクスって何だろうと思いながらも何となく使っていたのが正直なところです。</p>



<p>また、CSSで最近使われることの多くなってきた font-feature-settings: &#8220;palt&#8221;; というのも、何となく文字間隔がいい感じになるおまじないのような感覚で使ってきました。</p>



<p>ただ、何となく利用していると、使い方にむらが出たり、間違った使い方をしてしまう恐れもあります。<br>そこで今回、このあたりの機能について調べてみることにしました。</p>



<h2>PhotoshopやIllustratorのカーニングオプションについて</h2>



<h3>メトリクスカーニング</h3>



<p>Adobeの公式マニュアルを参照すると、</p>



<blockquote class="wp-block-quote"><p>メトリクスカーニングまたはオプティカルカーニングを使用すると、自動的に文字をカーニングすることができます。メトリクスカーニング（自動カーニングとも呼ばれます）では、ほとんどのフォントに含まれるペアカーニング情報が使用されます。ペアカーニングには、特定の文字の組み合わせに対する間隔情報が定義されています。この文字の組み合わせには、LA、P、To、Tr、Ta、Tu、Te、Ty、Wa、WA、We、Wo、Ya、Yo などがあります。メトリクスカーニングを使用するように初期設定されているので、テキストの入力または読み込み時に、特定の文字の組み合わせに対して自動的にカーニングが行われます。</p><cite>Adobe Photoshop での行と文字の間隔: <a rel="noreferrer noopener" href="https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html" target="_blank">https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html</a></cite></blockquote>



<p>とのこと。<br>欧文フォント自体に設定されているカーニングの情報を使ってカーニングを調整する方法のようですね。フォントを作った方が設定した情報をもとにカーニングを行うので、利用可能であれば、高い精度のカーニングができそうです。<br>欧文フォントとありますが、OpenTypeのフォントでは和文フォントでもペアカーニングが設定できるようなので、和文フォントでもフォントによっては利用できそうです。</p>



<h3>オプティカルカーニング</h3>



<blockquote class="wp-block-quote"><p>欧文フォントの中には、固有のペアカーニング情報を持っているフォントもありますが、最小限のカーニングしか定義されていないか、まったくカーニングが定義されていないフォントを使用する場合や、1 行内に異なるフォントやサイズを使用している場合は、オプティカルカーニングオプションを使用してカーニングを調整します。オプティカルカーニングでは、文字の形状に基づいて、隣接する文字の間隔が調整されます。</p><cite>Adobe Photoshop での行と文字の間隔: <a rel="noreferrer noopener" href="https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html" target="_blank">https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html</a></cite></blockquote>



<p>上記の通り、メトリクスカーニングはフォント自体に情報が設定されている場合にのみ利用でき、しかも設定されている文字の種類も限られている場合もあるため、フォントの情報に依存せずに設定するためにはオプティカルカーニングを利用する必要があるようです。<br>文字の種類の多い和文フォントではペアカーニングが設定されていない組み合わせも多そうですので、こちらを使うほうがいいかもしれません。</p>



<h3>プロポーショナルメトリクス</h3>



<p><a rel="noreferrer noopener" href="https://note.com/kyonskmt/n/n844b20b7f58b" target="_blank">こちらの記事（少しの工夫でグッと良くなる！タイポグラフィTIPS｜kyon｜note）</a>で紹介されているのを見て初めて知りましたが、OpenTypeで選択できるカーニングの機能で、日本語特有の文字幅や仮想ボディを考慮した自動も自爪で、日本語のデザインではぜひ使いたいカーニング方法です。</p>



<h2>font-feature-settings: &#8220;palt&#8221; とは？</h2>



<p>フォントデータとして使われることの多いOpenTypeのフォントですが、このOpenTypeには文字の形以外にもたくさんの情報が内蔵されています。<br>その中でも拡張タイポグラフィの機能を有効化して利用できるのが、font-feature-settingsです（参考: <a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings" target="_blank">font-feature-settings &#8211; CSS: カスケーディングスタイルシート | MDN</a>）。<br>OpenTypeの設定なので、基本的にはOpenTypeを利用したときでなければ利用できません。（※ OpenTypeやTrueTypeを圧縮することで生成されるWEBフォント用のフォントデータであるWOFFやWOFF2もフォントによってはFireFoxでは利用できるようです（参考: <a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/Guide/WOFF" target="_blank">WOFF (Web Open Font Format) &#8211; 開発者ガイド | MDN</a>）。</p>



<p>&#8220;palt&#8221;は別名を Proportional Alternate Widths と呼び、それぞれの文字の幅に合わせてカーニングを調整する機能で、和文フォントで威力を発揮します（参考: <a rel="noreferrer noopener" href="https://docs.microsoft.com/en-us/typography/opentype/spec/features_pt#tag-palt" target="_blank">Registered features, p-t (OpenType 1.8.4) &#8211; Typography | Microsoft Docs</a>）。</p>



<p>文字詰め方法としては、PhotoshopやIllustratorのOpenType用の設定で利用できるプロポーショナルメトリクスと近い仕組みのようです。<br>日本語の場合、文字の種類や大きさが複雑なので、利用できるのであれば利用したい機能です。</p>



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



<ul><li><a rel="noreferrer noopener" href="https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html" target="_blank">Adobe Photoshop での行と文字の間隔</a></li><li><a rel="noreferrer noopener" href="https://note.com/kyonskmt/n/n844b20b7f58b" target="_blank">少しの工夫でグッと良くなる！タイポグラフィTIPS｜kyon｜note</a></li><li><a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings" target="_blank">font-feature-settings &#8211; CSS: カスケーディングスタイルシート | MDN</a></li><li><a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/Guide/WOFF" target="_blank">WOFF (Web Open Font Format) &#8211; 開発者ガイド | MDN</a></li><li><a rel="noreferrer noopener" href="https://docs.microsoft.com/en-us/typography/opentype/spec/features_pt#tag-palt" target="_blank">Registered features, p-t (OpenType 1.8.4) &#8211; Typography | Microsoft Docs</a></li><li><a href="https://www.morisawa.co.jp/culture/dictionary/1938" target="_blank" rel="noreferrer noopener">プロポーショナルメトリクス | フォント用語集 | 文字の手帖 | 株式会社モリサワ</a></li></ul>




「何となく」やっているWEBまわりのカーニングに関する機能について調べ直してみました

Reactで使えるスライダー、React Slickのご紹介

taxjar.jpeg

TaxJar API連携

<p>WordPress Tavernは3月26日(米国時間)、「<a href="https://wptavern.com/wordpress-to-drop-support-for-ie11-in-upcoming-5-8-or-5-9-release">WordPress Considers Dropping Support for IE 11 After Usage Falls Below 1% &#8211; WordPress Tavern</a>」において、今後リリース予定のWordPress 5.8か、もしくはWordPress 5.9でサポート終了の対象となるとされている。</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="size-full wp-image-7024 aligncenter" src="/uploads-archive/lc/2021/04/4f1c68030428135801ee87aa3cfdbaba.png" alt="" width="1010" height="775" srcset="/uploads-archive/lc/2021/04/4f1c68030428135801ee87aa3cfdbaba.png 1010w, /uploads-archive/lc/2021/04/4f1c68030428135801ee87aa3cfdbaba-300x230.png 300w, /uploads-archive/lc/2021/04/4f1c68030428135801ee87aa3cfdbaba-768x589.png 768w, /uploads-archive/lc/2021/04/4f1c68030428135801ee87aa3cfdbaba-600x460.png 600w" sizes="(max-width: 1010px) 100vw, 1010px" /></p>
<h6 style="text-align: center;">「WordPress Considers Dropping Support for IE 11 After Usage Falls Below 1% &#8211; WordPress Tavern」</h6>
<p>&nbsp;</p>
<p>Webブラウザ全体に対してIE11のシェアが1%を下回った場合、WordPressはサポートの終了を検討する方針でおり、Microsoftは既にIE11の使用継続を推奨しておらず、Microsoft 365では2021年8月でIE11のサポートが終了される予定となっている。</p>
<p>またそれ以外にもIE11自体のサポートが終了していたり、WordPressの管理画面上で警告を行なっている等があげられる。</p>
<p>先ほどあげたwebブラウザのシェア率ですが、全世界でのInternet Explorerのシェアは1%を下回る結果となっており、また日本では現在3.45%という事で、少なくとも日本のユーザーにとっては影響があると思われる。</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="alignnone size-full wp-image-7025" src="/uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117.png" alt="" width="1270" height="296" srcset="/uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117.png 1270w, /uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117-300x70.png 300w, /uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117-1024x239.png 1024w, /uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117-768x179.png 768w, /uploads-archive/lc/2021/04/8478a4a24c3471578139ca2e9bcc1117-600x140.png 600w" sizes="(max-width: 1270px) 100vw, 1270px" /></p>
<p><img loading="lazy" class="alignnone size-full wp-image-7026" src="/uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102.png" alt="" width="1280" height="720" srcset="/uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102.png 1280w, /uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102-300x169.png 300w, /uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102-1024x576.png 1024w, /uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102-768x432.png 768w, /uploads-archive/lc/2021/04/StatCounter-browser-ww-monthly-202002-202102-600x338.png 600w" sizes="(max-width: 1280px) 100vw, 1280px" /></p>
<h6 style="text-align: center;">StatCounter GlobalStats</h6>
<p>&nbsp;</p>
<p>しかしながらWordPressを使用する際にInternet Explorerに対応するという作業が恐らく今後は減っていくという事が大きな変化だと感じた。</p>


WordPress Internet Explorer 11のサポートを終了を検討

<p>今回紹介しますサービスは「SyncTube」というものでYoutubeにアップされている動画を同時に視聴できるというものであり、尚且つチャット機能も付いているという事で、例えば動画の修正をお願いしたい場合などクライアントと作業者が情報の共有をより正確に行えるのではないかと感じ、紹介します。</p>
<h3>使い方</h3>
<p>とてもシンプルで誰でも簡単に利用する事ができる点がこのサービスのメリットとなっており、<br />
まず「create room」か「browse rooms」を選択し、部屋を作るか入るかを選びます。</p>
<p><img loading="lazy" class="size-large wp-image-6595 aligncenter" src="/uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-1024x541.png" alt="" width="1024" height="541" srcset="/uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-1024x541.png 1024w, /uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-300x159.png 300w, /uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-768x406.png 768w, /uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-600x317.png 600w, /uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e-1536x812.png 1536w, /uploads-archive/lc/2021/03/dd68e27beed2909990e15ab3507de43e.png 1623w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h4>「create room」を選択した場合</h4>
<p>
同時視聴したいYouTube動画のURLを上にある「Enter Youotube URL here」と書いてあるフォームにコピー＆ペーストすると動画が読み込まれます。</p>
<p><img loading="lazy" class="size-large wp-image-6596 aligncenter" src="/uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-1024x544.png" alt="" width="1024" height="544" srcset="/uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-1024x544.png 1024w, /uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-300x159.png 300w, /uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-768x408.png 768w, /uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-600x319.png 600w, /uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92-1536x816.png 1536w, /uploads-archive/lc/2021/03/bad3a810521dfe7c727767560624fb92.png 1685w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
Settingsの部分ではユーザー名やユーザーカラー、部屋の公開・非公開設定、部屋の名前などを変更することができます。部屋を非公開にすると、URLを共有していない相手は部屋を見つけることができなくなりますが、URLを共有した相手は入室することができます。<br />
作成した部屋を共有したい場合はブラウザのURLをコピーし、相手等に渡すことによって簡単に共有する事ができます。<br />
また、共有されたユーザーもsettingsからユーザー名やユーザーカラーの変更が可能です。</p>
<p><img loading="lazy" class="size-large wp-image-6597 aligncenter" src="/uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6-1024x608.png" alt="" width="1024" height="608" srcset="/uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6-1024x608.png 1024w, /uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6-300x178.png 300w, /uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6-768x456.png 768w, /uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6-600x356.png 600w, /uploads-archive/lc/2021/03/c0a5c2010d168d10a5881e38a057d2b6.png 1422w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>右側のチャットスペースではリアルタイムでコメントや絵文字なども送る事ができるため、認識のズレ等が生じにくいと思います。<br />
デフォルトでは作成者のみがムービーの再生や停止、入室者のBANなどを行うことができますが、部屋の作成者は設定画面から参加しているユーザーの権限設定を変更することが可能です。</p>
<p><img loading="lazy" class="size-full wp-image-6598 aligncenter" src="/uploads-archive/lc/2021/03/acdb7b59341b1dd1a0bac725d76023e4.png" alt="" width="380" height="674" srcset="/uploads-archive/lc/2021/03/acdb7b59341b1dd1a0bac725d76023e4.png 380w, /uploads-archive/lc/2021/03/acdb7b59341b1dd1a0bac725d76023e4-169x300.png 169w" sizes="(max-width: 380px) 100vw, 380px" /><br />
もちろんスマートフォンからの参加も可能となっているため、出先などパソコンを広げられない状況でもコメント（指示など）を送る事が可能となっています。</p>
<h4>「browse rooms」を選択した場合</h4>
<p>
いくつかオープンになっている部屋がありますが、基本海外の物が多くあまり使用する機会はなさそうと感じました。</p>
<p><img loading="lazy" class="size-large wp-image-6599 aligncenter" src="/uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555-1024x777.png" alt="" width="1024" height="777" srcset="/uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555-1024x777.png 1024w, /uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555-300x228.png 300w, /uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555-768x583.png 768w, /uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555-600x455.png 600w, /uploads-archive/lc/2021/03/57483841eecb6b4a97c4acca8c9e2555.png 1181w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>
本来、自分のお気に入りの動画を友達などと一緒に視聴するという目的のサービスですが、動画依頼のチェックにも使えそうという事で今回紹介させて頂きました。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2021/09/03

2021/09/03

2021/09/03

2021/08/07

2021/08/06

2021/07/02

2021/07/02

2021/06/30

2021/06/05

2021/06/04

2021/05/14

2021/05/14

2021/05/14

2021/04/03

2021/04/03

2021/04/02

2021/03/06

2021/03/03