前回の記事でインスタンスの改造について触れたので現在あるさばで施されている改造について大雑把に述べておきます。

素人ができる範囲でやった改造なので大したものはありませんし、見苦しいコードもあるかと思います。ご勘弁を。

画像の差し替え

live/public/とlive/app/javascript/images/の中にデフォルトで表示される画像などが入っているのでここを差し替えます。あるさばでは以下のファイルを変更しました。

live/public/favicon.ico

ブラウザのタブに表示されるアイコンです。ぴちょんくんに描いて頂きました。

live/app/javascript/images/elephant_ui_plane.svg

象が紙飛行機を投げてるやつです。~/about/(more)と~/web/に反映されます。ここはななシコくんに描いて頂きました（~~溶けてきた・・・~~）。

live/app/javascript/images/logo_full.svg

~/about/(more)等に反映されるロゴです。ここは自分で作りました。

ちなみにカバーアートはおせちんこくんに描いて頂きました。この場を借りて3人に感謝します。他のデフォルト画像も何を描くか決まり次第変更していこうと思います。

翻訳ファイルの変更

live/app/javascript/mastodon/locales/とlive/config/locales/の中に様々な言語の翻訳ファイルが入っています。ここを変更することで、ブラウザで表示される言葉を変えることができます。あるさばでは以下のファイルを変更しました。

live/app/javascript/mastodon/locales/ja.json

主に~/web/の中で表示される日本語の翻訳ファイルです。ちんちんに下品な意味はありません。

live/config/locales/ja.yml

主に~/about/(more)や~/terms/、~/@アカウント名や~/settings/で表示される日本語の翻訳ファイルです。「Admin」バッジを「Sweet Admin」に変更したのが結構気にいっています。

.ymlの方は変更後プリコンパイルは必要ないですが.jsonの方は必要みたいです。

カスタムテーマの追加

1から追加する方法もありますが、面倒だったのでデフォルトであるlive/app/javascript/styles/mastodon-light/内のファイルを直接書き換えました。

live/app/javascript/styles/mastodon-light/diff.scss

スタイルが書かれているファイルです。具体的な色コードは以下のファイルに書かれています。

live/app/javascript/styles/mastodon-light/variables.scss

上のdiff.scssで使う色コードが書かれているファイルです。どの変数がどこに対応しているのか確認しながら変更してください。

投稿フォーム下に統計を表示

live/app/javascript/mastodon/features/compose/components/の中にトゥート関連のファイルが入っています。あるさばでは以下のファイルを変更しました。

live/app/javascript/mastodon/features/compose/components/compose_form.js


   ...
     <div className='compose-form__publish'>
         <div className='compose-form__publish-button-wrapper'> <Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /> </div>
     </div>
     <iframe src="https://yuzulabo.github.io/Mastodon-Activity-Embed/embed.html?~" width="100%" height="100%" frameborder="0" scrolling="no"> </iframe>
   </div>
   ...

最後の方にHTMLタグを直接書きます。統計を表示するiframeはここからお借りしました。なおこのやり方はいささか強引かもしれません。

スタンプとテキストショートカットの追加

専らここを参考に、ベースラインはstyle="~"にvertical-align: baseline;を追加して調整しました。

文字列への変換は単純に.replace(/変換前の文字列/g, '変換後の文字列')と書けばいいです。複数変換したかったのでブロックチェーン（~~ゴリ押し~~）で書きましたがさすがにもっといい方法があると思うので後々書き換えます。

getting-startedの変更

デフォルトでは~/web/getting-startedに表示されるのはごく一部で、ミュートやブロックしたユーザーの一覧などは自分のプロフィールから直接表示するしかありません。これでは不便なので以下のファイルを変更しました。

live/app/javascript/mastodon/features/getting_started/index.js

上半分


    if (multiColumn) {
        navItems.push(
          <columnsubheading key="{i++}" text="{intl.formatMessage(messages.discover)}"></columnsubheading>,
          <columnlink key="{i++}" icon="users" text="{intl.formatMessage(messages.community_timeline)}" to="/timelines/public/local">, //LTL
          <columnlink key="{i++}" icon="globe" text="{intl.formatMessage(messages.public_timeline)}" to="/timelines/public">, //FTL
          <columnlink key="{i++}" icon="user-plus" text="{intl.formatMessage(messages.invite)}" href="/invites" rel="noopener" target="_blank">, //招待作成
          <columnlink key="{i++}" icon="phone" text="{intl.formatMessage(messages.discord)}" href="https://discord.gg/~" rel="noopener" target="_blank">, //Discord
          <columnlink key="{i++}" icon="question" text="{intl.formatMessage(messages.keyboard_shortcuts)}" to="/keyboard-shortcuts">,	 //キーボードショートカット	
          <columnlink key="{i++}" icon="book" text="{intl.formatMessage(messages.info)}" href="/about/more" rel="noopener" target="_blank">, //鯖の説明
          <columnsubheading key="{i++}" text="{intl.formatMessage(messages.personal)}"></columnsubheading>
        );

      height += 34*2 + 48*6; //48*nのnは上で追加した行数のことです。
    }

下半分


        navItems.push(
          <columnlink key="{i++}" icon="thumb-tack" text="{intl.formatMessage(messages.pins)}" to="/pinned">, //固定トゥート
          <columnlink key="{i++}" icon="volume-off" text="{intl.formatMessage(messages.mutes)}" to="/mutes">, //ミュート
          <columnlink key="{i++}" icon="ban" text="{intl.formatMessage(messages.blocks)}" to="/blocks">, //ブロック
          <columnlink key="{i++}" icon="envelope" text="{intl.formatMessage(messages.direct)}" to="/timelines/direct">, //DM
          <columnlink key="{i++}" icon="star" text="{intl.formatMessage(messages.favourites)}" to="/favourites">, //お気に入り
          <columnlink key="{i++}" icon="list-ul" text="{intl.formatMessage(messages.lists)}" to="/lists">, //リスト
          <columnlink key="{i++}" icon="cog" text="{intl.formatMessage(messages.preferences)}" href="/settings/preferences">, //ユーザー設定
          <columnlink key="{i++}" icon="sign-out" text="{intl.formatMessage(messages.sign_out)}" href="/auth/sign_out" method="delete"> //ログアウト
        );

      height += 48*8; //48*nのnは上で追加した行数のことです。

すでに書かれているコードを元に追加していくだけです。なおtarget="_blank"がうまく適用されないのでいずれ解消したいです。ちなみにこのファイルの下の方にあるごちゃごちゃしたリンクは邪魔だったので全部消しました。

それと上のDiscordのように新たに追加したところにはファイルの冒頭部分に


    const messages = defineMessages({
      ...
      discord: { id: 'navigation_bar.discord', defaultMessage: 'Discord'},
      ...
    });

のように翻訳ファイルへのパス（で合ってる？）を書いてやる必要があります。live/app/javascript/mastodon/locales/ja.jsonの方にもここで設定したidと対応する日本語を追加してください。

ソースコードの埋め込み

~/aboutなどのフッターに表示される「ソースコード」には本家のレポジトリへのリンクが埋め込まれているのでここを自分のレポジトリにしましょう。以下のファイルを作成し、live/config/initializers/内に保存します。

live/config/initializers/source.rb


    # frozen_string_literal: true
    module Mastodon
      module Version
        module_function

        def source_base_url
          'https://github.com/~' #ここに自分のレポジトリのURLを書く
        end
      end
    end

今後の改造について

以上があるさばに施されている改造です。その他の改造についてはブログ内で度々紹介してる記事を参考に各々で実装してください。

今後の改造についてですが、一応現在の自分の実力でできる範囲のことはやったと思うのでしばらく本格的な勉強に専念しようと思ってます。

最後まで読んでいただきありがとうございました。

あねぶろっ！

あるさばの改造について【v2.5.0】

目次