2020-03-15に投稿

我が家のルールを共有しよう

他の家庭にはどんなルールがあるのか気になり、我が家のルールを共有するWebサービスを制作しました。

スクリーンショット 2020-03-15 16.49.58.png

↓作ったもの↓
我が家のルールを共有しよう

きっかけ

私は大学生になるまでスマホを与えられず、他の高校生や中学生がスマホゲームをしているところを羨ましがっていました。「私の我が家のルールって普通なの?それとも変なの?」という疑問から始まり、「周りがどんなルールで生活しているかを共有したい!!」と思い、このWebサービスにたどり着きました。

使い方

左下の投稿エリアから我が家のルールを投稿することができます(250文字以内)。ルールのカテゴリとして今回は8種類を用意しました。

  • 食事
  • アウトドア
  • 買い物
  • 遊び
  • 行事
  • 恋愛
  • 会話
  • その他

上部のみんなの投稿では、投稿全体から10件ほどをランダムに選択して表示しています。また、「全投稿はこちら」のリンクをクリックすることで、投稿全体を一覧表示することができます。

スクリーンショット 2020-03-15 17.19.04.png

各投稿にはいいねボタンを設けました。何回も押すことができるので、気持ちの分だけ押しましょう。

使用言語

HTML, CSS, JavaScript, PHPを使用しました。もっと複雑な処理を実装したかったのですが、時間が恐ろしくかかりそうだったので断念しました。もっとWeb開発を学習しなければ...

工夫したところ

このWebサービスに「可愛らしさ」を取り入れたいと思い、各投稿にふわふわ浮かぶようなアニメーションを加えました。また、各カテゴリ毎に色分けすることで、投稿の内容を判別しやすいようにしました。

反省点

投稿を分散させて表示させたかったのですが、各投稿が重なることが多かったです。投稿同士が重ならないように、分散して表示する方法が思いつかなかったです。また、ドラッグ移動に関して、移動範囲を白いキャンバス内におさめたかったのですが、うまくいかなかったです。
さらに、スマホでのドラッグ移動に関して、上手くいかないことがあったため、その修正も行なっていきたいと思います。

感想

1週間でWeb制作を作れるか初めは心配だったのですが、シンプルながらも頭の中でイメージしていたことをアウトプットできたので達成感が半端ないです。web1weekという機会を設けてくださり、ありがとうございますm(_ _)m

我が家のルールを共有しよう


Akio Suzuta

趣味でゲームプログラミングとPythonの勉強してます. 最近AtCoder始めました(早く茶色になりたい...). 勉強好きと繋がりたいです. もうすぐ社会人になります.

コメント