Dockerを使ってRedmineのテーマ作成に挑戦中です

2021.01.13

マーケティンググループの福田です。年末から寒い日が続いています。いつも慌ただしく過ごす年末年始ですが、今年はコロナウイルス対策と積雪の影響もあり家で久しぶりにゆっくり過ごしました。

今回は年末年始家で過ごす時間が増えたのを利用して、Redmineのテーマ作成を試した話を書きます。

Redmineのテーマとは

Redmineのテーマは、Redmineの画面デザインを変えることができる設定ファイルです。Redmineにデフォルトで設定されているテーマがあるほか、開発者の方が作成し公開されているテーマをダウンロードして利用したり、自作することもできます。

雰囲気ががらりと変わるのをみて、CSSの勉強をするつもりで自分でもテーマ作成を試してみることにしました。

テーマ作成にあたり、Redmine互換の弊社開発のソフトウェア「RedMica」の公式Dockerイメージを活用しました。環境構築はかなり難しいものと考えていましたが、Dockerを利用することで思ったよりも簡単に構築することができました。

RedMicaの公式Dockerイメージを利用する方法は以下の通りです。

RedMicaコンテナを起動
```
$ docker run -d -p 8000:3000 --name some-redmica redmica/redmica
```
http://localhost:8000/ にアクセスして、起動を確認
Dockerコンテナ上の、テーマの入ったディレクトリをローカル環境にコピーします。テーマを保存したいディレクトリに移動して以下のコマンドを実行します。
```
$ docker cp コンテナID:/usr/src/redmine/public/themes ./
```
一旦1で作成したコンテナを削除して、2で作成したローカル環境のテーマディレクトリをコンテナのテーマディレクトリにマウントさせてコンテナを再度作成、起動します。
```
$ docker run -d  -v ローカルでテーマを保存しているディレクトリの絶対パス:/usr/src/redmine/public/themes -p 8000:3000 --name some-redmica redmica/redmica
```

これだけで準備が完了です。

上記2でコピーしたテーマディレクトリの中に、新たに作成するテーマのディレクトリを追加します。

Redmineのテーマのディレクトリ構成・作成の仕方はRedmineガイドを参考にしました。
Redmineガイド Redmineのカスタムテーマの作成

Dockerで起動したRedmineのテーマを自分で作成したテーマに切り替えることで、変更箇所を確認しながら作業できます。 Redmineのテーマの切替方法

作成にあたり、色々な方が公開されているテーマを参考にしました。
Redmine公式サイトのテーマ一覧

書かれているコードを読んで自分で書いて動かすことを繰り返し、１つ１つ理解できるようになるのが楽しく、とても勉強になりました。

現状は以下のように作成を進めています。

デフォルトのテーマ

作成中のテーマ

全体的に余白を多めにとり、フォントサイズを大きくしています。色の選定が難しく、配色ツールや他のアプリの色使いを参考に試行錯誤しています。ほかにもアイコンをBootstrapアイコンに変えたりしています。

今はCSSのみ追加していますが今後動きを加えたり、メニューの配置を変えたいと思っています。

テーマを作成することで知識が増え、環境構築に利用したDockerについても理解が深まりました。自分が作ったテーマを、Redmineに反映させてすぐに利用できるので楽しくやりがいがあります。今後も作成を続け、完成したらまたブログで書きたいと思います。

こちらの記事もオススメです！

	夏休みの宿題に、Redmine（こどもれっどまいん）で楽しく取り組む試みテーマ「こどもれっどまいん」や「チケットパネル」を使って子どもの夏休みの宿題の進み具合を一緒に確認しました。
	クラウドサービス「My Redmine」 2020年の改善まとめ 2020年中にファーエンドテクノロジーのサービス「My Redmine」で行われた改善をいくつかピックアップして紹介します。
	RubyWorld Conference 2020（オンライン）に初登壇しました！ 15分枠で『Redmineの脆弱性診断を「Ruby × Selenium」を使って自動化』と題して発表しました。
	My Redmineを初めて使う方向けにマニュアルを公開しました！ My Redmineを初めて使う方向けに、マニュアルを公開しています。
	AWS Lambda（Node.js）からAWS AppSync（GraphQL）のAPIを利用してみた AWS Amplifyを利用してウェブアプリケーションを開発。APIへアクセスする際、認証などでハマった点と解決方法を紹介します。

ファーエンドテクノロジーからのお知らせ（2025/04/23更新）

	社員研修に伴うサポート体制変更・休業のお知らせ（5/20〜23）社員研修に伴い、5月20日〜23日はサポート体制の変更および休業とさせていただきます。
	オープンソースカンファレンス2025 Nagoyaに弊社代表の前田が登壇（ブース出展あり）オープンソースカンファレンス（OSC）2025 Nagoyaに弊社代表の前田が登壇。『Redmineの意外と知らない便利な機能（Redmine 6.0 対応版）』をテーマに発表します。
	エンタープライズプラン向け「優先サポート」を開始 My Redmineでは、エンタープライズプランをご契約のお客様向けにサポート対応を優先的に行う「優先サポート（プライオリティサポート）」を開始いたしました。
	プロジェクト管理ツール「RedMica」バージョン 3.1.0をリリース Redmine互換のオープンソースソフトウェアファーエンドテクノロジー株式会社は、2024年11月19日(日本時間)、Redmine互換のプロジェクト管理ソフトウェア「RedMica 3.1.0」をリリースしました。
	Redmineの最新情報をメールでお知らせする「Redmine News」配信中新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け