Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あなたも作れる!Redmine テーマ/redmine-theme-can-you-make
Search
akabeko
November 02, 2019
Technology
2
3.2k
あなたも作れる!Redmine テーマ/redmine-theme-can-you-make
redmine.tokyo 17 登壇時のスライドです。
akabeko
November 02, 2019
Tweet
Share
More Decks by akabeko
See All by akabeko
redmine-tokyo-14
akabekobeko
0
92
vivliostyle-2021-autumn
akabekobeko
0
570
redmine-tokyo-20
akabekobeko
0
1.1k
vfm-dev-stat
akabekobeko
0
620
Paged.js について 〜Yet another CSS paged media polyfill〜
akabekobeko
0
1.6k
vivliostyle-2020-spring
akabekobeko
0
950
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
23
6.8k
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
450
10分でわかるfreeeのQA
freee
0
220
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
1
120
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
140
Autify Company Deck
autifyhq
1
30k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
2
140
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How to name files
jennybc
62
92k
Automating Front-end Workflow
addyosmani
1353
200k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Faster Mobile Websites
deanohume
296
30k
4 Signs Your Business is Dying
shpigford
174
21k
Building Adaptive Systems
keathley
29
1.8k
Facilitating Awesome Meetings
lara
39
5.5k
Music & Morning Musume
bryan
39
5.5k
Teambox: Starting and Learning
jrom
126
8.4k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Transcript
あなたも作れる! Redmine テーマ @akabekobeko redmine.tokyo 17, 2019/11/2 1
もくじ 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-starter https://github.com/akabekobeko/redmine-theme-starter Git 操作に慣れていれば 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_t
heme しかしこれは基本部分の解説にとどまり、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_List redmine.org は Redmine で運⽤されています。そのるため、まずはアカウント登録しましょ う。テーマ情報として記述する内容については、先⾏例を参考にしてください。 このページは年ごとに区切られているので、テーマを公開する年にあった場所へ掲載しま す。テーマを更新したら Latest release などにも反映してゆきましょう。 テーマ開発よもやま話 27
質疑応答 テーマ開発よもやま話 28
ご清聴 ありがとうございました あなたも作れる!Redmine テーマ 29