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


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

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

Redmineのテーマとは

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

昨年6月弊社が運営する「My Redmine」に新たに小中学生向けのテーマ「こどもれっどまいん緑バージョン」を追加しました

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

環境の準備

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

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

  1. RedMicaコンテナを起動

    $ docker run -d -p 8000:3000 --name some-redmica redmica/redmica
    
    http://localhost:8000/ にアクセスして、起動を確認

  2. Dockerコンテナ上の、テーマの入ったディレクトリをローカル環境にコピーします。テーマを保存したいディレクトリに移動して以下のコマンドを実行します。

    $ docker cp コンテナID:/usr/src/redmine/public/themes ./
    

  3. 一旦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公式サイトのテーマ一覧

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

現在の作成状況

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


デフォルトのテーマ

作成中のテーマ

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

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

今後も続けていきたいです

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


My 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へアクセスする際、認証などでハマった点と解決方法を紹介します。
ファーエンドテクノロジーからのお知らせ(2021/01/13更新)
年末年始 休業のお知らせ (12/29〜1/4 休業)
年末年始は2020/12/29(火)から2021/1/4(月)まで休業いたします。
オープンソースソフトウェア Redmineで始めるプロジェクト管理(シェルスクリプトマガジン Vol.69 掲載)
誰でも自由に使うことのできるオープンソースのプロジェクト管理ツールRedmineの始め方、使い方をご紹介する記事がシェルスクリプトマガジンに掲載されました。
RubyWorld Conference 2020にファーエンドテクノロジーの坂本が登壇します
12月17日(木)にオンラインで開催される「RubyWorld Conference 2020」に弊社エンジニアの坂本が登壇します。オープンソースのプロジェクト管理ソフトウェア「Redmine」の脆弱性診断をRubyとSeleniumで自動化したことを発表します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け