JavaScript関連のことを調べてみた2021年03月23日

JavaScriptでToDoListを作ってみた

JavaScript勉強の一環として，「ToDoList」を作ってみました。
classを勉強したばかりなので使ってみました。
完全独学なので，もし問題点や改善点があれば教えていただけると嬉しいです。

#仕様

+ **addボタン**を押すと，インプットエリアに入力されたテキストがリストになって追加される。
+ 追加すると，インプットエリアの文字は消える。
+ **リスト右の丸**を押すと，完了済になる(丸の色と文字色が変わる)。
+ **delate**を押すと，リストがまるごと削除される。


#コード

####HTML

“`html:index.html

HTMLで埋め込んだYellowfinのJSAPI3で効かせたフィルターを表示させない方法

#どのような時に使われるか
主に、ログインした人によってあらかじめフィルターを絞った状態で表示させたいが、フィルターの内容は表示させたくないといった状況です。
その人の所属してる店舗の情報のみ表示したい・・など。こういったものはYellowfinの機能の一つであるアクセスフィルターを使って製品保証された状態で使うのが普通だと思うのですが、どうしてもという場合にこういう方法があるかなという提案です。(もちろん非公式です！)

#まずフィルターであらかじめ絞った状態でダッシュボードを表示させる


“`html:htmlタブ.html

【kintone】グラフ設定APIで分類する項目を変更する

前回はグラフ設定APIのPUTでグラフの種類変更やグラフの新規追加を試してみました。
今回は「分類する項目」の大、中、小項目を変更してみたいと思います。
（処理成功のアラートや、エラー処理等は適宜書いてください～。）

# アプリの準備

出来上がりのフォームはこんな感じ


## フォーム

文字列(1行)とスペースを図のように設置します。
ボタンやドロップダウンフィールドはスペースに設置していきます。

フィールドコードなどは表のとおり。


| フィールド種類 | フィールド名（コード） | 備考 |

Beginner’s Series to: Node.js – 今から始める Node.js

新型コロナウイルスによるパンデミックが始まってかれこれ１年ちょっとが経過しましたが、皆さんいかがお過ごしでしょうか。

私はサンフランシスコに住んでいるのですが、もうずっと WFH (Working from home) 生活でオフィスのフリー・フードやドリンクが懐かしいというか、遠い昔のような気さえします。以前まで通っていたテック系企業が密集するオフィス街は今はまるでゴーストタウンのようになっています。本当に以前のような活気が戻ってくるのかはわかりません。

## 初心者向け Node.js 動画シリーズの日本語版を作ってみた

さて、私は猫 x2 ??‍⬛ に邪魔されつつ、この狭い自宅で毎日仕事をしているわけですが、時間がフレキシブルになった分、自由時間も多いので、髪を変な色に染めたりしていたのですが、もっと有意義なことをしたかったこともあり、マイクロソフトの同僚たちがやっていた [**Beginner’s Series to: Node.js**](https://channel9.msdn.com/Series/Beginners-Series-to-NodeJS) プロジェク

Gmailの右ペインの一覧表示を複数行表示に固定するUserScript

# 一応2年位使っています。
なので、もうしばらくは活用はできるかと。

# 環境
* Tampermonkey
* Gmail (左右2ペイン表示時)

# Script
“`javascript:user script
// ==UserScript==
// @name gmail Zs
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://mail.google.com/*
// @grant none
// ==/UserScript==

(function() {
‘use strict’;

// Your code here…
document.body.classList.add(‘Zs’);
})();
“`
“`javascript:boo

IntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。

#はじめに
ホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！

#コード紹介&解説

このような物を作っていきます！

See the Pen

[PlayCanvas] Spineデータを外部から取得して、再生する

# はじめに
* DMM GAMESにあるようなブラウザゲームを作りたい。
* キャラが増える度に インポート→ビルド をするのは手間。
* とりあえず公式プラグインを使用して実装する。

急遽必要になった実装なので、備忘録的に。

# アセット取得
Spineアニメーションを構成するSkeleton, Atlas, Textureを取得します。
外部リソースを使用するため、[assets.loadFromUrl()](https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl)を使用してアセットの読み込み、作成をします。

## Skeleton
SkeletonはJson形式なので`pc.ASSET_JSON`で取得できます。

“` javascript
const url = ”;
this.app.assets.loadFromUrl(url, pc.ASSET_JSON, (err, asset)=>{
this.skeleton = asset;
});
“`

## A

サクッとjQuery【入門】

“`javascript
/* 呼び方 */
① $(“text1”) セレクタ
② .text() メソッド
③ “click” イベント
“`

“`javascript
/* メソッド一覧 「〜する。の処理」*/
/* テキストの値を取り出す */
var hoge = $(“text1”).text();

/* 指定したIDの属性を取り出す id=textのclassが入る */
var hoge = $(“text1”).attr(class);

/* 指定したIDの属性を設定する */
$(“text1”).attr(class, “sampleClass”);

/* 指定したIDのラベルの文字列を先頭に追加 「うえお」→「あいうえお」になる。*/
$(“label1”).prepend(“あい”);

/* 指定したIDのラベルの文字列を前にラベル追加 「うえお」→「あい」「うえお」になる。*/
$(“label1”).before(“あい”);

/* 指定したIDのラベルの文字列を後にラベル追加 「うえお」→「うえお」「あい」になる。*/
$(“label

XMLHttpRequestについて

XMLHttpRequestとはデータをクライアントとサーバー間で通信できるオブジェクトのことです。

よくAjaxで使用されます。

名前にXMLとついていますがXMLだけでなくtextやjsonといったデータも扱えます。

XMLHttpRequestは同期・非同期の両方で通信することができますが、基本的には非同期で使用します。

ここでは最低限のXMLHttpRequestの使用方法を書いていく。

### 使用方法

XMLHttpRequestのインスタンスを作成。

`const xhr = new XMLHttpRequest();`

初期化

`xhr.open(method, URL);`

openと書いてありますがここでは通信をしません。

– methodの部分はGETやPOSTなどHTTPメソッドを入れます。
– URLの部分は通信したいURLをいれます。

初期化したものを送る

`xhr.send([body]);`

sendで初めて通信が行われる。

GET通信のときはbodyは必要ありません。POST通信の時に使用します。

XMLHttpRequ

シンプルで使いやすいURLエンコード・デコードツールを作ってみた

# はじめに

こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？

ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。

# URLエンコード・デコードツール

今回紹介させていただくのは、[URLエンコード・デコードツール](https://web-tools.presto-service.com/url-encode-decode)です。

画面は以下の通りです。


# 使い方

使い方は以下の通りです。
1. 変換前のURL文字列を入力する
2. 変換方法を選択する
3. 結果確認

## 1. 変換前のURL文字列を入力する

![

総務がGASで請求書業務を半自動化してみた。

###◎登場人物紹介◎###
>**総務**
現在22歳。入社1年3ヶ月。フィグニー唯一の総務。
月末と月初は請求業務と給与計算に追われている。心配性な性格のため業務中は頭と胃が痛いことが多い。好きな食べ物は和菓子の練りきり。

>**柱**
現在21歳。
運良くフィグニーに入社して早1年。
朝から晩までコードを書いている。今はインフラの沼に飲み込まれてる。好きな作業場所はソファ。

###総務：請求書業務自動化したい！！！！！###

さて… 第1回目の本日は、**「総務がGASで請求書業務を半自動化してみた。」**です！！

弊社は開発会社なのですが、バックオフィス業務はIT化が遅れている部分が多々あります。その最たるものが請求書業務です！
「SalesForce」「らくらく明細」をはじめとした便利なツールは有料で社長の決裁が下りなかったので（ケチ）、自分で作ることにしました。

総務一人では作れないのでサポートエンジニアがついて教えてくれます！
[2年後にはチームの柱](https://www.wantedly.com/companies/company_

[JS]Tab Menuについて

# はじめに
こちらも順序整理の為に記していきます。

# 実装

まずは形を作っていきます。

“`html:index.html

• サイトの概要
• サービス内容
• お問い合わせ

AND条件とOR条件

AND条件
（a && b && c）
→faltyなモノが式の途中にあった場合には、その値を条件の結果として返す。
→なかった場合には最後の条件、その値を条件の結果として返す。

（a && b）
→左側がtrueなら右側を返す。

OR条件
（a || b || c）
→式の途中でtruthyが見つかった時点で、その値を条件の結果として返す。
→なかった場合には最後の条件、その値を条件の結果として返す。

（a || b）
→左側がfalseなら右側を返す。

ProxyベースのReact状態管理ライブラリ「Valtio」v1リリース

Valtioがv1.0.0になりました！ :tada:

ぜひ試しにでも使ってみてください。

基本的に不具合等の対処が一通り終わって安定してきたのでv1になったのですが、一つだけ隠し機能だったものがオープンになりました。

## `useProxy`マクロ

v0.7.1までは`useProxy`は本体から提供されていましたが、v0.8.0からは`useSnapshot`に改名しました。中身は変わっていません。

代わりに`useProxy`はマクロとして提供されるようになりました。babel-plugin-macrosを使っているのですが、Create React Appを使っている場合はすでに組み込まれています。

この`useProxy`マクロを使うと、

“`jsx
import { useProxy } from ‘valtio/macro’

const Component = () => {
useProxy(state)
return (

{state.

JavaScript コンテキストとスコープ

　　変数や関数の実行コンテキストでアクセスできるデータ及び動きが決められる。そして実行コンテキスト毎に「変数オブジェクト」という物を紐付けている、実行コンテキストの中で宣言した変数と関数はその「変数オブジェクト」の中に存在している。外部では直接「変数オブジェクト」をアクセスできないが、内部で使われている。

　　ブラウザの中ではグローバルコンテキストがwindowオブジェクトです。そこで、letとconst以外で宣言したグローバル変数と関数はwindowオブジェクトのプロパティとメソッドになるわけです。

###コンテキストスタック(context stack)
　　すべての関数呼び出しには独自のコンテキストが存在する。プログラムの実行が関数の中に入った時、該当関数のコンテキストがコンテキストスタックの中にpushされる。関数の実行が終わったら該当関数のコンテキストがコンテキストスタックからpopされる。これによってプログラムのコントロール権が一個前のコンテキストに移動する。よって今現在プログラムのコントロール権を持っているのはコンテキストスタックへ最後にpushされたコンテキストで

(gas) doPostで「現在、ファイルを開くことができません。」というレスポンスが返り処理が失敗する

## doPostで「現在、ファイルを開くことができません。」というレスポンスが返ってくる

GasのWebアプリをデプロイしたときに、doPostの処理を下記のように実装していたところ、

“`js

function doPost(e) {
//do something
//{ok:true} を返す。
return ContentService.createTextOutput(JSON.stringify({ok:true}, null, 2))
.setMimeType(ContentService.MimeType.JSON);
}
“`
レスポンスが下記のようになってしまう現象がありました。
（さらに、doPostの処理自体も実行されませんでした。）

“`html




(gas) 公開SpreadSheetを簡易databaseにするApps ScriptをOOPで書く

## SpreadSheetを簡易databaseにしたAPIができないか
調べたらできそうだったので下記の資料を参考に実装してみました。

## 参考にさせていただいた資料
Google Sheets にデータを追加、更新、削除する Web API をサクッと作る
https://qiita.com/takatama/items/e5cb83012d14c0094a79
【GAS】スプレッドシート内の全シートへのリンク一覧を作る
https://qiita.com/okNirvy/items/d1a2f4918cff8e63dcac
Google Apps ScriptのdoPostでJSONなパラメータのPOSTリクエストを受ける
https://qiita.com/shirakiya/items/db22de49f00710478cfc

## JSのOOP
oopでjsを書く練習をしたかったため、functionでオブジェクトを定義するoopで実装しました。

## 実装するAPIの仕様
– GET で指定したシートの全レコードを取得する
– POST で指定したシートに新し

【jquery,js】指定したURLを開く [window.open,location.href] [js14_20210322]

#### 処理の概要

##### 処理のフロー：
　(1)テキストボックスのURLを取得する
　(2)指定の方法でURLへアクセスする
※遷移出来ない場合は、デフォルトでサーバエラーとなる

#### 画面イメージ

#####画像１

補足）それぞれ指定のボタンを押下するとテキストボックス内にあるURLに別タブや別ウィンドウで遷移します。

#### ソースコード
“`html:index.html

【令和版】window.close() でタブが閉じない時の解決法

開発者「すいません、`window.close()`が動かないいんですけど…」

ワイ「コンソールになんか書いてないですか？」

> Scripts may close only the windows that were opened by them.

開発者「ってでてます。」

ワイ「そこに書いてある通りですね。」

開発者「すみません、英語わかんなくて…」

ワイ「」

—

なぜ閉じないのかわからない人も、どうすればいいかと相談される人も、`window.close()`で消耗するのはもうおしまいにしましょう。

もう聞かれた時にURLを投げればいいだけにしておきたいので、この記事を残しておきます。

さて、まずはなぜ解決できないのかを知っていくために、先ほどの会話の中で出てきた英文の日本語訳を確認します。

![Google翻訳：スクリプトは、スクリプトによって開かれたウィンドウのみを閉じることができます。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/b8ce786d-7bd9-

[JS]Hamburger menuについて

#　はじめに

今後さらりと実装できるようになるように順序整理のために
記していきます。

#　実装

実装していきます。
iconは↓こちらから取得します。

https://google.github.io/material-design-icons/

linkを貼ると、簡単にiconが取得できます。


まずは形を作っていきます。

“`html:index.html