AWSを使ってみる！
AWSのアカウントとインスタンスを作成
今回はAWSの使い方についてです。
まずはアカウントを作成していきます。
アカウント作成流れの流れを見ながら作成していきます。
色々セキュリティを強化した方がいいとのことで、MFAも設定していきます。
MFAとは
多要素認証（たようそにんしょう、英語: Multi-Factor Authentication、英: MFA）は、アクセス権限を得るのに必要な本人確認のための複数の種類の要素（証拠）をユーザーに要求する認証方式である。
MFAのアプリは
Google Authenticator
Twilio Authy
が紹介されてました。
仕事でGoogle Authenticatorは使っているので、
Twilio Authy をダウンロードして使っていきます。
無事、MFAの設定が出来ました！
作業用のIMAアカウントを作成
AWSに初めて登録するときはルートユーザーでするのですが、
実際に作業するときはIAMユーザーでログインしていきます。
IAMユーザーのアカウント作成の方法ですが、
ルートユーザーでログインした後、
IAMユーザーのアカウントをを作成していきます。
どんな権限を与えるかを選択して、
サインインする際のIDやパスワードを設定していきます。
IAMユーザーアカウントを作成した後は
インスタンスの作成です。
インスタンスの作成
リージョンを東京にして、インスタンスの作成していきます。
↓リージョンを東京に設定
しかし、何度試してもインスタンスが作成できない…＞＜
Googleで色々検索した結果、
無料枠でインスタンスを作成するときは特定のリージョンでないと作成できない
という外国語のQ&Aを発見！
リージョンをバージニア北部に変更して試してみる…！
無事インスタンスが作成できました！！！
インスタンスが作成できないときは、
IAMのユーザーアカウントの権限設定が悪いのかと思い
アカウントを再度作成しましたが、
結論、原因はリージョンでした。
インスタンスが作成できたので、
実際に作業をしていきます～
クイズが完成～！
QUIZ
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"> <link rel="stylesheet" href="style.css"> <title>GA4クイズ</title> </head> <body> <h1>GA4クイズ</h1> <h2>問題一覧</h2> <ul> <li> <a href="question1.html">問題1</a></li> <li> <a href="question2.html">問題2</a></li> <li> <a href="question3.html">問題3</a></li> <li> <a href="question4.html">問題4</a></li> </ul> </body> </html>
index.htmlをLive Serverで表示
question1.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"> <link rel="stylesheet" href="style.css"> <script src="questions.js" defer></script> <title>問題1 ｜ Quiz</title> </head> <body> <div id ="main"> <h1>GA4クイズ</h1> <div class ="section"> <h2>問題1</h2> <p>GA4について、以下から正しいものをひとつ選んでください。 </p> <h3>選択肢</h3> <ol class="answers" data-id="question1"> <li data-answer="A">GA4を使うためには、既存のユニバーサルアナリティクスとの併用は許されず、どちらかひとつを選ぶ必要がある。</li> <li data-answer="B">GA4では、ユニバーサルアナリティクスに存在した「目標」は存在せず、イベントとパラメータでコンバージョンを測定する必要がある。</li> <li data-answer="C">GA4が生まれた背景にはGDPR（一般データ保護規則）は一切関係がない。</li> <li data-answer="D">Googleアナリティクスの歴史を振り返ると、ga.jsがその始まりに当たる。</li> </ol> </div> <div id="section-correct-answer" class ="section"> <h2>答え</h2> <span id="correct-answer"> <font size="5"><p>B</p></font></span> <div style ="border: solid 1px #1e366a; padding: 10px; margin: 10px 30px;margin-top: 30px;"> <h3>解説</h3> <ol type="A"> <li>併用は可能です。</li> <li>正解です。</li> <li>GDPRなどの個人情報保護の影響は大きく受けています。</li> <li>Urchinがその出発点になります。</li> </ol> </div> </div> </div> <div class ="section"> <a href="index.html">戻る</a> </div> </div> </body> </html>
question1.htmlをLive Serverで表示
クリックすると答えが表示される↓
question2.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"> <link rel="stylesheet" href="style.css"> <script src="questions.js" defer></script> <title>問題1 ｜ Quiz</title> </head> <body> <div id ="main"> <h1>GA4クイズ</h1> <div class ="section"> <h2>問題1</h2> <p>GA4について、以下から正しいものをひとつ選んでください。 </p> <h3>選択肢</h3> <ol class="answers" data-id="question1"> <li data-answer="A">GA4を使うためには、既存のユニバーサルアナリティクスとの併用は許されず、どちらかひとつを選ぶ必要がある。</li> <li data-answer="B">GA4では、ユニバーサルアナリティクスに存在した「目標」は存在せず、イベントとパラメータでコンバージョンを測定する必要がある。</li> <li data-answer="C">GA4が生まれた背景にはGDPR（一般データ保護規則）は一切関係がない。</li> <li data-answer="D">Googleアナリティクスの歴史を振り返ると、ga.jsがその始まりに当たる。</li> </ol> [f:id:mojamojablog:20220113165810p:plain] </div> <div id="section-correct-answer" class ="section"> <h2>答え</h2> <span id="correct-answer"> <font size="5"><p>B</p></font></span> <div style ="border: solid 1px #1e366a; padding: 10px; margin: 10px 30px;margin-top: 30px;"> <h3>解説</h3> <ol type="A"> <li>併用は可能です。</li> <li>正解です。</li> <li>GDPRなどの個人情報保護の影響は大きく受けています。</li> <li>Urchinがその出発点になります。</li> </ol> </div> </div> </div> <div class ="section"> <a href="index.html">戻る</a> </div> </div> </body> </html>
question2.htmlをLive Serverで表示
クリックすると答えが表示される↓
question3.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"> <link rel="stylesheet" href="style.css"> <script src="questions.js" defer></script> <title>問題3 ｜ Quiz</title> </head> <body> <div id ="main"> <h1>GA4クイズ</h1> <div class ="section"> <h2>問題3</h2> <p>GA4について、以下から正しいものをひとつ選んでください。</p> <h3>選択肢</h3> <ol class="answers" data-id="question3"> <li data-answer="A">GA4にはスクロール率を分析できる昨日がある。</li> <li data-answer="B">GA4で、PDFファイルのダウンロードを集計するためには、タグマネージャーと連携させなければならない。</li> <li data-answer="C">GA4で、はユーザー行動のうち、直帰率を重視して、設計されている。</li> <li data-answer="D">GA4で、外部リンククリックを測定するためには、HTMLの中でデータ取得するためのイベントトラッキングをする必要がある</li> </ol> </div> <div id="section-correct-answer" class="section"> <h2>答え</h2> <span id="correct-answer"> <font size="5"> <p>A</p></font></span> <div style ="border: solid 1px #1e366a; padding: 10px; margin: 10px 30px;margin-top: 30px;"> <h3>解説</h3> <ol type="A"> <li>サポートされています。デフォルトの設定だと垂直方向に90％の深さまで表示されたときに判定されます。</li> <li>タグマネージャーとの連携はなくても集計できます。</li> <li>直帰率という概念がなくなりました。直帰率の代わりにユーザーのコンテンツへの関心を計測する指標として「エンゲージメント」が新たな追加されています。</li> <li>デフォルトで用意されているため、不要です。</li> </ol> </div> </div> <div class ="section"> <a href="index.html">戻る</a> </div> </div> </body> </html>
question3.htmlをLive Serverで表示
クリックすると答えが表示される↓
question4.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"> <link rel="stylesheet" href="style.css"> <script src="questions.js" defer></script> <title>問題4 ｜ Quiz</title> </head> <body> <div id ="main"> <h1>GA4クイズ</h1> <div class ='section'> <h2>問題4</h2> <p>GA4について、以下から正しいものをひとつ選んでください。</p> <h3>選択肢</h3> <ol class="answers" data-id="question4"> <li data-answer="A">GA4は機械学習を取り入れているため、人がウェブを解析する必要性はまったくない。</li> <li data-answer="B">GA4はCookieからの情報を重要視している。</li> <li data-answer="C">GA4では、アプリとウェブサイトを同時に計測し、ひとつのレポートでまとめることはできない。 </li> <li data-answer="D">GA4では、例えばYouTuberの動画視聴からのコンバージョンを、GoogleやGoogle以外の有料チャンネル、Google検索、ソーシャル、メールなどのコンバージョンと並べて見ることができる。</li> </ol> </div> <div id ="section-correct-answer" class="section"> <h2>答え</h2> <span id="correct-answer"> <font size="5">D</font></span> <div style ="border: solid 1px #1e366a; padding: 10px; margin: 10px 30px;margin-top: 30px;"> <h3>解説</h3> <ol type="A"> <li>そんなことはありません。データをもとに、ウェブ解析し、事業貢献することが求められています。</li> <li>GA4は、「Cookieのない未来のアナリティクス」と呼ばれており、GDPRなどに配慮しているため、不正解です。</li> <li>GA4では、アプリとウェブサイトを同時に計測し、ひとつのレポートでまとめることができます。</li> <li>可能なため、正解です。</li> </ol> </div> </div> <div class ="section"> <a href="index.html">戻る</a> </div> </div> </body> </html>
question4.htmlをLive Serverで表示
クリックすると答えが表示される↓
qestions.js
const answersList = document.querySelectorAll('ol.answers li'); answersList.forEach(li => li.addEventListener('click',checkClickedAnser)); //正しい答え const correctAnswers = { question1:"B", question2:"A", }; function checkClickedAnser(event) { // クリックされた答えの要素(liタグ) const clickedAnswerElement = event.currentTarget; // 選択した答え(A,B,C,D) const selectedAnswer =clickedAnswerElement.dataset.answer; const questionId = clickedAnswerElement.closest('ol.answers').dataset.id; // 正しい答え(A,B,C,D) const correctAnswer = correctAnswers [questionId]; //メッセージを入れる変数を用意 let message; alert('クリックしてください'); //カラーコードを入れる変数を用意 let answerColorCode; //答えが正しいか判定 if (selectedAnswer === correctAnswer){ // 正しい答えだったとき message =' 正解です！おめでとう！'; answerColorCode = ''; }else{ // 間違った答えだったとき message ='ざんねん!不正解です!'; answerColorCode = '#f05959'; } alert(message); //色を変更(間違っていたときだけ色が変わる) document.querySelector('span#correct-answer').style.color = answerColorCode; //答え全体を表示 document.querySelector('div#section-correct-answer').style.display ='block'; }
style.css
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@400;700&display=swap'); body { /* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif; */ font-family: 'M PLUS 1 Code', sans-serif; } h1,h2,h3{ font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif; } h2{ border-bottom: 1px solid #a2a9b1; } ul li,ol li{ padding:1em ; list-style-position: inside; } ol.answers{ list-style: upper-alpha; } ol.answers li:hover { border: 0.1em solid #1e366a; background-color: #e5ecfc; padding: 0.9em; cursor: pointer; } div#section-correct-answer { display: none; } span#correct-answer { font-weight: bold; margin-top: 10px; } #main { padding: 0 1.5em; } div.section{ margin-top: 5em; }
クリックしたときのアラート
正解したときのアラート
不正解だったときのアラート
javascriptで動きをつける
jsのフォルダを準備
jsを記載していきます
アラートを設定
areatを使って文字が表示されるように設定します
検証モードのconsoleで確認をする
letを使用してみる
consoleを使用してみる
consoleでしりとり
検証モードで確認してみる
forEachを使用してみる
console.logで出力
+''+で空白を付ける
検証モードでhumanの中に入っている要素を出力
BMIの計算
undefinedを活用してみる
retuenを使ってみる
コードの見た目を整える
let mesageでメッセージを変数で定義する
BMIを検証する
deferを追加する
検証モードで背景の色を変更してみる
liが何個あるか表示する
選択肢をクリックしたらアラートが出るようにする
===を用いて要素を比較する
idを取得する
問題ごとの正しい答えを設定していく
jsの実装もできました。
どんな内容になったのか次回投稿したいと思います。
CSSを書いていく
HTMLが終わったので、
CSSを書いていきます。
CSSを書くフォルダを準備
まずはcssを書くためのフォルダを作成していくます
そして、簡単な装飾の仕方を学びます
背景色の変えるコードを書いて、liveserverで確認
背景色がムラサキ色に変わって感激～☆
こんな感じなんですね
雰囲気が分かったところで、
HTMLにCSSを読み込ませるコードを書いていきます
全てのHTMLにCSSを読み込むコードを書いて（コピペ）していきます
問題の一覧ページ＆詳細ページすべてにcssが読み込まれました
対応フォントとフォントの種類
ここでフォントの説明について学びます
使っているパソコンの種類によって対応しているフォントが違うらしいです。
パソコンの設定から確認できるとのこと。
また、フォントについては「font-family 種類」で調べると色々出てくるみたいです。
色々なフォントが一覧で見れるの便利～！
Googlefontを使用する
WEBブラウザーからフォントを読み込む方法もあるみたいです。
今回はgoogle fontsを使用していきます。
日本語のフォントを探していきます。
スタイルをクリックすると
右側に選択した要素が表示されます
今回はこのフォントを使用していきます
右側のCSSをコピーして、vsdodeに記載していきます
@import url(' ')；でフォントを読みこみ設定をします
Googlefonts注意点
Webフォントを使用する際は、
ライセンスの規約に違反しないように規約を確認することが大切
らしいです
コメントアウトするショートカット
コメントアウトするとき→ c+/
アンチコメントするとき→ c+/
検証モードで記載するcssを考える
検証モードでcssを確認していきます
検証モードは自分でコードや数字を入れて確認できるのでとても便利です
border-styleを入れてどんな見た目になるのかを試したり
ul li {margin:20px} をいれて行間をあけます
1emという「em」の単位
色々行間を動かして
少し見やすくしました
質問部分の装飾をするために
<div id ='main'>で
該当部分を囲っていきます
cssに #main を入れていきます
div#main = #main は同じらしいです
幅を整えていきます
div class で装飾したい範囲を設定します
<div class ="section">
solidで下線をつけていきます
olの配下にあるものをアルファベット順に変えます
ol.answers{
list-style: upper-alpha;
}
選択した項目が色が変わる設定をしていきます
でも、A・B・Cなどの部分が選択されていないので、
コードを変更していきます
ul li,ol li{
padding:1em ;
list-style-position: inside;
}
cursor pointer を使って
マウスオーバーしたときに
矢印デザインが表示される
ようにしていきます
次に答えを非表示にしていきます
クリックする→答えが表示される
感じにしていきたいので、
最初の状態は答えを隠します
display noneを使用して非表示にします
CSS完成
CSSの記述が完成しました
次はjsです～！
HTMLでコンテンツを作ってみる
本日はUdemyのこちらの講座を進めました。
STEP1 ： Webシステムの概要を理解する
まずは、手始めに私達が学習する対象の概念について理解するところから始めます。
学習対象がどんなものなのかを理解し、目的をしっかりと明確にしていきます。
→Webシステムの概要についての説明でした。
STEP2 ： 開発環境を整える
ここで、コース中で利用するものについて大まかにお話します。
その上で次のステップからすぐ利用することになる開発のための道具を整えます。
→実際に手を動かしていきます。
まずは開発を整えるとのことで、Visual Studio Codeをインストールしました。
インストール完了後、日本語の設定と保存の設定を変更しました。
その他、諸々の拡張機能をインストール。
一通り設定が終わりました。
このstepは完了です。
STEP3 ： Webシステムを公開する
当コースで一番大きな部分です。
ここでWeb開発における基本的なパーツを一つずつ理解して、実装をしていきます。
STEP3が完了したら、Webページがインターネット上で独自ドメインで公開できている状態になります。
HTML / CSS / JavaScript / PHP / EC2 など、一つずつおさえていきましょう。プログラミング初心者でもわかるように、図も多用していますので、
論理的に考えることが苦手、という方でも安心して進めていただけます
さっそくディレクトリを作成していきます。
ちなみに、ディレクトリが何かはわかっておりません（笑）
動画の通りに進めます。
フォルダの準備ができたので、実際にHTMLを記載していきます。
まずは言われた通りに文字を打ち込んでいきます。
どうやら、ショートカットが沢山あるらしいことが分かりました。
まずは「！」
langが”en”になるのですが、ここを”ja”にするだけで良いのでラクです。
他にもいろいろショートカットがあるらしい…！
- h1+p
- h2+p
- ol>li*4
など
番号付きリストの場合は
<ol>
<li></li>
<li></li>
</ol>
箇条書きリストの場合は
<ul>
<li></li>
<li></li>
</ul>
で表示するらしい。
この部分の動画で感動したのが、検証モードでテキストの部分を編集できること。
（保存はされませんが）書き換えができるなんて知らなかったので、びっくりです。
動画のままに作成していきますが、
クイズの内容は自分で変更しながら作成しました。
（※クイズの内容は「1週間でGoogleアナリティクス4の基礎が学べる本」を参考にしてます。公開するときにはnoindexにするので特に問題ないと思ってます）
HTMLで問題一覧と問題4つのページを作成しました。
HTML内でリンクを付ける際には、
<a href="index.html">戻る</a>
という感じで、
<a href="フォルダ名"></a>で記載することが分かりました。
本日はHTMLでコンテンツを作成できました。
明日はCSS で装飾をしていきたいと思います！
ちなみに、step3が割とボリュームがあります。
STEP3 ： Webシステムを公開する
- step3 : 1~3
- HTML ← 本日ココが完了
- CSS
- まとめ
- step3 : 4
- step3 : 5
- step3 : 6
- step3 : 7~8
- step3 : 9
- step3 : 10
道のりが長いですが、地道にコツコツ頑張ろうと思います！
Udemyで勉強する
本日は東京に雪が降りました。
積雪わずか5㎝で豪雪状態です（笑）
2022年に案件獲得を目指して、まずは勉強です。
勉強と言ってもやり方は様々です。
本で学ぶ、資格を取るなど色々考えた結果、
とりあえず、手を動かして物を作ってみよう！という結論に至りました。
Udemyの講座を見ながら自分で手を動かして、
何かしらのアウトプットをできるようにしようと思います。
まずは全体的に学びたいので、この講座を購入しました。
【HTML,CSS,JS,PHP,Git,Docker】✅ プログラミング初心者OK！ ゼロからわかるWebシステム開発 | Udemy
講座の内容はこのような感じらしいです。
STEP1 ： Webシステムの概要を理解する
まずは、手始めに私達が学習する対象の概念について理解するところから始めます。
学習対象がどんなものなのかを理解し、目的をしっかりと明確にしていきます。
STEP2 ： 開発環境を整える
ここで、コース中で利用するものについて大まかにお話します。
その上で次のステップからすぐ利用することになる開発のための道具を整えます。
STEP3 ： Webシステムを公開する
当コースで一番大きな部分です。
ここでWeb開発における基本的なパーツを一つずつ理解して、実装をしていきます。
STEP3が完了したら、Webページがインターネット上で独自ドメインで公開できている状態になります。
HTML / CSS / JavaScript / PHP / EC2 など、一つずつおさえていきましょう。プログラミング初心者でもわかるように、図も多用していますので、
論理的に考えることが苦手、という方でも安心して進めていただけます。
STEP4 ： ファイルを効率よく管理する
このSTEPでは、ファイルを効率的に管理するために
バージョン管理システムのGitと、Gitのホスティングサービスの中では一番利用者の多いGithubを学びます。Web開発をしていると、たくさんのファイルを作成・更新しなければならないため、
開発効率を上げるため、ここでGitの概念を学び、
そして実際に操作をしながらGitのスキルを身に付けていきましょう。
STEP5 ： 先人が作った機能を利用して開発を加速させる
世界中には数多くのエンジニアが、様々なツールを公開しています。
ここでは、公開されているツールやオープンソースソフトウェアを活用して開発を更に加速させていきます。
それらを利用するための環境構築もかんたんに行えるようにDockerというツールを利用します。
Dockerは昨今のWeb開発現場では利用されるケースも増えてきたので押さえておきたいテクノロジーの一つです。よりかんたんに開発環境を作成できるようになったら
Webフレームワークを活用し、Webアプリケーションを作成していきましょう。
STEP6 ： 他のサービスと自分のプログラムを連携させる
最後のステップでは、他のサービスをプログラミングで操作できるWebAPIについて学びます。
ここで、APIの概念、そして他のサービスとの連携を学び、アイデア次第で様々なことができるようになります。
またWebhookを学ぶとそのアイデアの可能性も更に広がるでしょう。一番最後に腕試しとして、一つ課題があるのでぜひチャレンジしてみてください。
ここまでやりきったあなたならきっとできるはず！！
包括的な内容なので良いかなと思って購入しました。
初学者なので何がいいかわかりませんが、評価が高いのでとりあえず学んでみようと思います。
講座は23時間の内容らしいので、
1日3時間進めるとして、約8日かかりますかね。
巻き戻したりするので
もっと時間がかかる可能性もありますが、
出来るだけ早く学んで
出来るだけ早くアウトプットしようと思います。
何事においても初学者は
ある程度の質で沢山の量をこなすことが大切かなと
思ってます。
質より量っていう言葉は
少し乱暴ですが、
ある程度の質で量を稼ぐことは
とても重要な気がしています。
どんな方法が最善なのか分かりませんが、
回り道をしながらでも
とにかくやってみようと思います。
世の中、行動が全てです！
Webエンジニアになる為に今年何をするか？
1番の目標は2023年内にWEB関係の副業案件を獲得することです！
Googleアナリティクス、Googleデータポータル、SEO対策の案件を狙いつつ、サイト制作・アプリ開発の力もつけ自分のできる幅を広くしていこうと思います。
具体的な行動は
- 副業エージェントに登録する
- 現在の能力で出来る案件に応募する
- サイト制作・アプリ開発の勉強をする
- Udemyで勉強
- サイト・アプリ模写
- オリジナルのサイト制作・アプリを開発する
- ポートフォリオの作成
- 副業エージェントの登録内容を確認
の流れを考えてます。
大事なのは能力の可視化です。
自分は何が出来るのか、クライアントにどう貢献出来るのかを一目で分かるポートフォリオを作成する必要があると思います。
去年、転職活動をしたのですが、
自分の能力を伸ばすのと同時に、その能力でどんな価値を生み出せるのか
をきちんと相手に伝えることができないと
社会では通用しないんだなと感じました。
能力や経験も大事ですが、アピールやパフォーマンスはそれ以上に大事なのだと…
2チャンネルのひろゆきが「優秀な人と優秀そうに見える人は違うと」言ってましたが、その通りだなと思うことが多かったので、自分もアピール力を身に着けていこうと思います。
以前勤めていた大手コンサルティング会社では、いかに自分が有能であるかを声高々に語れる方が多かったです。本当の能力は置いといて、凄そうに見える人やアピール能力がたけている方が出世されていたので、日本の会社はそんな感じなのだと思います。
コンサルティングという無形なものだと、その人のアピール力で評価が決まる部分が大きいのですが、Webサイトやアプリ開発は目に見える形あるものですのでその分能力で評価してもらえる比率も少し多いのではと思っております。
良いプロダクトを作れるように頑張ろうと思います！
失敗や遠回りもブログに記載していくので、参考にしてもらえたら嬉しいです。
