discordのように自分で作った絵文字や画像をそのまま使えるSNSを開発したよ！

坂島悠太

フォローする

🌈TheAmazingWorldOfEmoji

👤あらまし

こちらでは、作成したSNSについて機能などの面から紹介したいと思います。
qiitaでは、もう少し技術的な面から解説しておりますので興味があればぜひ見ていってください
https://qiita.com/yutadd/items/d2d8f8237d400a70f24e

📒全体的な概要

discordのように自分で作ったemojiを使って投稿ができるSNSを開発しました。
この例のように、
:名前.絵文字名:
とかくと登録された絵文字に変換されます。

default minmi<自分で作ったemoji>
＋画像３枚を投稿する例：

操作の様子をGIF化したため、画質が荒くなっていますが、
:yutadd.yougotthis:
(:ユーザー名.絵文字名:)
といった感じで編集画面で入力することで、絵文字に置き換わります。
もちろんGIFにすることでアニメーションにもできます。

🪶機能

投稿画面での絵文字プレビュー付きの編集エリア。
登録されている絵文字の検索
メッセージの投稿
メッセージへの4つまでの画像の添付および埋め込み

📔リポジトリ

githubでは様々なプロジェクトを登録してあるので、よかったら見ていってください。
https://github.com/yutadd/AmazingWorldOfEmoji.git

🧑‍💻技術的な工夫

・投稿画面で絵文字のプレビューを表示できる部分は、divのroleをtextboxとして、一文字入力するごとに解析処理をするようにしています
・dockerのcomposeという技術により、

docker compose up

というコマンドで一気にバックエンドとフロントエンド、それからデータベースについても起動、および設定が完了します。

🧑‍🏫技術的解説

データベースの概要
※データベースより自動生成を行ったため間違っている可能性があります。

上図のようなデータベースをSpringで抽象化して管理しました
例として、Userモデルはこのような記述をしています

@Entity
@Table(name="users")
@RequiredArgsConstructor
@Getter
@Setter
public class User {
    @NotBlank
    @Expose
    private String name;
    @Id
    @Column(unique=true)
    @NotBlank
    @Expose
    private String userid;
    @Override
    public boolean equals(Object obj) {
        if(obj instanceof User) {
            User u=(User)obj;
            if(u.userid.equals(userid)) {
                return true;
            }
        }
        return false;
    }
    @NotBlank
    private String password;
    private Date birth;

    @Column(unique=true)
    @NotBlank
    private String email;
}