簡易紙芝居PGM

簡易紙芝居PGM

JavaScriptのテキスト読み上げ機能を使った簡易的な紙芝居PGMを作りました
あと紙芝居データ共有Wikiもついでに作成しました

---

githubURL:https://github.com/NanjoMiyako/KamiSiba
サンプルページURL:https://nanjomiyako.github.io/KamiSiba/
紙芝居データ共有WikiURL:https://seesaawiki.jp/kamisiba20210918/

---

使い方
まず読み上げさせたいテキストデータと行別画像リストファイルを読み込ませます
その後開始行と一行あたりの読み上げ時間を入力した再生ボタンを押します

---

行別画像リストのファイル形式
表示させたい行番号1,画像URL1
表示させたい行番号2,画像URL2
…

---

参考にしたサイト
javascriptのsetTimeoutが即実行されてハマっ

?インターネット老人?のためのホームページ（死語）リフォーム術

# この記事の対象
～00年代初頭にホームページ作っていて、現在放置中……という人、あるいはそういう人から依頼されて昔のフォルダを受け取った人が対象になります。
スキル的にはjQuery(Bootstrap)なら何とか勢～（バックにも関心がある）SPA初心者勢を想定しています。

# 手順
## 1.本当に自前でやる必要があるか考える
Webサービスが氾濫する現在、現在サイトにある機能を本当に自前で提供する必要があるか考えましょう。

### 日記
まぁ**最有力はブログへの移行**ですね。黒歴史を消す人も多いですが、逆に過去の日記みたいなもんで、残しておきたいと思う人もいるかと思います。ていうかホームページは放置してて日記にあたる部分だけ流石にブログに移行してる人も多いかと思いますね。
何らかの理由でブログに移行できない、不適切だと思う場合はスクレイピングして文章データをmdやらjsonに纏めて、今流行りのGatsbyあたりに手を出すのも良いのではないでしょうか。

### イラスト
これは現行のシェアとしてもシステム的にも**[pixiv](https://www.pixiv.ne

[初学者]javascriptのクロージャー

#はじめに
while文とかfor文とか~文あるけど、あれは関数なのか？の疑問から生まれたものです。
文の正体は分かりませんでした。

#目次
　1.ループ文の謎
　2.ガベージコレクション？　ガレージコレクションなら知ってます。
　3.静的スコープとはなんですか？
　4.クロージャー

#ループ文の謎
ループ文とはご存知でしょうか？基礎で出てくるあれです。

“`
for(let i = 0; i < 5; i += 1) { console.log(i); } // 0,1,2,3,4と出ます。 ``` 基礎の基礎のループ文。 ではあえて関数で書くとどうやって書くのかを疑問に持ちました。 ``` let a = 0; function A() { a += 1; console.log(a); }; A(); //1 A(); //2 A(); //3 A(); //4 A(); //5 ``` 普通に出ますね。ではlet a = 0;を関数内に入れてみましょう。 ``` function A() { let a = 0; a += 1; c

JavaScriptから学ぶSwiftで新しく対応したasync、await

Swiftでasyncとawait機能が対応した。
自分自身Swift以外の言語の素養がなく、asyncとawaitとはなんぞやというところから勉強したのでその記録
async、awaitの学習教材としてJavaScriptの言語仕様を見ている

# 前提知識として、JavaScriptでのasync await

## Promise型　
非同期処理の戻り値であり、非同期が完了するまで、その実態はundefinedになる。

戻り値が返ってきたら、その戻り値がラップされた型となる。戻り値が返ってきたタイミングで自身のthen()メソッドを呼ぶ

“`jsx
getDate()
.then(function(data) {

return getYear(data)

}) .then(function(year) {

return getSomething(year)

}) .then(function(item) {

getAnotherThing(item)

})
“`

## async
非同期の戻り値(Promise)が返って

Next.js+tailwindcssにgoogleFont読み込ませる！

googleFontをtailwindで使用する為の設定の仕方を紹介します。
こちら課題の一環でLGMTを一定数取らないといけない試験でぜひLGMTを押していただけるとありがたいです。

### googlefontでフォントを選択して@importの方でコピーする！

### styles/globals.scssに読み込む

“`sass
@tailwind base;
@tailwind components;
@tailwind utilities;
//読み込む
@import url(‘https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans+JP:wght@500&display=swap’);
“`

### tailwi

かんたん慣性スクロール TweenMax

## TweenMaxと同ライブラリのScrollPluginを使ってページ全体を慣性スクロールさせる方法のメモです。
おしゃれサイトによくある、マウスホイールを動かすとゆっくり画面のスクロールが終わるやつの簡単な実装です。

“`js
import gsap from “gsap”;
import { ScrollToPlugin } from “gsap/all”;
gsap.registerPlugin(ScrollToPlugin);

function smoothScroll(toBottom) {
let direction = “-=100”;
if (toBottom) {
direction = “+=100”;
}
gsap.to(window, {
scrollTo: { y: direction, autoKill: true },
duration: 1,
});
}

let startY;
function touchstart(e) {
startY = e.changedTouches[0].page

【エラー】TypeError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: Value is not of type ‘long’.（執筆途中）

# はじめに
Dicomデータをsagittal, coronal表示させる時にタイトルのエラーが出たので記録する。
# エラーについて
：の右側を読むと、「long型じゃありません」とのこと。つまり、該当箇所の変数の型が本来ならlong型のところそうなってないみたい。
左側の”TypeError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’”については初めて見るエラーだったので詳しく調べてみることにする。
#CanvasRenderingContext2D.getImageData()
getImageDataというのは、Canvas2D APIのCanvasRenderingContext2Dというメソッドにある関数である。
この関数は、canvasで指定された部分の基礎となるピクセルデータを表すImageDataオブジェクトを返す。
この関数は引数に抽出するImageDataのx座標、y座標、幅、高さを持つことができます。
[MDN Web Docs: CanvasRenderingContext2

JavaScript(関数)

#はじめに
基本に立ち戻りJavaScriptを深く理解しよう関数編

関数とは実行可能なオブジェクトである

#コールバック関数
他の関数に引数として渡される関数

“`javascript
function hello() {
console.log(‘hello’)
}

function fn(cb) {
cb();
}

//引数に関数helloを渡す
fn(hello); ‘hello’

//setTimeoutもよく使うコールバック関数
//第一引数に実行する関数、第二引数に何ミリ秒待つかを指定
setTimeout(hello, 2000)
“`

#this
呼び出し元のオブジェクトへの参照を保持するキーワード
thisは
オブジェクトのメソッドとして実行される場合→ 呼び出し元のオブジェクト
関数として実行される場合→ グローバルオブジェクト

“`js
const name = ‘Tim’

const person = {
name: ‘Tom’,
hello: function() {
console.log(‘He

JSONで受け取ったtimestamp型の値をJavaScriptでサクッとDateに変換

# 概要
APIサイドからJSONを通じてフロント側（JavaScript）でデータを受け取るとき、日付を比較したい時がある。
そんなとき、JSONから受け取ったcreated_atなどの日付データ（timestamp）はそのままJavaScript側では使えない・・。
そこでJSONのtimestampをJavaScriptでDateとして使えるようにしていく。

# やり方

“` hoge.js
// 任意の方法でjsonからtimestamp型の値を受け取る
// ここでは”timestamp”という変数として扱う

console.log(timestamp); // 2021-09-17T06:21:00.101Z
var date = new Date(timestamp);
console.log(date); // Fri Sep 17 2021 15:21:00 GMT+0900 (日本標準時)

“`

サクッとできてしまいました。

“`hoge.js
//2021年9月17日の0時0分0秒を取得して、先程のdateと比較してみる
var start_of

JavaScriptでイベントをキャンセルする方法

普段jQueryばかり書いている人間が、イベントキャンセル処理を通常のJavaScriptで書こうとしてハマったのでメモ。

## 概要
通常のJavaScriptでイベントをキャンセルしたい場合は、addEventLinstenerで`preventDefault()`と`stopPropagation()`を呼び出そう。
## 問題
jQueryであれば以下のように`return false`すれば、バブリング(親要素のalert)およびデフォルトアクション(画面遷移)を停止できるが

“`html

テスト

“`
“`jsx
$(‘.parent’).on(‘click’ ,function(){
alert(‘parent’);
});

$(‘.child’).on(‘click’ ,function(){
alert(‘child’);
return false;
});
“`

通常のJSのaddEvent

【初心者向け】0から解説するAjax

ごあいさつ

「25歳文系未経験からエンジニア転職を目指す学習4ヶ月目の一般男性が、自分が過去につまづいたポイントをわかりやすく噛み砕いて書く！」をコンセプトに投稿しています。
LGTMしていただけると大変励みになります…！！！

概要

今回は「Ajaxとは?」という趣旨です。
私のようにフロントエンドからプログラミングを学び始めるとサーバ側のことがよくわからないまま言語の学習を進めてしまい「webアプリの全体像ってそもそもどんなものなの?」というところの理解を深める機会が少ないなあと思い、 過去にAjaxを学んでからそこの理解が深まったので取り上げます。
(＋転職活動の面談で上手に説明できなかったのが悔しくて悔しくて復習したので…！笑)

解説

1.導入

まず、Ajaxとは

Asynchronous JavaScript and XML

の略です。

Asynchronous(非同期) JavaScript and XML(XMLHttpRequest)

非同期でJavascri

【React Native】ただ写真ライブラリから写真を取得するだけでなく、加工して表示させる方法

#写真ライブラリから写真を取得し、自分の好きなサイズに加工して表示させる

ReactNativeで写真ライブラリから写真を取得する方法はいくつかありますが、その中で加工や編集も行えるライブラリを紹介します。
ライブラリのGitHub https://github.com/ivpusic/react-native-image-crop-picker

もともとreact-native-image-pickerというライブラリがあり、それを使えば「カメラを起動させるか」「写真ライブラリを開くか」の選択欄も出て、どちらも実装できる便利なものがありましたが、最近のアップデートで選択欄が出なくなったり何かと使いにくなりました。
image-pickerのGitHub https://github.com/react-native-image-picker/react-native-image-picker

またこのライブラリで写真を取得してもそのまま表示されるため、実際にアプリに入れてみないと調整が難しいです。
例えば、アイコンを設定する際に写真全体を表示するのではなく、右下の一部分だけを

【React Native】AlertやらDialogやらmodalやら似たようなやつのそれぞれ特徴をまとめました。

#似たような使い方をするAlertとDialogとModalの違い
ログインに失敗した時のエラーメッセージやユーザーに確認をとる時に使われるUIの作り方は何種類かあります。
その中で今回はReactNativeの標準に入っているAlert、ModalとライブラリのDialogの三つのそれぞれの違いをまとめました。
基本的にこの三つはほとんど同じUIで挙動や実装方法も同じです。ただ、Dialogじゃないとできないことなどもありましたので資料にしました。

#ライブラリをインストール
###dialog
“`yarn add react-native-dialog“`
Github：https://github.com/mmazzarolo/react-native-dialog

#実装
プロジェクトを作成し、各ライブラリをインポートします。

“`javascript
import React from ‘react’;
import {Alert, Button, View,Modal} from ‘react-native’;
import Dialog from “rea

ポリリズムを視覚的に理解できるメトロノームを作った！（JavaScript）

ポリリズムを視覚的に理解できるメトロノームを作りました！

https://mwsr.khufrudamonotes.com/metronome

「ポリリズムを視覚的に理解できるメトロノーム」を作った！！！！！！！！https://t.co/4znCN19IhA pic.twitter.com/KdyruLfZTv

— k1mu – キムラ ヨシト (@k1mu0419) September 12, 2021

実際に、自分がポリリズムを演奏したり考えたりするときのイメージに近いものになっています。

#ポリリズムって何？

“ポリ(poly)“は、”複数の“、”多数の“などを意味する言葉です。
あの「ポリゴン(多角形)」や「ポリマー(重合体)」の”ポリ“でもあります。

つまり、ポリリズムとは

複数の「リズムのまとまり」が重なって進行しているリズムを指します。

（詳しくはこちら↓）

https://khufrudamonotes.com/polyrhythm-map

#なぜ作ったのか

###現在の記譜法の弱点

![music_gakufu_open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486558/b9

Firebase V9におけるfirebase.apps.lengthの書き方

はじめに

初投稿になります。

自身の備忘録として、また、同症状を抱えている人の手助けになればと思い、ここに記します。

初回は「firebase.apps.length」にまつわるお話です。

(Firebase JavaScript SDK　V9.0.2)

解決策

“`ts:fb.ts
import { getApps } from ‘firebase/app’ // import 要

getApps().length

//使用例(before -> after)

//before: Firebase V8
!firebase.apps.length
//もしくは
firebase.apps.length === 0

//after: Firebase V9
!getApps().length
//もしくは
getApps().length === 0
“`

原因

FirebaseのV9へのバージョンアップに伴う破壊的変更が原因でした。

2021/8/25以降にアップデートorインストールした方は注意です

【技術書まとめ】ハンズオンJavaScript

「長い旅にはカバンより歌のほうがうれしいものだよ」

— トーベ・ヤンソン：『さびしがりやのクニット』

# 読んだまとめ

JSの全体像が見えた気がする。ハンズオンで実際にコードを書くので頭にも入りやすかった。ただ分厚いので時間はかかった。

# 1章 学び始める前に

JavaScriptの基礎的な説明

# 2章 データを学ぶ

JavaScriptの基礎的な説明

# 3章 処理を学ぶ

– アルゴリズムとは「何らかの解を得るための手順」のこと。
– 式は文の一種で値を返すが、文は必ずしも値を返さない
– `let pi = 3.14`
– 文
– ブロック`{}`
– 変数や定数のスコープができる
– そのブロックのみで有効となる

# 4章 オブジェクトを学ぶ

– JSのオブジェクトは単なるキーバリューのペアではなくメソッドも定義できる

# 5章 モジュールを学ぶ

– `true.toString()`はプリミティブなのになぜできるのか
– 対応するオブジェクトに自動変換されるから
– ボッ

【React】コンポーネントのメモ化で怒られる / ESLint: Component definition is missing display name(react/display-name)

# はじめに
コンポーネントのメモ化を試みたところESLintで怒られた、のでその時の対処法。
[メモ化](https://qiita.com/tkmd35/items/065b0ec0d187723ffe14)

“`ts
memo(コンポーネント);
“`

「コンポーネントの定義に表示名がない」と言われている

“`
ESLint: Component definition is missing display name(react/display-name)
“`

開発環境でのデバッグ時に、複数のコンポーネントが存在する場合エラーメッセージからのデバッグが難しくなってしまう。
ということがあってこのように怒られるらしい。

https://stackoverflow.com/questions/41581130/what-is-react-component-displayname-is-used-for

# サンプルコード
怒られる

“`ts
// ESLint: Component definition is missing display name(re

Vueのタグが見えないようにローディング画面を付ける

Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。
Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。
そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。

実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。

Webページ
　https://poruruba.github.io/utilities/

（参考）GitHub
　https://github.com/poruruba/utilities

#やってること

Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。

* 画面全体を覆うFlexパネルの定義
* ロード完了したらフェードアウトさせる処理
* フェードアウト

ぼくがかんがえたさいきょうの”定員付きフォーム”

今回は、GASで定員付きのGoogleフォームを作りました。

# 背景
定員付きのGoogleフォームを作成する記事は他にもありますが、どれも回答数が一定のラインに達したらフォームを閉じるだけのもので、「残りの枠数の表示」などの実務で使う上では必要な機能は搭載されていません。

また、そのようなサイトで紹介されているコードは、どんなに小さな変更(定員を変える等)でもコードをいじらなければならないことがほとんどです。これでは保守管理ができる人が限られてしまいます。この点も実務で使う上では不便だと感じました。

# そこで、つくった

実務で差し支えなく使用できるよう、以下のような機能を搭載しました。

– フォームの説明欄に残り人数を表示できる
– 枠が残り少なくなったときにだけ、フォームの説明欄に残り人数を表示するようにできる
– ITに詳しくなくても、GUIで保守・管理ができる

この記事は、開発する上で心がけたことの話が中心となります。導入方法や使い方などの実際に使う上での情報が欲しいという方は、下記のブログをご覧ください。

https://r-40021.github.io

新技術は怖くない、jQuery時代からReact時代へ勇気を出して踏み出した

__自分にとって未知の技術、なんだか怖い。__

いずれ身に付けなければならないとは思いつつも、とても難しいものに思えてなかなか踏み出せなかったです。しかし考え方を変えてみたらあっさりとその壁を乗り越えて次の段階へと自分をステップアップさせることができました。

考え方の面から誰かの助けになればと思い、初投稿します。

# この記事について

JavaScriptについてjQuery全盛期に学習した後、技術的に停滞していた自分がついにReactに触れて個人アプリを作るようにまでなったので、その体験を簡潔に書きます。同じような境遇の人にとって新しい一歩を踏み出せる助けになると嬉しいです。

想定している読者は「ある技術を過去に習得したがレガシーになりつつある人」や「新しい技術を学んだ人が羨ましいが尻込みしてしまっている人」など、新しいことに焦燥感を抱えている人です。

# jQuery時代に取り残された焦燥感

:::note warn
jQueryが悪いという意図はありません
:::

私は社会人となる前の「JavaScriptのライブラリといえばjQuery」という時代にJavaSc