Mastodonのウィジェット

ブログパーツの少なさ

Mastodonの初期設定などが済んだので、このブログのサイドバーに自分のタイムラインが表示できるウィジェットを探しましたが、WordPress用のプラグインで用意されてるのは1つのトゥートを投稿上に埋め込むものしか見つかりませんでした。

1つだけ見つかったウィジェットを導入してみる

そんな中、1つだけMastodonのウィジェットを作成している会社があったので導入してみました。それがこちら　
有限会社アゼット-マストドンウィジェット紹介ページ
用意されているウィザードを使って簡単にコードを作ることができます。
詳しい手順は有限会社アゼット様がQiitaに投稿しているページがわかりやすいです。
Qiita-マストドンのタイムライン表示ウィジェットを作成しました。

ファイルアップロード後にエラーが

自分の環境では、ダウンロードした3つのファイルをWPがインストールされているディレクトリ直下に配置しました。

その後、Insert Headers and Footersプラグインでヘッダー内にマストドンウィジェット作成ウィザードで作成された1つ目のコードを、外観-ウィジェットのページでカスタムHTMLを使い2つ目のコードをサイドバーに配置しました。

追記（2018年10月10日）:WordPressではCSSファイルとJSファイルを読み込ませるには別な方法を取らなくては行けないことがわかりました。
詳細はこちらの記事にまとめました。
MastodonウィジェットをWordPressに正しい方法で読み込ませる

これで表示されると思ったのですが、表示されませんでした。

F12を押して見ると

Uncaught TypeError: $ is not a function
at new MastodonApi (mastodon.widget.js:31)

と、出てしまいました。

エラーの解決方法

このエラーについて調べてみると、WPとjQueryの関係があるとわかりました。
jQueryと他のjavascriptライブラリがコンフリクトしないようにjQueryが使用する”$”という関数の別名定義を未定義状態にしているようです。

いろいろ解決方法はあるようですが、自分は必要な”$”をjQueryに置き換える方法を取りました。
置き換えた文字列は以下の通りです。

mastodon.widget.jsファイルの
“$(“を”jQuery(“に置換
“$.ajax”を”jQuery.ajax”に置換

以上2点を置き換えた結果、無事ウィジェットを動作サせることができました。
※$をすべてjQueryに置き換えると、トゥートの時刻表示部分がおかしくなりました。

修正後のファイル一式ダウンロードはこちら

今回、有限会社アゼット様にご了承いただきまして、修正後のファイルをダウンロードできるようにして良いとの事でしたので、こちらで公開します

ダウンロードはこちら

追記（2018年10月10日）；2018年10月3日にリリースされたv1.07に対応しました。

以上、Mastodonウィジェットの紹介でした。
では、また～