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

パスワード入力欄を、作成しよう

ファイルに、パスワードを入れたい時があるので、
パスワードをつけたいなぁと、思いました
なので、パスワード認証画面を、投稿させていただきましたぁ

背景の設定

“`ruby






//背景

“`

パスワードの設定と、パスワードに正解したときのページジャンプ

“`ruby