PHPなんもわからん状態からSNS作ってみた

ソフトウェア開発
広告だよ!!!たくさんクリックしてね

大学が春休みに入ったので、以前から作ってみたいと思っていたSNSを開発してみました。

完成物

DTM同好会(仮)https://clubdtm.me/

開発の流れ

1日目 HPデザイン作成・会員登録&ログイン&プロフィール編集機能実装

2日目 投稿機能・タイムライン実装

3日目 いいね機能・返信機能実装

4日目 通知機能実装

5日目 タイムライン実装を急いだせいで画像圧縮が後回しになっていたので実装。(結局webp非対応環境がまだそれなりにあるっぽかったので公開時にはpngに変更しました)


(ここから何もしない期間が1カ月続く・・・)


6日目 音楽投稿機能を実装

7日目 MIDI投稿・再生機能を実装

html-midi-playerを使って再生しています。最初は自作するしかないかと思っていましたが,ほぼ思い通りの挙動をしてくれるのでめちゃくちゃ助かりました。。。

あとMIDIファイルをアップせずに再生確認できるページを作った

8日目 エラー発生時の挙動や,想定外の値を入力されたときの対策を行った(行えてるといいけど)

9日目 投稿曲をランダムに表示する「新曲クルーズ」を実装。サイトの利用規約などの整備。埋め込みタグ(このページの一番上にも使用されています!)の実装。

そして公開!

気を付けたこと,重視したこと

・DTMer向けSNSといっても,どちらかというとDomino使いやハード音源使いをターゲットにしていたので,MIDI投稿・再生機能はなんとしても実装したかった

・気取らずに軽く進捗を上げられるような雰囲気にしたかったので,全体的にスタイリッシュすぎないようにした

・データベース処理やヘッダー描画,ライブラリ読み込みなど共通の処理はモジュール化した

・パスワードなど大事な情報は当然すべて暗号化した(サイト管理人の自分ですら復号化できないようになってます)

・他のSNSやサイトでも見栄え良くシェアできるように,Twitterカードへの対応や埋め込みタグの実装をした

感想

(初歩的ですが)phpコードをモジュール化して1つのページに複数モジュールを読み込ませるようにすると,変数名の被りが出てバグにつながってしまうことがあったので,次回からは被らない命名規則を決めたり,名前空間を使ったりしようと思った。

タイムラインの投稿描画はJavaScriptで行っているが,それだとブラウザバックした際にすべて再読み込みになってしまいページの表示位置がずれてしまったので,ずれない方法またはJavaScript以外の実装方法を考えられるようになりたいと思った。

タイトルとURLをコピーしました