Webサイトつくってみた＆＆ドラム叩いてみた（2021オンやる）

銀色のアライさん

2021年12月11日 12:32

サイバー大学のアライさんなのだ　遅ればせながら記事をかきました

10月3日（日）にオンやるという祭典を開催しました

今年のオンやるはVR空間での開催ということで、見て頂ければ分かると思いますが素晴らしかったです
オンやるに参加させて頂くにあたり、今年のアライさんは、「Webサイトつくってみた＆＆ドラム叩いてみた」という企画を考えました

まず最初に参考にさせて頂いた動画はこちらなのだ　

ファイルパスの階層がよくわからなかったのですが、この動画でindex.htmlのファイルの置き場所などを理解しました

おもしろいと思ったのは、JSのキーイベント処理の部分

//JavaScript

addEventListener("keypress", function(x) {
 // alert(x.which);
  if(x.which == 13) {

”keypress”というイベントを使って、もしキーボードの１３番が押されたら何か処理をするという所です（この場合１３番はエンターキーですのでエンターキーが押されたら～するという記述です）

この１３番という番号ですがキーボードにはアスキーコードが割り振られていて、例えばキーボードのBは、９８番です（下の表の最右列参照）

制作を進めていって気づいたのですが、”keypress”というイベントは、PCではちゃんと機能するけどスマホのキーボードからは、反応しないということです

MDNサイトで確認すると"keypress"は、すでに廃止されたイベントだったのです。代わりに”keyup”イベントに変えたらスマホでも機能しました。しかし番号が先ほどとは違います。先ほどは、Bだと９８番でしたが、”keyup”に変えた場合は６６番でした（上の表の右から２列目参照）

//JavaScript

addEventListener("keyup", function(x) {
  if(x.which == 66) {

次におもしろいのは、JSのtoggleメソッドですのだ

今回制作したアライさんのＷebサイトは、基本的に下記のようなコードで、もしキーボードが押されたら、toggleメソッドで”displayHide”というクラスをonとoffのスイッチのように切り替えています

//JavaScript

addEventListener("keyup", function(x) {
  if(x.which == 66) {
      musicVideo.classList.toggle("displayHide");
   　 titleArea.classList.toggle("displayHide");
  }
})

”displayHide”はCSSでディスプレイを非表示にしていますので、最初は非表示の状態ですが、キーボードのキーを1回押すとコンテンツが表示され、もう1回押すとまた非表示になります

/* css */

.displayHide {
 display: none;
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*********************************************************************************📘デザインやカラーは下記の2冊を参考にさせて頂きました📘

Mana(2019-2020)　　　　　　　　　　　　　　　　　　　　　　　　　　　1冊ですべて身につくHTML & CSSとWebデザイン入門講座　　　　　　　　SBクリエイティブ株式会社

Mana(2021)　　　　　　　　　　　　　　　　　　　　　　　　　　ほんの一手間で劇的に変わるHTML-CSSとWebデザイン実践講座　　　　　SBクリエイティブ株式会社

目的にあったカラーコードが載っていて(入門講座の方）、デザインがすてきだし、わかりやすい**********************************************************************************　　　　　＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

これは上の本の内容じゃないんだけど、ボタンを右寄せに表示させたい場合で text-align が効かない時に margin: 0 0 0 auto; でうまくいった

/* css */

.button {
 margin: 0 0 0 auto;
}

しかしスマホの挙動がおかしいので、 ~~margin: 0 0 0 29rem~~; とかやってみたら、スマホでもOKだった

------- 追伸 --------
margin: 0 0 0 29remはおかしいと思うので、親クラスにposition: relative;でボタンにposition: absolute;でいいと思います

<div class="container">
  ...

  <button class="button">ボタン</button>
</div>

css
.container {
  position: relative;
  ...
}
.button {
  position: absolute;
  buttom: 0.5rem;
  right: 0.5rem;
}

*********************************************************************************わからん事は質問するのだ

Node.removeChild() メソッドを使って画像を削除するとエラーが出てしまい、いくらググってもわからない、記事が見つからない、ということがありましたがteratail（テラテイル）で質問したら、答えを頂きました

//JavaScript

while (img = document.querySelector('img')) {
       img.remove();
     }

上記が正解コードです((+_+))

document.querySelectorの後に ('img') のようにタグを指定できるの知らなかった

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

オーディオで指定した秒数から秒数まで繰り返すコードも教えて頂きました

if文の所なんか、なるほどなです

timeupdate

再生の現在位置が更新されたときに使うイベントです
参考：JavaScriptのイベントをたくさん見られるサイト https://listener.noplan.cc/media/

難しいコードでも、リファレンスなどを見てサラッと利用できるように精進したいです

//JavaScript

audioElement.addEventListener("timeupdate", function() {

     let input_time1 = document.getElementById("input_time1").value;
     let input_time2 = document.getElementById("input_time2").value;

     if (audioElement.currentTime >= input_time2) {
       audioElement.currentTime = input_time1;
     }
   });

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ドラム叩いてみた動画を作ったのだけどWebサイトにアップしたら、GitHubから100MBを超えてますよっていうエラーが出ましたのだ

これにより覚えたてのGitHubのコマンドをいろいろと打つことになったのだが、授業以外でコマンドを打つのは初めての試みだったのだ

GitHubと毎月5ドルの契約を結び、Git LFSをインストールして無事に動画をアップできたと思いました

が、Webサイトで見てみると、くるくるマークのローディングアニメーションがとまらないのです　なかなか動画が再生されないのです

ホスティングサービスはNetlifyを使っていますが、GitHub Pagesを使ってもやはりだめでした（GitHub Pagesはリポジトリにファイルをアップできませんでした）無料版では重たいファイルは使用できないみたい

ということで有料の他のレンタルサーバーにして解決しました

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

最後に参考のため書き留めておきますのだ（Git LFSを使う場合）

Git LFSで新たに2個目のファイルを追加したい場合にファイルをpushして、Netlifyでデプロイしようとすると下記のようなエラーが出るかもしれません

Preparing Git Reference refs/heads/master
Error checking out branch: Downloading static/uploads/2021/07/ファイル名.mp4
Error downloading object: static/uploads/2021/07/ファイル名.mp4: Smudge error: Error downloading static/uploads/2019/07/TWH4.jpg (26c54920485c7aa233af523cb19d5ba40436cc2a6030efefcb5f573135ce327d): batch request: missing protocol: ""

Errors logged to /opt/build/repo/.git/lfs/logs/20210701K123.456789.log
Use `git lfs logs last` to view the log.
error: external filter 'git-lfs filter-process' failed
fatal: static/uploads/2021/07/ファイル名.mp4: smudge filter lfs failed

Netlifyの[設定]> [ビルドとデプロイ]> [環境]> [環境変数]で設定する必要があります

キーの所にGIT_LFS_ENABLED　値にはtrueと入力 ⇒ セーブを押してOK

です。　エラーなくなりました（エラーはなくなるけど、上述した通りNetlifyでは容量が足りないので、新たに追加契約しないとダメみたい）

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

※追伸
重たい動画ファイルなどをWebサイトにアップするには、まずYouTubeなどにアップしてから、それを読み込むようにすればいいみたい
まだ試してないけど有料のサーバー借りるまでもなかったのかなー？

最後までお付き合い頂きありがとうございましたのだ

この記事が気に入ったらサポートをしてみませんか？