Qt Creator のスニペット機能とウィザード機能

# はじめに

昨日は @task_jp さんによる [QtWebService の紹介](https://qiita.com/task_jp/items/74b67bd85dc0e92a40e6) でした。もともと QtQuick と呼ばれる GUI/HMI の技術のために開発された QML という言語が、まったく関係ないウェブの世界でも便利に活用されていてとても興味深いですね。

本日は Qt Creator の機能を２つほど紹介しようと思います。

# スニペット機能

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13867/0b011a99-8dc5-e458-07a9-0cb1072a8644.png)


Qt Creator で `cla` とか `Q_PROP` とか打つと出てくる補完リストの中に ![image.png](https://qiita-image-store.s3.amazonaws.com/0/13867/99be93a8-9615-88e2-990e-ce3fa59c2cf0.png) **赤い丸** がついているやつが「スニペット」と呼ばれる機能です。
キーワードに関連した**コードの雛形**を展開することができる素晴らしい機能で、たまに役に立ったり、たまにイライラさせてくれるやつです。

## スニペットの一覧

Qt Creator の設定の「Text Editor」の「Snippets」に一覧があります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13867/5e4f1102-1a3c-c69c-e359-d79a2f7b3281.png)

**Group:** のところでグループ（言語や形式）を切り替えることができますが、今回は C++ のものをいくつか見てみましょう。

### class

```cpp:class
class $name$
{
public:
    $name$() {}
};
```
`$name$` となっているところが*変数*になっていて、コードエディタでスニペットを選択して確定すると以下のように編集状態になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/13867/c4f2a95a-e6ed-aa2a-c91f-2060b214012b.png)

ここで `class` の直後の `name` を書き換えることで、同じ `$name$` となっているコンストラクタ名も同時に書き換わる仕組みになっています。

「クラス名は大文字ではじめたい派」のみなさん、「コンストラクタの実装は宣言部には書かない派」のみなさん、「デストラクタも普通は書くよね」派のみなさんはこの `class` のスニペットを以下のように書き換えてはいかがでしょうか？

```cpp:class
class $Name$
{
public:
    $Name$();
    ~$Name$();
};
```

### class derived from QObject

こちらは QObject の派生クラス用のスニペットになります。

```cpp:class
class $name$ : public QObject
{
    Q_OBJECT
public:
    $name$() {}
    virtual ~$name$() {}
};
```

「QObject のサブクラスのコンストラクタは explicit で parent 指定するよね派」のみなさんや「ちゃんとコピー禁止にしたいよね」は以下のように書き換えてはいかがでしょう？

```cpp:class
class $Name$ : public QObject
{
    Q_OBJECT
public:
    explicit $Name$(QObject *parent = nullptr);
    virtual ~$Name$();
    
private:
    Q_DISABLE_COPY($Name$);
};
```

### class template

次はテンプレートクラスのスニペットです。

```cpp:class
template <typename $T$>
class $name$
{
public:
    $name$() {}
};
```

ここでは `$T$` と `$name$` の**２つの変数**が存在しています。
最初に `T` の部分を編集し、次の `name` の編集に移るには **Tabキー** を押してください。

### for

for 文にもスニペットが用意されています。

```cpp:for
for (int $var$ = 0; $var$ < $total$; ++$var$) {
    $$
}
```

ループ変数 `var` と終了値 `total` の二つの変数に続き `$$` という記述が登場しました。ご想像のとおり、変数（名）の設定が済んだ後に **Return キー** を押すとこの場所にカーソルが移動し、ループの中の処理の記述がすぐにはじめられるようになっています。

## スニペットの追加

### for range based

以前は Qt の foreach をよく使っていたのですが、最近は range based for 形式でコードを記述することが多くなってきました。

というわけで、それ用のスニペットを追加してみましょう。

「Add」ボタンを押して、Trigger には `for` と、 Trigger Variant には `range based` などと指定をし、以下のような雛形にします。

```cpp:for
for ($type$ $elem$ : $container$) {
    $$
}
```

これで、一つコードの記述が楽になりましたね。

### property

Qt のプロパティの実装って単純作業で面倒くさいので（でも MEMBER はイヤ）これもスニペット化するのがおすすめです。

```cpp:property(value)
$type$ $class$::$name$() const
{
    return d->$name$;
}

void $class$::set$name:c$($type$ $name$)
{
    if (d->$name$ == $name$) return;
    d->$name$ = $name$;
    emit $name$Changed($name$);
}
```

```cpp:property(class)
$type$ $class$::$name$() const
{
    return d->$name$;
}

void $class$::set$name:c$(const $type$ &$name$)
{
    if (d->$name$ == $name$) return;
    d->$name$ = $name$;
    emit $name$Changed($name$);
}
```

プリミティブな型（int とか bool とか）は value の方を、Qt のクラスなどの場合は class の方を使うことを想定しています。

また、ここでメンバ変数が d-> となっているのは、2015年の Advent Calendar で紹介した [d-pointer](https://qiita.com/task_jp/items/3e992f61ede57c69168b) を使うことを前提としているためです。（Private クラスの宣言もスニペット向きですね。）

設定用のメソッドを注意深く見てみると `set$name:c$` と変数名の後に **:c** がついていることが分かると思います。いつも Qt のサブクラスを書いている方であれば容易に想像できると思いますが、これは **変数名の先頭の文字を大文字に変換する** というマークになります。

`:l` をつけると変数名がすべて小文字に、`:u` をつけるとすべて大文字に変換されます。
前者はクラス名からヘッダファイル名への変換に、後者はクラス名からインクルードガードの変換とかに使えそうですね。

## スニペット機能のまとめ

Qt Creator が提供するコード補完の中の１種で**雛形**を提供する機能がスニペットでした。
割と簡単な仕組みですが工夫次第では日々のコーディングの手間をかなり省いてくれるので、賢く活用しましょう。

詳細は Qt Creator のマニュアルの [Adding and Editing Snippets](http://doc.qt.io/qtcreator/creator-completing-code.html#editing-code-snippets) を参照してください。


# ウィザード機能

スニペットはちょっとしたコードの雛形のための機能ですが、Qt Creator ではプロジェクトやファイルの雛形も自分で生成することができるようになっています。

デスクトップ向けのアプリケーションについては Qt Creator がデフォルトで提供しているテンプレートでかなりの割合がまかなえるのではないかと思いますが、中規模、大規模な組み込みシステムになってくると独自の拡張を追加した Qt のアプリケーションの雛形が必要になってくるケースがあるので、そういう場合には是非お試しください。

ウィザードの追加に関しては [Adding JSON-Based Wizards](http://doc.qt.io/qtcreator/creator-project-wizards-json.html) というとても長いマニュアルがありますので、詳細はこちらを参照してください。

また、Qt Creator 自体が提供しているウィザードのコードが [share/qtcreator/templates/wizards/](http://git.qt-users.jp/git/?p=mirror/qt-creator/qt-creator.git;a=tree;f=share/qtcreator/templates/wizards;hb=HEAD) 以下にありますので、「あのウィザードと同じことがしたいんだけど」という場合はこちらも参考にしてください。

## ウィザードの追加

今回は、[昨日紹介した](https://qiita.com/task_jp/items/74b67bd85dc0e92a40e6) [QtWebService](http://qtwebservice.io/) 向けのウィザードを追加してみようと思います。

```json:wizard.json
{
    "version": 1,
    "supportedProjectTypes": [ "Qt4ProjectManager.Qt4Project" ],
    "id": "U.QtWebServiceApplication",
    "category": "F.Application",
    "trDescription": "Creates a deployable QtWebService application.",
    "trDisplayName": "QtWebService Application",
    "trDisplayCategory": "Application",
    "icon": "webservice.png",
    "featuresRequired": [ "QtSupport.Wizards.FeatureQt.5.3" ],
    "enabled": "%{JS: [ %{Plugins} ].indexOf('QmakeProjectManager') >= 0 }",

    "options":
    [
        { "key": "ProFileName", "value": "%{JS: Util.fileName('%{ProjectDirectory}/%{ProjectName}', 'pro')}" },
        { "key": "MainCppFileName", "value": "%{JS: 'main.' + Util.preferredSuffix('text/x-c++src')}" }
    ],

    "pages":
    [
        {
            "trDisplayName": "Project Location",
            "trShortTitle": "Location",
            "typeId": "Project"
        },
        {
            "trDisplayName": "Kit Selection",
            "trShortTitle": "Kits",
            "typeId": "Kits",
            "data": {
                "projectFilePath": "%{ProFileName}"
            }
        },
        {
            "trDisplayName": "Project Management",
            "trShortTitle": "Summary",
            "typeId": "Summary"
        }
    ],
    "generators":
    [
        {
            "typeId": "File",
            "data":
            [
                {
                    "source": "app.pro",
                    "target": "%{ProFileName}",
                    "openAsProject": true
                },
                {
                    "source": "main.cpp",
                    "target": "%{MainCppFileName}"
                },
                {
                    "source": "config.qml"
                },
                {
                    "source": "root/index.qml.tpl",
                    "target": "root/index.qml",
                    "openInEditor": true
                },
                {
                    "source": "qml.qrc"
                },
                {
                    "source": "git.ignore",
                    "target": ".gitignore",
                    "condition": "%{JS: !%{IsSubproject} && '%{VersionControl}' === 'G.Git'}"
                }
            ]
        }
    ]
}
```

[QtQuick Application の一番シンプルなテンプレート](http://git.qt-users.jp/git/?p=mirror/qt-creator/qt-creator.git;a=blob;f=share/qtcreator/templates/wizards/projects/qtquickapplication/empty/wizard.json) を参考に、いらないページを削ったり、ファイルのパスの調整をしたりをしたものになります。

```app.pro
TEMPLATE = app
QT = webservice

SOURCES += %{MainCppFileName}

RESOURCES += qml.qrc
```

%{MainCppFileName} のところには main.cpp や設定によっては main.cc が入ります。

```cpp:main.cpp
%{Cpp:LicenseTemplate}\

#include <QtCore/QCoreApplication>
#include <QtWebService/QWebServiceEngine>

int main(int argc, char *argv[])
{
    QCoreApplication app(argc, argv);

    QWebServiceEngine engine(QStringLiteral(":/config.qml"));
    engine.start();

    return app.exec();
}
```

%{Cpp:LicenseTemplate} が Qt Creator のライセンスの設定の内容にしたがって置換されます。

```qml:root/index.qml.tpl
import QtWebService.HTML 5.0

Html {
    Head { title: 'QtWebService' }
    Body {
        H1 { text: 'QtWebService' }
        P { text: '...' }
    }
}
```

一応テンプレートから qml を生成する形式にしていますが、今のところは設定等はとくにありません。

```qml:config.qml
import QtWebService.Config 0.1

Config {
    listen.address: '*'
    listen.port: 8080
    server.name: 'QtWebService'

    contents: {
        '/': './root/',
    }

    cache: {
        'qml': true
    }

    deflate: {
        'video/*': false
        , 'image/*': false
    }
}
```

QtWebService の設定ファイルです。

```xml:qml.qrc
<RCC>
    <qresource prefix="/">
        <file>config.qml</file>
        <file>root/index.qml</file>
    </qresource>

</RCC>
```

リソースファイルです。

webservice.png
![webservice.png](https://qiita-image-store.s3.amazonaws.com/0/13867/e1cb312b-0148-d3aa-e0e8-d42b5a7c8941.png)

webservice&#064;2x.png
![webservice@2x.png](https://qiita-image-store.s3.amazonaws.com/0/13867/b6b52229-c23d-08e1-d159-a01d6b3f38da.png)

画像ファイルですね。

```git.ignore
*.pro.user*
```

以上が必要なファイルになります。

ファイルの置き場所は [Adding New Custom Wizards](http://doc.qt.io/qtcreator/creator-project-wizards.html) の方に記載があり、

- Qt Creator のインストールパス/share/qtcreator/templates/wizards
- $HOME/.config/QtProject/qtcreator/templates/wizards ... Linux と macOS
- %APPDATA%\QtProject\qtcreator\templates\wizards ... Windows

となっています。

> ~/.config/QtProject/qtcreator/templates/wizards/qtwebserviceapplication $ find
> .
> ./webservice.png
> ./webservice@2x.png
> ./config.qml
> ./main.cpp
> ./app.pro
> ./root
> ./root/index.qml.tpl
> ./git.ignore
> ./wizard.json
> ./qml.qrc

## 新しいウィザードが追加されました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/13867/8530a07f-7290-b516-b249-ec54570279a2.png)

# まとめ

今回の記事では Qt Creator のスニペット機能とウィザードの追加について紹介しました。
どちらも簡単にいじれるとても便利な機能ですので、毎回毎回同じようなことを繰り返すのが面倒になった際には是非お試しください。

明日は @taniho_0707 さんによる [Qt for Androidで広告を掲載する](http://blog.taniho.net/2017/12/TAC-07-Qt-for-Android%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%92%E6%8E%B2%E8%BC%89%E3%81%99%E3%82%8B/) です。お楽しみに！