- 0.0.1. [Stripe Updates] Stripe ElementのフォームをRTL（右から左）に表示できるようになりました
- 0.0.2. bootstrap-select セレクトボックスにjavascriptで選択肢が反映されない、選択値が表示されない
- 0.0.3. 永久保存版！エンジニア向け情報収集サイトをまとめてみた【定期更新】
- 0.0.4. ほぼ独学・未経験者が、XDデザインカンプからコーディングしてみました！
- 0.0.5. Webブラウザ上でGDALを利用できるLoamをためしてみた
- 0.0.6. 【p5.js】p5.soundで音を利用した表現を描画する
- 0.0.7. Goでファイル検索を行うサーバーを立てる
- 0.0.8. いろいろな方法でajax処理を書いてみた
- 0.0.9. Next2Dでゲームを作ってみる(前半)
- 0.0.10. ブラウザで動くアゲアゲなシンセサイザーをWeb Audio APIで作った話
- 0.0.11. enebularのwebsocketノードで対戦ゲームを作ってみる
- 0.0.12. 同じ型定義をあっちにもこっちにも書いていたあの頃のおろかな自分へ
- 0.0.13. chrome拡張機能を作ってみた
- 0.0.14. シンプルなタイピングゲームを作りました⌨
- 1. 0.はじめに
- 2. 1.内容決定
[Stripe Updates] Stripe ElementのフォームをRTL（右から左）に表示できるようになりました
Stripe Elementで表示する決済フォームを、アラビア語やヘブライ語圏向けに右から左で表示できるようになりました。
# 親要素への`dir=”rtl”`の設定で対応可能にRTLへの対応方法はとてもシンプルです。
`element.mount`の対象となるHTMLの親に`dir=”rtl”`を設定すれば、表示がRTLに切り替わります。
“`html
Goでファイル検索を行うサーバーを立てる
# はじめに
この記事はGo Advent Calender23日目の記事です。
ファイルパスを検索し結果をJSONで返すREST APIサーバーを立てます。
ひとまず動きのイメージを掴むデモです。
検索窓に検索キーワードを入力し、検索ボタンを押すとlocateコマンドを走らせて、結果をブラウザに表示します。
本記事は[locate-server](https://github.com/u1and0/locate-server) v3.1.0の時点のREADMEを補完するドキュメントを記事としました。
この記事を読むために必要な知識を挙げます。
* Go
* Gin(フレームワーク)
* ShellScript
* `locate`(検索エンジン)
* `updatedb`(データベース)
* HTML5
* JavaScript
* jQue
いろいろな方法でajax処理を書いてみた
考えてみると「そこでajaxしてるの？」とチームメンバーに偉そうに聞くことはあるものの、実際にajaxするコードを書いたことがなかったと思い実際に複数パターン書いてみました。
## 前提
リクエストおよびデータ取得先は`JSON Placeholder`を利用
> [https://jsonplaceholder.typicode.com/](https://jsonplaceholder.typicode.com/)以下リクエスト先から写真データの一覧を取得してみます
> https://jsonplaceholder.typicode.com/albums/1/photos# ライブラリなしでajax処理
```jsx
var ajax = new XMLHttpRequest();
ajax.open('GET', 'https://jsonplaceholder.typicode.com/albums/1/photos');
ajax.responseType = 'json';
ajax.send(null);ajax.onreadystatechange =
Next2Dでゲームを作ってみる(前半)
# ゲームを作ってみる
今日から、Next2D Frameworkを利用してナンバーパズルゲームを作ってみようと思います。## 仕様を考える
- パズルのピースを四色とする。同じ色同士のピースが結合でき、ナンバーは加算される
- ピースが結合するとランダムで新しいピースが生成される
- ナンバーはユーザーが指定した2から9の倍数になると得点に加算され、タイムゲージが回復する
- タイムゲージが0になるとゲーム終了## シーンのURL設計を考える
* オープニング
```text
https://example.com/top
```* ホーム画面
```text
https://example.com/home
```* ゲーム画面
```text
https://example.com/game/play
```* ゲーム終了画面
```text
https://example.com/game/result
```# 素材を作る
- タイトルロゴ
- 四色のピースとテキストエリア
- タイムバー必要な素材を[NoCode Tool]
ブラウザで動くアゲアゲなシンセサイザーをWeb Audio APIで作った話
アゲアゲな年末を過ごすために、JavaScriptのちょっとマニアックなAPI「[Web Audio API](https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API)」を用いてシーケンサー機能付きのシンセサイザーを作成しました。
実物は[こちら](https://koodori.netlify.app/)から動かせるので、まずはぜひ遊んでみてください！全体のコードや、操作方法は[リポジトリ](https://github.com/naberyo34/koodori)にございます。
# はじめに
Web Audio APIはブラウザ上で音声制御を行うことができるJavaScriptのAPIです。やや独特な仕組みを持ち少々とっつきにくい部分もありますが、工夫次第で本格的な音
enebularのwebsocketノードで対戦ゲームを作ってみる
#一人用鬼ごっこを通信対戦ゲームにしたい
この記事は[enebular Advent Calendar 2021](https://qiita.com/advent-calendar/2021/enebular)の23日目の記事なります。以前、p5jsを使った一人用のかくれんぼゲームを作ってみました。
上下左右操作＋Aキー/Fキー操作で、移動しながらプレイヤーの色を変えられ、背景の色になじむことができます。
なじんでいる間は鬼は見失い、なじまなくなったら全力で追いかけてくる鬼ごっこです。影になりながら逃げるかくれんぼのゲーム作りました。
プレイヤーは影になり背景に隠れながら鬼から逃げます。
obniz光センサにつないで手で影を作れば色を変えられます。
もちろんobnizを使わなくても遊べます。
day5夜を越えられなかったので、超えられたら教えてください#obniz#p5js#javascript pic.twitter.com/S3Y1kzpjyq— canonno (@canonno_blog) August 12, 2020
https://qiita.com/canonno/items/00738c7d928c3ec655d5
この時は鬼はロジックで組まれたコンピュータだったのですが、**どうにか通信対戦できないか**、と考えwebsocketの勉強を始めました。
そんな中、enebularにwebsocketのノードがあること知り、これを使えばサーバーサイドはノーコードで実装できるのでは・・
同じ型定義をあっちにもこっちにも書いていたあの頃のおろかな自分へ
# はじめに
[タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜](https://qiita.com/advent-calendar/2021/timeleap-typescript)
アドベントカレンダー23日目の記事を担当させていただく@kouchanneです！
## TypeScriptしか勝たん
TypeScriptというよりJavaScriptのできることって幅が広いのでとても便利な言語ですよね！
初期の頃は型定義がされていないライブラリが多く、泣く泣くany型であまり恩恵を得ることが少ないというのが多かったですが、最近は型定義がない方が少ないくらいになってきて使い勝手が良くなったのと、自分は元々の入り口がJavaなので、タイプセーフな言語が好きなのだったのもあり今ではどっぷりハマってます。
## 参加理由
@suin さんの投稿はよく拝見させていただいていて、今回主催のカレンダーを作るということで賛同したいなと思い参加させていただきました。
# 今回のテーマ
あの頃の自分へ「同じ型定義をあっちにもこっち
chrome拡張機能を作ってみた
こんにちは、Qiitaへの投稿は久しぶりになります。toyohamaです。
今回はchromeの拡張機能を作る機会があったので、かんたんにまとめてみます。## 要件
- 表示しているページから、リンクされているURLを取得したい
- 同じドメインのリンク、つまりサイト内のリンクを取得したい
- 複数同じリンクがあればまとめてほしい
- baseタグには対応していない(しなくていい)## 作ったもの
### content.js
```js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){var aryResult = [];
const html = docum
シンプルなタイピングゲームを作りました⌨
始めまして晴彦と申します。
友人に誘われ「クソアプリ Advent Calendar 2021」へ参加させていただきました。
(初参加の身でありながら遅刻してしまい申し訳ありません＞＜)0.はじめに
そもそも大衆公開するようなアプリケーションを個人で作ったことがないのでそれなりに遊べる作品として完成させることを目標、webページ作成も簡単な編集をしたことがある程度でしたのでよい機会だと思い0から作り始めてみました。
またjQueryは便利だと漠然と聞いたことがありましたが恩恵受ける機会がなかったのでこちらも触ってみました。1.内容決定
せっかく作るので何度か触ってもらえるものをば、と思い自分が何度も遊んだものと言えば～と考えて美佳タイプというタイピングソフトを思い出しました。タイピングゲームであれば「文字列のデータ管理」「キー入力」「時間経過での画面更新」等いろんな要素に触れられそうだと思い決定しました。
作ったタイピングゲームがこちら
[HaruType]
https://mtbamboo.github.io/HaruType/参
IDs in Node.js
[ [日本語版](https://qiita.com/martinheidegger/items/425112e84f7c12148d90) ]
Following my 2020 blog post about [Promise cancellation](https://qiita.com/martinheidegger/items/3e6355e96e85fc1c841e) 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
divやspanでボタンっぽい要素を作ると大変なことになるからbuttonを使おう
## この記事の概要
ボタンっぽい見た目の要素をクリックしたら検索フォームが動くとか自分のプロフィールを更新するとか、そういうインターフェースはたくさんありますよね。
ときどき`div`や`span`要素に`addEventListener('click', function)`をつけて動かしているのを見かけるのですが、結局改善を求められるはずでしかも工数がかかります。
というわけでシンプルに`button`を使いましょう、と啓蒙する記事です。
## 伝えたいこと
ボタンっぽい役割の要素であれば`button`タグを使いましょう！
この1点のみです！
## `div`や`span`でボタンっぽい要素を作るとどうなるの？
- タブキーでフォーカスを当てられない
- `enter`や`space`でボタンのアクションを実行できない
- スクリーンリーダーが適切に読み上げてくれないというわけで非常に使いづらくなります。
あなたの作っているプロダクトを使ってくれている人から「ボタンが操作できないので修正してもらえませんか？」と意見をいただければラッキーで、上手く使えないから
React、高階コンポーネントってなんすか？
## はじめに
この記事はJSL(日本システム技研) Advent Calendar 2021の記事です。
とある事情でReactの高階コンポーネントについて調べなければいけなくなったので、その過程でわかったことなどをまとめました。
いや難しいよ高階コンポーネント、、、
## 高階コンポーネントとは
React公式ドキュメント先生の説明がこちら
>高階コンポーネント (higher-order component; HOC) はコンポーネントのロジックを再利用するための React における応用テクニックです。HOC それ自体は React の API の一部ではありません。HOC は、React のコンポジションの性質から生まれる設計パターンです。
一瞬?????となりました
が、よく読んでみると、どうやらいろんなコンポーネントで使っている同じようなロジックを共通化するための技術ということらしいです。
高階コンポーネント自体はHooksなどのReactの機
【Jest】new Date()をモック化する方法
### この記事の概要
`new Date()`はテスト時には固定の値を返して欲しいのでその方法を記載した簡易メモ
### 方法１：useFakeTimers, setSystemTimeを使う
```hoge.spec.ts
const mockDate = new Date(2021, 0, 1, 1, 1, 1);
jest.useFakeTimers();
jest.setSystemTime(mockDate);
```
多分Jest公式通りの一番簡単なベストな方法
https://jestjs.io/ja/docs/timer-mocks※全体に影響するので`afterEach`で`jest.useRealTimers();`しておく
### 方法２：globalのDateにspy
```hoge.spec.ts
const mockDate = new Date(2021, 1, 2, 2, 2, 2);
const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate as unk
JWTの仕組みを使って、ゲスト用のアクセストークンを発行する
この記事はシスコの有志による Webex Advent Calendar 2021 の 23 日目として投稿しています。
Webex Advent Calendar 2021: https://qiita.com/advent-calendar/2021/webex## はじめに
今回は JWT(JSON Web Token)の仕組みを使って、Webex ゲスト用アクセストークンを作ってみたので紹介します。今回はJavascriptで、ゲスト用アクセストークンを発行しました。## JWT(JSON Web Token) の概要
そもそもJWTとは、何なのか？について、説明していきます。
JSON Web Token（ジェイソン・ウェブ・トークン）は、JSONデータに署名や暗号化を施す方法を定めたオープン標準 (RFC 7519) である。略称はJWT。
JWTでは、トークン内に任意の情報（クレーム）を保持することが可能であり、例えばサーバーはクライアントに対して「管理者としてログイン済」という情報を含んだトークンを生成することができる。クライアントはそのトークンを、自身が管理者
【初心者向け】WebAPIについて簡単にまとめてみた。
#はじめに
まず初めに、APIとは"Application Programming Interface"の略で、ソフトウェアやプログラム間をつなぐインターフェースのことを指します。定められた手順や規約に則ることで、あるプログラムの機能を別のプログラムから呼び出したりすることができます。
APIの基本的なプロセスは、呼び出した側からのリクエスト(要求)と呼び出された側からのレスポンス(応答)によって構成されます。#WebAPIとは
WebAPIとは、APIの中でもHTTP・HTTPS通信によってリクエストとレスポンスのやりとりを行うものです。送受信されるデータはJSON形式や画像など様々です。
WebAPIを使用することで、Webサイトに外部のソフトウェアやプログラムが提供する機能を組み込んだりすることができます。
有名なものではAmazonのAPIやTwitterのAPIがあり、自身のWebサイトに商品情報を表示したり、ツイートの投稿・取得といったことができます。
