こんばんは。 web制作会社への就職を目指している、twitter上の「#駆け出しエンジニアとつながりたい」でおなじみの駆け出しエンジニアのひとりです。2回目の投稿です。例のごとく、間違ったこと書いていたらガッツリ怒ってください。 今回はalign-itemsのことを理解できていないことが分かったので改めて調べてみました。 今回のコードはこんな感じで、これに少しずつ書き足して変化を見ていきました。 <!--html--> <div class="inner1"> <div class="item1">1111111111111111</div> <div class="item2">2</div> <div class="item3">3</div> </div> //sass .inner1{ display: flex; border: solid 1px ; height: 300px; margin-left: 100px; .item1{ background-color:$orange ; display: inline; } .item2{ background-color: $green; } .item3{ background-color: $yellow; } } それでは早速どうぞ！ align-itemsを一言でいうと align-itemsの役割を一言でいうと、フレックスボックス(display:flex;を当てている要素)内部の子要素の位置と大きさ(幅、高さ)を変更することだと思いました。 下記サイトには、align-itemsの説明として「フレックスボックスでは交差軸方向のアイテムの配置を制御します」と書いていました。 https://developer.mozilla.org/ja/docs/Web/CSS/align-items 駆け出しエンジニアの皆さん、交差軸って何?と思いましたよね? 僕も思いました。 交差軸という言葉は①「縦」②「横」の2パターンに読み替えられるようです。 ①フレックスボックス内の要素が横並びの場合、「交差軸」⇒「縦」です。 縦方向での位置を調整できるということです。 ②フレックスボックス内の要素が縦並びの場合、「交差軸」⇒「横」です。 横方向での位置を調整できるということです。 ①と②の場合を再現したのでスクショを貼ります。 ①のパターン フレックスボックス内部の要素が横並びになっていますので、「交差軸」⇒「縦」です。 次にフレックスボックスにalign-items:center;を加えました。 それにより、子要素の位置が縦方向の中央に移動し、大きさがテキストと同じくらいに変化しています。 align-items:center;を加えたことによって、 フレックスボックス内にある子要素の縦方向の位置と大きさが変わったのです。 ②のパターン flex-direction:column;を加え、フレックスボックス内部の子要素を縦並びに変更しました。 フレックスボックス内部の子要素を縦並びになっていますので、「交差軸」⇒「横」です。 次にフレックスボックスにalign-items:center;を加えました。 それにより、子要素の位置が横方向の中央に移動し、大きさがテキストと同じくらいに変化しています。 align-items:center;を加えたことによって、 フレックスボックス内にある子要素の横方向の位置と大きさが変わったのです。 結論 align-itemsはフレックスボックスに当ててあげることで、その内部の子要素の位置を調整できる。 おまけ 位置を調整するプロパティにはalign-selfというもあります。 親要素(フレックスボックス)に対して当てるalign-itemsに対して、align-selfは子要素単体に対してあててあげて、その位置を調整することができます。 黄色のitem3に対して、align-self:flex-end;を当てると、 item3のみ最下部に移動しているのがお分かりでしょうか? その他のitemが中央にあるのは、親要素(フレックスボックス)にあてたalign-items:center;が効いているからです。 align-items はitemに複数形の「s」がついているので複数の子要素に一括で変化を与えるイメージですかね。align-self のselfは「自己」とか「自身」とかいう意味で、子要素「自身」に当てて、変化を与えるというイメージですかね。 頑張って書いたので誰かの参考になれば幸いです。 優しいコメント、厳しいコメントお待ちしています！
こんばんは。 web制作会社への就職を目指している、twitter上の「#駆け出しエンジニアとつながりたい」でおなじみの駆け出しエンジニアのひとりです。2回目の投稿です。例のごとく、間違ったこと書いていたらガッツリ怒ってください。
今回はalign-itemsのことを理解できていないことが分かったので改めて調べてみました。 今回のコードはこんな感じで、これに少しずつ書き足して変化を見ていきました。
<!--html--> <div class="inner1"> <div class="item1">1111111111111111</div> <div class="item2">2</div> <div class="item3">3</div> </div> //sass .inner1{ display: flex; border: solid 1px ; height: 300px; margin-left: 100px; .item1{ background-color:$orange ; display: inline; } .item2{ background-color: $green; } .item3{ background-color: $yellow; } }
それでは早速どうぞ！
align-itemsの役割を一言でいうと、フレックスボックス(display:flex;を当てている要素)内部の子要素の位置と大きさ(幅、高さ)を変更することだと思いました。
下記サイトには、align-itemsの説明として「フレックスボックスでは交差軸方向のアイテムの配置を制御します」と書いていました。 https://developer.mozilla.org/ja/docs/Web/CSS/align-items
駆け出しエンジニアの皆さん、交差軸って何?と思いましたよね? 僕も思いました。
交差軸という言葉は①「縦」②「横」の2パターンに読み替えられるようです。
①フレックスボックス内の要素が横並びの場合、「交差軸」⇒「縦」です。 縦方向での位置を調整できるということです。
②フレックスボックス内の要素が縦並びの場合、「交差軸」⇒「横」です。 横方向での位置を調整できるということです。 ①と②の場合を再現したのでスクショを貼ります。
フレックスボックス内部の要素が横並びになっていますので、「交差軸」⇒「縦」です。
次にフレックスボックスにalign-items:center;を加えました。 それにより、子要素の位置が縦方向の中央に移動し、大きさがテキストと同じくらいに変化しています。
align-items:center;を加えたことによって、 フレックスボックス内にある子要素の縦方向の位置と大きさが変わったのです。
flex-direction:column;を加え、フレックスボックス内部の子要素を縦並びに変更しました。 フレックスボックス内部の子要素を縦並びになっていますので、「交差軸」⇒「横」です。
次にフレックスボックスにalign-items:center;を加えました。 それにより、子要素の位置が横方向の中央に移動し、大きさがテキストと同じくらいに変化しています。
align-items:center;を加えたことによって、 フレックスボックス内にある子要素の横方向の位置と大きさが変わったのです。
align-itemsはフレックスボックスに当ててあげることで、その内部の子要素の位置を調整できる。
位置を調整するプロパティにはalign-selfというもあります。 親要素(フレックスボックス)に対して当てるalign-itemsに対して、align-selfは子要素単体に対してあててあげて、その位置を調整することができます。
黄色のitem3に対して、align-self:flex-end;を当てると、 item3のみ最下部に移動しているのがお分かりでしょうか? その他のitemが中央にあるのは、親要素(フレックスボックス)にあてたalign-items:center;が効いているからです。
align-items はitemに複数形の「s」がついているので複数の子要素に一括で変化を与えるイメージですかね。align-self のselfは「自己」とか「自身」とかいう意味で、子要素「自身」に当てて、変化を与えるというイメージですかね。
頑張って書いたので誰かの参考になれば幸いです。 優しいコメント、厳しいコメントお待ちしています！
Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 参考URL https://jp.vuejs.org/v2/guide/index.html Vue.jsを使用するメリット 気軽に使える： Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。 DOM操作を自動的に行ってくれる： HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。 学習コストが低い： AngularやReactと比較してフレームワークの規模が小さい分、覚えることも少なくて済みます。JavaScriptやjQueryの基礎知識があれば数時間の学習で開発を開始することができるでしょう。 Vue.jsで現在時刻を取得して表示する 初めに全体像を掴んでもらうために、完成品を記述します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ now }}</p> <button v-on:click="time">現在時刻</button> <!-- v-on:event --> </div> <!-- Vue.jsをインストール --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- ここから記述していきます --> <script> let app = new Vue({ el: "#app", data:{ now: "00:00:00" }, methods: { time: function(e){ function(e) var date = new Date(); this.now = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); } } }); </script> </body> </html> 完成品 ここから要素ごとに説明していきます。ちなみにVue.jsは始めたばかりになるので、説明が至らぬところがあればコメントお願いします。 <div id="app"> <p>{{ now }}</p> <button v-on:click="time">現在時刻</button> <!-- v-on:event --> </div> まずはHTMLでのこちら。 {{ }} こちらの記述がJavaScriptのメッセージに自動的に置換してくれます。 v-on v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。 参考URL https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%B3%BC%E8%AA%AD 次にコメントアウトにてscript以降の説明していきます。 let app = new Vue({ el: "#app", //el: "ID要素"を取得します data:{ //こちらのプロパティでHTMLの{{}}を置換します }, }) 次にmethod以降の説明していきます。 let app = new Vue({ el: "#app", data:{ now: "00:00:00" //now: == {{}} }, methods: { time: function(e){ //function(e) この引数eは、eventの「e」 let date = new Date(); //new演算子でオブジェクトのインスタンスを生成 //現在時刻の取得 **ここからはjavascript** this.now = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); } } }); ボタンを押す前 どうでしょうか？ クリックイベントで、現在の時間を取得できましたか？ 私もまだまだ勉強中ですが、書き方自体はシンプルでとてもわかりやすいですよね。 ちなみに私はこちらをYoutubeで見て学習をしました。 是非そちらもご参考までに見てみてください。 Youtube たにぐち まことのともすたチャンネル様 https://www.youtube.com/watch?v=jdcZ3LvTs78
ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
参考URL https://jp.vuejs.org/v2/guide/index.html
DOM操作を自動的に行ってくれる： HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。
学習コストが低い： AngularやReactと比較してフレームワークの規模が小さい分、覚えることも少なくて済みます。JavaScriptやjQueryの基礎知識があれば数時間の学習で開発を開始することができるでしょう。
初めに全体像を掴んでもらうために、完成品を記述します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ now }}</p> <button v-on:click="time">現在時刻</button> <!-- v-on:event --> </div> <!-- Vue.jsをインストール --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- ここから記述していきます --> <script> let app = new Vue({ el: "#app", data:{ now: "00:00:00" }, methods: { time: function(e){ function(e) var date = new Date(); this.now = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); } } }); </script> </body> </html>
ここから要素ごとに説明していきます。ちなみにVue.jsは始めたばかりになるので、説明が至らぬところがあればコメントお願いします。
<div id="app"> <p>{{ now }}</p> <button v-on:click="time">現在時刻</button> <!-- v-on:event --> </div>
まずはHTMLでのこちら。
{{ }} こちらの記述がJavaScriptのメッセージに自動的に置換してくれます。 v-on v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。
参考URL https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%B3%BC%E8%AA%AD
次にコメントアウトにてscript以降の説明していきます。
let app = new Vue({ el: "#app", //el: "ID要素"を取得します data:{ //こちらのプロパティでHTMLの{{}}を置換します }, })
次にmethod以降の説明していきます。
let app = new Vue({ el: "#app", data:{ now: "00:00:00" //now: == {{}} }, methods: { time: function(e){ //function(e) この引数eは、eventの「e」 let date = new Date(); //new演算子でオブジェクトのインスタンスを生成 //現在時刻の取得 **ここからはjavascript** this.now = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); } } });
どうでしょうか？ クリックイベントで、現在の時間を取得できましたか？
私もまだまだ勉強中ですが、書き方自体はシンプルでとてもわかりやすいですよね。
ちなみに私はこちらをYoutubeで見て学習をしました。 是非そちらもご参考までに見てみてください。
Youtube たにぐち まことのともすたチャンネル様 https://www.youtube.com/watch?v=jdcZ3LvTs78
tabキーを連打しても何もフォーカスしない...はてな？ と思っていましたが、absoluteでマイナスをつけまくって端っこにやって見せないようにしていたナビにフォーカスしていました。機械は間違えない。 非表示メニューはフォーカスが当たらないようにする。 最初はdisplay: none;やvisibility:hiddenなどで フォーカスさせない作戦に出ました。しかし問題が... .target { display: absolute; top: 50%; left: -600px; transition: .3s; } .is-active { left: 0; } is-activeクラスをつけたり外したりすることでナビを出現するようにしています。 これにdisplay: none;やvisibility:hiddenで出し分けしてしまうと、 今まですっと出てきてすっと仕舞われるというアニメーションになっていた表示が パっと一瞬で消えたり出てきたりしてしまいます。当然ですね.. JSでガチャガチャしたりCSSのアニメーションであれこれするのも コードが増えてなんか嫌...と思っていましたが、もっと簡単な方法がありました。 tabIndex tabIndex="-1"要素につけるとフォーカスされなくなります。 これを出し分けする方針で行きます。 (ちなみにマイナスの値ならなんでもOKです) 下記はreactでの例です。 <Link to="/" tabIndex={hamburgerToggle.get('flg') ? 'auto' : '-1'} > HOME </Link> スクリーンリーダーも対応させよう tabIndexでフォーカスを無効にしても、スクリーンリーダで読まれてしまいます。 これを読まれないように調節しましょう。属性に`aria-hidden="true"をつけるとスクリーンリーダに読まれなくなります。 非表示にしてもスクリーンリーダー利用者がアクセスしやすいように 非表示ナビへの不要なアクセスを封じ、一件落着！という風ですが、忘れてはいけないことがあると周囲の方に指摘いただきました。ありがたや... ナビを開閉するボタンがスクリーンリーダーにとってわかりにくいものだったら、アクセスする手段が途絶えてしまいます。 開閉ボタンにaria-label属性をつけてナビをナビします。 こうすることで、aria-labelに指定したテキストがスクリーンリーダーに読み上げられます。 <button type="button" onClick={clickhandler} aria-label="ナビ開閉ボタン" >× </button> もっと良い方法や意見等あればぜひコメントよろしくお願いします!
tabキーを連打しても何もフォーカスしない...はてな？ と思っていましたが、absoluteでマイナスをつけまくって端っこにやって見せないようにしていたナビにフォーカスしていました。機械は間違えない。
最初はdisplay: none;やvisibility:hiddenなどで フォーカスさせない作戦に出ました。しかし問題が...
display: none;
visibility:hidden
.target { display: absolute; top: 50%; left: -600px; transition: .3s; } .is-active { left: 0; }
is-activeクラスをつけたり外したりすることでナビを出現するようにしています。 これにdisplay: none;やvisibility:hiddenで出し分けしてしまうと、 今まですっと出てきてすっと仕舞われるというアニメーションになっていた表示が パっと一瞬で消えたり出てきたりしてしまいます。当然ですね..
is-active
JSでガチャガチャしたりCSSのアニメーションであれこれするのも コードが増えてなんか嫌...と思っていましたが、もっと簡単な方法がありました。
tabIndex="-1"要素につけるとフォーカスされなくなります。 これを出し分けする方針で行きます。 (ちなみにマイナスの値ならなんでもOKです)
tabIndex="-1"
下記はreactでの例です。
<Link to="/" tabIndex={hamburgerToggle.get('flg') ? 'auto' : '-1'} > HOME </Link>
tabIndexでフォーカスを無効にしても、スクリーンリーダで読まれてしまいます。 これを読まれないように調節しましょう。属性に`aria-hidden="true"をつけるとスクリーンリーダに読まれなくなります。
非表示ナビへの不要なアクセスを封じ、一件落着！という風ですが、忘れてはいけないことがあると周囲の方に指摘いただきました。ありがたや... ナビを開閉するボタンがスクリーンリーダーにとってわかりにくいものだったら、アクセスする手段が途絶えてしまいます。 開閉ボタンにaria-label属性をつけてナビをナビします。 こうすることで、aria-labelに指定したテキストがスクリーンリーダーに読み上げられます。
aria-label
<button type="button" onClick={clickhandler} aria-label="ナビ開閉ボタン" >× </button>
もっと良い方法や意見等あればぜひコメントよろしくお願いします!
はじめに Webサイトを作って公開するときに、あともう一手間二手間かけるだけで完成度はグンと高まります。 Webサイト公開時に私が実践しているポイントをご紹介します。 アイコンとOGP画像 2種類の画像を用意しましょう。 1つ目はアイコンで、ブラウザのタブに表示されるfaviconや、Progressive Web Apps (PWA)でホーム画面に追加した際のアプリアイコンになります。 iPhoneでホーム画面に追加すると以下のように表示されます。 解像度は512x512で作成しておくと良いでしょう。 2つ目は、SNSなどでURLが貼られると表示されるWebサイトの 以下はSlackにURLを貼ったときの表示例です。 こちらの解像度は1200x630で作成しておくと良いでしょう。 ウェブアプリマニフェスト ウェブアプリマニフェストは、PWA向けのアプリケーション情報を記述するファイルです。 Web App Manifest Generatorで必要な項目を入力し、アイコン画像をアップロードすると、ウェブアプリマニフェストのファイルと必要なサイズのアイコンを精製してくれます。 各項目の詳細についてはMDN等のドキュメントを参照してください。 head要素 faviconの設定や、検索やSNSでシェアされたときに表示されるWebサイトの情報、PWAの設定等をhead要素に書いておきましょう。 設定できる項目が多いため、私が最近作成したアプリでの実装例の紹介に留めますが、これぐらいあれば最低限の用途には耐えられるでしょう。 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#fff" /> <title>ふせんトレーナー</title> <meta name="description" content='デザインセンスを磨く"ふせんトレーニング"のアプリです。' /> <meta property="og:url" content="https://sticky-note-training.vdslab.jp/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="ふせんトレーナー" /> <meta property="og:description" content='デザインセンスを磨く"ふせんトレーニング"のアプリです。' /> <meta property="og:site_name" content="ふせんトレーナー" /> <meta property="og:image" content="https://sticky-note-training.vdslab.jp/ogp.png" /> <meta name="twitter:card" content="summary_large_image" /> <link rel="apple-touch-icon" sizes="192x192" href="./images/icons/icon-192x192.png" /> <link rel="icon" type="image/png" sizes="192x192" href="./images/icons/icon-192x192.png" /> <link rel="manifest" href="./manifest.webmanifest" /> </head> https://github.com/likr/sticky-note-training/blob/master/public/index.html 画像等のパスは皆さんのアプリの状況に応じて適切に設定してください。 ホスティング Webサイトのホスティング先を選ぶ際に押さえておきたいポイントは、HTTPSを必須にできることと自分の所有するドメイン（カスタムドメイン）を設定できることの2つです。 最近では、安全なWebサイトを提供するためにHTTPではなく、HTTPSの使用が推奨されています。 PWAでもHTTPSの使用が推奨されていて、Service Workerなどいくつかの機能はHTTPSでホスティングされていないと動作しません。 カスタムドメインの設定は必須ではありませんが、ブランディングにもつながりますし、Webサイトへの愛着も湧くでしょう。 安いものでは年間1000円程度の金額でドメインを取ることができます。 私はGoogle Domainsでドメインを取っています。 私はWebサイトのデプロイ先として、よくNetlifyを利用します。 無料プランでも、本格的なWebサイトを公開するのに十分な機能を備えています。 Netlifyを使えば上記の2つにも簡単に対応することができます。 公開後のチェック Lighthouseは主にPWAを対象としたWebアプリの監査ツールですが、PWAに限らなくてもモダンなWebサイトに必要なベストプラクティスが詰まっているので、デプロイが完了したら一度チェックしてみましょう。 また、SNS共有の設定が適切にできているか確認するために、TwitterのCard Validatorにかけてみましょう。 問題がなさそうなら、実際にTwitterやSlack等にURLを貼ってみて設定した情報が表示できているか確認してみてください。 おわりに それぞれの項目については、既に詳細な解説などが多く存在しているので、本記事で紹介されたキーワードでわからない点などは個別に調べてみると良いでしょう。 はじめてWebサイトを公開する人などの参考になると幸いです。
Webサイトを作って公開するときに、あともう一手間二手間かけるだけで完成度はグンと高まります。 Webサイト公開時に私が実践しているポイントをご紹介します。
2種類の画像を用意しましょう。
1つ目はアイコンで、ブラウザのタブに表示されるfaviconや、Progressive Web Apps (PWA)でホーム画面に追加した際のアプリアイコンになります。 iPhoneでホーム画面に追加すると以下のように表示されます。 解像度は512x512で作成しておくと良いでしょう。
2つ目は、SNSなどでURLが貼られると表示されるWebサイトの 以下はSlackにURLを貼ったときの表示例です。 こちらの解像度は1200x630で作成しておくと良いでしょう。
ウェブアプリマニフェストは、PWA向けのアプリケーション情報を記述するファイルです。
Web App Manifest Generatorで必要な項目を入力し、アイコン画像をアップロードすると、ウェブアプリマニフェストのファイルと必要なサイズのアイコンを精製してくれます。
各項目の詳細についてはMDN等のドキュメントを参照してください。
faviconの設定や、検索やSNSでシェアされたときに表示されるWebサイトの情報、PWAの設定等をhead要素に書いておきましょう。
設定できる項目が多いため、私が最近作成したアプリでの実装例の紹介に留めますが、これぐらいあれば最低限の用途には耐えられるでしょう。
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#fff" /> <title>ふせんトレーナー</title> <meta name="description" content='デザインセンスを磨く"ふせんトレーニング"のアプリです。' /> <meta property="og:url" content="https://sticky-note-training.vdslab.jp/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="ふせんトレーナー" /> <meta property="og:description" content='デザインセンスを磨く"ふせんトレーニング"のアプリです。' /> <meta property="og:site_name" content="ふせんトレーナー" /> <meta property="og:image" content="https://sticky-note-training.vdslab.jp/ogp.png" /> <meta name="twitter:card" content="summary_large_image" /> <link rel="apple-touch-icon" sizes="192x192" href="./images/icons/icon-192x192.png" /> <link rel="icon" type="image/png" sizes="192x192" href="./images/icons/icon-192x192.png" /> <link rel="manifest" href="./manifest.webmanifest" /> </head>
https://github.com/likr/sticky-note-training/blob/master/public/index.html
画像等のパスは皆さんのアプリの状況に応じて適切に設定してください。
Webサイトのホスティング先を選ぶ際に押さえておきたいポイントは、HTTPSを必須にできることと自分の所有するドメイン（カスタムドメイン）を設定できることの2つです。
最近では、安全なWebサイトを提供するためにHTTPではなく、HTTPSの使用が推奨されています。 PWAでもHTTPSの使用が推奨されていて、Service Workerなどいくつかの機能はHTTPSでホスティングされていないと動作しません。
カスタムドメインの設定は必須ではありませんが、ブランディングにもつながりますし、Webサイトへの愛着も湧くでしょう。 安いものでは年間1000円程度の金額でドメインを取ることができます。 私はGoogle Domainsでドメインを取っています。
私はWebサイトのデプロイ先として、よくNetlifyを利用します。 無料プランでも、本格的なWebサイトを公開するのに十分な機能を備えています。 Netlifyを使えば上記の2つにも簡単に対応することができます。
Lighthouseは主にPWAを対象としたWebアプリの監査ツールですが、PWAに限らなくてもモダンなWebサイトに必要なベストプラクティスが詰まっているので、デプロイが完了したら一度チェックしてみましょう。
また、SNS共有の設定が適切にできているか確認するために、TwitterのCard Validatorにかけてみましょう。 問題がなさそうなら、実際にTwitterやSlack等にURLを貼ってみて設定した情報が表示できているか確認してみてください。
それぞれの項目については、既に詳細な解説などが多く存在しているので、本記事で紹介されたキーワードでわからない点などは個別に調べてみると良いでしょう。 はじめてWebサイトを公開する人などの参考になると幸いです。
100日チャレンジの265日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 265日目は、 おはようございます265日目・webサイト模写 1.0h・以前購入した模写教材のコンテンツ部分作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 17, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 265日目は、
おはようございます265日目・webサイト模写 1.0h・以前購入した模写教材のコンテンツ部分作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 17, 2020
おはようございます265日目・webサイト模写 1.0h・以前購入した模写教材のコンテンツ部分作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
