どーもどうも
高原さとです
この度初めてウェブサービスを作ってみました。
「ロンチャ」という2つの立場に分かれて討論ができるサービスです。
討論のお題に対して２つの立場に分かれてコメントして戦って、コメントへの投票数で討論の勝敗が決まる、という仕組みです。
作るまでに2020年の２月〜3月にかけて、だいたい1ヶ月位かかりました。
プログラミングの勉強もしながら作っていきました。
いやー、なんというか
とりあえず初めてのことが多くて大変でした。
だけど勉強するのと、仕組みを考えるのは好きなので、なかなか楽しい経験でした。
ということで今回は1ヶ月の開発を振り返りながら感想なんかを書きたいと思います。
プログラミング初心者だけど、いずれウェブサービス作ってみたい
という人の参考になればと思います。
言語はRubyでフレームワークはRails、あとはHTMLとCSS、タブ・プログレスバー ・投票機能にjavascriptやjqueryを少し使いました。
開発環境はAWSのCloud9の無料ワークスペース。レンタルサーバーはHerokuのHobbyプランです。
作ろうと思ったきっかけ
自分でウェブサービスを作ってみたかったからです。僕の行動の理由はだいたい「〇〇してみたかったから」です。
2019年の年末年始にテックキャンプ というプログラミングのスクールに１週間参加しておりまして、そこで初めて（実は違うけど）プログラミングの勉強をしたのです。この話は前の記事に書きました。
テックキャンプ はオンラインの学習サービスなので、その後もチコチコ継続的に学習は続けてたのですが、ひたすらサンプルアプリを作るばかりでだんだん飽きてきていました。
「サンプルアプリ作るぐらいなら、もう自分で作っちゃえばよくね？」
ということで、ロクに知識もないままオリジナルのウェブサービスを作ることにしました。
このサイトはワードプレスで作っていたのですが、「ザ・ブログ」という感じの記事がまとまってるだけのサイトでした。
そこをcssとhtmlでちょちょいと子テーマを編集し広告を減らしたら、なかなかサイトっぽい感じになりました。
当初は親テーマを自作しようと試みましたが、phpが全くできなかったのとセキュリティやseoなどの知識も必要で大変そうだったので、大人しく子テーマを編集しました。
CSSの編集だけでもかなりいろんなことができてなかなか面白かったです。
アイデア出し
まずは作るサービスのアイデアを考えました。重要視したのは以下の点です。
①すでに学んだ知識＋@で作り切れること
②1ヶ月くらいで作れること
完成させられるかどうかを結構意識しました。なんて意識が低いんだ。
今回やりたかったことは「オリジナルのウェブサービスを作ってみる」ということなので、それが「ヒットする」とか、「便利か」とかは全く意識してませんでした。
「おれ自分でウェブサービス作ったことあるよ（ドヤ）」っていうのがやりたいってとこなので、とにかく「作れる」ものの中で選びました。
初めて作ったものはどうせうまくいかない。それなら作るものはさっさと決めて、さっさと作り始めて、さっさと失敗した方がいいと思いました。
この辺の初心者がサービスを作るための考え方は、個人アプリ開発者の梅のんさんのブログを参考にしました。梅のんさんのブログはわかりやすくて勉強になります。
なんとなく初心者は掲示板っぽいサイトから始めるのがいいんじゃないかという偏見があったので、掲示板に似た感じで何かできないかということを思いました。
画面の右側と左側に分かれて討論するようなサイトが面白んじゃないかと思いついて作りました。
これが面白いんじゃないかと思った理由は、前からTwitterとかみてて、議論の内容とかいい案を出すことよりも、単に勝ち負けに拘っている人が多いなーと思ってたことです。
議論なんてそもそもやる気なくて、単に勝負がしたいんじゃね？
じゃあ議論じゃなくて、勝ち負けを競ってディベート っぽいことができる場所があれば、ゲームだと割り切って楽しめるのではないかと思って作ることにしました。
アイデアが決まったので、まずゴールイメージを持つために1日でデザインっぽいものを作りました。
ホントはこのタイミングでもっとリサーチとか検証をすれば、その後の手戻りが少なくなると思います。
今回は完成イメージと大体の機能が掴めればいいので、さくっと作ってます。
当初はサービス名が「HighRonpa!」というふざけた名前だったのですが、殺伐としたサイトになりそうだったので、途中で「ロンチャ」に改名しました。（デザインに書いてあるお題をみて分かる通り、割とくだらないことについて討論したかったんですよね。。）
Skecthの使い方もまだよく分かってませんが、その辺もついでに覚えながやってます。
テックキャンプ にはデザインのコースもあるので、並行して勉強しながら開発を進めました。
大体のサービスの完成イメージができたところで、必要な機能の洗い出しをしました。いわゆる要件定義ですが、だいぶざっくりしか書いてません。
こんな感じで、Googleドキュメントに機能を書き出して、実装できたらチェックマークをつけていってます。
基本機能は欲しい機能の中で「これがあれば最悪このサービスは動く」というまじで最低限の機能。
応用機能の方は（そんなに応用知識いらないけど）プラスアルファの機能。
ちなみに機能の洗い出しより、デザインの見た目から作り始めたのは、完成イメージをはっきりさせるためです。
今までの僕だったら、先に機能を書き出して、そこに見た目を当てはめようとしてたと思います。
後者が正しい手順だと思いますが、今回はとにかく完成させるのが大事でした。
完成させるにはモチベーションが大事で、モチベーションにはゴールイメージが大事です。
欲しい機能だけが羅列されてて、それをひたすら実装する形だと、ゴールイメージが持てないので、どこへ向かってるかわからなくなるかなーと思いました。
対して重要でもないところで時間を使いすぎたり、悩みすぎたりすると完成しない。
ということで今回は見た目と機能を一緒に考えました。結果的にバラバラに機能を考えるよりも、初心者にはアイデアを考えやすかったように思います。
人が増えたら追加したい機能は追加しなくて済みそうです（）
ひたすらググりながら作る
サービスの大まかなデザインと機能が出せたところで早速作り始めます。1日目にデザインを考えて、2日目には作り始めました。
やる気がなくなるのは時間の問題なので、やる気がなくなるまでに作る切れるかが勝負です。
まずはとにかく「できた感」を出していくために最低限の機能をさっさと実装します。というかまず画面に表示させる。画面に何かが表示されれば
おお、なんか出てきた
となるので、そこでモチベーションが回復します。
「いつまでたっても全然進んだ気がしない・・・orz」と思ってしまうと完成しなくなると思いました。
テックキャンプ でRailを使ったウェブサービスの基本的な作り方は学んでたので、復習もしながら進めていきます。
ここまででだいたい３〜４日くらいかかりました。
最初に書いた基本機能の半分めくらいができた感じです。
・お題の投稿機能
・お題の溜まるページ
・お題の詳細ページ
・コメントが選んだ立場によって左右で分かれて表示される
ぐらいできてれば、とりあえず討論っぽいことはできるだろうということで、一安心？しました
まあここまではほとんどテックキャンプ で勉強したことそのままだったので、あんま難しくなかった気がしますが
この辺りで調査ととか含めて1週目が終わった感じです。
そのあと一旦見た目をcssで調整しました。
CSSの調整は最初はかなり苦労しました。そんなに難しいことしてないはずなのになぜか上手く行かないことが頻発し、モヤモヤしました。
要素の中央寄せとか横並びとか、基本的なことがなかなかできずだいぶ苦戦。
アイコンをボタンにのせるときになぜか、アイコンの画像とテキストが微妙にずれたり、等々
特に苦戦したのは中央揃えでした。
ブロック要素とインライン要素がよくわかっておらず、なぜか中央に要素がこない、ということですごくモヤモヤしました。
最終的には要素のwidthを指定して
margin-right:auto
margin-left:auto
として、レスポンシブ用にはwidthを調整する感じにしました。
要素のどうしの関係性やmarginの取り方とかで詰まった時は、chromeの検証ツールで要素のcssを確認するのが一番上手くいきました。
装飾が上手く行かなかったりするときは、どこに対してその装飾をつけるのか、の認識やブロックの構成が間違ってたことが多かったです。
検証ツールのは途中から大活躍でした。
最初はクラス名を確認して、style.scssに書いて、リロードして結果を見る、みたいにチコチコやってたんですが、途中からchromeの検証ツールのcssのところで直接書いてみて、しっくりきたところでファイルにコピーする、という方法になりました。
検証ツールを積極的に使い始めた途中からはcssのイライラは減少しました。
これだと書いたcssの結果をすぐに反映できたので、とても時短になりました。どのクラス名間違えたりしないし。
順番は前後しますが、最後にスマホ用のレスポンシブでも最低限見れるように軽く対応したのですが、そこも全部検証ツールで確認しました。
よくあったエラーの原因
２週目〜は投票（いいね）機能、ランキング機能とか作りました。
この辺からわからないことが増えてきて急に戸惑うばかり。
とりあえずはググりながらググりながら、似たような機能の作り方を紹介している技術記事とかを探しました。
ただ当然ですが、技術記事は１か１０まで完璧にやり方を解説してくれているものは少なくて、複数の似たような記事を見ないとなかなか何をやってるのかわからないことが多かったです。
コードだけ書いてあって、「はい、これでできますよ」ていう情報がよくあって
あのー、そのコードをどのファイルに書けばいいんですか・・・
みたいに思うことがありました。
それでもググって日本語の情報がいくつかあるだけでもありがたかったです。
エラーメッセージでググって英語の記事しか出てこないと、少しメンタルに来るものがあります。
特に上手く動かない部分があったときに、ググって何か出てくるとそれが
①よくある問題で他の人も悩んだことがある
ということがわかるので、かなり安心できました。よくあるのであれば解決策はあるはずですし
問題はあんま情報がないときです。そんときは
②初歩的な問題すぎて誰も書いてくれない
③難しい問題で情報がない
恐れているのは③だけど、僕が作ろうとしたレベルだと実ほとんどなかったです。
だいたいの問題は①か②でした。
ヤバイ、何も情報がない。ものすごく難しい問題が起きてしまった…
と思ったりしましたが、単なる初歩的な勘違いのことが多いかったです。
ちなみに②で多かったミスは以下のようなものが割とあった気がします。
＜スペルミス＞
一番多かった。
合ってるはずなのになぜか上手くいかないときはこれでした。
＜文法が間違ってる＞
・配列とハッシュの書き方ごっちゃにしてたわ
・==を=で書いちゃってたわ
・javascriptなのにrubyで書いてたわ（else if が elsif になってた）、等々
＜書き方が間違ってる＞
・繰り返し数字を足したいのに、ループの中に num = 0 を入れてるせいで毎回num が 0になっちゃってるわ
・commentのidの位置にlikeをrenderしようとしたらcommentのidが全部同じになってたから一番上に出ちゃってた
とにかくなぜか上手くいかないときは、ものすごく難しい問題に直面しているように感じてしまうみたいです。
もう諦めようかなと思った30分後にできたりするので、冷静になるのが大事だと思いました。
苦戦した「いいね」機能
苦戦したのは投票（いいね）機能。
Railsでいいね機能を作る方法はいろんな情報があってできそうだったのですが
調べて出てくるいいね の機能は、Twitterみたいにログインユーザーしかいいねできないタイプが多かったのです。
ただ今回は、討論のコメントに対する投票ということで、ログインしてないユーザーもいいねできるようにしたかったんですね。
ちょうどNoteのいいねみたいなイメージです。
ログインしてるユーザーのみがいいねできる場合は、userがlikeを持つアソシエーションにして、likeとuse_idのセットが１セットになるようにすればいいっぽかったんです。
が、ログインしてないユーザーもいいねできると、誰のlikeか区別できないので無限にいいねできてしまうのです。
当然いいねは一人一回にしたい、ってことで、クッキーを使って、いいね 済みかどうかを判定することにしました。
色々検討した結果、likes_controllerの#create でクッキーを配列に保存することにしました。
cookie_now = cookies[:like_comment] #保存済みのクッキーを呼び出す
cookies[:like_comment] = [cookie_now] #クッキー配列に古いクッキーを入れて上書き
cookies[:like_comment] << params[:comment_id] #likeされたコメントidをクッキー配列に追加多分この書き方間違っています。
一応保存されてたし、いいね 済みどうかの判定はできてましたが、いいね の取り消しが上手くできんかった。
保存時に配列に変なデータが入ってしまうのと、クッキーの配列の一部だけ削除する方法がわからなかった。
likeのidをクッキーに保存してたワケなんだけども、削除するときはidが一致する要素だけ削除したいとこだけど、なぜかクッキーが丸ごと消えてしまった。
どうやらクッキーをハッシュで保存しておいて、パスを指定すれば特定の要素だけ削除できるっぽいんだけど、よくわからなかったです。
多少粘りましたが、とりあえずいいねはできるようになったからいいか、とうことでいいね の取り消しの機能は諦めました。
というわけで、投票（いいね）は取り消すことができなくなりました。
クッキーを手動で削除すると再投票できてしまうのですが、まあ初期のサービスでそこまでする人おらんやろ、ということで
デプロイ後にTwitterログインを追加
だいたい全体の機能ができたところで、作ったものをとりあえず出したい、という段階に。
開発環境で作ったコードをサーバーにアップすることをデプロイっていうんだって、へえ
という感じでサーバー周りの知識がほとんどないので、今回はherokuを使うことにしました。
cloud9からherokuにgithubと同じ要領でpushしたらすぐ見れるようになりました。
独自ドメインでSSL化したかったので、月７ドルのhobbyプランに変更し、
お名前ドットコムで「roncha.site」を購入して、ドメインを設定しました。
これでよし、
と思いきや「やっぱりTwitterログイン機能が欲しい！」と思ってしまいました。
やっぱ会員登録のハードルは高いし、Twitterログインの機能自体に興味があったのでやってみることにしました。
ログイン機能はrailsのdeviseというgemを使ってたので、そこにomniauthというgemを追加して、なんとか乗り切ることに
api_keyとかはちゃんと環境変数を使いました。
これでよしと思いきや、
「403 forbidden OAuth::Unauthorized」
という怖そうなエラーが出てきて焦りまくりました。。
Twitter developerで設定したコールバックURLを、環境のものと一致させないとダメだよ〜
ということらしいが、なぜか一致してるが上手くできない！
結局開発環境では上手く設定ができなかったが、本番環境では上手く行ったので、なんとかTwitterログイン機能をつけることができました。
ということで無事にサービスをリリースできました。
よかったよかった。
いい試行錯誤、よくない試行錯誤
開発中にハマった部分はちょいちょいあったんですが、そのときに思ったことがあります。
いい試行錯誤とよくない試行錯誤あるってことです。
いい試行錯誤は、「試行」と「錯誤」の間に、「分析」とか「調査」とか「発見」とか「仮説」があります。
失敗したときにちゃんと上手くいかなかった理由を考えて、わからなければ調べて、次の手を考えてから行動する。
よくない試行錯誤は、「試行」と「錯誤」の間に何もない。ムキになって（思考停止して）考えないで手だけ動かしてる状態。
ハマったとか、詰まったとかいう状態は、よくない試行錯誤に入ってる気がしました。
よくない試行錯誤の何がよくないかというと、まず遅いです。
一回一回試行の度に何が問題だったか何を誤解してたか考えないもんだから、とっても時間がかかります。
上手くできたとしても、上手くいったという「結果」以外に何も残らない。
ロンチャを作ってるときに、何回か「よくない試行錯誤」に陥りました。
「これならどうだ」「これならどうだ」ひたすら手を動かしてるんだけども、なんの成長もないのです。
厄介なのが、試行した回数は、よくない試行錯誤の方が多いので、なんか仕事した感が出てしまうってことです。
なので教訓は、何回も同じ部分で迷ってるときは、一旦立ち止まって調べたり、そもそも文法を確認したりしてみるということです。
特に今回はjavascriptはろくに学ばないままスタートしたので、何回も簡単なとこで詰まりました。
多分１〜２日開発を止めて、javascriptの本を読んでサンプルを何個か作ってみれば、もっと上手くいったよなーという感じがします。
「よくない試行錯誤」にハマる理由は「焦り」だと思うのです。
速く前に進みたいあまりたくさん手を動かしてしまうのですが、実は一個一個順番にやった方が速いよね、ってことを覚えとくのがいいかと。
言ったらPDCAだと思うんですけど、短い時間でもこれをやるってのが大事なのかなと。
上手くいかなかったときに焦ってすぐ手を動かすんじゃなくて、1分くらいググったりメモを書いてみたりするだけでも違う気がしました。
こんなプログラミング勉強法がいいかも
開発中にいいと思った勉強法を書いてきます。
結論を先に書くと、
「最低限の入り口で勉強したら、あとは作りたいものを作りながら学ぶ」
がいいのかなと思いました。
自分が作りたいもの、自分で決めたものを作るのが良さそう。
なんとなくですが、プログラミングの学習の難しさは「フィードバック」にあると思いました。
フィードバックてのは何か自分がやったとき返ってくるリターンです。
フィードバックがない、もしくは少ない（と感じる）と僕の場合は学習が継続できません。
プログラミングは他の勉強と同じようにやってると、フィードバックが実感しにくいもんなのかなーと思いました。
僕は大学時代にC言語を独学しようとして挫折しことがそういえばありました。
今回は一応（ちょっとした）ウェブサービスを自分で作り切れるくらいのとこまで来れました。
この差は何かなーと思ったときにを「自分が作りたいものを作りながら勉強した」ということな気がしました。
大学のときに独学でプログラミングしてたときは、本を買ってきて１p目から順番にやってました。
Hello World！とか表示させてました。
でも、すげーつまんなくて２ヶ月くらいでやめました。
いや最初は面白かったんです。
「Hello world!」と画面に表示できた！という喜びがあったので。
でも「これで表示できるよ」「これで計算できるよ」ばっかりで、それをどう使えば面白いことができるのかが全くわからず、どんどんつまらなくなってしまいました。
これは学習によるフィードバックが徐々に減少していって、最初のモチベーションを使い果たしてしまったからだと思うのです。
何かを始めるなら最初の１回目、1日目はモチベーションを持って始めるわけです。
「よし、絵を描いてやるぞ」「プログラミングはじめよう」「英語やろう」「ダイエットはじめよう」等々
問題は２回目以降。
やってみたフィードバックが少ないと徐々に、最初のモチベーションは落ちていきます。
最初に抱いたやる気が尽きる前に、やってみたフィードバックを得ることでモチベーションを回復してきます。
「上手くできた」「すっきりした」「勝った」「楽しかった」「発見した」「褒められた」「カッコよくなった」「儲かった」「俺すげー」等々
まあこういうフィードバックとか、インセンティブ？をどうやって作って自分に与えるかが大事になってくるのです。
で、プログラミングの話に戻るけど、コードを書いてるだけで楽しいって人はいいのかもしれないけど、多くの人はそこはそこはそんなに楽しくないと思いました。
同じ言語でも日本語とか英語とかは人とコミュニケーションに使えるから、「相手が笑った」とか「喜んでくれた」とかポジティブなフィードバック得やすいと思うんだ。
プログラミング言語でもコンピューターが笑い声とか出してくればもうちょっと楽しくなりそうなんだけど、
間違ってる時だけ怒られて、正解の時は何も言わないってちょっとツンツンしてます。もうちょっとデレて欲しい。
だから学習の段階では自分で作りたいものを決めて、自分でそれを作るっていうスタイルより意識しないと、なかなかモチベーションが続かないかなー思います。
仕事にすれば「お客さんが喜んでくれた」とか「人のやくに立てた」とか「儲かった」とかもうちょいフィードバックあるのでやりやすいのかもです。
完璧にその言語を理解しようとか、本を最初から最後まで通しでやろうとかすると挫折しやすいと感じました。
最低限の入り口のところは人に教えてもらいながらやるのもいいのかもしれません。僕の場合はそこはテックキャンプ で勉強しました。
リリース後の話と反省会
まだリリースして数日ですが、予想した通りあまり使ってもらえてません。
これは仕方がないことだし、まあ予想した通りです。
今回は一人でアイデアからリリースまでウェブサービスを作って出してみる、ってとこがやりたかったことなので、それが広まるかとか、ヒットするかとかは考えてませんでした。
最初全くユーザーがいなかったので、ツイッターで宣伝してみたところ、使ってくれる人か何人かいて、感想とかくれた人もいました。
ロンチャというウェブサービスを作りました！！
— 高原さと,SatoTakahara (@ART_takahara) March 27, 2020
お題に対して二つの立場に分かれて討論するサービスですhttps://t.co/wdxjmi3DZa
ぜひ気軽に使ってみてください〜
使ってみた感想やバグの報告などのフィードバックを頂けると非常に助かります！
よろしくお願いしますー！ pic.twitter.com/SHDMqv9oAS
正直サービスを作るのがブログ以外では初めてだったので、宣伝したり、こうして振り返りの記事を書くかどうかも悩みました。
なんか恥ずかしいし！
でもせっかく作ったので、サービスを出して見た後にどんな感じのことが起きるのか見たいし、感想とかももらえるかもしれんし
そんで、これから新しくプログラミングしたい人とかウェブサービス作って見たい人の参考にもなればなーと思って記事を書いてます。
ドメインもとったし（60円で）
今回はユーザーがいないとサービスとしてあまり面白くないやつだったので余計に思うのかもですが、
やっぱユーザーを獲得したり満足してもらうのが一番大事なんだろうなーというのは思いました。
他の個人サービスを作ってる人のブログとかも参考に読んでみたりしたのですが、やっぱり使ってもらうのは大変なんだなーと調べてて感じました。
ちゃんと作ってても使ってもらえるかはわからんわけで、、
そうなると自分しか使わなくても自分的にはペイする、ぐらいほしいものを作るのが良さそう出し、楽しそうだなと思いました。
サービスを作る基本的な流れはある程度理解できたので、次回はもうちょい自分が欲しいモノを意識して作ってみようかなーと思います。
今回は技術的に自分ができる範囲でなんとかしようとしてしまったところがあるので、少しずつ拘って作っていけたらなーと。
あとは開発の話で行くと、UI・UXにもっと時間をかけないといけんかったと思いました。
考えてみれば今回は初日に考えたアイデアと機能を1ヶ月間一気に作ってしまったので、途中で機能を振り返ったりテストしてみる時間が少なかった。
最低限の機能ができたあたりでもっとテストしたり、他の人に使ってもらったりしたらよりよかったのではなかろうか。
あとデザインももうちょっと勉強しないと！この先ゲームとかも作っていきたいので、機能だけ作る以上のことも勉強していく必要があると感じました。
うん、そうですね。
最後に宣伝ですが、僕のnoteの月額マガジンでは、これから作るもののアイデアとか日々の技術メモや、考えたことをたまに出しております。
興味があったら入っていただけると嬉しいです。食費に当てさせていただきます。
とはいえ、とりあえず最初に構想した機能をだいたい作りきれたのは満足だし、楽しかったです。
やっぱモノ作るのは楽しいですよね
ではではまた
