【Create.xyz体験】PNG画像変換ウェブアプリを作ってみた

2024年5月10日 11:45

最近話題のno-codeプラットフォーム「create.xyz」を活用し、誰でも簡単に自分だけのウェブアプリを作成することができます。

この記事では、私が実際に開発した3つのアプリケーション例を紹介し、このツールについて考察します。

create.xyzとは？

「create.xyz」は、プログラミングの知識がなくても、自然言語で指示を入力するだけで、様々なウェブアプリやサービスを驚くほど短時間で作成できるno-code開発プラットフォームです。AIを活用し、データベースとの連携、画像生成、ウェブスクレイピング、外部APIとの組み合わせなど、多種多様な機能を柔軟に組み合わせることができます。

create.xyzの活用例や使い方については、ChatGPT研究所様の記事が参考になります。今回は、以下の記事を参考に、実際にウェブアプリケーション開発を体験し、ツールを考察してみるという立場をとります。

create.xyzの使い方について、わかりやすく説明されています。

様々な用例がまとめられており、create.xyzでどのようなことができるのかイメージしやすくなっています。

3つのアプリケーション

一、.PNG-Converter

.PNG-Converterは、任意の画像をPNG形式に変換できるシンプルなWebアプリケーションです。使い方は非常にシンプルで、変換したい画像をドラッグ＆ドロップし、ダウンロードボタンを押すだけの2ステップで変換が完了します。他の画像形式への変換オプションはありませんが、素早くPNG形式に変換することに特化しています。

モバイル端末での使用では、画像を選択する手順が増えますが、出先でpng画像形式に困ることはもうありません。また、後述するJPG形式に変換するバージョンのアプリケーションも用意されているので、必要に応じて使い分けることができます。

二、.JPG-Converter

.JPG-Converterは、.PNG-Converterと同様に、任意の画像をJPG形式に変換できるシンプルなWebアプリケーションです。使い方も.PNG-Converterと同じく、変換したい画像をドラッグ＆ドロップし、ダウンロードボタンを押すだけの2ステップで変換が完了します。

三、512x512.png-converter

512x512.png-converterは、アップロードした画像を512x512ピクセルの正方形に切り抜き、PNG形式で出力するWebアプリケーションです。アイコンやサムネイルなど、特定のサイズの画像が必要な場面で役立ちます。使い方は他の2つのコンバーターと同様で、画像をドラッグ＆ドロップし、ダウンロードボタンを押すだけです。

.PNG-Converter の開発

ご察しのように、今回開発したアプリケーションはほとんど同じものです。実際に私が最初に作ったのは1番最初の.PNG-Converterであり、その他の2つは、シンプルな派生として作りました。

具体的に言えば、作成したときの仕様書の png という部分を jpg という文字にシンプルに置換するだけで、違うアプリケーションが仕上がります。そして、3つ目の512x512.png-converterですが、これは画像を512x512の正方形に切り取り、さらに円形にするという仕様を加えただけです。というわけなので、この記事では最初の開発について説明していきます。

ステップ

まずは作成イメージを考えます（私は、先程のchatgpt研究所の事例を参考にAIアシスタントと考えました）
そして、そのイメージをPrompt Professor of Create.xyz というGPTに渡します。
このGPTは、このツールの仕様作成に特化したアシスタントで、そのままコピーして貼り付け可能なレベルの内容が完成します。
その内容をツールに貼り付け、システムを構築します。
仕様を適当に整えて完成です。

最終的な仕様

ユーザーインターフェース仕様：

1. ドラッグ＆ドロップエリア:
   - 初期インストラクション: 
PC画面の場合：【.png画像コンバータ】このエリアに画像をドラッグ＆ドロップしてください。画像形式をpngに変換します。
モバイル画面の場合：【.png画像コンバータ】このエリアにタップしてください。画像を貼り付けることで、画像形式をpngに変換します。

   - 機能: ユーザーが画像をドラッグ＆ドロップすると、即座に画像変換プロセスが開始される。
   - UI: 画面の上部に画像を表示。水平方向に中央寄せ。
   - 追加機能: ドラッグ＆ドロップされた画像は変換プロセス中および変換後も常に画面に表示され続ける。
   - モバイル対応: モバイルデバイスでの使用を想定し、タップ＆アップロード機能を提供。画面全体がアップロードエリアとして機能します。

2. ダウンロードボタン:
   - 機能: 画像変換が開始された際にボタンが黄色になり、変換完了後に緑色に変わります。ユーザーが緑色のボタンを押すと画像がダウンロードされる。
   - UI: ボタンは画像表示画面の直下に配置。
   - ボタン色:
     - 変換前: "こんにちは", 赤色（非活性状態）
     - 変換中: "変換中....", 黄色
     - 変換完了: "ダウンロードボタン"緑色（クリック可能）
   - 位置: 水平方向に中央に配置。
   - モバイル対応: モバイルデバイスでも同様に機能し、画面サイズに応じて適切に表示される。

画像変換プロセス:
- 自動変換: サポートされるすべての画像形式をPNGに変換。
- 変換完了後、ダウンロードボタンの色が変化しダウンロードが可能になる。

ファイル名の生成:
- 形式: yyyyMMddHHmmss (例: 20240508121530.png)
- 変換実行時刻に基づくタイムスタンプでファイル名を設定。

保存機能:
- 変換後の画像は自動的にダウンロードフォルダに保存されるか、ユーザーが任意の場所を選択して保存。
- モバイル対応: モバイルデバイスでも画像の保存が可能。

開発における課題と解決策

create.xyzを使ったアプリケーション開発において、最も大きな課題はUIのランダムな変化でした。指示を入力するとアプリケーションの基本的なUIが自動生成されますが、そのUIがランダムに変化することがあります。期待通りのデザインにならない場合、複数のタブを開いて同時に複数のプロジェクトを作成・比較することで、より望ましいUIを持つプロジェクトを選択するという方法を取りました。

この試行錯誤のプロセスを効率化するために、create.xyzの「プロジェクトの複製」機能を活用しました。一度作成したプロジェクトを複製し、微調整を加えることで、期待するデザインにより近づけることができます。

こういう感じにたくさん”Generate”

create.xyzを使ったアプリケーション開発の経験

アプリケーション開発を通して、いくつかの興味深い観察をすることができました。

同じプロジェクト内で同一の仕様書を使って再生成を行うと、生成されるUIに若干の変化はあるものの、全体的な雰囲気は似通っていることに気づきました。一方で、全く新しいプロジェクトを作成し、同じ仕様書を使って生成を行うと、生成されるUIやアプリケーションの仕様は大きく異なることがありました。

この観察結果から、プロジェクトごとに固有の特性があり、それがアプリケーション生成に影響を与えているのではないかと考えました。同じプロジェクト内では、その特性に基づいて生成が行われるため、類似したUIが生成されるのだと推測しました。

ただし、これは私の主観的な印象であり、確定的な情報ではありません。create.xyzの内部アルゴリズムについては公開されていないため、詳細は不明です。しかし、この観察結果は、アプリケーション開発におけるプロジェクト管理の重要性を示唆しているように感じました。

これらの経験から学んだことと手法を組み合わせることで、create.xyzを使ったアプリケーション開発の効率を大幅に改善することができました。プロジェクトごとの特性を理解し、適切な戦略を立てることが、成功へのカギだと感じました。

おわりに

create.xyzは、プログラミングの知識がなくても、シンプルで専門的なウェブアプリケーションを驚くほど短時間で作成できる革新的なツールでした。

create.xyzの強みは、開発からデプロイまでの速さと、そして私が感じたのは、専門性を持ったアプリケーションを作成できることです。

開発からデプロイまでの速さを生かすことで、システム内部でのバリエーションの選択ではなく、むしろ、専門性を持ったアプリケーションを高速で複数作るというアプローチが可能になるのではないでしょうか？これにより、ユーザーのニーズに合わせた的確なソリューションを提供できるのです。

create.xyzは、アプリ開発の世界に新たな可能性をもたらしてくれる革新的なツールです。その潜在力を最大限に引き出し、専門性を持ったシンプルなアプリケーションを素早く開発することで、私たち開発者は、ユーザーのニーズにより的確に応えることができるでしょう。

この記事が気に入ったらサポートをしてみませんか？