f@ctor

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

JavaScript関連のことを調べてみた2022年10月30日
目次

microCMSのデータをJavaScriptで取得したときに、ハイフンつなぎの項目にアクセスできなくて困った件

自分の制作実績をmicroCMSで管理していて、そのデータを静的サイトにJavaScriptSDKを使って、Fetchしようとしたときに、ハイフンつなぎのデータにうまくアクセスできなくて困りました。
そのときに調べて理解できたことをメモしておきます。
## 問題の状況
https://www.npmjs.com/package/microcms-js-sdk
こちらの記事を参考にデータをFetch
ここまでは超スムーズにできて、自分の成長を感じます?

res.createdAt　とばっちりデータにもアクセスできた！となっていたのですが、
res.works-title としたときに、なにやらエラーっぽい波線が引いてあります。
console.logしてみると、やはりエラーでした。
ハイフンつなぎがだめだということはわかったのですが、
その先、どうすればいいかわからないとなってしまいました。

## microCMSのデータはObject形式でやってくる
“`javascript
const { createClient } = microcms;
// Initialize Cli

元記事を表示

?JS初心者が作るGoogle extension V3 ④ -タイマーを表示させる-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理-](https://qiita.com/mmaumtjgj/items/0a9e73058727b101579b)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## イメージ図
[![Image from Gyazo](https://i.gyazo.com/b00f5e6ed310d50ec66066525ea1bbc8.gif)](https://gyazo.com/b00f5e6ed310d50ec66066525ea1bbc8)

## タイマーを表示
タブを完成させたところで、タイマータブの中身を作っていく。
最初に出てくるポメと「タイマーを設定しよう！」は簡単なHTMLとCSSなので今回は省略。

[こちらの記事](https://qi

元記事を表示

Denoでdelay()を使って待機処理

Denoで待機処理するのん、どうするんかなと思って試してみた。
こんな感じ。
すごくシンプル。

“`ts
import { delay } from “https://deno.land/std@0.161.0/async/mod.ts”;

console.log(new Date());
await delay(1000);
console.log(new Date());
“`

[delay | /async/mod.ts | std@0.161.0 | Deno](https://deno.land/std@0.161.0/async/mod.ts?s=delay)
[Deno 標準ライブラリ async | Octo’s blog](https://www.ccbaxy.xyz/blog/2022/01/29/js37/)

ちなみに、Nodeではこんな感じ。
“`ts
import { setTimeout } from ‘node:timers/promises’
await setTimeout(1000);
“`
Node v.15から、setTimeo

元記事を表示

ブラウザゲームを作ってみよう(その12:サンプルゲーム作成その5)

# はじめに
[その11](https://qiita.com/noji505/items/e9a53c81de36f34138d4)ではオプションモードの追加を行いました。
今回はランキングを追加してみたいと思います。

# ランキングについて
タイトル画面からランキング画面へ入れるようにし、そこでランキングが確認出来るようにします。
基本的には前回のオプション画面の追加と同じイメージになります。

[遷移イメージ]
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/740996/71f61ca4-8881-efee-0f33-71fe665f7e22.png)

ランキングの保存についてはLocal Storageを使用します。

# Local Storageの使い方
基本的にはデータの保存、取得、削除の3種類を覚えれば扱えます。

保存
localStorage.setItem( ‘key’, ‘val’ )か、localStorage.key= ‘val’ で保存でき

元記事を表示

TypeScript でMapからObject、ObjectからMapへの変換

# はじめに
TypeScript でMapからObject、ObjectからMapへの変換する方法がいまいちわかってなかったので、色々試してみた。たぶん、JavaScriptでも一緒。

# 変換方法
## Map -> Object
`Object.fromEntries()`で変換できる。引数にMapを直接渡せる。

[Object.fromEntries() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)

## Object -> Map
`new Map(Object.entries())`で変換できる。引数にObjectを渡す。

[Object.entries() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

元記事を表示

背景とテキストの色を切り替えたい

王道ポートフォリオ画面の作成

見てわかる通り、右上のアイコンを押すと色を変えられる仕組みをJavascriptで書いたが、bodyの中のliタグに適用されない。この問題を解決しなければ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884833/8ac36562-13b1-312d-b4aa-4aacd28d3ba7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884833/f3301dcb-4ae0-62bc-b589-700a6f02ca63.png)

あとh1で作ってあるkenshiro yamada’s portfolioにアニメーション付加などの何かしらにギミックをつけたいところ。

元記事を表示

GSAPを使ったオープニングアニメーションの作り方

突然ですが、GSAPというライブラリを聞いた事はありますか？
# 今回使うサンプル
![スクリーンショット 2022-10-26 16.05.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/08fa9b81-c453-50b3-22f5-15fdfde017e3.png)
– [サンプル](https://gsap-practice-beta.vercel.app/)

# GSAPとは
https://greensock.com/

アニメーションを実装するために特化したライブラリですね。
## GSAPを導入する(NPMで導入する)
“`console
$ npm install gsap
“`
また、**TypeScriptの型定義ファイルもgsapパッケージに同梱**されているので、`@types`の導入は**不要**です。
## GSAPを導入する(CDNで導入する)
GSAPをサクッと導入したい場合は下記script

元記事を表示

Google Docs, Sheets, Slides上でのJavascript実行方法

## 動機

~~ネタです。~~
ある日、Googleのドキュメント、スプレッドシート、スライドで
Javascriptを実行したくなる時が、来るかもしれないので（来るか？）、記事を書いておきます。
未来は、予測不可能ですので。ネタ元は[こちら](https://www.labnol.org/javascript-code-in-google-docs-220922)。

スライドとかで、コード見せて実行してみるとか、
もしかしたら少しは需要あるかも。

—

## Google Docs

ドキュメントの場合は、[ネタ元](https://www.labnol.org/javascript-code-in-google-docs-220922)と同じです。
以下の手順で、実行が可能です。

– ドキュメント作成
– メニューバーの拡張機能から、Apps Scriptを選択
– エディターが開くので、下記スクリプトを貼り付け&保存
– ドキュメントを開きなおすと、メニューバーにCode Runnerが追加される
– ドキュメントに、Javascriptを記述
– メニューバーのCo

元記事を表示

【WordPress】管理画面に画像アップローダーを複数設置する方法【プラグイン無し】

久々の投稿になります。コースケです。
以前、ワードプレスの自作管理画面をプラグイン無しでカスタマイズする案件があったのですが、
「複数の画像アップローダーをプラグインを使わずに設置する」という作業に結構苦戦したので、
備忘録としてその方法を掲載しておきます。

まずはfunction.phpの内容です。
肝のjs(Jquery)部分はその次に掲載します。

“`function.php
//—————————————————–
//管理画面に独自のcssとjsを読み込む
//—————————————————–
function add_admin_style(){
$path_css = get_template_directory_uri().’/css/admin.css’;
wp_enqueue_style(‘admin_style’, $path_css);
}
add_action(‘admin_enqueu

元記事を表示

Blockly – サンプルの実行

Googleが開発したブロック言語のBlocklyを試します。
最終的には、rosとのコラボ方法まで記載できたら嬉しいです。
まず、本記事ではBlocklyのサンプルの実行方法について記載します。

(環境: ubuntu 20.40)

まず、プログラムをローカルにダウンロードします。
そしてpythonのhttp.serverを使用してサーバーを立てます。

“`
git clone https://github.com/google/blockly.git
cd blockly
python3 -m http.server
“`

サーバー起動後,デモはdemosディレクトリにアクセスすると開くことができます。

http://0.0.0.0:8000/demos/

すると以下のようにBlocklyエディタが表示されました。

![Screenshot from 2022-10-29 15-06-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/913cfb60-6e88-

元記事を表示

【概要】CORSってなに

CORSエラーに出会い立ち止まったので、なんやそれ状態からチョットワカル状態に持って行きたい。
## CROSとは
Cross-Origin Resource Sharing＝オリジン間リソース共有
これだけではよくわからんけど、オリジン同士でリソース共有するものなのかと雰囲気だけ掴む。
## オリジンって？
スキーム(プロトコル)、ホスト(ドメイン)、ポートの組み合わせのこと。それぞれはURLの一部分をさしている。
該当部分は下図参照。
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940053/9e3f85b1-4f17-225c-fe54-ab5746237f8c.png)

つまり、3つの要素からなるURL間同士でリソースを共有するのだなとわかる。
そして、webの世界では基本的に下記ルールに基づきアクセス制御を行なっている。

## 同一オリジンポリシー
javascriptは、前提として異なるオリジンの内容を読み込むことができない。
理由はセキュリティ面。例えば、インターネット

元記事を表示

WebRTCを利用した複数人でのビデオ通話サンプル(Mesh)

# はじめに
WebブラウザのWebRTC機能を利用して、Mesh接続で複数人とビデオ通話をするサンプルです。

:::note info
[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)についての説明は巷に沢山あるため省きます。
:::

1対1のビデオ通話サンプルはこちら。
「[WebRTCを利用した1対1のビデオ通話サンプル](https://qiita.com/nakka_/items/555f0da0289b75edd420)」

# 環境
– サーバー
CentOS Linux release 7.6.1810 (Core)
（Windowsでも動作可能）
node.js v16.18.0

– クライアント(動作確認環境)
Chrome バージョン: 106.0.5249.119
iOS 16.0.2
Android 12
:::note warn
カメラとマイクが必要です。
:::

# インストール
サーバーはnode.jsを利用します。
node.jsで静的ファイルとWebSocke

元記事を表示

【Script SetUp】モーダル作成方法【Typescript】

# 始めに
前提条件のコードを添付すると冗長になってしまうため、[こちら](https://qiita.com/tak8_al/items/17b6cdde012cb6a8658d)に書いてあります。
まずは[こちら]()をご覧ください。

# 本記事の内容
本記事は編集用のモーダルの作成を目指したものです。
以下の手順で解説していきます。
* モーダルの作成
* 編集機能の追加

# モーダル作成
①booleanの取得
②メソッドの定義
③モーダルファイルの作成
④buttonとemit

# ①booleanの取得
true,falseでモーダルの開閉を行うため、booleanを作成します。
“`vuejs: src/components/todo-lists/editCard.vue


```

```shell
# npmを使用する場合はこのコマンドを実行する
npm install chart.js
```

### 描画領域の準備

グラフ描画領域は、`canvas`タグで指定することができます。

```

元記事を表示

Kintoneでタイムカードアプリ実装1：タイムカードアプリ編～文字列結合～

1年ぐらいKintoneを触ってきて、おおまかな仕様が理解できたので、スケジュール管理システムらしいものをKintoneで実装していきたいと思います。

それでは本題ヘ、
### タイムカードアプリ

想定としては、社内システムとしてKintoneを導入した場合を考えていて、
テレワーク中に自己申告で出勤、退勤時刻を記録するアプリという感じです。

まずは、入力画面にフォームを配置。

【CSS】自作CSSアニメーションで得た学びを３つ紹介する試み。

# 自作CSSアニメーションで得た学び
CSSを学習中の方向けに書いてみましたので読んでくれたら嬉しいです。

前提となってる記事はこれです。

https://qiita.com/yowatsuyoengineer/items/948676b8e3ad07717bc0

　↑ 頑張ってイケメンなアニメーション作ったっちゃん。せっかくやけん見てってくれてもいいとよ。

# CSSで役立つテクニック
## ①要素の位置指定は「absolute＆transform」が使いやすい。
::: note
「position:absolute」で他要素に干渉されない状態にし、「transform: translate(Xpx,Ypx)」で位置を指定するという理屈。
:::

↓文字じゃよく分からんのでコードで
```doubleLaser.html

Javascript Lookup項目Details取得//Lookup項目に値設定

//Lookup項目Details取得
if (Xrm.Page.data.entity.attributes.get("fieldname").getValue() != null) {
var CustomerId = Xrm.Page.data.entity.attributes.get("fieldname").getValue()[0].id;
var CustomerName = Xrm.Page.data.entity.attributes.get("fieldname").getValue()[0].name;
var CustomerType = Xrm.Page.data.entity.attributes.get("feildname ").getValue()[0].entityType;
}

//Lookup項目に値設定
var formContext = executionContextObj.getFormContext();
var loginUserId = Xrm.Utility.getGlobalContex

Retrieve Entity Record With JavaScript

Dynamics2011よく使っていたデータ取得方法

function GetEntityDetails() {
var result = new Array();

var lookupFieldId = "";
if (Xrm.Page.getAttribute("dsh_hospital").getValue() != null) {
lookupFieldId = Xrm.Page.getAttribute("dsh_hospital").getValue()[0].id;
}

if (lookupFieldId != "") {

var field1Value = "";
var field2Value = "";

//医療機関のオブジェクト取得
XrmServiceToolkit.Rest.Retrieve(lookupFieldId, "new_entityNameSet", null, null, funct

【JavaScript】配列内の値に順位をつける

## 順位付け？

配列の値を並び替えすることはありましたが、順位付けする方法は？？となり、メモします。

```js
const array = [ 90, 100, 50, 10, 80 ]

// 並び替え（降順）
const sorted = array.slice().sort((a,b) => b - a);

// 元配列と並び替えた配列を比較
const ranked = array.slice().map((item) => {
return sorted.indexOf(item) + 1
})

console.log(ranked);

// 出力
// [ 2, 1, 4, 5, 3 ]
```

## 余談

sortは破壊的変更になるので、それを防ぐ方法

```js
const array = [ 90, 100, 50, 10, 80 ]

// 破壊的変更
array2 = array.sort((a,b) => b - a);

console.log(array); // [ 100, 90, 80, 50, 10 ]
cons

OTHERカテゴリの最新記事

画面イメージ フィールドコード フィールド型
inputForm.png