開発ブログ

BLOG

練習でレベルが上がったら、その日の記録を SNS にシェアできるようになりました

練習を続けてレベルが上がるたびに、その日の練習の記録のページが「練習のタイムライン」に 1 つずつ加わるようになった。ページの URL を X などに投稿すると、記録が画像付きで大きく表示される。タイムラインの開き方と、公開したときにほかの人に見えるもの(はじめは自分だけ)、ページにひとことを添える方法も書く。

公開 2026年10月21日

練習でレベルが上がるたびに、その日の練習の記録が 1 ページずつ「練習のタイムライン」に加わり、そのページを SNS にシェアできるようになりました。ページの URL を X などに投稿すると、記録のカードが投稿に大きく表示されます。

投稿に表示される練習の記録のカード。左にトロフィーを持った Friko と「Lv. 5 に到達!」、その下にユーザー名とアイコン。右にレベル(Lv. 5 リズムキーパー)・直近 20 週の練習カレンダー・その週の練習時間・続けて練習した週の数・合計の練習時間
ページの URL を投稿すると表示されるカード

前の記事で紹介したカードは、画像を自分で投稿に貼り付ける必要がありました。今回からは、ページの URL を投稿するだけでカードが表示されます。そのため、統計の画面の下にあった「共有」と、カードを作って共有する画面はなくし、共有はタイムラインのページから行う形に替えました。

練習のタイムラインとは

タイムラインには、レベルが上がるたびにページが 1 枚ずつ加わります。最初のページ(Lv. 1)は、練習を始めた日のものです。ページはアプリが自動で作るので、自分で作る操作はありません。タイムラインができる前に上がったレベルの分は、初めてタイムラインを開いたときに、練習の記録からまとめて作ります。

タイムラインのページの上。レベルの並び(1)は、練習を始めた日・Lv. 2〜5 と届いた日、まだ届いていない Lv. 6。その下に、開いているページの見出し(2)「Lv. 5 に到達 リズムキーパー」と届いた日
タイムラインのページの上
  1. レベルの並び。押すとそのレベルのページに移る。右端はまだ届いていない次のレベル
  2. 開いているページの見出しと、そのレベルに届いた日

各ページのカードには、そのレベルに届いた日の時点の記録が載ります。載るのは、レベルと呼び名、その週の練習時間、続けて練習した週の数、合計の練習時間、届いた日までの 20 週の練習カレンダーです。あとで練習を続けても、ページの数字は変わりません。ページを行き来して届いた日を見比べると、どのくらいの間隔でレベルが上がってきたかがわかります。

開き方

タイムラインを使うには、アカウント設定でユーザー名(@ から始まる名前)を決めておく必要があります。タイムラインの URL にユーザー名が入るためです。決めていなければ、タイムラインを開こうとしたときにアカウント設定が出ます。

タイムラインは、統計の画面のレベルの欄にある「タイムラインを見る」から開けます。統計の画面は、アプリのメニューから開きます。

統計の画面のレベルの欄。Lv. 12 と呼び名、次のレベルまでの経験値の下に「タイムラインを見る」(1)
統計の画面のレベルの欄
  1. タイムラインを見る。いちばん新しいレベルのページが開く

レベルが上がったときのお祝いの画面には、「結果をシェアする」のボタンがあります。押すと、上がったばかりのレベルのページが開きます。

レベルが上がったときのお祝いの画面。Lv. 7 に上がった Friko と呼び名の下に「結果をシェアする」(1)
レベルが上がったときのお祝いの画面
  1. 結果をシェアする。上がったレベルのページが開く

公開して SNS に投稿する

タイムラインは、はじめは自分だけが見られます。ほかの人は見られません。

自分のページの下には、ひとことの欄、公開の切り替え、SNS のボタンが出ます。これらは自分にだけ見えます。

自分のページの下の欄。ひとことの入力と保存のボタン(1)、タイムラインを公開するの切り替え(2)、X・Threads・Bluesky とリンクをコピーのボタン(3)
自分のページの下(自分だけに見える)
  1. ひとこと。カードとページに載る
  2. タイムラインを公開する。オンにすると、誰でもすべてのページを見られる
  3. SNS に投稿。このページの URL を入れた投稿画面を開く。リンクをコピーは URL だけをコピーする

シェアするには、まず「タイムラインを公開する」をオンにします。公開すると、誰でもタイムラインのすべてのページを見られるようになります。ページごとに公開・非公開は選べません。カードとページには、ユーザー名とアイコン、ページに添えたひとことが載ります。

公開してから X・Threads・Bluesky のボタンを押すと、そのページの URL を入れた投稿画面が開き、画像を添付しなくても投稿に冒頭のカードが表示されます。公開する前にボタンを押したときは、先に公開するよう案内が出ます。「リンクをコピー」は、ページの URL だけをコピーするボタンです。

ひとことは、ページごとに 80 文字まで添えられます。誰でも見られるページに載るので、人を傷つける言葉や宣伝、URL は載せられません。保存するときに AI で確かめ、載せられないときは、保存されずに書き直すよう案内が出ます。

作り手のメモ

ここからは、作るときに決めたことの話です。

カードに名前とアイコンを載せることにした理由

前のカードには、名前もアイコンも載せていませんでした。投稿すれば、誰の練習かは SNS のアカウントでわかるからです。

今回のカードは、URL を開けば誰でも見られる、自分のタイムラインのページのものです。ページの見出しにもユーザー名が出るので、カードにもユーザー名とアイコンを載せました。ユーザー名やアイコンを変えると、カードの画像も新しいものに替わります(数字は届いた日のままです)。

投稿の文言にサイトの名前を入れていない理由

投稿画面に入れておく文言は、「練習のレベルが Lv. 5 になりました」のようにレベルだけにしています。最初は、Lv. 1 のページの文言を「Metronome.fm で練習を始めました」のようにして、サイトの名前も入れていました。

ところが X は、文言の中の「Metronome.fm」をドメインと見なしてリンクにします。ページの URL とは別に、もう 1 つリンクがあることになり、ページのカードではなくトップページのカードが表示されてしまいました。そこで文言からサイトの名前を外しました。サイトの名前は、カードに入っています。

文言は投稿画面で書き換えられます。自分で「Metronome.fm」と書き足すと、同じようにトップページのカードが表示されることがあるので、気をつけてください。

この記事を共有

X でポストはてなブックマーク