「JavaScript」に関する日記

次>

バイオハザード レクイエムとAmazonストアフロントとQiita

バイオハザード レクイエム



動画投稿しました。
内容は同一です。
ゲーム音声と実況音声の音量バランスは調整したけど全体の音量調整してなかったなァ。
前回は出力設定で無茶して紙芝居になったし、動画作成手順をまとめておかないと。

Amazonストアフロント

アンパンマンDBから爆速で商品情報入れる方法思いついたので試してみた…けど、半分しか保存されてなかった!
どうやらこまめに確定させていく必要があるみたいだ。

Qiita

昔書いた記事の続編、今更書きました。
今アンパンマンDBで使っているコードほぼそのままです。
CSS、今も発展を続けているはずだけど、このCSSももっといい書き方が生まれてるのかなぁ。

あと、もう一つ別の記事も執筆中。
.NETです。

SHJSと非公開ツール

SHJS

一通り置き換え完了。
もともと何のシンタックスハイライトも使っていない場所は、新規にhighlight.jsを導入しました。
それとは関係ないけど、HTML5以降では推奨されないaタグのname属性によるフラグメント指定も、aタグを使わずid属性を使うようにしました。

非公開ツール

アンパンマンの録画をアンパンマンDBと連携させる系のツールがリリースビルドで起動の瞬間落ちるようになって全然使えない状況。
一応昔のやり方で普通にアンパンマン本編は見られるし普通にアンパンマンDB更新できるけど、効率とか違ってくるのでどうにか直したい。
まずは何のエラーが起きて落ちているのかログを残すところからかな。

ドラゴンクエスト10とhighlight.js

ドラゴンクエスト10(ミフミン)

廃屋

  • クエスト「竜と生きるは竜術士/竜術士の謎」をクリアした!

ほぼ調べものだけのクエスト。
ボス戦がありそうな予感がしたけど結局自分で戦わずに終わっちゃった。

調子悪いバウギス
次のクエストも受注するだけしたけどなんかバウギスさん調子悪そう。
だというのにミフミンは何やってるんだ!!

他の写真は以下から。
写真置き場「2025/09/27」

highlight.js

SHJS→highlight.jsの置き換えの件、作業終わってる分はアップしました。
ついでに一部のページは文面も微修正。

アンパンマンDBとドラゴンクエスト10とSHJS

アンパンマンDB(記事更新)

来週の放送情報。
ついにばいきんまんがブラッ…誰!?

ドラゴンクエスト10(おきがえリポちゃん)

コウモリドレスセット
おきがえリポちゃん ~ コウモリドレス ~ (2025/9/24)|目覚めし冒険者の広場
今月の貸衣装。
コウモリって名前はつくけどコウモリっぽさはあまりない落ち着いたドレス。

コウモリドレスセット
ちょっと肩が出る構造になってるから肩幅の広いオーガとかだとセクシーに着こなせるのかも。

コウモリドレスセット
冷静に考えたらこの帽子どうなってんだ?

SHJS

古いシンタックスハイライト消したって言ってたけど、SHJSがまだ残ってた!
こっちはまだ使われているページが残っている割に、まともに動作しているページが少ないので、現役のページに合わせてhighlight.jsの最新版に置き換えていきます。

アンパンマンDBとhighlight.js

アンパンマンDB(記事更新)

劇場版BGM追加。
ずっとBGMばっか続くのもなんだし、歌もちょっと探してみようかな。
既存曲のバリエーションは結構いっぱいあるはず。

highlight.js

シンタックスハイライトのライブラリとして昔はhighlight.jsのバージョン9を使っていたんですが、ずいぶん前にバージョン11を使い始めて、旧バージョンは使わなくなっていました。
が、旧バージョンを使っていないという確証が得られなかったため、長らく両バージョンが残ったままでした。
この度、古いバージョンがもう使われていないことが確認できたので、無事削除できました。

シェアボタン

ずっと前に、あれこれ増やしたいかもとか無責任に言い放っていましたが、やめにしました。
単に増やすばかりでなく、訪問者各々が自分の使うサービスを設定して便利にできたらいいなーとか、サーバー側で処理するのではなくJavaScriptを使ってローカルだけで設定が完結するようにできたらいいなーとかも思っていましたが、それもやめです。

いわゆる SNS シェアボタンを何年かぶりに復活させたので 2025 年 1 月時点の実装メモを残しておきます / JeffreyFrancesco.org
こういう記事もあるし、あんまり増やしたり多機能にしちゃったりしたらお手軽感が損なわれちゃうかなーってところです。
この記事との違いは、PocketをなくしてLINEを入れているところですね。
Pocketは、サービス終了で、入れる意味がないからですね。
LINEは、個人間の共有である都合上、1回のシェアによる流入は基本的に1アクセスで、ページビュー目的では効率的とは言えませんが、入れています。
うちのサイトは割とLINEでシェアされてるっぽいので、訪問者がやりたいことに寄り添うべきと考えました。
共有と保存を分けなかったのは、たんに分けるほど数が多くないからです。

Navigator: share() メソッド - Web API | MDN
サイト側のシェア機能を呼び出すのではなく、デバイス側のシェア機能、つまり訪問者それぞれが自分でインストールしたアプリにシェアできる機能。
これは今のところ入れていないのですが、面倒な設定が不要で、シンプルさを保ったまま自由度が圧倒的に上がるので、これぐらいは入れてもいいかもしれませんね。

ドラゴンクエスト10とアンパンマンDBとNode.js

ドラゴンクエスト10(ァォィョッュ)

海上に浮かぶ夢幻郷
夢幻郷2回目!
実は時間になっても見えなくて、当てずっぽうでパシャパシャやってたんですが、見えてない写真で成功扱いになってしまいました。
これは成功後ちょっと待って見えるようになったから改めて取り直したやつ。
見えずに成功したやつは残っていません。

アンパンマンDB(記事更新)

来週の放送情報。
例年よりちょっと遅くなりましたが、無事映画のテレビ放送となりました。

Node.js

うちのサイトの開発環境では、Node.jsを使っています。
だいぶ古くなってきたんで、新調したいと思うじゃないですか!
バージョン一気に上げすぎると普通どこかしらエラーが起きて動かないじゃないですか!!
検証必要じゃないですか!!!

しました。
何もエラー起きませんでした。
生成された成果物もまったくもって問題なしです。
こんなことってある!?

アンパンマンDBとドラゴンクエスト10とWindow: message イベント

アンパンマンDB(記事更新)

来週の放送情報。
夏にタンポポ…?
いやまだ5月か。

ドラゴンクエスト10(おきがえリポちゃん)

おきがえリポちゃん ~ 闇の大魔王ローブ ~
おきがえリポちゃん ~ 闇の大魔王ローブ ~ (2025/5/21)|目覚めし冒険者の広場
今月の貸衣装。
ゾーマのようでゾーマじゃない、ちょっとゾーマっぽい衣装です。
せっかくのゾーマイベント中なので、アレフガルドで着てみました。
ゾーマ倒す前は強制的に勇者の服に着替えさせられるので、本物ゾーマとのツーショットは無理でしたが。

他の写真は以下から。
写真置き場「2025/05/23」

Window: message イベント(Today I Learned)

Window: message イベント - Web API | MDN
GitHub CopilotのエージェントモードにJavaScript生成を任せてみたら出てきたのがこのイベント。
オブジェクト間でメッセージを授受するのに使うやつです。
そんなに込み入ってないプログラムでも便利に使えたりするんだなぁという知見。

NVM for Windowsとドラゴンクエスト10

NVM for Windows(Node.js)

coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.
Node.jsのバージョン管理とかしんどいので、切り替えツール入れてみることにしました。
今あるNode.js用のプログラム、かつて動いていたバージョンで本来の動きを確認しつつ、新しい環境用に作り直したいんですよね。

ドラゴンクエスト10(ミフミン)

  • クエスト「夜の神殿に眠れ/ふたりの未来」をクリアした!

今度の今度の今度こそ!クリアしました!!!!

(ボスネタバレ)

ムーンライトクロス
即死技を防いだら矢継ぎ早に次の即死技畳みかけてきたぞ!
死に覚えゲーみたいなことするんだったらバトル前のムービーはもっと短くしておいてほしかったな。

デイブレイカー
即死技に順次対応していったら必殺チャージしたのでそれでフィニッシュ。
溜め長い割に技自体のモーションは短いので放った瞬間の写真は撮れず。

物語の結末は、おおむね当初の予想通り。
リィンの名前を見たときから薄々感じてたんですよね。

壁かけ夜の神殿の絵
クリア後ミモリーに再度話しかけたら家具貰えたので飾ってみました。
後ろにある絵がそれです。
手前の賢者様の像は別のイベントでもらったものなので、今回のクエスト報酬とは無関係です。

アンパンマンDBとドラゴンクエスト10とNode.js

アンパンマンDB(記事更新)

コラムから転記。
情けないアンパンマンですな。

ドラゴンクエスト10(ァォィョッュ)

強ボス。
普段は書かないけどァォィョッュにとっては強敵でありますからして。

(ネタバレでありますからして)

魔女グレイツェル強

  • 【強モード】魔女グレイツェル強をはじめて倒した!

他の二人はずっと前から楽勝だったから、ァォィョッュでも行けるだろうと踏んで挑戦。
このボス、次々と増援を呼ぶタイプだから、サポート仲間で一気に片を付けられる他の二人では簡単だったんですな。
サポートをつけず、多くても仲間モンスター+幻魔の3人体制にしかできないァォィョッュだと、どんどん仲間を呼ばれててんやわんや!
敵の一撃もァォィョッュからすると重いし、状態異常耐性も必要なのを盛れてないから、もう誘われてダンスフィーバーです。
手持ちの装備でできる限り呪文耐性を盛って、敵呼ぶやつを優先的に攻撃し、それでもひやひやする場面が多々ありました。
これだとバージョン7.2の強ボス組も厳しそうだな…。

他の写真は以下から。ついでに倒されたラズバーンも。
写真置き場「2024/12/02」

Node.js

Node.js — Run JavaScript Everywhere
Node.jsのバージョン、最新版が23、LTS(長期サポート)が22。
昔アップデートしたときは13だったから、ずいぶん進みましたな。
またJavaScriptを使ってやりたいことができてきたので、この機会にアップデートしておきたいですね。
たまにしか使わないから、サポート短い最新版よりは、LTSの22のほうがいいかな。

サイトの近況とサマルトリア王子同盟とYarn

サイトの近況

最近、リファラを独自に解析した検索フレーズ一覧が、URLだらけになってきました。
詳しく調べてみたところ、「https://www.google.com/url?q=https://tgws.plus/anpandb/tekkanokomakichan&~」みたいな、検索のURLと似たパラメータを持つリダイレクト用のURLを誤認しているようでした。
最近はGoogleでも他の検索サイトでも、プライバシーのため本来のリファラを出さなくなったので、リファラを解析しても、間に挟んだ何の情報もないページしかわからなくなったんですね。
リファラ自体あまり来なくなったとはいえ、一応リダイレクトは除外するように対応しておこうかな…。

アキタラヤメル「サマルトリア王子同盟」

エラーログに微妙な警告が残っていたので対応しているのですが、維持し続ける必要あるのかなって思っています。
参加者は昔来てくれた3名だけだし、ファン活動で繋がりたいなら昔みたいな同盟サイトに頼らず各種SNSでやればいいし、むしろうちのサイトに記録が残るのはある種のデジタルタトゥーなのでは?と思ったりもします。

Yarn(Today I Learned)

Home | Yarn - Package Manager
JavaScript向けのパッケージ管理システム。
私はnpmしか使ったことなかったですね…。
そもそもあんまり大々的にJavaScriptを使いたい気持ちもないし、一応知識として知っておくだけ知っておこうかなというところ。

ドラゴンクエスト10と更新履歴とSolidJS

ドラゴンクエスト10(ミフミン)

お宝集めて大航海!「幻の海トラシュカ2022」 (2022/7/5)|目覚めし冒険者の広場
一日遅れですが、トラシュカ始めました。
まずはミフミンから始めたんですが…

幻の海トラシュカ2022
なんだ…

幻の海トラシュカ2022
なんだ…

幻の海トラシュカ2022
なんなんだ!!!

幻の海トラシュカ2022
オールスターどころか無法地帯じゃないか!

お宝は、いつもの宝石やら魚やらがらくたやらに加えて、キャラクターの像が落ちてきます。
通常の像はもちろんのこと、ドット絵像、ちびキャラ像など、何でもあり。

邪魔してくるモンスターたちも、いつものばくだん岩系統はもちろんのこと、例年だと高々一種類しか出なかった特殊仕様のモンスターが、遠慮なく続々降ってきます。
死角となる海面から飛び出してくるサメ、地面を揺らして足止めしてくるモアイ、視覚妨害してくるイカ、他にも何かいた気がするぞ。

お宝の方は、何が出てこようとも、出てきたものを取るだけなのですが、モンスターの方は予測不能だから対応しきれなくて、やるたびにスコアが乱高下します。
今回はよくできた………あれえええええ???…みたいなことになっちゃうことも。

景品とかの画像は一覧から見てください。
こっちはこっちでツッコミどころはあるものの、本編が突き抜けているので相対的に控えめです。
写真置き場「2022/07/14」 | ミフミンのDQ10メモ

更新履歴

根本的な作り直しの続き。
現行データからの移行ツールを作りました。
これで実際の運用に近い形で画面を見ながら開発していけます。
テストデータを使ったテストは随時行っていますが、やはり最終的には本物のデータが一番わかりやすいですからね。
もちろん、本稼働開始のときにも使えるツールなのです。

SolidJS(Today I Learned)

リアクティブJavascriptライブラリ
Reactの代わりに使えそうなJavaScriptのフロントエンドフレームワーク「SolidJS」。
別にReactで不満を感じていたわけではないのですが、フレームワーク自体のコードが小さい、それどころかビルドすると消えてなくなるというのはすごいですね。
Anpanatorあたり書き換えてもいいのかなとか思ったり思わなかったり。

Haxe

Haxe - The Cross-platform Toolkit
Haxeについて調べてました。
複数のプログラミング言語のソースコードにコンパイルする言語です。
以前から興味出していたんですが、日記の方には書いてませんでした。
私はC#とPHPを中心的に使っているんですが、Webのフロントエンド向けにはJavaScriptがいいとか、やりたいことに対して使うべき言語がてんでバラバラなんですね。
Windows向けとWeb向けに同じものを取り扱う別のシステムを作ろうとしたら、同じものを違う方法で書き直すことになるわけで、二度手間になるわけです。
この共通ロジックをHaxeで書けば、C#とPHP、そしてJavaScriptにコンパイルして、同じものをいろんな場所で使えるようになるはずなのです。

ワンタイムメッセージ

一回だけメッセージ表示するやつをさらにもっといい感じにした。
history.replaceStateを使ってメッセージIDが表面化しないように。

Node.js

めちゃくちゃ久しぶりにアップデート。
5→13に上がりました。
そして、各種モジュールもアップデートして、Node.jsでトランスパイルしているAnpanatorのコードもリビルドしました。
アップデートによる仕様変更に伴うエラーもありましたが、そこはちゃんと直して、最終的にAnpanatorのコードがほんのちょっと小さくなりました。

Selenium

JavaScriptで一瞬になりました。リンクのURL全抽出です。
for(var p=document.getElementsByTagName('a'),q=[],i=0;i<p.length;i++)q.push(p[i].href);return q

あろ、関係ないけど、サーバー契約更新してきました。

日記

日記にもAjaxによるカテゴリ提案実装。

んで、カテゴリが扱いやすくなったので、カテゴリを細分化して大幅に増やしてみました。
ゲームはシリーズごとに分けるのではなく、1作品1カテゴリで、自作ソフトも、開発中止を一つにまとめたりはせず、各々のソフトにカテゴリを設定。
細分化したのにはもう一つ野望があって、ゲーム記からプレイ日記にリンクしたいなって思ったんですね。例えば、「ドラクエ」でまとまっていたら、ドラクエ3の日記を見たいのにドラクエ10の話ばっかりしてる、なんてことになりかねないわけです。細分化すれば、そんな悩みともさらばです。

ただ、全部の日記に一気に細分化したカテゴリを付けるなんて無茶なわけです。
ということで、まだカテゴリを付け直していない日記を見つけるために、更新日の古い日記を探す機能を付けました。ありし日の日記へどうぞ。なお、普通の人が見て楽しくなる要素はないと思うので、上のナビメニューに入れていません。
それにしても、あの日の私は…懐かしくも痛々しい…。

アンパンマンDB

Ajaxによるカテゴリ提案実装。
キャラクターもエピソードもみんなみんな個性豊かで、意外な取り合わせが多かったりするので、今まで一緒になる傾向が強かったからと言って今回も一緒になるとは限らないというのが多くて、多少参考にはなるけど間違いもだいぶ多いといった印象でした。
これでは自動で動かすとうるさくなりすぎます。なので、手動サジェストだけにしました。
また、提案の材料にするカテゴリが多いと、提案されるカテゴリも多くなってしまうので、関連性が一定以上高いだけでなく、数が増えたら上から一定個数までで提案を打ち切るようにしました。

DuoCode

C#をブラウザ上で動くJavaScriptにコンパイルするDuoCodeなんてのを見つけました。
JavaScriptではあまり大きなものを作る気は起きないし、もともとC#で作っていたものをWebアプリ化するのには便利そうですね。

Node.js

Reactのコード自動コンパイルのためNode.js入れてみました。
自動とはいっても、ファイルを常時監視しているわけではなく、コマンド一つで実行される形式なので、全自動ではなく半自動ですね。

次>