Shibuchaaaan

1994年福岡生まれ。建築系営業→エンジニアに転職。インターネットと麺類とカレーライスが好き。

働きながら作ったWebサービス(のようなもの)を公開しました!

どもーこんにちは。

年末のバタバタが終わり、無事平穏を取り戻して来年から晴れて無職になれる嬉しさいっぱいのしぶです。

 

さてさて、いろんな事が落ち着いたところで、私が初めて作ったWebサービス(のようなもの)をご紹介します!

 

名前は

『today-fooday』

今日のご飯は何にする? today-fooday

 

今日の献立に悩む主婦・昼飯に悩むサラリーマンにピッタリの「今日のご飯を決めてくれる」サービスです。

普通にボタンをポチッと押すだけで今日のご飯を決めてくれます。

 

サービスといっても仕組みは単純で、JavaScriptでご飯ルーレットを回すだけ。(笑)

でもプログラミング学習の良いアウトプットになったのではないかと思っています。

 

営業の仕事をしながらプログラミングの勉強を始めて長いこと、かれこれ半年くらい?でしょうか。

仕事の合間などにちょこまかやっていたので、総制作時間は約20時間。

単純計算で、手を動かしたのが1日2時間として10日間くらい?になると思います。

初めてのWebサービス制作だから!と、張り切ってEvernoteで制作日記もつけてました(笑)

 

完成して、ブラウザで動いたときの達成感は半端なかったですね。

しかもFacebookで「こんなの作ったよー」って投稿したら、友人達が使ってくれて。

「面白い!」とか、「ありそうでなかった」とかの反応がすごく嬉しかったですね。

これは、Webサービス開発者たまんねぇな〜^^って思いました。

 

初めての制作、もちろん沢山つまずいたので1つずつでもご紹介していければな、と思います。

このブログがプログラミング初心者の参考資料になれれば幸いです!

 

という事で、今日はこのサービスの簡単な紹介をします。

 

 今日のご飯を決めてくれる!『today-fooday』

こだわったのは、何と言っても「分かりやすさ」。

とにかくシンプルな作りです。

 

f:id:s-miki694:20181220133315p:plain

トップページはこんな感じで、必要最低限のことしか書いていません。

ここのCSSどうするかめっちゃ悩みました(笑)

こういうところでWebデザイン力高めていきたいなー。

 

 で、「ご飯を決めましょう!」のボタンを押すと…

f:id:s-miki694:20181220133227p:plain

 ごはんルーレットのページに移動します。

ここでも色々イラストとか入れたかったのですが、よく分からんかったのでシンプルにしました。 

スタート押してルーレット回して、ストップ押すだけ。

f:id:s-miki694:20181220133520p:plain

それだけで、今日のご飯を決めてくれます。(笑)

 

他に作ったページは、右上のABOUTとお問い合わせ。

非常に単純な作りになっているので、初心者だなーって感じします。

が、自分でも「今日のご飯誰か決めてくれないかなー」とよく思っていたので、これが作れて満足です。 

 

必要な知識

正直必要な知識はそんなに多くありません。

HTML,CSS,JavaScript,サーバーとかの基礎知識のみ

です。

全て、基礎知識+ちょっとJavaScript頑張るだけ でできます。

 

一番大変だったのは、サーバーの部分。

モノ自体はPCのエディタでいくらでも制作できますが、それをWeb上にアップロードするのにものすごく手こずりました。

まぁ、初めてだからと無料のサーバー探してたせいなんですけどね。

お金をかけられるなら、管理が楽なレンタルサーバーとかでやっちゃうのが一番かと。

私は最初、firebaseとかAWSでやろうとしたりして、あまりにも知識がなく理解力も低かったため全くアップロードできませんでした。

そんなこんなを1週間くらいやり続け、これ以上は時間が勿体無いと思ってエックスサーバーの無料サーバーで無事公開。

 

エックスサーバーでは有料でサーバーをレンタルできますが、私が今回作ったような簡単なHTMLサイトなら無料版でも公開できます。

また、使っている人が多いので分からないことがあった場合に検索で引っかかりやすいのも長所ですかね。

超初心者の方にはオススメです。

レンタルサーバー Xserver

最初からこうしとけばよかった…と思う私なのでした。(笑)

 

 

 というわけで、私の初めてのWebサービスぜひ使ってみてください。

http://today-fooday.work/

そんなにカッコいいものでもないですが、暇つぶしや今日の献立アイデアにどうぞ!