Pythonを使ってSNS風のフィードを作成する方法を紹介します。このフィードは、TwitterやInstagramなどのソーシャルメディアのように、最新の投稿が上部に表示される形式で作成されます。

必要なモジュール

このプロジェクトには、次のPythonモジュールが必要です。

  • Flask
  • Flask-SocketIO
  • eventlet

これらのモジュールをインストールするには、以下のコマンドを実行します。

pip install Flask Flask-SocketIO eventlet

アプリケーションの構築

Flaskアプリケーションを作成し、Flask-SocketIOを使用してリアルタイム通信を実装します。以下のコードをapp.pyとして保存します。

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, async_mode='eventlet')

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('new_post')
def new_post(message):
    emit('new_post', message, broadcast=True)

if __name__ == '__main__':
    socketio.run(app)

フロントエンドの作成

次に、フロントエンドのHTMLとJavaScriptを作成します。以下のコードをindex.htmlとして保存します。

<!DOCTYPE html>
<html>
  <head>
    <title>SNS Feed</title>
  </head>
  <body>
    <h1>SNS Feed</h1>
    <div id="feed"></div>
    <form onsubmit="submitPost(); return false;">
      <input type="text" id="post" placeholder="What's on your mind?">
      <input type="submit" value="Post">
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.min.js"></script>
    <script>
      var socket = io.connect('http://' + document.domain + ':' + location.port);
      socket.on('new_post', function(message) {
        $('#feed').prepend($('<p>').text(message));
      });
      function submitPost() {
        var post = $('#post').val();
        socket.emit('new_post', post);
        $('#post').val('');
      }
    </script>
  </body>
</html>

実行

最後に、アプリケーションを実行します。

python app.py

ブラウザで http://localhost:5000 を開き、フィードに投稿をしてみてください。

以上でSNS風のフィードを作成する方法の紹介を終わります。