昼ご飯共有サービス「食べタケ」

昼ご飯共有サービス「食べタケ」は、大学の授業（ウェブプログラミング実習）の最終課題で開発したサービスです。

このサービスは、SNSに使い慣れている若者に向けて作ったサービスです。最近の若者は、お洒落なレストランやカフェで食事をした際に、必ずと言っても良いほど写真を撮ります。そして、その写真をXやInstagramなどのSNSに投稿し、フォロワーからのコメントや評価を得ようとします。「食べタケ」は、このようなSNS文化で育った若者に向けて作ったサービスです。

クライアントサイド側の記事投稿画面で店名・価格帯・評価・写真で入力されたデータをサーバサイド側のデータベース上に書き込み、メインページでそれらのデータを読み込み、投稿一覧に表示します。

「食べタケ」は4人の合同制作です。私はユーザーインタフェースを担当しました。

画面右下の「投稿する」というボタンを押すと、投稿ページへ画面が遷移します。店名・価格帯・評価・写真を入力して送信すると、メインページにて投稿一覧として表示されます。それぞれの投稿に対しては、コメントもすることが可能です。投稿一覧では、投稿内容や日時、コメントを閲覧することができます。

記事投稿画面では、画像表示機能を付加しました。

<script>
    function previewFile() {
      const preview = document.querySelector('img');
      const send = document.querySelector('input[type=hidden]');
      const file = document.querySelector('input[type=file]').files[0];
      const reader = new FileReader();

      reader.addEventListener("load", () => {
        preview.src = reader.result;
        send.value = reader.result;
      }, false);

      if (file) {
        reader.readAsDataURL(file);
      }
    }
  </script>

previewFileという関数によって、記事投稿画面での画像プレビューが実装できています。画像がアップロードされると、この関数によって自動的にURLに変換され、記事投稿画面にて画像プレビューとして表示されます。さらにここで、send（typeはhidden）変数を用意しました。店舗情報が入力されて「送信」ボタンが押されると、変換されたURLはサーバサイドのデータベースにtext型として書き込まれ、トップページの投稿欄でも画像が表示されます。