Next.js 14 へのアップデートと Godot での開発

2024/05/07

YOSAPPSは、ウェブアプリ開発の新たな地平を拓くプラットフォームです。この記事では、YOSAPPSがNext.js 13からNext.js 14にアップデートされたことや、Godotでの開発が始まったことに焦点を当てます。さらに、Godotで開発したアプリをHTML形式でエクスポートし、YOSAPPSに統合する方法についても解説します。

YOSAPPSの進化: Next.js 14 へのアップデート

YOSAPPSは、常に最新の技術とツールを採用し、ユーザーに最高の体験を提供することを目指しています。そのため、YOSAPPSはNext.js 14にアップデートされました。Next.js 14では、性能の向上や新機能の追加が行われており、YOSAPPSのパフォーマンスと機能性がさらに向上しました。

Next.js 14へのアップデートにより、YOSAPPSはより高速でスケーラブルなウェブアプリケーションを提供することが可能になりました。また、新機能の導入により、開発者はより豊富な機能を利用してアプリケーションを構築することができます。

Godotでの開発とHTML形式へのエクスポート

YOSAPPSは、次なる一歩として、Godotエンジンを利用したアプリケーション開発にも着手しました。Godotは、オープンソースでありながら強力な機能を備えたゲーム開発エンジンであり、その柔軟性とパフォーマンスの高さで知られています。

YOSAPPSがGodotで開発を始めたことで、新たな可能性が開けました。Godotで開発されたアプリケーションは、HTML形式でエクスポートすることができます。これにより、Godotで作成されたゲームやインタラクティブなコンテンツを、YOSAPPS上で簡単に公開・共有することができます。

'use client';

import { useRef } from 'react';
import { Button } from './ui/button';
import clsx from 'clsx';

type GodotAppProps = {
  url: string;
  portrait?: boolean;
};

const GodotApp = ({ url, portrait = false }: GodotAppProps) => {
  const appRef = useRef<HTMLIFrameElement>(null);

  const focusApp = () => {
    appRef.current?.requestFullscreen();
  };

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-col items-center justify-center space-y-4">
      <iframe
        ref={appRef}
        src={url}
        className={clsx(
          'w-full rounded border-8',
          portrait ? 'h-[560px] w-[380px]' : 'h-[440px]',
        )}
        autoFocus={false}
      />
      <Button onClick={focusApp}>フルスクリーン</Button>
    </div>
  );
};

export default GodotApp;

上記のコードでGodot4からHTML形式でエクスポートしたものをWeb上で遊べるようにしました。

YOSAPPSは、常に最新の技術を取り入れ、ユーザーに革新的なウェブアプリケーション体験を提供することを目指しています。Next.js 14へのアップデートやGodotでの開発は、その使命を達成するための重要な一歩です。今後もYOSAPPSは進化し続け、より多くの開発者やユーザーに価値を提供していくことでしょう。