Mastodonタイムラインウィジェット

— Posted inSoftware — 2 min read

マストドンのタイムラインをWebサイトに表示するウィジェットの話．Mastodon timeline feed widgetをカスタマイズして使っています

自分の個人投稿アカウントと地図ロイド公式アカウントをX(SNS)からMastodonに移しましたので，
Webサイトにその内容を表示するウィジェットも，Mastodon用に変更したいというところで調べた結果，
こちらのページ

Mastodonのタイムラインをウェブページに埋め込む | freefielder.jp

を参考に，Mastodon timeline feed widget

Mastodon timeline feed widget | GitLab

を使っています．この時点の最新版 v3.8.2 です．

ただ，いくつかカスタマイズを加えていますので，説明します．

  • ID，インスタンスの設定を自分のに合わせる(これは必須)
  • 投稿日付の表示形式を，”MM DD, YYYY”から”yyyy/M/D”に変更する
  • 画像表示で，画像の中央部分を表示するという凝ったことをされているのをやめて，画像全体を表示する
  • 複数画像の表示に対応する

１．ID，インスタンスの設定を自分のに合わせる(これは必須)

これは当然必要なことで，自分の場合はこうなります．

mastodon-timeline.js

// Your Mastodon instance
instance_url: "https://mstdn.chizroid.info",

// Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
timeline_type: "profile",

// Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
user_id: "110353013885081025",

// Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
profile_name: "@kamoland",

user_idの調べ方は，

widgetのサイトのTip

によると，

  • 自分のアバター画像のURLからIDを取り出すか，
  • https://prouser123.me/mastodon-userid-lookup/ といったサイトで調べる

という方法があるようです．

２．投稿日付の表示形式を，”MM DD, YYYY”から”yyyy/M/D”に変更する

投稿日付ですが，デフォルトの表示形式(Aug 20, 2023)だと自分の場合ピンとこないので，(2023/8/20)の形式に変更しました．

formatDate関数の変更です．

MastodonApi.prototype.formatDate = function (d) {
  let date = new Date(d);

  // MOD: Show yyyy/M/D format
  const displayDate = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();

  return displayDate;
};

３．画像表示で，画像の中央部分を表示するという凝ったことをされているのをやめて，画像全体を表示する

画像表示で，中央部分を表示するという凝ったことをされているのですが，自分は単純に画像全体を表示したかったので，
その処理を削りました．

.img-ratio14_7 {
  position: relative;
  padding-top: 0;
  width: 100%;
}
.img-ratio14_7 > img {
  width: 100%;
}

４．複数画像の表示に対応する

画像を2枚以上添付したトゥートで，全ての画像が出なかったので，出るように対応を入れました．
太字の「media +」の箇所を追加しました．

  // Media attachments
  let media = "";
  if (c.media_attachments.length > 0) {
    for (let picid in c.media_attachments) {
      media = ''media +'' this.placeMedias(c.media_attachments[picid], c.sensitive);
    }
  }
  if (c.reblog && c.reblog.media_attachments.length > 0) {
    for (let picid in c.reblog.media_attachments) {
      media = ''media +'' this.placeMedias(
        c.reblog.media_attachments[picid],
        c.reblog.sensitive
      );
    }
  }

その他，細かい調整を入れました．

実際の表示は，トップページ の下の方で見れます．

改修後のソースは，以下になります．

個人的には，こういうカスタマイズが自由にできるのは，マストドンの醍醐味ではないかと．(＾ω＾)

Comment