Help us understand the problem. What is going on with this article?

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

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

まとめ

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした