webサービス(webアプリ)を1年独学で個人開発してきた僕の作り方

Pocket

webサービス・webアプリケーション・HP・androidアプリなんかを独学で作り始めて、1年くらい経ちました。始めたころはwebサービスの全体像がよくわからず思うようにいかないことが多かったのですが、言語や環境関わらずいろいろ作っているうちに、webサービスを企画してから公開するまでの一連の流れがようやくしっくりくるようになってきました。

今回は最近開発したScrapeApeというサービスを例に、webサービス開発の始めから終わりまで、その作り方を公開します。

※普通のエンジニアさんならよくご存知の内容ばかりですが、僕がいろいろ開発してきた中で疑問にもった内容を詰め込んでます。これからwebサービスの開発をしたいと考えている方や挫折しかけている方におすすめの内容です。
※細かい技術的な部分は間違いもあると思います。僕自身、技術は作りたいものを作るために必要最低限で良い!と考えているので、間違い箇所はごめんなさい。

これまでつくったものまとめ

おしゃべりおじさんおしゃ吉

androidアプリです。画面におっさんが出てきて、そのおっさんに話しかけると話した内容を倍速にして返してきます。ちょっとうざいだけの完全ネタ系アプリですが、音を判断して録音を開始し、一定時間無音が続くと録音を停止し、倍速にして再生するというロジックが、以外と大変でした。

DanceMovieOohWee

ダンス動画のキュレーションサイトです。Wordpressを使って普通に記事を更新するというものなので、webサービスとは呼びません。こういったキュレーションサイト・ブログ・コーポレートサイトなどとwebサービスでは構築の方法が大きく異なってくるのですが、当時はこのあたりがはっきりせず混乱していました。具体的にどのように異なるかは後ほど言及します。

カスタマイズが簡単なWordPressテンプレート『bones』4つの特徴

オンラインメモ

アクセスするとサイト上でメモを取り、メモ内容がローカルストレージに蓄積され、再度アクセスした時もその内容を編集できるものです。このローカルストレージは新しいcookieみたいなもので、ユーザーのブラウザにメモ情報がたまる作りになってます。

素人がWebサービス(Webアプリ)を一人で開発しリリースする方法




今回作ったwebサービス『ScrapeApe

今回はScrapeApe|スクレイピング自動化 オートブラウジングツールというツールを作りました。

FireShot Capture 19 - ScrapeApe - https___scrapeape.herokuapp.com_scrapes

サービスの概要

ScrapeApeはユーザーが登録した情報をもとに、任意のwebサイトから自動的・定期的に情報を収集するwebサービスです。
ユーザーに定期的に確認したいwebページのURLやXPathを登録してもらい、あとは裏側のスケジューラー(他の言葉ではバッチ、タスクとか言います)が定期的にスクレイピングを実行し、DBに保存。ユーザーはあとからサイトにアクセスし、溜まったスクレイピング結果を一覧で見れます。
ちなみにスクレイピングとはwebページの任意の部分を削り取る技術で、かなり広い用途に活用できます。

採用した技術や環境

・開発言語:ruby on rails
・バージョン管理:git
・インフラ:heroku
・デザインテンプレート:bootstrap3

開発の流れと期間

・企画構想:2時間
・ローカル開発環境構築:2時間
・ruby on railsのキャッチアップ:4時間
・DBや画面遷移の設計:1時間
・プログラム実装:5時間
・本番環境へデプロイ:3時間
・SEOや告知など集客全般:4時間

こんなかんじで丸2日くらいで完成させました。
ruby on railsとherokuは今回はじめて使ったので、それぞれのキャッチアップをしながら徐々に実装していきました。

それではこの流れを追いながらwebサービスの全体像をご説明します。




企画構想

Wallchart_Strategic-Planning-Process_Poor

まずは何を作るか?です。
何を作るかは一人で開発する上でもちろんめちゃくちゃ重要な決定事項です。
作りたいと思うものの技術的なハードルやサービスの規模、サービス提供開始後の継続的なメンテナンスの必要性などによっては、1人ではかけられる時間の限界を簡単に超えてしまうためです。

いろいろな制約がある中で、1人でプロダクトを開発する上で重要だと感じることがいくつかあります。

ちなみに、お金儲けを目的にするとwebサービスのマネタイズの種類(課金・マッチング・広告・EC)とかの話になるんですが、もっと初歩的な内容です。

自分の課題解決を目的にする

スタートアップ界隈のバイブル的な本である『リーンスタートアップ』では、まずプロトタイプの製品を開発して、早い段階でユーザーのフィードバックを獲得し、製品の改善を行う。このサイクルを高速化させることが大事だ、とされています。
もう、とってもおっしゃる通りなんですが、初心者が1人で開発を行うときはこのプロトタイプを開発するだけでヒーヒーです。プロトタイプを開発する時点でなるべくユーザーの声を聞くためには、自分自分をユーザーとして、これがあると自分が嬉しくなる、というような課題解決を目的として作ると良いと思います。
例えば
・釣りが好きなら釣り好きな人たちが集うコミュニティを作る
・テレビを一人で見ることが多い人が、同じようにテレビを見ている他人とリアルタイムで感想を述べ合うSNS
など、自分の作りたいものを作ることでモチベーションも保てます。

そのプロダクトだけで完結しないパワフルな製品にする

webサービスでよくあるのは、例えば特定の分野の写真を投稿するものや、行った場所やダイエットの記録をつけるものなど、そのサービスに何かの情報を記録して、保存して、表示する、というものです。
個人的には、これだけだとそのサービスで完結してしまうため、もっと付加価値をつけるために他のサービスとか情報とかと組み合わせるといいんじゃないかと思います。

組み合わせ①外部API

API(Application Programming Interface)とは、プログラム同士が情報をやりとりをする取り決めです。
FacebookのAPIを利用してユーザーの個人情報を取得したり、wikipediaのAIPを利用して専門的な知識を活用するなど、外部のサービスが持っているリソースをただで利用することができます。

例えば、wikipediaには今SNS連携の機能がありませんが、ここでもしFacebook連携の機能をつけたら、、と考えるわけです。
ユーザーはFacebook情報にて会員登録して、閲覧情報は全てwikipediaに保存されている情報を活用。会員管理するので閲覧履歴は自動で溜まって、閲覧したページが多いほど知識ランクが高い、みたいなサービスを作って『FacePedia』のような名前をつければ、立派なサービスです。
※実際はwikipediaのAPIでどこまで出来るか次第で、検証してないです。

APIはまだ国内においてはあまり知られてないものも多いようなので、これを探して興味のあるものがあれば、まだ日本では現存していないサービスを開発出来る可能性がありそうです。

組み合わせ②スクレイピング・クローリング

スクレイピングやクローリングは、プログラムで自動的にインターネット上から情報を取得してくる技術です。グーグルのクローラーが回遊して、取得したページを検索結果に表示させるというのは有名ですが、これで使われている技術です。

APIが提供されていないwebサイトから情報を取ってくることができるので、例えば複数の不動産のサイトから物件情報を根こそぎ取ってきて、全部一括で比較するようなサービスが作れます。ただ、実際はスクレイピングを禁止しているサイトとかもあるので、その辺りは実施する上で注意が必要です。

今回僕が作ったScrapeApeはこのスクレイピングの技術を活用して、webサイトでの情報収集を定期的に自動で行う、という作業効率化の付加価値をつけるようにしています。




キャッチアップ

learn-everything-e28f7072986a7495c323ec36ecfffe23

何を作るかが決まったら、作るために必要な技術や知識をキャッチアップします。
そのためには、作るものの機能を細分化していって、そのために必要な勉強をします。

ただ、初めてwebサービスを作る方からしたら何からやればいいかもわからないと思います。ざっくり、どんなwebサービスを開発する場合でも必要になる知識をまずリストアップしてみました。

webサービスに必須の技術や知識

①HTML・CSS
・HTML:webページの内容(コンテンツ内容やコンテンツの重要度、役割などを)を定義したもの
・CSS:webページの見た目を装飾するもの
この辺は解説しているページがたくさんあるのであまり書きませんが、ようはサイトのページそのものを書く技術です。webサービスの場合、プログラムが自動的にHTMLを生成してブラウザに返して、ユーザーに表示されます。

②プログラミング言語
例えば単なる自己紹介のwebページを作るだけなら、自己紹介文をHTMLで書いて表示するだけで事足ります。
しかし、生年月日に従って自動的に年齢を計算して表示したり、データベースにプロフィール情報を保存してその内容を表示したりするためには、必然的に何かしらの計算や情報処理が必要になります。こういった場合にはプログラミング言語でその処理内容を定義してあげないといけません。

webサービスと親和性の高い言語は、PHPやruby、Javaなどです。よくどの言語が良いか、みたいな議論があると思いますが、これは好き嫌いなので別になんでも良いと思います。周りに教えてくれる人がいると良い、という意見もあるので、もしそういった方がいればその言語にすればいいんじゃないでしょうか。
ただ、ぶっちゃけそんなに大したものを作らないレベルの僕からするとどの言語で作ってもアウトプットは変わらないので、本当になんでも良いというのが正直な所です。

プログラミング言語に関しては、HTMLとプログラミング言語をどう関連付ければ良いか、最初よくわかりませんでした。
イメージ的には、HTMLで書いた中に、言語毎に決められた書き方で処理内容を書くという感じです(PHPとruby以外はわかりません泣)
なので、よくわからない方は、『なんだ、1つのファイルの中に同居させられるのね』、と安心してくれれば、と思います。

③webの仕組み
①②のような言語的な話は実はサービス全体の中では実は細かい枝葉の部分だったりします。
webサービスにはユーザーが何か入力などをして、その情報を基にまた何かがユーザーに返されるという流れがありますが、これをなんとなくでも良いので掴んでおくと楽かな、と思います。

具体的には、下記の感じ。
・ユーザーのブラウザからhttpリクエストという”お願い”が発信されます。この”お願い”は大まかに『こんな情報くれよ(GET方式)』『こんな登録がしたい(POST方式)』という2種類がよく使われます。
・httpリクエストはwebサービスが格納されているサーバーに飛ばされ、処理されます。『こんな情報くれよ(GET方式)』で自己紹介の性別が指定されれば、性別の情報がデータベースから引っ張り出されます。
・そして、webサービスの中で性別の情報が見やすい形で生成され、HTML形式でユーザーのブラウザにレスポンスとして返されます。
・最後にブラウザがHTMLファイルを読み込み、人間が見やすい形で表示するのです。
このようにどんなリクエスト・レスポンス・情報が渡され、処理されているかのイメージがつくと、作業がすっごくはかどるようになります。

④SQLによるデータベース操作
データベースを活用しないwebサービスも作れますが、情報を蓄積しないものは大して何もできないので、データベース操作はほぼ必須の知識です。
どのデータベースにどんな処理( よく Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)の頭を取って”CLUD”と呼びます)をさせるかはSQLというデータベース言語を使って実施します。

ScrapeApeでの必要機能の洗い出し例

さて、長くなりましたが今回ScrapeApeを作る上で必要になりそうなことは下記のように想像して、その後キャッチアップを行いました。

・スクレイピングをrubyで実装する
・ユーザーがスクレイピングのテストを行える
・スクレイピングが成功するとその内容を保存できる
・保存した内容をもとに自動でスクレイピングが定期的に実施される
・ユーザーが登録したスクレイピング情報を閲覧できる
・登録されるスクレイピングが増える可能性もあるので、検索機能が必要

ざっとこんな感じで必要機能を書き出し、どんな書き方をすると実現出来るのか、キャッチアップをしながら部分的に試しつつイメージを固めていきます。

キャッチアップの方法

身につけないといけない技術がわかると、その勉強を始めます。

おすすめのキャッチアップ方法は、まずドットインストールで必要な部分をざーっと勉強して、ドットインストールで言及されていない部分は地道に検索して知識をつける、という流れです。

動画でレクチャーしてくれたりチュートリアルに従ってコードを書く練習が出来るサービスが最近多いですが、正直入門本を片手にコードを写経するようなものに感じます。僕の場合、作りたいもののために必要な知識だけつけられればそれでハッピーなので、あまり基礎からみっちり系のことはやりません。このあたりは好みですね。

ドットインストールだけは本当に最強の教育サービスだと思うのですが、
①簡易的なサービスを実際に作る、という内容が多くかなり実践的
②結構レベル高いものも多い(twitterAPI連携ツール作りましょう、とか)
という特徴から、今回なんかは特に参考にさせて頂きました。

少しそれますが、code4startupという海外のサービスがあり、レクチャーに沿っていくと現存するwebサービス(airbnbなど)を模倣したサービスを構築出来るらしいです。
サービスの全体像をどう設計したらいいか、いつもかなり悩みますし1人で勉強するいい方法が未だに見つかっていないので、時間とってこのサービスを使ってみたいと思う今日このごろです。

あとは、細かい部分をひたすらググッて調べます。
今回ですと、”rails スクレイピング”、”rails 検索”といったワードでググりまくりました。




全体像と設計

続いて設計の部分ですが、今回作ったwebサービスはかなり小規模なものなので、設計的に大変だったり工夫する部分はありません。

どちらかと言うと、
・環境ってなに?開発環境と本番環境?
・開発環境で作ったとして、どうやって本番環境に移行(デプロイ)すんの?
・MVCってなに?言語とかサーバーとかミドルウェアとかネットワークとかいろんな用語があるけど、どこに位置してどんな意味があるの?
・webサービス作るときもCMSとか使うの?
といった、初心者の僕にとっては概念的・抽象的すぎてイメージがつかなかった部分の解説も交えます。

今回のwebサービスの全体像を図にしたので、これ交えてご説明します。

ScrapeApeArchitecture

環境と環境構築

まず、環境ってなんだ?という部分です。上記でwebの仕組みを簡単にお伝えしましたが、ユーザーが見ているブラウザからのhttpリクエストは、どこかに物理的にあるサーバー(コンピューター)に飛ばされます。このサーバーは受け取ったリクエストに対してレスポンスを生成して返しますが、その一連の処理をするかたまりが環境です。

ひとかたまりの環境には、処理を行うための様々なものが必要です。例えば
・レスポンスを受けて起動させるプログラミング言語
(PHP ruby Java Perl Python など)
・プログラムを効率的に上手に組むためのフレームワーク
(PHPのフレームワークなら CakePHP FuelPHP、rubyならrails など)
・データを格納するためのデータベースソフトウェア(MySQL SQLite PostgreSQL など)
といったものです。

そして、環境には採用したプログラミング言語やフレームワーク、データベースソフトウェアをインストールして、使える状況に環境構築する必要があります。インストール作業は通常はmacならターミナル、windowsならコマンドプロンプトを使います。真っ黒の画面で文字だけ書いていく、あのいかにもギークな感じのソフトです。

レンタルサーバーなど本番環境なら、インストール作業はボタン一つでできたりします。
レンタルサーバー以外の環境ってなんだ?という話になるのですが、開発環境と本番環境の概念も、僕は最初よくわかっていませんでした。

ローカル開発環境と本番環境

よくプログラミングを勉強しましょう、といった内容のページや本で学習すると、ローカル開発環境という言葉が出てきます。これはつまりは自分のパソコンの中に、httpリクエストを受け取ってレスポンスを返す機能を構築して、その中でプログラミングをしてテストしましょうというものです。
macならXAMPPとかMAMPといったソフトをよく使いますが、これらによって自分のパソコンの中に、レスポンスを吐き出すためのapacheやデータベースを構築することができます。これがローカル開発環境(テスト環境と言うこともある)です。上の図では左下の部分ですね。

XAMPPやMAMPは起動や停止という概念がありますが、環境というのはスイッチをオンにしないとリクエストを受け取っても何もできません。常にスイッチがオンの状態で全世界に対してレスポンスを返し続ける環境、つまり本番環境が必要になります。

webサービスは24時間365日使えるのが大前提なので、スイッチがオフになっているなんてありえないことです。しかし、自宅のパソコンを常に起動させて環境をオンにしておいてレスポンスを返し続けるというのは現実的ではありません。
24時間365日オンになっていて、あなたの開発したwebアプリケーションを動かす環境を提供するのが、外部のレンタルサーバーやherokuなど、いわゆるインフラ面のサービスです。

今回はruby on rails(rubyはプログラミング言語、railsはフレームワーク)で開発したので、親和性が高いと言われているherokuというサービスを使いました。上の図でいう真ん中の部分ですね。
いままで僕はレンタルサーバーを使っていたのですが、今回せっかくherokuを使ったので違いとかを書いてみようと思います。

レンタルサーバー

ロリポップ、さくらインターネット、Xservreといったベンダーのサービスが有名です。
レンタルサーバーはその名の通り、外部のサーバーを借りて、その中にプログラミング言語とかをインストールして環境を構築します。そしてローカル環境で開発したプログラムをサーバーに格納することで、全世界に対して公開ができます。

FTPソフト(外部サーバーと自分のパソコンをつなぐソフト)を使ってレンタルサーバーに直接ファイルをアップロード出来るので、最初のうちは何をしているかわかりやすかったです。また、herokuと比べるとアナログですが、逆に手作業でまかなえることが多いので、無理やりなにかするということがし易いです。

heroku

herokuはレンタルサーバーよりも一段階至れり尽くせりです。具体的には、PHP,Perl,Rubyなどのプログラム実行環境を提供し,MySQLなどのデータベースなども標準で用意しています。ところが、レンタルサーバーでも(ものによると思いますが)このあたりの環境設定はボタン一つで可能です。
大きく異る点は、サービスの規模が大きくなったときに、簡単にスケールアップ出来るという点らしいのですが、お察しの通り、1人で開発したwebサービスを巨大に成長させるのは至難の業です。。

MVCって何?

ここまでで、ローカル環境・本番環境の両方に開発したプログラムが入っていることになる、とお分かりいただけると思います。上の図では本番環境と書いた枠の中のアプリケーションと書いた部分です。
では、その開発するプログラムはどのような方針や設計で作れば良いのでしょうか。web系のプログラムですと、MVCという概念で設計することがお作法みたいになっています。

MVCも調べればいっぱい出てくるのでここではあんまり語りません。というか、どのプログラミング言語でも何かしらのフレームワークを採用すれば、MVC型のアーキテクチャのサービスを開発することになります。それらのフレームワークはMVCのお作法で開発することを前提としているのです。
むしろ、このフレームワークとかMVCという概念は取り入れないといけないものなのでしょうか。僕はとりあえず何か作るのなら、別に踏襲しなくてもいいと思います。

例えばScrapeApeをrails(rubyのフレームワーク)を活用しないで開発したとすると、多分ファイル構成は下記みたくします。

・トップページを作るファイル スクレイピング登録を受け付ける
・登録されたスクレイピングを検索するページを作るファイル
・サービス使い方のページを作るファイル
・データベース操作や関数をまとめたファイル(functions.rbとかにする)

ページを作る3つのファイルは、ヘッダーとか共通する内容も多いけど(本来はテンプレートファイルみたいなものを作るべき)ページの数が少ないからシカトします。ScrapeApeはめちゃくちゃシンプルで、今後の拡張性もあまり考えていないのでこのくらい安易な作りでも良いかな、と思います。

MVCはお作法的な概念なので、特に必須ではない、ということをお伝えしたいです。
ただ、実際はフレームワーク使ってMVCに則ったwebサービスを開発するのは、結構効率的だと思います。

バッチ処理はどうするの?

サービスを作っていると、ユーザーの行動に応じて何か表示するMVC的な部分とは全く別に、定期的に自動的に動作するプログラムもよく必要になります。
例えばデータが増えすぎると無駄なデータとか活用されていないデータを自動的に消す、みたいなことです。

これは、レンタルサーバーやheroku側の機能で補填することができます。cronやスケジューラーと呼ぶのですが、それぞれの環境で登録しておくと自動で実行されます。さらに、もしフレームワークを活用する場合は、大体”バッチのような自動処理はこのディレクトリに定義してね”、という領域があるので、そこに書きます。

webサービス作るときもCMSとか使うの?

まず簡単にCMSとは?というお話ですが、CMSとは(Contests Management System)の略で、webサイトにアップする記事・特集ページ・静的ページなどのコンテンツを効率的に管理するツールです。例えばニュースサイトで記事を書く場合、記事は静的ページなのでHTMLファイルをアップロードすれば良いのですが、例えば記者の方はHTMLがわからないとか、後で編集するときにいちいちHTMLファイルを探さないといけない、一括で編集ができない、、など手間がいっぱいかかります。CMSはそういったことを簡単にするためのものなので、ほとんどのwebサイトで活用されます。現にいまご覧いただいている僕のブログも、Wordpressを使って作ってあります。

ほとんどのwebサイトで活用されるのですが、実はwebサービスを構築するときは、CMSは基本使いません。
ブログなどを書いている方がwebサービスを始めようと思うと、見た目を綺麗にしたいから、テンプレートの多いWordpressを使おう!みたいな考えになるかもしれませんが、下記のような理由であまりおすすめしません。

・そもそもCMSには構築するwebサービス自体に何か処理能力を付与するといったことをあまり前提としていない。
・処理能力をもたせようとすると、CMSをカスタマイズしたり無理やり処理する機能を外に作る必要がある。
・Jqueryなど、CMSごとに独自のものを活用しているため、自分が使いたいと思うものと互換性が合わず、バッティングする。

では、よく見るwebサイトみたいにカッコいい見た目にするにはどうするんだ、という話になるのですが、デザインフレームワークを使います。

デザインフレームワーク

CSSフレームワークやデザインテンプレートとかいろんな言葉があります。
ようするに、簡単にサイトの見た目を綺麗するためのすぐに使えるデザイン集です。

有名なところだと、BootstrapやGoogle MaterialDesignで、僕は大体Bootstrapを使います。理由は有名で使い方の解説がそこらへんにたくさんあるのと、自分自身がBootstrapに慣れてきたからです。

デザインフレームワークは、webサービスの任意のディレクトリに配置し、HTMLからそのフレームワークを読み込みに行くことで(HTMLファイルの中でパスを記載する)使えます。
上の図だと、本番環境の中のプログラムの中のViewの隣にBootstrapとありますが、ViewがHTMLを生成するときに読みに行っているイメージです。




開発

全体像がわかってくると、それを実現するべくローカル開発環境でガリガリプログラミングを進めていきます。

初心者のうちは必然的にいろんなサイトからソースコードをパクってコピペして微調整して、という方針で開発を進めると思います。ここで覚えておくと大事なのは、デバッグという概念と、デバッグの方法です。

デバッグが大事

デバッグはバグを取り除く、つまり問題点を見つけてそれを修正するという作業です。
いろんなサイトにソースコードがあるので、やりたいことの実現方法はたくさんあります。しかし、1人で作っているとコピペしてもそれがうまく動かないときに、どうして良いかわからず立ち往生してしまいます。
そこで、いろんな方法で問題点を見つけるアプローチがあります。

サイトに表示させる

手っ取り早い方法です。問題が起きている箇所の直前で、保持しているデータの内容をサイトのフロントに表示させるというアプローチで、
例えばPHPならプログラムの中に ”echo 中身を見たいデータ” とか、 “var_dump(中身を見たいデータ)”という風に書くことで、この内容がサイトに表示されます。

フレームワークのデバッグ機能を使う

使うフレームワークによって、デバッグ機能がついていると思います。基本的には上のサイトに表示させるという方法を似ているのですが、もっと細かく見ることができます。
この方法も、プログラムの中にフレームワークごとに定義された方法でデバッグの命令を記述します。

httpリクエストの中身を見る

httpリクエストをうまく送れていないことが不具合の原因だったりします。
例えば名前を入力して保存ボタンを押して、サーバー側でデータベースに登録する、といった時に、自分はサーバーの登録処理に問題があると思っていても、実際は保存ボタンを押しても入力した名前がリクエストとして送られていなかった!みたいなことがあります。

こんな時は、Chromeのデベロッパーツールでnetworkタブを開いて、レスポンスの内容を見ます。

howtodebug

こんな感じです。この方法を覚えてからは結構効率的に問題点を見つけられるようになりました。




本番環境へデプロイして公開

さて、なんとかwebサービスをローカル環境で作ると、次は全世界への公開が待っています。
公開のために必要なものと手順を追って説明します。

本番環境を用意する

上で説明したレンタルサーバーやherokuのような外部サービスに登録します。

ドメインを取得する

ドメインとは、webサイトやwebサービスのインターネット上での住所を表すもので、このブログであれば http://mtitg.com/ です。
サービスによってはドメインを無料で取得出来ることもありますが、完全に自由なドメインにする場合は数百円~数千円払う必要があります。サービスを大きくしていくつもりだったら必要ですが、とりあえず何か作る、くらいであればこだわらなくてもいいと思います。
実際今回ScrapeApeのドメインは https://scrapeape.herokuapp.com としてあります。このドメインはherokuが無料で用意してくれているもので、無料のドメインだと必ず “https://~ここは自由に決められる~.herokuapp.com” というドメインになります。
herokuであれば、後からドメインを取得してもすぐ変えられます。なので最初は無料のドメインを使っても良いんじゃないでしょうか。

本番環境へデプロイ

自分のパソコンのローカル開発環境から、契約したサーバーなどにプログラムをコピーします。

データベースにテーブルを作る

プログラムだけだと、webサービスはまだ動きません。データを格納するためのデータベースに、テーブルが出来ていないのです。
そのため、ターミナル・コマンドプロンプトから直接SQL文を送ったり、レンタルサーバーの管理ツールでテーブルを作ったりします。

集客や拡散周りを行う

もう公開は目前です!
あとは細かい部分をざっとやってしまいます。

・google analytics設定を行う
・web master登録をする
・SNSのシェアボタンをつける
・SEO対策をする
  goodkeywordsとkeiwordplannerで狙いに行くワードを決める
  titleタグを記載
  meta descriptionタグを記載
  hタグの階層を整える
・拡散のためにいろんなwebサイトに登録する
 ※これは以前記事を書いたのでご覧ください。
 新しいWebサービスの宣伝・拡散は普通にやってちゃ駄目だこりゃ

こんなところでしょうか。集客系はやりだすと終わらないので、チェックリストなどを眺めて、ここまでやろう、というラインを切ってやると良いと思います。

いかがでしょう、僕が1年間やってきてなんとなくイメージがつかずにモヤモヤしていた『サービスの全体像』や、『全体像の中での各領域の関係性』を全部ご紹介してみました。是非、みなさんのwebサービス開発に役立ててください。


 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>