2025/11
どなたでも書き込みしていただいて結構です。
15(土)
タスク管理アプリのような、指示書のようなアプリです。後でコードやサンプルなど公開します。
生成AIのおかげでアプリ作りはすごく身近なものになりつつありますね😆
しかし、もう11月も半ばです。時間がいくらあっても足りないです…
インタラクティブペーパー、紙の概念を超えられなかったが故に誕生。
16(日)
説明文
生成AIにチェックリスト付きでやることリストをJSONで生成させて、インタラクティブペーパーというHTMLに取り込んで表示させるというものです。
仕事で調査の依頼というものがたくさん来るのですが、説明文書が長すぎて、一読しただけではなにをすればいいかわからないものがあったりします。
そんなときに、説明文書をAIに渡して内容の要約とやることをまとめてもらい、HTMLで出力を依頼しました。そうしたら、チェックリスト付きで生成してくれて、これは便利かもと思ったのがインタラクティブペーパーを作るきっかけとなりました。
また、日々紙に、やることリストやログを書いているのですが、ログを書いた紙が溜まりすぎて机まわりがカオスなのでそこをなんとかしたいという欲求ありました。
こういったことがあり、今回形にしてみようと思ったところです。
コードやサンプルも併せて掲載しました。ちょっと長くなりすぎていますが、お試しいただき、フィードバックなどいただけると幸いです。
JSONをエクスポートできるようにしているので、複数のJSONをAIに渡して、進捗状況やプロジェクトのレビューもできるのではないかと考えています。
普段から、あれ今なにをしていたんだっけ？とか、これから何をすればいいんだっけ？と思うことが多いのでタスクを実行するための補助輪として使えたらなと期待しています。
※せっかくなので、noteにでも記事を書いておこう。
自分でアプリを簡単に作れるようになって、アプリたちを見ていると、コードを生成したのはAIなんですが、アプリたちがもっている雰囲気からは、自分のことが透けて見える感じがしています。
ちょっといいすぎかもしれませんが、作者が見えるみたいな感じがしてきて、ちょっと気持ちが悪かったりしますｗ
命令者の意図が感じられるのです。
これは、AIでコーディングしてみるまで気が付きませんでしたね。
これはある意味収穫でした。
AIで作ったからといって、必ずしも自分ではないということではないということですね。
余談ですが、AIでコーディングするようになって、１日１アプリを作っている感じになってます。仕事用はもちろんのこと、くだらないものもたくさん作っています。くだらないものも作ることで、くだらないものの機能があとから仕事用のものに使えたりするので、くだらないものもあなどれません^ ^。ただ、決してあとから役立つだろうと思ってくだらないものを作っているわけではありません。ただ楽しいだけですw。
そうこうしているうちに、mermaid記法で書かれたファイルをローカルで表示できるアプリを作りたくなってきました。フローチャートを簡単に表現できていいんですよね。パワポとかで作るよりも手軽なのもいいですね。 自分の理想のGTDアプリなんてものも作れるかもしれません。 どんどんアイデアが浮かんで困りますね。
たくさん作っているのですが、あまりアプリを統合したり、拡張したりはしていません。技術的な問題もありますし、シンプルなほうがメンテナンスがしやすいというのもあります。なお、面倒くさがりという性格が理由としては大きいかもしれません。
いつかは複数のアプリを統合してみたいという欲求はあります！
それではまた。
17(日）
すぐ試せるように、ひとまず僕が借りているサーバーにファイルをアップしてみました。
一時的なものなので、別の場所にアップされるなら消します。
ちなみに、すごくよくできていると思います。
ぷーあるちゃ.iconありがとうございます😭GitHubは不案内なので、これから勉強します！
また、サーバーへのアップロードありがとうございます。大変助かります！
自分で自分に要望ですが、小見出しの折りたたみやキーボードショートカットもほしいところです。
キーボードショートカットrashita.icon
ChatGPTが書いてくれるでしょうけども、一応考え方を。
code:sample.js
document.addEventListener("keydown", event => {
if (event.key === "m" && event.metaKey) { //ここで押されるキーを指定する
event.preventDefault();//おまじない（キー操作で文字入力などがなされないようにするため既存の処理をキャンセルしている）
event.stopPropagation();//おまじない
//ここにキーが押されたときの処理を書く
}
});
新規セクションの追加などは、簡単にショートカットキー操作できそうです。
GitHubrashita.icon
GitHubに上げておけば、誰でもソースコードを閲覧できるようになる
さらにGitHubの機能(Github pages）でWebサイトとして公開することも可能
令和7年11月22日 ぷーあるちゃ.icon GitHubに登録してみました。
アクセスできますでしょうか。
あと、うちあわせCastでインタラクティブペーパーを取り上げてくださりありがとうございました！
https://open.spotify.com/episode/7DcSsEuU36Gn5FBYZ0qXaD?si=l9KHIiQDRo6fziwO0UfY-A
これまでの手作りツールは見た目がしょぼかったりするということに触れられていましたが、AIが登場するまでは確かにそうでしたね。
次は、サイトの公開を頑張ってみます。
公開できたみたいですw
GitHub pagesの公開手順のインタラクティブペーパー用jsonを作って、pagesも作ってみました。
code:json
{
"schemaVersion": 3,
"title": "GitHub Pages サイト作成ガイド",
"sections": [
{
"id": "sec-a8b9c2d",
"title": "1. リポジトリの作成",
"text": "GitHub Pages でサイトを公開するための最初の手順として、専用のリポジトリを作成します。",
"checklist": [
{
"id": "chk-x1y2z3a",
"text": "GitHub にログインし、右上の「+」アイコンから「New repository」を選択する",
"checked": false
},
{
"id": "chk-b4c5d6e",
"text": "「Repository name」に「username.github.io」（usernameは自分のユーザー名）と入力する",
"checked": false
},
{
"id": "chk-f7g8h9i",
"text": "公開範囲として「Public」を選択する（GitHub Pages 公開には必須）",
"checked": false
},
{
"id": "chk-j0k1l2m",
"text": "「Create repository」をクリックしてリポジトリを作成する",
"checked": false
}
],
"subsections": []
},
{
"id": "sec-m3n4o5p",
"title": "2. コンテンツの追加",
"text": "サイトのトップページとなるファイルを作成します。",
"checklist": [
{
"id": "chk-q6r7s8t",
"text": "リポジトリ画面で「Create new file」ボタンをクリックする",
"checked": false
},
{
"id": "chk-u9v0w1x",
"text": "ファイル名入力欄に「index.html」と入力する",
"checked": false
},
{
"id": "chk-y2z3a4b",
"text": "エディタ部分に「<h1>Hello World</h1>」などの任意のHTMLコードを入力する",
"checked": false
},
{
"id": "chk-c5d6e7f",
"text": "ページ下部の「Commit changes...」をクリックして保存する",
"checked": false
}
],
"subsections": []
},
{
"id": "sec-g8h9i0j",
"title": "3. 公開設定の構成",
"text": "作成したリポジトリをウェブサイトとして公開するための設定を行います。",
"checklist": [
{
"id": "chk-k1l2m3n",
"text": "リポジトリ上部の「Settings」タブをクリックする",
"checked": false
},
{
"id": "chk-o4p5q6r",
"text": "左サイドバーの「Code and automation」セクションにある「Pages」をクリックする",
"checked": false
},
{
"id": "chk-s7t8u9v",
"text": "「Build and deployment」の「Source」が「Deploy from a branch」になっていることを確認する",
"checked": false
},
{
"id": "chk-w0x1y2z",
"text": "「Branch」のドロップダウンで「main」（またはmaster）を選択し、フォルダは「/ (root)」のまま「Save」をクリックする",
"checked": false
}
],
"subsections": []
},
{
"id": "sec-a3b4c5d",
"title": "4. サイトの確認",
"text": "設定が完了し、サイトがインターネット上でアクセス可能になったかを確認します。",
"checklist": [],
"subsections": [
{
"id": "sub-e6f7g8h",
"title": "デプロイ状況の確認",
"text": "GitHub Actions によるビルドとデプロイの完了を待ちます。",
"checklist": [
{
"id": "chk-i9j0k1l",
"text": "リポジトリの「Actions」タブをクリックし、ワークフロー（pages build and deployment）が緑色のチェックマークになっているか確認する",
"checked": false
}
]
},
{
"id": "sub-m2n3o4p",
"title": "実際のアクセス",
"text": "公開されたURLにブラウザからアクセスします。",
"checklist": [
{
"id": "chk-q5r6s7t",
"text": "「Settings」>「Pages」画面に戻り、上部に表示された「Your site is live at...」のURLをクリックする",
"checked": false
},
{
"id": "chk-u8v9w0x",
"text": "作成した index.html の内容が表示されていることを確認する",
"checked": false
}
]
}
]
}
]
}
22（土）
今後次のようなものを作っていきたい。
共同編集バージョン インタラクティブペーパーリエゾン
スライドショーバージョン インタラクティブペーパースライド
次世代バージョン
rashita.icon公開ありがとうございます！
これで気兼ねなく紹介できるようになりましたw
ぷーあるちゃ.iconご助言ありがとうございました！新しいことにチャレンジするのは、手間はかかりますが、楽しいものですね。