Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
150
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
次のコンテナセキュリティの時代 - User Namespace With a Pod / CloudNative Days Winter 2024
pfn
PRO
5
460
情シスの引継ぎが大変という話
miyu_dev
2
540
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
270
総会員数1,500万人のレストランWeb予約サービスにおけるRustの活用
kymmt90
3
2.8k
店舗向けSaaSにおける 顧客要望活用の実践アプローチ(20241205_pmconf)
yujirooo
0
1.2k
B11-SharePoint サイトのストレージ管理を考えよう
maekawa123
0
120
Hyperledger Fabric(再)入門
gakumura
3
6.7k
サービスの拡大に伴うオペレーション課題に立ち向かう / 20241128_cloudsign_pdm
bengo4com
0
860
システムリプレイスプロジェクト発足から7年、改めてコスト最適化に向き合う / replace and cost optimization
takumi
1
320
ソフトウェアエンジニアとしてキャリアの螺旋を駆け上がる方法 - 経験と出会いが人生を変える / Career-Anchor-Drive
soudai
1
200
GAS × Discord bot × Gemini で作ったさいきょーの情報収集ツール
ysknsid25
1
510
プロダクトの爆速開発を支える、 「作らない・削る・尖らせる」技術
applism118
5
2.3k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Docker and Python
trallard
40
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
310
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
How STYLIGHT went responsive
nonsquared
95
5.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fireside Chat
paigeccino
34
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
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