金曜日, 5月 16, 2025
ホーム自動化(16) テンプレートと画像処理で開発を加速! - 開発ログ@2025/05/15(木)shoderico.cinematheque

(16) テンプレートと画像処理で開発を加速! – 開発ログ@2025/05/15(木)shoderico.cinematheque

🧠 概要:

概要

この記事では、開発者がGitHubのREADMEを改善し、Visual Studioのプロジェクトテンプレート自動化や画像処理スクリプトの改良に取り組んだ一日を記録しています。視認性や再利用性を高めることを目的として、コードの整理や自動化を進めた成果が強調されています。

要約の箇条書き

  • READMEのブラッシュアップ:

    • GitHubのREADMEを改善し、分かりやすく整理。
    • コードの概要やセットアップ手順を箇条書きで視認性を向上。
  • Visual Studioのテンプレート自動化:

    • プロジェクトテンプレートのコマンドラインエクスポート方法を模索。
    • PowerShellスクリプトを使用して、不要なフォルダを除外し、テンプレートをクリーンに保つ。
  • アイテムテンプレートのカスタマイズ:

    • settings.jsonを自動生成する方法を学び、プロジェクトにカスタム処理を追加。
  • MAUIアプリのコメント翻訳:

    • プロジェクト内のコメントを英語に翻訳し、ドキュメントの品質向上。
  • 画像処理スクリプトの改良:

    • Markdownから画像を抽出し、グリッドに並べるスクリプトを改善。
    • 画像間の隙間調整で、見た目をプロの仕上がりに。
  • 今後の展望:
    • テンプレート自動化スクリプトを他のプロジェクトタイプに適用する計画。
    • READMEの改善を他のリポジトリにも展開する予定。

(16) テンプレートと画像処理で開発を加速! - 開発ログ@2025/05/15(木)shoderico.cinematheque

GitHubのREADMEをピカピカにしたり、Visual Studioのテンプレートを自動化したり、画像処理スクリプトで遊んだり…めっちゃ濃い一日だったよ! コードも画像もキレイに整って、テンション爆上がり!ぜひ読んでみてね~!

GitHubのREADMEをブラッシュアップ!

GitHubのREADMEを分かりやすく更新した話と、Visual Studioのテンプレート作成を効率化する試みについて振り返るよ。どちらも開発者として「見やすさ」と「再利用性」を追求した一日だった!

READMEを自分仕様にカスタマイズ

今日のスタートは、GitHubのREADMEを改良する作業から!
ポストにも書いたけど、「後から自分で見ても分かるようにしておくのは大事だよね!」って気持ちで、READMEの内容をガッツリ見直したよ。READMEって、プロジェクトの顔みたいなものだから、初めて見る人にも分かりやすく、なおかつ自分が後で読み返しても「あ、これこれ!」ってすぐ思い出せるようにしたかったんだ。

具体的には、コードの概要やセットアップ手順を簡潔に整理して、箇条書きを多用して視認性をアップ。図やサンプルコードも追加して、見た目もちょっとオシャレにしてみた。こういう作業って、つい後回しにしがちだけど、やってみると「あ、めっちゃスッキリした!」って達成感がすごいんだよね。

自分以外にも、チームメンバーやオープンソースのコントリビューターが読むことを考えると、丁寧に書く価値は絶対あると思う!

テンプレートのエクスポートを自動化したい!

次にハマったのが、Visual Studioのプロジェクトテンプレートをコマンドラインでエクスポートする方法について。ポストには出てこなかったけど、Grokとのやり取りで「メニュー > プロジェクト > テンプレートのエクスポート」をコマンドラインでできないか模索したんだ。結果、標準では直接実行できないことが分かったけど、PowerShellスクリプトで代替案を考える方向にシフト!

Grokが提案してくれたのは、プロジェクトフォルダをZIP化して`.vstemplate`ファイルを手動で作り、`bin`や`obj`フォルダを除外するスクリプト。最初は「めんどくさそう…」と思ったけど、やってみるとこれがめっちゃ便利!特に、`bin`や`obj`を除外する部分は、テンプレートをクリーンに保つために必須だったから、Grokの細かい配慮に感謝。スクリプトをカスタマイズして、スクリプトと同じフォルダにある`.vstemplate`やアイコンファイル(`__TemplateIcon.ico`)もコピーするようにしたんだ。

この自動化のおかげで、テンプレート作成が一気に効率化したよ!

Visual Studioテンプレートのカスタマイズに挑戦

テンプレート関連の作業が楽しすぎて、いろんなカスタマイズに手を出したよ。アイテムテンプレートで別のファイルに書き込む方法や、MAUIアプリのテンプレートコメントの翻訳まで、Grokと一緒に深掘りしたんだ!

アイテムテンプレートでファイル書き込み

Grokとのチャットで、Visual Studioのアイテムテンプレートを使って、別のファイルに書き込む方法を質問したんだ。たとえば、クラスファイルを作るついでに`settings.json`みたいなファイルを自動生成できたら便利じゃん?って思って。Grokの回答はバッチリで、`IWizard`インターフェースを使ったカスタムウィザードを提案してくれた。

コード例では、`ProjectItemFinishedGenerating`メソッドでプロジェクトフォルダに`settings.json`を書き込むサンプルが登場。`System.IO`でファイル操作するシンプルな方法だったけど、実際やってみると「これ、めっちゃ可能性広がるじゃん!」って興奮したよ。ウィザードをGACに登録したり、テンプレートに紐づける手順も丁寧に教えてもらったから、ちょっとハードル高そうだったけど挑戦する気満々になった。

結局、この方法を使えば、テンプレート生成時にいろんなカスタム処理を追加できそうで、将来のプロジェクトで絶対活用したい!

MAUIアプリのテンプレートコメントを英語化

MAUIアプリのテンプレートを作ってる時に、コメントを英語で書きたいなって思って、Grokに翻訳をお願いしたんだ。

たとえば、「この関数は、PageのOnAppearingから呼ばれます」を「This function is called from the Page’s OnAppearing.」に変換してもらったり、「parameter はNULLの場合があります」を「The parameter may be NULL.」にしてもらったり。全部で7つのコメントを翻訳してもらったんだけど、どれも自然な英語で、ドキュメントの品質がグッと上がった感じ!

特に、「MauiProgram.cs でViewModelとPageをサービスに登録することを忘れないで下さい」みたいな長めのコメントも、「Don’t forget to register the ViewModel and Page with the service in MauiProgram.cs.」ってスッキリ翻訳してくれて感動。こういう細かいところまで丁寧にやっておくと、後で海外の開発者とコラボする時にも役立つよね。

Grokの翻訳力、ほんと頼りになる!

画像処理スクリプトでクリエイティブに

テンプレートだけじゃなく、画像処理スクリプトの改良にも時間を費やしたよ。Markdownから画像を抽出して、2×2グリッドに並べるスクリプトをGrokと一緒にブラッシュアップしたんだ!

画像グリッドの配置を完璧に

この日のハイライトは、Markdownから画像URLとキャプションを抽出して、2×2グリッド(A|B / C|D)や1×2グリッド(A|B)に並べるPythonスクリプトの改良。最初は中央寄せがうまくいかなくて、Grokに「AとBの高さを揃えて、CとDも揃えて、AとCの幅を合わせて、BとDも合わせて!」って細かくリクエストしたんだ。Grokの対応が神がかってて、画像の高さと幅を比較して、小さい方を大きい方に中央寄せするロジックをバッチリ実装してくれた。

たとえば、AとBの高さが違う場合、小さい方が上下中央に配置されるように`cell_y += (larger_height – smaller_height) // 2`で調整。AとCの幅も同じく`cell_x += (larger_width – smaller_width) // 2`で左右中央寄せ。試行錯誤の末、すべての画像がピシッと整列して、めっちゃプロっぽい仕上がりに!このスクリプト、ポートフォリオやプレゼン資料を作る時にめっちゃ使えそうで、テンション上がったよ!

10pxの隙間で美しく仕上げ

最後の仕上げとして、画像間に10pxの隙間を追加するリクエスト。2×2グリッドだと、AとB、CとDの間に水平で10px、AとC、BとDの間に垂直で10px入れるようにしたんだ。`grid_width`と`grid_height`の計算に`margin = 10`を追加して、配置位置も`cell_x`や`cell_y`にマージンを反映。1×2グリッドも同様に、AとBの間に10pxの水平マージンを設定。

この10pxの隙間が、画像をスッキリ見せるのにちょうどいい塩梅で、完成した画像を見た瞬間「これこれ!完璧!」って叫んじゃったよ。Grokとの細かいやり取りで、ピクセル単位の調整までこだわれたのがほんと楽しかった。こういうクリエイティブな作業って、コード書くのとはまた違ったワクワク感があるよね!

まとめ

今日は、開発の「見やすさ」と「効率化」を追求した一日だったよ。GitHubのREADMEを分かりやすく刷新したことで、プロジェクトの第一印象がグッと良くなったし、Visual Studioのテンプレート自動化スクリプトで、繰り返し作業をガッツリ削減できた。PowerShellスクリプトで`bin`や`obj`を除外したり、`.vstemplate`とアイコンをコピーする仕組みは、将来のプロジェクトでめっちゃ重宝しそう。MAUIアプリのコメント翻訳も、グローバルな視点を取り入れる良いきっかけになった。

画像処理スクリプトの改良も大きな成果!2×2グリッドの中央寄せと10pxの隙間調整で、プロ並みの仕上がりにできたのは、Grokの的確なサポートのおかげ。細かいピクセル調整やロジックの改善を一緒にやってくれて、ほんと頼もしかったよ。全体的に、コードの機能性と見た目の美しさを両立できたのが、今日の大きな収穫だった!

これから

明日以降は、今日の成果をさらに発展させたいな。テンプレート自動化スクリプトは、他のプロジェクトタイプ(たとえば、MAUIやASP.NET)にも適用できるようにカスタマイズしてみたい。`.vstemplate`の設定をもう少し凝って、テンプレート選択時のプレビュー画像とかも追加したら、もっと使いやすくなりそう。画像処理スクリプトは、もっと複雑なレイアウト(たとえば、3×3グリッド)や、キャプションのフォントカスタマイズにも挑戦してみたいな。

あと、READMEの改良は他のリポジトリにも展開して、全部のプロジェクトを「見やすい!」って状態に持っていきたい。Grokとのチャットログも、開発日記としてもっと整理して、ナレッジベースみたいにできたら最高だな。忙しい一日だったけど、明日もこの勢いでガンガン開発楽しむぞ!💪



続きをみる


Views: 0

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -

インモビ転職