AIコーディングで開発したアナログ時計ジェネレータProを公開！ーGoogleサイトで作るグループウェア(183)ー

🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！

この記事を読んで欲しい方

企業DXや学校DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
AIの利用に悩んでいる方

①アナログ時計ジェネレータProの公開！

　みなさんこんにちは！
　本日は、すべてをClaudeでAIコーディングをして開発した、アナログ時計ジェネレータProの公開です。ただし、有料(1980円)になります。
　これまで、無料で公開してきたアナログ時計ジェネレータLiteに、多くの機能を追加しました。　
これまでのWebウィジェットの時計アプリとは、デザインのレベルで一線を画す作りになっています。
更にAIを使ったデザインも可能になっています。

Proの画面

サンプルと設定JSONファイル

　以下は無料のLiteですが、ProはLiteと比較して多くの機能追加をしています。

AnalogClockGLite

②Proの追加機能について

　ProはLiteと比較すると以下の機能を追加しています。

• 時計の文字盤を飾る内枠が追加

• フォントの種類が大幅に増加：サンセリフフォント20種類(Lite13種類）、セリフフォント17種(Lite3種)、装飾フォント15種(Lite4種)

• 材質オプションが追加：7種(Lite3種）

• 針の形状：17種(Lite4種)

• 数字パターン：8種(Lite2種)

　特に、針の形状については、イラストレータ等で作成した針のSVGファイルを、内部的にAIを使って直接針にすることが可能になったため、デザインされた時計の針を、プログラムで動く針にすることが比較的簡単にできるようになりました。（SVGカスタム）

詳しくはマニュアルを見てください。

アナログ時計ジェネレーターPro マニュアル

③サンプル時計と設定JSONファイル

　実際に動くサンプルの時計を再現する設定JSONファイルがダウンロードできます。
　設定JSONをダウンロードして、コード生成タブ＞設定読込ボタンで読み込むと、サンプルの時計が再現できます。
　設定を自分の好きなように調整したあと、コード生成タブ＞コード生成ボタンで、Webに貼り付けられるHTMLコードが出力されます。
　また、設定保存ボタンは、自分で作った時計の設定を保存して、読み込むことで、ブラウザーの画面上で何回でも再現させることができます。

高級時計を参考にした9種類のデザインサンプル

たとえば、ブルガリ風サンプル時計のJSONをダウンロードして、設定読込を行うと、以下のように表示され、設定の変更が可能になります。

ブルガリ風

④アナログ時計ジェネレータProを利用する

　ここから先は、有料になります。購入した方は、アナログ時計ジェネレータProがすぐに利用できるようになります。