- 0.1. 初めての正規表現
- 0.2. [Stripe Updates] Stripe Checkoutにて、配送方法と送料を複数から選択できるようになりました
- 0.3. Content-Typeとはなにか
- 0.4. シンプルなGraphQLサーバでCRUDする（Express.js, Objection.js, MySQL, Docker）
- 0.5. JavaScriptでインスタンスのクラス名を取得する方法
- 0.6. p5.jsで3Dモデルを描いてみる
- 0.7. toioを用いた地球儀型デバイス開発日記
- 0.8. Jestでglobalなオブジェクトをmockしたテストを書く
- 0.9. Next2D Frameworkのcallback
- 0.10. MediaElement.jsでメディアプレイヤーのUIをサクッとつくる
- 0.11. bookmarkletを使ってみて
- 0.12. 回線速度を計測して、Steamの帯域制限を自動で設定するようにした
- 0.13. JavaScriptで出来ることを簡単にまとめました
- 1. はじめに
- 2. 目次
- 3. HTMLタグに囲まれたテキストを書き換える
初めての正規表現
# はじめに
人生で初めて正規表現を書く機会がありましたが、想像通り難しかった＆勉強になったので共有します。## 要件
メールアドレスの以下4つの要件を満たす正規表現を作ることになりました。既存要件
– 「@」の入力必須
新規要件
– ローカル部分の先頭のドットを禁止
– ローカル部分で連続するドットを禁止
– ローカル部分の末尾のドットを禁止する（※ローカル部分とはメールアドレスの@以前を指します）
つまり、以下のようなメールアドレスは弾きたいということです。
✕ .sample@example.com
✕ s..ample@example.com
✕ sample.@example.com## まず第一歩
正規表現の知識が0だったので本当に初歩的なところから調べました。|文字 |説明 |
|—|—|
|. |任意の１文字 にマッチ|
|+ |直前の文字が １回以上 繰り返す場合にマッチ|
|* |直前の文字が ０回以上 繰り返す場合にマッチ|
|? |直前の文字が ０個か１個 の場合にマッチ|
|^ |直後の文字が行の 先
[Stripe Updates] Stripe Checkoutにて、配送方法と送料を複数から選択できるようになりました
Stripe Checkout APIと、Stripe Shipping Rates APIの２種類がアップデートされました。
これにより、Stripe Checkoutでユーザーが複数の配送方法を選択できるようになります。# Checkoutでの配送方法選択画面
配送方法の設定を行なった場合、以下の画像のように、複数の配送方法・料金をユーザーが選べるようになります。
# 配送方法・料金の設定方法
Dashboardの[配送料金](https://dashboard.stripe.com/test/shipping-rates)から、新規追加で登録することができます。
は、リソースの本体に関する情報、例えば MIME タイプや適用されるエンコード／圧縮方式などについての情報を持ちます。
・__ペイロードヘッダー__ (en-US)は、転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。下記記事から参照
[MDN Web Docs](https://developer.mozilla.org/ja/docs/We
シンプルなGraphQLサーバでCRUDする（Express.js, Objection.js, MySQL, Docker）
# はじめに
僕がGraphQLに取り掛かった際なんとなく敷居の高さを感じていました?
「自分がもしもう一度GraphQLを1から勉強するならこんな記事あったら嬉しいな」という観点で、少ないコード量で動作するシンプルなGraphQLアプリを作成しました。
タイトルにもある通り、使用技術はサーバーがExpress.js、ORMがObjection.js、DBがMySQLで、Dockerも使用してます。
Objectio.jsが内部的にKnex.jsを利用しているため、kenxコマンドも出てきます。
プロダクトでGraphQLを使う場合はもっと保守性が高いディレクトリ構造にしたり、N+1対策をしたりと考えることが色々あると思いますが、今回はそこらへんはノータッチです?#### 使用ツールとバージョン
node: 16.8.0
yarn: 1.22.17
docker: 20.10.7
docker-compose: 1.29.2#### ディレクトリ構造
“`
.
├── graphql
│ └── user.gql
├── migrations
│ └── 202112
JavaScriptでインスタンスのクラス名を取得する方法
## はじめに
この記事は [PARONYM Advent Calendar 2021](https://qiita.com/advent-calendar/2021/paronym) の22日目の記事です。
## tl;dr
“`javascript
/**
* クラス名/関数名(Function)を取得する
* @param {*} obj インスタンス。プリミティブ型でもいい
* @returns {String}
*/
function getClass(obj) {
if (obj === null) {
return ‘null’;
}
if (obj === undefined) {
return ‘undefined’;
}
return obj.constructor.name;
}
“`## JavaScriptのクラスとクラス名とは
ECMAScript5でJavaScriptに正式にclassが導入されました。classで宣言されたものがクラスです。
、、、なら単純
p5.jsで3Dモデルを描いてみる
この記事は Qiita p5.js アドベントカレンダー22日目の記事です。
p5.jsの関数について今までつらつらと記事を投稿してきたのですが、**WEBGLモード**を触ってないことに気づいたので今回試してみようと思います。
## さっそく試してみる
3Dの物体を描くにはcreateCanvasの第三引数に`WEBGL`を追加してあげます。“`javascript
function setup() {
createCanvas(400, 400, WEBGL);
}let angle = 0
function draw() {
background(0)
normalMaterial()
rotateX(noise(angle)*7)
rotateY(angle)
angle = angle + 0.01
box(100)
}
“`
の12/22の記事となります。本記事では、2021年に作成した「toioを用いた地球儀型デバイス」であるtoio地球儀のハード面の開発を、日記風に記載していきます。[toio地球儀](https://protopedia.net/prototype/2554)とは、toio2台を用いた地球儀型デバイスであり、「ユーザが指し示した地点を取得する機能」と「システムが決定した地点を指し示す機能」があります。
このデバイスを使ったアプリケーションに関しては、[別記事](https://qiita.com/team_kuchibashi/items/bd58ab800067
Jestでglobalなオブジェクトをmockしたテストを書く
この記事は [Ateam Lifestyle Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-lifestyle) 22日目の記事です。
タイトル通り、Jestでglobalなオブジェクトをmockしたテストを書く方法です。
## globalオブジェクトを使用するコードのサンプル
下記のような位置情報を取得する簡単なhooksを書いてみました。“`use-geolocation.ts
import { useEffect, useState } from ‘react’export const useGeolocation = (): GeolocationPosition | null => {
const [geo, setGeo] = useState(null) useEffect(() => {
navigator.geolocation.getCurrentPosition(setGeo)
Next2D Frameworkのcallback
Next2D Frameworkのシーン遷移時には複数のcallbackのタイミングがあります。
# callbackに必要な関数
`callback`の実行は、指定したクラスを`new`演算子の第一引数にデータをセットし、`execute`関数をコールします。各クラスの`constructor`で必要なデータを受け取り、`execute`関数で任意の処理を行うイメージです。`callback`設定は配列も可能です。配列にする事で複数の`callback`を設定できます。## 事前技術共有
`src/model`に設置したクラスはディレクトリ階層を`.`として分解され、`next2d.fw.packages`に登録されます。## routingのリクエスト終了時
routingのリクエスト終了毎にcallbackがコールされます。
受け取ったレスポンスデータを`constructor`で受け取り、`execute`関数で事後処理を行う事ができます。### routing.jsonの設定例
`src/model`に`callback`というディレクトリを追加し、`src/m
MediaElement.jsでメディアプレイヤーのUIをサクッとつくる
この記事はレコチョク [Advent Calendar 2021](https://qiita.com/advent-calendar/2021/recochoku) の22日目の記事となります。
## はじめに
こんにちは！レコチョクが提供している音楽配信サービスのウェブ開発をしている今井です。
普段の業務ではHTML・CSS・JavaScriptを扱い、ユーザーが実際に操作する画面の作成を担当しております。レコチョクが提供している音楽配信サービスで言うと、月額料金で聴き放題の音楽ストリーミングサービス（例：[TOWER RECORDS MUSIC](https://music.tower.jp/)）や1曲や1アルバム単位で購入する音楽ダウンロードサービス（例：[レコチョク](https://recochoku.jp/)）など様々なものがありますが、私は後者（音楽ダウンロードサービス）を担当しております。
今回は、私が担当しているサービスで実装している「試聴機能用のメディアプレイヤー」について紹介します。
## 試聴機能について
試聴機能とは、購入前に気になる楽曲や動画の試
bookmarkletを使ってみて
#古き良きbookmarkletについて
##bookmarkletとは
JavaScriptで動作するものである。（JavaScriptで書けることはだいたい書ける）
bookmarkletはブラウザのブックマークに保存するものである。
##bookmarkletはいつ使うの？
開いているブラウザの画面上のHTMLをJSで操作
– HTML要素の解析に使える（はず）
– HTML要素の変更に使える（INPUTタグとかにデータを入れるとか）
***重要な使い方として個人情報や入力したいデータを特定のinputに入れたいときとかによく使う。***
これをすることにより、
例えば、**個人情報入れて申請するサイト**があるとすれば、
申請状況のステータスを確認するページも有り、そこで個人情報を再度いれて申請状況ステータスを確認したいとかある。（何度も入れて確認するのは面倒だから）（個人情報入れて申請する時も然り）
##注意事項
どうもchormeさんは動かない模様、、、、##事前準備
テキトーに作ったブックマーク一個作っておく##bookmark
回線速度を計測して、Steamの帯域制限を自動で設定するようにした
## きっかけ
Steamの回線が丈夫なのか、アップデートなどでダウンロードが始まると閲覧しているYoutubeなどのロードが追いつかなくなることがありました。
Steamにはダウンロード帯域制限機能がありますので、はじめは設定画面からちまちま設定していたのですが…
時間帯や日によって毎度毎度手作業で帯域を設定するのが面倒くさいので、何か自動でできる方法がないかと調べました
## インターネット速度の計測方法
ブラウザ経由でFast.comやSpeedtest.netを使って回線速度を調べて、Steamで設定するという方法を今までとっていましたが
https://www.speedtest.net/ja/apps/cli
Speedtest CLIがコマンドラインで実行できてとてもよさそうです。
ただ実行するだけではなく、csvやjsonに吐き出すことが可能
“`speedtest.exe -f json > speedtest.txt“`
みたいな感じで呼び出すとJSONのテキストを吐き出してくれます。
## Steamの帯域制限を設定する方法
この辺を参
JavaScriptで出来ることを簡単にまとめました
はじめに
この投稿が僕にとっての初めての投稿になります。
今回は「JavaScript」で出来ることを簡単に４つ紹介します。詳しくは別の投稿で一つ一つ紹介します。
目次
1. HTMLタグに囲まれたテキストを書き換える
2. タグの属性の値を変更する
3. 要素を追加・削除する
4. CSSの値を変更する
5. 終わりにHTMLタグに囲まれたテキストを書き換える
HTMLではタグを使用してテキスト等を追加していきます。その
kintoneのポータル画面をカスタマイズした話
この記事は[kintone Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kintone)の22日目の記事です。
こんにちは！ユニファという会社でインターンをしている濱口です。
普段はシステム企画課という社内の業務システムを管轄する部署で、業務システムの構築や開発のお仕事をしています。いわゆる情報システム部門のような部署です。ユニファでもkintoneを導入しており、日々たくさんのアプリを運用しています。
https://unifa-e.com/
# はじめに
ユニファのkintone環境では運用中のアプリが100以上存在しており、そのほとんどのアプリがシステム企画で作成・開発したものを各部署で使うような形になっています。
以前からPortal Designerを使ってオリジナルのポータル画面を作成して運用していましたが、表示しているアプリの変更依頼が来るたびにPortal Designerを開いてハードコーディングで修正をしていたため、とても面倒で非効率でした。また変更を加えられるのはkinton
IDs in Node.js
日本語へ翻訳中です。しばらくお待ちください。:bow:
Following my 2020 blog post about [Promise cancellation](https://qiita.com/martinheidegger/items/6e8275d2de88174bc7e6) this is yet another basic topic.
Identity (short ID) – the way to identify a _thing_ – is something most tools provide out-of-the-box so you don’t need to think about it. But we are building for users. Humans. Often IDs comes in contact with the user – be it in an URL or on a receipt – and then the shape of an ID can make an actual difference.
If
【Shopify App】ShopifyアプリにTypeScriptを導入する方法の調査
## はじめに
Shopifyアプリの開発を進めている中で、型を使いたいと思い、プロジェクトにTypeScriptを導入しました。
ですが、かなり苦戦したので備忘録程度に記事を残しておこうと思います。
最後まで読んでいただけると幸いです。## なぜTypeScriptが必要なのか
### 型がない時の痛み
プロジェクトが複雑化してくると、扱うデータの量も当然増加します。
このとき、データに型をつけることができなければ、そのデータが何を含んでいるのかわからなくなります。### 型があることの何がいいの？
型があることにより、データが何を含んでいるのかを明示的に指定できるようになります。
これにより、データの扱いが楽になります。
また、“null“や“undefined“を含むデータのハンドリングもやりやすくなるのでかなり助かります。そのため、今回のShopifyアプリのプロジェクトにもTypeScriptを導入したいと考えました。
## 調査 + 実装
以下の記事を主軸に調査・実装を進めました。https://qiita.com/winuim/items/59a
jsにてユーザーエージェントを判別する方法。PCでのみ表示などが可能
##まず初めに
こういう時ってないですか？
「レスポンシブだけど、なぜかブレイクポイントを作ってもipadだけ表示されてまう」
「そもそもipadとかiphone,androidやったら表示したくないねんけど」
「なんなんもう。。。」上記みたいな時って、僕はありました。
masx-widthでブレイクポイント作ってもうまくいかない時### jsで判定して、あとからstyleを追加しよう
とりあえずコード
“`js
“`pcのみで表示させたい要素に”pc_only”のIDを付与してあげます。
JSでのイベントUtil作成
#1.ソース
“`EventEmitter.js
export class EventEmitter {
constructor() {
this.registry = {};
}on(name, listener) {
this.registry[name] = this.registry[name] || [];
this.registry[name].push(listener);
return this;
}once(name, listener) {
const doOnce = function () {
listener.apply(null, arguments);
this.removeListener(name, doOnce);
}.bind(this);
this.on(name, doOnce);
return this;
}
Emerging Dynamics社の新サイトのための3倍のパフォーマンス改善のケーススタディ
使ったスタックが期待通りでなかった場合は、できる限りのことをやり遂げるか、まったく別の選択肢を選ぶかします。新しいJamstackを選択したことで、Emerging Dynamicsの新しいウェブサイトのパフォーマンスが3倍も向上しました。
著者：Arkadiusz Gorecki 2019年7月21日
原文：https://bejamas.io/blog/case-study-emerging-dynamics/
使ったスタックが期待通りにならないこともあります。そのような場合には、できる限りのことをするか、まったく別の選択肢を選びます。EMDYNプロジェクトを進めていく中で直面した問題により、私たちはスタックを完全に変更する
JSでのストレージUtil作成
#1.説明
セッションストレージとロカールストレージUtilの作成方法を共有します。#2.ソース
“`storage.js
/**
* セッション
*/
export const session = {/**
* セッションストレージ設定
* @param {string} key キー
* @param {string} value 設定値
* @param {integer} expires 有効時間
*/
set(key, value, expires) {
// 有効時間はミリ秒
let params = { key, value, expires };
if (expires) {
// 有効時間を追加
const data = Object.assign(params, { expiresStartTime: new Date().getTime() });
sessionS
