ハクソク

世界を動かす技術を、日本語で。

Scrappy - あなたと友達のための小さなアプリを作ろう

342日前原文(pontus.granstrom.me)

概要

  • Scrappy は、個人や友人・家族向けの 手作りアプリ 作成ツール
  • プログラミング経験が少ない人 でも、簡単にカスタムアプリを作成・共有可能
  • 既存の大量生産アプリ では対応できない、個別ニーズや身近な課題に対応
  • リアルタイム共同編集 や 柔軟なカスタマイズ が特徴
  • DIY志向ユーザー や教育現場、ビジネスの現場改善にも活用可能

手作りソフトウェアの重要性と現状

  • 現代社会では、 多くの人が日常的にソフトウェアを利用
  • 利用されるアプリは、 大規模市場向け や 高額な業務用カスタムアプリ が中心
  • 個人や家族・友人向けの「手作りアプリ」 という選択肢がほとんど存在しない現状
  • 既製品では満たせない 個別ニーズや好みに対応 するための手段の必要性
  • John と Pontus による、ホームメイドソフトウェアの可能性探求

Scrappyとは何か

  • Scrappy は、 自分や友人のために作る小規模アプリ 作成ツール
  • 大量生産アプリや業務用アプリとは異なり、個人の好みや課題に特化
  • プロトタイプ段階だが、 「誰でも作れる」「創造的で個性的」なソフトウェア像 を提示
  • 簡単な操作と少しのコード でアプリを作成・編集可能
  • 共有やコラボレーション も容易な設計

Scrappyで作れるアプリ例（Scrapps）

  • 小学生向け算数練習アプリ ：成長に合わせて難易度拡張可能
  • 地域イベント用入場者カウンター ：複数入り口で状態共有
  • 会議コスト時計 ：15分で作成し即共有可能
  • 週ごとの家事当番管理 ：柔軟な交代・記録・公平性確保

Scrappyの使い方・特徴

  • FigmaやMiro、Google Slidesに似た無限キャンバス型UI
  • ボタンやテキストフィールドなどのオブジェクト をドラッグ＆ドロップ
  • オブジェクトごとに 属性や動作（JavaScriptコード） を設定
  • 編集と実行の区別がなく、常にライブ編集可能
  • マルチユーザー対応・状態同期 ：Google SheetsやFigmaのような感覚
  • 部分共有・リミックス も簡単に実現
  • データが可視化・デバッグしやすい構造

Scrappy開発の背景・思想

  • 「小さなコンピューティング」「カジュアルプログラミング」 などの潮流に共鳴
  • エンドユーザーの自立と表現力の解放 を目指す
  • 大量生産型ソフトウェアから個人・小規模向けツールへのシフト
  • Notion、tldraw、mmm.page のシンプルさと、よりリッチなインタラクティブ性の融合
  • ビジュアルプログラミング （Scratch、Blockly等）とは異なる「メディア＋スクリプト」環境志向
  • FigmaやMiroのようなキャンバス型生産性ツール体験 ＋ Google Docsのリアルタイム共同編集
  • AIによる自動生成ではなく、直接操作とユーザーコントロール重視

Scrappyの想定ユーザー

  • 業務プロセス改善担当者 ：Excelより柔軟で強力なツールとして活用可能
  • 教育現場の教師・生徒 ：複雑な環境構築不要、ボタン一つでコード実行
  • 開発者自身 ：趣味開発や試作で複雑な環境を避けたいプロにも有用
  • DIY志向ユーザー ：自宅や趣味のための小さなアプリを自作
  • 最も注力したいのはDIYer層 ：既存ツールが十分に提供できていない領域
  • 現状はJavaScriptの知識が必要だが、共有されたScrappは非プログラマでも利用・リミックス可能

Scrappyで作るべきアプリ例

  • カスタムフラッシュカード
  • 会議アジェンダ管理
  • 認知症の方用のデイ時計
  • オンラインワークショップ運営補助
  • コンサルティング時間トラッカー
  • ポイント制投票アプリ
  • レシート発行ツール
  • シンプルなワードゲーム
  • 学校の成績計算機
  • インタラクティブなレシピ
  • ソーシャルクイズゲーム
  • タイピング練習アプリ
  • 作詞支援ツール（類語・韻）
  • ボードゲーム補助
  • 結婚式RSVP＋席順管理
  • 動的な営業時間表示
  • 家族掲示板
  • グループ旅行プランナー
  • 家事→お小遣い計算機
  • チェスクロック型生産性タイマー

Scrappyに適した課題の特徴

  • 友人や家族など複数ユーザーとの共有
  • 状況や要件の変化にあわせて即時編集可能
  • ちょっとした計算や自動化が必要なケース
  • アカウント作成などの面倒な手続き不要
  • 信頼できる少人数での利用を想定
  • ミッションクリティカルではない用途

Scrappyと大量生産アプリの違い

  • 小規模・個別ニーズに特化
  • 柔軟なカスタマイズ・即時編集性
  • 共有やコラボレーションのしやすさ
  • 利用者自身が作り手になれる体験

このように、Scrappyは「自分や身近な人のための手作りソフトウェア」を誰でも実現できる新しいツールです。 大量生産アプリでは満たせない、個人や小グループの課題解決 に最適な選択肢として、今後の発展が期待されています。

Hackerたちの意見

「スクリプタブルコンポーネント」のアイデアには100%賛成だよ。初心者向けのブロックベースのプログラミングよりもね。今はモバイルだけど、デスクトップで早く試してみるつもり。だけど、分析で欠けてると思うのは、みんながシェアのしやすさとコストゼロを求めてるってこと。ある環境ではミニマルなアプリを作るのは驚くほど簡単だけど、配布（アプリストアが大きなハードルになる）やホスティングの問題が出てくるし、例えば妻や子供たちは月5ドルも払うのは面倒だろうし、プロの開発者も同じだと思う。

└

自分のOSのウェブサーバーと、ホームコンピュータにポイントするダイナミックDNSサービスを使って自己ホスティングできるよ。

└

残念ながら、こういう楽しいアイデアのための無料ホスティングや配布は、悪用する人たちが出てくる原因になるんだよね。

CardStock[0]はこの記事には触れられてないけど、Scrappyと目指すところやアプローチが似てるみたい。Scrappyとは違って（今のところ）、CardStockはオープンソースでローカルで動かせるんだ。[1] Decker[2]（これもオープンソース）は、Scrappyのロードマップにあるいくつかの課題に対する答えを持っていて、クエリ言語やグリッドウィジェットを使って表形式のデータを表現・操作する機能や、ユーザーが部品のコレクションを再利用可能な「コンストラクション」に抽象化する能力があるよ。[0] https://cardstock.run [1] https://github.com/benjie-git/CardStock [2] http://beyondloom.com/decker/index.html

「バイブコーディング」は短期的には開発者を置き換えることはないと思うけど、シンプルなシステムにとっては最強の競争相手になるだろうね。いくつかのLLMにこういうアプリ（埋め込まれたJS付きのプレーンHTML）を作らせたら、数回の編集でうまくいったよ。見た目ももっと魅力的だし。[1] https://claude.ai/public/artifacts/bb451732-9559-401a-8000-b...

└

その通りだね。彼らはバイブコーディングの自然な対抗者だよ。バイブコーディングは面白いXの投稿から来てるけど、これが元々の目的だよ。

└

趣味でプロジェクトを進めてるんだけど、現状を把握するためにコードを書いてるんだ。数時間ごとに、LLMが解決できない問題にぶつかることがあって、プログラミング経験のないユーザーには解決の見込みがほとんどないと思う。これって、技術やプロジェクトの範囲によるのかもしれないね。

└

バグがあるよ。整数じゃない値、例えば3 + 2 = 5.1を入れると、それが正解としてマークされちゃう。

└

あなたのシンプルなシステムスタックは何？できれば自己ホスト可能なやつがいいな。Vueを選ぶかも。認証が必要で、マルチプレイヤーオフラインDB、静的ホスティング、ファイルホスティングがあって、できればユーザーごとに行をフィルタリングできるのが理想（APIいじって他のデータが見えないようにしたい）。

└

ここにあるComic Sans好きだわ。

└

でも、壊れてるよ。

いい感じだけど、スプレッドシートより使いやすいエンドユーザープログラミング環境はまだ見たことがないな。

└

それとも、実際にコーディングを学ぶことかな。こういうツールを使う理由が全然見えない。開発者としては、自分で作っちゃうし。今はLLMがあるから、すごくシンプルで範囲が限られてれば、ほとんどリスクなしで大体のことを進められる。一般の人には、これにどれだけの時間をかけてアプリをドラッグ＆ドロップする方法を学ぶ価値があるのか、全然わからないよ。

└

テストもないし、バージョン管理もないし、ライブラリのサポートもない。俺には合わないな。

僕がやった中で一番良かったことは、Apple Watchの歩数を全部一つの大きな地図にまとめるシンプルなアプリを作るのに一週間かけたことだね。それをApp Storeに公開した後、友達とシェアしたんだ。もう1年経つけど、友達から（それを見つけたランダムな人たちからも！）「街を全部歩いたよ」とかメッセージが来るのが本当に嬉しい。金銭的な利益はゼロだけど、すごくやりがいのある経験だった。OPが言ってる通り、友達のために楽しくシンプルなアプリを作るのがいいよね！

└

それいいね！アプリのリンク教えてくれる？

└

それを作るために、どれだけの無駄な障害や堀を乗り越えてきたか考えてみて。どれだけの人がそのどれかで諦めたか。結局、何もコントロールできず、ベンダーロックされてるんだよね。もしAIにそのままプロンプトを投げて、オープンソースのウォッチに簡単に移行できたら、どんな世界になるんだろう。

つまり、空のシートにUI要素をドラッグして、グリッドスナップと格闘しなきゃいけないの？（UI要素のサイズに合わないから）それから、コード補完もビジュアルプログラミングもAPIのサポートもAIの支援もなしで、生のJavaScriptを入力するってこと？それだけなの？

Scrappyの代わりに、無料のCodeBootウェブアプリ（https://codeboot.org）を使ってみて。Pythonで完全にURLにカプセル化されたウェブアプリを作れるんだ。開発者もユーザーもインストール不要だよ。以下は、ダイアログを通じて簡単なユーザーインタラクションがある数学練習アプリの例。ウェブアプリのURLを作成するには、「再生」ボタンを右クリックして、生成したいリンクのタイプを選んでね。https://app.codeboot.org/5.3.1/?init=.fbWF0aF9wcmFjdGljZS5we... より複雑なUIの場合、CodeBootはPythonコードからDOMに直接アクセスするためのFFIを提供してるよ。例えば、サイコロを振り直すボタンがあるサイコロ投げアプリもある。ボタンのテキストは複数の言語に翻訳されていて、ブラウザのデフォルトに合わせて調整されるよ。https://app.codeboot.org/5.3.1/?init=.fZGljZS5weQ==~XQAAgADq...

基本的なアイデアは好きなんだけど、実際の使い道が見えないな。ほとんどの例は、アプリを作るよりもペンと紙で簡単に代用できるし。もっと複雑な使い方には、もっと複雑な解決策が必要だと思うけど、これがそれを提供するかは疑問。例えば、時間と周波数空間で関数を学ぶためのアプリがあれば良かったけど、FFTは提供してるの？

スピリットは好きだけど、実行が俺の求めてるものじゃない。これがホスティングされたソリューションだと、ちょっとした個人プロジェクトのために他のSaaSツールに依存しちゃうんだよね。午後の間にちょっとしたカウンターが必要なら大したことじゃないけど、何年も使うかもしれないちょっとしたアプリを探してるなら、これは問題だわ。それに、どんなに学習曲線が低くても、やっぱり存在するから、こういうことに長期的に使えるものが欲しい。そうなると、ユーザーが簡単にGUIを追加できるような、親しみやすくて簡単な言語が頭に浮かぶ。コードは完全に抽象化する必要はないと思うけど、みんながやることに合わせて簡単にしてほしい。MySpaceでどれだけの人がCSSを学べたか見てみて。最初は他の人のをコピー＆ペーストするかもしれないけど、それがきっかけになって、最終的にはどうやって調整するかを考えるようになる。今はこういうのには基本的なHTML/CSS/JSを使うことが多いかな。本当にバックエンドのコードが必要なら、基本的なPHPを使うし（フレームワークとかは使わない）。でも、これだとブラウザに縛られちゃうから、あんまり好きじゃない。こういう結構雑なプロジェクトが仕事で（ブラウザでやってて、AutoHotKeyで）10年以上続いてるけど、ほとんどメンテナンスしてない。AHKのスクリプトは多分8年くらい触ってないけど、macOSに移ってからも、みんなが毎日何度も使ってる。もしAHKが動かなくなっても大したことじゃない、今あるコードはまだ動くからね。この問題に対するSaaSソリューションには同じことは言えない。雑な解決策を探してる人は、創業者がもっと面白いことや利益の出ることに移るたびに、毎回自分のソリューションを作り直すことは考えてないんだ。

└

SaaSのコードをオープンソースにするのが、長持ちさせるための道だと思う。Penpotの人たちはそれをうまくやってるね。ほとんどの人はSaaSを使うけど、セルフホスティングもできるから。もちろん、アプリの認証や署名などの難しさもあるけどね。Web3のソリューションが助けになるかもしれないし。もう一つの選択肢は、PICO-8がやってるような（またはFlashかな）やり方で、ランタイムをリリースして「カート」やアプリを配布すること。:) でも、SaaSの外で信頼できる配布ネットワークを作るのは結構複雑だね。確かに、以前にやったことがあるから、うまくいく可能性はある！

あはは、俺は友達の問題を解決するためにちょっとしたアプリをプログラムしてるだけなんだ。これがその話かと思ったよ。