Quaggajsでバーコードリーダー作ったらカメラ周りでハマった話

在庫管理に利用されているバーコード（JANコード）ってご存知ですよね？[Quaggajs](https://serratus.github.io/quaggaJS/)というライブラリでそのリーダーを簡単に実装できるらしいです。実際にスマホのWebブラウザで動くアプリを作ってみてハマったポイントをメモとして残しておきます。ライブラリの詳細は上記リンク先を参照ください。

#とりあえず作ってみる
とりあえずインストール。

““
$ npm install quagga
““

LiveStreamで起動する場合、次のコードで起動できます。

““js
import Quagga from “quagga”;
// LiveStreamを表示するvideoDOMを挿入したい親DOM
const camera = document.getElementById(“camera”);
// QuaggaJSをLiveStreamで起動する
start(camera);
function start(camera) {
// QuaggaJs初期化のConfig
const

Next.jsで画像を配置する方法

#Next.jsで画像を配置する方法
最近学んだことをoutputするために書きました。
##やり方
①まずpublicフォルダにstatic fileを作り、その中に画像をぶち込みます。
②その次に画像を配置したいフォルダー内に行き、Imageタグで画像を表示していきます。この時、publicは”/”で表示できるので気をつけましょう。

“`

“`

以上で表示できます！以上グッピーでした！

##参考にした記事
https://qiita.com/KMD/items/f201b846b2485841c0ff

【Vue.js】Twitterシェア　ツイートの中身の指定（2週間後の日付、本のタイトル）

#はじめに
こんにちは！
今回は【Vue.js】Twitterシェアボタンの実装についてアウトプットしていきます！

[前回の記事](https://qiita.com/Yudai_35_/items/1254f04a913e66d330ed)でTwitterシェアの実装を行いました！今回はツイートのコメント部分に、
①2週間後の日付
②診断結果ででた本のタイトル
を自動的に記入される機能を実装していきます！

#対象
・vue.jsでTwitterシェアを実装したい方
・vue.jsで日付を取得し表示させたい方
・[前回の記事](https://qiita.com/Yudai_35_/items/1254f04a913e66d330ed)までの内容を実装済みの方。

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7 |
|@nuxtjs/tailwindcss |4.2.0 |
|moment |2.29.1 |
|nuxt-microcms-module |2.0.0 |

##使用ファイル,概要

|ファイル名 |概要

【JavaScript】条件分岐と繰り返し処理

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点等について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## JavaScriptの条件分岐と繰り返し処理

### `if()`
“`.js
// 条件式が１つ
if(条件1){
処理1
}
// 条件1を満たすときは、処理1を実行

// 条件式が１つで処理を２つに分ける
if(条件1){
処理1
} else{
処理2
}
// 条件1を満たすときは処理1、満たさないときは処理2を実行

// 条件式が2つで処理を分ける
if(条件1){
処理1
} else if(条件2){
処理2
} else{
処理3
}
// 条件1を満たすときは処理1、条件2を満たすときは処理2、どちらも満たさないときは処理3を実行

“`

### `while()`,`do…while()`,`for(

HTMLの要素をIE11でも使えるように見せかける簡易版JSを作った

IE11も対象の案件。ブラウザの画面幅に応じてページのレイアウトが変わる際、一部の<img>要素の画像については縦横比が異なるものを表示させる必要がありました。そこで、サイズや縦横比が異なる複数の画像をあらかじめ用意しておき、画面幅に応じて自動で切り替わるようにしたい。最近のブラウザならHTMLの<picture>要素をサポートしているので、mediaクエリを付けた<source>要素を並べて書くだけで実現できますが、IE11は<picture>要素が未対応。もちろん、polyfill [picturefill.js](http://scottjehl.github.io/picturefill/)の存在は知っています。が、今回はとりあえずmax-widthだけを基準にして画像を切り替えできれば十分だったので、自分でIE11用に簡易版のコードをJavaScriptで書いてみることにしました[^1]。
[^1]: picturefill.jsは2017年3月リリースのver.3.0.3を最後に更新が止まっているようで、projectのstatusがよくわからなかっ

AntDesignのAvatarを自作してみた

# 1. 自作した理由
– 通っていたスクールで依存度が高いAntDesignからの脱却を目指していたため、その流れで自分もチャレンジしてみようと感じた。

# 2. 開発環境
– react v16.12.0
– styled-components v5.3.3
– typescript v4.1.4

# 3. 実装した機能
まずは、AntDesignのAvatarに搭載されている機能を紹介します。

https://ant.design/components/avatar/#Avatar

正直使わない機能が多かったため、自作した際には最低限使いそうな`src size border shape`のみを実装しました。

# 4. 実際のコード

“`JavaScript
import React from ‘react’;
import styled, { css } from ‘styled-components’;

type Props = {
src?: string | null;
size?: number | ‘large’ | ‘small’ | ‘de

TypeScriptチートシート５(ジェネリクス)

ジェネリクス

型を引数として受け取る

基本

関数実行時に引数で型を渡すことができる
それを関数内で使える

“`typescript
function copy(value: T): T {
let hone: T;
return value;
}

copy(“hello”);

“`

具体例

“`typescript
const stringFunc = (array: string[], val: string): string => {
return val;
};

const numberFunc = (array: number[], val: number): number => {
return val;
};
//上の2つは共通化できそう

type Func = {
(array: T[], val: T): T;
};

const hello: Func = (array, val) => {
return val;
};
“

Vue-Bootstrapで動的にCollapseを生成する

##経緯
とあるサイト制作で`template`を使用してボタンで発火する`v-collapse`をたくさん用意したかったのだが、`id`を動的に`bind`してもうまく動かなかった

##解決方法
“`vue:main_card.vue
Member

“`

`id`なんてもので制御するのではなく、`b-collapse :visible=”bool”`を指定してあげれば、ボタンでboolの値を変更するだけで簡単に制御することが出来た。
bootstrapのリファレンスにこだわりすぎた。

ゼロ知識証明とSymbolブロックチェーンとzkRollupについて

今回はゼロ知識証明について解説します。
zkRollupは少しややこしいので、先に概念実証用のライブラリとして公開されているzkp-fishを利用して説明します。

https://github.com/bordjoski/zkp-fish

:::note alert
このパッケージは非推奨となりました
zkp-fishはコンセプトの証明として開発されたもので、誰のレビューも受けていません。学習曲線の一部であり、実稼働環境での使用は意図していません。
:::

まずは実際に動くプログラムを紹介します。最後にtrueが出れば成功です。

“`js
(script = document.createElement(‘script’)).src
= ‘https://xembook.github.io/nem2-browserify/zkp-fish-0.1.2.js’;
document.getElementsByTagName(‘head’)[0].appendChild(script);
“`

“`js
zkp = require(‘/node_modules/zkp-f

インタープリタを作る その31

#概要

インタープリタを作ってみた。
jsforthを使ってみた。

#数9を4個つかって1から15までの数を表す式を投入。

“`
9 9 – 9 9 / .
9 9 / 9 9 / + .
9 9 + 9 + 9 / .
9 9 9 + 9 / dup + .
9 9 9 + 9 / dup + – .
9 dup 9 + 9 + 9 / – .
9 9 9 + 9 / – .
9 9 9 drop 9 / – .
9 9 – 9 * 9 .
9 9 / 9 dup 9 / + .
9 9 9 + 9 / + .
9 dup 9 9 + + 9 / + .
9 9 9 + 9 / dup + + .
9 dup 9 9 + 9 / dup + – + .
9 dup dup 9 + 9 + 9 / – + .
“`

#結果

“`
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
“`

#成果物

https://embed.plnkr.co/plunk/9nEYnvgDhG2Npxs3

以上。

Stripe CheckoutとNext.jsで、クレジットカードの複数登録画面と決済画面を構築する

Stripe Checkoutを利用することで、クレジットカードの登録画面を簡単に用意することができます。

この記事では、Next.js上にStripe CheckoutとStripe SDKを利用して簡単なカード情報管理画面の構築方法を紹介します。

# 前準備

Next.jsでのアプリ起動は、`create-next-app`を利用します。

“`bash
% npx create-next-app
“`

今回はStripeのシークレットAPIキーを利用します。
Next.jsの場合、`.env`ファイルで環境変数にセットできますので、事前にセットしておきましょう。

**.env.local**

“`env
STRIPE_SECRET_KEY=”sk_test_xxxx
“`

また、実装で利用するライブラリを追加でインストールしましょう。

“`bash
% npm install stripe
“`

また、複数のファイルからStripeクラスを利用しますので、以下のファイルを事前に用意します。

**libs/stripe.js**

“`js
im

【Nuxt.js×microCMS】診断機能実装②microCMSから取得した診断結果をランダムで表示させる

#はじめに
こんにちは！
今回は前回の記事[【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得](https://qiita.com/Yudai_35_/items/086aa53701bdc9f2f37f)の続き、microCMSから取得した診断結果をランダムで表示させるについてアウトプットしていきます。

#対象
・診断アプリを作りたい方
・ユーザーの選択に応じて表示させるものをコントロールしたい方
・前回の記事[【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得](https://qiita.com/Yudai_35_/items/086aa53701bdc9f2f37f)までの内容がお済みの方

参考：microCMS公式サイトは[こちら](https://document.microcms.io/content-api/get-list-contents)

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7

【Jest】globalオブジェクトを使ったコンポーネントのテストのやり方

## カスタムglobalオブジェクトを定義してそれを使うコンポーネントのテスト

例えばこんな感じで`hogeProperty`をglobalで定義した

“`index.html

“`

“`useGlobalProperty.tsx
/**
* hogeボタンをクリックすると`hogeProperty`の`hogeFn`を実行するコンポーネント
*/
export default function UseGlobalProperty() {
// globalオブジェクト呼ぶとtsエラー出るので制御
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
cons

【のこるんvol.3】3タップ完了LINEフォトアルバム #LINE #GAS #AppSheet

## スマホ中の写真　埋もれてない？

前回記事　：[【のこるんvol.2】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/69715a210e63625fa3ab)
前々回記事： [3タップで完了するLINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/1b30f3b8533a61bd2f12)

2022年あけましておめでとうございます?
クリスマスからお正月にかけて、写真を撮るイベント盛りだくさんでしたよね。
年賀状や写真整理など、一年間の写真の振り返りも大変だったんじゃないでしょうか。

スマホがこの世に誕生し、写真の撮影枚数はそれ以前の1,500倍に、
1スマホの中に少なくとも1,000枚以上の写真があるそうです。
![Group 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/59ecf2f0-486c-36fd-cd51-73cd

Googleのグループを、自動でメンテするようにしたロボ

[ウェルネスをテクノロジーで届ける企業、TENTIAL](https://corp.tential.jp/)のCFO酒井です。
意外とこの手のスクリプト世の中になかったのでポストしておきます。

# Googleのグループって何？美味しいの？
昔で言うところのメーリスです。
ユーザーグループはリストの性質があり、グループをカレンダーやドライブ上のファイルに招待することで、グループ内のメンバーに動的に権限を付与できます。

– 入社したばっかのひと、全社イベントに招待するの忘れてた
– 異動の際に、ファイルの権限いちいち削除・付与するの面倒…

みたいな悩みを持っている人は、この記事おすすめです。

ちなみに動的グループっていうネイティブの機能もあるので、それで対応できないもので使うのがおすすめです。
https://support.google.com/a/answer/10286834?hl=ja

# 技術
GoogleAppsScript(GAS)でやりきります。
もちろん、Python等他言語・環境でも似たようなことはできますが、Googleの世界に閉じている今回のようなケース

Javascriptのきほん。特徴や間違えやすい記法をまとめた

Javascriptの特徴・記法をいくつかまとめてみました。
記法では、特に間違いやすいところを抜粋してます。

## まず初めに
Javascriptとは、ブラウザー向けのスプリプト言語。

誤解を招きやすいが、JavaとJavaScriptは言語仕様に似た部分はあるものの、***全くの別言語であり互換性もない。***

Javascriptは、1995年にNetscape Navigator2.0で実装されたのを皮切りに、1996年にはInrernet Exploer3.0でも実装され、ブラウザー標準のスクリプト言語として定着した。
その後、20年程を経て、現在ではGoogleChrome、 Firefore、 Safari…など主要なブラウザのほとんどで実装されている。

##言語としての４つの特徴

######（１）スクリプト言語である
スクリプト言語とは、要は簡易であることを目的として作られたプログラミング言語のこと。
プログラミングが初めてとういう方でも短期間で習得することが可能。

その一方でオブジェクト指向的な構造も持ち合わせており、再利用・保守性に富ん

Kotlin（+Chart.js）で地図アプリ（ゴミ拾いアプリ）。（15日目）

#今日やったこと

・Korlinで音を鳴らす（送信成功 or 失敗時に効果音を再生）
・設定画面に、効果音に関する項目を作成
・WEBにChart.jsを使ってグラフを作成

#効果音を付けた理由

クルマで移動中に見つけた、ポイ捨てゴミを回収する際に、車内に設置しているタブレット端末で、位置情報を登録しているのですが、ボタンをタップした後、送信が成功したかどうかの確認の際に、画面を見るのが面倒だったので、音で確認出来たら便利だと思い、効果音機能を付けてみました。

#Kotlinで音を鳴らす方法

ネットで調べると「MediaPlayer」「AudioTrack」「SoundPool」を使えば良さそうです。
今回は、MediaPlayerを使ってみます。

https://developer.android.com/guide/topics/media/mediaplayer?hl=ja

#リソース作成

リソースフォルダに「raw」フォルダを作成して、その中に音楽ファイルを入れると動くようです。

[res]
->[raw]
->[音楽ファイル]

効果音用のデータ

qiita apiを叩く。 その２

#概要

javascriptで、qiita apiを叩いてみた。
itemsをpostしてみた。

#サンプルコード

“`
var src = document.getElementById(‘src’);
var prm = document.getElementById(‘prm’);
var out = document.getElementById(‘out’);
var endpoint = “https://qiita.com/api/v2/items”;
function run() {
var token = src.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 201)
{
out.value = xhr.responseText;
}
else
{
//alert(xhr.readyState);
//alert(xhr.stat

Webの勉強はじめてみた その19 ～Node.js編 導入～

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章2,3節です。

Node.js

:::note
JavaScript でプログラミングすることのできる、サーバーサイド向けのプラットフォーム
:::

nvmのインストール

Node.jsのバージョンを管理するツール

“`bash
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
“`

`-o-` : このオプション、調べ方が悪いのかいまいち理解できてないです。
`-o`　は指定したファイル名に保存というのはわかるんですが。

“`bash
source ~/.bashrc
“`

再起動せずに`.bashrc`ファイルを読み込ませる

Node.jsのインストール

“`
nvm install v10.14.2
nvm use v10.14.2
“`

`node –version` : バージョン確認
`node` :

qiita apiを叩く

#概要

javascriptで、qiita apiを叩いてみた。
authenticated_userをgetしてみた。

#サンプルコード

“`
var src = document.getElementById(‘src’);
var out = document.getElementById(‘out’);
var endpoint = “https://qiita.com/api/v2/authenticated_user”;
function run() {
var token = src.value;
//alert(token);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200)
{
out.value = xhr.responseText;
}
else
{
//alert(xhr.readyState);
//alert(xhr.sta