テックタッチアドベントカレンダー8日目を担当する kenyu です。今回は Puter という Web ベースの OS 上でアプリをつくってみました。

Puter ってなに？

Puter とは Web ブラウザ上で動作するデスクトップ OS のようなサービスです。

これまでも Web ベースの OS はありましたが、Puter は JavaScript の SDK が提供されており、開発した Web アプリケーションを Puter 上のデスクトップアプリケーションのように使えるところが特徴です。

作成したアプリケーションは他の Puter ユーザーも利用できます。面白そうなのでさっそく試してみました。

とりあえず ToDo アプリつくってみるか

ということで、Next.js で ToDo アプリをつくってみます。なぜ Next.js？React でもよくない？と思われるかもしれませんが、いまのところ SDK は script タグで読み込む方法しかなく、その script タグがプリレンダリングされた HTML に含まれている必要があるからです。

ではチャチャッとつくるために、今回は StackBlitz を使います。

stackblitz.com

StackBlitz は Web ベースの IDE で、特に設定する必要なく Next.js の開発用サーバも用意してくれます。早速サインアップして React.js のプロジェクトを新規作成します。

するといきなり Next.js のビルドがはじまり、終わると開発用サーバへのデプロイまで完了した状態になります。すごい！

右上にデプロイされたアプリケーションの URL があります。

ではさっそく雑に ToDo アプリをつくってみます→できました。コードはこちら。

ポイントをピックアップして説明します。まず SDK のインポート。先に説明したとおり npm などはなく、script タグでインポートする形になります。

https://github.com/mxxxxkxxxx/puter-nextjs-todolist/blob/main/pages/index.js#L26

 return (
    <>
      <Head>
        <title>ToDoList</title>
        <script src="https://puter.com/cloud.js"></script>
      </Head>

今回 SDK を利用するのはアプリケーションの終了部分のみとします。SDK 利用箇所においてはサーバサイドで実行できないので、クライアントのみで実行するようにしておきます。

https://github.com/mxxxxkxxxx/puter-nextjs-todolist/blob/main/pages/index.js#L8

  const exit = useCallback(() => {
    // アプリケーションの終了
    // クライアントサイドでのみ実行可能
    if (process.browser) {
      const cloud = new Cloud();
      cloud.exit();
    }
  }, [process.browser]);

はい。これで Puter から終了可能な（雑な）ToDo アプリが完成しました！次は Puter から参照できるように作業しますが、StackBlitz は開いたままにしておいてください。閉じると開発用サーバも落ちてしまい、Puter 上でアプリを動かせなくなってしまいます。