- 1. NeosVR コンパイラ その10
- 2. 【kintone/javascript】ルックアップ取得をあいまい検索したい！
- 3. 【JavaScript】LocalStorageで値が保持されるカウンター作成
- 4. ［Javascript］関数の書き方
- 5. YouTube Liveの配信予定を見逃したくない人のための記事【非エンジニア・初心者向け】【詳細版】
- 6. Javascript の map と reduce の違い
- 7. [Tips] 異なるオリジンのスクリプトをWeb Workerとして動作させる
- 8. plunkerでobject viewer
- 9. NeosVR コンパイラ その9
- 10. Web Share API で、canvasに描画した画像と、指定したハッシュタグをTwitterの投稿にコピーペーストする
- 11. JavaScriptチートシート
- 12. Reactを始めるためのJavaScriptとES6基礎知識
- 13. 【vue.js】ドラッグアンドドロップの制約と制限：制御されたドラッグ操作の実装手法
- 14. web上で操作できるmarkdownエディタっぽいものを作ってみた
- 15. Jest 実行時間短縮
- 16. コーナープレーヤー
- 17. わかりやすく解説！コールバック関数の理解とその使い方
- 18. 手順書管理Webアプリ作成
- 19. QiitaAPI を fetch を使わずに C# と クローム拡張 で
- 20. 「Keccak specifications summary」の翻訳と実装
NeosVR コンパイラ その10
# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
遂にLogiXノードを繋いでみた。# 写真
# 俺コード
LogiXノード、TとDisplayを繋ぐコード。
“`
use Ore test1
new LogiX.T
new LogiX.Display
{a} = LogiX.T
{} = LogiX.Display a
add LogiX.T
add LogiX.Display“`
# 成果物
コンパイラはこちら。
https://embed.plnkr.co/plunk/LbFjkD6fqzPwtuKt
以上。
【kintone/javascript】ルックアップ取得をあいまい検索したい！
# はじめに
お客さんの既存マスタが半角英数字(スペースとか入っていたり)を含むデータで、kintone標準機能のルックアップだと検索にヒットしないやん！
という方いらっしゃいませんか？
[検索したいデータがヒットしません](https://jp.cybozu.help/k/ja/id/040315.html)「お客様、大変申し訳ございませんがこれはkintoneの仕様です。」
「毎度完全一致する文字列(まぁまぁ長い文字列)を指定して運用回避いただけないでしょうか？」
なんて言えないのがシステム屋です。# プラグインとか無いの？
プラグインも探したのですが、APIの10,000件問題が本当に考慮されているか疑わしかったり、
マスタデータが数万レコードに及びため、APIコール数上限に簡単に引っかかるような実装仕様になっていないか不安と思う部分がありコスト掛けて購入するメリットを見いだせず。
[1日に実行できるAPIリクエスト数](https://jp.cybozu.help/k/ja/id/04044.html#limitation_limit_3040)# どうしよう
ググ
【JavaScript】LocalStorageで値が保持されるカウンター作成
# はじめに
webサイト制作の学習で「ボタンを押したらカウントが増える」という仕組みを作成した際、
ページの再読み込みをするとカウントが初期値に戻ってしまうという問題が発生しました。しかし、「Local Storage」を使うことでこの問題を簡単に解決することができたので、
Local Storageを利用した「値が保持されるカウンター」の作成方法をまとめました。# 作成したもの
「クリック」のボタンを押すと数字が1ずつ増えるカウンターを作成しました。
ポイントは**ページ更新をしたり、ブラウザを開き直したりしてもカウントの値が保持される**ということです。
# ブラウザに値を保存する「Local Storage」
今回、値の保持を実現させるために「Local Storage」を利用しました。
**Local Srotra
［Javascript］関数の書き方
# 概要
avaScriptで関数を定義する方法は大きく分けて２つ「関数宣言」と「関数式」がある。
違いはFunctionオブジェクトの生成タイミングで「関数宣言」ではコードブロックが実行する前に生成され、「関数式」はコードブロック実行時に生成される。
そのため関数宣言では関数定義より前に記述しても関数を呼び出せる。# function【関数宣言】
functionというキーワードを使って、関数名を定義する。
どのタイミングでも呼び出せる。“`javascript
function sample(args){
console.log(args);
}
sample(‘hello world’);
“`# 関数リテラル【関数式】
関数名を変数のように定義し、その中に関数の機能を代入するようなイメージ。
定義後でしか呼び出せない。“`
const sample = function(args){
console.log(args);
};
sample(‘hello world’);
“`# アロー関数【関数式】
アロー関数は「=>」というキーワードを
YouTube Liveの配信予定を見逃したくない人のための記事【非エンジニア・初心者向け】【詳細版】
## この記事を読むと出来るようになること
– 記事中の**コードをコピペするなど**して、**YouTube Liveの枠立ての通知をGoogleカレンダーを通じて自動で受け取れる**ようになる。
– YouTube Liveの**配信予定をカレンダー上でいつでも確認出来る**ようになる。
– ひと手間加えれば**Appleカレンダーなど他のカレンダーアプリ経由でも通知を受け取れる**。::: note info
基本的に**プログラミングの知識は不要です。**
:::::: note info
VTuberや実況者、その他YouTubeで活動されている配信者を追っている方にオススメです
:::# 0. 前提
## 0-1. 目標
– **YouTube Liveでの配信予定を見逃したくない**。
– 枠立ての通知を事前に**自動で**受け取りたい。
– 配信予定を**カレンダー上でいつでも確認したい**。## 0-2. 筆者が採った手法
1. GAS (Google Apps Script) 上
Javascript の map と reduce の違い
JavaScript `map` と `reduce` の違いを説明します。
### map メソッド
1. `map` メソッドは、配列の各要素に対して与えられたコールバック関数を実行し、新しい配列を作成します。
2. 元の配列は変更されず、新しい配列が作成されるため、元の配列の要素に影響を与えません。
3. コールバック関数は、各要素に対して適用され、その結果が新しい配列の要素となります。“`javascript
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((num) => num * 2);
// doubledNumbers: [2, 4, 6]
// numbers: [1, 2, 3] (元の配列は変更されない)
“`### reduceメソッド
1. `reduce` メソッドは、配列の各要素に対して与えられたコールバック関数を使って、単一の値を生成します。
2. 初期値を指定することができ、この初期値は最初のコールバックの第一引数になります。
3. コールバック関数は、前の
[Tips] 異なるオリジンのスクリプトをWeb Workerとして動作させる
この記事は [個人開発エンジニア応援 – 個人開発の成果や知見を共有しよう！- – Qiita](https://qiita.com/official-events/09dee22c436b60f856c9) の参加記事です。
https://qiita.com/official-events/09dee22c436b60f856c9
## はじめに
Web Worker用のスクリプトをサイトのオリジンとは別でホストしたいというとき、
クロスオリジン制約により、スクリプトとサイトのオリジンが異なる場合はWeb Workerを起動できません。https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
なんとかできないかと調べていたところ、スクリプトのBlobを指すURLをつくることでできたので記事にします。
## 方法
Web Worker用のスクリプトをfetchし、Blobとして取得します。
そして、そのBlobを指すオブジェクトURLを生成し、そのURLでWor
plunkerでobject viewer
# 概要
plunkerでobject viewerやってみた。# 参考にしたページ
# 写真
# 成果物
https://embed.plnkr.co/plunk/5bEsD4d3WfwLhgwX
# サンプルコード
“`
function jsonViewer(json, collapsible = false) {
var TEMPLATES = {
item: ‘%KEY%%VALUE%‘,
itemC
NeosVR コンパイラ その9
# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
phoenixのapiサーバを使ったコンパイラ書いてみた。# 俺コード
– このコードはlogixのTノードとDisplayノードを生成する。
“`
use Ore test0
new LogiX.T
new LogiX.Display
add LogiX.T
add LogiX.Display“`
# 写真
# 成果物
– コンパイラは、こちら。
https://embed.plnkr.co/plunk/1XTEfvcjxG7qkiV9
# 実行確認の手順。
– 上のページで生成されたjsonを、メモ帳で「test0.json」で保存する。
– NeosVRを起動して、セッションに入る。
– ファイル
Web Share API で、canvasに描画した画像と、指定したハッシュタグをTwitterの投稿にコピーペーストする
## 使用想定シーン
画像合成して特定のハッシュタグでつぶやくキャンペーンの時に、サーバーや端末に合成画像を保存させずにコピーペースト操作でハッシュタグと画像をツイートしてもらう。### html
“`
![]()
“`
### script
“`
const previewCanvas = document.getElementById(‘js-previewCanvas’);
const previewImage = d
JavaScriptチートシート
僕がよければよいだけのメモ張
# iframeに再帰的に処理したい
“`js
(x=>{
let opr=d=>{/*documentに対するなんらかの処理*/};
let f=d=>{Array.from(d.querySelectorAll(“iframe”),i=>f(i.contentDocument));opr(d);};
f(x);
})(top.document);
“`# Object / Array 全体の値の複製を作る
“`js:src を dest にコピー
dest = eval(‘(‘ + JSON.stringify(src) + ‘)’);
dest = JSON.parse(JSON.stringify(src));
“``JSON.stringify(src)`でObject値をJSON文字列にする。
これを`eval`とか`JSON.parse`に食わせて、新しい値として生みなおす。`JSON.parse`は、引数が厳密なJSONじゃないとダメなので、
予め`stringify`した値を切り貼りした結果を使いたい
Reactを始めるためのJavaScriptとES6基礎知識
# はじめに
仕事でReactを実装することになり、今更ですがJavaScriptとECMAScript 2015（通常ES6と呼ばれます）の基本的な知識についてまとめようと思います。
この記事では、Reactを始めるために必要なJavaScriptとES6の要点に焦点を当て、それらの概念を一部ですが詳しく説明し、実際のコード例を交えて理解を深めていきます。# let、const、var：変数宣言
まずは基本となる変数宣言を見ていきます。変数を宣言するための主要なキーワードは let、const、および var です。それぞれの特徴と適切な使用法について見ていきましょう。## let
“`javascript
let x = 10;
x = 20; // 再代入可能
“`let は変数をブロックスコープ内で宣言します。ブロックスコープとは、if文やforループなどの中括弧 {} 内のスコープを指します。
変数の再代入が可能です。let を使用すると、変数はスコープ内で再宣言できますが、変数名が同じでも異なるスコープ内で再宣言された場合、別の変数として扱われます
【vue.js】ドラッグアンドドロップの制約と制限：制御されたドラッグ操作の実装手法
## ドラッグ操作の制約と許可条件の設定方法
ドラッグアンドドロップは、ユーザーが要素をドラッグして別の位置に移動する操作であり、ユーザビリティの向上や操作性の改善に役立つ機能です。vue.jsでも簡単にドラッグアンドドロップの実装が可能ですが、特定の制約や許可条件を設定することもできます。本章では、ドラッグ操作の制約と許可条件の設定方法について解説します。
### 制約条件の設定
ドラッグ操作の制約条件として、例えばドラッグを許可する要素の種類を制限したり、特定の領域内のみでのドラッグを許可したりすることができます。vue.jsでは、ドラッグ操作を制御するためのディレクティブを使用します。“`javascript
ドラッグ操作が許可されていますドラッグ操作が許可されていません<
web上で操作できるmarkdownエディタっぽいものを作ってみた
完成品: [markdown-editor](https://bellsanct.github.io/markdown-editor/)
リポジトリ: [https://github.com/bellsanct/markdown-editor](https://github.com/bellsanct/markdown-editor)#
Jest 実行時間短縮
目次
1. 背景
2. jest,ts-jestとは
3. testのタイミング
4. 検証環境
5. 検証内容
5.1. runInBand
5.2. max-workers
5.3. isolatedModules
5.4. lastCommit,onlyChanged
5.5. CIでJest cacheの保存・リストア
5.6. CI自体の並列実行
5.7. jest-light-runner
5.8. swc/jest
5.10. esbuild-jest
5.11. jest configファイルをjs、jsonにする
6. 検証結果
6.1. runInBand
6.2. max-workers
6.3. CIでJest cacheの保存・リストア
6.4. tsc + swc/jest
6.5. jest configファイルをjs、jsonにする
7. その他の改善案
8. ts-jestが今後高速化する？
9. 最後に# 1. 背景
弊社ではフ
コーナープレーヤー
# はじめに
このプレーヤーは、ページの片隅にひっそりと存在するプレーヤーです。また、ページにはほかに何もなく、ひっそりしています。
ただ、ひたすら、youtube音楽を聴くことに徹しています。
使い方としては、バックミュージックとしての活用が考えられます。# ページイメージ
ページのイメージとしては、以下のような表示になります。
プレーヤー以外には何もありません。このページでは、ただ、youtube音楽を聴くことだけです。唯一、youtube音楽を選択できることがあります。画面で、マウスボタンをクリックすると、ランダムで別の動画に切り替わります。何もしなければ、繰り返し再生します。# リンク
[リンク(https://iframe.tecoyan.net/index_thumbnail_player_random.
わかりやすく解説！コールバック関数の理解とその使い方
## コールバック関数とは
コールバック関数は、一つの関数（親関数）に引数として渡され、親関数の中で特定のタイミングで呼び出される関数です。これを利用することで、非同期処理やイベントハンドリングなど、柔軟かつダイナミックなプログラムの構築が可能になります。## レストランでの例え
コールバック関数を理解するために、レストランでの食事を例に考えてみましょう。
1. __レストランに入る（プログラムを開始）__
2. __ウェイターに注文する（関数を呼び出す）__
この時、食べ終わったらデザートのメニューを見せてほしいと頼む（コールバック関数を登録）
3. __食事を楽しむ（他の処理を実行）__
4. __食事が終わる（非同期処理が完了）__
5. __ウェイターがデザートのメニューを持ってくる（コールバック関数が実行される）__この例で言うと、デザートのメニューを持ってくる行為が「コールバック関数」に相当します。
食事（メインの処理）が終わった後に、ウェイター（プログラム）はデザートのメニューを持ってきます（コールバック関数を実行）。このように、コールバック関数は
手順書管理Webアプリ作成
# はじめに
手順書が色々散らばってしまっているため、一括管理するためのWebアプリを作成する。
手順書はマークダウン記法で記述する。
将来的にはサーバーも立ち上げたいが自分には少し難易度があり時間がかかると思うので、とりあえずそれなりに形にするためにフロントエンドで完結する形で作成する。
手順書はデータベースを活用して管理したいが、とりあえずjsonファイルにべた書きで管理する。
個人利用のアプリであり、初心者が手探りで作っているため至らない点があると思うがメモとして使っていると思ってください。・使用するライブラリ
jquery-1.8.0.js
marked.js# 開発
### ディレクトリ構成
“`
/procedure-site
│
├── /src
├── /main
├── /webapp # ウェブアプリケーションのリソース
│ ├── /static # 静的ファイル (CSS, JS, 画像など)
│ │ ├── /c
QiitaAPI を fetch を使わずに C# と クローム拡張 で
## 背景＿アプリ製作の動機
・スプレッドシートで ImportXML を主に使っていた
・Qiitaのまとまった情報がほしいと思った
・技術系のサイトであればAPIがあるんじゃないか
と思い 調べるとやはりあった
・QiitaAPI があり
それを使えば リクエスト数 を1/10くらいに減らせそう
ということを知った
・GAS で fetch を使ったら通常とは違うタイプの警告が出た
・自分は通信周りがあまり詳しくないので
通信周りの処理は下手に触りたくない
・通信周りを学習するか既存の知識でどうにかするか悩む
・既存の知識としては そこそこなじみ深い C# を使い
ブラウザ上でリクエスト済みのファイルに対して
クローム拡張 を作ってどうにか出来ないか考えた
・クローム拡張は未だ1個しか作ったことが無い
・結局 既存の知識でどうにかすることにした
・とりあえず動くものが出来たので投稿することにした
## 背景＿記事を投稿しようと思った動機
・Qiitaはよく使っていたので自分も何か投稿したいと思っていた
「Keccak specifications summary」の翻訳と実装
# はじめに（Introduction）
SHA3をガチで理解しようとすると大変なので、とりあえず以下の仕様概要を翻訳して実装してみます。
https://keccak.team/keccak_specs_summary.html
# 翻訳（Traslate）
基本的に [Goggle翻訳](https://translate.google.com/) を使用していますが多少修正を入れています。
## Keccak仕様概要（Keccak specifications summary）
Keccak（[kɛtʃak] と発音します、「ケチャック」のように） は、SHAKE128 および SHAKE256 拡張可能な出力関数、cSHAKE128、cSHAKE256、および [NIST SP 800-185](https://keccak.team/specifications.html#SP_800_185) のその他の関数のように、[FIPS 202](https://keccak.team/specifications.html#FIPS_202) の SHA3-224 か
