以前lilypondで作って公開した無料楽譜サイト(音付き)を移植中です。 kalz2q.github.io/gakufu006/ 変更点 一番大きな変更は曲データpdfとmp3をgoogle driveに入れてリンクを張っていたのをgithubにsvgとmp3を置いて、reactで作ったページに直に読み込む形に…

MuseScore と言う楽譜を書くソフトを勉強しています。 これ自体は無料なのですがダウンロードサイトが有料の楽譜サイト Muse Hub へ誘導する風になっていて気をつけて下さい。 作った楽譜を SVG でエクスポートする機能があったので、SVG で出力してはてなの…

作曲：藤山一郎 ラジオ体操の歌 Generated by MuseScore Studio 4.3.2

Docker について 個人でプログラムを楽しむのに Docker は要らないと思ってた。 ローカルに Docker 環境を作るのが大変すぎる。 プログラムを公開するのに便利な仕組みはいっぱいある。 Docker 入門のサイトや YouTube はコマンドの説明で何が出来るかが見え…

桐壺 きりつぼ 帚木 ははきぎ 空蝉 うつせみ 夕顔 ゆふがほ 若紫 わかむらさき 末摘花 すゑつむはな 紅葉賀 もみぢのが 花宴 はなのえん 葵 あふひ 賢木 さかき 花散里 はなちるさと 須磨 すま 明石 あかし 澪標 みをつくし 蓬生 よもぎふ 関屋 せきや 絵合 …

Flat 実験 View on Flat: doremi

React環境にMathJaxサンプルを転記してみました。 いろんなレベルのエスケープを重ねるので大変。 ちょっとやってられないですね。 とは言え出来たのでうれしいかも See the Pen mathjaxSample by kalz2q (@kalz2q) on CodePen. CodePen - mathjaxSample

ユーザーからの入力を受け付ける際に行うエラーチェックは色んな方法がある。 最近紹介しているプログラムは素数絡みなので入力値は正の整数。 const handleChange = (e: any) => { const value = e.target.value.replace(/\D/, ""); setNum(value); }; これ…

入力値の前後の素数を返します。 入力値が素数だった場合は、前の素数、入力値、次の素数の3つを返します。 See the Pen prevNextPrimes by kalz2q (@kalz2q) on CodePen.

与えられた数の手前の素数を返します。 See the Pen prevPrime by kalz2q (@kalz2q) on CodePen.

値が与えられて次に大きい素数を返す。 See the Pen nextprime by kalz2q (@kalz2q) on CodePen.

See the Pen primegenerator by kalz2q (@kalz2q) on CodePen. 数字入力 の所がわからない。 const handleChange = (e) => { const value = e.target.value.replace(/\D/, ""); setNum(value); };

アメリカの州名を覚えるWebアプリを作りました。 See the Pen usaquiz by kalz2q (@kalz2q) on CodePen.

昔作った数学記号暗記用のサイトですがこれを MathJax LaTeX 表示に変える予定です。 See the Pen mathsymbol by kalz2q (@kalz2q) on CodePen. 追記 MathJaxにしたのですがデータの変換中に途中で飽きたのでとりあえずMathJaxの使用例として掲載します。 Se…

結論 ツールを使わず MathJax の機能だけで成功!!!! chatGPT3.5 に助けてもらいました。 書き換えでなく創作になるとさすが chatGPT は嘘ばっかりつくけど、React がわかりやすいエラーを吐いてくれるのでそれをつぶして行けばオッケー。 See the Pen mathja…

Reactで数式を書くのがうまく行っていません。 Mathliveのサンプルがcodepenで動いたので実行例です。 分析はこれから。 See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

いろんな言語の入門書を読んでちょっとむずかしくなると投げ出していた。 しばらくして自分の書いたプログラムを見てもわからない、の繰り返し。 4年前 Elm に出会って、一歩前に進んだ感じがして、今回の楽譜サイトみたいのが作れて良かった。 ellieと言うe…

無料楽譜サイト完成しました。 https://kalz2q.github.io/gakufu005/index.html 開くと曲リストが表示されます。ランダムなので、毎回順序が違います。 適当な曲をクリックすると楽譜画面になります。 See the Pen gakufu by kalz2q (@kalz2q) on CodePen.

google drive で共有にした音声ファイル mp3 をaudio タグで埋め込むのがうまく行かなくなっていたのを、 iframe タグで成功しました。 以前作ったメロディ付きの無料楽譜サイトが pdf も mp3 もgoogle drive にあるのを src で指定してたのが仕様が変わって…

SVG を ReactComponent にして読み込むと言うのがうまく行かなくて 大きくしたり拡大縮小する。 色を変える。 animate したり。 実験中。 See the Pen listsvg by kalz2q (@kalz2q) on CodePen. 今の考え ReactComponent は使わない。 使えない。 <img> タグで囲…

useCallback のサンプル。 reset が無駄に呼ばれることがなくする。 パーフォーマンス向上。 See the Pen useCallback by kalz2q (@kalz2q) on CodePen.

useMemo のサンプル See the Pen useMemo by kalz2q (@kalz2q) on CodePen.

この例では、Loading 終了後 focus がAdd ボタンに移動している。 See the Pen useRef01 by kalz2q (@kalz2q) on CodePen. コードでは useEffect(() => { if (!loading) { addButtonRef.current?.focus(); } }, [loading]); となっています。

useRef サンプル よくわからない。 See the Pen useRef by kalz2q (@kalz2q) on CodePen.

useState を useReducer で書き直している。 See the Pen useReducer by kalz2q (@kalz2q) on CodePen.

テキストに載っていた useEffect の最初の例。 See the Pen useeffect by kalz2q (@kalz2q) on CodePen.

tailwindで楕円を描く。 css の border-radius と tailwind の rounded とが同じではない。 かと言って、border-radius が tailwind の 中で使えるのが限定的なのですんなりとは書けなかった。 See the Pen ellipse by kalz2q (@kalz2q) on CodePen.

borderをうまく使うと陰陽図が描けます。 相当トリッキーな使い方だと思う。 See the Pen yinyang by kalz2q (@kalz2q) on CodePen.

tailwindにline-clampと言う便利なclassNameがあって文章の冒頭を数行だけ表示してくれる。 See the Pen lineClamp by kalz2q (@kalz2q) on CodePen. 課題 上記の原文は途中に改行があるのにスペースを入れて連続して出力しているがそれで良いのか。 それよ…

Lern React with TypeScript の第1章が React の導入で、Alert を作っている。 useState を使ってクローズボタンを押すと画面が消える。 それはいいのだけれど、props のやり取りがちょっと納得が行かないので、例によって壊して学んで見ようと思ってます。 …