開発したきっかけ

SNSが様々なシーンで活用される中で、SNSユーザーが個人の興味に応じたコンテンツを効率的に整理し、同じ趣味を持つコミュニティと繋がる方法が限られていると感じました。 そこで、趣味や興味のあるコンテンツを「ラベル」でカスタマイズし、個人の趣向を反映させたコンテンツ管理ができることを目的に開発しました。

概要

主にLaravelを用いてこのWebをアプリケーションを開発しました。ユーザーが投稿した画像やプロフィール画像などは、Amazon S3に保存しております。この開発を通して、CRUDの仕組みやデータベース設計、ユーザー登録などの基礎的な考え方を体系的に学ぶことができました。今後は実務レベルでこれらの技術を活用していきたいと考えております。

画面構成

プロフィール画面と新規投稿、投稿編集、検索結果、プロフィール編集などで構成される画像投稿型SNSのWebアプリケーションです。

プロフィール画面

プロフィール画面

ユーザーのプロフィール画面では、過去に投稿したものが画像で表示されます。 画面上部の「フォロワー」の箇所では、表示されるユーザー一覧から他のユーザーをフォローすることができます。また、ユーザー名やプロフィール画像など、プロフィールを編集することも可能です。さらに、投稿に関しては「ラベル選択」により選択したラベルをもつ投稿のみを表示させることができ、関連した投稿のみを閲覧したい場合に便利な機能となっております。

新規投稿画面

新規投稿画面

画像と投稿文、ラベルを設定して投稿することができます。ラベルを設定することによって、 プロフィール画面で、投稿の管理がしやすくなります。 ラベルは最大2個まで設定することができます。

投稿編集画面

投稿編集画面

過去の投稿を投稿文とラベルのみ編集することができます。ラベルの変更や追加を行うことができるため、プロフィール画面で管理しやすくなります。

検索結果画面

検索結果画面

検索結果画面では、ハッシュタグやラベルで関連する投稿を検索することができます。 これにより、ユーザーが興味のある投稿のみを見つけることができます。また、興味や関心のある投稿をしているユーザーをフォローするきっかけにもなるため、ユーザー同士の交流も期待できます。

プロフィール編集画面

プロフィール編集画面

プロフィール編集画面では、プロフィール画像や名前、自己紹介など、ユーザーの基本情報を編集することができます。プロフィール画像が設定されていない場合には、デフォルトのアイコンが表示される仕様となっております。

重視している点について

重視している点について

既存の画像投稿型SNSであるインスタグラムを参考にして開発しました。コンピュータのフォルダー管理をヒントにして、開発時点でインスタグラムには存在しないラベル機能というものを実装しました。 投稿にラベルを設定することで、プロフィール画面上の投稿画像をラベルごとに管理することができます。例えば、上記の画像が示すように、 「Foodie」というラベルを選択した時にはラベル名に「Foodie」が設定されている投稿のみが表示されます。 また、の下に「Foodie」というラベル名が表示される仕様になっております。

コーディングについて

Webアプリケーションを開発する上で、PCはもちろんのこと、スマートフォンでも見やすくするためレスポンシブ対応を施しております。