LINEのようなSNSアプリを開発した話

こんちゃ洋梨🍐です!

今回はLINEのようなチャットアプリ(いわゆるSNS)の開発をしてみたので簡単に紹介したいと思います。

(2022/2 追記) 今現在、新しく開発する方はReact Nativeなど他開発環境も考えてみてくださいね。

開発・実行環境

今回、環境には

サーバー側 (CentOS 7):Node.js

クライアント側 (スマートフォン):Xamarin.Forms

を採用しています。

どんなもの?

こんなの!

かなりLINEに寄せてますね(笑)
まぁこのまま公開するわけではないので!👼

手順

今回このアプリを開発した過程を簡単に紹介したいと思います。(未熟な部分があると思いますが悪しからず…)

需要があるようだったら詳しく追記したいと思います。思ったより見られている様なので今後追記していきます。
※また、今後これをベースに開発したアプリを公開する可能性を踏まえて超一応ですがぼかしている画像があるのはご了承ください。

サーバーを用意する

今回はCentOS7がインストールされているVPN「WebARENA」を使用しました。選んだ理由は単に安いからです。

まずはサーバーをセットアップします。

NodeやMySQL等のインストール、SELinuxなどセキュリティー周りなどを構築します。

データベースを構築する

今回データベースはMariaDB(MySQL)を利用しました。

MariaDB

環境を構築したら権限周りやテーブルなどを構築します。

構築一例 (一部)

(API用)サーバーを構築

スマホからのリクエスト(API)を処理します。

Node.jsで構築しました。なお、「Express」フレームワークを利用しました。

JavaScriptでのプログラミング
APIの例

なお、この部分”APIサーバーの作り方”を詳しく知りたい方はこちら「NodeJs+MySQLでAPIサーバーを立てる」を見ていただければわかると思いますので参考にお願いします~^

(プッシュ用)サーバーを構築

この手のアプリはメッセージを受信した等リアルタイムで情報をサーバーから取得する必要があります。

そのため今回使ったのがWebSocketです。

アプリ起動後、サーバーとクライアントはWebSocketで接続し新着通知が来た場合送信するようにしました。

クライアント側(アプリ)を作る

今回はAndroid・iosの開発が(ほぼ)同時にできるクロスプラットフォーム開発環境のXamarin.Formsを使いました。

C#でプログラミングが出来て◎

動作の様子


最後に

大雑把ではありましたが簡単な手順の説明となりました。

簡単なSNSというのもあり、作るのは簡単だったが少しでも凝っていくと時間がかかってしまうように感じましたね…

まあせっかく形だけでも作ったのでなんかの形で公開できないかなぁなんて思いました👼


ここまで読んでくれてありがとうございました!!

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね!見ていただけると本当に嬉しいです!