JavaScript関連のことを調べてみた2022年11月06日

どれだけ悪口言っても大丈夫な部屋をCodePenで作りました。

私は知っている。生きているみんな、ストレスを抱えていることを。
そして、ストレスを吐き出す場所を探していることを。
今回は**悪口を吐き出してストレスを無くし、明日から笑顔で生きられるようにするべく**、「どれだけ悪口を言っても大丈夫な部屋」を実装したので紹介する。

# 「どれだけ悪口を言っても大丈夫な部屋」
まずは、作った部屋を見ていただこう。

https://cheery-fairy-7b5133.netlify.app

使い方は簡単。
この人は誰？の入力欄に「悪口を言いたい人」を設定する。例えば、締め切りギリギリに仕様変更してくるクライアント、とか（私の周りにそう言うクライアントがいるわけではない）

その後、悪口入力欄に悪口を書き

自作のスマートディスプレイを作成する

普段使っているスマートディスプレイ「Google Nest Hub」ですが、結局のところお気に入り画像と時計表示にしか使っていない。。。
それぐらいのことであれば、自作もできるだろうと思い、CordovaとAndroidを使って、自分カスタムのスマートディスプレイを作成しました。以降、カスタムスマートディスプレイ(CSD)と呼びます。

まずは、簡単に構成を説明した後、その中で利用している要素技術を説明します。
機能としては、まずは以下の2つの機能を付けますが、今後拡張していければと思います。

・時刻表示
・お気に入り画像の背景表示
・音楽のバックグラウンド再生

# システム構成

以下のような構成になります。


・Androidタブレット
　これが今回作成するCordovaアプリが動作するAndroidタブレットです。スマートディスプレイ

Web版PowerPointの印刷時に警告を出す

# Web版PowerPointの罠
PowerPointのWeb版から印刷して紙をよく無駄にするので対策を考えてみた

# スタイル崩壊
PC版PowerPointで印刷した時とスタイルが変わってしまい、思っていたデザインにならず、無駄な紙が量産されてしまう

Officeにログインしようとするとエラーを出す共有PCを使う機会が多いため、Web版を使うが、印刷の時だけはPC版を利用しないといけないのをよく忘れる

どうせまたやらかすので拡張機能で対策することにした

# 方法と結果
1. Buttonで発火
2. ポップアップで発火
3. ダウンロードしたら実行

## 1.Buttonで発火
印刷ボタンのidをイベントリスナーで監視する

上手くいかない
Web版Officeのページが動的すぎるため？
（単純に技術不足）

## 2.ポップアップで発火
印刷時に出てくるポップアップのclassの出現を監視する

上手くいかない
Buttonで発火と同じ理由？

## 3.ダウンロードしたら実行
印刷するPDFデータをダウンロードしているか監視する

通信を監視し続けて、
https

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

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

### 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://effortless-lolly-52c3f3.netlify.ap

AndroidのChromeでGoogle Drive上のファイルがアップロードできない件

JSからAndroidのChromeでGoogle Drive上のファイルをアップロードしようとすると以下のエラーが出る。

“`
net::ERR_UPLOAD_FILE_CHANGED
“`

ブラウザのバグだが長いこと解決されていない。
https://bugs.chromium.org/p/chromium/issues/detail?id=1063576

一度arrayBufferとしてコピーすることで避けることができる。

“`
const buffer = await file.arrayBuffer();
const blob = new File([buffer], file.name, { type: file.type });
“`

しかしarrayBufferのコピーが有効ではないことがあり

“`
NG Uncaught (in promise) DOMException: The requested file could not be read, typically due to permission problems that have

JSの最近の書き方

最近の書き方

– バッククォートで囲むと文字列の変数をうめこむことができる。改行をすることも可能。
`This is ${name}`

– objectのキーの省略可
変数名とオブジェクトのキーが同じ場合は省力可能
const name = ‘taro’;
const obj = {name};
// {name : ‘taro’}

– 桁埋めはpadStart
– ネストされた配列をフラットにする　flat
– オプショナルチェイニング（エラーにならず最後までみてくれる）
obj.device?.normal?.id
→undefined
– null undfinedだったら右を返す
null ?? 1
undefined ?? 1
→1
false ?? 1
→false
0 ?? 1
→0
– 全部置換する　replaceAll

【どハマり】Nuxt generateで動的ルーティングする時は必ずパスの最初にスラッシュをつけよう

## 結論
### OK
“`nuxt.config.js
generate: {
async routes() {
const pages = await axios
.get(
//APIリクエスト
)
.then((res) =>
res.data.contents.map((content) => ({
route: `/${content.id}`,
payload: content,
}))
);
return pages;
},
},
“`
### NG
“`nuxt.config.js
generate: {
async routes() {
const pages = await axios
.get(
//APIリクエスト
)
.then((res) =

【初心者向】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