見出し画像

ブラウザ上で秒でツールを作成・実行・共有できるサービス「Moyuk」を作った話

kohii

一年以上温めに温めまくった個人開発サービス Moyuk を Product Hunt でローンチしたので、紹介させてください。

技術的なことはこちらに書きました！

About Me

  • 医療スタートアップで電子カルテ・レセコンを作りつつ個人開発しています。

  • ものづくり好き。（実用的なものから芸術まで）

  • その昔 SmoothCSV という CSV エディタを作っていました。（最近はメンテできていない…）

  • Social accounts:

作ったもの

※ 現時点では Chromium ベースのブラウザ（Chrome, Edgeなど）のみに対応しており、モバイル端末では利用できません。

雑に説明すると Moyuk は TypeScript というプログラミング言語で書いた関数を、ブラウザ上で実行、管理、共有できる Web アプリ（”App”）に変換するプラットフォームです。作成された App は URL で簡単に共有できます。

1. App を作る

  • 想定ユーザー：開発者

この画面では左側のエディタで TypeScript でコードを書くと、右側に App のプレビューが表示されます。

App の UI は関数の型から自動で作られます。UI のためのコードや Moyuk 特有のコードは一切不要です。

UI は Input（関数の引数）と Output（関数の戻り値）という2つのエリアから構成されます。Moyuk は Input に入力された値を受け取り、ユーザーが書いた関数を実際に実行し、その結果を Output に表示します。

参考：各フィールドの種類とそれに対応する TypeScript の型

2. App を使う

  • 想定ユーザー：誰でも（App の内容次第）

作成した App はブラウザ上ですぐに利用できます。
App はリンクを共有するだけで誰でも使えます。もちろんプライベートにもできます。

自分で作った App 以外にも、Moyuk で公開されている App は、キーワード検索や、Explore ページから探して使うことができます。

Moyuk で公開されている App をいくつか紹介します。

UUID v4 Generator - ID をランダムに生成するシンプルなツール

URL Parser - URL をパースして表示するツール。これもとてもシンプル。

OpenAI Chat API Playground - ChatGPT API を試すためのプレイグラウンド。OpenAI の Client Library を使って API を呼び出し、その結果を表示します。

Transpile JavaScript / TypeScript with SWC - TypeScript / JavaScript をトランスパイルする、みたいな高度なこともできます。（SWC というライブラリを使用）

公開されている App は、ソースコードを見たり、フォーク（＝コピーして改変すること）したり、コレクションに保存（※WIP）したりすることも可能です。

Moyuk が解決すること

スクリプトの共有と管理

エンジニアはちょっとした課題を解決するためにローカル環境でスクリプトを書くことがよくありますが、そのようなスクリプトは、標準的な管理方法があるわけではなく、また、あまり他人に共有されることがありません。共有したくても、その相手が非エンジニアの場合はそれを実行するためのUIが欲しくなるのではないでしょうか。Moyuk は書かれたコードを App という誰でも利用できる形に変換し、ブラウザ上で実行、管理、共有などを簡単に行えます。

UI コードやグルーコード

Moyukでは、UIのためのコードや関数を実行するのためのコードが一切不要です。UIライブラリやフレームワークを使用したコードは、依存が増えたり特定の知識を必要としたりするだけでなく、技術のアップデートや流行り廃りによってすぐに古くなります。Moyuk では UI のためのコードや Moyuk-specific なコードを必要としないため、ドメインロジックにフォーカスでき、長持ちするコードを書くことができます。

Getting Started with Moyuk

ぜひ使ってみてください🙏

あなたが開発者の場合

  • App を作る：
    アカウント登録（無料）をして、自分の App を作成し始めましょう。既存のアプリをフォークして始めることもできます。

  • App を共有する：
     作った App を公開し、URL で共有してみましょう。

  • ドキュメントを参照する：
     App 作成中にわからないことがあったら、Moyukのドキュメントを参照してください。

あなたが開発者でない場合

  • 公開された App を使う：
    自分の作業を自動化するためのツールがほしい時に、Moyuk コミュニティによって作成された公開 App を探してみましょう。

  • App の作成をリクエストする：
     自分がほしい App が Moyuk 上になかったら、開発者の同僚や友達に作ってもらえないか頼んでみましょう。（DM 等で私に頼んでくださっても構いません。）
    Generative AI を使って、非開発者でも自然言語で App を作成できる機能も検討中です。

フィードバック・お問い合わせ

フィードバック・リクエスト・質問は大歓迎です。以下のチャンネルが利用できます：

最後まで読んでいただきありがとうございました。よかったら Like、コメント もしくは Product Hunt で Upvote など頂けると励みになります。

Resources

技術的なことはこちらに書きました：

この記事の英語版：

開発予定の機能：
Moyuk Roadmap

いいなと思ったら応援しよう！