自分で考えたツールやサービスを、Web アプリとして公開してみたい。Web アプリは、ストアの審査がなく、URL を開くだけで使ってもらえるので、個人開発の最初の1本にも向いています。
この記事では、Web アプリの仕組みと、作るための技術の選び方、公開するまでの手順、公開先（サーバー）の種類、安全に作るための基本を紹介します。アイデアから宣伝までの全体の流れは、個人開発アプリの始め方でまとめています。
結論：小さく作り、手軽な公開先から始める
最初の Web アプリは、機能を1つに絞って作り、手軽に使える公開先で公開するのが近道です。 使ってもらえることが分かってから、機能やサーバーを大きくしていけば十分です。
Web アプリとは
Web アプリは、ブラウザで動くアプリです。 パソコンでもスマホでも、URL を開くだけで使えます。
| 種類 | 特徴 |
|---|---|
| Web サイト | 主に情報を読んでもらうためのページ |
| Web アプリ | ブラウザの中で、入力や保存などの操作ができる。インストール不要で、ストアの審査もない |
| スマホアプリ | ストアからインストールして使う。スマホの機能を使いやすいが、ストアの審査がある |
スマホアプリとの違いや作り方は、スマホアプリの作り方で紹介しています。
Web アプリの仕組み
Web アプリは、主に次の3つの部分でできています。
- フロントエンド：ブラウザに表示される画面。HTML・CSS・JavaScript で作る
- バックエンド：サーバーで動く処理。ログインやデータの保存などを受け持つ
- データベース：利用者が入力したデータなどを保存する場所
計算ツールや変換ツールのように、ブラウザの中だけで完結するアプリなら、フロントエンドだけで作れます。利用者ごとのデータを保存したい場合は、バックエンドとデータベースも必要になります。
必要なものと費用
| 必要なもの | 内容 |
|---|---|
| パソコン | Windows でも Mac でも作れる |
| コードを書くエディタ | 無料で使えるものが多い |
| ブラウザ | 作った画面を確かめるのに使う |
| 公開先（サーバー） | 無料の範囲で使えるサービスから、月額の料金がかかるものまである |
| ドメイン | 独自の URL を使う場合に必要。年単位の料金がかかる |
公開先やドメインの料金は、サービスや使い方によって変わり、改定されることもあります。使う前に、各サービスの公式の料金ページを確認しましょう。収益化を考える場合の費用の考え方は、個人開発は儲からない？アプリ・Webサービスの収益化の方法でも紹介しています。
作るための技術の選び方
技術は、作りたいアプリに必要なものと、自分がすでに使える言語から選ぶのが近道です。
画面だけで完結するアプリ：HTML・CSS・JavaScript
ブラウザの中だけで動くアプリなら、HTML・CSS・JavaScript だけで作れます。 サーバー側の処理がいらないので、公開も手軽です。画面が複雑になってきたら、JavaScript のフレームワーク（画面づくりを助ける仕組み）を使う方法もあります。
データを保存するアプリ：サーバー側の言語とデータベース
ログインやデータの保存が必要なアプリでは、サーバー側の処理とデータベースを用意します。 サーバー側の言語には、JavaScript（Node.js）、Python、PHP、Ruby、Go などがあり、それぞれに Web アプリを作るためのフレームワークがあります。慣れた言語や、調べたときに情報が多く見つかる定番の組み合わせを選ぶと、つまずいたときに解決しやすくなります。
サーバーを自分で持たない方法
ログインやデータベースなどの機能を、外部のサービスとして使える仕組み（BaaS と呼ばれます）もあります。 サーバーの管理を減らして、画面づくりに集中できます。使う場合は、無料で使える範囲や、利用者が増えたときの料金を、公式の情報で確かめておきましょう。
Web アプリの作り方：6つの手順
1. 作る機能を1つに絞る
最初は、「これがないとアプリにならない」という機能を1つだけ決めます。 ログインや設定画面などは、なくても使えるなら後回しにします。作るものの決め方は、個人開発のアイデアの見つけ方で紹介しています。
2. 自分のパソコンで動かす
まずは自分のパソコンの中で、アプリを動かしながら作ります。 画面を作り、機能を1つずつ足して、ブラウザで動きを確かめます。スマホでも使ってもらうなら、スマホの画面の幅でも崩れないかを確かめましょう。
3. コードを Git で管理する
コードは、Git などのバージョン管理の仕組みで管理しておきます。 変更の履歴が残るので、うまく動かなくなったときに前の状態に戻せます。公開先のサービスによっては、Git で管理しているコードから、そのまま公開できるものもあります。
4. 公開先を選ぶ
アプリの作りに合わせて、公開先を選びます。 次の章で、公開先の種類と選び方を紹介します。
5. ドメインと HTTPS を設定する
独自の URL で公開したい場合は、ドメインを取得して、公開先に設定します。 公開先のサービスが用意する URL のまま公開することもできます。
公開する Web アプリは、HTTPS（通信の暗号化）に対応させましょう。 多くの公開先では、HTTPS を簡単に有効にできます。たとえば Let's Encrypt は、HTTPS に必要な証明書を無料で発行している認証局で、証明書の取得から更新までを自動化できます。
6. 公開して、使ってもらう
公開したら、まず身近な人に使ってもらい、感想をもらって直していきます。 利用者の情報を扱う場合は、プライバシーポリシーも用意しましょう（アプリのプライバシーポリシーの作り方）。SNS で共有されたときの見え方は、OGP の設定で整えられます。
公開先（サーバー）の種類と選び方
| 種類 | 向いているアプリ | 特徴 |
|---|---|---|
| 静的サイトのホスティング | 画面だけで完結するアプリ | HTML・CSS・JavaScript のファイルを置くだけで公開できる。無料の範囲で使えるサービスもある |
| PaaS（アプリの実行環境を提供するサービス） | サーバー側の処理があるアプリ | サーバーの細かい管理をせずに、コードを置いて動かせる。使った量に応じて料金がかかるものが多い |
| レンタルサーバー | PHP などで作ったアプリ、Web サイトと一緒に置きたい場合 | 月額の料金で、Web サーバーやデータベースがあらかじめ用意されている |
| VPS・クラウドのサーバー | 自由に環境を作りたい場合 | OS からすべて自分で設定できる。そのぶん、セキュリティの更新などの管理も自分で行う |
最初は、管理の手間が少ない公開先から始めるのがおすすめです。 サーバーの管理に時間を取られると、アプリを良くすることに使える時間が減ってしまいます。どの種類でも、無料で使える範囲と、利用者が増えたときの料金を、事前に確かめておきましょう。
安全に作るための基本
Web アプリを公開すると、世界中の誰でもアクセスできるようになります。 利用者の情報を守るために、基本的なセキュリティの対策を知っておきましょう。
IPA（情報処理推進機構）は、Web サイトの開発者や運営者向けに「安全なウェブサイトの作り方」という資料を無料で公開しています。届出の件数が多い脆弱性や、影響の大きい脆弱性を取り上げ、その対策や、失敗例と直し方を説明しています。取り上げられている脆弱性は、次の11種類です。
- SQL インジェクション
- OS コマンド・インジェクション
- パス名パラメータの未チェック／ディレクトリ・トラバーサル
- セッション管理の不備
- クロスサイト・スクリプティング
- CSRF（クロスサイト・リクエスト・フォージェリ）
- HTTP ヘッダ・インジェクション
- メールヘッダ・インジェクション
- クリックジャッキング
- バッファオーバーフロー
- アクセス制御や認可制御の欠落
すべてを一度に理解する必要はありませんが、ログインやデータの保存がある Web アプリを公開する前には、目を通しておきましょう。フレームワークには、こうした脆弱性への対策の機能が用意されていることも多いので、使っているフレームワークの公式のドキュメントもあわせて確認すると安心です。
まとめ
- Web アプリは、ストアの審査なしで、URL を開くだけで使ってもらえる
- 画面だけなら HTML・CSS・JavaScript、データを保存するならサーバー側の言語とデータベースが必要
- 機能を1つに絞り、自分のパソコンで動かし、Git で管理してから公開する
- 公開先は、静的ホスティング・PaaS・レンタルサーバー・VPS などから、アプリの作りに合わせて選ぶ
- HTTPS に対応し、IPA の「安全なウェブサイトの作り方」で基本の対策を確認する
公開したら、使ってくれる人を少しずつ増やしていきましょう。宣伝の方法は個人開発アプリ・ゲームの宣伝方法でまとめています。
