- 1. 【もしアノ】もしもアノニマスが優しい心の持ち主だったら🎭
- 2. ついに魔法の絨毯にのって空を飛べる日が来た
- 3. 【React / JS】Enterキーで入力を確定する方法【日本語入力対応】
- 4. 【JavaScript】ESMとCJSの違い
- 5. 【個人開発】デザイナーだけど「色彩検定の色名アプリ」を作った話
- 6. 【Figma Plugins】チームライブラリーのコンポーネントを取得する
- 7. JavaScriptにおけるイベント
- 8. デモページ 卓球得点表 ロジックの作成[JavaScript]
- 9. Ptengineのヒートマップ描画ロジックの探求:JavaScript実装の要点
- 10. OGPタグのまとめ
- 11. 【TypeScript】Recordって何?[key: string]との違いは?
- 12. JSで特定のidを持つ要素にクラスを追加・削除する方法
- 13. 初めてのチーム開発
- 14. 【JavaScript】要素の取得方法まとめ
- 15. JavaScript気になる構文まとめメモ
- 16. 【HTML】ボタン要素にdisabled属性をつけるのをやめませんか?
- 17. プログラマーが落ち着かなくなるコードを書いてみた #3
- 18. 【Node.js】Tailwind CSS の最も簡単な始め方
- 19. スクレイピングツールをChrome拡張機能で開発する
- 20. iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話
【もしアノ】もしもアノニマスが優しい心の持ち主だったら🎭
## アノニマスとは?
Wikipediaより、アノニマスとは以下のような集団のことです。
>アノニマス(英: Anonymous)は、2006年頃に英語圏の匿名掲示板「4chan」で結成された、インターネット上のハクティビスト(ハクティビズムと呼ばれるハッカー思想の実践者)が緩やかにつながった国際的な連携組織である。>ハクティビストとは、ハッカーと活動家(アクティビスト)を掛け合わせた造語。また「anonymous」という単語は「匿名」「名無し」「作者不明」を意味する形容詞であるが、この用途では「匿名の集団」という意味の不可算名詞として扱われる。
## アノニマスは絶対悪?
アノニマスはおもに[DDoS攻撃](https://www.ntt.com/business/services/network/intern
ついに魔法の絨毯にのって空を飛べる日が来た
## 大人になって気づいてしまった ##
![スクリーンショット 2024-06-18 13.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3720831/77f2f3e5-1307-8c88-6e48-361b932e5774.png)
私は毎日夢を見ます。
ほとんどの夢は、私が主役の物語です(笑)
脇役の夢は見たことがないと言っていいくらい
**主役に憧れ**があるんでしょうね・・・### 私がよく見る夢 ###
・魔法の絨毯にのって空を自由に飛びながら冒険する
・ヒーローになって困っている街のみんなを救う
・ほうきにのって登下校する
→ 大体、授業中に悪役が現れるため、
変身して悪役の心を救いにいくなど数え切れないほど様々な物語の夢を見ます。
しかし夢が覚めると気づいてしまうのです。
**数秒前まで使えてた魔法が
現実に戻った時には使えないということを。**## 救世主が現れた!! ##
最近、**p5.js**というものを知りました。
p5.js:
【React / JS】Enterキーで入力を確定する方法【日本語入力対応】
# 完成イメージ
| ![React-Todo-App.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/48a9377a-235d-56f4-86b9-bf7e277ed3de.gif) |
| :-: |
| ボタン無し・Enterキーで入力を確定させる |https://github.com/Kohki-Takatama/react-todo-app
# この記事について
入力を確定させる時、ボタンをクリックさせるのは手間です。
– `Enter`キーを押したら入力を確定したい
– ただし、日本語変換を確定させる`Enter`には反応したくないそんな需要に応える記事です。
Reactを例に書きますが、バニラの(素の)JavaScript / HTMLでも同様の考え方で対応できます。
# 登場する技術等
| 技術 |
【JavaScript】ESMとCJSの違い
調べた範囲の📝です。マサカリ歓迎しております_(´ཀ`」 ∠)_
# ざっくりと
ESM(Ecma Script Module):モダン(新しい)。ブラウザはこちらのみ。Node.jsも対応済み。
CJS(Common JS Module):Node.jsの伝統的なモジュールシステム。
# Node.js においてファイル名
– `.mjs` ファイル
– 常にESM(Ecma Script Module)として扱われる
– `.cjs` ファイル
– 常にCJS(Common JS Module)として扱われる`package.json`の`”type”`フィールド
– `”type”: “module”`
– そのディレクトリ内の`.js`ファイルがESMとして扱われる
– `”type”: “commonjs”`
– そのディレクトリ内の`.js`ファイルがCJSとして扱われるモジュールの読み込みメソッド
– `import`
– 非同期的
– 拡張子を明示する(`import ‘./module.js’`)
– ESM・CJSともに読
【個人開発】デザイナーだけど「色彩検定の色名アプリ」を作った話
# 作ったもの
色彩検定の学習アプリ
### iOSアプリ
https://apps.apple.com/jp/app/iroben/id6502425637
### Androidアプリ
https://play.google.com/store/apps/details?id=site.iroben.iroben&pcampaignid=web_share
# 使用したもの
◾️言語
* vue.js
* sass◾️ツール
* figma
* phothosop
* Git
* Xcode
* Transporter◾️プラットフォーム
* firebase
* monaca◾️その他
* Apple Developper
* Apple Store Connect
* Google Play Console# 費用
◾️総額
¥59,082(自費)◾️内訳
* Appleへの申請代:¥15,535
* Googleへの申請代:¥4,017
* Android クローズドテスト外注代:¥12,500
* Figma有料プラグイン代:¥86
【Figma Plugins】チームライブラリーのコンポーネントを取得する
## これは何?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f9bea6f8-26fa-0e71-e623-915834ce1004.png)FigmaのPluginを開発する際、チームライブラリのコンポーネントを取得して、ファイルに生成したいと思ったことはありますか?
Figmaのコンポーネントには、通常のコンポーネントと複数のコンポーネントがまとまっているバリアントコンポーネントの2種類あります。
そのため、この記事では、チームライブラリの2種類のコンポーネントを取得する方法を解説しようと思います。
## チームライブラリーのコンポーネントを取得する
### ① component keyを調べる
コンポーネントを取得するには、**component key** を知る必要があります。
そのためには、以下のように**component key**を調べます。1. コンポーネントが定義されているファイルを開く
1. コンソールを開く
– 右クリッ
JavaScriptにおけるイベント
# JavaScriptにおけるイベント
ユーザーの操作やブラウザの動作によって発生するアクションを指します。イベントは、ユーザーとウェブページとのインタラクションを処理するために使用されます。以下に、いくつかの主要なイベントとその説明を示します。# マウスイベント
click : ユーザーが要素をクリックしたときに発生します。
dblclick: ユーザーが要素をダブルクリックしたときに発生します。
mousedown: ユーザーがマウスボタンを押下したときに発生します。
mouseup: ユーザーがマウスボタンを放したときに発生します。
mousemove: ユーザーがマウスを動かしたときに発生します。
mouseover: マウスポインターが要素の上に乗ったときに発生します。
mouseout: マウスポインターが要素から離れたときに発生します。
mouseenter: マウスポインターが要素に入ったときに発生します。バブリングしません。
mouseleave: マウスポインターが要素から出たときに発生します。バブリングしません。# キーボードイベント
keydown:
デモページ 卓球得点表 ロジックの作成[JavaScript]
デモページとして、今まで学習してきた内容をもとに、
卓球の得点表のようなものを作成していこうと思います。## 目次:
– [アプリの内容紹介](#アプリの内容紹介)
– [初期セットアップHTMLファイル](#初期セットアップhtmlファイル)
– [ボタンと得点の連携「JavaScripファイル」](#ボタンと得点の連携javascripファイル)
– [リセットボタンの作成「JavaScriptファイル」](#リセットボタンの作成javascriptファイル)
– [何点先取か「勝利の点数」を決めるセレクトボタンの作成](#何点先取か勝利の点数を決めるセレクトボタンの作成)## アプリの内容紹介
プレイヤーを2人作ります。
そして、何点先取するかの点数を最初に決めます。
それぞれのプレイヤーの点数を増やしていき、最初に決めた点数に達したら、
勝った方のプレイヤーの得点の色が緑色に、負けた方のプレイヤーの得点の色が赤色に変化します。
また、ゲームが終了したら得点のボタンは無効化され、クリックできなくなります。そして、リセットボタンだけが押せるようになり、リセット
Ptengineのヒートマップ描画ロジックの探求:JavaScript実装の要点
ウェブサイトの分析では、ヒートマップは一般的なデータ可視化ツールであり、ユーザーのウェブページ上での行動の熱度と分布を直感的に示すことができます。プロフェッショナルなウェブサイト分析ツールであるPtengineのヒートマップ機能は非常に強力です。本記事では、Ptengineのヒートマップ描画ロジックを詳しく探り、クリックヒートマップを例にとり、JavaScriptコードで実装します。前提として、中級レベルのJavaScriptとCanvasの知識を持っていることが必要です。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600361/e3af24c0-76e3-aaad-e4b4-397a7f6dfe09.png)
以下のクリックヒートマップの例は、[Ptengine Heatmap Demo](https://www.ptengine.jp/demo/feature-highlights?ptengine_heatmap_token=4611f55d2e80d966a53881972693f
OGPタグのまとめ
# OGPタグとは
OGPタグとは「Open Graph Protcol」の略です。OGPタグは、FacebookやX(旧Twitter)、Slack、LinkedInなどのSNSでシェアした際に設定したWEBページのタイトルや画像、詳細情報などを共有することができます。# OGPタグを利用するメリット
正確な情報をユーザーに伝えることができるためです。
例えば、URLをシェアした際に、タイトルや画像が表示されないと、ユーザーがURLをクリックするかどうかを判断することが難しくなります。
そのため、OGPタグを利用することで、URLをシェアした際に、正確な情報をユーザーに伝えることができます。# OGPタグの設定方法
OGPタグは、HTMLのheadタグ内に記述します。
以下に、OGPタグの設定方法を示します。
1. head要素に、以下のようにOGPタグを記述します。
`prefix=”og: http://ogp.me/ns#”`
2. headerタグ内のmetaタグに、以下のようにOGPタグを記述します。
“` html
【TypeScript】Recordって何?[key: string]との違いは?
# Recordとは?
簡単に言うとインデックス型([key: string])やMapと同じくkeyValueオブジェクトの型です。
しかし[key: string]やMapよりも直感的に型付けすることができます。
“`tsx
let a: Record; let b: { [K: string]: number };
let c: Map;
“`## 具体的な型付け方法
Key側に設定できる型はstring, number, symbolとその3種類のリテラルになります。
またvalue側に設定できる型はなんでもできます。
“`tsx
let a: Record; // OK
let b: Record; // OK
let c: Record; // OK;
let d: Record<"あ" | "い" | "う", number>; // OKtype Human = {
name: s
JSで特定のidを持つ要素にクラスを追加・削除する方法
JavaScriptで特定のidを持つ要素にクラスを追加または削除する方法を紹介します。
### 実行環境
HTML5
CCS3
Google Chrome: 126.0.6478.62(Official Build) (64 ビット)## 準備
[前回の記事](https://qiita.com/DreamMyHome/items/76f0b6f7c934c2ca5bcd)で作成したクラスを使います。
サイズ、色、枠線は任意のものに変更してください。“`html
“`
“`css
.main-content {
display: flex;
justify-content: space-evenly;
}.but
初めてのチーム開発
## はじめに
今回、プログラミング初心者4人で行った初めてのチーム開発プロジェクトについての記事です。
テーマは『自分たちの役に立つものを開発する』## チーム開発の流れ
1. アイデア決め
1. スライド作成、要件定義
1. 設計、タスク出し
1. 環境構築
1. 実装、プレゼン準備
1. プレゼン## アイデア決め
まず、それぞれ一人が一つ抱えている課題のアイデアを出すことにしました。私はFigmaを使うことを提案し、付箋を使ってアイデアを書き留め、その中から一つを選ぶことで決める流れになりました。
アイデアの課題、目新しさ、難易度で決めていく中で良い点、そうではない点がそれぞれにあり、賛同や衝突もありながら一つに決めるのが困難になりました。
そこで他のチーム開発ではどのようなアイデアがあったのかを見て、課題、目新しさ、実装難易度を改めました。
その後、4人の共通な新たな課題として「日々つけている日報をわかりやすく一目で振り返りたい。」ということが上げられました。
そこからはその課題を解決するためのアイデアがどんどん出てき方向性が決まっていきました。ここで方向が
【JavaScript】要素の取得方法まとめ
JavaScriptの要素を取得するための自分用メモ。
メソッド書く前に毎度のごとく、単語の意味を復習。
### HTMLElement
汎用的なHTMLの要素。
### HTMLCollection
汎用的な要素ノードの集合。HTML要素以外のノードは含まない。配列風のオブジェクト。
リストから選択するためのメソッドとプロパティを提供する。
### NodeList
ノードの集合体。名前の通りノード全般を含む。配列風のオブジェクト。
`forEach`が使えるので、配列のように簡単に処理できる。
## document.getElementById()
返り値:HTMLElement
指定したIDを持つ要素を返す。
要素が存在しない場合はnullを返す。
万が一、指定したIDをもつ要素が複数存在した場合は、最初に取得した要素のみを返す。
“`html:HTML
sample text
“`
“`javascript:JavaScript
const result = document.getElementById(‘sam
JavaScript気になる構文まとめメモ
# はじめに
他の人が書いたJavaScriptのコードを読む機会があり「この構文ってどういう意味?」「この構文の呼び名は?」となることがあったので、調べたついでに気になった構文をまとめました。
自分用のメモとして簡易に記述しているので、厳密な定義を知りたい方は最後の参考サイトをご覧ください。
# 真と偽:truthy, falsy
構文まとめの前に、構文の中に式がたくさん出てくるので、真になる値と偽になる値を軽く整理しておきます。
## 真になる値:truthy
“`javascript
// true
console.log(Boolean(true)); // true// ゼロでない数値
console.log(Boolean(10)); // true
console.log(Boolean(-20)); // true// 空でない文字列
console.log(Boolean(“Hello”)); // true// オブジェクトなどの参照
console.log(Boolean({})); // true
console.log(Boolean
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか?
## はじめに
みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに `disabled` をつけて押せないようにしていませんか?
この記事では、ボタンに`disabled`属性をつけない方がいい理由と`disabled`をつけない方法を紹介します。
## disabled属性をつけない方がいい理由
`disabled` 属性をつけると、ユーザーがボタンを操作することを防ぎます。
そのため、キーボード(Tabキー等)で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。disableがない時 | disableがある時
:-:|:-:
![3つのボタンにフォーカスが当たっているgif動画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b80e010c-a055-02c6-0e98-59d6c37c6896.gif)|![3つのボタンの中に1つdisabledのボタンがあり、2つのボタンにフォーカスが当たっているgif動画](https://qi
プログラマーが落ち着かなくなるコードを書いてみた #3
こんにちはAtsu1209です。
今回はエンジニアが落ち着かなくなるコードを書いてみた 第三回です**第一回**
https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a
**第二回**
https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb
**番外編**
https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565
# 今回作るもの
今回は作るもの自体はまともですが、コメントアウトを大量に入れて
恐怖を覚えさせたいと思います。今回はブログのHTML部分をかいて行きます。
ブログのHTML部分のコードは以前の記事から流用します。記事↓
https://qiita.com/Atsu1209jp/items/75a0acb5c4410aa2754e
# HTML
前回ChatGPTが書いたHTMLがこちらです。“`html
【Node.js】Tailwind CSS の最も簡単な始め方
# 完成イメージ
| |
| :-: |
| ![スクリーンショット 2024-06-16 20.46.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c3c72f39-424b-aebd-4461-935e49bf8e5f.png) |
| Node.js のサーバーから
Tailwind CSS クラスを使用した静的ファイルを表示できる |
# この記事について備忘録です。なるべく簡潔に書こうと思います。
# 環境
| サービス名称 | バージョン | 種別等 |
| ——- | ——- | :————: |
| VSCode | 1.90.0 | エディタ |
| macOS | 14.5 | OS |
| Node.js | 20.13.1 | JavaScript実行環境 |
| npm | 10.5.2 | パッケー
スクレイピングツールをChrome拡張機能で開発する
## はじめに
Webサイトから情報を取得するとき、スクレイピングのプログラムを書いて情報を取得することがあるかと思います。しかし、一度しか使わないのにプログラムを書くのは面倒なので、汎用的にいろいろなWebサイトで使用できるツールが欲しくなりました。
Chrome拡張機能であればいろいろなWebサイトで使用することができ、またWebアプリと違ってCORS制約なども無く使用できると考えたため、作ってみました。実際に使用できるプログラムはGitHub上に置いておきますので、以下からご確認ください。
https://github.com/t-ujiie-g/scrapingExtension
拡張機能の取り込み方などは以下の記事などが参考になるかと思います。
https://qiita.com/komlabo/items/5b99d3598f6664621dae
## 実装内容
### 完成イメージ/使用方法
どのWebサイトでも使用できるイメージで作成しています。使用したいときに以下のようなチェックボックスで有効化するイメージです。
![image.png](https://
iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話
ちょっとハマったのでメモしておきます。
## バージョン
– iPad 17.4.1
– iPhone 15.8.2## やりたいこと
やりたいことは以下の2つです。
1. iPhone / iPad で、日本語入力時(ローマ字入力モード)の確定キー押下を検知したい
1. iPhone / iPad で、日本語入力時(ローマ字入力モード)の変換候補の中から何か1つが選択されたことを検知したい以下、 iPhone のスクリーンショットになります。
ちょっと分かりづらいと思いますが、日本語ローマ字入力モードで「くま」の2文字を入力した直後の、まだ未確定のときのスクリーンショットになります。
このまま「くま」で入力を確定させたい場合は赤枠内の**確定**ボタンを押下すると思いますが、これがやりたいことの 1 になります。
「熊本」で確定させたい場合は黄色枠内の**変換候補**の中から「熊本」を選択すると思いますが、これがやりたいことの 2 になります。![image.png](https://qiita-image-store.s3.ap-northeast-1.am