- 投稿日：2022-01-15T23:56:40+09:00
Zoomのブレイクアウトルームってダサくない？?
はじめに 私は現在大学4回生で論文のための実験をしているのですが、このご時世のため実験もオンラインで行うことになりました。 私の実験ではGoogle Formを使って協力者に動画の視聴→アンケート→テストという流れを2回繰り返すことでした。(下図が実験の流れ) 私は実験の協力者を募るため、教授の力を借り、Zoomでのオンライン授業で募集することになりました。 ここで問題が発生です。 上記の場合、Google FormのURLが4つあります。 どうやって4つのURLを均等に協力者に振り分けようかと私は思いました。 4つブレイクアウトルームに分かれてそれぞれに異なるリンクを貼る。→ 私がルーム毎に入退室を行う必要がある。時間がかかる。めんどくさい。 学籍番号を4で割った余り、学籍番号の下1桁でURLを指定する。 → 出席者の学籍番号は十中八九連番にはなっていなので、均等にならない。 4つのブレイクアウトルームに分かれてルームの番号を覚えてもらい、メインルームに戻り、その番号ごとにURLを指定する。 → ダサい！！！！そもそもブレイクアウトルームから戻ってこなさそう。 とりあえず私はブレイクアウトルームを断固として使いたくない！！！ そこで私は何個か案を考えてみました。 ランダムジャンプするURLを貼る 実際に作った例 : https://tomomon.jp/programming/random_jump/ javascriptを使って作成する。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ランダムジャンプ</title> <script type="text/javascript"> <!-- var mylink = new Array( "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s", "https://tomomon.jp/travel/my_secret_place/", "https://tomomon.jp/travel/travel_ranking/", "https://tomomon.jp/programming/ksnctf5/" ); function random_jump() { var i = Math.floor(Math.random() * mylink.length); location.href = mylink[i]; } // --> </script> </head> <body> <a href="javascript:random_jump();">ランダムに移動します</a> </body> </html> だだし、これは無作為にリンク先に飛ばされるので、偏る可能性がある。 また、新しいタブで開くとabout:blank#blockedとなってしまう。(Google Chromeの場合) 訪問順に異なるリンク先に移動させる アクセスカウンターの作成 とりあえず訪問者数を得たいので、アクセスカウンターを作成する。 実際に作った例 : https://tomomon.jp/programming/access_counter/ まず,訪問者数を格納する count.dat を作成する。 ディレクトリは下記の感じ。 % tree . . ├── count.dat └── index.php count.dat には初期値0を入れておく。 count.dat 0 index.php <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>アクセスカウンター</title> </head> <body> <div class="counter-area"> <!-- ファイルから取得したカウント数を表示する --> <p>あなたは<span class="access-count"><?php echo $count;?>番目</span>の訪問者です</p> </div> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 訪問者を訪問者数でグループに分ける。 訪問順に4つのリンクを順にアクセスするよう誘導する。 訪問者数を4で割った余って+1した番号のリンクを選ばせる。 index.php <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>アクセスカウンター</title> </head> <body> <div class="counter-area"> <!-- ファイルから取得したカウント数を表示する --> <p><span class="access-count">Link<?php echo $count%4+1 ;?></span>をクリックしなさい。</p> </div> <ul class="links"> <li><a href="https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s">Link1</a> <li><a href="https://tomomon.jp/travel/my_secret_place/">Link2</a> <li><a href="https://tomomon.jp/travel/travel_ranking/"> Link3</a> <li><a href="https://tomomon.jp/programming/ksnctf5/">Link4</a> </ul> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 表示されている4つのリンクから選んでクリックするのがダサいし面倒。間違えてクリックする可能性もある。 上記を組み合わせる 上記のアクセスカウンターを使って、ランダムアクセスを改良する。 アクセスjavascriptで書いたurlを格納した配列から訪問者数を4で割った余りを引数として、リンク先のURLを指定する。 index.html <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ランダムジャンプ２</title> <script type="text/javascript"> <!-- var mylink = new Array( "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s", "https://tomomon.jp/travel/my_secret_place/", "https://tomomon.jp/travel/travel_ranking/", "https://tomomon.jp/programming/ksnctf5/" ); function divide_links(num) { location.href = mylink[num]; } // --> </script> </head> <body> <div class="link"> <!-- ファイルから取得したカウント数を表示する --> <a href="javascript:divide_links(<?php echo $count%4 ;?>);">ここをクリックしてください。</a> </div> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 以下が実際に実装したもの。 これで均等にリンク先が訪問順に決定する。 また、クリックするところが一つしかないので、間違えることがなくなった。 最後に ブレイクアウトルームを使わずに済んだのですが、リンク先のURLをクリックさせるために一度HPを経由する必要があるのが少し気になります。リダイレクトを設定したらいいのかな？ 普段、全くJavaScriptやPHPを触らないので、もっといい方法、間違っていることがあったら教えてください。
- 投稿日：2022-01-15T23:56:40+09:00
Zoomのブレイクアウトルームってダサくない？？
はじめに 私は現在大学4回生で論文のための実験をしているのですが、このご時世のため実験もオンラインで行うことになりました。 私の実験ではGoogle Formを使って協力者に動画の視聴→アンケート→テストという流れを2回繰り返すことでした。(下図が実験の流れ) 私は実験の協力者を募るため、教授の力を借り、Zoomでのオンライン授業で募集することになりました。 ここで問題が発生です。 上記の場合、Google FormのURLが4つあります。 どうやって4つのURLを均等に協力者に振り分けようかと私は思いました。 4つブレイクアウトルームに分かれてそれぞれに異なるリンクを貼る。→ 私がルーム毎に入退室を行う必要がある。時間がかかる。めんどくさい。 学籍番号を4で割った余り、学籍番号の下1桁でURLを指定する。 → 出席者の学籍番号は十中八九連番にはなっていなので、均等にならない。 4つのブレイクアウトルームに分かれてルームの番号を覚えてもらい、メインルームに戻り、その番号ごとにURLを指定する。 → ダサい！！！！そもそもブレイクアウトルームから戻ってこなさそう。 とりあえず私はブレイクアウトルームを断固として使いたくない！！！ そこで私は何個か案を考えてみました。 ランダムジャンプするURLを貼る 実際に作った例 : https://tomomon.jp/programming/random_jump/ javascriptを使って作成する。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ランダムジャンプ</title> <script type="text/javascript"> <!-- var mylink = new Array( "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s", "https://tomomon.jp/travel/my_secret_place/", "https://tomomon.jp/travel/travel_ranking/", "https://tomomon.jp/programming/ksnctf5/" ); function random_jump() { var i = Math.floor(Math.random() * mylink.length); location.href = mylink[i]; } // --> </script> </head> <body> <a href="javascript:random_jump();">ランダムに移動します</a> </body> </html> だだし、これは無作為にリンク先に飛ばされるので、偏る可能性がある。 また、新しいタブで開くとabout:blank#blockedとなってしまう。(Google Chromeの場合) 訪問順に異なるリンク先に移動させる アクセスカウンターの作成 とりあえず訪問者数を得たいので、アクセスカウンターを作成する。 実際に作った例 : https://tomomon.jp/programming/access_counter/ まず,訪問者数を格納する count.dat を作成する。 ディレクトリは下記の感じ。 % tree . . ├── count.dat └── index.php count.dat には初期値0を入れておく。 count.dat 0 index.php <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>アクセスカウンター</title> </head> <body> <div class="counter-area"> <!-- ファイルから取得したカウント数を表示する --> <p>あなたは<span class="access-count"><?php echo $count;?>番目</span>の訪問者です</p> </div> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 訪問者を訪問者数でグループに分ける。 訪問順に4つのリンクを順にアクセスするよう誘導する。 訪問者数を4で割った余って+1した番号のリンクを選ばせる。 index.php <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>アクセスカウンター</title> </head> <body> <div class="counter-area"> <!-- ファイルから取得したカウント数を表示する --> <p><span class="access-count">Link<?php echo $count%4+1 ;?></span>をクリックしなさい。</p> </div> <ul class="links"> <li><a href="https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s">Link1</a> <li><a href="https://tomomon.jp/travel/my_secret_place/">Link2</a> <li><a href="https://tomomon.jp/travel/travel_ranking/"> Link3</a> <li><a href="https://tomomon.jp/programming/ksnctf5/">Link4</a> </ul> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 表示されている4つのリンクから選んでクリックするのがダサいし面倒。間違えてクリックする可能性もある。 上記を組み合わせる 上記のアクセスカウンターを使って、ランダムアクセスを改良する。 アクセスjavascriptで書いたurlを格納した配列から訪問者数を4で割った余りを引数として、リンク先のURLを指定する。 index.html <?php //カウント数が記録してあるファイルを読み書きできるモードで開く $fp = fopen('count.dat', 'r+b'); //ファイルを排他ロックする flock($fp, LOCK_EX); //ファイルからカウント数を取得する $count = fgets($fp); //カウント数を1増やす $count++; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ランダムジャンプ２</title> <script type="text/javascript"> <!-- var mylink = new Array( "https://www.youtube.com/watch?v=vLV0UZ308bQ&t=155s", "https://tomomon.jp/travel/my_secret_place/", "https://tomomon.jp/travel/travel_ranking/", "https://tomomon.jp/programming/ksnctf5/" ); function divide_links(num) { location.href = mylink[num]; } // --> </script> </head> <body> <div class="link"> <!-- ファイルから取得したカウント数を表示する --> <a href="javascript:divide_links(<?php echo $count%4 ;?>);">ここをクリックしてください。</a> </div> </body> </html> <?php //ポインターをファイルの先頭に戻す rewind($fp); //最新のアクセス数をファイルに書き込む fwrite($fp, $count); //ファイルのロックを解除する flock($fp, LOCK_UN); //ファイルを閉じる fclose($fp); ?> 以下が実際に実装したもの。 これで均等にリンク先が訪問順に決定する。 また、クリックするところが一つしかないので、間違えることがなくなった。 最後に ブレイクアウトルームを使わずに済んだのですが、リンク先のURLをクリックさせるために一度HPを経由する必要があるのが少し気になります。リダイレクトを設定したらいいのかな？ 普段、全くJavaScriptやPHPを触らないので、もっといい方法、間違っていることがあったら教えてください。
- 投稿日：2022-01-15T22:13:34+09:00
【HTML】【PHP】<input type="date">で取得した日付フォーマットの変更の仕方について
背景 カレンダーを作成中、予定を入力したときにカレンダー内に表示させようとしたところ、日付のフォーマットが違ってif文が働かなかったので、同じところで悩まないように備忘録兼ねて作成 やりたかったこと 日付を取得するフォーム <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="" method="post"> <input type="date" name="day"> <button type="submit">送信</button> </form> </body> </html> <?php if($_SERVER['REQUEST_METHOD'] === 'POST'){ echo $_POST['day']; ?> このフォームに入力された日付は、デフォルトでyyyy-mm-ddの形式で表示される。 つまり2022年1月1日を選択して送信すると、2022-01-01と表示される。（ここでは$_POSTで取得していますが、filter_input()などを使う方が良いです。） やりたかったのは、この日付表示を別の形式に直して、if文などで使いやすくすること。（自分はY-n-j、つまり2022-01-01表示を2022-1-1表示にしたかった。） date関数 yyyy-mm-dd以外のフォーマットで日付が欲しいときは、date()を使用してフォーマットを整えてあげる必要がある。 date関数 <?php date(変換後のフォーマット, タイムスタンプ（無くてもいい）); ?> 第１引数には、変換後のフォーマット文字列 第2引数には、タイムスタンプ（書かない場合は、現在時刻が使用される） ※ タイムスタンプ：正確にはUNIXタイムスタンプと言うらしい。協定世界時(UTC)での1970年1月1日0時0分0秒からの経過時間を秒数で表したもの。つまり、これを書かないと、1970年1月1日0時0分0秒から現在時刻までの秒数が自動的に第2引数になる。 と言うことで、date関数を使用して2022-1-1と表示させるため下記のように入力すると、エラーが発生する。 date関数 <?php $day = $_POST['day']; echo date("Y-n-j", $day); ?> いろいろ書いてあるが、要はdate()の第2引数の型はintegerでなければならないですよ、と言うことである。 inputタグのtype属性の値dateで取得した日付は、string型になっているため、上記のように直接第2引数とはできずエラー発生となった。 input type="date"のドキュメント strtotime関数 取得した日付をint型にするためにstrtotime()を使用する。 strtotime関数 <?php strtotime(変換したい日付の文字列, ベースタイムスタンプ（無くてもいい）); ?> 第１引数には、変換したい日付/時刻の文字列 第2引数には、返される値を計算するために使用されるベースタイムスタンプ（書かない場合は、現在時刻が使用される。例えば1日前の日付を取得する際なんかは、ここに'-01'を入れたりする。） 長々書いてきたが、要はフォーマットを変えたければ <?php $day = $_POST['day']; echo date("Y-n-j", strtotime($day)); ?> としてあげれば良い。 以下、2022-01-01を変換した一例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="" method="post"> <input type="date" name="day"> <button type="submit">送信</button> </form> </body> </html> <?php if($_SERVER['REQUEST_METHOD'] === 'POST'){ $day = $_POST['day']; echo date("F j, Y", strtotime($day)) . "<br/>"; echo date("F j, Y", strtotime($day)) . "<br/>"; echo date("m.d.y", strtotime($day)) . "<br/>"; echo date("j, n, Y", strtotime($day)) . "<br/>"; echo date("Ymd", strtotime($day)) . "<br/>"; echo date("j-m-y", strtotime($day)) . "<br/>"; echo date("D M j", strtotime($day)) . "<br/>"; echo date("Y-m-d", strtotime($day)) . "<br/>"; echo date("Y-n-j", strtotime($day)). "<br/>"; echo date("Y年n月j日", strtotime($day)). "<br/>"; echo date("Y/n/j", strtotime($day)). "<br/>"; } 参考URL 1.date関数ドキュメント 2.input type="date"のドキュメント 3.strtotime関数ドキュメント 4.タイムスタンプについて
- 投稿日：2022-01-15T16:58:09+09:00
CSS 擬似要素『nth-child』と『nth-of-type』何が違うの？
概要 複数の要素を並べる時によく、 「3番目の要素だけ指定してデザインをあてたい」や 「奇数・偶数番目の要素だけ指定してデザインをあてたい」などがよくある。 その度Google先生に聞いてみると、:nth-of-type( ) と :nth-child( )と出てくるが、 どっちもn番目の要素を指定することができるので、正直混乱する。 そのため、この記事では、:nth-of-type( ) と :nth-child( )の違いの解説と、 n番目、nの倍数番目などどんな指定でも使いこなせるようにサンプルの解説を行います。 結論 :nth-of-type( ) と :nth-child( )の違いは、要素の数え方です。 :nth-child()の場合 :nth-child()は、同じ親要素にある兄弟関係の全ての要素の中で何番目になるのかを指定するものになります。 つまりこんな感じになります。 <!--タグに指定する p:nth-child() --> <div> <p>1番目</p> <a>2番目</a> <p>3番目</p> <p>４番目</p> </div> p:nth-child()では、 pタグに指定しているので、２番目のaタグにはスタイルがあたりません。 <!--classに指定する .style:nth-child() --> <div> <p>1番目</p> <a>2番目</a> <p class="style">3番目</p> <p class="style">４番目</p> </div> .style:nth-child()で .styleに指定しているので、1番目、２番目の.styleが指定されていない要素にはスタイルがあたりません。 :nth-of-type() の場合 :nth-of-type()は、同じ親要素にある兄弟関係の指定した要素の中で何番目になるのかを指定するものになります。 つまりこんな感じになります。 <!--タグに指定する p:nth-of-type() --> <div> <p>1番目</p> <a> </a> <p>2番目</p> <p>3番目</p> </div> aタグは、順番には入りません。 <!--classに指定する p.style:nth-of-type() --> <div> <p>1番目</p> <a> </a> <p class="style">2番目</p> <p class="style">3番目</p> </div> nth-of-type()は、class要素には対応していないので、.styleが指定されているpタグが数えられます。 nth-of-type と nth-child を使いこなす 最初を指定する :first-child :first-of-type p:first-child { /*スタイルが入る*/ } p:first-of-type { /*スタイルが入る*/ } 最後を指定する :last-child :last-of-type p:last-child { /*スタイルが入る*/ } p:last-of-type { /*スタイルが入る*/ } 最初からx番目を指定する :nth-child(x) :nth-of-type(x) /*３番目の要素を指定する*/ p:nth-child(3) { /*スタイルが入る*/ } p:nth-of-type(3) { /*スタイルが入る*/ } 最後からx番目を指定する :nth-last-child(x) :nth-last-of-type(x) /*３番目の要素を指定する*/ p:nth-last-child(3) { /*スタイルが入る*/ } p:nth-last-of-type(3) { /*スタイルが入る*/ } x番目から最後までを指定する :nth-child(n+x) :nth-of-type(n+x) /*３番目からの要素を指定する*/ p:nth-child(n+3) { /*スタイルが入る*/ } p:nth-of-type(n+3) { /*スタイルが入る*/ } 最後からx番目までを指定する :nth-child(-n+x) :nth-of-type(-n+x) /*３番目までの要素を指定する*/ p:nth-child(-n+3) { /*スタイルが入る*/ } p:nth-of-type(-n+3) { /*スタイルが入る*/ } 最後のx番目から最後までを指定する :nth-last-child(n+x) :nth-last-of-type(n+x) /*３番目からの要素を指定する*/ p:nth-last-child(n+3) { /*スタイルが入る*/ } p:nth-last-of-type(n+3) { /*スタイルが入る*/ } 最初から最後のx番目までを指定する :nth-last-child(-n+x) :nth-last-of-type(-n+x) /*３番目までの要素を指定する*/ p:nth-last-child(-n+3) { /*スタイルが入る*/ } p:nth-last-of-type(-n+3) { /*スタイルが入る*/ } xの倍数番目 :nth-child(xn) :nth-of-type(xn) /*３の倍数番目からの要素を指定する*/ p:nth-child(3n) { /*スタイルが入る*/ } p:nth-of-type(3n) { /*スタイルが入る*/ } xの倍数番目のy個となり :nth-child(xn+y) :nth-of-type(xn+y) /*３の倍数番目から2個となりの要素を指定する*/ p:nth-child(3n+2) { /*スタイルが入る*/ } p:nth-of-type(3n+2) { /*スタイルが入る*/ } 兄弟要素が自分1個だけを指定する :only-child :only-of-type p:only-child { /*スタイルが入る*/ } p:only-of-type { /*スタイルが入る*/ }
- 投稿日：2022-01-15T16:48:45+09:00
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
前提 「クリック」の文字をクリックすると「クリックされた！」に変換するプログラムの作成。 以下のエラーがでた。 Uncaught TypeError: Cannot set properties of null (setting 'onclick') HTML <body> <div id="text-button"><p id="text">クリック</p></div> </body> Javascript document.getElementById("text-button").onclick = function() { document.getElementById("text").innerHTML = "クリックされた！"; }; 解決法 以下に変更。 Javascript window.onload = function () { document.getElementById("text-button").onclick = function () { document.getElementById("text").innerHTML = "クリックされた！"; }; }; window.onload = function () とは ページが完全に読み込まれた直後に実行させたいスクリプトを書く方法である。 原因 <div id="text-button"><p id="text">クリック</p></div> が実行される前に document.getElementById("text-button").onclick = function() { document.getElementById("text").innerHTML = "クリックされた！"; }; が実行されているから document.getElementById("text-button").onclickが nullになり、エラーが出る。 "text-button"なんて無いって言われている。 終わりに 実行タイミングを理解する必要がある。
- 投稿日：2022-01-15T12:19:46+09:00
【超入門】JavaScriptの超基本を自分の言葉で解説してみた
目次 1.はじめに 2.JavaScriptとは 3.JSファイルの読み込み 4.開発者ツール 5.console.log 6.コメントアウト 7.変数 【この記事を読むのはこんな人】 ・HTML、CSSは理解出来ている ・JavaScriptを始めたが全く理解できない ・実際にJavaScriptを使用するイメージがつかない 1. はじめに 副業で自分のアウトプットも兼ね、エンジニア未経験の方にプログラミングを教え始めたのですが、フロントエンドを目指す方にとって、JavaScriptが一つ大きな壁であることが分かりました。 「HTMLとCSSは何とか出来たが、JavaScriptに入った途端全然理解できなくなった」 「console.logって画面に表示されないけど使うの？」 「getElementByidとか長すぎるし何でこれを使うのか分からない」 と、初歩的な部分がどうしても理解できず、先へ進めないとのことでした。 HTML、CSSと進み、次のJavaScriptで挫折しそうな初心者の方へ向けて、疑問を少しでも解消出来れば良いなと思い、記事に起こしました。 2. JavaScriptとは 一言でいえば「模型を生き物にするもの」です。 まず模型はHTML、CSSで作成します。 今回は猫の模型でイメージしてみましょう。 猫の模型.png HTMLで猫の骨格を作成して、CSSで肉の大きさや毛の色を調整しています。 ※上記はあくまでイメージの画像です。 実際にHTMLやCSSでこの猫ちゃんを作成しようとすると非常に手間がかかると思われます（笑） この動けない模型のままでは可哀そうなので、JavaScriptで生き物にしてあげましょう。 ・猫を触ると「ニャー」と鳴く処理 模型の状態だと動かないから「静的なWebページ」 生き物にすると動くから「動的なWebページ」 動かないから静的、動くから動的。こんな感じの理解でOKです。 ※CSSアニメーションとかでも動的にも出来ますが、 今回はJavaScriptのイメージをつかむという観点なので置いておきます。 3. JSファイルの読み込み JavaScriptは下記のように読み込みます。 <script type="text/javascript" src="./js/cat.js"> </script> 実際のコード <./js/cat.jsの中身> <フォルダ構成例> ここで混乱するかと思われる点は「外部定義」と「直接定義」です。 簡単に言えば、上記のようにJavaScriptを記述したファイルを外部から読み込ませるか、HTMLに直接記述してしまうかという点です。 直接定義例 2つの定義ともメリットデメリットはありますが、今はこの程度の認識でOKです。気になった方は調べてみてください。 私自身は外部定義で記述することが多かったです。 （フォルダ分けがパッとみてわかりやすいため） 作業の内容や仕事の現場によりけりな部分もあるので、その都度確認してみてください。 4. 開発者ツール HTML、CSS、JavaScriptの状態を検証できる必須と言っても良いツール。 コードの対応箇所やエラー検証、デバッグに使用される。 Windowsの場合「F12」 Macの場合「Command + Option + i」を押せばツールが開く。 ※下記の参考例はMacです 記述したHTMLに対応する箇所が青くなります 下記例はタグに触っているため、全体が青くなってます ブラウザ上でcssを変更してみたり、サーバーへのリクエスト値を変えたりと 開発者ツールを極めて損はありません。 後述するconsole.logの値が見られるのも機能の一つです。 具体的に説明しすぎると長くなるため、必要な時に随時調べて使用していくのが良いかと思われます。 5. console.log console.logは名前の通り「コンソールにログ」を残せるものです。 コンソールは開発者ツールから見ることができます。 ブラウザ（画面）上で表向きには表示させず、 猫が鳴いた処理の開始と終了を知らせる console.log記述例 ブラウザ上の開発者ツールで見た時の挙動 ここで初学者の方は疑問に思うかもしれません。 「F12を押さないと見れないの？」 「直接画面上に表示されないのに何の意味があるの？」 このような疑問を持った方は、次のように考えてみてください。 外面と内面は違う HTMLで外面が表示されている時、JavaScriptの内面では様々なことが行われています。 開発者ツールでは、その内面で行われているJavaScriptの処理を確認することが出来るのです。 また、console.logはJavaScriptのデバッグにもよく使用されています。 6. コメントアウト コメントアウトは自分、あるいは人に見せるためのメモ書きです。 これで記述した文字はコードとして認識されず、ブラウザにも表示されません。 最初コードを書くのに慣れない場合は、言語化し理解を深めるため、積極的に書いていくのも良いでしょう。 コメントアウト例 ・「//」と記述してから行末までの部分 ・複数行記述する場合は「/**/」 ※言語によってコメントアウトの方法が違う場合があるため注意 「//」を使用した例 HTMLで<!-->を使用した例 コードの説明や一時的にコードを無効化させて 後でコードを復活させたい場合に利用する。 頻繁に利用シーンがあるので慣れておきましょう。 7. 変数 「値を入れておく箱」と例えられることが多いです。 では、箱って具体的に何が出来るでしょうか？ 中に物を入れる var box = '荷物'; 中の物を出す var box = '荷物'; // 「荷物」と表示される console.log(box); 中の物を交換する var box = 'りんご'; // この時点では「りんご」と表示 console.log(box); // 中身を交換する box = 'いちご'; // 「いちご」と表示される console.log(box); 運べる // それぞれ箱を用意 var box1 = 'りんご' var box2 = 'いちご' var box3 = 'みかん' // 順番にトラックへ箱を積んでいく(配列) var truck = []; truck[0] = box1; truck[1] = box2; truck[2] = box3; // 「0:"りんご" 1:"いちご" 2:"みかん"」と表示 console.log(truck); ★変数宣言 コンピューターにこれからこの箱を使いますよと教える JavaScriptは主に「var」「let」「const」3種類の宣言方法がある 「変数は値を入れる箱」としてイメージのままで、私の覚え方を下記に記載します。 ①var 無料の開けっ放しの箱。 開けたままのため何処からでも中の物を出し入れ可能。（再代入〇） 無料のため再度箱の作り直し可能。（再宣言〇） ②let 高級な開けっ放しの箱。 開けたままのため何処からでも中の物を出し入れ可能。（再代入〇） 高級なため再度作り直しは不可。（再宣言×） ③const 箱に中身を入れ、ガムテープでガチガチに蓋をした箱。 そのため再度開けて物の出し入れ不可。（再宣言・再代入×） 中身がもう変わらないため分かりやすい。 コード例） // var=無料の開けっ放しの箱 var freeBox = 'りんご'; // 再代入〇 freeBox = 'いちご' // 「いちご」と表示 console.log(freeBox) // 再宣言〇 var freeBox = 'みかん'; // 「みかん」と表示 console.log(freeBox) // let=高級な開けっ放しの箱 let luxuryBox = 'ぞう' // 再代入〇 luxuryBox = 'ごりら' // 「ごりら」と表示 console.log(luxuryBox) // 再宣言×（エラー） let luxuryBox = 'きりん' // 箱に中身有でガチガチに蓋をした箱 const closedBox = 'ピカチュウ' // 再代入×（エラー） closedBox = 'フシギダネ' // 再宣言×（エラー） const closedBox = 'リザードン' ざっくりでもイメージ出来れば御の字のため、 ひとまずスコープやホスティングは置いておきます。 それぞれの細かな違いについて気になる方は自分で調べてみてください。 ※気が向いたら記事にするかも。。 まとめ 最初は「自分の記述したコードがイメージ通りに動作する」という 楽しさを知ることが、継続に繋がる一つではないかと考えております。 暗中模索で進めていく楽しさもありますが、その楽しさはある程度慣れてから生まれるものです。 プログラミング開始初っ端でつまづくほどきついことはないと思います。 （2年前未経験からエンジニアを目指した自分がそうでした笑） 閲覧数やブックマークなど反応がいくつかあれば、別記事でJavaScriptに関して投稿するかもです。
- 投稿日：2022-01-15T11:21:18+09:00
HTMLとCSSとJavaScriptをひたすら書いて動かして理解する【1回目】
はじめに 最近は仕事でhtmlとcssとJavaScriptを使う機会が多くなりました。期待通りに動くものは作れるものの基本的な理解が追い付いていないような気がする今日この頃です。なので、基本的なことから、積み上げて、この記事に書いていこうと計画を立てております。 まずは最も単純なページを作成する index.html <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> ボディ </body> </html> ビデオを再生する機能を追加する 動画ファイルを準備します。 今回はWindowsのカメラ機能を使って動画を作成しました。 1.Windowsスタート⇒カメラでカメラ機能を起動します。 2.ビデオのボタンを押して、ビデオの撮影を開始します。 3.録画停止ボタンを押して、録画を停止します。 4.ピクチャフォルダのカメラロールフォルダにmp4ファイルが生成されます。 5.mp4ファイルのファイル名をtest01.mp4に変更します。 index.htmlにvideoタグのプログラムを1行追加します。controlsを付けると再生ボタンが表示されますので付けましょう。 index.html <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <video src="./test01.mp4" width="640" height="480" controls /> </body> </html> そして、index.htmlとtest01.mp4を同じフォルダに配置して、index.htmlをダブルクリックします。さっきのmp4がブラウザで再生することができました。 ビデオ再生画面を複数並べます。 まずは横並びにします。 <video>タグを</video>で閉じています。 index.html <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> </body> </html> 横に並びました。 つぎは縦並びにします。 </video>に<br>で改行を追加しました。 index.html <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video><br> <video src="./test01.mp4" width="640" height="480" controls ></video> </body> </html> 縦に並びました。次はcssを使用して縦並びにします。 つぎはcssを使用して縦並びにします。 index.cssファイルを作成して、index.html,test04.mp4と同じフォルダに配置します。<br>は削除します。 index.html <html> <head> <link rel="stylesheet" href="index.css"> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> </body> </html> ビデオ属性をブロック要素にするだけで縦に並びます。 index.css video { display:block; } cssを編集して、斜めに並べます。 index.css video { display:block; } video:first-child{ margin-left:0em; } video:nth-child(2){ margin-left:40em; } video:nth-child(3){ margin-left:80em; } video:nth-child(4){ margin-left:120em; } video:nth-child(5){ margin-left:160em; } video:nth-child(6){ margin-left:200em; } video:nth-child(7){ margin-left:240em; } マウスオーバーしたビデオを拡大するようにしてみます。 index.htmlを編集します。<video>を<div>要素で囲みます。classはclass01を付与。 index.html <html> <head> <link rel="stylesheet" href="index.css"> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <div class="class01"> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> <video src="./test01.mp4" width="640" height="480" controls ></video> </div> </body> </html> index.css .class01 video { transition: 1.0s; } .class01 video:hover { transform: scale(1.5, 1.5); } video { display:block; } video:first-child{ margin-left:0em; } video:nth-child(2){ margin-left:40em; } video:nth-child(3){ margin-left:80em; } video:nth-child(4){ margin-left:120em; } video:nth-child(5){ margin-left:160em; } video:nth-child(6){ margin-left:200em; } video:nth-child(7){ margin-left:240em; } マウスオーバーしたビデオが拡大されました。今回は1.5倍。transformのscaleを1.5にしているので。ちなみに、transitionの1.0sは拡大するまでの秒数です。10sとかにしてみると、拡大するまでに時間が掛かって気持ち悪い動きになります。 おわりに 今回は、ブラウザで動画を再生する簡単なプログラムを作成しました。引き続き、簡単なプログラムをひたすら書いて記事にしていこうと思います。 それでは、また。
- 投稿日：2022-01-15T10:17:23+09:00
Vue.jsの仕組み
概要 ここではVue.jsの基本的な使い方について記載します。 基本コード 以下のコードを例に挙げて説明していきます。 <!DOCTYPE html> <html> <head> <title>My First Vue App</title> <script src="https://unpkg.com/vue"></script> ----- ① </head> <body> <h1>Vue.js</h1> <div id="app"> {{ text }} ----- ② </div> <script> ----- ③ var app = new Vue({ el: '#app', data: { text: 'Vue Test' } }) </script> </body> </html> Vue.jsに関係している部分はコードの①,②,③の部分になります。 ①ではVue.jsを読み込んでいます。 ②で変数に入れられた文字列の表示を行います。 ③ではVueオブジェクトの定義をしています。 el:というプロパティでVueオブジェクトの対象となるものを指定します。 まとめ Vue.jsはhtmlに埋め込むことで非同期処理を実現できます。 今回はhtmlファイルに書き込むような形でしたが、複雑な処理の場合はjs用にファイルを切り分けて実装しても良いと思います。