はじめに

だいぶ煽りがちなタイトルですが、このタイトルを見て本記事をお読み頂いているということは、貴方はきっと普段からQGISをご利用頂いている方なのでしょう。

では早速、普段使っているQGISを開いてみてください。
きっと↓のような画面が開かれていますよね。

そんな貴方に一つ問いたい。

$\huge{「その見た目で本当に満足していますか？」}$

今の見た目に満足していない方、
この記事を読めば↓のように見た目をカスタマイズできるようになりますよ。

実行環境

• QGIS 3.40

QGISの見た目を変える方法

既にご存知の方もいらっしゃると思いますが、QGISのGUIはQtを利用して作られています。
QGISのプラグインを作るときに、pyqgisで以下のようなimport文を書いたりするので、「Qtを使っていることは知ってた」という人もいると思います。

from PyQt5.QtWidgets import QDialog

ということは、「Qtで利用できる機能はQGISのGUI上でも好き勝手できるんじゃね？」という発想に至るのは、ごく自然なことですよね。

では、試しにちょっと好き勝手してみましょう。まず、QGISのPythonコンソールを開いてエディタを表示します。

エディタ内で以下のコードを記述して実行ボタン▶を押してみてください。

iface.mainWindow().setStyleSheet("background-color: #333; color: #32cd32;")

随分、雰囲気が変わりますねー。

QGISのmainWindowもQtを利用して作られているので、QtのsetStyleSheetを使って強引にスタイルを割り当てることができるようです。

ここまで理解したら、やることは決まっています。そうです。「StyleSheetをこねくり回して、自分好みのQGISを作っちゃおう」です。

プラグインにしちゃった

そんな感じで最初のうちは、色々とStyleSheetを弄って遊んでいたのですが、設定項目が増えてきてだんだん面倒になってきたので皆さんにも見た目を弄ってもらえるようにプラグインにしました。

インストール方法

インストール方法は他のQGISプラグインと変わらないです。多分「Dresser」とか打てばすぐに出てきます。

使い方

プラグインメニューからのみ起動できます。GIS的な作業の邪魔にならないように、ツールボタンはあえて作らないようにしています。

ダイアログは可能な限りシンプルにしたかったので、ほとんど設定するものはないです。

Use preset
→あらかじめ登録されているプリセットから選択できます。

Use image
→お手持ちの画像を背景として設定できます。画像によっては文字が見にくくなってしまうので、文字色を黒or白から選択できます。

どちらの方法でも、背景を指定してOKボタンを押せばQGISの見た目が変わります。

とてもシンプルなので、ほぼ直感的に使えるのではないでしょうか？

画像の作り方

QGISDresserでお手持ちの画像を背景画像として使う場合、少しコツがいるので説明しておきます。

現状のQGISDresserは指定した画像をQGISのウィンドウサイズ全体まで引き延ばす仕様になっています。そのため、「好きなキャラクターの画像をレイヤパネルに表示させたい」という場合は、余白も含めて丁度良いレイアウトになるような画像を準備する必要があります。

多分、実際に見た方が早いのでやってみましょう。とりあえず、QGISウィンドウのスクリーンショットをパワポに貼り付けます。

表示したい位置にキャラクター画像を配置します。

QGISのスクリーンショットと同じ大きさの長方形を作って、好きな色にします。

キャラクター画像と長方形を選択した状態で右クリックし、「図として保存」します。

保存した画像をQGISDresserで指定すればいい感じになるはずです。

プリセットの弄り方

さて、プラグインに登録されているプリセットですが、実は弄ることができます。

まずは、QGISDresserがインストールされているフォルダを開きます。

↓

↓

↓

QGISDresserの中にpresetというフォルダがあります。

presetの中にlist.ymlが入っていて、以下のようにプリセットを指定しています。

styles:
  - name: "simple-blue-white"
    char-color: "white"
    treeview-color: "rgba(128, 128, 128, 0.6)"
    main-color: "#0000FF"
    main-image: "transparent"
    main-position: "right"
    btn-color: "white"
    btn-image: "transparent"
    btn-position: "top"

  - name: "blue-circle"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "blue_circle.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "blue_circle.png"
    btn-position: "top"

  - name: "green-circle"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "green_circle.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "green_circle.png"
    btn-position: "top"

  - name: "orange-circle"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "orange_circle.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "orange_circle.png"
    btn-position: "top"

yamlファイルで設定できるパラメータは以下の通りです。

• name: プリセットに表示する名前
• char-color: 文字の色（白黒以外も指定できる）
• treeview-color: レイヤパネルとかの色（ある程度半透明にしないと背景隠れちゃう）
• main-color: メインの背景色
• main-image: メインの背景画像
• main-position: メインの背景画像の揃え位置
• btn-color: ボタンの背景色
• btn-image: ボタンの背景画像
• btn-position: ボタンの背景画像の揃え位置

ということで分かると思いますが、yamlファイルの方がより細かな設定が可能になっています。（ボタンだけ別の画像とかもできる）

プリセットとしてお気に入りの背景を登録したい場合は、

1. imagesフォルダの中に使用する画像を入れる
2. list.ymlに追記する

という手順で登録することができます。例えば、先ほどのいらすとやの画像をpresetに登録したい場合、以下のような記述を追加すればOKです。

  - name: "いらすとや"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "わーい.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "transparent"
    btn-position: "top"

おわりに

面白いかなと思って、とりあえずリリースしてみたのですが、多分いっぱいバグとかある状態だと思うので、何かお気づきのことや要望等があれば、以下のリポジトリのIssueに登録頂けると助かります。