- 1. Djangoで読書メモアプリを作る
- 2. [HTML・CSS] Emmetについて
- 3. 2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)
- 4. frontendな会のレポート
- 5. 小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】
- 6. p5.jsで作る動くテキストアニメーション
- 7. 【アクセシビリティ】アクセシビリティを意識したツールチップの作り方
- 8. 実際に使った「ライブ配信サイトでも作ってみない？」3日目
- 9. 実際に使った「ライブ配信サイトでも作ってみない？」2日目
- 10. 実際に使った「ライブ配信サイトでも作ってみない？」1日目
- 11. 【HTML】HelloWorldを表示させる方法
- 12. 【JavaScript】formで入力したデータが足りない時に警告のダイアログを出す
- 13. マイコン使って「IoT機器でも作ってみない？」3+1日目 (補足記事)
- 14. フロントエンド学習記No.2 TypeScriptで静的型付けの安全性を知る
- 15. Django初心者が簡単なアプリを作る
- 16. 【来年の目標】2019年ごろに作ったRuby/TKアプリ javascriptで作り直したい（2024年中）
- 17. なぜ全部div要素じゃダメなのか
- 18. 【アクセシビリティ】アクセシビリティを意識したツールバーの作り方
- 19. PHP8_2_12 xampp phpも使える様にして置く。
- 20. JavaScriptでランダム出題の２択クイズ制作
Djangoで読書メモアプリを作る
Djangoで読書メモアプリを作りました。
はやたすさんの記事を参考にしました。https://tech-diary.net/django-todo-tutorial/
この記事では、Pythonのインストール、仮想環境の構築、Djangoのインストール、アプリ作成の流れを書きます。
実行環境：MacBook Air M1, 2020# Pythonのインストール
以下のサイトにアクセスし、Latest Python 3 Release – Python 3.12.1をクリックします。
https://www.python.org/downloads/macos/
開いたページを下にスクロールし、macOS 64-bit universal2 installerをクリックします。
![
[HTML・CSS] Emmetについて
## Emmetとは
HTMLやCSSのコード入力をサポートしてくれるエディター用の拡張機能。
これによりコーディング速度が向上できる## HTMLで記述する方法
|記号|意味|記述例|展開後|
|:–:|:–:|:–:|:–:|
|.|クラスの指定|p.text| `
`|
|#|ID名の指定|p#text| `
`|
|>|入れ子にする|ul>li|`
`|
|*|複数のタグを記述|p*3|``|
|+|同じ階層に記述|div+p|``|
|^|一つ上の階層に記述|ul>li^div|`
`|
|{}|テキストの挿入|p{テキスト}|`テキスト
`|
|$|連番をつける|li.menu$*3|`2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku) こんにちは！GxPのすぎもんです。
この記事は[グロースエクスパートナーズ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/gxp) の25日目(最終日)の記事です。毎年恒例！Candle Night＠Shinjukuイベントのオンラインプロダクトチームが今年もAdvent Calendar 2023のトリを務めさせていただきます。
今年のプロダクトは、2023年版への画面デザイン刷新と新たに機能開発を行いました。
本記事では、
今年開発のプロダクト機能についての紹介や開発メンバーからの苦労話などをお伝えできればと思います。## **【チームメンバーと役割】**
– すぎもん：プロマネ(内外関係者との各種調整協議、仕様調整、プロダクト全体の検証/FB)
– ヨネ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
– オノ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
– とみー：開発メンバー（開発チームリーダー）
– オクガワ：開発メンバー（企
frontendな会のレポート
静岡某所にて、フロントエンドのコーダー５人が集まり、最近気になっていることなどを話してみました。
# `@container` を使っていきたいよね
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
これ使っていきたいですね！！
ポイントで効くからコードの可読性も上がります。# hoverが可能か？をCSSだけで判定する
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features
これもですね。
pointer:fine と判定を組み合わせるハックも共有していただきました。https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
~~こんな感じのmixin作って利用してるよ、とのこと。便利〜！~~ 週明けに再度検証して、記事を書いてくださいました。
https://qiita.com/ksk1015/items/9c67d6e0c7ec8742
小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】
# 目次
| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | 自己紹介および本記事について |
| 2 | [WROとは?](#2-wroとは) | WROについての説明 |
| 3 | [昨年のシステム](#3-昨年のシステム) | 昨年のシステムのおさらいとメリット・デメリット |
| 4 | [システム要件](#4-システム要件) | システムに必要な事項のまとめ |
| 5 | [完成したシステム](#5-完成したシステム) | スクショを交えながらシステムを紹介 |
| 6 | [今年の開発過程](#6-今年の開発過程) | 時系列に沿ってシステムの開発過程を記します |
| 7 | [ハマったところ](#7-ハマったところ) | 開発中に躓いた点のまとめ |
| 8 | [今後の方針](#8-今後の方針) | 来年以降の方針について |:::note warn
本記事は長編記事ですので、是非**いいね・ストック**等して頂き、時間のあるときにゆっくりお読みください!!
:::# 1. はじめに
改めまし
p5.jsで作る動くテキストアニメーション
# はじめに
みなさんこんにちは。
突然ですが、テキストアニメーションってよく使いませんか？
でも、よく使う割にはフェードさせたり、上から下に動かすパターンしかなく似たり寄ったりのテキストアニメーションになってしまう。。こんな風に思ったこと、ありませんか？
私もそう思って色々と調べていたらp5.jsを使用したリッチなアニメーションがあったので自分なりにアレンジしてご紹介したいと思います。
# p5.jsとは
p5.jsはProcessingというクリエイティブ表現のためのプログラミング言語（と開発環境）をJavaScriptに移植したライブラリーです。
特にクリエイティブ・コーディングや視覚芸術の分野で非常に人気があり、初学者からプロまで幅広いユーザー層に利用されています。
公式サイトは[こちら](https://p5js.org/)# サンプル
【アクセシビリティ】アクセシビリティを意識したツールチップの作り方
## はじめに
みなさんアクセシビリティを意識して開発できていますか？
必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。
そのため、この記事では「**ツールチップ**」に焦点を当てて、アクセシビリティを意識したツールチップの実装方法とツールチップで意識した方がいいアクセシビリティを解説しようと思います。
## アクセシビリティを意識したツールチップの仕様
### ⚪︎ ツールチップとは？
ツールチップは、要素がキーボードフォーカスを受け取る時か、マウスホバーされ
実際に使った「ライブ配信サイトでも作ってみない？」3日目
# 実際に配信をしてみよう
配信を行うには`me`に対して`publish()`というメソッドを実行する必要があります。
これを実行することで、ルーム内の自分のユーザーが配信を始めます。“`js
document.getElementById(“stream”).onclick = async () => {…
const me = await room.join();
userIdDisplay.innerText = me.id;await me.publish(video); // 映像を配信
await me.publish(audio); // 音声を配信
}
“`何とこの2行だけで映像と音声を配信できてしまいます。
最後に、この`init`関数をページが読み込まれた時に実行するようにしておきましょう。
jsファイルの最後の方に以下のように書いておきます。“`js
const init = async () => { … };window.onload = init;
“`何とこれだけで
実際に使った「ライブ配信サイトでも作ってみない？」2日目
# まずは簡単なページを作成
“`html:stream.html
ライブ配信
UserID:
ルームID:
【HTML】HelloWorldを表示させる方法
# はじめに
今回は`HTML`で`Hello World`を表示させていこうと思うまずは適当な場所に`index.html`ファイルを作成していく
“`html
hoge
Hello World
“`
ファイルをブラウザにドラッグ＆ドロップする
【JavaScript】formで入力したデータが足りない時に警告のダイアログを出す
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。少し前にHTMLのお勉強ということでサインアップ画面をHTML/CSSで作成してみました。
今回はこれにJavaScriptを組み込んで、入力が足りなかったときにダイアログ（≒ポップアップ）を出力させるようにしたいと思います。https://qiita.com/ohtsuka-shota/items/2d9f30ab32e2cb15abe2
# コード
## test.html
大きな変化はありませんが、各inputのrequiredを省いています。これを省いていないとJavaScriptではなくてこっちで入力が足りないとエラーを出してしまったためです。
また、JavaScriptのファイルを別で用意しているので、それを読み込ませるためにhead部分で記載しています。
“`test.html
マイコン使って「IoT機器でも作ってみない？」3+1日目 (補足記事)# 補足説明
なんの説明もなく`server.send`を使ってしまって申し訳ないと思っています。
ちゃんと説明するます！# コード
“`cpp
server.send(200, “text/html”, “LED ON
BACK“);
“`ではこちらについて説明させていただきます。
## `server.send( … )`
クライアントに対してレスポンスを返す関数…それ以上でもそれ以下でもないです。
## `200`
200？何それ？って思った人もいるかもしれません。この数字はステータスコードと言って、レスポンスに対して付けられる数字です。
`404 Not Found`とか有名ですよね。https://developer.mozilla.org/ja/docs/Web/HTTP/Status
ステータスコードの全ては上に載っています。
とりあえず、200は`OK`、つまり正常にリクエストが成功したことを示すコードとだけ覚えておきましょう。
## `”text/html”`
これは、MIMEタイプと呼
フロントエンド学習記No.2 TypeScriptで静的型付けの安全性を知る
## はじめに
Progaku Advent Calendar 2023
25日目の投稿になります。フロントエンド学習記No.2です！
今回は前回JavaScriptで作成したアプリをTypeScriptで書き換えながら学んでいきます。静的型付けによる安全性、バグ検知の利点を初学者なりに少しでも実感することが目標です！
https://typescriptbook.jp/overview/features
前回の記事はこちら
https://qiita.com/rikuya98/items/2387352f8d4daeee5c62
## 環境構築
こちらの記事を参考に行いました。
tsc = TypeScriptのコンパイラをターミナル上で実行し、jsファイルを生成して動かしていきます。## TypeSriptで書いてみる
とりあえず、前回のソースをそのままtsファイルに貼り付け
開いたページを下にスクロールし、macOS 64-bit universal2 installerをク
【来年の目標】2019年ごろに作ったRuby/TKアプリ javascriptで作り直したい（2024年中）
javaspcriptの勉強のモチベーションとして
2019年ごろに作ったRuby/TKアプリ をjavascriptで作り直したい
javaspcript + HTML + css
HTA っていうんですかね？機能
・指定条件でファイルを検索して登録。（ベースディレクトリ、拡張子、含むワード、無視ワード）
・拡張子別に指定したプログラムに渡して実行。
・実行時間、実行回数を記録。
・ランダムソート、ランダム実行。
・ファイルの移動、リネームを自動検出して実行時間回数などのデータも移行※開発当時の環境 今はこのバージョンはもうないので自分でruby/TK環境を用意する必要あり
WITHOUT DEVKIT Ruby 2.3.3 ※32ビット
Ruby 2.3.3 (x64) ※64ビットgit hub
https://github.com/majimiki/rubytktest/blob/main/_Random_Launcher.rbw
なぜ全部div要素じゃダメなのか
# div要素があれば何でもできる？
HTMLに慣れ始めたころに、Webサイトの大部分はdiv要素だけで実装できると気付きました。
例えば、
– リストを作る際にわざわざul要素の中でli要素を並べなくても、div要素を縦並びにすれば同じことを実現できます。– テキストの一部を強調する場合も、strong要素を使わなくても、div要素で囲んだ上で「インライン要素にする」「中のテキストを太字にする」スタイルを充てれば同じことを実現できます。
要するに、表現が異なる箇所ごとにdiv要素で囲い、特別なスタイル充てを施せば、目標の見た目の大体は実現できます。
（機能をdiv要素だけで実現するのは難しいです。それでも、リンクのためのa要素とか、動画のためのvideo要素くらいで十分そうです。）
多くのユーザーはWebサイトの表面部分（UI）にしか関心がありません。したがって、HTML文書がどう記述されていようが関係ないように思えます。
なぜul要素やstrong要素は存在するのでしょうか。
# なぜ全部div要素じゃダメなのか
これを理解するために、開発者以外にHTML文書に
【アクセシビリティ】アクセシビリティを意識したツールバーの作り方
## はじめに
みなさんアクセシビリティを意識して開発できていますか？
必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。
そのため、この記事では「**ツールバー**」に焦点を当てて、アクセシビリティを意識したツールバーの実装方法とツールバーで意識した方がいいアクセシビリティを解説しようと思います。
## アクセシビリティを意識したツールバーの仕様
### ⚪︎ ツールバーとは？
ツールバーは、ボタン、メニューボタン、チェックボックスなどの一連のコントロールをグル
PHP8_2_12 xampp phpも使える様にして置く。
xampp 言うのはlocalhost(サーバーserverではない。外部に送らない。)に組み込まれている、phpの今2023/12の新しい部類のphpです。
phpが何かは説明しなくていいと思うが、一応、言うと、html内に、プログラムを記述して臨機応変に文を変えて、ユーザーの要望に沿う形で出力してあげて、分かりやすいページ構成にしてやる。のだから、余り、複雑な質問を出さない様に組む事を心がけましょう。なんかずれたな。
という事で、あるのだから、使える様にだけはしておこう。
何もしなくて動いているが、世界一般に通じる程度の「設定」になってるだけで、日本仕様には、なっていないって話。
そこで、おらは、日本サービス員だってさせたい人は「設定」をしなければならない。
難しい話の前に「どの様な仕様で」を出してみよう。
ちょっと古いが古phpもひょうじできるやろって。
“`php
JavaScriptでランダム出題の２択クイズ制作# はじめに
HTML/CSSくらいしか触ったことがなく、他にも挑戦したい！せっかく勉強するなら何か制作したい…と考え、JavaScriptを用いて２択クイズを制作しました。# すべてのコード
今回は、scriptタグでHTMLファイルに直接JavaScriptのコードを入力する方法で制作しました。HTML
“`html
石川クイズ