前回はこちら
前回でMastodonサーバの構築が完了しましたので、今回はそのカスタマイズに取り掛かったところからです。
※以下情報は2017/05/16時点での情報です。
Mastodon 1.4.1からディレクトリ構造が変更されているという情報があります。
確認出来次第、変更を実施していきます。
当たり前の話かもしれませんが、まずは管理者の設定ページにてMastodonサーバの紹介文を書きました。
アドレスは「https:// (ドメイン名) /admin/settings」。
分からなくなった場合は、管理者アカウントのプロフィール編集→「管理」→「サイト設定」から行くことができます。
紹介文にはHTMLタグを使用することができ、わたしもこれで画像を埋め込んでいます。
ちなみにサイトの説明文は、アカウント登録ページである「https:// (ドメイン名) /about」の下の方と、このインスタンスについて「https:// (ドメイン名) /about/more」の上に表示されます。
サイトの詳細な説明は、「https:// (ドメイン名) /about/more」の下の方、ユーザー数などが表示されてる部分のさらに下に表示されます。
htmlタグのうち、aタグ、hタグ、imgタグが使えるのは確認しました。
じゃあたいていのタグはいけるんじゃないか？と思いきや、時々ダメなのがありました。
具体的に何がダメだったかは思い出せない...。
続いて、favicon.icoのカスタマイズです。
favicon.icoというのは、Google Chromeでいうところの左上のアイコンです。
地味ですが、ここが変わるとWebページの印象も変わります。
ファイルは「(Mastodonインストールディレクトリ) / public」に配置されてます。
そのため、ここのファイルを入れ換えればよいのですが...ただ注意点が。
Dockerを使って構築してた場合、ファイルを入れ替えたら下記手順が必要になるようです。
実行は
1. assetsフォルダのファイルを削除# docker-compose run --rm web rails assets:clean2. メディアファイル群を事前コンパイルする。# docker-compose run --rm web rails assets:precompile3. mastodon全体を再ビルド# docker-compose build4. mastodonを再起動# docker-compose restart
こちらを参照。
Mastodonのカスタム方法
その他画像ファイルや設定ファイルなどを入れ替えても、この手順は必須な模様。
つまり、画像や設定ファイルを入れ替えるたび、Mastodonの停止は必須となるのです。
要注意。
ここまででfavicon.icoは入れ替わりました。
続いてやったのが、文言の変更。
トゥートや「今なにしてる？」といった言葉の変更ができます。
それらが書いてあるファイルは「(Mastodonインストールフォルダ) / app/assets/javascripts/components/locales/ja.jsx」です。
こんな感じ。
わたしの場合、トゥート→ピギィ！、ブースト→ピギャーッ！に変更しました。
結果、「あなたのピギィ！が××さんにピギャーッ！されました。」と表示されます。
こんな遊びができるのも、Mastodonの魅力のひとつです。
次は、イメージファイルの入れ替え。
場所は「(Mastodonインストールフォルダ) / app/assets/images」。
ちなみに、それぞれ以下のように対応してるようです。
書いてないヤツは忘れました 笑
なんか「あ、ここが変わるのかー」とか思った記憶があるのですが...。
background-photo.jpg... /about と /about/moreページの背景
boost_sprite.png...ブースト時のアニメーション用(見れば分かると思うけど...)
fluffy-elephant-friend.png... /aboutのページで入力フォームの左側に表示されるイメージ
logo.png... /aboutのページで左上に表示されるロゴ
mastodon-getting-started.png...メインページの右下に表示されるモノクロイメージ
mastodon_small.jpg...Twitterなどにリンクを張った際、プレビューで表示されるイメージ
最後は、存在しないURLにアクセスした時のページですね！
このhtmlファイルは、「(Mastodonインストールディレクトリ) /public/500.html」がそうです。
先ほど、各種表示される文章は変えましたので、あとはイメージファイルを置き換えるだけ。
これのイメージファイルは、先ほどのフォルダ内ではなく、500.htmlと同じディレクトリ内のoops.pngがそうです。
なんでこれだけここなんでしょうね？
ここまででカスタマイズはひとまず完了。
また追加でカスタマイズしたり、気がついたところがあれば適宜追記や変更をして行こうと思います！
