- 1. タゴ’sクリエイト
- 1.1. Content
- 1.1.1. シークレットキー作成
- 1.1.2. 便利ページ:Web Serial APIでCOMポート出力のコンソールを作る
- 1.1.3. Vueデータバインディングにおける逆ブラックリストcheckboxコンポーネント
- 1.1.4. JavaScriptでネットワーク構成図を自動生成してみた
- 1.1.5. Konva.jsでcanvasにカメラ映像を表示する(iPhone実機 Safari対応版)
- 1.1.6. Qiita始めました!
- 1.1.7. 時系列図を作るライブラリを作ってみた
- 1.1.8. 作業用の背景音を流すだけのサービスを作ってみた
- 1.1.9. [javascript]現在日時を1行で yyyy-mm-dd で取得する
- 1.1.10. 画面更新時にイベントを消失してしまう原因
- 1.1.11. JavaScriptで作る入力フォームのバリデーションチェック パスワード・メールアドレス
- 1.1.12. 春なので、担任の先生objectをmapでぶん回す
- 1.1.13. Phaser3.jsで、CPU対戦4人UNOを作りました。
- 1.1.14. npm run build でビルドする際にwarnings when minifying css: ▲ [WARNING] “@charset” must be the first rule in the fileのエラーが出てしまう時の解決法
- 1.1.15. Javascript ウインドウアラートを表示する
- 1.1.16. Nuxtをインストール後にnpm run devでエラーを吐く時の解決方法
- 1.1. Content
push 配列の末尾に追加 JavaScript
## 用途
・配列の末尾に値や要素を追加したいときに使用する。## 使用方法
“`js:書き方
var array = 配列;
array.push( 追加したい要素, 追加したい要素, 追加したい要素…… );
“`
`配列` + `.(ドット)` + `push` で繋ぎ、`()` で追加する要素を囲う。
追加する要素は、複数でも可能。また、数値・文字列・オブジェクトなど多様な要素の追加が可能。“`js:例
var hoge = [hoge1, hoge2];
hoge.push(hoge3, hoge4, hoge5);console.log(hoge);
結果
[hoge1, hoge2, hoge3, hoge4, hoge5];
“`———————————————————-
:::note warn
注意
連想配列では使えない
:::“`js:例
var hoge = { class:’A’, color:red };
hoge.push([‘B’, gre
ラジオボタンが選択されていない時にバリデーションエラーを出す
今更ながらですが、簡単なフォームならjQueryでバリデーションして、フォームにエラーを出したりしたいですよね。
その時にラジオボタンがどれも選択されていない状態だったらバリデーションエラーにしたい、つまりユーザーが必ず意思を持ってラジオボタンを選択して欲しい、ということがあります。そんな時、どのように書きますか?
以下のようなHTMLがあります。“`html
“`これを選択されてなかったらバリデーションエラーにしたいわけです。
では、jQueryで書いてみましょう。### 方法1
“`javascript
// チェックされ
Javascript HTMLを書き換える
## はじめに
Javascriptの使い方を学ぶ
### 参考書
## 目的
HTML内の要素を書き換える
## 実行内容
“`html:要素を書くこの要素を書き換える
“`
“`js:choice要素を時刻に置き換える
“`
このように表示される。

JS スクロールすると要素がフワッと出現する方法
最初は見えない状態から、ブラウザをスクロールすると

画像のように要素が下から上へ少しだけ動きながらフワッとフェードインする方法をやっていきます。_HTMLコード_
“`
タゴ’sクリエイト
Content
・
・
・
・
シークレットキー作成
nodeのcryptoモジュールを使うと簡単にシークレットキーを作成できます。
“`
npm i crypto
node
> require(‘crypto’).randomBytes(64).toString(‘hex’)
‘032bb3825ed806cc184267557995068ea4eee83ec7559f0f38fbdba3527193d47854ba8836c8a78ac8f8e959ad6918a38be18c3d0fec332082d62f84a3e84198’
“`↓こちらの動画の4:15:00ぐらいに出てたテクニックです。
便利ページ:Web Serial APIでCOMポート出力のコンソールを作る
「[便利ページ:Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。
ESP32を使っていると、COMポートの出力を手早く確認したいときが多いです。
もちろん、Visual Studio Code+PlatformIOのSerial Monitorを使うのもありですが、Visual Studio Codeを立ち上げていないときにも、COMポート出力を確認したい場合がありました。
一方で、Web Serial APIというJavascriptでCOMポートを読み書きできる便利な機能があるので、使わない手はないです。mdn:Web Serial API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API
ソースコードもろもろは以下のGitHubに上げてあります。
poruruba/utilities
https://github.com/poruruba/uti
Vueデータバインディングにおける逆ブラックリストcheckboxコンポーネント
# はじめに
この記事は、配列要素の表示/非表示を指定するブラックリストを、Vueのv-modelデータバインディングされたcheckboxで実現した内容を記す。
# 動機: ホワイトリストに見えるブラックリストcheckbox
ある共有された現場リストがある。担当ごとに異なるため、人によって無関係な現場が必ず存在する。サーバが現場リストを返却したとして、フロントでは自分に関係のある現場データだけ個別に表示/非表示を指定したい。
「初期状態が表示」で、かつ「チェックが外された状態を管理」しなければならない。
ブラックリストは選択したものを除外するためのリストで、ホワイトリストは選択したものを残すためのリストである。「初期状態が表示」なのはホワイトリストのように見えるが、実際にやっていることは除外リストを作っていることになるのが普通の状況と異なる点である。
# Vueデータバインディング
## checkboxのtrue-valueとfalse-value現場リストはプロパティprojectsに格納されているとする
“`HTML
JavaScriptでネットワーク構成図を自動生成してみた
# 経緯
NW構成図をExcelやPowerPointで作っていますか?
自身の経験上、NW構成図は作るのが大変、構成情報に変更があった際の修正が大変、管理が大変、など色々思うところがありました。
構成図を自動で描きたい、構成情報の変更を即座に反映したいと思って、
「NW構成図 作成」などで検索してみたもののなかなかいい記事にたどりつけなかったため、
無いなら自分で作ってしまおうということで、チャレンジしてみました。# やったこと
– 構成図情報のインプット形式の検討
– 構成図表示のロジック、アルゴリズム検討
– 構成図の画面表示
– 障害箇所の強調、接続されている線の縞々化
– 疎通が通っていること示すようなアニメーション表示
– ユーザーがドラッグ&ドロップで自由に配置を編集# 自動生成した構成図がこちら

今回は入力を以下のjsoKonva.jsでcanvasにカメラ映像を表示する(iPhone実機 Safari対応版)
# デモ
See the Pen
Web Camera Streaming for iPhone by Konva.js by qwe001 (@qwe001)
on CodePen.Qiita始めました!
# 目次
[1.はじめに](#1-はじめに)
[2.自己紹介](#2-自己紹介)
[3.おわりに](#3-おわりに)# 1. はじめに
初めまして!
日報アプリgamba!(ガンバ)でエンジニアをしている池田です!
この度、日報アプリgamba!のメンバーでブログを始めることになりましたので、
この記事では私の自己紹介を書かせていただきます。# 2. 自己紹介
現在、フリーランスのエンジニアとして
日報アプリgamba!(ガンバ)に参画している池田遼介(イケダリョウスケ)と申します!
### 趣味
趣味はゴルフと歌でゴルフは月1で行っています!スコアはアベレージ105あたりです!
あとは、歌が趣味なので、去年まで1年間ほどアプリで歌のライブ配信などもや時系列図を作るライブラリを作ってみた
## 作ったもの
下記のような簡単な時系列図?タイムライン?を作るための、svelteのコンポネントライブラリを作ってみました。
– デモ: https://svelte-vertical-timeline.vercel.app/
– リポジトリ: https://github.com/K-Sato1995/svelte-vertical-timeline## Svelteでのコンポネントライブラリの作り方
### 概要
svelteのwebアプリを作成するためのフレームワークにsvelte-kitがあります。
このsvelte-kitを使用することで簡単にsvelteコンポーネントを使用したライブラリを作成し、npmに公開することが可能です。https://kit.svelte.dev
### 具体的な方法
svelte-kitでwebアプリを作成する際とライブラリを作成する場合の違いはpublic(ユー
作業用の背景音を流すだけのサービスを作ってみた
## サイト概要
タイトルでも記載しましたが作業中に使える背景音を流すだけのサイトです。
存在する背景音は全て同時に再生する事が可能です。– サービスへのリンク: https://focus-sounds.vercel.app/
– Github(ソースコード): https://github.com/K-Sato1995/focus-sounds
## なぜ作ったか
### 理由(1)
普段YoutubeやAppleMusic/Spotifyを使って音楽やらを聴きながら作業していました。
しかし、どうしても自分が好きな動画や音楽を再生してしまい、そちらに集中しすぎて気付いたらかなりの時間を消費していた事がかなりありました。### 理由(2)
もともと同じ様なサービスを知っており、久しぶりにそちらを使用しに行ったのですが、”アップグレード”され、様々な追[javascript]現在日時を1行で yyyy-mm-dd で取得する
毎回忘れるのでメモ
### yyyy-mm-dd
“`javascript
let now = new Date().toISOString().split(“T”)[0];
-> 2022-04-06
“`### yyyy/mm/dd
“`javascript
let now = new Date().toISOString().split(“T”)[0].replaceAll(“-“, “/”);
-> 2022/04/06
“`画面更新時にイベントを消失してしまう原因
# はじめに
先日下記の事象について苦戦し、自分なりの結論までたどり着いたので共有します。現在携わらせていただいている業務システムの UX を改善するため、JavaScript イベントによる .NET メソッドの呼び出しを実装していた際、表題の事象が発生しました。
UX の改善についてですが、今回はとあるデータの更新処理を行う際、現行システムではボタン押下を契機としていましたが、ボタンの押し忘れによる更新漏れが見受けられたため、ユーザーが最後にキーを押した時点からの経過時間を契機として、半強制的に更新処理を呼び出すよう改修したいと考えました。# 事象
苦戦したのは、setTimeout 関数によってnミリ秒間待機している最中に、別操作による画面遷移やブラウザの再読み込みが発生すると、コールバック関数が失われてしまうという事象についてです。# 原因
画面遷移や再読み込みなどブラウザが更新される際 HTTP 通信が発生しますが、HTTPプロトコルの持つステートレス性という性質(状態を保持しない)が起因して、リクエスト前のブラウザの状態をレスポンス時には失っていたことが原因だとJavaScriptで作る入力フォームのバリデーションチェック パスワード・メールアドレス
パスワード・メールアドレスのバリデーションチェックで使用する正規表現と、実装コードのサンプル
## 正規表現
### パスワード
・半角数字、半角英字のみ
・半角数字、半角英字がそれぞれ一文字以上使用されている
・文字数が8~16字以内“`
/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/
“`### メールアドレス
・半角英小文字、半角数字、「-」(ハイフン)、「.」(ドット)、「_」(アンダーバー)のみ
・一文字目はアルファベットのみ
・「.」(ドット)は、連続使用・@の前の使用は不可“`
/^[a-z]+[a-z0-9_-]+@[a-z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i
“`## パスワードチェック
確認ボタンをクリックで正規表現によるチェックが入る
春なので、担任の先生objectをmapでぶん回す
### 春です。
暖かくなってきましたね。
春といえば、新学期。
そして新学期といえば、クラス替えですよね。みなさん担任の先生には”いい思い出”もあれば、”悪い思い出”もあるのではないでしょうか。
**「担任の先生を生徒が選べないのはおかしい!!」**
ということで、好き勝手に担任の先生を選べるプルダウンを作っていきます。
実装はnext.jsを使います。担任の先生はこちらの記事、ランキング1位から6位を拝借しました。
[担任の先生になってほしい芸能人ランキング 1位から10位](https://ranking.goo.ne.jp/column/7591/ranking/53511/)それではまちに待った担任の先生の発表です。
どどん
“`
const teacher = {
a: ‘仲間由紀恵’,
b: ‘阿部寛’,
c: ‘武田鉄矢’,
d: ‘反町隆史,
e: ‘櫻井翔’,
f: ‘ムロツヨシ’
}
“`クラスはaからf。
担任はランキング1位から順に並べました。
屈強なヤンキーたちを治めた、信頼と実績のPhaser3.jsで、CPU対戦4人UNOを作りました。
Phaser3.jsで、CPU対戦4人UNOを作りました。
とりあえず、遊べます。
CPUはめっちゃ弱いです。
スコアの履歴登録等、細かい点は順次実装していきます。
https://www.new-doumeishi.me/vsUno_/
npm run build でビルドする際にwarnings when minifying css: ▲ [WARNING] “@charset” must be the first rule in the fileのエラーが出てしまう時の解決法
# ビルド(npm run build)とは?
npm run buildとは、作成したVueアプリケーションをコンパイルし、サーバーアップロード(本番環境)向けにファイルサイズを小さくしたものを生成するコマンドです。
npm run buildコマンドを実行すると、同じ階層に **dist** というフォルダが生成されるので、このフォルダをそのままサーバーにアップロードするだけでアプリケーションを実行することができます。
このように、本番環境用のフォルダを生成することを **ビルド** といいます。
今回はビルドツールに**Vite**を使用しています。
・[Vite日本語ガイド](https://ja.vitejs.dev/guide/)
・[Viteとは何なのか](https://qiita.com/inagacky/items/ad424821653067c99253)# npm run build 実行時のエラー
npm run buildを実行したところ、下記のようなエラーが出ました。
“`
warnings when minifying css:
▲ [WARNINJavascript ウインドウアラートを表示する
## 初めに
window アラートを画面に表示させる
## 教科書
## 実践
“`js:画面を開いた瞬間にダイアログアラートが出てくる
“`Nuxtをインストール後にnpm run devでエラーを吐く時の解決方法
**解決方法:NodeをLTSバージョンに変更**
Nuxtをインストールしてよし始めるぞとなった時に下記のエラー吐きました。
“`
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:135:10)
at module.exports (/Users/tenopee/work/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/tenopee/work/node_modules/webpack/lib/関連する記事
OTHERカテゴリの最新記事
-
- 2023.09.28
iOS関連のことを調べてみた2023年09月28日
-
- 2023.09.28
Python関連のことを調べてみた2023年09月28日
-
- 2023.09.28
Ruby関連のことを調べてみた2023年09月28日
-
- 2023.09.28
Rails関連のことを調べてみた2023年09月28日
-
- 2023.09.28
Python3関連のことを調べてみた2023年09月28日
-
- 2023.09.28
PHP関連のことを調べてみた2023年09月28日