サップス
開いてすぐ使える、講義と講演の道具箱。
教える人にも、学ぶ人にも。
どのアプリも HTML ファイル 1 つでできています。
各アプリの「開く」でそのままブラウザで使えます。「ダウンロード」でそのファイルを保存すれば、ダブルクリックするだけで、ネットにつながっていないパソコンでも動きます。
パソコンの Chrome か Edge で使ってください。ほかのブラウザでもアプリは動きますが、保存と印刷で違いが出ます。
多くのアプリでは、開いたファイルにそのまま上書き保存できます。この機能は、ブラウザの File System Access API を使っています。この API はパソコンの Chrome や Edge にはありますが、Safari や Firefox、スマートフォンのブラウザにはありません。ほかのブラウザでは、上書き保存の代わりに、保存のたびにファイルをダウンロードします。
また、Safari などでは、印刷機能を使った PDF への書き出しでレイアウトが崩れることがあります。SVG で保存できるアプリでは、SVG 形式での保存をおすすめします。
★ の付いたアプリは、Markdown やプログラムのようなテキスト記法で書いた内容から、スライドや図などを作ります。テキスト記法はアプリごとに独自に決めてあります。
テキストで書くので、生成 AI に書かせることも、GitHub などで複数人の変更を管理することもできます。
アプリごとに、生成 AI 向けのプロンプトを用意しています。AI がそのアプリのテキスト記法で書くので、そのまま貼って使えます。なお、アプリ自身には生成 AI は入っていません。
プロンプトとともに、アプリの HTML ファイルそのものも AI に渡す方法もあります。AI がアプリの中身を読めるので、細かい調整を頼みやすくなります。
生成 AI のアプリによっては、MCP サーバー(AI からアプリの処理を呼び出す仕組み)を自分で作ることもできます。アプリはどれも HTML 1 ファイルで、ソースを MIT ライセンスで公開しているので、複数のアプリを組み合わせて AI から使うなど、どう連携させるかは作る人が決められます。MCP サーバーは利用者が自分で作り、自分の責任で使うものです。作り方や動作についてのお問い合わせには対応していません。
※アプリから生成 AI に何かが送られることはありません。AI に渡すのは、あなたが貼ったプロンプトや HTML ファイルと、頼んだ内容だけです。MCP サーバーを作った場合は、そのサーバーが AI に渡すものも加わります。
複数人で作るときは、書いたテキストを Git と GitHub などで管理する共同作業をおすすめします。Git なら、誰が、いつ、どこを、なぜ変えたかが記録に残り、取り込む前に変更を確かめることもできます。
なお、同じ画面を何人かで同時に編集する機能はありません。
Markdown で書く、数式に強いスライド。
PowerPoint や Keynote は環境で見た目が変わり、数式も書きにくい。それを解決するために作りました。
数式・定理の囲み枠・段階表示・発表中のペン書き込み・PDF 印刷に対応。生成 AI にスライドのソースやデザインを書かせることもできます。
生成 AI にスライドの Markdown を書かせるときは、最初にこのプロンプトを AI に渡してください。
デザイン(背景と色)を作らせるときは、こちらのプロンプトを渡します。AI が書いた JSON をファイルに保存し、配色の選択欄の「デザインを読み込む…」で取り込みます。
Python 風に書いた手順を、JIS 規格のフローチャートに。
規格から外れたフローチャートを描いてしまう学生のために作りました。曲線の線や、ひし形の頂点以外から出る線は描けません。
Python 風に書くと図が自動で描かれ、記号をクリックして編集もできます。SVG・PNG・PDF で保存でき、スライドや TeX の報告書に貼れます。
シンプルな独自のテキスト記法で書く回路図。
学生が正しい記号で回路図を描けるようになるために作りました。記号は、日本の高校の教科書などで使われる「日本式」、JIS C 0617・IEC 60617 の図記号どおりの「JIS/IEC」、IEEE 315 を基本に米国でよく使われる「米国式」から選べます。
U1.D13 -- R1 -- D1 -- GND のように、つなぐ順に書くだけで線が引かれます。電気回路・電子回路から、Arduino とセンサーの回路まで描け、LED の逆向きなどの誤りも警告します。SVG・PNG・PDF で保存でき、スライドや TeX の報告書に貼れます。
生成 AI に回路のテキストを書かせるときは、最初にこのプロンプトを AI に渡してください。高校の電気回路も含む、全部入りのプロンプトです。
Arduino とセンサーの回路には、こちらのプロンプトを使います。使う機種とセンサーの定義を書き足してから渡してください。
テキストで書く、プロジェクト計画。
機能から製品、作業、担当、日程までを、一続きに計画できるようになるために作りました。絵を描くことよりも、計画の漏れや矛盾を見つけることと、日程を計算することに重点を置いています。
- 画面の実装 days: 3 after: 画面設計 のようにタスクを書くだけで、FBS・PBS・WBS・アローダイアグラム・ガントチャート・テスト項目(MOP)の表・サマリーなど、10 の図と表が描かれます。クリティカルパスを求め、担当者のタスクの重なりと休みを避けて日程を組みます。図と表は SVG・PNG・PDF で保存でき、スライドや報告書に貼れます。
単体で使え、マイログやプロジェクト分析と組み合わせても使えます。
テキストで書き足す、日々の作業の記録。
プロジェクトの実行中に起きている問題を、早く見つけるために作りました。作業時間を数えることより、詰まっていないか、依頼が放置されていないかを拾い出すことに重点を置いています。
1 人 1 ファイルで、- 通知用APIの実装 hours: 3 progress: 40 のように、日付ごとに作業・問題・依頼・テストの結果を書き足します。表は SVG・PNG・PDF で保存できます。
単体で使え、プロジェクト計画の計画書を読み込むと、名前の照合、担当のタスク、計画を使う問題の兆候、今週の予定も確認できます。
計画とログから、プロジェクトの今と経過を見る。
振り返りを、次のプロジェクトの運営に生かすために作りました。完了報告書に載せる表や図の原案を作れます。
プロジェクト計画の計画書だけでも、マイログだけでも、両方でも読み込めます。計画書を読み込むと、版ごとの比較、改訂履歴、終了日やバーンアップなどの推移を示します。表と図は SVG・PNG・PDF で保存できます。
マイログを読み込むと、作業時間、依頼と返事の突き合わせ、問題の兆候などを示します。複数人のマイログをまとめて読み込めます。両方を読み込むと、計画に書き写す候補も示します。計画書もマイログも読むだけで、書き換えはしません。
どこまでも広がる黒板。
色が見えづらい人にも見分けられるペンの色にしています。
ペンタブレットの筆圧、画像の貼り付け、SVG・PNG での保存に対応。板書を保存して学生に配り、学生が書き足すこともできます。
試験と講演のためのタイマー。
OS ごとに使い方が違ったり、別のアプリを入れたりする手間をなくすために作りました。
講演は予鈴・発表終了・質疑終了の 3 つの鈴、試験は終了の鈴。全画面でプロジェクタに映せます。
アプリはすべて、お使いのブラウザの中で動いています。入力した文章や描いた図がサーバーに送られることはありません。作業中の内容はお使いのブラウザの中に、保存したファイルはお使いのパソコンに残ります。
プログラムは MIT ライセンスです。授業や研究、仕事でも自由に使え、改変や再配布もできます。
ただし、シンプルスライドの配色「えんじ」「紫紺」「ペールブルー」のデザインは CC BY-NC-ND 4.0 で、営利目的での利用と、改変したものの配布はできません。
詳しくは各アプリの GitHub のページを見てください。