create.xyzで時差チェックツールを作ってみた。

sanchess
·
公開:2024/7/19

## はじめに

グローバル化が進む現代社会において、異なる時間帯で生活する人々とのコミュニケーションは日常的になっています。そこで、私は使いやすく効率的な時差チェックツールを作ることにしました。このツールは、ウェブツール作成アプリを使用して開発し、コンパクトさ、複数都市の同時チェック、高い視認性、自動更新機能という4つの要件を満たすことを目指しました。

## 開発のきっかけ

私がこのツールを作ろうと思ったきっかけは、海外の友人や同僚とのオンラインミーティングを調整する際に感じた不便さでした。既存の時差チェックツールは、使いにくかったり、見にくかったり、一度に確認できる都市数が限られていたりと、いまひとつ満足できるものがありませんでした。

そこで、「自分で理想的なツールを作ってしまおう」と考え、create.xyzを活用して開発に着手しました。

## 開発プロセス

### 1. 要件の明確化

まず、ツールに求める要件を明確にしました:

1. コンパクトな設計 2. 複数都市の時間を一度にチェック可能 3. 高い視認性 4. 現在時刻の自動更新

### 2. ウェブツール作成アプリの選定

言うまでもなく、create.xyz一択ですね♪

### 3. デザインの構想

ユーザーインターフェースは、シンプルでありながら必要な情報をすべて表示できるよう心がけました。カスタマイズ性は皆無なので、都市の追加や削除は都度ツールの作り直しが必要となりますが、軽快な動作を重視しました。都市名、時刻を縦に並べ、一目でわかるように仕上げています。

### 4. コーディング

コーディングはAIにおまかせです。create.xyz上でも記述してくれるのですが、今回のリクエストにはうまく答えてkれな買ったので、Claude 3.5のページを開き、そこで直接コーディングを依頼しました。プロンプトは「時差チェックツールをつくりたいです。表示都市名は、東京・上海・イスタンブール・ベルリン・ニューヨークです。サマータイム導入について気をつけて製作してください。」 さすがはClaude。これだけの指示でもきっちりコードを書いてくれました。

結果をコピーしてcreate.xyzに張り付けます。追記などは必要なく、そのままで大丈夫なのが嬉しいところ。

できあがったツールはこちらです。 https://www.notion.so/Notion-tools-by-create-xyz-e6f431379028482f998983c1053d6da7?pvs=4#8689a30d39524f12a1618618e053a8f7

### 5. テストと改善

、、、まで行おうとしたのですが、出来にかなり満足したので、そのまま使っています。

## 完成したツールの特徴

### コンパクトな設計

モバイル端末でも使いやすい縦長デザインで視認性を高めています。表示アイテムが少ないので小さく運用しても崩れないのもポイント。

### 複数都市の同時チェック

東京、上海、イスタンブール、ベルリン、ニューヨークと仕事に関係する都市をすべても網羅しました。東西の位置も合わせているので見て混乱することはありません。

### 高い視認性

- 各都市の情報を色分けし、一目で識別できるようにしました。 - フォントサイズを適切に設定し、読みやすさを重視しました。 - 日付がずれやすいニューヨークだけAMPM表示機能付き。これはClaudeが配慮してくれた機能。

### 現在時刻の自動更新

秒単位での各都市時刻の自動更新に対応。世の中、秒で動かないと。

## 今後の展望

今回開発したツールは、基本的な機能は満たしていますが、さらに改善の余地があるかもしれません。 ただ、そうなったら思いきって別アプリを作っちゃいいましょう。create.xyzならそれができます。VIVA爆速webツール開発!

## まとめ

生成AIの登場で、コーディングはお任せでできるようになりました実装もcreate.xyzならお手軽です。 今回のように、「思い立ったらすぐに作ってみる」という経験は多くのかたのクリエイティブを刺激するんじゃないでしょうか?

このプロジェクトを通じて、小さなアイデアでも、適切なツールとひらめきをつなげれば、実用的で価値のあるものを生み出せることを実感しました。令和の時代に必要なのは、知識ではなく行動です。「とりあえず、やってみる」を今日から始めてみませんか?

@sanchess
ドイツでジャーナリストやってます。