複雑な形状を描画します。テキストを描画します。SVGは、フロントエンドエンジニアとして、インタラクティブなウェブページやアイコン、チャート、グラフなどを制作する際に重要な技術です。レスポンシブデザインやアクセシビリティにも配慮したグラフィックスを作成することができます。今回は動画学習プラットフォームUdemyで受講可能なChatGPT関連のおすすめ講座を紹介します。Udemyの講座では、ChatGPTを使ったビジネスソリューションの開発から、ChatG...SVGを使ったサンプル以下に、SVGを使った簡単なサンプルを3つ紹介します。円を描画するサンプルこのサンプルでは、SVGキャンバスの中心に半径40のオレンジ色の円を描画しています。SVG!」を表示しています。SVG!</text></svg>線と多角形を描画するサンプルこのサンプルでは、SVGキャンバスの上部に太さ5の黒い線を描画し、下部に緑色の三角形を描画しています。/></svg>これらのサンプルは、SVGの基本的な要素を使用したもので、さらに複雑な図形やアニメーションを作成することも可能です。今回は動画学習プラットフォームUdemyで受講可能なChatGPT関連のおすすめ講座を紹介します。Udemyの講座では、ChatGPTを使ったビジネスソリューションの開発から、ChatG...ChatGPTでSVGのコードを生成し、イラストを作成するここからは、実際にイラストを描画するためのSVGのコードをChatGPTを使って生成する手順を解説します。今回の例では、言語モデルはGPT-4を使用しています。ChatGPTへの指示(プロンプト)まず、ChatGPTへの指示を作成します。精度の高いSVGのコードを生成するため、立場を「優秀なWebデザイナーであり、フロントエンドエンジニア」と定義しました。続いて、SVGコード生成に至る過程を箇条書きで定義します。最後に「step-by-step」というキーワードで段階を踏んで実行するよう指示します。(このキーワードが非常に重要です)今回作成したプロンプトは以下のの通りです。あなたは優秀なWebデザイナーであり、フロントエンドエンジニアです。HTML要素の一つであるSVGを使って、少し複雑なSVGアートを作成します。1.猫のイラストをデザインします2.デザインしたイラストをブラウザ上に表示するためのSVGコードを生成しますこれらをstep-by-stepで実行してください。ChatGPTからの回答(生成されたコード)ChatGPTからの回答は以下の通りです。Step1まず、Step1として言語でイラストの内容が定義されています。この定義に含まれていない内容はコード生成の対象となりませんので、内容が不足している場合は再度その旨をプロンプトで指示してください。猫のイラストをデザインし、それをSVGコードに変換する手順を説明します。テキストベースのAIであるため、実際のデザインプロセスを視覚化することはできませんが、猫の顔の簡単なイラストをSVGで表現する方法を説明します。猫の顔のイラストをデザイン猫の顔のシンプルなイラストを考えます。以下の要素を含めることにします。・顔の形(円)・左耳(2つの三角形)・右耳(2つの三角形)・目(2つの楕円)・鼻(小さな三角形)・口(2つの曲線)・ひげ(6本の直線)Step2Step2ではStep1の定義を元にSVGのコードが生成されます。各パーツのSVG要素を作成それぞれのパーツに対応するSVG要素を作成し、猫の顔を構成します。以下が実際に生成されたSVGのコードです。今回は動画学習プラットフォームUdemyで受講可能なChatGPT関連のおすすめ講座を紹介します。Codeで動作確認ここからは、先ほどChatGPTによって生成されたSVGのコードがどのようなイラスをを描画できるか確認していきます。codeを使用しました。codeのインストール方法は以下の記事で解説しています。今回はWindowsでPythonを開発するための環境構築方法について解説します。Preview」を使用します。codeを起動したら、画面左端の拡張機能のボタンをクリックします。Preview」が表示されますので、インストールしてください。Preview」を使ってイラスを表示します。ファイルを新規作成し、拡張子を「.vsg」とします。そのファイルにChatGPTが生成したSVGのコードを貼り付けると、以下のように右側にイラストが表示されます。今回は猫の絵を描かせましたが、耳の向きがおかしくなってしまいました。このような修正点は、ChatGPTに再度向きを変更するよう指示を出すことでSVGを変更し、プレビューで確認といった作業を繰り返し、目的のイラストに近づけていきます。このように、言語モデルであるGPTでも、SVGのコードを介してイラストを作成できることが確認できました。ChatGPTの活用方法について学ぶ動画学習プラットフォームUdemyでは、ChatGPTのプロンプトエンジニアリング、APIを使ったアプリケーション開発、ビジネスでの活用方法について学べる講座が用意されています。Udemyは講座単体で購入できるため安価で(セール時1500円くらいから購入できます)、PCが無くてもスマホでいつでもどこでも手軽に学習できます。プロンプトエンジニアリングについて学ぶChatGPTを始めとしたジェネレーティブAI(生成AI)のプロンプト作成の基礎を学べる講座です。ユーザーとしてChatGPTをしっかり使いこなしたいという方におすすめです。APIとChatGPTの機能を拡張するフレームワーク、LangChainの使い方をハンズオンで学ぶことができます。GPT-4を始めとするLMMの検索エンジン連携や、AutoGPT、BabyAGIなどの自律型エージェントなど、一歩進んだChatGPTアプリ開発をマスターしい方におすすめです。日々のPC作業や配信、コンテンツ制作を効率化するカスタムコントローラ。Amazon調べ)口コミを見るAmazon楽天市場Yahooショッピングメルカリポチップまとめ今回はChatGPTとSVGを組み合わせて、イラストを作成する方法について解説しました。コードを介して言語以外のものも生成できるようになると、使い道が広がりますのでぜひ試してみてください。以下の記事で効率的にPythonのプログラミングスキルを学べるプログラミングスクールの選び方について解説しています。最近ではほとんどのスクールがオンラインで授業を受けられるようになり、仕事をしながらでも自宅で自分のペースで学習できるようになりました。スキルアップや副業にぜひ活用してみてください。自分のキャリアアップに必要なカリキュラムがあるプログラミングスクールを探したいん...スクールではなく、自分でPythonを習得したい方には、いつでもどこでも学べる動画学習プラットフォームのUdemyがおすすめです。講座単位で購入できるため、スクールに比べ非常に安価(セール時1200円程度~)に学ぶことができます。私も受講しているおすすめの講座を以下の記事でまとめていますので、ぜひ参考にしてみてください。こんな悩みを解決します。Ud...それでは、また次の記事でお会いしましょう。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。ExampleMurasan(むらさん)制御系エンジニアです。Piなどのマイコンボードを使ってアプリケーションを開発しています。好きなガジェットについても紹介していきたいと思います。トップページの画像はStableDiffusionというAIによって生成されたイラストです。