32
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

オンラインでペアプロできるエディタを作った話

Last updated at Posted at 2022-02-20

おはようございます、Tlapesiumです。

今回の記事では自身が制作した

  • オンラインで共同編集可能
  • 環境構築無しで即座に実行可能
  • チャット機能付き

なテキストエディタについて紹介したいと思います。

もしよろしければ、この記事を LGTM 、GitHubリポジトリ の Star よろしくお願いします!

制作物

以下のリンクからアクセス可能です!
CodingChat

Screenshot 2022-02-20 at 20-51-52 CodingChat.png
Screenshot 2022-02-20 at 21-09-38 CodingChat.png

制作の背景

Web版のVSCodeを使えばオンラインで共同編集可能です。が、誰かがサーバーを立てたり、サーバーを立てる人が環境構築する必要があり、少々手間がかかります。

そこで、手軽に使えるオンラインで共同編集可能なコードエディタとして CodingChat を制作しました。

機能

  • オンラインで共同編集可能

言わずもがなです。一つのコードを複数人で同時に編集することができます。1
他のユーザーのカーソルが表示されるので、誰がどこを編集しているかが一目瞭然です。

  • 環境構築無しで実行可能

オンラインでコードが実行可能です。もちろん、与える入力を変更したり、出力を見ることもできます。
現在は C++ と Python のみに対応していますが、今後、対応する言語を増やしていきたいと考えています。

  • チャット機能付き

文字によるチャットが可能です。ボイスチャットができないときや、見知らぬ相手とペアプロするときに便利かもしれません。

  • 部屋の非公開機能

公開設定の部屋はトップ画面に表示されますが、非公開設定にするとトップ画面に表示されなくなります。
チャットルームのURLを共有することで非公開設定の部屋を仲間内で共有可能です。

技術的なお話

CodingChatのバックエンドは FastAPI 、フロントエンドは React を使用しています。
共同編集やチャットについては WebSocket を利用し、リアルタイム通信を可能としています。

終わりに

いかがでしたでしょうか。
初めて個人で制作したWebアプリですが、たくさんの人に使ってもらえたら幸いです。
個人的にはチーム参加可能な競技プログラミングのコンテストや、プログラミングを教える際に便利かなと思っています。

また、このエディタは GitHubリポジトリ にてすべてのコードを公開しています。
改善点があれば Issue を立ててもらったり、プルリクエストを送ってもらえると大変ありがたいです。

もしよろしければ、この記事を LGTM 、GitHubリポジトリ の Star よろしくお願いします!

  1. サーバーの状況によっては壊れることがありますが、リロードで直ります。

32
12
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?