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

iosブラウザでカメラを使う時詰まったのでメモ

localhostでブラウザカメラを使うwebアプリを開発していて、スマホ実機から見たくなったので試してみると、カメラが動かなかった。

“` js
navigator.mediaDevices.getUserMedia()
“`

をしてもユーザーにカメラの許可を求める部分がでてこなかった。

解決方法

結論からいうと、localhostをhttpsで通信するようにしてサーバを立ち上げれば上手くいった。

secretkeyが入ったpemを使いhttpsで立ち上げるようにすれば良い。

詳しくは別途調べてみてほしい。

Twitterのユーザー名を非表示にするブックマークレットの紹介

# 概要
PCのブラウザ版Twitterの画面左下にあるアイコンとかユーザー名を非表示にするブックマークレットを作った
実行すると単純にユーザー名とアイコンが消える
ページを再読み込みすると元に戻る
ちなみに本来ボタンがあったところを押すと普通にアカウント切り替えボタンとして動作する
ブックマークレットの使い方に関してはググればいくらでも解説が出てくるのでここでは省略する
なお、全画面表示の状態のChromeでの使用を想定している

# ソースコード

URL欄へのコピペ用 :
“`JavaScript
javascript:(function(){const account_menu=document.getElementsByClassName(“css-18t94o4 css-1dbjc4n r-1awozwy r-sdzlij r-6koalj r-18u37iz r-1ny4l3l r-xyw6el r-o7ynqc r-6416eg”);account_menu[0].innerHTML=”

“})();
“`
インデント済

iOS Safariの実機検証を行う方法

WEBページの実機検証を行う方法について、忘れがちなため備忘録として。

## WEBページを検証する方法
iPhoneのWEBインスペクタという機能を利用して、WEBページの検証を行います。

:::note info
Webブラウザなどの開発者向け機能の一つで、表示中のWebページを構成するファイルや、HTMLやCSS、JavaScriptなどのソースコード、各要素のスタイルや属性などの詳細を表示するツールをWebインスペクタあるいは単にインスペクタという。
:::

### iPhoneの設定

① iPhoneの設定を開きsafariの設定へ
② safari設定画面下部の詳細を選択
③ WEBインスペクタの設定タブをオンにする

iPhoneの設定はたったこれだけです。
閲覧したいサイトをiPhoneのsafariで開き、PCとiPhoneをケーブルで接続します。

contenteditableのkey入力を確認

# 概要
– contenteditableな実装を行う際、各ブラウザでキー入力の値が異なる為、判断するうえで確認するためのHTMLを記載

## ソース
“`

```
と
```main.js
console.log("ファイル読み込みのテストです");
let element = document.getElementById("innerTest");①
element.innerHTML = "JavaScriptで書きました";②
```
　①ではinnerTestというidがついている画面上の要素を取り出す。そのための関数が**ブラウザから提供されていて**、
```js
document.getElementById([idの名前])
```
という形で呼び出すことができる。
　結果 elementという変数は、画面上の
```html

【Kintone】組織エクスポートAPI

cybozu developer network／組織エクスポート API（JSON）
https://developer.cybozu.io/hc/ja/articles/202124754#step2

Web便利ツール@ツールタロウ
https://tool-taro.com/base64_encode/

~~~
(() => {
'use strict';

kintone.events.on('app.record.detail.show',(event) => {

const url ='https://{sub-domain}.cybozu.com/v1/organizations.json';
const headers = {
'X-Cybozu-Authorization': '{ID:PASS}', //Encording with BASE64
};
const data = {};

kintone.proxy(url, 'GET', headers, data, function(resp){

Reactで作るToDoアプリ

この記事は、初心者が学習中に疑問に思ったことを調べた結果の覚書です。
そのため、記事には誤りが含まれている可能性があります。ご容赦ください。
## 実装
```jsx
class App extends Component {
constructor() {
super()
this.state={
count: 0,
todoList: [],
value: "",
}
}

onChange(key_value) {
this.setState(key_value)
}

add(todoElement) {
this.setState({
todoList: this.state.todoList.concat(todoElement),
value: "",
})
}

handleDelete(id) {
let todoList = this.state.todoList.concat()
let index = 0

PythonとJavaScriptの基本構文比較

# Introduction
JavaScriptの基本構文を理解するため慣れ親しんだPythonとの比較をまとめる

参考サイト
- [Pythonチュートリアル](https://docs.python.org/ja/3/tutorial/index.html)
- [JavaScript|MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

# コメント
```javascript:JS
// comment

/*
comment1
comment2
*/
```

```py:python
# commnet

'''
comment1
comment2
'''
```

# 出力
- コードの末尾は`;`
```javascript:JS
console.log('hello'); //Out: hello
console.log('world'); //Out: world
```

```py:python
print('hello') #Out: hello
print('world') #

Azure WebAppsでPuppeteer動かしたかったけど上手くいかないメモ

Azure WebAppsでPuppeteerを動かしたかったけど動かないのでやったことメモしておきます。

## プランなど

- プラン: B1
- ロケーション: East Asia
- ランタイム: Node - 18-lts

## スタートスクリプト

> 続 puppeteer を Azure Web Apps で動かす試み
> https://uncaughtexception.hatenablog.com/entry/2020/01/05/171945

この辺りの記事を見て`/home/start.sh`を作成して

```sh
#!/bin/sh

apt update \
&& apt install -y \
ca-certificates \
fonts-liberation \
gconf-service \
libappindicator1 \
libasound2 \
libatk1.0-0 \
libatk-bridge2.0-0 \
libc6

Socket.IOでコンソールベースのチャットを作成する

Socket.IOの勉強によく使われる簡単なチャットを作ってみました。
公式ドキュメントや各種記事には、ブラウザベースのチャットの例が多くありますが、今回はコンソールベースのチャットを作ってみました。
```js:index.js
const io = require('socket.io')();
io.listen(3000);

io.on('connection', (socket) => {
console.log(`connected, id: ${socket.id}`);

socket.on('chat message', (user, message) => {
data = `${message} from ${user}`;
console.log(data);
socket.broadcast.emit('chat message', data);
});

socket.on('disconnect', () => {
console.log(`disconnected, id: ${socket.id}`);

Cypress でキー入力(type) の Delay を無くす

# 概要

Cypress におけるキーボード入力用の API である `type` は、デフォルトで1文字入力ごとに 10ms の待機が発生し、長文を入力する場合にテストが遅くなってしまうことがあるので、これを解消する。

# バージョン

- `cypress`: 11.0.0

# コマンドごとに Delay を設定する

`type` メソッドのオプションを設定すればOK

```javascript
cy.get('input').type('Hello, World', { delay: 0 })
```

# テスト全体でのデフォルト値を変更する

`cypress/support` あたりの設定ファイルに記述すればOK

```javascript
Cypress.Keyboard.defaults({
keystrokeDelay: 0
})
```

# 参考

https://stackoverflow.com/questions/68190643/how-to-type-a-very-long-string-for-testing-an-input-box-

360度写真のブラウザでの表示（A-Frame）

THETAや、Insta360、GoproMax等色々な360度カメラが普及しましたが、
数年前に、画像をWebに公開する際の技術選定をした結果を記録しておきます。
（新しいネタではありません。ご了承ください。）

## <360写真が表示できるライブラリ>
- [A-Frame](https://aframe.io/)
- [Google VR View](https://developers.google.com/vr/develop/web/vrview-web)
- [Pannellum](https://pannellum.org/)
- [Babylon.js](https://doc.babylonjs.com/)

その中でも、A-Frameを選定しました。
A-Frameをおすすめする理由は、
- ライブラリで組み込めるので、外部依存しない。
- オープンソースなのでランニングコストかからない。
- HTMLベースで書ける（動きはJSで作るが・・・。）
- **一つのソースで、PCブラウザ、スマホ、スマホVR、VRゴーグルすべてに対応する**。
- ３D空間を作るイメ

Vueでのフロント実装をレビューしていて思ったこと

# 環境
Vue3系
TypeScript

# import
## importが沢山になった時

あまりにimportするモジュールが多くなると、
`

【JavaScript】セーブしたら自動でオブジェクトリテラルの前後にスペースを入れたい【VSCode】

# 概要
VSCodeでコードを書いて保存する時、
```js
import React,{useState,useEffect} from "react";
```
これが
```js
import React, { useState, useEffect } from "react";
```
このように自動でなってほしい。自動で括弧の前後とかにスペースを入れたい。

プロジェクト単位ではなく、VSCodeで編集する全てのプロジェクトでこうなって欲しい。

# Vscodeの拡張でPrettierを追加

# Prettierの設定

https://ralacode.com/blog/post/vscode-prettier/

こちらの記事を参考に以下を設定
- Format On Save

【PlayCanvas】自作のポストエフェクト作成用のスクリプト

### PlayCanvasでカスタムポストエフェクトを作成する方法
PlayCanvasでプロジェクトを作成した際にポストエフェクトを作成したい場合があります、その時に使える便利なスクリプトとなります。Engine単体での利用については[Examples](https://playcanvas.github.io/#/graphics/post-effects)に用意されています。また、BloomやFXAAのポストエフェクトについては、PlayCanvasのStoreからインポートして利用することができます。

こちらのストア、GitHubに公開されているポストエフェクトをまとめたプロジェクトはこちらに作成したものがあります。
https://playcanvas.com/project/907474

この記事では、GLSLを記述し、自作のポストエフェクトを作成する際の手順を紹介致します。

### 1. 準備 - カメラコンポーネントの準備
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

【CSS】ホバーするとキラキラ光って見えるカードを作る

## はじめに
みなさんは、どんなトレーディングカードゲームをやったことがありますか？

僕が触れたことがあるトレーディングカードゲームは、**遊戯王**、**デュエマ**、**ポケカ**くらいですが、他にも、1993年からある**マジック:ザ・ギャザリング**や最近の**ワンピース** などなどいろいろなトレーディングカードゲームが存在します。

それらのほとんどのトレーディングカードゲームには、カードにレアリティと呼ばれる希少度の段階があるため、カードゲームで対戦するだけでなく、コレクションされたり、高額になったりと奥が深いです。

今回は、そんなカードゲームのレアリティを表現をCSSとJavaScriptを使って、ホバーするとキラキラ光って見えるカードを作っていこうと思います。

## 完成形
完成形は、↓こんな感じです。

【Node.js】コールバック地獄の関数からPromiseを使って同期処理後に値を取得する

## はじめに
意外と検索してパパっと出てこないので記事化してみました。

Azure上のMySQLとの接続処理をコーディングしていたので、サンプルのコードはMySQLのusersテーブルからデータを取得する処理をイメージしています。

## 実現したいこと
async/awaitを使って非同期処理内で関数を同期実行して、返り値を同期的に取得したいケースがあるんじゃないかと思います。
```sample.js
(async function() {
response = await requestApi();
console.log(response);
})();
```

Promiseを返してくれる関数だったら楽でいいのですが、例えば下記のようにコールバックにコールバックを重ねている関数を全て同期処理させた後、値を取得するにはどうすればいいのでしょうか。

```dbaccess.js
import * as mysql from 'mysql';
import * as fs from 'fs';
import * as dotenv from 'do

[rails]Googlemap APIを使ってプチ食べログを作りたいのでテスト環境で途中まで実装してみた！

2022/11/27
これまでずっと詰まってたのですが
日本サッカーがコスタリカに負けてから何故かうまく行き始めたのでそのままの勢いでQiitaを書きます。
私は初心者なので、正解を書ける自信がないので完全未経験の方用に何か書くつもりはあまりありません。ご承知ください。
また、違ったことを書いている可能性もございますので、その時は宜しければご指摘していただけると幸いです。

## [やりたいこと]
ポートフォリオ用に、食べログのラーメン屋さん専門みたいなのを作ろうかなと
やろうとしている機能は
○Device機能
☆GooglemapAPI(今回の主軸)
○多対多（アソシエーション、フォロー機能）
○AWS
などです。

## [注意]
かなり行き当たりばったりな記事です。
先にサンプルファイルで機能実装テストが完了してから本番ファイルで実装する予定です。
こちらのテストではユーザー関連は実装しておりませんので
後々、他のgemなどの影響で書き方など変わる可能性があります。ご承知ください。

## [環境]
※使っていない可能性のある環境も記載してます。
Mac M1チップ
ra

[nodejs + mysql] routesでapiを管理する

# 初めに
nodejs + mysql でベックエンドのコード書いているが、徐々にコートが長くなってカテゴリごとに分ける必要性を感じた。
ここで、routerという機能を使ってより管理しやすく環境を整えることを書いておく。

# 環境
window 10
mysql 8.0.31
ejs: 3.1.8
express: 4.18.2
## Dir
```:dir
├─public
index.html
users.html
├─routes
users.js
└─views
server.js
```
# Code
## routesで分ける前
```javascript:server.js
const express = require('express');
const mysql = require('mysql');
const app = express();
app.set('view engine', 'ejs')

const con = mysql.createConnection({
host: 'localhost',
user: '