今回構築したサーバ、クロサワドン！サンシャイン!!
前回：Mastodonのサーバを構築しました(Dockerなし)。 - ふえんわーくすらいふろぐ
前回まででDockerなしでのMastodonサーバ構築は完了しました。
ここからはカスタマイズに取り掛かっていきます。
ver1.3.1の時と違って、また他のところで苦労したのですが。。。
【イメージファイルの置き換え】
まず最初に取り組んだのが、イメージファイルの置き換えです。
これをやるだけで、グッとオリジナルっぽさを出すことができ、デフォルトのMastodonからの差別化を図る事ができます。
まずは、イメージファイルの格納フォルダの探索。
これは強引な方法を使いまして...
まずはMastodon以下のすべてのディレクトリとファイルを自分の作業用PCにコピー。
Mastodon以下のディレクトリに対し、「.png」で検索。
すると、「elephant-friend-1.png」といういかにもなファイルを発見しました。
そこで、このファイルのパスを辿っていくと...「/mastodon/app/javascript/images」でその他のイメージファイルを発見。
それぞれ、元の画像のファイルのサイズに合わせて、同じ大きさの画像ファイルを用意して、全部置き換えていったわけです。
イメージファイルの置き換えはまだあります。
「/mastodon/public」にもイメージファイルがいくつかあるのです。
これらも、同じ大きさのイメージファイルを用意して、すべて置き換えました。
【ワードの置き換え】
わたしのMastodonサーバでは、トゥート＝ピギィ！、ブースト＝ピギャーッ！、インスタンス＝アイドルユニット...というようにワードを変えています。
v1.3.1の時は「locale」というフォルダに、そういうワードを変えるファイルが入ってたので、それで検索して特定することに。
すると、「/mastodon/app/javascript/mastodon/locales」が引っかかり、その中の「ja.json」を見ると、いかにもそんな感じのファイルが。
さっそく変えてみた！...ものの、画面上の表示が変わらない。
なんでだ。
そこで、改めて「locale」で検索してみたところ、「/mastodon/config/locales」も引っかかり、その中の「ja.yml」にも似たような内容が記述されてることに気が付いた。
v1.3.1の時に見覚えがあるのは、どっちかっていうとこっちだなぁ...。
そこで、こっちも変更してみたところ。。。
やったぜ、うまくいった！
最初の.jsonファイルはなんだったのか。
【ロゴの変更】
今回のカスタマイズでもっとも苦労したのがこれでした。
v1.3.1では、ロゴは単純な.pngファイルでした。
ところが...v1.6.1では、.svgファイルになってたのです。
自分は.svgファイルの存在を知らなかったので、そもそも.svgファイルとはなんぞや？ってところから入りました。
簡単にいうと、.svgファイルはXML形式でどんな内容で描画するかを記述する画像ファイルです。
したがって、テキストファイルで編集可能です。
じゃあ、この.svgファイルで画像を用意することのなにが嬉しいか...というと、.svgファイルはXMLファイルなので、表示する画像の大きさは.svgファイル自体では設定しません。
つまり、実際使用する箇所で大きさを設定すれば、どんな大きさでも対応できるし、大きくなってもドットが荒くなることはないのです。
これはなかなかすごいことですね。
まぁ難点は、当然ですが複雑な描画をするよう記述すると、それだけ.svgファイルの中身が長くなるので、ファイルサイズがどんどんデカくなってしまうことです。。。
ちなみに中身はこんな感じ。
なんとなく、width=""やheight=""あたりは理解出来ますが、それ以外はサッパリです。
で、この.svgファイルの扱いにとても苦労したわけです。
そもそも、どんなエディターで編集すんの？ってところから調査が始まりました。
調べてみた結果、一番とっつきやすそうだったので、「Vectr」を選びました。
Vectr
ちなみに、ブラウザだけでなくDownloadして使用するアプリもあるのですが、スタンドアロンで動作はせず必ずネットワークに繋がってる必要があるよう。
編集結果の保存をサインアップして保存する必要があるから...だと思われるけど、バックグラウンドでどんな通信をしてるかまでは面倒だったので調べませんでした。
なお、編集結果はサインアップして保存しないと、あとで追加編集が出来ないようです。
適当にいじくってみて、.svgファイルを用意して、入れ替えてみたのですが...なぜか表示されない。
で、よくよく調べてみたところ、表示はされているが、表示されているサイズがあまりに小さすぎて視認できなかった...ということが分かりました。
さすがに適当に用意しただけでは、望んだものは作れないらしい。
大きさが小さいということで、まず注目したのが、.svgファイルのpageの大きさ。
Vectrでは、デフォルトで640px × 640pxの正方形で設定されてます。
今回適用したかったのは、こんな感じの横長のロゴでした。
ので、まずこれを合わせる必要があるのかな、と考えました。
でも適正サイズなんか分からなかったので、大は小を兼ねるってことでと、1600px × 496pxにしました。
で、この状態で再度適用。
...が、しかし。
さっきよりは視認できる程度に大きくなったものの、やはり望んでいた大きさよりは小さいままでした。
1400pxなんてサイズにしたのに、まだ小さいのはなんでだ...。
最終的には、Chromeの開発者ツールで要素をひとつひとつ検証して、そのpxの値でディレクトリ内を検索する...という、総当たりな方法で取り組んでました。
その甲斐あって、なんとかそれを設定しているファイルを特定しました。
「/mastodon/app/javascript/styles/about.scss」の 、a{}内の195行目「line-height: 32px;」、img{}内の213行目「height: 32px;」です。
この値をどちらも96pxに変更しました。
その結果、
この大きさで表示されました。
なお、これはabout画面ですが、ログイン画面にも同じようにロゴが表示されます。
こっちは別のファイルで設定してまして、「/mastodon/app/javascript/styles/containers.scss」の、img{}内の27行目「height: 42px;」で設定しています。
わたしは、これも同様に96pxに変更しました。
さて、これで終わりか...と思いきや、まだあった。
設定画面に表示されるロゴが透過せず、白い枠が表示されたままだったのです...！
これはカッコ悪い。
ちなみに、「/mastodon/app/javascript/images/logo.svg」が対象のファイル。
でも.svgファイルの透過処理なんか分からんー！
調べてみたところ、これで対処できた。
ZorroSVG - Put a Mask on it
.svgファイルを透過処理してくれる、便利なWebページです。
これでなんとか対処できました。
ここまでで、ひと通りカスタマイズは完了です。
これだけやればかなりオリジナリティが高いMastodonサーバになったと感じられます。
ちょっと長くなってしまいましたが、参考にしていただければと思います。
まず最初に取り組んだのが、イメージファイルの置き換えです。
これをやるだけで、グッとオリジナルっぽさを出すことができ、デフォルトのMastodonからの差別化を図る事ができます。
まずは、イメージファイルの格納フォルダの探索。
これは強引な方法を使いまして...
まずはMastodon以下のすべてのディレクトリとファイルを自分の作業用PCにコピー。
Mastodon以下のディレクトリに対し、「.png」で検索。
すると、「elephant-friend-1.png」といういかにもなファイルを発見しました。
そこで、このファイルのパスを辿っていくと...「/mastodon/app/javascript/images」でその他のイメージファイルを発見。
それぞれ、元の画像のファイルのサイズに合わせて、同じ大きさの画像ファイルを用意して、全部置き換えていったわけです。
イメージファイルの置き換えはまだあります。
「/mastodon/public」にもイメージファイルがいくつかあるのです。
これらも、同じ大きさのイメージファイルを用意して、すべて置き換えました。
【ワードの置き換え】
わたしのMastodonサーバでは、トゥート＝ピギィ！、ブースト＝ピギャーッ！、インスタンス＝アイドルユニット...というようにワードを変えています。
v1.3.1の時は「locale」というフォルダに、そういうワードを変えるファイルが入ってたので、それで検索して特定することに。
すると、「/mastodon/app/javascript/mastodon/locales」が引っかかり、その中の「ja.json」を見ると、いかにもそんな感じのファイルが。
さっそく変えてみた！...ものの、画面上の表示が変わらない。
なんでだ。
そこで、改めて「locale」で検索してみたところ、「/mastodon/config/locales」も引っかかり、その中の「ja.yml」にも似たような内容が記述されてることに気が付いた。
v1.3.1の時に見覚えがあるのは、どっちかっていうとこっちだなぁ...。
そこで、こっちも変更してみたところ。。。
やったぜ、うまくいった！
最初の.jsonファイルはなんだったのか。
【ロゴの変更】
今回のカスタマイズでもっとも苦労したのがこれでした。
v1.3.1では、ロゴは単純な.pngファイルでした。
ところが...v1.6.1では、.svgファイルになってたのです。
自分は.svgファイルの存在を知らなかったので、そもそも.svgファイルとはなんぞや？ってところから入りました。
簡単にいうと、.svgファイルはXML形式でどんな内容で描画するかを記述する画像ファイルです。
したがって、テキストファイルで編集可能です。
じゃあ、この.svgファイルで画像を用意することのなにが嬉しいか...というと、.svgファイルはXMLファイルなので、表示する画像の大きさは.svgファイル自体では設定しません。
つまり、実際使用する箇所で大きさを設定すれば、どんな大きさでも対応できるし、大きくなってもドットが荒くなることはないのです。
これはなかなかすごいことですね。
まぁ難点は、当然ですが複雑な描画をするよう記述すると、それだけ.svgファイルの中身が長くなるので、ファイルサイズがどんどんデカくなってしまうことです。。。
ちなみに中身はこんな感じ。
なんとなく、width=""やheight=""あたりは理解出来ますが、それ以外はサッパリです。
で、この.svgファイルの扱いにとても苦労したわけです。
そもそも、どんなエディターで編集すんの？ってところから調査が始まりました。
調べてみた結果、一番とっつきやすそうだったので、「Vectr」を選びました。
Vectr
ちなみに、ブラウザだけでなくDownloadして使用するアプリもあるのですが、スタンドアロンで動作はせず必ずネットワークに繋がってる必要があるよう。
編集結果の保存をサインアップして保存する必要があるから...だと思われるけど、バックグラウンドでどんな通信をしてるかまでは面倒だったので調べませんでした。
なお、編集結果はサインアップして保存しないと、あとで追加編集が出来ないようです。
適当にいじくってみて、.svgファイルを用意して、入れ替えてみたのですが...なぜか表示されない。
で、よくよく調べてみたところ、表示はされているが、表示されているサイズがあまりに小さすぎて視認できなかった...ということが分かりました。
さすがに適当に用意しただけでは、望んだものは作れないらしい。
大きさが小さいということで、まず注目したのが、.svgファイルのpageの大きさ。
Vectrでは、デフォルトで640px × 640pxの正方形で設定されてます。
今回適用したかったのは、こんな感じの横長のロゴでした。
ので、まずこれを合わせる必要があるのかな、と考えました。
でも適正サイズなんか分からなかったので、大は小を兼ねるってことでと、1600px × 496pxにしました。
で、この状態で再度適用。
...が、しかし。
さっきよりは視認できる程度に大きくなったものの、やはり望んでいた大きさよりは小さいままでした。
1400pxなんてサイズにしたのに、まだ小さいのはなんでだ...。
最終的には、Chromeの開発者ツールで要素をひとつひとつ検証して、そのpxの値でディレクトリ内を検索する...という、総当たりな方法で取り組んでました。
その甲斐あって、なんとかそれを設定しているファイルを特定しました。
「/mastodon/app/javascript/styles/about.scss」の 、a{}内の195行目「line-height: 32px;」、img{}内の213行目「height: 32px;」です。
この値をどちらも96pxに変更しました。
その結果、
この大きさで表示されました。
なお、これはabout画面ですが、ログイン画面にも同じようにロゴが表示されます。
こっちは別のファイルで設定してまして、「/mastodon/app/javascript/styles/containers.scss」の、img{}内の27行目「height: 42px;」で設定しています。
わたしは、これも同様に96pxに変更しました。
さて、これで終わりか...と思いきや、まだあった。
設定画面に表示されるロゴが透過せず、白い枠が表示されたままだったのです...！
これはカッコ悪い。
ちなみに、「/mastodon/app/javascript/images/logo.svg」が対象のファイル。
でも.svgファイルの透過処理なんか分からんー！
調べてみたところ、これで対処できた。
ZorroSVG - Put a Mask on it
.svgファイルを透過処理してくれる、便利なWebページです。
これでなんとか対処できました。
ここまでで、ひと通りカスタマイズは完了です。
これだけやればかなりオリジナリティが高いMastodonサーバになったと感じられます。
ちょっと長くなってしまいましたが、参考にしていただければと思います。
