redmine.tokyo 17 登壇時のスライドです。
あなたも作れる!Redmine テーマ@akabekobeko redmine.tokyo 17, 2019/11/21
View Slide
もくじRedmine テーマとは?作ってみるリリース2
Redmine テーマとは?Redmine テーマとは? 3
どのようなものか?Redmine を拡張するための⽅法ですRedmine の⾒た⽬を変化させますCSS と JavaScript で構成されますRedmine テーマとは? 4
参考例:Redmine テーマとは? 5
プラグインと⽐べて...Redmine 本体の機能やデータベースには触れません基本的に⾒た⽬だけを拡張しますそのためド派⼿な機能追加はできませんそのかわりに壊れても⾒た⽬が崩れるだけ = 安全気軽に作れます!!Redmine テーマとは? 6
作ってみる作ってみる 7
テーマの構成ファイル主要なものは以下。これらと CSS から参照する画像、Web フォントなどのリソースで構成されます。stylesheets/application.css...通常表⽰の外観を定義responsive.css...Web ブラウザー表⽰幅が狭い状態の外観を定義favicon/favicon.ico...ファビコンjavascripts/theme.js...動的な処理をするための JavaScript作ってみる 8
環境構築テーマのファイル構成⾃体は単純ですが、ゼロから CSS/JS を作り始めるのは厳しいかもしれません。そのためスターター キットを⽤意しました。これを使うためには以下をインストールする必要があります。Node.js (+ npm)https://nodejs.org/Docker Desktop (Windows/Mac)https://www.docker.com/products/docker-desktopどちらも公式インストーラーに従ってセットアップすれば OK です。作ってみる 9
スターターの⼊⼿スターターは以下に公開しています。akabekobeko/redmine-theme-starterhttps://github.com/akabekobeko/redmine-theme-starterGit 操作に慣れていれば git clone、馴染みがなければ ZIP ファイルをダウンロード & フォルダーに展開します。フォルダーは好みの名前に変更しても⼤丈夫です。作ってみる 10
スターターの起動スターターはコマンドラインで操作します。そのためWindows: PowerShell などMac: Terminal、iTerm などを起動 (以降、これらをターミナルと呼びます) して以下のコマンドを実⾏します。$ cd "スターターのフォルダー"$ npm installこれでスターターに必要なものがインストールされます。作ってみる 11
スターターの構成.└── src/├── assets/│ ├── images/│ └── stylesheets/│ ├── application.css│ └── responsive.css└── scss/├── App.scss├── Responsive.scss└── default/├── application.css└── responsive.css作ってみる 12
スターターの構成 2フォルダー 役割src/assets/ Redmine からテーマとして参照される場所。src/assets/images/ テーマの画像ファイル置き場。src/assets/stylesheets/ SCSS から変換された CSS ファイルの出⼒先。scss/ SCSS ファイル置き場。scss/default/ Redmine 標準 CSS 置き場。作ってみる 13
補⾜ : SCSS とは⼀体?SCSS は CSS の強化版です。好きな単位で CSS/SCSS ファイルを分割・参照する⾊やサイズの指定に名前をつけて共通するなどの便利な機能があります。以下はその例。@import "./default/application"; //外部 CSS/SCSS参照$color_white: #fff; //⾊の定義$size_full: 100%; //サイズスターターは SCSS を編集して保存すると CSS に変換する仕組みを提供しています。作ってみる 14
テーマを編集してみるそれでは実際にスターターを起動して Redmine テーマを作ってみましょう。ターミナルから以下のコマンドを実⾏します。$ npm startすると SCSS ファイルの変更監視モードが起動されます。この状態で SCSS ファイルを編集して保存すると、それを察知して⾃動的に CSS へ変換してくれます。監視モードを終了させる場合はターミナル上でキーボードから Ctrl+ Cを押してください。作ってみる 15
Redmine で表⽰してみるテーマを Redmine で表⽰してみましょう。ターミナルから Docker を起動します。$ docker-compose up -dこれで Redmine 関連が起動されました。Web ブラウザーから http://localhost:8080/ にアクセスすると、Redmine が動作していることを確認できるはずです。Redmine にログインしたら管理画⾯から⾃作したテーマを選べるので、動作確認してみましょう。Redmine を終了させる場合は以下を実⾏してください。$ docker-compose stop作ってみる 16
補⾜ : Docker とは⼀体?Docker とはコンテナと呼ばれる⼩さな OS 環境を複数、同時に制御するためのソフトウェアです。と⾔うと難しく感じるかもしれませんが、ざっくり要約するとこんな感じです。誰かが作った環境を⼿軽に利⽤できる環境構築の難しい Redmine も「誰かが」作ったものを利⽤すればいいRedmine 公式イメージもあります https://hub.docker.com/_/redmineテキストで環境や設定を管理できる編集や流⽤が簡単で Git などの履歴管理とも相性がよい慣れるまでは誰かの鉄板構成をコピペでも OKとても便利なので最近の Web 開発でもよく使われています。作ってみる 17
Live Codingこれまで解説した操作を実際に私のマシンで実⾏します。更に1. Redmine にログイン2. テーマを⾃作するものに変更3. テーマを編集して Redmine に反映して Redmine テーマ作成の雰囲気を味わってみましょう。作ってみる 18
リリースリリース 19
作ったテーマを配布する作ったテーマの配布⽤イメージを作成します。まずはスターターの package.jsonを編集しましょう。{"name": "mytheme","version": "1.0.0","author": "author"}name= テーマ名、 version= バージョン、 author= 作者です。これを⾃分⽤に編集して保存します。リリース 20
作ったテーマを配布するターミナルから以下のコマンドを実⾏します。$ npm release少し待つとスターターのフォルダー内に テーマ名-バージョン.zipというファイルが出⼒されます。これが配布⽤イメージです。この ZIP を展開して Redmine のテーマ フォルダー内に配置することで、ユーザーはあなたのテーマを利⽤できます。リリース 21
テーマ開発よもやま話テーマ開発よもやま話 22
HTML/CSS 構造の調査⽅法 1テーマ作成にあたり、どの CSS がどこに適⽤されるかを知る必要があります。これをどう調べているか。まずは redmine.org の資料を読んでみます。http://www.redmine.org/projects/redmine/wiki/HowTo_create_a_custom_Redmine_themeしかしこれは基本部分の解説にとどまり、HTML/CSS の階層やクラス名などにはほとんど⾔及していません。そもそも詳細な HTML/CSS の資料を Redmine のバージョン更新に追従しながら書くのも難しいでしょうから、仕⽅のないことです。テーマ開発よもやま話 23
HTML/CSS 構造の調査⽅法 2ではどのように調査すればよいか。私の場合は以下のようにしています。1. Redmine を Chrome や Firefox の開発ツールで開く2. 変更したい箇所を開発ツールで選択して HTML/CSS を特定地道な作業になりますが、Redmine 標準テーマの CSS でもクラス定義などは表⽰部分で⼤まかにまとまっているので、意外にいけます。テーマ開発よもやま話 24
theme.jsテーマは基本的に CSS で定義します。しかしボタン追加など UI の構造に踏み込んで拡張したい場合は theme.jsを使います。私の開発している minimalflat2 というテーマでは、Redmine のプロジェクト⼀覧をツリー表⽰するのに利⽤しています。ちなみに Redmine は jQuery を利⽤している (= 読み込んでいる) ので、 theme.jsからも参照できます。テーマ開発よもやま話 25
参考例 :テーマ開発よもやま話 26
redmine.orgテーマを作成して公開する場合、redmine.org の Wiki にある Redmine theme list へ掲載することをオススメします。現在、ここが実質的な公式のテーマ⼀覧ページだと思われます。http://www.redmine.org/projects/redmine/wiki/Theme_Listredmine.org は Redmine で運⽤されています。そのるため、まずはアカウント登録しましょう。テーマ情報として記述する内容については、先⾏例を参考にしてください。このページは年ごとに区切られているので、テーマを公開する年にあった場所へ掲載します。テーマを更新したら Latest release などにも反映してゆきましょう。テーマ開発よもやま話 27
質疑応答テーマ開発よもやま話 28
ご清聴ありがとうございましたあなたも作れる!Redmine テーマ 29