ウェブアプリ制作を久しぶりに

プログラミング

ふと思いついて、久々にウェブ作業。調べたことをメモしていく。

textarea内でタブを入力可能にする。ついでにタブ幅も変更する。

表っぽいものをなんとかする時のために。JavaScriptでタブキーを無視するみたいな感じ。なるほど。

CSSで文字サイズをディスプレイサイズに合わせて可変にする方法【初心者向け】

こんなのがあるのか、とびっくり。数年触ってなかったらこんな感じだ。viewportとかで一生懸命やってたのはなんだったのか、というくらい衝撃。あと、calc()ってのも今日知った。こういうのがないとやってられないよな、最近のレスポンシブ。とか思った次第。

まだいろいろ調べながらやってるので、随時追加していく予定。

楽譜描画ライブラリVexFlowを使ってみた
これはおもしろい。

VexFlow
環境構築などはこちらが詳しい。

Web上で楽譜を扱うライブラリたち
他にもいろいろあるそうだ。試すのが大変そうなのだった。

The VexTab Tutorial
公式によるチュートリアル。表記の仕方はとりあえずこれを見ればよさそう。

コードのテストにはJSFiddleを使ってみた。CodePenではなくこれにしたのは、サンプルがJSFidddleで公開されていたから。メールアドレス以外に名前を登録する必要がある。コードが公開されるのだからそれはそうか。

iOS Safari でダブルタップによるズームを防ぐには touch-action: manipulation が一番簡単
画面上のボタンをタップしてたら、思いがけないタイミングで画面拡大となってしまう。ダブルタップと認識されたためだ。なんとかしたい。ということで見つけたのがこれ。CSSだけでいけるとは。Androidでも確認できた。こんな感じで盛り込めた。

1ヶ月も試行錯誤して、ようやくプリントに採用するフォントを見つけた
UDフォントについて調べていたら見つけた話。興味深い。

Faviconジェネレーター
ファビコン作成にこれを使った。複数のサイズを埋め込めるとのこと。JPEGやPNGを放り込んでダウンロードする。

GoogleタグマネージャのトラッキングID設定方法
Google Analyticsのコード埋め込みに、今後を考えてGoogleタグマネージャーを使ってみることに。初めて使う。と思ったら前にも使ってた。忘れてた。いや、タグを追加することが今後あるんだろうか? 自分のコードを入れることはあるのか? よくわからない。

枠のサイズに応じて中のフォントサイズを自動調整する方法
前から欲しいとうっすら思っていたもの。JavaScriptをforで回してだんだん小さくしていくという、聞けばなるほどな手法。組み合わせ方を考え中。

Tone.js をテスト中。いろんな警告が出てくる。Chromeのバージョンで違ったり、Tone.jsのバージョンによって違ったり。ということで、CodePenとかJSfiddleの例を試しても使用しているライブラリのバージョンが違うのでいろいろ迷う。

loopを使ってて「Events scheduled inside of scheduled callbacks should use the passed in scheduling time.」っていう警告が出てたのは

Scheduling a future note from a callback · Issue #142 · Tonejs/Tone.js
Hi, I can't figure out the correct syntax to schedule a future note from inside a callback (like a Tone.Loop callback). ...

で、なんとかなった。timeの使いどころか。やっと見つけた。

CSSで正方形を作る方法!レスポンシブに対応させるには?
文字を真四角なボックスに入れたいときに。

そんなこんなで、Adsenseの審査が通った。申請から2週間以上かかった。日曜日に結果が出た。Googleの人、おつかれさまです。

同時進行しているM5Stackシリーズのプロジェクトでもいろいろ行き詰まって見つけたものもあった。

変数に入ってる文字列を表示しようとしても文字化けする。それを解決するのがc_str()。ここに書いてあった。

漢字まわりのLGFX解説 も参考になった。

CSS関連でも。

CSSで画像を枠内に収める方法をサンプルコード付き解説!

object-fitなんてのがあるのを初めて知った。便利。JavaScriptでなんかする必要なんてなくなってたのか。

アナログ時計作りたい。よさそうなのがあった。

【JavaScript】 簡単!デジタル/アナログ時計をつくろう

文字コードとか数値ではなく、任意の順番でソートしたいとなった時に悩んだ。これでよさそう。
sortメソッドで文字列を任意の順番でソート
【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法

ボックス内で左右・上下のセンターにする。Bootstrapでカンタンにある場合。

Bootstrap4でお手軽上下左右中央揃え

class="d-flex align-items-center justify-content-center"

でいける。楽。

ウィンドウサイズを変更(リサイズ)した時にCSSのプロパティを変更したりするんだけど、普通に書くとリサイズの途中でも処理が走ってしまう。そこで、setTimeoutで処理を遅らせる。それがすっきりと書かれてるやつ。
【JavaScript】ウィンドウのリサイズ完了後に処理を実行する

なるほど。最初からやっておけばよかった。というくらいすっきり。

楽譜描画用ライブラリもうひとつ。abcjs。解説は以下が詳しい。MML的な書き方で描画。レスポンシブへの対応がVexflowよりカンタン。ソフトウェア音源による再生までできてしまう。すごすぎ。これに乗り換えようと思っている。

エディタ版 abcjs(旧版)

Kindle出版がHTMLでできると聞いて。
【簡単!】HTMLファイルでKindleに出版する方法【電子書籍出版
ちょっと試したけどなんとかいけそう。

SVGで文字をなんかする方法を探していた。これは詳しい。なんでもできそう。
svg要素の基本的な使い方まとめ

こんなのも。
【簡単!】HTMLファイルでKindleに出版する方法【電子書籍出版】

各種画像ファイルの変換にはこれを使っている。SVGへの変換とか逆とか。
多形式に対応した画像変換ソフト!「Converseen」。
ベクターデータだけど拡大方向はうまくやってくれないっぽい。残念。

これは使えそう。
画面をスクショするブックマークレット

コードを短縮化してブックマークレットを作成するウェブサービス。感動。
ブックマークレット作成

Stackoverflowから。今、これで困っている。翻訳したままなので元のタイトルは違う。
html2canvasを使用するとSVGが表示されない(英語)
うーむ。まだうまくいかない。html2canvas の0.5.0ならうまくいった。

このサイトを使った方が楽かも。サイズ指定できる。優秀。
SVG to PNG

ウェブじゃなくてArduinoではまったのでこれもメモ。2次元配列の個数を得る。
2次元配列の要素数を取得するにはどうすればよいですか。

BLE関連でいろいろ困っている。ACL_BUF_COUNT を増やしたい。これでいけるといいな。
How to decrease the time of upload? #399

コメント

タイトルとURLをコピーしました