2025年12月20日　活動日誌

運営

概要

2025/12/20(日）の活動日誌です。

作業時間の割合をプロジェクト毎にまとめて円グラフにしてみました。
分かりやすいんかこれは…？

開発作業

クルクルシューティング

操作時のSEを追加するために、魔王魂様のSEを探して良さそうなものをダウンロード。
また、画面上に表示するアイコンをGoogle Fontsから探してダウンロードしてます。
ゲーム開発に必要な素材を集めるのも開発作業の大切な一貫です。

What Title

気楽に作れて遊べそうなアプリを企画中です。

こんな感じに、一番上にタイトル、その下に画像が並んで表示されています。
タイトルの画像を当てていくゲームとなります。

お正月も近いのでカルタゲームでも作ろうかなと思ったのが発端です。
折角なのでお正月までには動く形にしてみたい。

開発環境としてはAngular+Node.js APIを想定。
Angularでの開発の練習でもあります。

開発環境の構築

仕事ではAngularを使ったことがありますが、一から構築することはあまりなかったので
再度、勉強しなおしながら進めています。

VSCodeは既にインストール済みなので、VSCodeを使用しながら作業を進めます。

まずは、AngularをインストールするためにNode.jsをローカル環境にダウンロード&インストール。
一般的にNode.jsはサーバーサイドで使われる物という認識らしく、
なんでクライアントサイドの開発環境であるAngularに必要になるのか
疑問に思う人がいるみたいです。
自分は反対にAngularからNode.jsに出会ったので、Node.jsがサーバーサイドで
使えるんだと驚きました。
Node.jsがAngularのインストールに必要なのは、Angularをインストールする際の
パッケージマネージャ（npm)を使用するために必要らしい。
詳しくは、こちらのサイト様にて解説されています。

とりあえず、難しい仕組みのことはほっといて、作業を進めて行きます。
コマンドプロンプトで以下のコマンドを実行し、Nodeがインストールされ、npmコマンドが
実行できること確認します。

node -v
npm -v

実行できるのが確認できたら、Angular CLI（コマンドラインツール）をインストール。

npm install -g @angular/cli

以下のコマンドでCLIがインストールされたことを確認。

ng version

仕事で使ってた時もそうだけど、nodeやらnpmやらngやらコマンドがいっぱいで
何が何をやっているのかさっぱりです。

簡単に説明すると以下のようです。

  • node → JavaScriptを動かすエンジン本体
  • npm → 必要な部品（ライブラリ）をダウンロード・管理するツール
  • ng → Angularプロジェクトを簡単に作ったり、部品を追加したり、起動したりする便利ツール

さて、次に実際にアプリを開発するための準備をおこないます。
プロジェクトを格納するフォルダをVSCodeで開き、ターミナルで以下のコマンドを実行

ng new [アプリ名]

これを実行することで必要なファイルが自動的に作成されます。

のはずが、なぜかVSCodeのngコマンドを認識してくれません。
ターミナルを開きなおしても認識せず。
コマンドプロンプトでは動いたのでパス設定は出来ているはずなのに、おかしいな…？

と色々と調べてみてたら、ターミナルのデフォルトがコマンドプロンプトでは
なくて、powershellになっているのが原因でした。
ターミナルって色々と変えられたんだね。

ターミナルの＋ボタンの横にある下矢印からメニューを開いて、「既定プロファイルの選択」
でコマンドプロンプトを選択すれば、次からターミナルをコマンドプロンプトにすることが
できます。

なお、コマンドプロンプトにしてもngが実行できなかったですが
これはVSCodeを全て閉じて起動しなおしたら動きました。
インストール作業後にアプリの再起動をするのは基本ですね。

さて、無事にngコマンドが使えるようになり、アプリの基礎環境の構築ができました。

ファイルとフォルダがたくさん作成されました。
基本的に触るのはsrc内のファイルだけで、
他のファイルは開発上必要な環境設定とかになります。

あとは、以下のコマンドでAngularを実行させてサンプルページを実際に表示させてみたりとか、
ソースをGitHubで管理したりとかを行いました。

ng serve

タスク管理

色々とタスク管理を触ってみましたが、結局Googleスプレッドでの管理になりそうです。
しかし、スプレッドはスプレッドでデータ挿入などで計算式が壊れてしまうことも
多々あるので注意が必要ですが…。

ドロップダウンリストのフィルタリング

作業ログを記載する際に、プロジェクトを選択するとタスク欄のドロップダウンに
プロジェクトに紐づくタスクのみを表示させたくて、色々と試行錯誤しました。

まず、よくある手法としては「名前付き範囲」を作成して
その中でプロジェクトとタスクを紐づけて管理する方法。
具体的なやり方までは把握できていませんが、
タスクを追加する度に「名前付き範囲」も修正する必要があるとのこと。

なんという二重管理！！

二重管理程イライラさせるものはありません。
イライラのせいで普段使ってない文字サイズも使ってしまいました。
眠たさもあってテンションもおかしいかもしれません（今現在、朝の4時）

ということで、構築にどんだけ時間をかけてもいいので
実運用ではストレスなく簡潔に出来るようにしていきました。
（そこまでこだわるならVBAとか専用ツールを作れば良いのかもしれませんが。）

で、実装したのがこちら

まず最初に、ワーク用のシートを作成して、そこに作業ログのプロジェクトに紐づく
タスクをFILTER関数でフィルタリングして、取得したデータを展開します。
そのままだと、縦向きデータが展開されてしまうのでTRANSPOSEで横向きに変えています。
この一つのセルの関数だけで周りにデータが展開される仕様が、何とも気持ちが悪く慣れません。
しかし、便利なので使っていきます。

そして、あとは作業ログのタスク欄に、ワーク用のシートを対象行を条件にしたデータの入力規則を追加すれば、プロジェクトに紐づくタスクのみが選択可能になります。
プロジェクトを変えればワーク用のシートの内容も変わり、タスク欄のドロップリストの内容も自動的に変わります。
既にタスク欄に入力がある状態でプロジェクトを変えると、入力異常状態にはなりますが
エラーで見えなくなったりすることはありません。

作業時間の円グラフ

さて、データ入力も簡単になってきたので、次は入力したデータで作業の分析を行っていきます。

まずは指定した日付の作業時間をプロジェクト毎に集計します。

サマリー用シートに対象日を入力するエリアを作成

次に、邪魔にならない下側ぐらいの場所で以下のクエリ関数を実行。
作業ログのA列（日付）が対象日のデータを対象にB列（プロジェクト）毎にD列（作業時間）を合計するクエリですね。

=QUERY('作業ログ'!A:D, "SELECT B, SUM(D) WHERE A = date '"&TEXT(A2,"yyyy-mm-dd")&"' GROUP BY B LABEL

これで、表示するデータはできましたので
これをグラフ表示のデータとして設定すればOKです。
必要に応じて凡例とか見え方を変えていきます。

私用が多いですね。土曜日なのでこんなものかもしれません。
ずっとサボっているので土曜日でもちゃんと作業しないといけませんが。
作業としては管理作業が多いですね。
スプレッドシートの設定とか移行に色々と手間取りました。
今後の管理作業は効率化されて時間は減るのではないかと思います。

ってな感じの分析が出来れば良いなと考えています。

明日の予定

明日は日曜日でスポーツ教室（タスクとかにチラチラでているスポーツチャンバラ）があるので
そこまで作業は出来ないかもです。
GoogleAdsensの審査は土日ないらしいので、くるしゅ～のSE関係を追加したりWhat Titleを進めたいと思います。

コメント

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