中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

エディタ「Cursor」で画像を読み込んでコーディングをしてもらう

Tldraw: Transforming Sketches into Code AI

おはようございます!今日もブログを読んでくれてありがとう。今日はね、エディタ「Cursor」について話したいと思ってるんです。あ、この「Cursor」、ちょっと変わってるんですよ。AIがコーディングを手伝ってくれるんですから。

Cursor - The AI-first Code Editor
Cursor is the IDE of the future, built for pair-programming with Powerful AI.

AIがコードを出力してくれるマジカルな旅

さて、エディタ「Cursor」の魔法ですが、これはもう、昔話に出てくる魔法使いみたいなものですね。AIにお願いすると、あら不思議、コードが現れるんです。これって、プログラミングの世界において革命的なんじゃないかと思うんですよ。やり方によっては画像を読み込んで出力してくれちゃう。あのね、画像を見て「これをコードにどう落とし込むか」って考えるの、結構大変なんです。でも「Cursor」があれば、その悩みも一気に解消。

クリエイティブな人々への福音

デザイナーさんとか、クリエイティブな仕事をしている人たちにとっては、この「Cursor」はまるで夢のようなツールです。ビジュアルから直接コードに変換できるなんて、これはもう、時間の節約にもなるし、クリエイティブな作業にもっと集中できるってもんです。プログラマーだって、もうコードを一から書く必要がない。ある意味、このエディタは、私たちの時間を買い戻してくれるんです。

現時点ではそのまま使える、というレベルにはないかもしれませんが思った以上に大枠として作ってくれる。これだけでもプロトタイプとしていろんなものが作れちゃうなんてビビりますね。

新しい時代の幕開け

「Cursor」の出現は、プログラミングとデザインの世界において、新しい時代の幕開けを告げています。画像からコードへの直接変換は、思考のプロセスを根本から変えるかもしれません。これからの時代は、もっと直感的に、もっと創造的に物事を作り出せるようになる。これはもう、クリエイティブな仕事をする人たちにとって、夢のような話ですよ。


と、いうわけで具体的な方法です。

Cursorを使用したコーディング方法

  1. Cursorの機能理解: CursorはAIを活用したペアプログラミングに特化したエディタで、ソフトウェア開発のための高度な機能を提供します​。
  2. プロジェクトとの対話開始: Cursorで直接プロジェクトと対話し、コードベースに関する質問や、ファイルおよびドキュメントの参照が可能です。変更を開始する場所や正しいメソッドの呼び出しに特に便利です。
  3. コード変更: Cursorはコード変更を容易にします。自然言語編集機能を使って、一つのプロンプトでメソッドやクラス全体を変更できます。さらに、簡単な指示に基づいてゼロからコードを生成することもできます。
  4. デバッグとエラー処理: Cursorはコードのバグを自動的にスキャンし、問題の迅速な修正を支援します。リンターエラーやスタックトレースを調査し、バグの根本原因を特定することができます。
  5. 移行とセキュリティ機能: VSCodeのフォークであるCursorは、お気に入りのVSCode拡張機能を一クリックで移行できます。セキュリティ重要な作業のためのプライバシーオプションも提供し、コードのプライバシーを保護します。
  6. 画像をコーディングに組み込む: 画像を直接コードに変換する具体的なプロセスは詳細には説明されていませんが、Cursorの機能から画像からの視覚要素を解釈し、コーディングワークフローに統合することを支援できることが示唆されます。
  7. 最終ステップ: CursorのAIを定期的に活用し、最適化提案や効率向上のアドバイスを受けます。ベストプラクティスや追加のコーディング洞察のためにドキュメント参照機能を活用してください。

CursorのAIファーストアプローチを活用することで、特に視覚要素が複雑な場合や画像をコードに統合する際のコーディング効率を大幅に向上させることができます。AIアシスタントと従来のコーディング慣行の組み合わせは、現代のソフトウェア開発における強力なツールです。

Tldrawの使用方法

  1. スケッチの準備: ウェブデザインのラフスケッチを描きます。これは紙に描くか、デジタルツールを使用できます​​。
  2. 公式サイトアクセス: makereal.tldraw.comにアクセスします。ここではインストールや環境設定なしでツールを使用できます。
  3. OpenAIのAPIキー取得: tldrawはOpenAIのAPIキーを使用します。OpenAIのサイトからAPIキーを取得し、tldrawに登録する必要があります。
  4. スケッチのアップロード: 描いたスケッチをtldrawのプラットフォームにアップロードします。
  5. デザイン生成: 「Make Real」をクリックしてAIによるデザイン生成を開始します。
  6. HTMLコードの生成: アップロードされたスケッチはtldrawのAIによって解析され、対応するHTMLコードに変換されます。生成されたコードはカスタマイズや調整が可能です。

tldrawはUI生成、レスポンシブデザイン、シンプルなゲーム制作など、多様なデザイン作成に使用できます​​​​。

そして、なななんと、これらの機能はCursorでインストール可能な拡張機能「UI Sketcher」とCursorのAI Chatの組み合わせでコーディングをこねくり回すことができちゃうんですよね。

まとめ

というわけで、エディタ「Cursor」は、使い方によっては画像を読み込むだけでコーディングを手伝ってくれる、まさに魔法のようなツールです。このツールがもたらす可能性は計り知れない。クリエイティブな世界はもちろん、ビジネスや教育の分野にも大きな変革をもたらすかもしれませんね。これからの時代、私たちの生活はどう変わっていくのか、ワクワクしますね。

それでは、今日はこの辺で。また次のブログでお会いしましょう!

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

AI
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました