プログラミング勉強用です ラジオボタンを作ってる時写真のような状態になり、どうしてだろうと苦戦しました 原因は・・・ name属性が違っていたのです name = 同じ値にしなければいけなかったんですね・・・ これに1時間くらい格闘してたんで、分かった時の感動すごかったです。
概要 djangoの値をhtmlに渡すために必要なviewsの書き方を調べてきたので、よければお役に立ててください。また、ある程度djangoを触ってる人向けに書いてあります。 開発環境 Mac djagno=3.2.1 python=3.9.1 きっかけ viewsからhtmlに値を渡す際に、querysetが表示されてしまって、なかなか自分の思い通りにならなかったので、忘備録兼、記事にしたいと思います。 views.pyの書き方 まずは、関数での値の渡し方 ()の中の数字はそれと同じものを指しています。 views.py def hello(request): hello(①) = "Hello World" context = { 'hello'(②): hello(①) } return render(request, 'hello.html', context) hello.html <!DOC... <body> <h1>{{ hello(②) }}</h1> </body> このcontextというのに入れるのが基本系だと思います。また、辞書型で渡さないとエラーになってしまうため、このような書き方をしています。公式ドキュメント通りだとこの書き方だと思います。また、models.pyを作って、簡単にadmin.pyで表示、編集。それの値を受け取り、関数を使って、値を渡してみます。 admin.pyで保存したのは id = 1 = Hello World id = 2 = Goodbye World の2つです。1つしか表示しない場合はfor文はいらないですが、せっかくなので、同時に紹介したいと思います。 models.py class Greetings(models.Model): greeting = models.CharField(max_length=20) views.py def greeting(request): greetings = Greetings.objects.all() context = { 'greetings'(①): greetings, } return render(request, 'greeting.html', context) hello.html {% for greeting(②) in greetings(①) %} <h1>{{ greeting(②) }}</h1> 次は汎用ビューでの値の渡し方です。greeting.htmlの中身は上のものと一緒です。 models.py class Greetings(models.Model): greeting = models.CharField(max_length=20) views.py class GreetingView(TemplateView): model = Greetings template_name = 'greeting.html' #この関数が、classからhtmlに値を渡すおまじないになります。２行目まではほとんど一緒だと思います。 def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['greetings'] = Greetings.objects.all() return context こうすると、Hello World と GoodBye World が一緒に表示されます。 また、汎用ビューでもDetailViewを使う際は、id毎に別々のgreetingを呼ぶことができます。 自分でも確認ができてよかったです。次は、modelのフィールドについて話してみようと思います。
どうも7noteです。メモ帳でwebサイトが作りにくい理由を徹底解説。初心者よ有名エディタを使え！ コーディングやプログラミングをする際に必須ともいえるのが「エディタ」。 もちろんメモ帳でもコーディングやプログラミングができますが、エンジニアとして働いている人やyoutubeなどの動画で解説している人たちはそれぞれエディタを使っているのでしょうか？ それはメモ帳ではコーディングがしにくいからです。 特に今回はweb制作に焦点を当てて、メモ帳の使いにくさを解説。 なぜメモ帳だとwebサイトを作りにくいのか。 「単色だから識別しにくい」 メモ帳では白背景に黒一色です。（設定でかえれるかもですが。） しかし大概のエディタはHTML要素やCSSに色が付いて識別しやすくなっています。 （他エディタの例） 「不可視文字が見えない」 「(半角スペース)」 「 (全角スペース)」 「(TAB)」 「(改行位置)」 これらの要素が全く見えません。真っ白です。そのため余計なスペースが入っているなどに気づかず表示が崩れてしまい、原因がわからないまますっと悩んでしまうみたいなことになってしまいます。 「拡張ツールが使えない」 インデントも自動で揃わない 好きなようにカスタマイズもできない Emmentで短縮入力できない（「div」のあとにTABキーを押すと<div></div>が自動入力される等） こんなエディタ使えません（泣） メモ帳を卒業したいならこのエディタがオススメ！ 好みにもよりますが、様々な調査やTwitterアンケートで人気なのは「Visual Studio Code」ですね。 他のアンケートなんかを見てもほとんど1位は「Visual Studio Code」でした。 いろいろ試してみて、自分なりに納得のいくエディタを使いましょう！ 結論 「メモ帳でもweb制作はできる。・・・が、既存の有名ブラウザよりも開発しにくいので開発ストレスがたまるし効率も悪い。」 メモ帳でも開発やweb制作はできます。はじめうちはお試しでメモ帳で作成するところから初めて見るのは全然OKだと個人的には思います。 ただずっとメモ帳で開発し続けている人にはまだあったことがないのでやはり本格的に取り組んでいくのであれば何かしらのエディタは必要になってくると思います。 経験者さんがもし読まれていましたら、オススメのエディタなどぜひコメントください。誰かの助けになるかもしれません。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
前回の記事でBootstrapの導入について記述したので、 今回は超簡単な使い方に触れます。 題材として新規ユーザー登録画面のフォーム周りに変化を加えていきましょう。 まずは最低限の部品だけ設置します(HTMLのみ) sample.html <h2>新規ユーザー登録</h2> <div><input type="text" name="account" placeholder="アカウント名"></div> <div><input type="text" name="name" placeholder="ユーザー名"></div> <div><input type="password" name="password" placeholder="パスワード"></div> <div><input type="password" name="passwordConfirm" placeholder="パスワード確認"></div> <input type="submit" value="ユーザー新規登録"/> 画面表示させるとこのような形 １．テキスト位置の変更 classに「text-center」を追加します。 sample.html <h2>新規ユーザー登録</h2> <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> ~以下略~ これでform内のplaceholderの文字が中心に位置されました。 右詰めでも良い気がしてきました...。その際は「text-right」で、左なら「text-left」で変更できます。 このように一つ掴んでしまえばcssファイルを触らずとも直感的に変更できるのが嬉しいですね。 ２．間隔を調整 このままだとそれぞれのフォームにおける役割・制約が明記されていない不親切なもののままですね。 ということでformの下の行に注釈を追加します。 sample.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div>ログインに使うアカウント名です。</div> ~以下略~ 気になる点が一気に増えましたね。順を追って変更を加えますからせっかちな人は少し待ってね。 注釈divにclass「mb-2」を追加します。 sample.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div class="mb-2">ログインに使うアカウント名です。</div> ~以下略~ 画面の薄い橙色の部分が今調整を加えた間隔です。 mb-2を記述しましたが「2」の部分は間隔の大きさを表しますので更に幅が欲しい場合は適宜数字のみ変えるだけです。 「mb」の部分はどこに間隔を与えるか指定してるだけです。cssを書いたことがある人ならすぐピンとくるでしょう。「margin-bottom」の略なので上部は「mt」、右や左は「mr」「ml」で指定できます。 逆に指定なく全周に間隔を与えたければ「m-2」と書けばよいわけです。so easy. 感のいい人ならもうお気づきでしょうがpaddingも同じ要領ですが全く同じように...とは行かないので要注意。今回は省略しますが気になる人は調べてね。 3.文字の大きさを調整 現状だとフォームより注釈のほうが主張が大きくて一体どちらが主役なのかわからないですね。 とりあえずclassに「small」を追加してみましょう。 signup.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div class="mb-2 small ">ログインに使うアカウント名です。</div> ~以下略~ 比較のために新旧を並べてみました。 文字サイズの変更によっていい感じのバランスになってきましたね。 4.登録ボタンの装飾 最初に比べたら最低限の調整はいいような気がします。 がここはせっかくなので動きのあるボタンを実装してみましょう。 送信ボタンのinputにclass「btn btn btn-outline-primary」を追加してみましょう。 signup.html ~送信ボタン以外省略~ <input class="btn btn-outline-primary" type="submit" value="ユーザー新規登録"/> 左が表示させただけで右がボタンにカーソルを合わせた状態です。 「btn」だけだと外線もなければ動きもないものです。 「btn-outline-primary」も組み合わせることで外線・角Rやカーソルをあわせた時の動きが実現されるのです。 他にもbtnだけでも様々な変化が実現できるのでこだわり派の方は是非とも調べてカッチョいいボタン設置してみてください。 以上で簡単なform周りをBootstrapで調整・装飾してみました。form-controlを用いてlabel周りの実装や背景色・文字色などまだまだ触る要素があります。 また、form以外にもnavリンクで便利なものが発見できてワクワクしている私としては、時間が無限にあればいくらでも弄り倒したい魅力があります。 今回は私に近い初学者向けをターゲットとしましたのでいくつか省きました。 さらなる機能や発見があればまた記事にしようかなと思っています。 以上。
rel="noopener noreferrer"持つけるといいみたい というのは、target="_blank"で新規タブを開いた後のページで、リンク元の中身を書き換えることができるらしい <a href="リンク" target="_blank" rel="noopener noreferrer"> aiueo </a>
※自分のための備忘録記事です。 エディタはVSCodeを使用しています。 複数行をdiv等のタグで囲いたい時 ①囲いたい行を選択する。 ②コマンドパレットを[Ctrl] + [Shift] + [P]で開く。 ③wrap with abbreviationと入力する。 ④div等タグを入力する。（Emmetの入力方法が使える。) 参考記事 【VSCode】まずはこれを覚えよう！初心者のためのショートカット２９選！【Mac/Win】 Visual Studio Code - コマンドパレットとナビゲーション
画像を正方形に加工した上で、フレックスレイアウトを組んでみる。 対象者 cssの参考書をひととおり読んだ後の人 横並びと縦並びのレイアウトの具体的な作り方を知りたい人 注意 特別な理由がなければchromeをつかって試してください。 やろうとしていること 画像を正方形に加工する 要素を横に三等分きれいに配置する。 画面の横幅が狭くなった時に縦並びに変更する（横並びにする） 完成イメージ（左：全画面表示 右:スマホ表示） 具体的なコード sample/ ├ index.html ├ main.css └ images/ └ apple.jpg └ color.jpg └ dish.jpg index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample</title> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="flex-wrapper"> <div class="square1 square"><img src="./images/apple.jpg" alt=""></div> <div class="square2 square"><img src="./images/color.jpg" alt=""></div> <div class="square3 square"><img src="./images/dish.jpg" alt=""></div> </div> </body> </html> 解説 基本的なhtmlの雛形を書いた後に、画像をflex-wrapperクラスでかっこんでいます。画像には後でcssが当てれるようにsquareクラスを付けています。 main.css @charset 'utf-8'; /* ここでｃｓｓをリセットしていくよ */ body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } /* リセットｃｓｓはここまでだよ */ /* ここからレイアウト */ .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } /* 画面幅の750px以下になったときのcss */ @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 解説 cssのリセット cssは標準ではブラウザによってデフォルトのcssが当てられています。 そのままにしておくと余分な空白が生まれたり、装飾が施されたりするため、初めにcssをリセットしていきます。 body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } レイアウト ここでは重要なプロパティを解説していきます .flex-wrapper ここで要素を横並びにしています。 .square widthを計算プロパティによってきれいに三等分しています。 .square img aspect-ratio によって要素の比を1対1に変更して要素にぴったりと当てはまるように object-fit:coverを設定しています .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } レスポンシブ 画面幅が750px以下になった時に適用されるcssを設定しています。 .square 要素が画面いっぱいに広がるようにwidth:100%にしています。 .flex-wrapper flex-direction:column にすることで要素を縦並びに変更しています。 @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 最後に わからないプロパティがあったときは qiita で検索してみてください。 とてもわかりやすい記事がたくさんあるので参考になると思います。 不明点や間違いがあったときは twitter : @kappa_tinpan にリプライもしくはDMしてください。 可能な範囲で対応します。
正方形の要素でフレックスレイアウトを組んでみる。 対象者 cssの参考書をひととおり読んだ後の人 横並びと縦並びのレイアウトの具体的な作り方を知りたい人 注意 特別な理由がなければchromeをつかって試してください。 やろうとしていること 正方形の画像を横に三等分きれいに配置する。 画面の横幅が狭くなった時に縦並びに変更する（横並びにする） 完成イメージ（右：全画面表示 左スマホ表示） 具体的なコード sample/ ├ index.html ├ main.css └ images/ └ apple.jpg └ color.jpg └ dish.jpg index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample</title> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="flex-wrapper"> <div class="square1 square"><img src="./images/apple.jpg" alt=""></div> <div class="square2 square"><img src="./images/color.jpg" alt=""></div> <div class="square3 square"><img src="./images/dish.jpg" alt=""></div> </div> </body> </html> 解説 基本的なhtmlの雛形を書いた後に、画像をflex-wrapperクラスでかっこんでいます。画像には後でcssが当てれるようにsquareクラスを付けています。 main.css @charset 'utf-8'; /* ここでｃｓｓをリセットしていくよ */ body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } /* リセットｃｓｓはここまでだよ */ /* ここからレイアウト */ .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } /* 画面幅の750px以下になったときのcss */ @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 解説 cssのリセット cssは標準ではブラウザによってデフォルトのcssが当てられています。 そのままにしておくと余分な空白が生まれたり、装飾が施されたりするため、初めにcssをリセットしていきます。 body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } レイアウト ここでは重要なプロパティを解説していきます .flex-wrapper ここで要素を横並びにしています。 .square widthを計算プロパティによってきれいに三等分しています。 .square img aspect-ratio によって要素の比を1対1に変更しています。 要素にぴったりと当てはまるようにobject-fit:coverを設定しています .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } レスポンシブ 画面幅が750px以下になった時に適用されるcssを設定しています。 .square 要素が画面いっぱいに広がるようにwidth:100%にしています。 .flex-wrapper flex-direction:column にすることで要素を縦並びに変更しています。 @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 最後に わからないプロパティがあったときは qiita で検索してみてください。 とてもわかりやすい記事がたくさんあるので参考になると思います。 不明点や間違いがあったときは twitter : @kappa_tinpan にリプライもしくはDMしてください。 可能な範囲で対応します。
Basic認証付きの静的サイトを物凄く簡単にサーバレス（AWS）で公開出来る事を知ったので、やってみた形式で紹介したいと思います。 具体的にはAWSのAmplifyConsoleを使います。 一般的にAWSで静的サイトにBasic認証をかけたい場合、S3 + CloudFront + Lambda@edgeで実現するかな、と思いますが、それより100倍くらい楽です。 ざっくりしたイメージで下図のような感じでサイトを公開出来ます。 【前提】 GitHubのアカウントを持っている。基本的な操作が出来る AWSアカウントを持っている 独自ドメインを購入済みである 記事中ではお名前.comで購入したドメインを使用します AmplifyConsoleなどの単語を初めて聞いた人でも大丈夫です この記事でやる事 静的サイトのHTMLをGitHubにpushする GitHubとAWS Amplify Consoleを紐づける（これだけでサイトが公開されます） Basic認証をかける ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する 独自ドメインとHTTPS化の設定をする 作業時間自体は15分ぐらい、設定の反映の待ち時間含めて30分ぐらいとなります。 ※「5. 独自ドメインを設定する」の作業で、待たされる時間が発生します。 1. 静的サイトのHTMLをGitHubにpushする ここからは、index.htmlのみの簡素なサイトを例に、Basic認証付きで公開する作業をして行きます。 【作業】 1-1. ローカル環境に静的サイトを準備する 1-2. GitHubにリポジトリを作成しコードをpushする 1-1. ローカル環境に静的サイトを準備する ローカル環境にstatic-siteフォルダを作り、index.htmlを下記内容で作成します（説明を容易にするため簡素なHTMLを使用しています）。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello,world!</h1> </body> </html> 1-2. GitHubにリポジトリを作成しコードをpushする GitHub上にstatic-siteと言う名前でリポジトリを作成したら上記のコードをpushします。 2. GitHubとAWS Amplify Consoleを紐づける AWSのマネジメントコンソールにログインします。 サービスの検索窓に「Amplify」と入力します。「AWS Amplify」へと移動します。 下記画面に遷移したら、右上のオレンジの「New App」ボタンをクリックします。更にボタンが現れるので「Host web app」をクリックします。 ※初めてこの画面に来た人は、「すべてのアプリ」が空の状態になっているかと思います。 下記画面にしたらGitHubを選択して右下の「Continue」をクリックします。 ここでGitHubのアカウントとの紐付けを行います。紐付けの作業は初回のみです。画面の指示に従って頂くと紐付け作業を完了出来るかな、と思います。 紐付け完了後は下記画面となります。 「リポジトリ」のセレクトボックスをクリックします。GitHub上のリポジトリの一覧が現れるので、先ほど作成したリポジトリを選択します。 更にブランチを選びます。 作業したブランチを選択して下さい。 私の場合はブランチ名をリネームしたのでmainブランチですが、masterのまま作業をしている方はmasterが表示されるかと思います。その場合は、masterを選択して下さい。 選択出来たら「次へ」をクリックします。 下記画面に遷移します。何も変更を加えずに「次へ」をクリックします。 ※画面上の「ビルドの設定」の項目に警告のマークがついているのが気になるかと思いますが、無視して大丈夫です。VueやReactなどのビルドを伴うサイトを扱う際には、編集を行います。今回は不要です。 下記画面に遷移したら「保存してデプロイ」をクリックします。 サイトの公開設定は以上です。 下記画面のようにプロビジョン、ビルド、デプロイ、検証に全てチェックが入るのを待ちます（２〜３分ぐらい）。 サイトのURLが発行されます。 URLをクリックしてサイトを確認します。 GitHubにpushしたHTMLが表示されている事を確認出来ます。 3. Basic認証をかける 左のメニューより「アクセスコントロール」を選択し、遷移した画面で右上にある「アクセス管理」をクリックします。 下記画面に遷移します。ここでBasic認証のユーザー名とパスワードを設定出来ます。ユーザー名とパスワードを入力したら「Save」をクリックします。 公開したサイトをもう一度開くと（もしくはリロードすると）Basic認証のダイアログが現れます。 設定したユーザー名とパスワードを入力すると、サイトが表示されます。 4. ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する サイトの更新は「ローカルで更新作業をする」 → 「GitHubにpushする」 → 「Amplify Consoleがpushを検知して自動で更新してくれる」と言う流れになります。 実際に見て行きます。 ローカルにあるstatic-site/index.htmlをエディタで開き下記のように変更します。 （pタグを適当な内容で追加しただけです。） <h1>Hello,world!</h1> <p>hellohellohellohellohellohellohello</p> 変更を保存したら、GitHubに変更をpushします。 マネジメントコンソールに戻ると、再びプロビジョニングが始まっている事を確認出来ます。 全てチェックが入ると更新完了です。 更新内容が反映された事を確認します。 HTMLファイルを手動であげる作業は発生しません。 それっぽい言葉を使うとCICDのCDを実現している状態です。 （参考）CIとCDの違い 5. 独自ドメインとHTTPS化の設定をする Basic認証同様に簡単に独自ドメインの設定も出来ます。 例として予めお名前ドットコムで購入した「staticsite.work」と言うドメインを公開したサイトにくっつけて行きます。 【作業】 5-1. Route53でホストゾーンの登録 5-2. お名前.comでネームサーバーの設定 5-3. Amplifyコンソールでカスタムドメインの追加 5-1. Route53でホストゾーンの登録 Route53に移動して「ホストゾーンの作成」をクリックします。 ドメイン名に取得したドメインを入力して「ホストゾーンの作成」をクリックします。繰り返しになりますが、例では「staticsite.work」と言うドメインの設定をしています。 5-2. お名前.comでネームサーバーの設定 作成したホストゾーン（staticsite.work）クリックします。 下記画像で網掛けしている4つのURLを、お名前.comに登録して行きます。 別タブでお名前.comの管理画面を開き、ログインします。 「TOP」に移動して「ネームサーバーの設定をする」をクリックします。 下図のように購入したドメインにチェックを入れます。 更に「2.ネームサーバーの選択」項目で「その他」タブをクリックします。 ネームサーバー1~4までを先ほどの画像で網掛けした部分に対応するように1行ずつコピペして行きます。1~4まで埋め終わったら「確認」を押します。 5-3. Amplifyコンソールでカスタムドメインの追加 Amplifyの画面に戻ります。 お名前.comとRoute53での作業は終了です。 左メニューの「ドメイン管理」を選択して現れた画面の右上にある「カスタムドメインの追加」をクリックします。 ドメインの検索ボックスをクリックすると、Route53に登録したドメインの一覧が現れるので、先ほど登録したドメインを選択します。 更に「ドメインの検索」をクリックします。下記のようにサブドメインの項目が現れます。画像中の「main」の部分は紐付けているGitHubのブランチ名となります。なので、「master」ブランチを使っている方は「master」が表示されているはずです。 またサブドメインも自由に設定出来ます。デフォルトでは「www」となっていますが、お好きなものに変更する事可能です（後から変更出来るので一旦wwwのまま作ってみるのが良いかな、と思います）。 「保存」をクリックします。 下記画面に遷移します。 設定が反映されるのを待ちます（15分ぐらい）。 ドメインの設定だけではなくHTTPS化も自動でしてくれます。 設定が終わると下記のような画面に変わります。 ブラウザのアドレスバーに登録したドメイン（www.staticsite.work）を入力するとサイトが表示されます。 以上です。 終わりに 下記記事をめちゃくちゃ参考にしました。Nuxt.jsでの実装となっています。下記記事のフレームワークを使わない静的サイト版と言う位置付けを意識して、パクリでは無いと言い聞かせて書きました。どなたかのお役に立つ事が出来たら幸いです。 Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します
Basic認証付きの静的サイトを物凄く簡単にサーバレス（AWS）で公開出来る事を知ったので、やってみた形式で紹介したいと思います。 具体的にはAWSのAmplifyConsoleを使います。 一般的にAWSで静的サイトにBasic認証をかけたい場合、S3 + CloudFront + Lambda@edgeで実現するかな、と思いますが、それより100倍くらい楽です。 【前提】 GitHubのアカウントを持っている。基本的な操作が出来る AWSアカウントを持っている 独自ドメインを購入済みである 記事中ではお名前.comで購入したドメインを使用します AmplifyConsoleなどの単語を初めて聞いた人でも大丈夫です この記事でやる事 静的サイトのHTMLをGitHubにpushする GitHubとAWS Amplify Consoleを紐づける（これだけでサイトが公開されます） Basic認証をかける ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する 独自ドメインとHTTPS化の設定をする 作業時間自体は15分ぐらい、設定の反映の待ち時間含めて30分ぐらいとなります。 ※「5. 独自ドメインを設定する」の作業で、待たされる時間が発生します。 1. 静的サイトのHTMLをGitHubにpushする ここからは、index.htmlのみの簡素なサイトを例に、Basic認証付きで公開する作業をして行きます。 【作業】 1-1. ローカル環境に静的サイトを準備する 1-2. GitHubにリポジトリを作成しコードをpushする 1-1. ローカル環境に静的サイトを準備する ローカル環境にstatic-siteフォルダを作り、index.htmlを下記内容で作成します（説明を容易にするため簡素なHTMLを使用しています）。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello,world!</h1> </body> </html> 1-2. GitHubにリポジトリを作成しコードをpushする GitHub上にstatic-siteと言う名前でリポジトリを作成したら上記のコードをpushします。 2. GitHubとAWS Amplify Consoleを紐づける AWSのマネジメントコンソールにログインします。 サービスの検索窓に「Amplify」と入力します。「AWS Amplify」へと移動します。 下記画面に遷移したら、右上のオレンジの「New App」ボタンをクリックします。更にボタンが現れるので「Host web app」をクリックします。 ※初めてこの画面に来た人は、「すべてのアプリ」が空の状態になっているかと思います。 下記画面にしたらGitHubを選択して右下の「Continue」をクリックします。 ここでGitHubのアカウントとの紐付けを行います。紐付けの作業は初回のみです。画面の指示に従って頂くと紐付け作業を完了出来るかな、と思います。 紐付け完了後は下記画面となります。 「リポジトリ」のセレクトボックスをクリックします。GitHub上のリポジトリの一覧が現れるので、先ほど作成したリポジトリを選択します。 更にブランチを選びます。 作業したブランチを選択して下さい。 私の場合はブランチ名をリネームしたのでmainブランチですが、masterのまま作業をしている方はmasterが表示されるかと思います。その場合は、masterを選択して下さい。 選択出来たら「次へ」をクリックします。 下記画面に遷移します。何も変更を加えずに「次へ」をクリックします。 ※画面上の「ビルドの設定」の項目に警告のマークがついているのが気になるかと思いますが、無視して大丈夫です。VueやReactなどのビルドを伴うサイトを扱う際には、編集を行います。今回は不要です。 下記画面に遷移したら「保存してデプロイ」をクリックします。 サイトの公開設定は以上です。 下記画面のようにプロビジョン、ビルド、デプロイ、検証に全てチェックが入るのを待ちます（２〜３分ぐらい）。 サイトのURLが発行されます。 URLをクリックしてサイトを確認します。 GitHubにpushしたHTMLが表示されている事を確認出来ます。 3. Basic認証をかける 左のメニューより「アクセスコントロール」を選択し、遷移した画面で右上にある「アクセス管理」をクリックします。 下記画面に遷移します。ここでBasic認証のユーザー名とパスワードを設定出来ます。ユーザー名とパスワードを入力したら「Save」をクリックします。 公開したサイトをもう一度開くと（もしくはリロードすると）Basic認証のダイアログが現れます。 設定したユーザー名とパスワードを入力すると、サイトが表示されます。 4. ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する サイトの更新は「ローカルで更新作業をする」 → 「GitHubにpushする」 → 「Amplify Consoleがpushを検知して自動で更新してくれる」と言う流れになります。 実際に見て行きます。 ローカルにあるstatic-site/index.htmlをエディタで開き下記のように変更します。 （pタグを適当な内容で追加しただけです。） <h1>Hello,world!</h1> <p>hellohellohellohellohellohellohello</p> 変更を保存したら、GitHubに変更をpushします。 マネジメントコンソールに戻ると、再びプロビジョニングが始まっている事を確認出来ます。 全てチェックが入ると更新完了です。 更新内容が反映された事を確認します。 HTMLファイルを手動であげる作業は発生しません。 それっぽい言葉を使うとCICDのCDを実現している状態です。 （参考）CIとCDの違い 5. 独自ドメインとHTTPS化の設定をする Basic認証同様に簡単に独自ドメインの設定も出来ます。 例として予めお名前ドットコムで購入した「staticsite.work」と言うドメインを公開したサイトにくっつけて行きます。 【作業】 5-1. Route53でホストゾーンの登録 5-2. お名前.comでネームサーバーの設定 5-3. Amplifyコンソールでカスタムドメインの追加 5-1. Route53でホストゾーンの登録 Route53に移動して「ホストゾーンの作成」をクリックします。 ドメイン名に取得したドメインを入力して「ホストゾーンの作成」をクリックします。繰り返しになりますが、例では「staticsite.work」と言うドメインの設定をしています。 5-2. お名前.comでネームサーバーの設定 作成したホストゾーン（staticsite.work）クリックします。 下記画像で網掛けしている4つのURLを、お名前.comに登録して行きます。 別タブでお名前.comの管理画面を開き、ログインします。 「TOP」に移動して「ネームサーバーの設定をする」をクリックします。 下図のように購入したドメインにチェックを入れます。 更に「2.ネームサーバーの選択」項目で「その他」タブをクリックします。 ネームサーバー1~4までを先ほどの画像で網掛けした部分に対応するように1行ずつコピペして行きます。1~4まで埋め終わったら「確認」を押します。 5-3. Amplifyコンソールでカスタムドメインの追加 Amplifyの画面に戻ります。 お名前.comとRoute53での作業は終了です。 左メニューの「ドメイン管理」を選択して現れた画面の右上にある「カスタムドメインの追加」をクリックします。 ドメインの検索ボックスをクリックすると、Route53に登録したドメインの一覧が現れるので、先ほど登録したドメインを選択します。 更に「ドメインの検索」をクリックします。下記のようにサブドメインの項目が現れます。画像中の「main」の部分は紐付けているGitHubのブランチ名となります。なので、「master」ブランチを使っている方は「master」が表示されているはずです。 またサブドメインも自由に設定出来ます。デフォルトでは「www」となっていますが、お好きなものに変更する事可能です（後から変更出来るので一旦wwwのまま作ってみるのが良いかな、と思います）。 「保存」をクリックします。 下記画面に遷移します。 設定が反映されるのを待ちます（15分ぐらい）。 ドメインの設定だけではなくHTTPS化も自動でしてくれます。 設定が終わると下記のような画面に変わります。 ブラウザのアドレスバーに登録したドメイン（www.staticsite.work）を入力するとサイトが表示されます。 以上です。 終わりに 下記記事をめちゃくちゃ参考にしました。Nuxt.jsでの実装となっています。下記記事のフレームワークを使わない静的サイト版と言う位置付けを意識して、パクリでは無いと言い聞かせて書きました。どなたかのお役に立つ事が出来たら幸いです。 Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します
本題 注意: この方法は小さいサイズの動画のみに使用できます。でかいファイルを使用すると再生が可能になるまでとんでもない時間が掛かったり、メモリ不足で再生できなかったりする事があります。また、ここに載っているコードをそのまま使うとモバイル回線ユーザーに迷惑です。よく考えて使いましょう。 Safariで動画を再生するにはRange Requestが必要 Safariで動画を表示する際、サーバーのHTTP Range Request対応が必須になっている なのだが、レンタルサーバーによっては対応していなかったりする。 その時の回避方法 <html> <head> </head> <body> <video id="video"></audio> <script> var video = document.getElementById("video"); var request = new XMLHttpRequest(); var requestURL = "test.mp4"; //動画のurlを挿入 request.open("GET", requestURL, true); request.responseType = "blob"; request.onload = function () { var video_src = window.URL.createObjectURL(this.response); video.src = video_src; }; request.send(); </script> </body> </html> 一回XMLHttpRequestで取得する。(fetch,ajax等でもOKというかこっちの方が良いかも。IE対応位？) その後、Blob urlを生成して、videoタグのsrcに設定
