2025年12月27日 活動日誌

概要

What Title

現状、こんな感じになっています！
問題用のイラストも描いたりしています。
とりあえず、お正月も近いので「動物（イラスト）」で十二支の動物を描いて出題したいと思います。

開発云々

現在、XのAIであるGrokに手伝ってもらいながら作業を進めていますが
開発で使用している「Angular」はバージョンによって仕様が大きく変わっており、
インターネット上の解説記事もバージョンによってはそのままでは出来ないことも
多々発生しています。
そのため、Grokの回答も本当に正しいのかを見極めたり、実際のガイドを調べたりしながら
開発を行っています。
将来的には分からないですが、まだまだAIだけに頼って開発するのは難しそう。
それでも、めんどくさいコーディングを教えてくれたりするので一人で調べながら開発するより格段に簡単になっています。

例えば、配列をシャッフルする関数とかも、ポンとだしてくれます。

  private shuffleArray<T>(array: T[]): T[] {
    const arr = [...array];  // 必ずコピー！
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
  }

まぁ、他にも方法はありそうですが、シャッフルされているのをイメージしやすい処理。
業務用アプリではシャッフルなんかほとんどしない（基本的には何かソートして表示）ので
シャッフル関数は凄く新鮮な気持ちになりました。

開発中に詰まったりしたところとしては

経過時間や正解時の描画が切り替わらない。
Angularでは画面上に表示している変数の値が変われば、その変化を検知して自動に画面の表示も切り替わる機能があります。
しかし、何らかの理由で変更を検知できないケースがあります。
対処方法としては、ChangeDetectorRef を注入して、手動で変更検知をトリガーさせてあげました。
画像が表示できない
画像を格納するようディレクトリを作成して画像を格納したのですが、その画像を表示することができませんでした。普通のWebサイトではそのディレクトリとファイル名を指定してあげれば、画面上に画像を表示でき、以前はAngularでも出来ていたのですが、現在は出来なくなっています。
最新のAngularでは公開用のフォルダ「public」に画像などのリソースファイルを格納しておく必要があるみたいです。
調べてもイマイチに分かりませんでしたが、アプリを自動生成した際に「public」フォルダに格納されていたアイコンが参照できていたので気づきました。
サブフォルダへの公開
Angularで作ったアプリをWeb上に公開するには色々と方法がありますが、今回は自分のWebサイトに公開するため、Angularをビルドして作られたファイル一式をアップロードする方法を用いました。
Angularのアプリは初期設定ではルート直下で動くようになっています。
（https://www.lab-apps-forest.com/の直下で動く感じになる。）
しかし、既にサイトが構築されており、ルート直下はサイトのトップページのindex.htmlが格納されてたりするため、アプリはサブフォルダに格納してそこで動くようにしたいです。
(/apps/what-titleに格納して、そこで動かしたい。）
そのためには、ビルドする際に「–base-href apps/what-title/」のようにベースとなるパスを指定してあげる必要があります。
本来はそれだけで問題なかったのですが、何故か「index.html」ファイルが作成されず「index.csr.html」のみが出力されてしまい、原因を調べたりビルド用の設定を変えたりしたのですが、結局原因が分からないまま元の設定で「index.html」を作成できるようになりました。
1時間ぐらい悩んでたのに…。

こんな感じに四苦八苦しながら開発を進めて、なんとかWeb上に公開して動作確認をすることができました。スマホでも特に問題なく動きそうです。
ちょっとバグが何点かあったり、問題数が少ないので、本公開はしばらくお待ちください。

明日の作業

「What Tilte」のバグを修正し、問題用のイラストを作成していきます。
可能であればWebサイトにアプリ用ページを作成して、テストプレイをしてもらえるようにしたいです。

※本サイトは個人で運営しているので、テストプレイ大歓迎です。
　何か気になった点とか問題、要望がありましたらブログのコメントや問い合わせフォームなどで気楽にご連絡下さい。