こんにちは、リスナーの皆さん！マイクです。今日は2024年5月20日、月曜日ですね。さて、今日もZennでトレンドの記事を紹介していきますよ！
前回は「Next.jsのSSRF脆弱性 CVE-2024-34351」「セキュアな個人開発のお供に!! Honoで作ったMPAに、Cloudflare Accessを使って簡単に認証をかける」「React Compiler を試す」といった記事を紹介しましたね。セキュリティや開発ツールについて盛りだくさんでした。
さて、今日紹介する記事は全部で5本です。それでは、さっそく1つ目の記事からご紹介しましょう。
....
まずは「タコでもわかるDartマクロ作成入門」という記事です。この記事では、Google I/O 2024で発表されたDartのマクロ機能について詳しく解説されています。特に、Jsonのシリアライズ・デシリアライズやデータクラス作成を効率的に行うためのマクロの利用方法と実際の手順が紹介されています。
Dartのdev版とFlutterのmaster版でマクロが利用可能であることを前提に、簡単なマクロの例として「Hello, World!」とプリントするメソッドを含むクラスを生成する方法が説明されています。具体的な手順として、Dartのdev版のインストールからプロジェクトのセットアップ、依存の追加、マクロの有効化、マクロの作成、そしてマクロの使用方法までが詳細に記載されています。
これにより、Dartのマクロ機能を利用して効率的なコーディングが可能になります。非常にシンプルなマクロの作成例を通じて、Dartのマクロ機能の基本的な使い方が学べる内容となっています。
....
続いては、「GPT-4oを使って2Dの図面から3DのCADモデルを作る」という記事です。株式会社ファースト・オートメーションのCTO田中(しろくま)氏が、OpenAIのGPT-4oを用いて2D図面から3D CADモデルを生成するツールの試作について紹介しています。
具体的な手順として、2D図面画像を読み込み、GPT-4oを使って3DCADモデル化するコードを生成し、そのコードを実行してモデルを生成、そして生成したモデルを3Dビューアで描画して画像を保存するという流れが説明されています。また、GPT-4oを使ってコードのリファインを行うことも可能で、生成されるモデルの精度が向上する点が強調されています。
実際に試みた結果、2D図面からSTEPファイル形式のCADモデルが生成され、FreeCADでの描画結果も概ね良好だったそうです。しかし、成功率にはまだ課題があり、完全な精度には至っていないとのこと。とはいえ、GPT-4oの画像認識精度の向上は、製造業における画像を使ったアプリケーションにも大いに期待されています。
....
次に紹介するのは、「Difyのすごさ」という記事です。Difyは生成AIアプリを簡単に作成できるプラットフォームとして注目されています。直感的なUIで迅速に生成AIアプリを構築できるため、PoCに時間がかかる場合やクライアントから迅速に生成AIアプリを要求される場合に非常に役立ちます。
Difyはノードベースで開発が可能で、最新のLLM「GPT-4o」も使用できます。作成した生成AIアプリは「Webアプリ」「サイトに埋め込み」「API」の3種類の方法で公開できます。また、セキュリティ面でも安心で、PC上にデプロイ可能でインターネットにドキュメントをアップロードせずに検証が行える点も魅力です。
生成AIアプリのアイディアがある方や、迅速にプロトタイプを作りたい方には非常に有用なツールとなっています。この機会にDifyを使って生成AIアプリを作成してみてはいかがでしょうか。
....
次は「【CSS】実は br や img に ::before, ::after 疑似要素が入れられる（場合がある）【置換要素】」という記事です。通常、`br` や `img` には疑似要素を追加できませんが、特定の方法で疑似要素を適用することが可能です。
まず、置換要素とはコンテンツがCSSの影響を受けない要素を指し、主に画像やメディア要素（`img`, `video`, `iframe`など）が該当します。`br` 要素に疑似要素を適用するには、`content` プロパティで元のコンテンツを置き換えます。例えば、`br` を改行として使いたい場合や、`br::after` に対して `\a` を使う方法があります。
また、`img` 要素では、`content` プロパティに文字列を直接指定できないため、存在しないURLを指定して画像の読み込みを失敗させることで疑似要素を表示する方法が紹介されています。
この方法はブラウザによって挙動が異なるため実用的には使えませんが、CSSの知識を深めるための興味深い実験となります。関連・参考記事や詳細なコードサンプルについては、元記事を参照してください。
....
最後に、「ドラゴンボールで学ぶオブジェクト指向」という記事です。この記事は、ドラゴンボールを例にオブジェクト指向プログラミング（OOP）を初学者向けに解説しています。
オブジェクト指向の基本概念として、オブジェクト、クラス、インスタンスが紹介されており、それぞれドラゴンボールのキャラクターを例に説明されています。例えば、天津飯の属性やメソッド、ベジータクラス、ドクターゲロが作った16号などが具体例として挙げられています。
また、オブジェクト指向の三原則である継承、ポリモーフィズム（多態性）、カプセル化についても解説されています。悟空と悟飯の関係を例にした継承、サイバイマンの例で説明されたポリモーフィズム、フリーザ様を例にしたカプセル化など、分かりやすいキャラクター例が使われています。
オブジェクト指向のデメリットについても触れられており、設計に時間がかかる点や再利用の難しさ、理解したエンジニアの確保の難しさについても言及されています。理解を深めるためには、なじみのある例を用いる方法が推奨されています。
....
さて、今日紹介した記事は以上です。Dartのマクロ作成から生成AIプラットフォーム、CSSの実験、そしてドラゴンボールを使ったオブジェクト指向まで、幅広い話題をお届けしました。次回も素敵な記事を紹介しますので、楽しみにしていてくださいね。詳しい内容はショーノートに書いてありますので、そちらもぜひチェックしてください。また、番組の感想や質問もお待ちしています。それでは、次回までお楽しみに！マイクでした。