他の家庭にはどんなルールがあるのか気になり、我が家のルールを共有するWebサービスを制作しました。
↓作ったもの↓
我が家のルールを共有しよう
私は大学生になるまでスマホを与えられず、他の高校生や中学生がスマホゲームをしているところを羨ましがっていました。「私の我が家のルールって普通なの?それとも変なの?」という疑問から始まり、「周りがどんなルールで生活しているかを共有したい!!」と思い、このWebサービスにたどり着きました。
左下の投稿エリアから我が家のルールを投稿することができます(250文字以内)。ルールのカテゴリとして今回は8種類を用意しました。
上部のみんなの投稿では、投稿全体から10件ほどをランダムに選択して表示しています。また、「全投稿はこちら」のリンクをクリックすることで、投稿全体を一覧表示することができます。
各投稿にはいいねボタンを設けました。何回も押すことができるので、気持ちの分だけ押しましょう。
HTML, CSS, JavaScript, PHPを使用しました。もっと複雑な処理を実装したかったのですが、時間が恐ろしくかかりそうだったので断念しました。もっとWeb開発を学習しなければ...
このWebサービスに「可愛らしさ」を取り入れたいと思い、各投稿にふわふわ浮かぶようなアニメーションを加えました。また、各カテゴリ毎に色分けすることで、投稿の内容を判別しやすいようにしました。
投稿を分散させて表示させたかったのですが、各投稿が重なることが多かったです。投稿同士が重ならないように、分散して表示する方法が思いつかなかったです。また、ドラッグ移動に関して、移動範囲を白いキャンバス内におさめたかったのですが、うまくいかなかったです。
さらに、スマホでのドラッグ移動に関して、上手くいかないことがあったため、その修正も行なっていきたいと思います。
1週間でWeb制作を作れるか初めは心配だったのですが、シンプルながらも頭の中でイメージしていたことをアウトプットできたので達成感が半端ないです。web1weekという機会を設けてくださり、ありがとうございますm(_ _)m