この記事は、実務経験の乏しいWEB開発未経験者〜新人WEBエンジニアに向けて書かれています。ソースコードレベルの話はほぼ出てきません。個人開発のWEBサービスの公開までに必要な手順例として、4日間でやったことを紹介しています。つくったものワンクリックで位置を共有できるWEBサービス。その名も「いまここ」。https://imakoko.tokyohttps://twitter.com/imakoko17ごくちいさいサーバーレスSPAです。着手から公開までを約4日間(人日換算)で行いました。↑ワンクリックで生成されるURLを共有するだけで全員の位置を1つの地図上にリアルタイムに反映できます。提供価値を考えるまずは提供したい価値を言語化して明確化するところから始めます。以下技術的な話でないですが背景として。興味がなければ読み飛ばしてくださいませ。提案ブラウザから位置情報取得して、位置情報プロットした地図を表示できるURLを生成しよう(最近NewsPicksでみた)JKの間で流行っているらしいZenlyの大人ver「"今"居場所を共有したいのであって、"常に"共有した訳じゃないんだよなぁ」な大人のニーズにマッチ(Zenlyは常時位置情報を公開するコンセプトらしい)ブラウザ開いて「位置を共有する」ボタン押して、生成されたURLをLineで送る。ビジネスモデル図・ポジショニングマップ・価値連鎖図をつくる事業に取り組む前に、「ビジネスモデル」や「市場における立ち位置」或いは「価値の流れ(Value-Chain)」を明確にするために、価値とお金の流れを図に落とし込んでみましょう。この過程が「本当にこのモデルは有効なのか」「このビジネスドメインの優位性は何か」「顧客は本当にこの価値を求めているのか(或いは求めるべきなのか)」を深める第一歩となります。今回はお金が「全く」絡まないので、シンプルにシステムイメージ図になりました。図の作成はdraw.ioだけあればいいです。使ったものVue.jsFirebase(auth/firestore/hosting)bulma.css(CSSフレームワーク)Sass(SCSS)【採用理由】(開発が)はやい・(開発コストが)安い・うまい(書いてて心地よい)。Nuxt.jsも実務経験あるのですが、個人的にあまり好きでないので今回は不採用。Firebaseってつまりなに?最近ではすっかり有名になりましたが、数年前までは名前も聞いたことないよーって人も多かったと思います。(今現在でも、製品での採用事例はそこまでは多くなく、いまいまでみても挑戦的な選択肢だと思います)来歴としては、もともと米国のスタートアップが作っていたのをGoogleが買収して今に至っています。(最近はあんまり聞かない用語な気もしますが)「mBaas」という部類に入るクラウドサービスです。mは「Mobile」のmですが、firebaseはWEB開発でも利用できます。https://mbaas.nifcloud.com/about.htmすごくざっくり説明すると、GCPをフロントエンドから直接叩けるようにした感じのもので、普段Servletとかで古き良きWEBサービスを書いている人が急に触ると常識が通じなさすぎて脳震盪を起こすかもしれません。(個人開発での)作業レベルでいうと、サーバーサイドの環境構築および機能実装が不要になり、もっというとホスティング環境の構築も不要です。deployでWEBサービスの開発が終わります。毎度毎度書いている「認証フロー」や「ゲッターセッターの羅列」や「コネクションプールの管理」や「select文発行するだけのメソッド」や「$.ajaxでの煩雑なデータのやり取り」や「ファイルアップロード処理」などを見ずに済みます。有料アカウントさえとっておけばサーバー負荷でダウンするとか基本考える必要がなく、夜は安らかに眠れます。https://news.livedoor.com/article/detail/15105748/...という開発のパラダイムシフトが起こっている場所がFirebaseなのです。プロダクションで採用するのは色々あるのでちゃんとPOC回すとかしないと破綻のリスクもあると思いますが、価値先行型の個人開発であれば、十二分に採用の価値のあるプラットフォームだと思います。技術調査まず、頭の中で大まかなシステム設計をし、必要そうなライブラリ・API類を調査します。あとで頓挫したり、手戻りが発生しないように、あらかじめ各APIの公式ドキュメントでやりたいことが実現可能か確認しておくとよいでしょう。今回コアとなるのは「地図API」と「データのリアルタイム反映」です。APIとYahooの地図APIです。調べてみるとGoogleの方はいつのまにかGCPに統合され、お金もかかってきそうなので、今回はYahooのAPIを採用しました。データのリアルタイム反映こちらはFirebase(realtimeDB/firestore)の得意分野ですから、普通に組んでいれば実現できます。Firebaseなしだと手でAjaxかWebsocketでゴリゴリやる必要があるので結構大変です。位置情報の取得HTML5のGeolocationAPIを使います。スマートフォン含めて多くのブラウザで利用できるようなので問題なさそうです。画面デザイン&CSS設計エンジニアにとっての鬼門だったりしますが、画面デザインを考えてみます。今回はごく小さいサービスなので使いませんでしたが、普段はAdobeXDを用いて画面デザインを固めます。!important">とかカオスなことにならないようにデザインのガイドラインを用意して具象値を変数化しておくとよいでしょう。https://bulma.io/documentation/customize/variables/今回はスマホで使ってもらうことを前提としているので、そのことを念頭においてデザインします。ロゴもWEB上で作れたりします。(細かいデザインは後回しで兎も角MVP!という方はロゴの色をメインカラーにつかっておくのが便利です。)https://www.777logos.com/画像やアイコンはフリーで提供しているサイトがあります。クレジットは忘れずにいれておきましょう。https://unsplash.com/https://fontawesome.com/https://icons8.com/iconsCSSフレームワークとしてはオキニのbulmaを採用しました。https://bulma.io/bootstrapがオワコン化して久しく、生CSSも育っていてCSSフレームワーク界はコモディティ化してますので、何を使っても、或いは使わなくても、あまり大差は無いので好みで決めましょう。フレームワークを利用すると、簡単なデザインであればSassの変数値を独自の値に差し替えていけばCSSの基盤が完成するので、あとはドキュメントのサンプルコードをペタペタするとそれっぽい見た目が出来上がります。今回は兎も角楽をしたいのでbulmaを採用しました。gitリポジトリを作るなにはともあれリポジトリを作るところからです。私はMicrosoftによる買収のタイミングで(何となく)gitlabに移ったのでそちらにリモートレポジトリを立てます。CIとか頑張ってもいいですが、大抵の個人開発レベルでは頑張るほどではないです。Vue-cliでVueプロジェクトを立ち上げるVueプロジェクトを起こします。用意されたコマンドを叩いてあげるとテンプレートが生成されます。installしたり設定ファイル作ったりします。Vue関連のライブラリ導入の際にはsrc/main.jsをいじることが多いので各ライブラリのドキュメントを参照しましょう。ESLint・Prettierあたりはとりあえず入れておく派です(エディタ連携の設定もしておきましょう)。コード整形のコスト減少・品質向上の分開発速度が上がると思います。開発現場でもしばしば使われます。Firebaseを初期化するFirebaseの初期化手順は慣れるまで少し手こずります。詳細手順はQiita上の良記事や公式ドキュメントに譲りますが、概要は以下です。WEB上のfirebaseのconsoleでプロジェクトを作っておく(初期化時にプロジェクト新規作成はできるのですが、GUI上で先に作っておいた方がわかりやすいと思います。initの際に聞かれるhostingの公開ディレクトリをdistにしておくとよいでしょう。個人的に、モジュールファイルの構成(共通化の構造)をある程度決めてクラス等ざっくり組んでから中身のコードを書き始めます。今回はVue-cliでテンプレができているので適当にfirebaseアクセス用のクラスとかを適宜どこかに作っておきます。画面コーディングここから本格的にコーディングに入ります。各人のスタイルによると思いますが、私は一連の画面実装から始めます。DB設計・詳細設計等も書きながら考えます。(実務ではさすがにちゃんと設計組んでから書き始めますが..)VueやReactにおいては「コンポーネント設計」もこの作業に含まれます。UI要素としてのコンポーネント設計はもちろんのこと、利用するAPIやfirestore特有のDB設計など、「どのコンポーネントにどの責務を持たせてどのように値を連携するのが綺麗か・効率的か」も考えながら実装することになります。今回はスマホで使ってもらうことが前提のため、レスポンシブに書いていきます。ひと昔前に比べればずっと楽にはなりましたが、いまだにブラウザごとの差分とか全く考えないと思わぬ画面崩れとかがあるので可能な限り実機検証等もしておきましょう。(今回はPCとスマホで両立するミニマムなデザインにしたのでブレークポイントごとの設定とかは特にしていません。firestoreつなぎこみfirestore(データベース)関連のコードを実装し、いよいよ画面の動きとDBの動きを繋げます。firestoreとVueやReactとの相性はよく、基本的には「変数間のマッピング」(ORマッパ的なイメージ)を行うというイメージです。あとは正しく動けばデータがあっちこっちにリアクティブに反映されていきます。LAMP環境とかで作業されている方はこれが初めて動いた際には感動すると思います。C言語は出た当時「自動プログラミング!」とか言われていたそうですが、正にそんなイメージです。値のマッピングを書いておくと「勝手に」あっちこっちに反映されます。テスト強いエンジニアの方はテストから書き始めたり色々方法論があります。今回は小さいですし、個人開発ですし、でテストコードは特に書いていません。buildを叩くだけでOKです。良い感じにビルドされたdist/が出来上がります。hostingとすると勝手にデプロイしてくれます。私はこんな簡単なコマンドもすぐ忘れちゃうので↓をdeploy.shに書いておいています。ドメインの取得ドメインを取得しましょう。お名前.comとかでぽちぽちするとドメインを取得できます。ドメインの接続ドメイン鯖側にレコードを追加し、firebase-consoleのホスティングタブの「ドメインを接続」ボタンを押してドメインを接続します。やる時微妙にハマりがちなので、インターネット上の記事を漁りましょう。firebase-console上に表示されるAレコードをDNS設定に書き込むだけですので焦らずにやれば大丈夫です。表示速度を解析してくれるGoogleのChrome拡張やWEBサービスがあります。https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=jahttps://developers.google.com/speed/pagespeed/insights/闇雲に(特にSPAで)高得点をもらおうとすると泥沼に陥るので、妥協点を探しながら、解析結果を参考に高速化を目指しましょう。画像・WEBフォント周りは何も考えないで突っ込んでいるとボトルネックになりがちです。画像の圧縮、読み込むweightの制限・読み込みの遅延化は定跡ですので色々調べてみましょう。見逃しがちですが、firebaseのhostingでは、firebase.jsonという設定ファイルを触ることでレスポンスのHTTPヘッダをいじることができます。ここで設定できる「Cache-Control」(ファイルをキャッシュする期間の定義)はこのスコアに大きく寄与するので確認しておきましょう。https://firebase.google.com/docs/hosting/url-redirects-rewrites?hl=ja#section-headers叩くたびに結果が微妙に違うので色々試してみましょう。「検索エンジン最適化」の対策を施します。網羅的にSEOについて書いてるのでSEO初学者におすすめです。Analyticsも導入しておきましょう。https://developers.google.com/analytics/?hl=jaSPAの場合、ページ遷移しないので、ルーティングにバインドして逐一ビーコンを打たないとSPA内でのページ遷移の情報が取得できません。vue-analyticsというライブラリを導入するとビーコンの送信を自動化してくれるので便利です。ヒートマップの導入ユーザーがページのどの部分をみているのか。どこをクリックしているのか。可視化してくれるヒートマップサービスを導入してみます。今回はメールアドレスで登録後、表示されるHTMLタグをHEADタグ内に挿入するだけでヒートマップを取得できるuserheatというサービスを導入してみました。https://userheat.com/一定のPVが溜まってきたら、ヒートマップを分析してページのUIを改善していきましょう。自身の開発スタイルに合わせて、お手軽に使えるタスク管理ツールを見つけておくとよいでしょう。個人的にはTrelloが好きです。私も法律関係に強くないので細々としたことはわからないですが、兎にも角にも利用規約は用意しておきましょう。収益性が無く、サービスの性質上、外部への影響の少ない小さなWEBサービスであれば利用規約のテンプレートを作成・管理してくれている法人様があるのでそちらをカスタマイズしていけばひとまず大丈夫でしょう。https://kiyaku.jp/index.htmlお金が発生したり、出会い系が絡む場合は法律事務所に相談したほうがいいかと思います。最悪しょっ引かれます。当サービスでは取得していませんが、個人情報を取得する場合には、プライバシーポリシーの設計も必要になります。ドキュメンテーションお気に入りのドキュメントサービスをみつけて、マークダウン等で簡易なドキュメントを作成しておくと良いでしょう。システムコンセプトから設計方針、APIの調査内容や、画像・アイコンの参照元など逐次明文化しておくと忘れた時に役に立ちます。この記事も開発時に書いたドキュメントから記憶が復元されています。FirestoreとセキュリティFirestoreは原則としてWEBから直接アクセスされるものであるため、最低限のセキュリティ担保のため、ある程度手を打っておく必要があります。一般的な手法としては、firebaseにある「ユーザー認証によってデータごとのアクセス可能者の設定を行う」機能を利用することです。今回のサービスでは特定の個人を認証・区別する必要がないため、firebaseの認証機能のうちの一つ「匿名認証」という機能が利用されています。Lambda的なやつです)を経由してアクセスすることでリスクを低減させる手法もあります。Firestoreとバッチ処理データの定期集計などのバッチ処理はfirebase-functionsにfirestore内のデータを巡回するコードを書き、これを外部からcron的に叩きに行く手法がお手軽です。functionsはどこからでも叩けてしまうため、手でAPIキー認証的なものを実装する必要があるでしょう。FirestoreとタスクキューWEBサービスのフロントからサーバーサイドの重い処理を呼び出す際には「タスクキューを用いた非同期処理」という方法をよく用います。Firestoreを利用したタスクキューの実現方法としては、特定のコレクションの変更を監視(onSnapshotというコレクションの常時監視関数があります)し、タスク追加時にワーカープロセス(要するに処理関数)を起動する、という流れになります。調べたら公式のライブラリがありましたのでこちらを利用するとよいでしょう。(node.js等サーバーが必要です)https://github.com/FirebaseExtended/firebase-queue課題ビル街だとGPSがずれがちなのでそもそもの価値提案として破綻している説(そもそも論)お金がないので無料枠を超えたらサービスがダウンするあとがきいかがでしたでしょうか。プログラミング初学者の方に「なんか色々やることあるけど、これらのステップを踏めば一応のサービスの形になるんだなー」というイメージを掴んでいけたのなら冥利つきます。upLoginユーザーは見つかりませんでした。