ソブ

作者・管理人

サイドバーにマストドンを表示させる方法(2019/10/27時点）

雑記

マストドン、日本だとpawooの方が一般的だと思います。それをサイドバーに表示させる方法です。
まずこちらのサイト様の記事を参考にしました。

nichijou-love.hatenadiary.jp
とても丁寧に書いてありますが、プログラミングがまったくできない人は表示させるのは難しい思います。
実はこの記事２か月くらい前にすでに発見してました。レンタルサーバーに引っ越して1か月くらい経過したころです。
しかし、2カ月前の私はHTMLとかCSSとかまったく分からないド素人だったので挫折しました。

それから2カ月、仕事の合間にチマチマ勉強してようやく簡単なことぐらいは出来るようになりました。
今なら参考にした記事様が何を言っていたのかわかります！

貼り付け方法

ウィジェットの作成は記事に書いてある通りに従ってください。
左側に”ダウンロード”と書かれたページについたらファイルと書かれたところにある.zipファイルをダウンロードして下さい。
それと大切な情報と書かれたところは全てメモ帳にコピペしてください。それを保存してどこかに置いといてください。
作成したらいよいよ貼り付けを行います。


まず、新しくメモ帳を開いてください。そこに張り付けていきます。

マストドン表示には4つの材料が必要です。
jQuery
mastodon.widget.css
mastodon.widget.js
mastodon.widget-jp.js
以上の4つです。

①まず、GoogleのCDNからjQueryを読み込みます。記事にあるのをコピペしてもかまいません。（私はそうしました）
それをメモ帳の一番上に張りましょう！

cssとjsファイルはzipファイルの中にあります。
まずはCSSから始めましょう。


②①で張り付けた1行目の下に<style type="text/css">を貼り付けてください。
そしてmastodon.widget.cssをカーソルで選択して
”プログラムから開く”でメモ帳で開きましょう。
それを”Ctrl+A”で全選択し右クリックでコピー（要はすべてコピーします）をしましょう！
それを<style type="text/css">の下に張り付けてください。そして
張り付けたコードの下に</style>を張り付けて下さい。


③</style>の下に<script type="text/javascript">を貼り付けます。
mastodon.widget.jsをカーソルで選択して
”プログラムから開く”でメモ帳で開きましょう。
それを”Ctrl+A”で全選択し右クリックでコピーをしましょう！
それを<script type="text/javascript">の下に張り付けてください。そして
張り付けたコードの下に</script>を張り付けて下さい。


④</script>の下に<script type="text/javascript">を貼り付けます。
mastodon.widget-jp.jsをカーソルで選択して
”プログラムから開く”でメモ帳で開きましょう。
それを”Ctrl+A”で全選択し右クリックでコピーをしましょう！
それを<script type="text/javascript">の下に張り付けてください。そして
張り付けたコードの下に</script>を張り付けて下さい。


以上で4つの材料がそろいました！
⑤次に先ほどの</script>の下にまた<script type="text/javascript">を貼り付けてください。
そしたら、ウィジェットの大切な情報の下にコードと書かれたところがあったはずです。
それのこれ↓と同じようなところをコピペしてください。

 $(document).ready(function() {
        // jQUERY is required!
        var mapi = new MastodonApi({
            target_selector          : '#myTimeline'
            ,instance_uri            : '[マストドンのインスタンスURL]'
            ,access_token            : '[アクセストークン]'
            ,account_id              : '[ユーザのアカウントID]'
            // === optional parameters ===
            //,toots_limit           : 5
            // 下記のサンプルはhttp://fontawesome.io使用
            //,pic_icon              : '<i class="fa fa-picture-o"></i>' 
            //,boosts_count_icon     : '<i class="fa fa-retweet"></i>'
            //,favourites_count_icon : '<i class="fa fa-star"></i>'
        });
    });
</script>

[マストドンのインスタンスURL][アクセストークン][ユーザのアカウントID]はコード内に記載されています。
コピペしたものを先ほどの<script type="text/javascript">の下に貼り付けます。
長々としたメモ帳が出来ましたね？


⑥それをはてなブログの[設定]→[詳細設定]内の「headに要素を追加」のところに
メモ帳に張り付けた内容を全てコピペしてください。
そして[変更する]を押してください。
※私の場合大丈夫でしたが、もしおかしな挙動した場合は、削除してください。


⑦[デザイン]→[サイドバー]→[モジュール追加]→[HTML]に
ウィジェットの大切な情報の下にコードの下に本文の中に (タイムラインのコンテナ):というのがあったはずです。↓つまりコレ
<div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"></div>
これを貼り付けてください。


以上終わりっ！
上手くできた？出来なかったら諦めてHTMLとCSSとJavaScriptを勉強しよう！

それとメインブログもよろしく！
ブログ引っ越してから読者増えたんですが、どういうことですかねぇ？（不満）

sob.tokyo

Pawoo
niconico