- 1. moment() で年月日などを扱う方法
- 2. だいたいフォークするだけでポートフォリオが出来上がるリポジトリ作ってみた
- 3. Adobe Audition Script – DTMプログラミング言語探訪
- 4. いちばんシンプルなdat.gui.jsの使い方
- 5. Azure Functions でキューをトリガーに関数を動かして、結果を別のキューに積む(JavaScript)
- 6. JavaScript 基礎を理解する
- 7. SolidityとJavaScript（Web3.js）で同様の文字列ハッシュ化（Keccak256）を行う方法
- 8. ANTLR4 を JavaScript から使ってみる
- 9. Firestoreの存在チェック（JS）
- 10. 1htmlで手持ちのmp3を太鼓の達人化(疑似自動作譜)
- 11. imageminでディレクトリ構成を維持する方法
- 12. [JS] forEach
- 13. Kinesis Video StreamのsignalingChannels を使って iOSからWebRTCする
- 14. map関数をわかりやすく分解してみた
- 15. Reactを勉強するなら関数コンポーネントから始めよう！クラスで書かれているものは必要に迫られるまで読まない
- 16. safariだけimgのonloadイベントが走らないパターン
- 17. 【Vue.js】【Nuxt.js】ハマったにも関わらず気づくと一瞬で直せた凡ミスまとめ
- 18. 【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話
- 19. GSAP ScrollTrigger.jsを使ってみる
- 20. Puppeteer でスクレイピングを行う方法
moment() で年月日などを扱う方法
#概要
moment()を使う機会があったので今後の為にも色々まとめておく。#そもそもmoment()とは何？
https://momentjs.com/
JavaScriptのライブラリで、年月日や時間を取り扱うことができる。moment()で今の時間を表示。
.formatをつけることでいろんな表示形式にできる。#書き方(公式参照-> https://momentjs.com/ )
Format Dates“`
moment().format(‘MMMM Do YYYY, h:mm:ss a’); // August 31st 2021, 10:14:35 am
moment().format(‘dddd’); // Tuesday
moment().format(“MMM Do YY”); // Aug 31st 21
moment().format(‘YYYY [escaped] YYYY’); // 2021 escaped 2021
moment().format();
だいたいフォークするだけでポートフォリオが出来上がるリポジトリ作ってみた
#前置き
このアプリは[github/personal-website](https://github.com/github/personal-website)の機能を拡張したものです
元リポジトリに感謝####リポジトリ
https://github.com/takeda0125/simple-portfolio-generator
#きっかけ
皆さん、シンプルなデザインは好きですか？
僕は大々々好きです！！！！！！！！！！！！！（大声）そんな僕なので、Jekyllのテンプレートを使ってポートフォリオを作ろうとした時はめちゃ悩みました
なにせ好みじゃない！
黒くなくていいし赤くなくていいし陰ついてなくていい！要らない！でも自分で作るのはめんどい…
そんな私の前に現れたのが
__天才か？？？？？？？？？？？？__
あなたが
Adobe Audition Script – DTMプログラミング言語探訪
[DTMプログラミング言語探訪](https://qiita.com/aike@github/items/77b3eccc6861de09513a)
# Adobe Audition Script
## 概要
波形編集ソフトを使う作業は定型的な操作が多いため、多くのソフトは手順を自動化するためのバッチ機能を搭載しています。また、そのうちいくつかのソフトはテキスト言語でバッチ処理を書くスクリプト機能を持っています。
Adobe Auditionもバッチ処理を持っています。またスクリプト機能も搭載されていますが最新のドキュメントには載っていません。そのあたりの状況も含めて説明します。## 用途
– 定型的手順の自動化
– 複数ファイルの一括処理## バッチ処理
本題ではありませんが、スクリプトを使わないバッチ処理の手順も比較のために説明しておきます。
### バッチジョブ作成
Auditionではバッチジョブはテンプレートと呼ばれています。英語版ではFavoritesという名前なので海外の情報にあたるときは注意が必要です。
テンプレートは以下の手順で作成します。テ
いちばんシンプルなdat.gui.jsの使い方
dat.guiは基本的には、データを動的に変更する為に使う。
リロードして、っていうのが面倒な場合に使える。使い方がややこしいのが多いので、シンプルに作る
#cdnで設置
“`html:html.html
“`#読み込み
“`js:html.js
window.onload = function() {
const gui = new dat.GUI();
};
“`これで右上になんか矩形が表示されるはず。
#デバッグボタンを作ってみる
“`js:html.js
window.onload = function() {
const gui = new dat.GUI();
gui.add( params, ‘debug’ ).onChange( function() {
if(param
Azure Functions でキューをトリガーに関数を動かして、結果を別のキューに積む(JavaScript)
# ベースの関数と設定
“`ts:src/FunctionName/index.ts
import { AzureFunction, Context } from ‘@azure/functions’;export const functionName: AzureFunction = async (context: Context, inputMessage: any): Promise
=> {
context.log(`function name ran with ${inputMessage}`);const data = doSomething();
context.bindings.outputMessage = {data: data};
};
“`“`json:src/FunctionName/function.json
{
“bindings”: [
{
“name”: “inputMessage”,
“type”: “queueTrigger”,
“directi
JavaScript 基礎を理解する
#変数
JavaScriptでは文字列や数値を繰り返して処理することが多々あり、その度にコードを書くのは大変です。
そんなときに役立つのが変数です。##変数とは
文字列や数値などのデータを繰り返し利用できるのが変数になります。イメージしやすいのは、
文字列や数値のデータを名前がついた箱(変数)に入れ、箱(変数)を使って処理を簡単にすることができます。##変数は
const、let、varの3種類があり、 = の右側に入れるのは数値や文字列などです。= は代入演算子といい、
= の右側にある数値や文字列を左側の変数に入れて定義することができます。変数(箱)の書き方は以下のようになります。
“`js:例
const 変数名 = 数値、文字列など:
“`次のコードではcharacterという変数を宣言して、ミッキーという文字列を書いて変数を定義しています。
“`js:例
const character ＝ “ミッキー”;
“`#定数
`const`は再代入ができない変数の宣言で、constで宣言された変数(箱)のことを定数と呼び、
後からc
SolidityとJavaScript（Web3.js）で同様の文字列ハッシュ化（Keccak256）を行う方法
# 文字列ハッシュ化の手順
1. utf-8表現（string型）からHex表現（bytes型）に変換
2. Hex化した文字列をKeccak256変換# Solidityの場合
“`solidity
string message = “sample message”;
bytes hexMessage = bytes(message); // 1
bytes32 hashedMessage = keccak256(hexMessage) // 2
“`# JavaScript (Web3.js) の場合
“`js
let message = ‘sample message’;
let hexMessage = web3.utils.utf8ToHex(message); // 1
let hashedMessage = web3.utils.soliditySha3(hexMessage); // 2
“`
ANTLR4 を JavaScript から使ってみる
ANTLR4 で生成したパーサーを Java から使った経験があったので、同じように JavaScript から使おうとしたのですが、ハマってしまいました。何とか動かせたので手順を紹介します。
ANTLR4 のバージョンは 4.9.2 です。ドキュメントが不親切だと感じたのですが、[ごく最近](https://github.com/antlr/antlr4/commit/11ede0fc7726df8bc9eb17eca47e0be020c83933?branch=11ede0fc7726df8bc9eb17eca47e0be020c83933&diff=split)になって、生成されるコードが ESM 形式のモジュールに変更されていました。一方でランタイムは CommonJS 形式のままなので、現状はとても中途半端な状態です。将来、完全に ESM 形式に移行するなどの修正が行われれば、この文書の記述は役に立たなくなってしまう可能性があります。
# 前提
以下のインストールは済ませておいてください。
* npm
* Java
* Visual Studio Code
Firestoreの存在チェック（JS）
firestoreから検索条件を指定し、結果が存在しない時の処理が必要になったので、色々と調査してみました。
[公式](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)によると
>doc.existsで存在確認はできますが
**サブコレクションでのwhere句での条件検索の存在有無**に詰まってしまいました。
「これでいいかな？」というレベルですが、こちらで共有します。以下、コードを抜き出してみました。（Vueコードの一部）
“`
// コレクション名「users」サブコレクション「freeday」より
// dateがselectDayと一致するデータvar doc1 = await firebase.firestore().collection(“users”).doc(this.id)
.collection(“freeday”)
.where(“date”, “==”, this.selectDay)
.get()
if(doc1.docs.length == 0){
1htmlで手持ちのmp3を太鼓の達人化(疑似自動作譜)
## サンプル
[drum_masters.0.03.htm](https://gtlgqvxdkbh2dm3axzu5fq-on.drv.tw/drum_masters/drum_masters.0.03.htm)## 使用方法
htmlを開いてローカルのmp3などを選択すると再生が始まります。
Level の数値がどこでマークを出すか を示しています。
つまり静かめの曲だとこのLevel値を下げないとマークが出てきません。
対象のmp3自体のゲインにもよります。
別に200を超えても問題はないです。
 ですが、吐き出した際にディレクトリ構成を無視してしまうという問題があります。例えば、
“`
img
├─pc
│ └─pc1.png
└─sp
└─sp1.png
“`というディレクトリ構成でimgフォルダを指定すると、出力は
“`
pc1.png
sp1.png
“`となってしまいます。
消えたpcフォルダとspフォルダ…issueにも上がっていますね。
https://github.com/imagemin/imagemin/issues/191issueを読む限り内部修正がもうすぐマージされそうな気配なので、
それまでのつなぎとしての処置を考えます。## 解決方法
ディレクトリを精査して、再帰的にimageminをかけていきます。
(上記issueの@brothatruさんのコードを元に一部調整しています。)“`javascript
const imagemin = require(‘
[JS] forEach
##この記事について
JavaScriptの配列forEachについて備忘。##forEach
配列に格納された値1つ１つに対して操作を行いたい時に使用する繰り返し構文###forEachの引数にコールバック関数を渡した際に、コールバック関数の引数に格納されるもの
※コールバック関数…他の関数に引数として渡される関数第1引数 配列の値
第2引数 配列のインデックス
第3引数 配列そのもの“`javascript
const array = [1,2,3,4,5];array.forEach(function(value,index,array){
console.log(value); //1,2,3,4,5が表示される
});
“`##おまけ
配列から新しい配列を作る###mapを使う
“`javascript
const array = [1,2,3,4,5];const newArray = array.map(function(value,index,array){
return value; //newArrayに[1
Kinesis Video StreamのsignalingChannels を使って iOSからWebRTCする
一応オフィシャルでサンプルがあるけど、
https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-ios
そこそこ作り込んでるサンプルで、試しずらかったので簡易なサンプルを作る。# 作るもの
iOS(Master 1) -> kinesis-video-streams signalingChannels -> ブラウザ(Viewer 多 audience/publisher)## 成果物
### iOS
### web
よっしゃできた
Amazon Kinesis Video Streams の webrtc使っての
map関数をわかりやすく分解してみた
個人的にJavaScriptのmap関数が{}と()がグチャグチャで分かりにくかったので分解してわかりやすくしたメモ。
#従来の書き方(for文)
“`javascript:list.js
const animalList = [“dog”, “cat”, “monkey”];
“`
こういった配列から要素を取り出したいとき、従来の書き方だとfor文で書いていました。“`javascript:for.js
for(let i = 0; i < animalList.length;i++){ console.log(animalList[i]); } //出力結果 dog cat monkey ``` 配列の要素数を取得してインデックスを0から要素分繰り返しです。 #map関数 map関数を使うとfor文よりシンプルに書けるのですが個人的に順を追って理解していかないと複雑に思えたので分解してみました。 ###map関数を分解 まず基本の形「配列.map()」から。 ```javascript:map.js const animalList = ["dog", "ca
Reactを勉強するなら関数コンポーネントから始めよう！クラスで書かれているものは必要に迫られるまで読まない
Reactを勉強しようと思ったとき、初学者を惑わす1つの要因が、関数コンポーネントとクラスコンポーネントの存在だと思います。
例えば、textに渡した文字列を表示するコンポーネントを実装する場合、下記のようにfunctionでもClassでも書くことができます。
書き方は違いますが両方とも同じ動作をします。
functionで書かれているものを関数コンポーネント、Classで書かれているものをクラスコンポーネントと呼びます。“`react:Hoge.tsx
export default function Hoge({ text }: { hoge: string }) {
return ({text});
}
“`“`react:HogeClass.tsx
import React from “react”;export default class HogeClass extends React.Component<{ text: string }, {}> {
render() {
return (
safariだけimgのonloadイベントが走らないパターン
# 背景
画像と、その他のコンテンツが動的に切り替わっていく画面で、画像が見えてから他のコンテンツを表示させたいという要件があり、対象の画像のimageのonloadで他のコンテンツを表示、またタグごと取り換えると遅いということで、imageタグ内のsrc属性を書き換えていくような実装をしていました。
その際2連続で同じ画像を出した時にiphoneユーザーだけうまく動かず、その調査の備忘録です。# 実験
こんなスクリプトをブラウザのコンソールに読ませます。これはページのimgタグの最初の1つに、onload時にコンソールにメッセージが出るイベントが付与されます。“`
const img = document.getElementsByTagName(“img”)[0]img.addEventListener(‘load’, function() {
console.log(‘load!’)
}, false);
“`これを適当なimgタグのあるサイトで流したあと、さらにこのスクリプトを2回流します。imgに適当な画像のurlを埋め込んでいます。
“`
//
【Vue.js】【Nuxt.js】ハマったにも関わらず気づくと一瞬で直せた凡ミスまとめ
`Vue.js`を開発で使うことがありますが、
予期せぬエラーで数時間溶かすことがあります。ハマって数時間を溶かしてしまったにも関わらず、気づくとすぐ直った凡ミスについて紹介します。
同じ犠牲者を出さないためにも。
居ないかもしれませんが。## TypeError: ~~~~ is not a function
メソッドはちゃんと定義しているのに、無いと怒られます。
例えばこんな感じに書いていました。“`vuejs:sample1.vue
“``sampleFunc`はしっかり定義しているのに何故か定義されてない、と怒られます。
慣れている方ならすぐ分かりますね。
**メソッドを定義は`method`ではなく`metho
【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話
たいした技術力はないのですが、個人開発の簡単なサンプルとして紹介したいと思います。
## Webコピ太郎とは
[Webコピ太郎](https://www.catch.jp/program/copy-taro/)は、いま見ているWebページのタイトルとアドレスを取り出すだけのツールです。
1. Webページを見ているとき、メモっておきたいと思ったら、このツールを呼びだす
2. ページのタイトルとアドレスを抽出して、テキストボックスに表示
3. クリップボードにコピー
## なぜ、このツールを作ったのか
ネットで調べ物をする度に、役立ちそうなページのアドレスとタイトルをコピペして、テキストファイルにメモするなんてありませんか？
たくさんの参考ページをメモろうとすると、何度もタイトルとアドレスをコピーするのでたいへん面倒くさい。
GSAP ScrollTrigger.jsを使ってみる
##参考記事
>・[【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する](https://www.to-r.net/media/scrolltrigger/)
・[ScrillTrigger.jsの実装例 | Green Sock公式](https://greensock.com/st-demos/)
・[指定できるCSS | Green Sock公式](https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin)##やりたいこと
>トリガー(`.js-trigger`)の要素が指定の位置に来たら、その親要素(`.js-main`)の背景色と文字色を変化させ、`.js-trigger`を過ぎたら元に戻したい>“`html:index.html
“`
>こんな感じ
Puppeteer でスクレイピングを行う方法
### 前提条件
* Yarn がインストールされている
### 作成手順
1. 作業用ディレクトリを作成
1. コマンドライン上で作業用ディレクトリに移動
1. `yarn init -y` を実行して package.json を生成
1. `yarn add puppeteer` を実行。スクレイピングは Puppeteer で行う
1. 次のような内容の index.js を作成。`node index.js` を実行すると「Example Domain」が出力される。これは `` 要素のテキストである
“`javascript
const puppeteer = require(“puppeteer”);(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(“https://example.com”);
await page.waitForSelector(“h1”);
