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.5k
あなたも作れる!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
140
vivliostyle-2021-autumn
akabekobeko
0
650
redmine-tokyo-20
akabekobeko
0
1.2k
vfm-dev-stat
akabekobeko
0
660
Paged.js について 〜Yet another CSS paged media polyfill〜
akabekobeko
0
1.9k
vivliostyle-2020-spring
akabekobeko
0
1k
Other Decks in Technology
See All in Technology
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
700
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
The Rise of LLMOps
asei
8
1.7k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
AIチャットボット開発への生成AI活用
ryomrt
0
170
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
950
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
How to Think Like a Performance Engineer
csswizardry
20
1.1k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Bash Introduction
62gerente
608
210k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Teambox: Starting and Learning
jrom
133
8.8k
Unsuck your backbone
ammeep
668
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
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