JavaScript関連のことを調べてみた2020年07月26日

LINE LIVEのチャット取得

コメントビューア用。
OAuthが要るようなAPIは使わず、未登録で取得できるコメントを取得。
あくまで執筆時点の情報です。仕様が変わる可能性もあるのであしからず。

## ユーザのチャンネルURL
– `https://live.line.me/channels/{ユーザID}`

## 手順

1. 動画IDの取得
– GET `https://live-api.line-apps.com/web/v4.0/channel/{ユーザID}`
– レスポンス

“`js
{
/** ステータスコード。正常時200が返ってくるっぽい。 */
“apistatusCode”: number,
/** ユーザID */
“id”: number,
/** タイトル */
“title”:string,
/** 配信してたらtrue */
“isBroadcastingNow”: boolean,
“liveBroadca

Build a movie search app using React hooksをReact Spectrumで作ってみた

# React Spectrumがすごい
React Spectrumがすごそうということで、実際に使って開発してみました。React Spectrum自体の設計のクオリティの高さは、[Adobe製デザインシステム「React Spectrum」がすごいので紹介したい](https://qiita.com/so99ynoodles/items/bc924b7ee8c265b09723)の記事が詳しいです。内部の作りはさておき、開発者視点で良かったと感じた点は以下です。

– **Adobeが開発**しているので信頼度が高い
– Componentの**プロパティの統一感**があり、わかりやすく使いやすい
– **Flex/Gridが簡単にかける**
– 基本的にタグで書いていく思想？でCSSを書かなくても大体いける。Flex/Gridもタグがある。
– classNameのプロパティは「UNSAFE_className」になっており、説明にも「最後の手段」と。

# Build a movie search app using React hooksについて
[2020年のフロ

指定時刻のエポック秒を得る方法（moment.jsとshell）

## 目的
– 時刻や日時の計算は一度エポック秒に変換して加算、減算するのがもっとも間違いが少ないです。
– そのためJavaScriptでも指定時刻からエポック秒を得たいことがあります。サマータイムとか閏とか手で設定するのは悪夢。
– JavaScriptのデフォルトのDateで格闘するのも否定しませんが、時間かけずにさっさとコーディングしたいものです。
– それには`moment.js`を導入することにしています。
– でもshellの`gdate`と互換の無い記述なのでその備忘録としての書いておきます。

## 環境
– macOS
– moment.js 2.17
– bash 5.0.17
– date (GNU coreutils) 8.32

## リンク
– [UNIX時間](https://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93)
– [Moment.js Documentation](https://momentjs.com/docs/#/parsing/)
– [日付からエポック、エポックから日付をワンライナーで]

アロー関数式初心者覚書

初心者覚書です。申し訳ありませんが、ほぼ[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を読み、箇条書きにしてなんとか少しは覚えようとしているだけなので、参考サイトを見た方がわかりやすいです。

アロー関数とは

– アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできない
– 関数を短く書きたい、thisを束縛したくないという2つの理由がある
– 通常関数にはthisがあり、thisが何を指すのかは、通常関数を実行したタイミングで決まるが、
– アロー関数には、それ自体が保有するthisはなく、関数の外のthisを関数内で参照できるだけです。レキシカルスコープのthisを参照します。つまり、アロー関数は定義したときに、thisが指すものがひとつに決まり、どうやって関数が実行されるかに左右されなくなります。
– アロー関数はnewすることができません。つまり、アロー関数はコンストラクタになることができない＞通常関数はcla

HTML5のフォームバリデーションをSPAの中で使う方法

最近、素のHTML5やCSS3をなるべく活用することに興味があります。
こういったベースの技術の方がフレームワークよりも息が長いので、一度学んだことを長期間役に立てることができるためです。

※もちろんフレームワークも使うときは使います。例えばNuxt.jsは大好きです。

今回は、HTML5のフォームバリデーション機能を、Nuxt.jsで構築したSPAの中で使ってみたいと思います。

#課題
HTML5のフォームバリデーションは、通常はformのsubmitを実行したタイミングで実施されます。
でも、SPAではformをsubmitしません。
どうしましょう…

#解決策
form.reportValidity() を使います。
これは、submitせずにバリデーションだけをかけるためのメソッドです。

※2020年7月時点のMDNによれば、**IE以外の**全ての主要ブラウザでサポートされているようです。安心して使えますね。
　https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValid

【TypeScript/JavaScript】一定条件になるまでループする

## for (;;) + break 版

“`typescript
let num = 0

for (;;) {
num += 1
const ok = num >= 10
if (ok) break
}

console.log(num) // => 10
“`

## do … while 版

“`typescript
let num = 0
let ok = true

do {
num += 1
ok = num < 10 } while (ok) console.log(num) // => 10
“`

or

“`typescript
let num = 0
let ok = false

do {
num += 1
ok = num >= 10
} while (!ok)

console.log(num) // => 10
“`

## 参考

[ループと反復処理](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_itera

OPENRECのチャット取得

コメントビューア用。
OAuthが要るようなAPIは使わず、未登録で取得できるコメントを取得。
あくまで執筆時点の情報です。仕様が変わる可能性もあるのであしからず。

## ユーザのチャンネルURL
– `https://www.openrec.tv/live/{ユーザID}`
– 例: `https://www.openrec.tv/live/pasta04`

## 手順

1. ユーザIDを元に、動画IDを取得
– GET `https://public.openrec.tv/external/api/v5/movies?channel_ids={ユーザID}&sort=onair_status&is_upload=false`
– レスポンス

“`
{
/** 動画ID(文字列) */
“id”: string,
/** 動画ID(数値) */
“movie_id”: number,
/** 配信タイトル */
“ti

LINE×GASで作成した順番取り予約LINE Botを改良

##概要
耳鼻科の開業医をしています。先週、医院の順番取り予約システムのプロトタイプをGASを使ったLINE Botで作成しました。
[1時間で出来る　LINE×GASで順番取り予約システムの作成](https://qiita.com/doikatsuyuki/items/842b675415abd463e499)
今回こちらを改良して実際患者さんに使ってもらいました。

##実装
1.患者さんはLINEで現在の診察待ち状況が分かる
2.患者さんはLINEで診察の順番が取れる
3.スタッフはLINEで診察中患者を更新できる
4.受付時間以外は予約券が発券されない
5.休診日は予約券が発券されない
6.スタッフはLINEで発券番号と診察中患者を初期化できる

今回は4~6の機能を追加しました。

##概念図
バックエンドとしてGoogle Spread Sheetを利用し発券番号・診察中番号を管理。Google App Script(GAS）でLINE botと連携しました。
作成法はこちら
[1時間で出来る　LINE×GASで順番取り予約システムの作成](https://qiita.c

Twicasのチャット取得

コメントビューア用。
OAuthが要るようなAPIは使わず、未登録で取得できるコメントを取得。
あくまで執筆時点の情報です。仕様が変わる可能性もあるのであしからず。

## ユーザの配信URL
– `https://twitcasting.tv/{ユーザID}`
– 例: `https://twitcasting.tv/pasta04`

## 手順

1. ユーザIDを元に、動画ID(movieID)を取得
– リクエスト
– GET `https://frontendapi.twitcasting.tv/users/{ユーザID}/latest-movie`
– レスポンス

“`json
{
“update_interval_sec”: 4,
“movie”: {
“id”: {movieID},
“is_on_live”: true // 配信中かどうか
}
}
“`

2. 動画I

イマドキな JavaScript で書かない・使わないもの

自分は趣味で JavaScript をしているため、お仕事などでは使わざるをえない場合もあるかもしれませんが、少なくとも理想的には使わない方がいいものを書きます。

– `var` を書かない
– `let` もなるべく書かない
– なるべく `const` を使う
– `function` をなるべく書かない
– アロー関数またはクラスやオブジェクトのメソッドを使う
– 理論上どうしても必要な場合のみ `function`
– `then()` を書かない
– jQuery を使わない
– XMLHttpRequest を使わない

IE 対応が必要な場合は、Babel 等のトランスコンパイラの使用を検討してください。

# 1. `var` を書かない・なるべく `const` を使う

`const`, `let` は IE 11 ですら使用できます ※ 。

※ `for` 文内での `let` の挙動が異なるようです。

参考「[let – JavaScript | MDN](https://developer.mozilla.org/ja/d

jsでネットワークVoxelエディターを作る方法

# ネットワークVoxelエディター
7月14日に多人数同時接続が出来るVoxelエディターを公開しました。
[ネットワークVoxelエディター](http://ik1-314-17143.vs.sakura.ne.jp/)

去年作った方
[初期のVoxelエディター](https://ai5.jp/voxel-editor)

これは Node.js、three.js、Socket.io、MongoDBで作っています。（jsの技術総動員）

## 作品

初期のVoxelエディターでこのような作品を作っていただきました。他にも色々と作っていただいたのですが、割愛。

voxelエディターの動画 #voxelart https://t.co/

Google Chartがモーダルで上手く表示できない時

簡単にグラフが作れて人気なGoogle Chart。その中の「GeoChart」は都道府県別の日本地図を作成できます。以下のように都道府県別で色分でき、カーソルを当てるとパラメータを表示してくれます。

#やりたいこと

今回は既にあるオリジナルサービス内に、ユーザー詳細ページにあるリンクをクリックするとモーダルでユーザーのデータが反映されたMAPを表示する機能を実装します。

ということでファイルを作成。
（データを入れる処理は人それぞれなので割愛）

“`ruby:users/_map.html.erb

テキストレイヤーの改行をカウントする

##テキストレイヤーの中身の改行コードが違った
`\n`で改行をカウントしようとしたところ全然判定されず、小一時間悩んで調べまくった結果、環境によって改行コードが混在している事が判明。
試しに`\r`で判定してみたところ無事カウントされたので、参考になれば。
環境：Windows10, AE2019
[参考サイト](https://sites.google.com/site/aescriptingreference/home/tips/tekisutofairu-chu-li-shino-gai-xingkodo)
##サンプルコード
“`JavaScript:
var myComp = app.project.activeItem;
var myLayer = myComp.selectedLayers[0];
var myText = myLayer.property(“ADBE Text Properties”).property(“ADBE Text Document”).value;
var Text = myText.toString(myText);
var resul

【JavaScript入門】カウントダウンタイマー

## はじめに
ECサイトを作成する際、
・期間限定のセールで残り時間を表示したい
ソーシャルゲームを作成する際、
・限定ガチャやボスが逃げるまでの残り時間を表示したい
と思うことあると思います。
今回は、そんな機能についてご紹介します。

## 方法
今回は、jQueryを使用して作成します。

“`html:

“`

カウントダウンタイマー機能を作成します。

“`html:JavaScript