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

Django Channelsを使ったチャットアプリで画像を送れるようにする

作業環境
> python 3.8.6
> Django 3.1.5
> channels 3.0.3

# はじめに
DjangoとChannelsを使ってチャットアプリを作っているのですが、テキストだけでなく画像もチャットで送れるようにしたいと思い、色々試して辿り着いた方法をここに記します。

Channelsの導入方法や設定などは記していません。

チャットアプリを作る際に参考にさせていただいたサイトはこの記事の最後にリンクを貼っています。

# 結論
画像をBase64形式(文字列)に変換すれば、テキストと同じように画像をやり取りできる。

# 作業
#### HTML

“`html:chat.html
…

…
“`

#### ★JavaScript(画像をBase64に変換)

“`js:chat

【SHOWROOM】配信中のコメント・ギフトログをリアルタイムに取得する方法

# はじめに
最近SHOWROOMを見始めて、バーチャル枠を見てると配信画面にコメントやらギフトログを出している人が居るのでそれってどうやって取得できるのかな？と思ったのがこの記事を書くことになった切っ掛けです

# 調査
双方向通信って事はWebSocketでも使っているのかな？
と言う事で配信画面でブラウザの開発者ツール開いて`WS`を見てみると案の定
`online.showroom-live.com`に`SUB 何かの文字列`を送ることで配信内のコメントなど取得できるようになってるみたいです

### 謎の文字列
WebSocket使っているのは分かったが、接続した後何の文字列を送っているのか？
色々なルームの文字列を見たところ`bXXXXX(6文字):XXXXXXXX(8文字)`の形式みたいです

色々調べてみるとAPIがあるみたいで[まとめ

【kintone x OCR】～KEYWORD検索編～　kintoneのOCRプラグインを開発する②【GCP】

#最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

###今回（KEYWORD検索編）の目標
①でCloud VisionのOCR結果をKintone上で取得するプラグインを作成しました。
今回はその結果を利用して、必要な情報（請求番号・支払期限・振込先・請求元・明細）を取得していこうと思います。

早速ですが、取得する方法はいくつか考えつきます。（私の知識の範囲ですが）下記に列挙してみたいと思います。

【kintone x OCR】kintone OCRプラグイン　文書テンプレート作成方法【GCP】

#はじめに
この記事では、kintoneのOCRプラグイン（Vision API arr.by LOM）で利用する文書テンプレートについて説明します。

#プラグイン（テンプレート）のダウンロード
https://tanoshimane.stores.jp/ にアクセスし、下記をダウンロード（無償購入）してください。

* kintoneテンプレートパック　Vision API arr.by LOM 必須
* kintoneプラグイン　Vision API arr.by LOM 必須
* kintoneプラグイン　Multi pages 任意
* kintoneプラグイン　Template assist 任意

1テンプレート3プラグインの計4zipファイルになります。

#文書テンプレート
OCRを実施する前に、文書種類毎に文書テンプレートを作成する必要があります。この文書テンプレートは文書の種類（様式）が同様であれば最初に1テンプレート作成すれば大丈夫です。文書の設計図のようなものだとご理解いただければと思います。＊「文書の種類（様式）が同様」とは、具体的にはKEYWORDの文言及

【kintone x OCR】kintone OCRプラグイン　Vision API arr.by LOM 利用方法【GCP】

#出来ること
kintone上でGoogle Cloud Vision API を利用し、その結果から必要な値を取得します。
例として、この↓画像（請求書）から、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することが出来ます。
↓
取得結果（kintone画面）

#ご利用の前に
＊kintoneのアカウント（スタンダード）が必要です。
＊**IEではご利用いただけません**（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
＊初回利用時から1か

最近気になっているCSSフレームワークは、BulmaとTailWind CSS

# はじめに
最近小耳に挟むなりして気になっているCSSフレームワークが2つあります。
今回は、その2つ(**Bulma**, **TailWind CSS**)について、まとめてみようかと思います。

# [Bulma](https://bulma.io/)
特徴としては以下です。

* CSSのみでのフレキシブルデザインに対応している。
* JavaScript無しで使える。
* ドキュメントが読みやすく、クラス名の付与後の結果も分かりやすい。

ただ、気になるのはサイズですかね。
bootstrap.min.cssが150KBくらいに対して、bulma.min.cssは180KBくらいで軽量とは言えないところですかね。

## 試してみる
### 修飾子
* ほとんどのBulma要素に、様々なスタイルがあり、適用するには、修飾子クラスの1つを追加するだけ。
* それらはすべて**is-**または**has-**で始まる。

“`Bulma.html

JSの非同期処理（Promise、async、await）についてまとめてみた

#はじめに
JSを学習するにあたり、非同期処理（`Promise`、`async`、`await`等）について理解ができてないので簡単にまとめてみました。

「そもそも非同期処理って何？？」って、最初は疑問をもつと思います。
なので、まずは概念的な部分からさぐっていき、JSの非同期処理の定番である`Promise`、`async`、`await`についてまとめていきます。

#概念（同期処理、非同期処理）
`同期処理`はプログラムを上から順に処理していくこと。ひとつの処理が完了するまで次の処理は行われません。
`非同期処理`は同期処理とは違って、ひとつの処理を行っている間、別の処理を並行して行えます。

その２つの違いをわかりやすく日常的なことを取り入れて、図解にすると下の違いです。

“`
同期処理　　　　　　　　　　　　　　非同期処理

掃除　　　Netflixみる　　　　　　掃除　　　　Netflixみる
｜　　　　　　　　　　　　　　　　　　｜　　　　　　
｜　　　　　　　　　　　　　　　　　　｜　　　　　　
｜ーーーーーー｜　　　　　　　　　　　｜ーーーーーー｜
中断　　

React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~

本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~](https://qiita.com/techpit-jp/items/984b80a795b7a6f6dd60)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（macOS）
Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

“`
$ node -v
“`

下記のようにインストールされているNode.jsのバージョンが表示されれば、すでにインストール済みですので、本パートは読み飛ばしてください。

“`
v12.

React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~

本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~](https://qiita.com/techpit-jp/items/b4792f22ddc1155a1cb3)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（Windows）

Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

もし既にお手元のPCにNode.jsの環境があれば、このパートは読み飛ばしても大丈夫です。

注意）このパートで環境構築する対応のPCはWindowsになります。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

“`
$ node -v
`

非負整数のみ入力を受け付ける

このプログラムでは、数値以外を含む入力を受け取った場合に数値のみをきれいに抜き出して入力することが出来ます。

“`React
import React from ‘react’;

class inputVal extends React.Component {

constructor(props){
super(props);
this.state = {
value = ”;
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(e){
var value = e.target.value.replace(/\D/gi,”);
if (/^([1-9]\d*|0|)$/.test(value)){
this.setState({speed: value});
} else if (/^0\d*$/.test(value)){
this.setState({speed:

useEffect を書きながら学ぶ [ React Hooks 入門 ]

Reactの組み込みフックであると`useRef`の説明をします。

## useEffect とは

コンポーネントに副作用を追加するフックです。

副作用とは以下の4つです。

– Reactから生成されたDOMの変更
– APIとの通信
– 非同期処理
– console.log

副作用が分かりにくいので、もっと噛み砕いて言えば

`useEffect`は、コンポネントのレンダリング後か、アンマウント（コンポネントをDOMから削除）後に、なにかの処理を実行させたいときに使うといいやつ。

って覚えとけばいいと思います。

### 構文

“`js
useEffect(副作用, [deps])
“`

引数の渡し方によって、副作用が実行されるタイミングは異なります。

#### 引数の渡し方によって、副作用が実行されるタイミング…1（毎回）

これもちゃんと動作します。

“`js
useEffect(副作用)
“`

これは毎回のレンダリング後に副作用が実行されます。

#### 引数の渡し方によって、副作用が実行されるタイミング…2（[deps]更新時）

こ

モジュールとかバンドルとかって結局何なの？【簡単まとめ】

## はじめに
JavaScriptでよく登場するモジュールとかバンドルとかそのためのツールって結局何だっけ？何で必要なの？となり、都度ググるのが面倒なので、各用語を簡単にまとめたいと思います。

難しいことは追わずに、各用語を順を追って、簡単に概要だけつらつらと書いていきます。

## モジュールとは？
**機能ごとに分割されたファイル**のこと。
変数や関数が書かれたプログラムのことで、基本的には1ファイルのことをモジュールと呼ぶという認識で基本はOK！

ちなみに、元々JavaScriptは、**Webページでちょっとした機能を提供する用途**で開発された言語だったので、このモジュールを定義したり、読み込んだりという機能が言語仕様として用意されていなかった
（※ここ大事！！！）
なので、JavaScriptでもモジュール化したいよね〜ということで後述に繋がっていきます。

なお、他のサーバーサイド言語では、このモジュールを使うための技術が、標準で用意されていることが多いらしい。

## モジュール化するメリットって何？

各モジュール単位でプログラムを管理出来るので保守性や可読性

Railsでページ遷移時にJavaScriptが実行されない場合の対処法

##発生した問題
Railsにてページ遷移時にJavaScriptが実行されない。
ページを更新すると実行される。

##原因
Railsに標準で導入されているturbolinksというGemが原因でした。
turbolinksはページ内の全ての情報を読み込まず、HTML要素だけを読み込むことで画面遷移を高速化してくれるのですが、その結果JavaScriptファイルが読み込まれない為実行されませんでした。

##対処法
“`javascript

window.addEventListener(‘load’, function(){
“`
該当jsファイル内の上記の’load’の部分を’turbolinks:load’に変更する。

“`javascript

window.addEventListener(‘turbolinks:load’, function(){
“`

無事にJavaScriptが実行されました。

ユーザー新規登録時にリアルタイムでエラーを出す方法

ユーザー新規登録の時、ちゃんと文字を入力したと思いきや入力できていなかったり、バリデーションの問題で登録ボタンを押したときに、弾かれたりすることってありますよね？

・・・ありますよね？

そんなときに入力した後にエラー文がその場で出てくれるとありがたいと思い機能を考えてみました。

# 1.流れの確認

じゃあやってみよう！
そういってもjavascript初心者の私にそのようなことが表現できるか不安だったので、まずは流れの確認から始めます。

前提として、`deviseを使用しております`。

まずはニックネームの場合のスタートとゴールを決めます。

start:登録フォームのニックネーム入力スペースに文字を入力する`

goal :バリデーションに引っかかっていたらニックネーム入力スペースの下にエラー文を出す
引っかかっていなければエラー文は出ない（既に出ていたら消える）

# 2.表現方法

– まずはエラー文の文字を出す方法
幾つか方法はありますが、シンプルにしました。

HTML側でニックネームフォームを少し変更します。

“`ruby:regi

Javascriptで双方向リスト

## 双方向リスト

参考: https://yoshinorin.net/2020/08/31/double-linked-list-js/

“`js
class Node {
constructor(data, next = null, prev = null) {
this.data = data;
this.next = next;
this.prev = prev;
}
}

class DoublyLinkedList {
constructor() {
this.head = null;
}

append(data) {
let new_node = new Node(data);
if (!this.head) {
this.head = new_node;
return;
}

let current_node = this.head;
while (current_node.next) {
current_node = c

Javascriptの関数定義

javascriptの関数定義を初心者なりにまとめてみます。

#function
functionを用いることで関数を定義することができる。functionに続けて「関数名、（）{ }」と記述していき、{}のなかに処理を書いていく。

“`javascript
function 関数名( ) {
// 処理
}

//(例)
function sayHello(){
console.log(“こんにちは”)
}

sayHello()
“`
コンソールでの出力

#関数宣言
このように関数名を定義し、処理を書いていく定義を関数宣言という。

#関数式
関数宣言は関数名を記述するのに対し、関数式の場合は、function(){}という無名の関数を変

元記事を表示

Javascriptで単方向リスト

# 単方向リスト

参考: https://codechacha.com/ja/singly-linked-list-java/

“`js
class Node {
constructor(data, next = null) {
this.data = data;
this.next = next;
}
}

class LinkedList {
constructor() {
this.head = null;
}

insertFirst(data) {
this.head = new Node(data, this.head);
}

append(data) {
const last = this.getLast();
if (last) {
// There are some existing nodes in our chain
last.next = new Node(data);
} else {
// The chain is empty!
this.head

元記事を表示

[PlayCanvas] サウンドの再生終了したタイミングで処理を実行する

# はじめに
* 特定のサウンドの再生が終わった後に処理を走らせたい。
* ザックリと調べてもそういったイベントもなさそうなので、とりあえず自前でどうにかする。
* 重要：これはベストな方法ではない。

# 実装
マウスをクリックしたら音声を再生、その音声終了したらコンソールにログを表示します。

“` javascript:Sample
var Sample= pc.createScript(‘sample’);

// initialize code called once per entity
Sample.prototype.initialize = function() {
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.mouseDown, this);
};

Sample.prototype.mouseDown = function(event) {
var name = ‘Sample’;

if( this.entity.sound ){
this.entity.sound.pl

元記事を表示

Vueでタブメニューを作成する

#概要
SPAにおいてタブメニューは割と使い場面が多いので、実装方法を忘れないようにメモします。
こういうやつ↓

#実装
“`.vue

• New
• Trend
• jQueryのセレクタで同じIDのDOM要素を全取りする

  同じページに同じIDの複数のDOM要素がありそれらを全て取得したいとき、jQueryで`#ID名`で指定する方法では最初の１つしか取得できません。例えば以下の例では最初のSample1だけ取得できます。

  “`page.html
  Sample1
  Sample2
  Sample3
  “`

  “`jscode.js
  var elems = $(“#sample”);
  for(var elem of elems) {
  console.log($(elem).text());
  }
  “`

  結果

  “`
  Sample1
  “`

  そんなときは、`[id=ID名]`のセレクタを使うと全部取れるようです。

  “`jscode.js
  var elems = $(“[id=sample]”);
  for(var elem of elems) {
  console.log($(elem).text());
  }
  “`

  結果

  “`
  Sampl

元記事を表示