Laravel/PHP で（会員登録・ログイン必要なし）画像共有SNSアプリ作りました

はじめまして

GAOGAOゲートというプログラミング合宿に参加しています。daijuです。


勉強の一環として、Laravel/PHP/JavaScriptで、非同期の画像共有SNSアプリをデプロイしました。

下記サービスURLです。詳細は後述しますが、下のURLにアクセスするだけで画像投稿できます。1枚だけでもよろしければ投稿お願いします！

https://newtreap.herokuapp.com/top?access_url=1525e4df64119a38Gname=SAMPLE

なぜ作ったのか？

もともと、昔の友達と会ったときに思い出の写真を探し出すのが難しいという不満を持っていました。
例えば、ラインだとチャットメインなのでいらない写真も混ざっていて目的の写真が見つからない！といったことありませんか？

そこで、イベント毎や仲の良い人たちでグループを立てて、画像のみ投稿して思い出を残せるアプリが作りたい（ラインの画像版みたいな感じ）と思ったのがきっかけです。

しかし、

・作成していく中で会員登録・ログインめんどくさくね？

・知らない人が開発したwebアプリに個人情報預けるのこわくね？

・結局ラインのアルバム・Googleフォト使えば良くね？

となったわけです。

ということで軌道修正して登録一切必要なしの画像共有SNSアプリを作成しました！
グループ作成時に発行されるURLを共有さえすれば画像を投稿できます。簡単です。5秒です。

ソースコードは以下にあります。プルリク受け付けています。未熟な部分多いので是非お願いします。機能はもちろん、デザインも！
https://github.com/daiju81/treap/branches

使用技術

Laravel6
PHP 7.3.11
JavaScript/ajax

バックエンド（一部抜粋）

   public function add(Request $request)
   {

         $image = new Image();
         $image->post_id = $post->id;
         $image_path[] = $image_name[$i]->getRealPath();
         $image_file_name[] = $image_name[$i]->getClientOriginalName();
         Cloudder::upload($image_path[$i], $image_file_name[$i]);
         $publicId[$i] = Cloudder::getPublicId();
         $logoUrl = Cloudder::show($publicId[$i], [
           'width'     => 400,
           'height'    => 400
         ]);
         $logoUrl = str_replace('http', 'https', $logoUrl);
         $image->name = $logoUrl;
         $image->save();
       }
       $group_posts_images[] = Image::where('post_id', $post->id)->get();
       return redirect(route('top', [
         'access_url' => $access_url,
       ]));
   }
}

ここが核となる画像共有のプログラムですが、requestで画像情報を受け取りCloudinaryに保存しています。

フロントエンド（一部抜粋）

<div class="card-header"></div>
<div class="card-body chat-card">
  <div id="comment-data"></div>
</div>

for (var i = 0; i < data.comments.length; i++) {
   for(var a = 0; a < data.comments[i].length; a++) {
     var html = `
       <div class="media comment-visible" style="width: 100%;">
      　 <div class="media-body comment-body">
        　<div class="row">
           <span class="comment-body-time" id="created_at">${data.comments[i][a].created_at}</span>
             </div>
             <img style="max-width: 90%;" src="${data.comments[i][a].name}" class="comment-body-content" id="comment">
          </div>
       </div>
      $("#comment-data").prepend(html);
    }
}

jsで5秒ごとに情報を受け取り更新しています。jsの知識はまだ疎いので説明が全然できません。すみません。

使い方

グループ作成し、発行されたURLをLINE等のSNSで共有するだけ！

これだけで画像を投稿できます。

まずはサンプルグループを作成したのでそこで画像投稿を試してみてください！以下URLから入れます！

https://newtreap.herokuapp.com/top?access_url=1525e4df64119a38Gname=SAMPLE

これからの展望

これからさらにアプリをブラッシュアップしていきます！

現在ハッシュタグをつけたTwitter投稿がイベント・フェス等の公式サイトや会場ビジョンで流れることがありますがこれに代わるサービスとして運用していきたいです。

プルリク受け付けているので以下から是非！
[Branches · daiju81/treap · GitHub](https://github.com/daiju81/treap/branches)

まとめ

最初想定していたコンセプトとは少しずれましたが、ログインを削ることで少しでもユーザーが感じる壁は取り除けたかなと思っています。
これで終わりではなくどんどん改善していきます。
URL共有するだけで画像を投稿できるのでぜひ1枚だけでも投稿していただけると嬉しいです。

参考サイト（こちらを参考に作成しました。ありがとうございます）

https://qiita.com/Alesion30/items/dddb3f162e60b16fdc6d