README_ja.md

Mastodon Material

言語 | Language

English (英語)

概要

Mastodon Materialは、Material Design準拠のMastodon向けネイティブテーマです。開発方針はこちら

スクリーンショット

表示/非表示

v1-light + material-v1

v1-dark + material-v1

black + material-v1

v2-light + material-v2

v2-dark + material-v2

mastodon-light + material-v1

mastodon-dark + material-v1

動作環境

• Mastodon v3.1以上

• Sass 1.25.x

導入手順

1. 本リポジトリの以下のファイルを、Mastodonのapp/javascript/stylesへコピーしてください。

   • /src/mastodon-material/

   • /src/mastodon-material.scss

2. Mastodonのconfig/themes.ymlに、以下のコードを追記してください。

   default: styles/application.scss
   contrast: styles/contrast.scss
   mastodon-light: styles/mastodon-light.scss
   
   # 追加テーマ
   mastodon-material: styles/mastodon-material.scss # この一行を追記

3. テーマの表示名を変更したい場合には、Mastodonのconfig/locales/{lang}.ymlに以下を参考に追記してください。(config/locales/en.ymlは必須)

   themes:
    contrast: High contrast
    default: Mastodon
    mastodon-light: Mastodon (light)
   
    # 追加テーマ
    mastodon-material: Mastodon Material # この一行を追記

4. Google Fonts(初期設定)やGitHubのWebfontを利用する設定にしている場合は、CSP(Content Security Policy) に例外を追加する必要があります。Mastodonのconfig/initializers/content_security_policy.rbを以下のように変更してください。

   変更前 …

   def host_to_url(str)
     "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
   end
   
   base_host = Rails.configuration.x.web_domain
   
   assets_host   = Rails.configuration.action_controller.asset_host
   assets_host ||= host_to_url(base_host)
   
   media_host   = host_to_url(ENV['S3_ALIAS_HOST'])
   media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
   media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
   media_host ||= assets_host
   
   Rails.application.config.content_security_policy do |p|
     p.base_uri        :none
     p.default_src     :none
     p.frame_ancestors :none
     p.font_src        :self, assets_host
     p.img_src         :self, :https, :data, :blob, assets_host
     p.style_src       :self, :unsafe_inline, assets_host
     p.media_src       :self, :https, :data, assets_host
     p.frame_src       :self, :https
     p.manifest_src    :self, assets_host

   変更後…

   def host_to_url(str)
     "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
   end
   
   base_host = Rails.configuration.x.web_domain
   
   assets_host   = Rails.configuration.action_controller.asset_host
   assets_host ||= host_to_url(base_host)
   
   media_host   = host_to_url(ENV['S3_ALIAS_HOST'])
   media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
   media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
   media_host ||= assets_host
   
   # custom host
   github_host = "https://raw.githubusercontent.com" # GitHub
   google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
   
   Rails.application.config.content_security_policy do |p|
     p.base_uri        :none
     p.default_src     :none
     p.frame_ancestors :none
     p.font_src        :self, assets_host, github_host, google_fonts_host
     p.img_src         :self, :https, :data, :blob, assets_host
     p.style_src       :self, :unsafe_inline, assets_host
     p.media_src       :self, :https, :data, assets_host
     p.frame_src       :self, :https
     p.manifest_src    :self, assets_host

   Diff

   def host_to_url(str)
    "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
   end
   base_host = Rails.configuration.x.web_domain
   assets_host = Rails.configuration.action_controller.asset_host
   assets_host ||= host_to_url(base_host)
   media_host = host_to_url(ENV['S3_ALIAS_HOST'])
   media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
   media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
   media_host ||= assets_host
   
   + # custom host
   + github_host = "https://raw.githubusercontent.com" # GitHub
   + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
   
   Rails.application.config.content_security_policy do |p|
    p.base_uri :none
    p.default_src :none
    p.frame_ancestors :none
   - p.font_src :self, assets_host
   + p.font_src :self, assets_host, github_host, google_fonts_host
    p.img_src :self, :https, :data, :blob, assets_host
    p.style_src :self, :unsafe_inline, assets_host
    p.media_src :self, :https, :data, assets_host
    p.frame_src :self, :https
    p.manifest_src :self, assets_host

カスタマイズ

テーマのカスタマイズについては、カスタマイズガイドをご覧ください。

Stylus/Stylishテーマ

任意のサーバーでもこのテーマを利用できるよう、ブラウザ拡張機能のStylusやStylish向けのテーマを公開しています。

• 自分でビルドしたテーマを利用する

  1. Sassを導入します。バージョンは動作環境を参照してください。
  2. このリポジトリをクローンまたはダウンロードしてください。
  3. カスタマイズする場合、カスタマイズガイドを参照してください。
  4. build.bat (Windows)またはbuild.sh (macOS/Linux)を実行してください。結果がbuild.cssに出力されます。
  5. StylusまたはStylishでテーマを新規作成し、build.cssの内容をコピペします。利用しているサーバーのドメインを追加して、テーマを保存/有効化してください。

ライセンス

このテーマ及びStylish/Stylus版テーマはAGPL-3.0に基づいて公開されています。また、Google製Material Iconsフォントについては、Apache license version 2.0で提供されています。(このリポジトリにMaterial Iconsフォントファイルは含まれていません)

ヘッダー画像はNoto Sansとmastodon.privacyfilter.user.stylを使用して作りました。