前編に続いて、DailyBeatの主要な機能について説明していくよ。
3. 楽曲投稿機能
楽曲投稿機能は、こんな感じで作られているんだ：
- ユーザーが曲名、アーティスト名、ジャンルなどを入力する
- 入力された情報をデータベースに保存する
- 保存された情報をタイムラインに表示する
例えば、こんなプログラムを書くんだ：
@app.route('/post', methods=['POST'])
def post_song():
title = request.form['title']
artist = request.form['artist']
new_song = DailySong(title=title, artist=artist, user_id=current_user.id)
db.session.add(new_song)
db.session.commit()
return "投稿完了！"
この例では、DailySongというデータベースのテーブルに新しい曲の情報を追加しているんだ。
4. タイムライン機能
タイムライン機能は、こんな仕組みで作られているよ：
- データベースから最新の投稿を取得する
- 取得した投稿を時間順に並べ替える
- Webページに表示する
例えば、こんなプログラムを書くんだ：
@app.route('/timeline')
def timeline():
songs = DailySong.query.order_by(DailySong.timestamp.desc()).limit(20).all()
return render_template('timeline.html', songs=songs)
この例では、DailySong.queryでデータベースから情報を取得し、order_byで並べ替え、limit(20)で最新20件に絞り込んでいるんだ。
IT用語解説
-
タイムライン：SNSで、投稿を時間順に並べて表示する機能のこと。新しい投稿が上に来るようになっているよ。
-
クエリ：データベースに対して、「こういう情報が欲しい」と要求すること。例えば、「最新の20件の投稿が欲しい」というクエリを送ることができるんだ。
5. フォロー機能
フォロー機能は、こんな感じで作られているんだ：
- フォローしたいユーザーを選択する
- 選択したユーザーとフォローする人の関係をデータベースに保存する
- フォローしているユーザーの投稿をタイムラインに表示する
例えば、こんなプログラムを書くんだ：
@app.route('/follow/<username>')
def follow(username):
user_to_follow = User.query.filter_by(username=username).first()
current_user.followed.append(user_to_follow)
db.session.commit()
return f"{username}さんをフォローしました！"
この例では、current_user.followed.appendで、フォローする相手をリストに追加しているんだ。
6. 楽曲再生機能
楽曲再生機能は、Spotify Web Playback SDKという技術を使って作られているよ。これにより、DailyBeat内で直接音楽を再生できるんだ。
例えば、こんなプログラムを書くんだ：
window.onSpotifyWebPlaybackSDKReady = () => {
const player = new Spotify.Player({
name: 'DailyBeat Player',
getOAuthToken: callback => { callback(token); }
});
player.connect();
};
この例では、Spotify Web Playback SDKを使って音楽プレイヤーを初期化しているんだ。
IT用語解説
- SDK（ソフトウェア開発キット）：アプリケーションを開発するための道具箱のようなもの。Spotifyの音楽を再生するための特別な道具が入っているんだ。
7. 開発中に苦労した機能
DailyBeatを開発する中で、特に苦労したのが「タイムラインのページネーション」という機能だよ。これは、たくさんの投稿がある場合に、ページを分けて表示する機能なんだ。
例えば、こんなプログラムを書くんだ：
@app.route('/timeline')
def timeline():
page = request.args.get('page', 1, type=int)
posts = DailySong.query.order_by(DailySong.timestamp.desc()).paginate(
page=page, per_page=10, error_out=False)
next_url = url_for('timeline', page=posts.next_num) if posts.has_next else None
prev_url = url_for('timeline', page=posts.prev_num) if posts.has_prev else None
return render_template('timeline.html', posts=posts.items,
next_url=next_url, prev_url=prev_url)
この機能を作るのに苦労した点は：
- 1ページに表示する投稿数を決めること
- 次のページ、前のページへのリンクを作ること
- 速く動くようにすること
これらの問題を解決するために、いろいろな方法を学んだんだ。
IT用語解説
- ページネーション：たくさんの情報を複数のページに分けて表示する機能のこと。本のページをめくるように、Webページでも情報をページごとに見ることができるんだ。
まとめ
DailyBeatは、音楽を好きな人たちをつなぐためのSNSだよ。Flask、SQLite、SQLAlchemyなどの技術を使って作られていて、ユーザー登録、楽曲投稿、タイムライン表示、フォロー機能、楽曲再生機能などの主要な機能を提供しているんだ。
開発中にはいろいろな難しいことがあったけど、それらを一つずつ解決していくことで、使いやすいサービスを作ることができたんだ。プログラミングは難しいこともあるけど、自分のアイデアを形にできる楽しさもあるんだよ。
みんなも、こういったWebサービスを作ってみたいと思わない？プログラミングを学べば、自分のアイデアを形にすることができるんだ。難しいこともあるかもしれないけど、それを乗り越えた先には大きな達成感が待っているよ。ぜひチャレンジしてみてね！