f@ctor

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

JavaScript関連のことを調べてみた2020年06月12日
目次

Angular.jsで関数を動かして分かったこと

Angular.jsを使っていて気になったことメモ

関数の書き方はいくつかある。

“`javascript:methodTest.js
let app = angular.module(‘methodTest’, []);

app.controller(‘meController’, function($scope) {

// その1 普通に定義
let callA = function() {
console.log(‘a’);
}

// その2 依存サービス(?)に定義
$scope.callB = function() {
console.log(‘b’);
}

// その3 Controllerに定義？
this.callC = function() {
console.log(‘c’);
}
})
“`

書き方によって呼び出せたり呼び出せなかったりするので色々確認。

## 関数を画面から呼ぶ

“`html:methodTest.html

元記事を表示

Payjpを使用したクレジットカード登録機能

#はじめに
某スクールのチーム開発にてpay.jpを活用したクレジットカード登録を担当させて頂きましたのでアウトプットも兼ねてまとめたいです。
ちなみにコードについてはまだまだ素人の為拙い部分も目立つかも知れない為、参考にされる方はご了承ください。

##Payjpとは何か？
クレジットカードを登録、変更、購入を行ってくれる便利なAPIです。
フリマアプリ、ECサイトでクレジットカードを使って商品の購入する時クレジットカード情報が保存されるところになります。
ちなみにカード情報そのものをECサイト上に保存することは禁止されている為ご注意下さい。

現在はWEBサイトに通販も交えたサイトが多く、ネットでのECサービスほぼ全てに実装されている機能で、身分証明も兼ねているため、Webエンジニアになられる方は学んでおいた方が良いかもしれません。

##前提条件
今回のPayjp登録機能実装ですが、前提条件として
・hamlでの記載（gem ‘haml-rails’）
・d

元記事を表示

ビデオチャット時代のプライバシーと表現力の調和を兼ね備えたWebアプリを作ってみた

#概要
　ここ数か月でオンラインセミナーやオンラインイベントが急激に増えていますね。その中であるあるなのが、画面真っ黒状態。何かというと、参加者がカメラオフにしていて参加者一覧画面が真っ黒に染まる事です。

　これは主催や運営側として、参加者の感情を読み取りづらかったりつ辛い部分があるとのことです。そこで、少しでも華やかになりつつプライバシー保護を考慮したビデオチャットのプロトタイプを作ってみました！

　どうしたかというと、相手の画像を「画風変換にかける」です。以下が実際のようです。

議事録()を、自動生成してくれる VideoChat() をつくった。

実際のサイト->https://1on1-mtg-chat.ml/

サイトの弱点
—
1.自分の声しか文字起こし(議事録)できない。
2.複数人チャットは対応してない。
3.議事録開始まで少しラグがある。
4.議事録の停止後、議事録が再開しているか停止しているかわかりづらい。

以上の点から実用性はまだ低い

サイトの作り方
—
今回は SkyWay というサービスを利用して、ビデオ通話の部分を実装しています。なので、まず始めに SkyWay のサインアップを行いましょう。(“無料で始める”というタブから行えます。https://webrtc.ecl.ntt.com/)
![スクリーンショット 2020-06-11 21.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/d671e03e-dc87-8a16-66d1-393475b6ce7e.png)

SkyWay にサインアップができたら
—
サイドバーにある、アプリケーション一覧を選択し、”新し

元記事を表示

プログラミング　英単語

#プログラミング英単語

プログラミングをはじめてみて以外に**英単語の重要性**に気づかされました！

なので英単語を随時追加していきます！

参考にしていただけると幸いです。

※()内の意味は適切なものもあれば、意味から勝手に類推したものもあります。
また、実際の意味と異なる場合があるとおもいますので、発見された際にはご指摘のほうよろしくお願いします。

#1 HTML, CSS
**br[HTML]** = break(分ける)の略で文章の改行で使う

#2 JavaScript
**concat(method)** ＝ concatenation(連結)の略で配列要素を連結するのにつかう

#3 PHP
**mb_strpos(method)**　= マルチバイトに対応した(mb)文字列の(str, String)特定の文字位置(pos, position)を検索する

#4 Ruby

#5 MySQL

#6 Python

#7 Java

元記事を表示

オンラインミーティングにも「バーチャルディスタンス」と「バーチャルエチケット」でリアルの感覚を忘れない！

# オンライン化で見失うリアルの緊張感
新型コロナウイルスの影響で、在宅ワークやオンラインミーティングの機会が増えました。
テレビをつけると「三蜜を避ける」「マスク着用必須」「ソーシャルディスタンス」と聞かない日はありませんでした。

しかし、実際に在宅ワークをしていると、家ではマスクしないしソーシャルディスタンスなど気にしませんね。そうやって**リアル世界との緊張感のズレ**が生じていきます。。

ということで、

## 今回作ったもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121887/bec419a9-bea0-e7b5-5e2a-e3b24bac74ef.png)

sky wayとml5.jsを使ったオンラインミーティングツールです。
ここでは**在宅で麻痺してリアル世界とのズレが大きくならない**よう、

– オンラインでも近づき過ぎたら「バーチャルディスタンス」違反
– エチケットとしてバーチャル世界でもマスク着用必須
– マスクでオンラインミーティングをしたときの

元記事を表示

Promiseとasync/awaitでの非同期処理

# 非同期処理
毎回理解できた気になるけど、他人のコード見るたびに「こんな書き方あるんだ…」、「これなんのための記述…」ってなる…

もう書き尽くされたお題だと思いますが、自分のためにアウトプットします。すみません。

# とりあえずやってみたいこと

test1.txtを読み込んでファイル名を取得して、次のファイルを読んで…を繰り返して最終的にtest3.txtの内容を出力してみる。

“`:test1.txt
./test2.txt
“`
“`:test2.txt
./test3.txt
“`
“`:test3.txt
Hello World!
“`

実行結果は全部これです。

“`:実行結果
> node .\index.js
./test2.txt
./test3.txt
Hello World!
“`

# コールバック

昔からあるコールバックで実現しようとすると

“`javascript
function func() {
// 1つ目のファイルの読み込み
fs.readFile(‘./test1.txt’, ‘utf-8’, (

元記事を表示

SkyWayを使ってリアルタイム物体検出つきビデオチャットを作る

### 概要
ビデオチャットのSkyWayに物体検出をいれて、リアルタイムで物体検出しながら
ビデオチャットをする謎のビデオチャットです。
### できたもの
https://yolo-videochat.ga


```

デベロッパーツールの「✖︎」を見れば、"〜 is not a function"」と書かれていることがある。これは、JSが準備している機能ではないことを意味している。まずは、打ち間違いがないか確認すること。

###＜先ほどのコードの意味＞

```
document.write('...');

document：オブジェクト（対象）
→documentは表示しているものという意味

write:メソッド（命令）
→write:書いて欲しい（＝表示して欲しい）

('...'); :パラメーター（何を）
```

###＜学習ポイント＞
**各オブジェクト、各メソッド、各パラメーターの種類を組み立てて文章を作るイメージで学習・チャレンジしくこと（講師曰く）**

###＜JSの変数宣言＞
JSは変数宣言が必要（var, let）
しかし2回

元記事を表示

Kinx アルゴリズム - ライフゲーム

# Kinx アルゴリズム - ライフゲーム

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。「プログラム＝アルゴリズム＋データ構造」。アルゴリズムの実装例をご紹介。

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回はライフゲームです。

* 参考
* 最初の動機 ... [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ ... [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

最新アルゴリズム事典にはこういうのも結構載ってる。パズル的な。

元記事を表示

自分以外の誰かを巻き込むテストは難しかった

今回はskyWayというビデオ通話アプリ・ml5.jsという画像解析ライブラリ・canvasを使ってビデオアプリで遊んでみました。

```html





ml5jsTest





```

##読み込み

```js
const axios = require('axios').default;
```
ES6のモジュールインポートなら

```js
import axios from 'axios'

元記事を表示

SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜

# 概要

Next.js 9.3から `getServerSideProps` という仕組みが導入されました。

https://nextjs.org/docs/basic-features/data-fetching

上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。

僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。

- 「`getServerSideProps`って何が良いの？なんで生まれたの？」
- 「なんで`getInitialProps`は非推奨なの？」
- 「Vercel製のSWRってライブラリあるけど、あれ何？」
- 「てか`getServerSideProps`とSWRって関係あるの？」

この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。

※過剰な煽りタイトルであることを自覚していますので、先に謝っておき

元記事を表示

Nuxt.js + vuetify(+ axios)でページネーションを実装してみる

#はじめに
Nuxt.jsとVuetify, axiosでqiita apiのデータを取得して表示、そしてページネーションを実装し分割していこうと思います。

nuxt.jsについて少し知っている人っていう人に向けた記事です。全く知らないと厳しいと思います。
また自分自身もnuxtが出来るというわけではないので間違っているところがあるかもしれないので、参考程度に見てください。

↓参考サイト
[【vue.js】 Vuetifyで簡単ページネーション(Paginations)
](https://reffect.co.jp/vue/vuetify-simple-pagination)

参考画像
![スクリーンショット (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573077/67cdd2c9-d8d9-722d-fdb4-34df05ba638e.png)
![スクリーンショット (13).png](https://qiita-image-store.s3.ap-northeast-1.am

元記事を表示

OTHERカテゴリの最新記事