iGEM TSUKUBA Editor
iGEM TSUKUBAのためのWiki管理ツール
iGEM TSUKUBA Editorとは
iGEM TSUKUBA Editorは、筑波大学の一般学生団体であるiGEM TSUKUBAが作成したWikiに使用する記事の管理ツールです。 リッチテキストエディターによる記事の編集とOpen AI APIを用いた記事の翻訳を行うことができます。 iGEM TSUKUBAのメンバーは、このツールを用いて、Wikiの記事を簡単に作成・編集し、国際大会での発表に向けた準備を行うことができます。
開発背景
iGEM TSUKUBAは、筑波大学の学生団体であり、国際的な合成生物学の競技会であるiGEMに参加しています。 iGEMでは、各チームが独自のプロジェクトを提案し、Wikiにその内容をまとめて発表します。
しかし、このWikiの管理は3つの問題点を抱えていました。
1. Wikiの編集の難しさ
Wikiの編集は、Markdown形式で行う必要があり、初心者には敷居が高いものでした。
そのため、iGEM TSUKUBAのメンバーは、Wikiの編集に苦労していました。
2. 記事の翻訳の手間
Wikiの記事は、英語で書かれる必要があり、翻訳の手間がかかっていました。
特に、専門的な内容を正確に翻訳することは難しく、時間がかかる作業でした。
3. Wikiの提出の複雑さ
Wikiの記事を提出には、GitHubを使用する必要があり、手順が複雑になっていました。
特に、普段からGitHubを使用していないメンバーにとっては、操作が難しいという声もありました。
これらの課題は、iGEM TSUKUBAの活動において大きな障害となっていました。 そこで、iGEM Tsukuba Editorでは、次の3つの機能を実装することで、これらの課題を解決することを目指しました。
主な機能
1. リッチテキストエディターを用いた記事の編集
この機能は、リッチテキストエディターを使用し、Markdownを介さないで記事を編集することで、「Wikiの編集の難しさ」を解決します。 リッチテキストエディターには、BlockNoteを使用しました。 BlockNoteは、WYSIWYG（What You See Is What You Get）形式で、直感的に記事を編集することができます。 コラボレーション機能には、PartyKitを使用しました。
以下の画像は、実際のエディターの画面です。
editor
これにより、Markdownの知識がなくても、簡単に記事を作成・編集することができます。
2. Open AI APIを用いた記事の翻訳
この機能は、Open AI APIを使用して、記事の翻訳を行うことで、「記事の翻訳の手間」を解決します。 BlockNoteのカスタムブロックからMarkdown形式に変換し、Open AI APIを使用して翻訳を行います。 Markdownを解析し、翻訳すべきコンテンツのみを対象に翻訳を行いました。
以下の画像は、実際の翻訳の画面です。
translator
これにより、専門的な内容を正確に翻訳することができ、時間を大幅に短縮することができます。
3. GitHub Actionsを用いたWikiの提出
この機能は、GitHub Actionsを使用して、Wikiの記事を自動的に提出することで、「Wikiの提出の複雑さ」を解決します。 GitHub Actionsを使用することで、手動での操作を減らし、提出の手間を大幅に削減しました。
この機能の実装は、Tomoro Saitoが担当しました。
4. ユーザー体験を高めるインターフェース
実際にユーザーからのフィードバックを受けて、以下の機能も追加しました。
-
ダッシュボード
記事の一覧を表示し、編集や削除ができる機能を追加しました。
igem-tsukuba-editor.com
- プロフィール設定
自分のプロフィールを変更できる機能を追加しました。
igem-tsukuba-editor.com
- プロフィール設定
-
通知設定
編集した記事をリアルタイムでプレビューできる機能を追加しました。
igem-tsukuba-editor.com
