Webプログラマーのための個人開発 ~ゼロから始めてお金を生み出すまで~

拝
呈

概要

Webプログラマーが自分自身のプロダクトを作って収益を上げる方法を書きます

想定読者

• JavaScript と CSS でフロントが書ける

なら、 Tauri を使って、Windows, Mac, Linux, iOS, Android 向けのアプリを作れます

• Windows 端末を持っていて
• 銀行口座をもっていて
• クレジットカードを持っていて
• カード残高が1900円以上ある

なら、 Microsoft Store
を使って、世界２４０か国にアプリを販売できます

章立て

２本立てです

1. アプリの作り方: 世の役に立つ製品を考え付く方法論と、完成させるための心構えについて書きます
2. アプリの売り方: Microsoft Store を使いグローバル市場に製品を販売する手順を書きます

1. アプリの作り方

必要なものをつくる

すべて製品はニーズから出発しなければいけない
必要な時に必要な分だけ作る
それが生産性を高め、競争力を伸ばし、少量多品種生産を可能にする
そして一人の技師が複数の仕事をこなす多能工でなければならない

図書館で 『トヨタ生産方式』大野耐一 著 を手に取ると上記のようなことが書いてありました

トヨタ生産方式を理解して活用すれば、世の役に立つ新しい製品やサービスを思いつきます

トヨタ生産方式とは

1. 自働化「異常を検知して異常で止める」
2. ジャスト・イン・タイム「必要なときに必要なものだけつくる」

この２本柱のもと、あらゆる仕事、仕組み、流れを改善し続けること、それがトヨタ生産方式です

1 自働化

自働化とは勝手に働いてくれることです
機械が異常を検知して止まることです
異常が起きない限り人間は機械から離れて別の仕事ができます
異常が起きた時だけ、技師が機械の世話をします

アプリ開発の文脈で言うと

• エラーが起きた時に一目でわかる
• 不具合を起こすコードを検知して、
  • リリース前に止める
    • 書いた瞬間にビルドエラーを起こす
    • ビルド前に自動テストで失敗する
  • ランタイムにUI上に大きくエラー内容と場所を表示する
• 将来の仕事が減るように巧妙にコードを組む
  • 例えば、あるコードAを書き換えたときに、別のコードBも必ず書き換える必要があるなら、両者の共通部分を共通化するようにリファクタリングし、将来コードBを書き換える作業をなくすことができる

2 ジャスト・イン・タイム

ここで言うジャスト・イン・タイムとは、「必要なときに必要なものだけが見える、使える、手に入る」ことです

以下の作業は改善の対象です

• 同時に複数のウィンドウを開いていて何がどこにあるのかわからない
• メールやメッセージが氾濫していて、見落とす、気づかない
• コードが入り組んでいてどこに何があるかわからない
• 似たようなものが複数あり、どれを使えばいいかわからない
• ＵＩの導線が１本道ではなく、次に何をすればいいか分からない

そして次のように改善します

• 現在の業務に関連するウィンドウだけをまとめて画面上に表示する、関係のないものは非表示にする、業務の切り替えに応じてまとめて切り替える（ウィンドウマネージャー）
• メール、メッセージにフィルターをかける、ＡＩに自動で要約させる、重要度、期日順にソートする
• どの行を読んでもその行が何をしているか分かるように、命名する、関数に分けてスコープを短くする
• ＵＩは今必要な情報だけを表示する

また以下の仕事はしません

• 必要でない機能開発
• 必要だが今は不要な機能開発
• いつか必要になるかもしれない（つまり今は不要な）機能開発

必要な時が来たら、即座に対応できるように、汎用化のコストは常に０に近づける努力をします

• コードAを変えたら影響の出るコードの一覧（コードB,C,D）が一目でわかる
• どのファイルのどの行を、誰が見ても、何のために何をしているか、一目で分かる
• 必要なコードが必要なときにすぐに呼び出せる（自動で参照しインポートできる）
• 必要なコードが必要なときにすぐに開ける（あいまい検索や参照間のジャンプでコードを開く）

ニーズを見つける

新しいサービスや製品を思いつくことは、ニーズを見つけることです
ニーズを見つけることは、改善することです
例えば、上述した「ジャスト・イン・タイム」にの改善例から、次のような商品が生まれます

製品１：「現在の業務に関連するウィンドウだけをまとめて画面上に表示する、関係のないものは非表示にする、業務の切り替えに応じてまとめて切り替える」
これを自働でしてくれるアプリはウィンドウマネージャーと呼ばれます

製品２：大量のメールを仕分けて、要約し、重要度や返答期日に応じてソートしてくれるようなメールアプリがあれば便利です。メールのＡＩ補助 はありますが、読むことに特化したＡＩ補助はあるんでしょうか。多数の人の意見を聞く立場にある人は、今までより丁寧に多くの人の意見に耳を傾けることができて、社会全体の協力が促進します。

既存製品があるのに、気づかない

既存の製品でニーズを叶えられないか
既存商品でニーズが叶う前提で調べてください

ニーズを感じている人は、解決方法を知らないということなので、検索ワードが不適切になりやすいです
既存技術があると気づかずに、開発をスタートしてしまいます

これは自分自身の失敗談です。Windows にウィンドウマネージャーが無いと思い込んで開発を始めましたが、実際はありました。そもそもウィンドウマネージャーという言葉を知らず、気づきませんでした

Webアプリを作るようにデスクトップアプリ、モバイルアプリを作る

読者はWebアプリを作れるプログラマーだと想定しています
具体的なアプリの実装は省略します

Tauri を使えば、Webプログラマーは新しい言語やフレームワークを学ばずに、デスクトップアプリやモバイルアプリを作ることができます

• Slack
• VS Code
• Teams
• Twitch
• Dropbox
  など、有名なアプリも同じ仕組みです

ただしこれらは Electron というツールで作られています

Electron と Tauri を比べます

• Tauri
  • OS: Rust
  • レンダリング: OS System WebView
  • ファイルサイズ: 1~10MB
  • SQL: 公式対応
  • 有名アプリ: ほぼなし？
  • 機能: SQL 以外は Electron ほどではないが少なくもない
• Electron
  • OS: C++
  • レンダリング: Chromium
  • ファイルサイズ: 50~100MB
  • SQL: 自前で npm パッケージなどで実装する必要あり
  • 有名アプリ: VS Code, Slack, Teams など列挙するのが難しいくらい多数
  • 機能: SQL 以外は多数

具体的なインストール方法やビルド方法は公式ドキュメントを見れば直ぐにわかり、既に他の記事もあるので割愛します

作り始めたものを完成させる心構え

未完成に終わるとき、同じパターンを繰り返している

未完成のまま終わった事例を振り返ると、同じパターンを繰り返していることに気づきます

• 本来の目的から外れて技術的な話にのめりこむ
• 完璧なゴールを目指して多大の時間を割く
  • 特に最終段階に近づくと、リリース可能なのに、想像力が続く限り品質を無限に追求してしまう
• それを作ることが本当に必要か問い直さない結果、作らなくてよかったものまで作ってしまう
• 一気に次のハードルを引き上げてしまう
  • いざとりかかろうとすると乗り越えていく未来をイメージできない
  • イメージできないから、当然次の一歩を踏み出すことができない

逆をすれば、完成できる

具体的に次の一歩をイメージさえできれば、どんな目標へも一歩を踏み出すことができます
目先の一歩を考えなしに進むと、簡単に本筋から外れてしまう傾向があります
一歩に目を向けるのは、臆さず進み続けるよい方法です
その上で、大目標も見失わないようしなければいけません

「大目標は何か。今の課題は大目標につながるか」
ときどき自問します

壁が高く、行き詰ったとき

どんな難題でも前提条件を変えれば、別の手段で実現できます

期限を定めて完成条件を固定化する

開発の中盤で、期限と具体的な完成条件を固定化し、完成条件を満たした時点で開発は完了と見做します
開発者の最後の仕事は、煩悩を捨て開発に終止符を打つことです
１個のアプリ開発を超えてもっともっと大きな目標に目を向けます

2. アプリの売り方

販売プラットフォーム

Microsoft Store を使います
２４０か国、１０億人の市場に製品を届けられるからです
https://apps.microsoft.com/home

国内、アメリカおよびヨーロッパ向けなら Stripe を使ってください
https://stripe.com/
サービスと価格設定が優れています
しかしアジアは日本とインドとインドネシアと香港のみです

パッケージ

ストアにアプリを登録するためには、プログラム を msix としてパッケージ化する必要があります

1. cargo tauri build して、 ${projectRoot}/src-tauri/release/build/bundle/msi/app-name-version-en-US.msi を作る
2. 1 の msi を、以下の記事の手順通りに msix にパッケージ化する

shwld　さんが 2 の手順を無料でまとめてくれていて、とても簡単です

開発者アカウント開設

必要なものは１９００円以上の残高があるクレジットカードです

特にわかりづらい点、はまるかもしれない点を説明します

個人用アカウントか会社用アカウントか

「ビジネス、職業、業務に関係のない、独立した開発者」 という日本語訳が分かりづらいですが、法人登録していない個人事業主は個人用アカウントを選んでください。会社員で副業でアプリを作るときも個人用アカウントを選んでください。

「個人事業主はビジネス、業務に関係のある開発者なので個人アカウントではない」と言う人がいても安心してください。その人が間違えています
(証明)
個人事業主は会社用アカウントと仮定します
会社用アカウントを開設するには法人番号を入力する必要があります
しかし日本で個人事業主は法人番号を持っていません
よって個人事業主は会社用アカウントを開設できません
仮定と矛盾します
背理法によって個人事業主は個人アカウントです

申請エラー "Microsoft runs on trust"

何も考えずに、新しい Microsoft Account を @outlook.com のメールアドレスで作ってください。このアカウントで開発者アカウントを登録申請してください

1. https://signup.live.com/?lic=1 を開く（もしリンクが切れていたら、　sign up microsoft account で検索してください）
2. Get a new email address をクリック
3. @outlook.com を選んで好きなメールアドレスを入力
4. 以下画面の指示通りにキャプションやセキュリティのチェックをパスする

理由はわかりません。
フォーラムにも同様のエラーが複数あり、この方法で解決したと報告がありました。
自分もこの方法で解決しました。

価格設定、製品ページ作成、リリース

以下わかりづらい点、説明されていないけれど必要な作業を記載します

売上の受領方法と納税者情報の登録

開発者アカウントを作ったら、パートナーセンター（アプリの管理画面）に入れるようになります

支払いと税の追加

まずホーム画面から、マイアクセス を開きます

次に画面左下、下から２番目、支払いと税をクリックしてください

銀行口座かPaypalを選べます。Paypal は設定が簡単です

銀行口座の設定方法

Paypal を使う人はこの項を飛ばして、次の【納税情報入力】に読み進んでください

新規作成をクリックして、フォームに

• 好きな名前（○○銀行、など）
• Japan
• Electronic Bank Transfer

と入力して、Next をクリック

そして口座情報を入力します

• 全銀コード４桁と支店コード３桁
  • 全銀コードは "全銀コード 三井住友銀行"　などと検索すれば分かります
• 口座タイプ：当座(Checking)か普通(Savings)か
• 口座番号

最後に、住所を入力します
https://kimini.jp/ に住所を入力すると英語に変換できます

• Contact phone: 電話番号 090-xxxx-aaaa なら　8190xxxxaaaa と入力
• Company name on bank account: 口座の名前。個人の普通口座ならだいたい本名のフルネーム
• Address 1: 町村と番地。アルファベットで。東本願寺１－１なら　Higashi Honganji 1-1
• Address 2: マンションアパートなら部屋番号と建物名、戸建てなら空欄.
  • 例　#709 Grand Maison Kyoto
• Town/City: 市区群。アルファベットで。右京区なら Ukyo-ku
• Postal code: 郵便番号 xxx-xxxx のハイフン付きのフォーマットで入力
• State/Province: 都道府県 京都府なら Kyoto-fu

納税情報入力

以下は Edge か Chrome か Brave(Ad Block 無効化) で開いてください
Japan を選択して Next をクリック

再び住所を入力する欄がありますが、都道府県以外は自動で入力済みです
都道府県だけ選んで Next をクリック

なお Doing Business As (DBA) は、個人事業主が商売のための屋号や通名を使う場合です。
会社員、もしくは本名で開業届を提出した個人事業主は、空欄のままにしてください。

付加価値税は NO VAT を選択して Next をクリック

なお２段目と３段目はオーストラリアの税制に関する項目らしいです。当然入力不要です

最後に納税者詳細を入力します
セレクトボックスを開いて Launch Tax Form をクリックすると以下の画面が開きます
次の通りに入力して Continue をクリックしてください

1. 個人か組織か: individual (個人) を選択
2. アメリカ居住者か：　No (いいえ)
3. 日本在住の日本人は空欄

• 名前と苗字を入力
• 入力者は本人か: Yes
• Japan
• 住所入力: 口座情報入力の説明と同じように英語で入力します。 https://kimini.jp/ を使えば英語に自動で変換してくれます
• 私書箱か: No (入力した住所に実際に住んでいるなら No です)

• U.S. TIN: 空欄
• The account holder does not have a U.S. TIN: チェック
• Tax Residence: Japan
• TIN: 納税番号という項目ですが、日本には納税番号という制度はありませんので、マイナンバーを入力する決まりになっています
• Place of Birth: Japan, 生年月日
• Treaty Benefits: 詳細不明。とりあえず No にします

支払いと税の有効化

パートナーセンターで画面左下から支払いと税の付与を開きます
そしてMicrosoft Store のチェックをクリックして、鉛筆マークの編集アイコンをクリックしてください

Tax profile: Japan を選択します
画面下部に　Sell(アプリの売上) と Ads Revenue(広告収入)の２つの行があります
まず Sell を選択して鉛筆マークの編集アイコンをクリックしてください

銀行口座かPaypalを選んで、受取る際の通貨の種類（日本円）も選びましょう。

最後、忘れずに Submit をクリックしてください

プライバシー・ポリシー

ランニングコストを無料にするなら、Github Pages を使うといいです
専用のドメインを取得せずとも審査は通ります

もしアプリが個人情報を収集しないなら、以下の文言を書いておけば大丈夫です

英語だけ用意すれば世界２４０か国に販売することができます

Privacy Policy

This app does not collect or store personal data

Microsoft Store does collect some personal data

Please see https://www.microsoft.com/en-us/privacy/privacystatement

振り返り

繰り返しになりますが、価格設定、製品ページ作成、リリースの手順は以下の公式ドキュメントにすべて記載されています。
ノーコードで、管理画面から設定します。

そして、税と支払いの登録は、リリース申請を承認してもらうために必要です
その手順は説明したとおりです

申請後３日ほどで審査が終わり、すぐに Microsoft Store にアプリが公開されます
１０日もすれば、各国の Google 検索にもヒットするようになるので、ホームページを作る必要もありません

最後に

製品１
Windowsのための魔法です
今からSF映画みたいにプログラミングし、Lofi-アニメガールみたいに集中してください

敬
白