見出し画像

初心者が3カ月でwebアプリを公開した手順

こんにちはミズモトです。無料noteを書きました

2月末に就活で東京に来てから1週間で内定2つもらったり、10日間でwebアプリ「twimark」をリリースしたり3日でtwittterのフォロワーが倍増したり、オンラインサロン≪アプリラボ≫を開いたら予想よりずっと反響があったり、スタートアップのCTOにお誘い頂いたりということが1カ月の間に起こったり色々ありました


このツイートに反響が大きかったのでTwitterに書ききれない分をこちらに書きます

「プログラミングを始めたけど何からやればいいか分からない」

「自分のサービスを持ってみたい」

「Rails初心者」

という方が想定読者となります

僕はRailsの勉強を始めてからアプリをリリースするのに3カ月かかったのですが、最短経路が分かっていれば1カ月でリリースできると考えています。読者の方にはぜひ1カ月でのリリースを目指してほしいです


ProgateでRailsコースを終わらせる

Progateというのはプログラミング学習サービスの事です

Swift(全3レッスン)やJava(7レッスン),PHP(5レッスン)のコースもありますが、Railsコース(15レッスン。Rubyも入れると20レッスン)だけ群を抜いてコンテンツが充実しています

このコースを終わらせるとなんとTwitterライクなSNSが作れます

しかもなんと…必要な時間は29時間です。(Rubyコースの8h + Railsコース21h)

1日1時間やれば1カ月でSNSが作れてしまいます。毎月980円の月額課金となりますが、厚い教科書買うよりはずっとオススメできます


環境構築(ここが一番コケる)

初心者の鬼門その名も環境構築

Progateはブラウザ上でプログラミングから実行までできるのですが、自分でアプリを公開して皆に使ってもらうためには自分のPC上に環境構築をするのがオススメです

まずはRuby InstallerでRubyをインストールしてみましょう

64ビット版はx64、32ビット版だった場合はx86の最新版をダウンロードしましょう。詳しくはteckacademyの記事で

本番はここからです

Railsの環境構築の方法はいくつかあるのですが、今回はwebcampで勉強したVagrant+VirtualBoxでの仮想環境の構築について簡単に説明します。良くも悪くもRailsやVagrantの仕組みは中身を理解しなくても使えてしまうのですが、今回はプログラミング初心者を対象にしているため詳しい説明は省き超簡単に書きます

VirtualBoxをインストール(MacのOSがHigh Sierraの場合設定を変える)

・Vagrantのインストール

・WindowsならMobaXtermをインストールする

・Vagrantを立ち上げる準備として以下のコードを入力してプラグインをインストールする

vagrant plugin install vagrant-vbguest

・Vagrantfileのあるフォルダに移動し、vagrant upで立ち上げる(初回は時間がかかる)

・SSH接続する(windowsはMobaXtermで。Macはvagrant sshコマンド)

かなりザックリと書きましたが僕の主催するオンラインサロン≪アプリラボ≫で環境構築の詳細な説明を行っているのでよかったら申し込んでください(宣伝) 初心者がネットで調べて1人で環境構築できたらめちゃすごいと思うので、自分でやってみたい方はがんばってください!

他にもCloud9を利用するなど方法は色々あるので好きな方法を選ぶといいと思います


Progateで作ったサイトを元に手直し

ProgateのRailsコースで最終的を完成するのは、

・基本的な投稿・削除・更新

・ユーザー登録・ログイン、ログアウト機能

・不正なURLへのアクセスの禁止(他人のプロフィール編集ページなど)

・パスワードの暗号化

などの機能をもったサイトになります

これだけでは味気ないですし需要もないので、ここから一手間加えてオリジナルのサービスを作ります。僕の場合は

・ロゴをおしゃれなフォントに変更する

・twitterのURLを入力できるフォームを作る

・そのURLを保存するカラムを追加

・レスポンシブデザインへの対応

・ユーザー一覧やpost_contentカラムなどの削除

などを付け加えてスマホから簡単にツイートをブックマークし表示させるようにし、これをtwimarkとしてリリースしました

Html&CSSはProgateのソースコードをかなりの部分使うことになりますが、それについては公式から許可をいただきました(ドヤッ)

(する人いないと思いますが悪用は厳禁です)


僕が作ったサイトはこちらになります↓


Railsコースの最終完成物との違いを一つずつ見ていきます

まずは左上のロゴ

ヘッダーなのでviews/layout/application.html.erbに「twimark」と記述し、home.scssでフォント指定をしています

font awesomeのメタタグをapplication.html.erbのhead内に記述し、cssでフォント名を指定する感じです

次にブクマされたツイートの表示ページ

実はすごく簡単でコピペするだけでキレイに表示できます。each doで繰り返しpost.contentを表示していたところを以下のように書き換えます

<blockquote class="twitter-tweet" data-lang="ja">
 <p lang="ja" dir="ltr"></p>&mdash;
 <a href=" <%= post.tweet_url %> "></a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

三行目<a href =”” に表示したいツイートのURLを入力するのですが、今回はpostモデルにtweet_urlというカラムを追加してそれを表示させています(カラム追加のスライドはこちら

レスポンシブデザイン(スマホ、PC、タブレット対応のページのこと)についてですが、ProgateのHtml&CSS編上級で学べるメディアクエリをapplication.cssに記述しました(ここで正しいのかはよく分からなかったけど一応ちゃんと動いた)

項目が多くスマホ画面でレイアウトが崩れる場合は、ヘッダーのリストを非表示にしてボタンを配置し、押すと横からメニューバーがスライドするようにするのがベターだと思います

最後にユーザー一覧や不要なカラムの削除ですが、製作するアプリの種類によってはProgateで学んだ機能がいらないことがあります

例えば僕はブクマアプリにいいね!機能やユーザー一覧は不要だと思ったので削除しました


Gitに上げHerokuで公開

gitとは自分が書いたコードや変更履歴をネット上に保存して、2人以上で開発する時に共有しようねというシステムです

ちなみにgithubはgitを使いやすくするためのSNSみたいなものす。エンジニアはだいたいみんな使ってます

Herokuは自分のサービスをデプロイ(ネット上に公開)するためのサービスです。無料で使うこともできます

仕組みとしては自分が書いたコードをgitに上げ、そこからHerokuと連携しgitに上げた内容でデプロイすることになります

/*ちなみにここでrake assets:precompileで詰まったりデプロイできたと思ったらapplication errorで画面真っ白になったりして、当初一週間で作る予定だったtwimarkは10日でのリリースになりました*/


終わりに

アイデアをしっかり練って作り始めるのもいいですが、僕は思いついてすぐ作り始めるのがいいと思います。ユーザーからの反応をもらって分かることもありますし、スピード感があると面白いと思ってもらえます

という思いを分かりやすく代弁してくれたツイートを見かけたので引用しておきます

作りたいものが決まっているのならすぐにでも手を動かしましょう。決まってないならProgateを進めながら考えましょう。まずは目の前の課題に取り組むことです

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

13

Ryohei Mizumoto

webアプリ作ったりゲーム作ったり。現在大学3年生で内定くれる企業を探し中 ■Ruby on rails歴3か月でアプリリリース ■散歩とDARK SOULSが好き

Progate User Stories

Progateでプログラミングを学んでいるユーザーさんの体験談やサクセスストーリーです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。