今さら聞けないHTML　2022年11月06日

モーダルウインドウの実装方法4選

## 始めに

EC やイベント用 LP で期間限定のキャンペーンなど告知したいときにアピールしやすいモーダルですが、実装には色々方法があるのでご紹介、というか自分としても整理してみたいなと思い書いてみます。
HTML・CSS・JS 初心者の方やクライアントからの要望で使わないといけなくなったけど最近使ってなくてどんな感じにやればよかったっけ？という方へ参考になれば幸いです。

## 実装方法一覧

今回実装方法として上げるのは以下になります。

– 素の JavaScript（Vanilla-JS）
– jQuery
– Input ＋ Label
– Dialog

## 素の JavaScript（Vanilla-JS）

一番スタンダードなやり方かなと思います。

超簡単！Railsでファビコンを設定してサイトをおしゃれにしよう

ファビコンを使って手軽にサイトをおしゃれにできたのでメモ感覚で投稿します。

# ファビコンとは？
検索したときのタブの左側にある小さなアイコンです！
手軽に作れてサイトを装飾できるのでとてもおすすめです！

# 実装
やることは２つだけ！
1 ファビコンを作成
2 HTMLファイルに記述　のみです！

# ファビコンを作成
私は以下のサイトを参照させていただきました

https://www.websiteplanet.com/ja/webtools/favicon-generator/

# HTMLファイルに記述

作成したアイコンを開発環境に保存した後に

“` application.html.erb

#省略
<%= favicon_link_tag('保存したアイコンのファイル名') %>

“`
を記述
これだけでファビコンが表示されました！
ご参考になれば幸いです。

HTML/CSSのチュートリアル

HTML/CSSを学習するにあたって、YouTubeの動画を2本ほど参考にした。いずれも約７時間程度と激重なので、今後学習する方々が参考にできるよう総括的な感想を残そうと思う。

HTML & CSS Full Course – Beginner to Pro (2022) (https://youtu.be/G3e-cpL7ofc)：
とても優しいチュートリアル。スムーズに理解することを優先し、htmlのテンプレートの書き方に触れるのも動画の後半からとなっている。継承やidといった概念が触れられない点が、「わかりやすい」の犠牲になってしまっている印象。コードはGitHubから参照可能。

HTML & CSS for Beginners | FREE MEGA COURSE (7+ Hours!) (https://www.youtube.com/watch?v=iG2jotQo9NI)：
標準的なチュートリアル。理解より本質的な部分を優先し、触れる属性の数も多いので一本目がこれなら折れていたかもしれない。軽い事前知識がある方向け。

多少２番目に批判的とも取れる感想を述べているが、

パワーワードをバトルさせ勝敗を決定するアプリを作成してみた

### パワーワードを戦わせ勝敗を決っていするアプリを作成してみた

### 1.パワーワードとは
この記事を読んでいる方はどんなパワーワードが好きですか？
あるいは、**「これは！」** と思うようなパワーワードはありますか？
世の中はパワーワードにあふれています。
Wikipediaの記載によると **「力のあることば」「強い印象のあることば」**、あるいは
**表現が異様で強烈な印象のあることば**と記載されています。
個人的な体感ではありますが、私は後者の意味で使用することが多いです。

[パワーワード-wiki](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%AF%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89)

そんな世の中にあふれているパワーワードを戦わせるアプリを作成してみました。

### 2.「ぱわーわーどばとる」
作成したアプリは以下に公開しています。
見た目はいまいちですがさわっていただけると嬉しいです。

https://musical-lily-4b920e.netlify.app/

【初心者向】jQueryでHTMLの値を取得する方法

# HTMLの変数をjQueryで使えるようにしたい

例えばLaravelでWEBアプリを作成する際にはデータベースと連携して
`変数をHTMLに渡す`ことがよく用いられますが

HTMLの変数をjQueryで使えるようにするためには
`data()メソッド`を使う必要があります。

## data()メソッドとは？

HTMLタグへ事前に`data-****`などと属性を付与しておくことで、
付与していたHTMLタグのdata属性に対してjQueryから
`値を取得`したり、`属性名を設定（変更）`したり
`値を変更`したりすることができます

## data()メソッドの使い方

HTMLの値を取得するには予めHTML内のタグへ
独自の属性、つまりdata属性を付与しておく必要があります。

### htmlの書き方

属性の書き方は`data-****`のように
`data-`にプラスして`任意の名前`を記述します
“`html:sample.html

HTML/CSSのみで追従するスプリットスクリーンレイアウト実装

## スプリットスクリーンレイアウト
画面全体をバチコーンと分割したレイアウトをスプリットスクリーンレイアウトといい、オシャレなサイトでよく使われている印象です。
スプリットレイアウトと言われているときもあり正式名称は謎です。

## 実装
今回は画面を二分割した上で、片方のコンテンツがスクロールしている間、もう片方はページ上部にくっついているものを実装してみました。
SP幅（とりま749px以下）では１カラムにし、PC表示ではタイトルとテキストエリアを交互にしています。

width:◯◯px;にしても、要素の幅が可変になる場合の対処法

## 結論
1. 隣り合う要素（青）に`width: calc(100% – 123px);`を当てる。
2. 親要素（緑）に対し、`display: flex;`と`justify-content-center;`を当てる。
:::note info
赤で囲んだ要素が対象の要素（widthが可変になる要素）の場合
:::


### 詳細
赤で囲んだ要素（`

`）のwidthが、
デバイスの幅によって変わった。
`width: 92px`と指定しているのにもかかわらずだ。

実際に、デバイスの長さが違うと
こんな風に表示される。
[![Image from Gyazo](https://i.gyazo.com/7f18ec46a32df807d8a96bed8f4af624.pn

Bootstrap5でオフキャンバス付きナビゲーションバーを実装する

この記事では、Bootstrap5でオフキャンバス付きのナビゲーションバーを実装する方法を記載しています。
約１年ほどBootstrapを使用しておりましたが、ハンバーガーメニューを開くと要素が上からスライドしてくることに不満を抱いていました。
今回、要素が横からスライドしてくるナビゲーションバーの実装方法を見つけたので、記録に残しておきたいと思い、記事を書きました。
【公式】–> https://getbootstrap.jp/docs/5.0/components/offcanvas/

完成図↓

# 手順
1. [Bootstrapを使用する準備をする](#1-bootstrapを使用する準備をする)
2. [HTMLにナビゲーションバーのタグを追加する](#2-htmlにナビゲーションバーのタグを追加する)
3. [CSSを設定する](

?JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## popupのポモドーロタイマーの処理
popupに戻ってきました。
おさらいですが現状popupはこうなってます。
“`popup.js

//色々定義
const ~~
let ~~
//がいっぱい

//タブの切り替え
document.addEventListener(‘DOMContentLoaded’, function(){省略}, false);

//「タイマーを設定する▷」を押した時
makeTimerBtn.onclick = function() {省略};

Firebaseを使ったチャットアプリの導入と機能追加

**Firebase**とは、Googleが提供しているアプリ開発プラットフォームである。
Firebaseがサンプルコードを提供しているチャットアプリを導入する流れについて説明する。
また、導入したアプリに独自で追加した機能についても紹介する。

## 開発環境
この記事の内容を実行した際の開発環境は以下の通り。
* PC
MacBook Air
プロセッサ：1.6 GHz デュアルコアIntel Core i5
メモリ：8GB
OS：macOS Ventra バージョン13.0

* コードエディタ
Visual Studio Code
バージョン： 1.71.1 (Universal)

* ブラウザ
Google Chrome
バージョン： 107.0.5304.87（Official Build）

## 導入方法
Firebase Codelabが公開している[ドキュメント](“https://firebase.google.com/codelabs/firebase-web?hl=ja#0”)に沿って作業をしていくことでチャットアプリは導入できる。(閲覧日：2022/11

?JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## ポモドーロタイマーの処理
前回の記事で“stopId = setInterval(pomodoro_timer, 1000);“と出てきました。ようやくメインの“pomodoro_timer（）“を見ていきます。

“pomodoro_timer（）“は
ポモドーロタイマー ＝ 集中時間用カウント + 休憩用カウント
pomodoro_timer() = count_down() + interval_count_down()

### count_

?JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理–](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## start/stop/reset押した時の挙動
“`background.js
let stopId

//start・stop・resetボタン押された時の処理
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
await keepAlive();

//switchがonの時 かつ stopIdがnullの時
if(r

?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## background.js
このjsファイルでは
・拡張機能を初めてインストールした時にする処理
・５分間の再接続処理
・start/stop/reset押した時の挙動
・ポモドーロタイマーの処理
を行う。この記事では拡張機能を初めてインストールした時にする処理を記述していく。

## 初インストール時の処理
初めてインストールした時、タイマーのフォームに最初からデフォルト値を入れて置きたかったので、“chrome.runtime.onInstalled.addLi

【アクセシビリティ】WAI-ARIA で指定できる属性の全部をまとめてみた。

## はじめに
みなさんは、WAI-ARIAを知っていますか？

私は、スクリーンリーダーでも読めるようにするため、aria-label を使ったり、
roleを使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。

ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、いまいちわからないなと思っていました。
そのため、W3CのWAI-ARIAについてのリファレンスを読んで、理解を深めようと思いました。

なので、今回は、WA-ARIAで指定できる属性の全部をまとめたので、ぜひご覧ください。

## WAI-ARIAとは？
WAI-ARIAは、**Web Accessibility Initiative Accessible Rich Internet Applications**の略で、アクセシビリティ向上の目的で、W3Cが定めた仕様です。

また、WAI-ARIAをつかうことで、HTMLで表現できない意味(セマンティック)を属性で補完することができ、
スクリーンリーダーなどの支援技術を通じて、障害を持つ方に対しても適切な情報を伝えられるよ

?JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-](https://qiita.com/mmaumtjgj/items/d15df85bcb9dcf31d87d)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## タイマー作動中の有無で表示する画面の処理
popupの画面が閉じても、タイマーが継続中なのか、一時停止しているのかによって表示する画面を切り替える。

“`popup.js
chrome.storage.local.get([‘timerStatus’,’btnStatus’], function(v) {
if(v.timerStatus == true){
timer_display();
if(v.btnStatus

?JS初心者が作るGoogle extension V3 ⑤ -スタート/ストップ/リセットの各ボタン機能-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-](https://qiita.com/mmaumtjgj/items/6e1a978656580dab59d7)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## タイマーとボタンのステータス
現状まだタイマー自体の挙動は入れていないが、ボタンを押した際に複数のステータスを与える。
“timerStatus“と“btnStatus“の２つの属性を足す。

“timerStatus“はタイマー自体のステータスで、“true/false“で経過時間を表示の有無を決める。

“btnStatus“はタイマーが「start」状態、「stop」状態で、popupを再度開いた時のタイマーの挙動のスイッチとして担う。

この２つの属性をローカ

Webを支える技術のまとめ(2部)

# はじめに
Webを支える技術のまとめ(1部)の続きとなります．
今回のWebを支える技術のまとめ(2部)を初めて読む方は，前回のWebを支える技術のまとめ(1部)から見ることをお勧めします．
リンクは，https://qiita.com/HikaMaru3/items/5d021713768bc4e20ab7 です．
(「Webを支える技術」のリンクは最後の参考文献に記載しています．)
# URIの仕様
URIとは，Uniform Resourse Identifierの略．
Webに存在するすべてのリソースを一意に示すことができる．

## URIの構文
URIの例を基に説明する．
“`
http://yohei:pass@blog.example.jp:8000/search?q=test&debug=true#n10
“`
URIは以下のように分けられる．
– URIスキーム：http
– URIが利用するプロトコル
– ユーザ情報：yohei:pass
– リソースにアクセスする際に利用するユーザ名とパスワード
– ホスト名：blog.example.j

太宰治を墓から蘇らせて一緒に撮影したい。ARで実現させる（Step1）

# (僕）待望の太宰治企画

AR.jsに触れて、すぐにこれを実現したいと思った。
太宰治を墓から蘇らせてツーショットを撮るのだ。なんなら妻の津島美知子と森鴎外も墓から出現させて4人で撮影をしたい。
# なぜつくりたいのか
三鷹の禅林寺に太宰治の墓がある。6月19日は太宰治の命日で、全国から熱心な太宰ファンが墓参りに訪れる。僕もそのうちの一人だった。

墓オブ太宰 pic.twitter.com/50h7sUOr0t

— よしだじゅんや (@atoms50) January 7, 2016

この墓の凄いところは、太宰と妻の墓の向かいに、森鴎外の墓もあることだ。禅林寺に訪れると、時空を超えて（とはいえ100年やそこらなのだが）彼らと空間を共にしている

VS CodeでJinja2を快適に書こう (便利なsnippet)

# Jinjaはとにかく打つのが大変

Jinjaを使っている方、そう思いませんか？(私だけでしょうか…？)

変数を使う際は、`{{ var }}`で表記しますが、`{`と`}`を2回も打たないといけない。
しかも、if, forを使おうもんなら、`{% endif %}`を末尾に付けなければいけない。

簡単なのですが、打ち込む`{`が多い分、不便です。

そこで、去年公開されたVSコードの拡張機能を紹介します。
(日本語の紹介ページがなかったので、簡単にQiitaで紹介することにしました。)

これを使って、快適なJinja2ライフを送りましょう！

# Jinja Snippets


[こちら](https://marketplace.visualstudio.com/items?itemName=noxiz.jinja-snippe

WordPressの管理画面からアップロードできるファイルサイズ上限の変更

## はじめに
##### info.php・・・サーバーの情報をFTPから知れる（見るだけ、ファイルの中身は以下のみ、ルート直下に配置し、そのURLにアクセスすれば見れる）
“`php:php.info

“`

##### php.ini・・・サーバーの情報を司るマスターファイル
##### .user.ini・・・php.iniの設定を上書きできるファイル（ディレクトリごとに設定可能、ルート直下に置けばその下層のファイルに全て適応される）

## .user.iniファイルの書き換え

以下のコードを書いたファイルをルート直下に設置（ディレクトリ単位に入れれば個別に設定変更も可）
“`php:.user.ini
upload_max_filesize = 200M
post_max_size = 200M
“`