Dockerから下したインスタンスを再びDockerに載せた 大阪丼にプルリク投げた件 その2

大阪丼にプルリク投げた件

こんにちは。わたしは発熱と鼻水の丘を越えたようです。

去る2018/09/26の午後7時すぎころに大阪丼にv2.4.5をマージする プルリクを投げました。 まあまだマージされてないんですけどもね。というか、凝ったカスタムがMastodon以外に なされてるのか、そのあたりの作業も必要となりそうなのでマージは当分先ですね。

まあそれはともかく、大阪丼のカスタムにチョット触れたのでインスタンスのカスタム とやらを忘れないうちに(もう忘れてる?)書いておこうと思いついたのでやってみます。

まちがっていても怒らないでください(内容について保証はしません)

細かいファイルの変更だとかを見たい場合はこちらこっちをどうぞ

大阪丼のカスタム

大阪丼では日本語が関西弁(大阪弁)になっています。また、連合やローカルのTLの名前、 ふぁぼやブーストの名前も変わっています。これは普通に日本語のローケルファイルを イジればいいです。

関西弁(大阪弁)というローケルファイルをつくったほうがいいと思ってたんですが、 なかなか面倒そうだったし、大阪丼ということもあって日本語を関西弁にしておきました。

みため

大阪丼ではTLの画面がディスプレイサイズに合うようになっています。 また、背景も梅田っぽくなっています。そして謎のゾウ。

これらをうまいこと再現したかったので、色々試していきましょう!

ナゾのゾウ

最近のMastodonで追加された投稿欄の下のゾウですね。アレを大阪丼のキャラクターに 変更していきます。

masterではこれを設定できるようになっているっぽい??(未確認)

まず、表示したい画像を置いていきましょう。配置先はapp/javascript/imagesの下です。

そして本体をカイゾウしていきます。

app/javascript/mastodon/features/compose/index.jselephantUIPlane をカキカエます。

from '../../../images/画像.拡張子';といった具合に。

あ、そうそう。aboutの画面にキャラクター表示はmasterでてきてたのを確認しました。 そっちのほうがラクでよさげなので、aboutはそちらで。

画面にピッタシTL

さて、ここからはテーマというヤツです。 ようするに見た目をユーザーが選べるようになるヤツです。

大阪丼ではTLのカラム(ホームTLとかのアレ)が画面にピッタシになるようになっています。 また、背景には画像もあります。これらをテーマをつかって再現してみましょう。

まず、app/javascript/styles/にテーマのファイルをつくりましょう。 ファイル名はなんでもいいです。拡張子は.scssで。

ファイルの頭に@import 'application';と書くと、デフォルトのテーマをまるまる 引き継ぐことができます。 その下に変更を記述すると、デフォルトテーマを使いつつも変更を適用することができます。

では画面ピッタシTLを再現してみましょう。

.column {
    flex: auto;
}

なお、大阪丼では投稿欄も伸びてましたが、なんかイケてないなって思ったので TLだけピッタシになるようにしておきました。 (なお、これ以外にこれPR出してよかったのかと思うものがほかにもあるけど、初心者なのでユルシテ!!)

背景に画像

背景に画像を貼ると重くなっちゃうのがアレですけど、大阪丼といえば梅田っぽいアレ。 これもテーマで解決できます!!

まず、背景の画像を配置しましょう。先程のゾウと同じ場所です。

そしてテーマファイルに記述していきましょう。

$background-img: url('../images/背景画像.拡張子');

.ui {
    background: $background-img no-repeat;
}

テーマを使えるようにする

これまでカスタムテーマを色々やってきましたが、そのままでは使えません。 テーマの名前を決めたり、テーマファイルであることをMastodonに教えてあげましょう。

config/themes.ymlにテーマのファイルを記述します。

ここで、defaultに自分のテーマを指定することで、標準のテーマを自分のものに 指定できます。そのときは、標準のテーマも選べるようにしておくといいでしょう。

テーマのファイルの指定ですが、ここで指定するのはIDのようなもので、 テーマの名前(ユーザーから見えるもの)そのものではありません。

デフォルトテーマを変更して、元のテーマも選べるようにしてみましょう。

default: styles/osaka-style.scss
mastodon: styles/application.scss

こうすることでデフォルトテーマをosaka-styleにして、元のテーマも選べるようになります。

さて、次はテーマの名前を決定します。

基本的に日本語と英語に対応していればいいと思う(試してないのでわからない)

config/locales/ja.ymlconfig/locales/en.ymlに書いておきましょう。

各言語ファイルの下のほうにthemes:というのがあります。 そこにさっきconfig/themes.ymlに書いたテーマのID(のようなもの)とその名前を 書きます。ここでは大阪丼のヤツ。

themes:
    default: Osaka-don Style
    mastodon: Mastodon
themes:
    default: 大阪丼スタイル
    mastodon: Mastodon

yamlはタブを許してくれません!!スペースになっているか確認しましょう!

できたかな?

さて、いままでやってきたことを適用するためにdocker-compose buildしましょう。 non-dockerは知りません。

precompileでエラーになったときはカスタムのscssの記述に問題があるときです。 どこかに問題がないか確認しましょう。

また、dockerだとファイルの変更をしたあとは、docker-compose buildをしてから precompileしなくてはいけません。2.5.0くらいからbuildでもprecompileがされるので、 手間が減らせます。

おわりに

Mastodonのカスタムは試行錯誤のくりかえしです。 何度かやってダメならコーヒーや紅茶などで落ちついてからやってみましょう。

Mastodonを手元で動かせるようにしておくとラクです。 Dockerを入れて手元で動かせるようにしておくとかなーりラクになると思うので、 DockerでMastodonのテスト環境を作っておくといいでしょう。

また、Mastodonの更新で今まで大変だったことがカンタンに、もしくはできなくなって しまうかもしれません。 Mastodonの更新は新機能やセキュリティの更新などが含まれるので、 カスタムを重視しすぎて更新をほったらかしにするのはあまり良くないと思います。

Mastodonはいつでもカスタムできます。たぶん。 カスタムもだいじですが、みんなが安心してMastodonができる環境をつくってこそ 鯖缶だと思うので、カスタムは追い追いという感じにゆるしてもらいましょうね。

Dockerから下したインスタンスを再びDockerに載せた 大阪丼にプルリク投げた件 その2