プログラミング初心者が webサービスをローンチするまでにやったこと

#はじめに

この記事はwebサービスの初心者向けの記事になっています。

私自身プログラミングを本格的に学び始めて約2ヶ月ですが、個人開発者としてwebサービスをローンチするという経験を早めにしたかったのでサービスを作ってローンチまでやってみました。その時にプログラミング以外の事で取り組んだ事が多かったので記事にしてみました。

これまでプログラミングを勉強してみてそろそろwebサービスを作ってみようかなと思っている方の参考になれば幸いです。

##作ったwebサービス
今回作ったサービスがこちらです。
Googleのストリートビューを撮影、保存できるサービスです。
[Stosho](https://stosho.org/stosho/)


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">プログラミングを本格的に学び始めて約2ヶ月。作ったサービスをリリースしました！ストリートビューを保存・共有出来るサービスです。<br>コードも汚いし、バグも多いですが使ってくれると嬉しいです。<br>フィードバックもらえると助かります。<a href="https://t.co/OgHwKxWgfH">https://t.co/OgHwKxWgfH</a>… <a href="https://twitter.com/hashtag/stosho?src=hash&amp;ref_src=twsrc%5Etfw">#stosho</a> <a href="https://t.co/OnzhFnSAXD">pic.twitter.com/OnzhFnSAXD</a></p>&mdash; ko (@kolife01) <a href="https://twitter.com/kolife01/status/1007187972087664640?ref_src=twsrc%5Etfw">2018年6月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


GoogleMapAPIとStreetViewAPIを使って、検索した場所のストリートビューの写真を保存、SNSのように投稿出来るようにしました。


#ローンチする為にやったこと
今回の本題です。
webサービスをローンチするために以下４項目を気をつけて行いました。

・セキュリティ、規約関連
・UI・サービスの作りこみ
・バグ出し
・その他


##セキュリティ、規約関連
一番気を遣ったところです。
多くの人に使われて、サービス内で問題が起きるということは避けたかったので、セキュリティと規約関連はしっかりと行いました。
(結局多くの人に使われなかったｗ、ですがこの経験は次に生きるはず）

###利用規約
Webサイトは、ユーザーや第三者との間でトラブルを生じることがあります。このようなトラブルが発生したときに、それを解決するルールとなるのが利用規約です。利用規約をしっかりと記載して置くとトラブル防止になります。

利用規約はこちらのフォーマットを基に作成しました。
http://kiyaku.jp/hinagata/sns.html

利用規約を活かすには、「同意」の手続きが必要ですので、今回はこのようにユーザー新規登録画面に同意するボタンを設けました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/899cfb15-329d-16cc-d11d-06fb9b190e2e.png)


###プライバシーポリシー
プライバシーポリシーとはインターネットのウェブサイトにおいて、収集した個人情報をどう扱うのか（保護するのか、それとも一定条件の元に利用するのか）などを、サイトの管理者が定めた規範のことです。

プライバシーポリシーはこちらのフォーマットを基に作成しました。
http://kiyaku.jp/hinagata/privacy.html

![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/016e704f-0d1c-9580-2b66-69ae26386f06.png)

###copyright
著作権についてフッターに記載しました。
<img width="807" alt="Screen Shot 2018-07-04 at 16.00.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/200669/432d9654-6986-21b3-eb04-f424bf4ffe2d.png">


###問い合わせフォーム
何か不具合や要望があった時に窓口になるところです。
簡単なのでGoogleフォームで作りました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/a6c44b0c-857d-958a-75a5-615983ec54c7.png)


###Google規約の読み込み
今回ストリートビューの画像を取得するため、googleの規約に違反していないか調べました。StreetViewAPIを使った画像の使用は良いとの事。APIを使用すると画像にgoogleやcopyrightが自動的に入るようになっています。
[Google マップ、Google Earth、ストリートビューの使用](https://www.google.co.jp/intl/ja/permissions/geoguidelines.html)

###APIキーのセキュリティ設定
APIキーは知らない方々に使われるのはまずいので、自分のサイトでしか使用出来ないようにgoogleAPIの方で設定しました。

###コードレビュー
セキュリティや、重大なバグがないか第三者の視点で確認してもらいます。
今回はプログラミング学校の先生にお願いしてコードレビューをして頂きました。


##UI・サービスの作り込み
これは当然ですが、ローンチを目標にしたwebサービスはUIやサービスの作り込みに力を入れました。
ユーザーの大半はモバイルなのでレスポンシブデザイン前提で開発しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/200669/5112b10a-ecda-5d3b-f8a2-6b9e72705e55.png)


###Facebook Twitterシェア
使ってくれる人を増やすために写真を撮った後にfacebbookやtwitterでシェアできる機能をつけました。シェアするときのサムネイル画像やタイトルがしっかりと表示されるようにheadタグ内のmetaタグの情報も撮った写真が挿入されるようにしました。


<img width="580" alt="Screen Shot 2018-07-04 at 15.37.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/200669/4008dd63-cdd4-d554-a7fd-e73e3a4ba574.png">


##サービスチェック
企画〜開発、ローンチまで1週間という過密日程でしたが、最終日はひたすらバグ出しに当てました。
ひたすら自分で使う→予想もしてないバグ分かる→直すの繰り返しです。

##その他
###独自ドメイン取得 SSL設定
サービス名のドメイン取得、サクラサーバーでSSLの設定を行いました。

独自ドメイン
https://stosho.org/stosho/index.php

SSL設定
[【無料SSL】サーバコントロールパネルからの導入手順](https://help.sakura.ad.jp/hc/ja/articles/115000136822--%E7%84%A1%E6%96%99SSL-%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%91%E3%83%8D%E3%83%AB%E3%81%8B%E3%82%89%E3%81%AE%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86)

###グーグアナリティクス
webサービス利用者、訪問者数を把握するためのグーグルアナリティクスを導入しました。
ちなみにこちらが今回出したサービスのグラフで、ローンチ初日こそ友達や同期がみてくれましたが、約1ヶ月経ちほとんど使われていませんw

<img width="685" alt="Screen Shot 2018-07-04 at 15.45.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/200669/6dbf9329-17ba-bd2d-ac99-04256766bb1e.png">


#終わりに
webサービスをローンチするまでにやる事は多かったですが、一度やってしまえば次に使いまわせるものが多いです。最低限、利用規約とプライバシーポリシー、セキュリティだけ抑えておけば良いと思います。
あとはローンチするとやっぱり人に使ってもらえるのは難しいと改めて感じました。
ローンチする事で学びが多かったので、ぜひwebサービス作ったらローンチしてみてください！

#宣伝
宣伝ですw
今回の題材のwebサービスです、使ってもらえたら嬉しいです！
[https://stosho.org/stosho/index.php](stosho)