今さら聞けないHTML　

初めてのAstro

# はじめに
プロジェクトでAstroを使うことになったので軽くドキュメントの内容をまとめてみました。

# Astroとは
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
(https://docs.astro.build/ja/concepts/why-astro/)

Astroは高度なWebアプリケーションを構築するために設計されたフレームワーク(Next.jsなど)とは異なり、ブログやポートフォリオサイトといった静的なWebサイトを作るのに向いています。

Astroはサーバーサイドでのレンダリングをメインとしており、この点も最近のJSフレームワークと異なる点となっています。
サーバーサイドでのレンダリングのおかげでパフォーマンスの向上にも期待ができる。

フロントエンドを触る人には周知の事実かも入れないが一応このような事例がある。
– 高速化100msごと → コンバージョン数1％増（Mobify、年間38万ドルの収益）
– 50%高速化 → 売上12%増（AutoAnything）
– 20%高速化 →

[JavaScript] アニメーションを学ぶ

## はじめに
JavaScriptでアニメーションの基本の書き方について学習したため備忘録として残しています。

## アニメーションの基本
JavaScriptでアニメーションの指定をすることで、より豊かな表現が可能になる。
様々な関数やイベントと組み合わせることで、より柔軟にアニメーションを作成できる。

:::note
`キーフレーム`:アニメーションは開始時の値と終了時の値を指定することで、その2点の間の値を自動補完して滑らかな動きで表示することができる。
この自動補完の動かす内容のことを指す。
:::

### 書き方
“`js:web Animation APIの基本の書き方
動かす要素.animate(第一引数, 第二引数);
“`
第一引数にはキーフレーム(オブジェクト)を指定する
第二引数は再生時間(単位は**ミリ秒　１秒は1000と指定する)や細かい動きの指定

## animateで指定できるプロパティ
複数を同時に指定することができる。
アニメーションの再生時間である[duration]は**必須項目**

### delay
アニメーションの開始を遅らせ

今年KaiRAのWebページを新しくした話(with @matsuda_tkm)

# はじめに
本記事は、京都大学人工知能研究会KaiRAのAdvent Calender 18日目の記事です。

今年、私motoと@matsuda_tkmさんの二人でKaiRAのホームページを新しく作り直しました。
KaiRA後輩たちへの引継ぎ資料もかねてKaiRAのホームページを新しく作り直したことについて話していきたいと思います。

📣KaiRA公式サイトがリニューアル！

雰囲気をガラッと変え、情報もわかりやすく整理しました。勉強会のようすや、今読んでいる輪読本もわかるようにしました。このサイトを見て、KaiRAに興味を持つ学生が増えるとうれしいです😊

←旧サイト　新サイト→https://t.co/EzHDO8htaB pic.twitter.com/J05CVoAdEv

&mdas

【アクセシビリティ】アクセシビリティを意識したラジオボタンの作り方

## はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**ラジオボタン**」に焦点を当てて、アクセシビリティを意識したラジオボタンの実装方法とラジオボタンで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したラジオボタンの仕様
### ⚪︎ ラジオボタンとは？
ラジオグループは、ラジオボタンとして知られるチェック可能なボタンの集まりで

【CSS】Web Platform Baselineってなにもの？

## はじめに
みなさんは、**Web Platform Baseline** ってご存知ですか？

最近 [mdn](https://developer.mozilla.org/ja/docs/Web/CSS/grid) を見ていると、以下のようなものを見るようになったかと思います。


この部分が、**Web Platform Baseline**です。

私がこの **Web Platform Baseline** を見た時は、ただCSSプロパティのブラウザ互換性について、教えてくれる項目が増えただけと思っていた。

しかし、思い込みで

ストリーミング機能を持ったAIチャットシステムの開発 (2)

# はじめに

AIチャットボットは、ユーザーとのインタラクティブな会話を実現するために広く使われています。前回と今回の記事で、LangChain、非同期ジェネレータ、FastAPI、およびHTML/CSS/JavaScriptを使用して、リアルタイムにメッセージをストリーミングするAIチャットシステムを開発する方法を紹介します。


DALL-E 3で作成したFastAPIアプリのイメージ画像

前回

全ての Web アプリケーション開発者に告げる。文脈に応じたエスケープしませんか。

# はじめに

この記事は [2023 年の MDN 翻訳 Advent Calendar](https://qiita.com/advent-calendar/2023/mdn-translation-community-japan) 向けに作成したものです。

こんにちは。debiru です。Web は略語ではないので WEB と書かないようにしましょう委員会。

今日は、みなさんに「**コンテキスト（文脈）に応じたエスケープ**」という概念を習得してもらうためにやってきました。

# コンテキスト（文脈）とは

一般にコンテキストという言葉は、ある物事に対して、その物事が存在する環境における状態・状況を表す言葉です。ここでは、特に「**プログラミングにおける文字列**（以下、文字列）」を対象に、そのコンテキストに応じたエスケープの必要性について解説していきます。

文字列のコンテキストとは何でしょうか。次の例を見てください。

“`php

ようこそ さん！

メッセージ：

[CSS] サイズ指定に使う単位を学ぶ

## はじめに
CSSにおける長さの単位について学習したため、忘れないための備忘録として作成しています。

## webサイト上で使う単位の種類
単位は大きく分けて、**相対単位**と**絶対単位**の2種類に分けられる

### 相対単位
ブラウザの表示領域や他の要素に指定したサイズを基準として相対的に算出される。
基準にするサイズによって大きさが変化する。
– %
親要素を基準とした時の割合の単位。親要素の幅が600pxの時、子要素に50%が指定されたらその幅は300pxとなる。
フォントサイズに指定した場合は、親要素のフォントサイズが16pxの場合、**16px = 100%**

– em
親要素のサイズを基準にした単位。フォントサイズに指定されることが多い単位。親要素のフォントサイズが16pxの場合**16px = 1em**

– rem
ルート要素(タグ)のサイズを基準に計算される単位。html要素のフォントサイズが16pxの場合**16px = 1em**

– vw
ビューポートの幅を基準とした割合の単位。ビューポートとはブラウザでWebサイトを閲覧してい

一瞬でHTMLの構造を把握出来るChromeの拡張機能を紹介

# はじめに
こんにちは、RAOです。

WEBアプリケーション開発を行っている際

「この画面ってHTMLの構造どうなっているんだろう」
「なんかアイコンの位置ズレてる気がする、、」

って事よくあると思います。

こんなシーンに役立つChromeの拡張機能を紹介したいと思います。

本記事はHRBrain Advent Calendar 2023の17日目の記事です。

https://qiita.com/advent-calendar/2023/hrbrain

# UI Build Assistant
こちらが今回ご紹介するChrome拡張機能です。

https://chromewebstore.google.com/detail/ui-build-assistant/clbhieamajlakjobcoiheklaoldcjhjf?pli=1

それでは早速使ってみましょう。
今回はZennを例にします。（特に意味は無いです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

bootstrap5 を使ってチェックボックとスクロールバー付きのテーブルを作成

メモ

“`javascript
function toggleCheckboxes(source)
{
// 全てのチェックボックスを取得
let checkboxes = document.querySelectorAll(‘.rowCheckbox’);

console.log(checkboxes.length);
for (let i = 0; i < checkboxes.length; i++) { // 書くチェックボックスの状態を更新 checkboxes[i].checked = source.checked; } } ``` ```css .scroll-container { /* テーブル全体のサイズ */ height: 500px; overflow-y: scroll; border: 1px solid #dee2e6;

【JavaScript】シンプルな入力フォームを簡易に作るためのJS

本記事ではシンプルな入力フォームが作りたいなあというモチベーションのもと作成しています。
シンプルな入力フォームのモックを作り（HTML, CSS）、そのHTMLの作りをもとにJavaScriptで書き出していくといった流れで作成します。最終的にはHTMLフォーム上で項目名や2カラムで表示させる項目などを指定し、同画面のtextareaにForm HTMLを書き出すというものを作りたい。（現状はForm HTMLをtextやemailなどのinput要素のみを1カラムで表示するといったものまで作成。）

本記事を作成するにあたり、参考にしたのは次の文献です。

https://formbold.com/templates

https://developer.mozilla.org/ja/docs/Web/HTML

前者はFormのレイアウトに、後者はHTML周りなどの全般的な参考文献として活用しています。

以下のような流れで紹介していきます。

1. 作成フォームのモック
2. Form要素
3. JavaScriptの作成
4. まとめ

# 1. フォームのモック
[こち

DjangoのDeleteView/CreateViewの実装方法を理解する

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

前回、ListViewとDetailViewの実装方法理解の為にToDoのWebアプリの作成を行いました。
今回は同じTodoアプリに機能を追加していく形でDeleteViewとCreateViewを実装していきたいと思います。前回の記事は以下となりますので、併せて参考にしていただければと思います。

https://qiita.com/ohtsuka-shota/items/0e651df83ce5415628f8

# github
今回のコードは以下で確認できます。
適宜ご覧頂ければ幸いです。

https://github.com/ohtsuka-shota/publicDjangoStudy/tree/main/deleteCreateTestPJ

# 環境構築
## 環境イメージ
deleteCreateTestPJという名前のプロジェクトを作成し、todoAppという名前のアプリケーションを作成しております。
ファイル単位で前回から増えたところはDeleteViewとCreateViewを実装

フォームを POST するときの注意事項まとめ

わかっていてもよく抜けてしまう場合のある事項をチェックリストとしてまとめてみました。

# method=”POST”

フォームの属性に method=”POST” がないと、フォームの動作のデフォルトでは “GET” メソッドでフォームが送信される。

<form method=”POST”> …

# enctype=”multipart/form-data”

ファイルアップロードを行う際には enctype=”multipart/form-data” の指定が必要である。

<form method=”POST” enctype=”multipart/form-data”> … </form>

## (参考)

enctype=”multipart/form-data” の指定があるとリクエストヘッダの Content-Type が “multipart/form-data; boundary=—-…..” などとなり、通常のフォームの場合と異なる。フォームデータはコントロールごとに boundary 文字列により分けられる。

【アクセシビリティ】アクセシビリティを意識したメーターの作り方

## はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**メーター**」に焦点を当てて、アクセシビリティを意識したメーターの実装方法とメーターで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したメーターの仕様
### ⚪︎ メーターとは？
メーターは、定義された範囲内で変動する数値をグラフィカルに表示するコンポーネントです。
そのた

セクションと見出しを可視化するブックマークレット

## このブックマークレットについて

このブックマークレットは、ウェブページの見出し（`h1`から`h6`）、`hgroup`タグ、およびセクショニングコンテンツ（`article`、`section`、`aside`、`nav`）を可視化します。各要素は異なる色でボーダーとラベルが表示され、ページの構造を容易に理解するのに役立ちます。

## ソースコード

https://github.com/swan14gg/bookmarklet/blob/main/visualizeSectionsAndHeadings.js

## ブックマークレットの登録方法

下記を参考にしてください。

https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04

## 実行例


重なっている部分はマウ

フロントエンド学習記No.1 JavaScriptの基礎に触れる

## はじめに
初めまして。10月より某SES企業でエンジニアとして働き始めた「rky」と申します。
これまであまり経験のなかったフロントエンド技術について、最近学習を始めました。内容は基礎的なものが多くなるかと思いますが、自分自身の学びを記録するとともに、他の初学者の方々の学習にも役立つ情報を提供できればと考え学習記録をつけていくことにしました！

## 学習内容
学習方法については以下のように考えています。
1. 目標とするアプリケーションや機能を考える。
2. JavaScriptを使って実装する。
3. TypeScriptで書き直す。
4. Vue.jsなどのフレームワークを使って再実装する。
これはあくまで現時点での計画なので、進行に応じて変更する可能性もあります！
これまで学習はほとんど書籍等による「インプット」に偏っていましたが、今回は「アウトプット」を重視して、学んでいきたいと思い、このような方法を試してみることにしました。

## 目標物
* +ボタンをクリックしたら数字を1足す
* -ボタンをクリックしたら数字が1引く
* 数値に対応してメーターが変化する

Python htmlの&_amp;(_を抜いて) の使用例

& シーケンスはよく目にすることがあると、思います。&_amp;は自分自身を&に変えます。&_lt;,&_gt;(<,>)これですよね。これは<>とは区別できます。<>の中に&_lt;と&_gt;は別の物と認識されます。<>この中に書き込めます<>それで、<>はスプリットに使えます。
また、<br>これは知っていますよね。改行記号です。\\n(h0d0a)です。普通に書くと、ファイル内もテキストも改行しますが、<br>にすると、起こりません、ニューラインが。実はとても、便利なんですよ。
あまり使わない&_quot; " これ、非常に面倒なんです。文の中に1個だけ使おうとする時、でも、2個だと、閉じてしまうか、エラーになるんです。接続子がないからです。
とまぁ、便利なのは、分っていただいた所で、これって、勝手に「テンポラリシーケンス」として、作られる、て知っていましたか?
念のため\\nを<br>に変えて、\\nを今後に使えるように、変数を置換します。その後、ファイルに変えるシーケンス(&wl_0;)を中に使ってい

Vueで明示的にDOMを更新する

バックエンドエンジニアとして、普段触ることのないフロントエンド。
とはいえ苦手意識をいつか克服したいと思い、VueやNuxtの勉強を始めていた矢先、業務でVueの修正を行う機会に恵まれました。

その際にぶつかった問題について、同僚のフロントエンドエンジニアの方に助けていただいたのでその内容を整理したいと思います。

# ぶつかった問題

サブミット前に、あるフォームの値に応じて他のフォームに自動的に値をセットする、というような処理を書いていた時に、コンソールでは値が入っているように見えるのに送信先では受け取れない、といった問題が発生しました。

# シナリオ

今回は「①好きな動物の名前と②飼っている動物の名前を送信してもらうためのフォームを作っている」という事にしましょう。

“`html

【アクセシビリティ】アクセシビリティを意識したメニューボタンの作り方

## はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**メニューボタン**」に焦点を当てて、アクセシビリティを意識したメニューボタンの実装方法とメニューボタンで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したメニューボタンの仕様
### ⚪︎ メニューボタンとは？
メニューボタンは、メニューを開くボタンです。
ボタンをアクティブ

【CSS】いろんな値をカスタムプロパティに定義できる「@property」とは？

## はじめに
みなさんは、「`@property`」を知っていますか？
「`@property`」はCSSの機能で、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。

今までのカスタムプロパティ（変数）は、任意の値を持つ１つだけ、定義することができましたが、`@property`を駆使するとカスタムプロパティ（変数）で、いろんな値を定義することができるようになります。

この記事では、そんな`@property`の基本的な使い方とその活用例について詳しく解説します。

## `@property` とは？
`@property` は、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。

また、↓このように記載することで、プロパティ名・型・継承の有無・初期値を指定してすることができます。

“`sample.css
@property –name {
syntax: ““;
inherits: false;
initial-value: #ff0000;
}
“`
+ **`–name`**