はじめに

Web初心者なので大変おこがましいと思いながらも、サービスをリリースするまでの過程について、備忘録も兼ねて記載していきたいと思います。ポートフォリオも兼ねているため、今回収益化は度外視しているので、広告も出していません。次回以降は収益化も考慮して、より使ってもらえるサービスを作成していきたいと思います。

noteにもリリースするまでの話を記載しようと思っていますが、Qiitaではリリースするまでの技術的な内容を記載していこうと思っています。クラウドの発展やフレームワークの充実化が進み、便利な時代になっているもので、特にここではWebの初心者が2週間でサービスをリリースするまでやったことをフェーズ別に自分の経験を踏まえて備忘録として残しておきたいと思います。

先に使用したライブラリ・技術について記載をしておくと、

Webサイト

サーバー/PaaS(Google App Engine)
データベース(Datastore/Firestore)
CSSフレームワーク(Bootstrap)
サーバーサイド(Python/Flask(これは何でもよい!))

アプリ開発(Android/iOS)

Monaca

が今回の開発環境で、個人的には簡単なのでおすすめの組み合わせです。(Webサイトに関しては、Firebaseでも良いかもしれませんが。)

特に後述しますが、Monacaはモバイルアプリ開発の初学者に超おすすめです。 Cordovaベースのハイブリッドアプリ(iOSでもAndroidでもどこでも動くアプリ)作成ツールなのですが、クラウドIDEがあり、開発もビルドもクラウド環境で出来るため、ローカルでの環境構築が不要です。つまり、Android StudioやXcodeを使ってiOSのSimulatorの環境を設定しなくても、クラウド上でポチポチするだけで簡単なデバッグや実機を用いた動作検証が可能です。(Cordovaベースなので少し遅いのがネックですが。)

対象読者

ワタシハフロントエンド(もしくはバックエンド)チョットダケデキルという人

逆にいうと、現役でソフトウェア開発に携わっている方にはありきたりな話になってしまうかもしれません!

サービス作成費用

サービス関連

ロゴ作成: $9 (約970円)
お名前.com(年間): 1円

その他の費用としては、

Chrome ウェブストア登録費用(初回): $5 (約540円)
Google プレイストア登録費用(初回): $25 (約2,700円)
Apple Store登録費用(年間): $99 (約10,700円)

Webサービスはほぼデザイン代だけで1,000円以下程度の費用で、App Store、Google Play Store、Chromeウェブストアの登録費用込みでも15,000円でお釣りが来る程度です。更にその後開発したアプリやサービスは登録費用がかかりませんので、サービスを作ってみたい方は安い投資だと思って、登録してみるのも悪くないかと思います。

作成したサービス

3つの単語の組み合わせで、特定のURLにリダイレクトできるSantangoというサービスを作成しました。
what3wordsというイギリスのスタートアップのサービスのアイデアとbit.lyやGoogle URL Shorter(サービス終了済)のようなURL短縮サービスのアイデアを組み合わせて、3単語で任意のURLに飛ぶ事が出来るサービスです。

(
▲作成したサービスの画面

技術的な面での機能としては以下の二点のみなので、簡単なサービスになっています。

Register URL
- あるURLを登録して、特定の3単語を生成
Santango
- URLから生成された3単語を用いて、元のURLにリダイレクト

具体的なユースケースとしては、**セミナーやカンファレンスの登壇時に、スライドや資料をシェアする事を想定しています。**通常だとQRコードか複雑なURLをシェアする必要がありますが、Santangoを介することで3単語だけシェアすればスライドや資料にアクセスすることが出来ます。 他にも、Qiitaのプライベート投稿のURLを口頭で伝える場面や大勢にまとめてシェアする場面などいくつかユースケースは考えられると思います。 特にエンジニアのように勉強会がある文化圏では便利な状況があると思うので、ぜひ使って頂けると幸いです。

ちなみにこの画面からリダイレクトしなくてもブラウザの検索バーに登録したり、Chrome Extensionやモバイル版(iOS/Andoroid)を使用することでより簡単にURLに飛ぶことが出来ます。

各フェーズについて

企画フェーズ
- 競合調査
- スケッチ・ワイヤーフレーム・モックアップの作成
デザインフェーズ
- CSSフレームワーク選定
- ロゴ・テーマ作成
開発フェーズ
- 技術選定
- Webサービス
  - バックエンド開発
    - Flask + GAE + Datastore
  - フロントエンド開発
    - CSS + JavaScript
  - ドメイン取得
- Chrome Extension
  - JavaScript
- Android/iOS
  - Monaca(Cordova-based)
機能改善・運用フェーズ
- パフォーマンスの高速化
- アルゴリズムの改善
- テスト
- Google Analyticsの導入
その他
- ドキュメンテーション
- タスク管理
- 宣伝
  - 広告動画作成

個人開発だとやる事が沢山あり、チームで進めるお気持ちが分かるようになります。実際の開発としては柔軟に別のフェーズに行き来しながら開発を進めていました。ストア用マテリアルの作成やプライバシー規約など地道+面倒な作業のときは、Netflixを見ながら奇声を上げたり一人チルしたりゆるゆると進めていました。

企画フェーズ

競合調査

それでは早速プロダクトを作成していく...前に、簡単に競合調査を行いました。

bit.ly
- URLの短縮サービス大手
- 有償サービスあり
  - ランダム文字列ではない省略URLの提供
  - コンテンツのトラッキング
Google短縮サービス(goo.gl)
- こちらも短縮サービス大手だけど、終了済。
  - 短縮サービスによるメリットが少なかった?
What3words
- 住所を3単語で特定出来るサービスのBtoBビジネスモデル
  - ツバルやモンゴルの企業の一部では採用されている

今回作成したサービスは短縮サービスのデメリットの一つである、**「URLが分かりづらい」という点を3単語で表現することで、「わかりやすい/覚えやすい」**形でURLを表現するようにしました。ただし、ある程度短縮サービスについて詳しい方はお気づきかと思いますが、3単語で表現できるようになったからといって、URL短縮サービスの元々のデメリットの一つであるセキュリティ的な観点は今回のサービスでも同様に存在しますので、一つの懸念事項としてはありました。リダイレクト前にURL先を一時的に表示するなどして、今後の改善ポイントもあるかと思います。(他の短縮サービスではなぜやっていなかったのだろう。)

今回のサービスでは競合調査の深堀りをしていませんが、実際プロダクトを作成するにはどのようなビジネスモデルで収益を上げていくか、他サービスのポジションとの差別化を明確にしていくと良いかもしれません。

スケッチ・ワイヤーフレーム・モックアップの作成

次に実装する前のスケッチ・ワイヤーフレーム・モックアップに関してです。(ちなみに、それぞれの用語の細かい違いについてはこちらが参考になりそうです。)

まず、作成するサービスのイメージ図をiPadのGoodNotesというアプリで記述していきました。単純なメモ書きなので、紙でも良いと思います。

今回の場合は、

スケッチ作成
サーバーサイド実装(簡素な画面)
モックアップ作成(BootstrapのThemeをダウンロードしてカスタム)
実装に乗せる

という流れで取り掛かりました。

ちなみに、今回はワイヤーフレームの作成をしなかったので使用しませんでしたが、もう少し複雑なアプリやサービスであれば、OverflowやProttのようなサービスを使うと便利かもしれません。どちらもコード不要で、アプリやWebサービスの画面遷移図を記述して、ワイヤーフレームやモックアップを作成する事が出来るツールです。また、今回はスプラッシュ画面制作用にしか用いていませんが、Adobe XDでワイヤーフレームを作成していくことも可能です。

デザインフェーズ

CSSフレームワーク選定

こちらはだいぶ人の好みによって分かれるかと思いますが、私の場合は結局Bootstrapに落ち着きました。

開発着手当初は脱Bootstrapと意気込んで、別のフレームワークを使っていたのですが、細かい箇所でストレスも多く、ネットでも情報が一番多く実装が手軽だったので、Bootstrapにしました。テーマを変更する事でだいぶマシになるかと思いますし、資金に余裕がある方は4-5,000円なので有料版のテーマを購入しても良いかと思います。

ちなみに私が今回使用したテーマはこちらです。

ロゴ・テーマ作成

ロゴはLOGASTERというサイトを使いました。他にも良いサービスはいくつかあるかもしれませんが、$9 (約970円)なのでそれなりにお得な値段だと思います。こちらのデザインをベースにWebサイトのfavicon.ico、Chrome Exntesionの拡張機能のアイコン、iOS/Androidのアイコンを作成していきました。(私の環境はMacです)

Webサイト

favicon.ico(16x16)
- 加工→プレビュー→ツール→サイズ変更→保存
トップページ
- (加工なし)

Chrome Extensionの拡張機能

アイコン各所用
- 16x16, 19x19, 32x32, 38x38, 48x48, 64x64, 128x128

iOS

スプラッシュ画面作成

Adobe XDでそれぞれのサイズを作成

端末	サイズ
iPhone	320x480
iPhone Retina	640x960
iPhone 5	640x1136
iPhone 6	750x1334
iPhone 6 Plus	1242x2208
iPhone 6 Plus(Landscape)	2208x1242
iPad	768x1024
iPad(Landscape)	1024x768
iPad Retina	1536x2048
iPad Retina(Landscape)	2048x1536

アプリストア登録用アイコン
- アルファチャンネルを削除しておく必要があるため、プレビュー→エクスポート→アルファチェックを外して保存

▲Adobe XDで作成したスプラッシュ画面

また、自分はデザインセンスなど皆無なのですが、UIに関してもサービス開発の上では重要だと考えています。CSS配色パターンはベストプラクティスがあるので、過去の賢人の知恵をお借りして配色を決定していきます。colorkitty、colordrop、colorhuntなど沢山配色パターンのサイトはありますが、私はcolorhuntを参考にして全体の配色を決めていきました。

また、サイト内の画像などに関しては、unsplashというフリーで商用可能な画像が多く集まっているサイトがあるので、こちらから画像を何点かお借りして少し編集を加えて載せています。特に今回のサービスでは緑などの自然系の色を用いて、開発を進めていきました。

開発フェーズ

技術選定

今回はポートフォリオということもあり、あまり深くは考えていませんでしたが、簡単かつなるべく費用はかけずにある程度はスケールできるような技術を選定していく必要がありました。なるべくミニマムなフレームワークで良いと思っていたので、サーバー側に関しては以下の技術を選びました。また、上述したように機能が簡素なものになっており、更にChrome Extensionもアプリ開発も実は中身は似たような内容になっているので、どちらも素のJavaScriptで記述しています。

サーバーサイド

Flask(PythonのミニマムなWebフレームワーク)
Google App Engine(GAE)
Datastore
CSS + Javascript

アプリ開発(Android/iOS)

Monaca(Cordova-based)

Chrome Extension

JavaScript

特にGAE、Datastore、Monacaがめちゃ便利です。

Webサービス

バックエンド開発

Flask
GAE
DataStore

を用いて作成を行いました。詳しい実装方法は長くなりそうなので避けますが、大まかには以下のような流れで進めました。

flaskでゴニョゴニョ開発
ローカル環境での動作が確認できたら、gcloudを使って開発環境にデプロイ
開発環境での動作が確認できたら、gcloudを使って本番環境にデプロイ

個人的にGAEが便利だと思っている事の一つですが、バージョン名を変更する事で、簡易的に開発環境と本番環境を切り分けて動作を確認する事が出来ます。**本番時に何か障害が発生した場合には、手軽に以前のバージョンに戻す事が可能です。また、アクティブなトラフィックを分割する事も可能なので、ABテストも簡単に行う事ができます。**GAE、DataStoreのメリットとしては、そこそこスケールが出来て、ある程度のトラフィックまではほぼ無料で使用する事がかなり大きいです。例えば、Datastoreでは1日に書き込み20,000件、読み込み50,000件呼ばれても無料枠に収まりますし、それ以上アクセスが来ても個人レベルだとそこまで費用は掛かりません。便利。

フロントエンド開発

そこまで複雑になる予定がなかったため、フロントエンド箇所はバックエンドより更にシンプルにコーディングしています。素のJavaScriptでのみ記載しており、オールインワンでスクリプトにて記述しているため、かなり乱雑です。

ここではChrome Developer Toolsを用いて、CSS / JavaScriptを記述していきます。そこまで複雑な処理を記載していませんが、以下のような実装、確認を行っています。

CSSデザインの確認
- 特にレスポンシブが動作しているかどうか
- 様々な機種でWebサイトを確認したときに、ずれないようになっているか
Javascriptの内容の確認
- ここでは若干のアニメーションの動作確認

今回のようなシンプルな機能のサービスだとそこまで記述する内容が少なかったですが、実際はフレームワークを使用する事が多いです。

ドメイン取得

こちらもGAEの良い点ですが、

SSLの証明書が自動で発行してくれるマネージドSSLがある(さらにSSLエンドポイントが世界中にあり、負荷分散してくれる)
カスタムドメインを登録するだけで簡単に使用できる

とメリットが多く簡単なので、初学者でも簡単に作成することが出来ます。

ちなみに自分はお名前.comでドメインを取得しましたが、ドメイン取得サイトはどこでも良いと思います。Google Domainだとより手軽に連携できるようです。

取得したドメインをこちらの手順に従って登録していけば完了です。

Chrome Extension

今回のアプリでは特にChrome Extensionが便利になるかと思い作成しました。Chromeの拡張機能は作成方法や公式サンプルも豊富だし初回の登録費用もたったの$5なので、アプリ開発よりかなり敷居が低く、初心者でも参入しやすいと思います。また、個人的に感じたのは、App StoreやPlay Storeと違い、Chromeのウェブストアではマテリアルが簡素な事が多かったです。

ちなみに、Chrome Extensionの中で使用しているXMLHttpRequestという仕組みをiOS/Andoroidでも同じように使用しています。

Chrome拡張機能の作成方法は

manifest.jsonの記述
instructionの追加・記述(ここではbackground.js)
ユーザーインターフェースの追加(ここではpopup.html)
アイコン・マテリアルをせこせこ作成
Chromeウェブストアに登録(更新)

という流れになっています。

▲ユーザーインターフェース(popup.html)

▲下部分の画像が作成したマテリアル

ちなみにマテリアルの作成には、Powerpointを使用しました。かなりの少数派だと思いますが、Powerpointを使用したことがある方は意外と簡単に作成出来るかと思います。ちなみに今回のChromeウェブストア・Googleプレイストア・App Storeそれぞれのストア用画像を作成しました。

Android/iOS

アプリ開発ではMonacaと呼ばれるハイブリッドアプリ開発プラットフォームを使用しました。一度作成してしまえば、Android/iOSでも似たような挙動で動作することが可能です。他のハイブリッドアプリ開発手法やネイティブアプリに比べると挙動は遅いという点はありますが**、初学者でも簡単にアプリを作成する事が出来ます。また、React、Vue、Angularなども対応をしているため、順当に学んでいけば、より凝ったアプリを作成することも可能です。**(ただし、MonacaやOnsenUI特有の挙動もありますが)

Monacaの主なメリットとしては以下のようになります。

Android/iOSそれぞれの開発環境を整備しなくても、クラウド上で開発・ビルドが可能
実機でのデバッグが簡単に可能
1日のビルド上限数があるが、無料プランでもある程度使える

機能改善・運用フェーズ

パフォーマンスの高速化

この時点でそこまで気にする必要はないのですが、PageSpeed InsightsというGoogle製のパフォーマンス測定を行ってくれるツールがあります. こちらでパフォーマンス測定を行ってみましょう。

▲Pageinsightのスコアの画面

このようにある程度のスコアが出ると、アクセスの速度としては問題ないかと思います。

そして、パフォーマンス測定後のアクションとして例えば以下のようなものがあります

使用していないCSS/JSの削除
大きい画像を圧縮

使用していないCSS/JSの削除に関しては、UnusedCSSやPurifyCSSという使用していないCSS箇所を削除してくれるサービスがあります。私が今回使用したのはPurfiyCSSをオンラインで実行してくれるPurifyCSS Onlineというサービスを使用しました。

▲PurifyCSS Onlineの画面

今回のプロダクトではCSSのボリュームがそこまで大きくなかったのですが、もっと大きいプロジェクトの場合は変化が出てくるかと思います。

また、よしなに画像を圧縮してくれるGoogleのSquooshというサービスでは、ブラウザ上で画像をドラッグアンドドロップ+簡単な操作で、軽い画像を生成してくれるので、元画像と置き換えておくと便利です。

▲Squoosh

特に画像の場合はCSSより大きいので、先程行った無駄なCSSの削除より画像の圧縮の方が効果が大きい事が多いです。

また、一つ気をつけないといけない点として、GAEのスピンアップ時のパフォーマンス測定と通常時のパフォーマンス測定を切り分けて考慮する点があります。

GAEは基本的に安く運用するために常時インスタンスの起動をしておらず、一定時間アクセスがないとインスタンスをシャットダウンします。これをスピンダウンと言います。これに対して、アクセスがあった際に、インスタンスを立ち上げてリクエストの処理を行います。これをスピンアップと言います。

そのため、パフォーマンス測定時にスピンアップの問題なのか、サーバーそのものの問題なのか切り分けて効果を測定する事が必要です。

アルゴリズムの改善

今回作成したサービスでは「いかに覚えやすいか」が肝にもなっているので、アルゴリズムの工夫やデータの前処理に関しての工夫は重要になっています。詳細については割愛しますが、以下のような流れで作成していました。

データセットの取得
前処理
覚えやすい単語の組み合わせ生成

使用しているデータは単語の羅列データなので、今回は簡易的に品詞を付与して、文法を入れたルールベースによる単語の組み合わせ生成を行っています。 **発展的には機械学習を応用することで「覚えやすい単語の組み合わせの生成」などを行う事が出来ます。**しかし、URLの登録の際、単語の組み合わせを生成するリアルタイム処理が必要なため、URL生成のバッチ処理+プリフェッチ処理を加えるなどの工夫をする必要があるため、少しコストが高いです。そのため、重要な箇所ですが、現状は簡易的なアルゴリズムをリアルタイムで動作するようにしています。

テスト

基本的にはテストを書きつつ実装を進めていった方が良いし、いつでもテストを書く癖をつける事は重要だと思っていますが、プロトタイピングの中ではテストコードをガッツリ書いたり、CIの環境を整備するよりも、他に優先すべき点があるかと思っています。**個人的には抑えるべきテストをチェック出来ていれば良いかと思っています。**ここらへんは経験の浅さから認識が甘い点があるかもしれませんので、あまり参考にはならないかもしれません。

そのため、今回のプロダクトではテストに関してそこまで行わず、以下の確認を行っています。

単体テストの記述
最低限チェックしたいテストケースのドキュメンテーションと実行
- 自動化せずに、開発環境デプロイ後に手動でチェック

▲テストケースのイメージ

Google Analyticsの導入

基本的に導入しておくと便利なので早めに入れておいて良かったです。細かく目標やコンバージョンの設定なども出来るのですが、単純なアクセス解析程度の用途でも個人プロダクトだと十分活用することが出来ます。

例えば、

ユーザーの国別情報(どこの国からアクセスがあるか)
デバイス情報(スマホかタブレットかPCか)
どこのページから飛んできたか
どの時間帯にアクセスが来ているか

といった基本的な情報は設定しなくても取得することが出来ます。

その他フェーズ

ドキュメンテーション

自分の性格的に得意ではないのですが、GAEのバージョン管理のログ、参考になったURL、テストケース、やったことの概要などに関して、ドキュメンテーションを残しておく事は重要で、後々見返してきたときに便利です。

私は開発やコンペなどの個人的なプロジェクトはNotionというツールを使っています。ちなみにNotionの容量は限界がないので、動画などをドキュメンテーションの一部に入れておいても全く問題ないので、便利です。

▲Notionのプロジェクトページ内の目次一覧

タスク管理

開発プロダクトやコンペごとにTrelloのボードを切って、一人プロジェクトを進めていました。全プロジェクト横断で確認したいときがあるので、他のツールやプラグインなど知見がある方は教えて頂けると助かります。

▲Trelloボード

宣伝

今回は特に行っていませんが、通常であればこの後広告を打ったり、SEO対策としてコンテンツを増していったり、とやり方は色々ありそうです。私はあまり詳しくありませんが、Google Search Consoleなどを使ったSEO施策を行っていく事で、広告よりもコスパ良くコンバージョンにつなげていく事が多いそうです。

また、開発会議、SafariServiceといったサービスを紹介していただけるサイトも豊富なので、登録してみても損はないと思います。このあたりのTODOに関しては、こちらのブログのリリース後にやったことリストが参考になりました。

また、私の場合は英語のサービスを作成していたので、Y Combinatorが支援をしているProduct Huntにも登録をしてみました。もしサービスを気に入っていただけた方はupvoteしていただけると幸いです!

動画作成

また、結局非公開にしましたが、Youtube動画を作成して、トップページに配置するのも一つの手かと思います。(どちらかというとデザインに近い話ですが) Youtubeに宣伝動画があると、Webのトップページ、Chromeウェブストア、Google Playストア、App Storeに乗せる事が出来ます。

勿論動画作成ツールなどを使用するのも良いと思いますが、個人開発レベルであれば、以下のサービスを組み合わせて作成するのが簡単かと思います。

サービスのスクリーンショット
- Quick Time Player
動画編集
- iMovie
- Youtube動画エディタ
アニメーション機能
- Powerpoint

まとめ

サービス開発従事者の方(特にエンジニア)にはありきたりの内容が多かったかと思いますが、自分の中での整理も兼ねて個人サービス開発の工程を書いてみました。初学者なので、何か追加した方が良い事柄や、より良いツールなどアドバイス頂けると幸いです！

本記事ではフェーズごとに行ったことをまとめてみました。個人開発の備忘録としては、便利なサービスが豊富な時代なので、思っているより簡単に個人開発を行う事が出来ます。登録費用を別にしたら、費用としても1,000円ぐらいなので、個人プロダクト開発に手を出してみたいと思っている方はぜひ挑戦してみてください。