hantas's blog

ブログ移転しました→ http://blog.taniho.net/

ヤマネコでもわかるQtQuick(1)-概説と導入

Qt

今作のロボットから開発環境をUbuntuに切り替えたため，C#で開発していた経路シミュレータがお役御免となりました。
しかしWindowsで旧作マウスをいじることも考えられるため，クロスプラットフォームで動作するシミュレータをつくろうと思います。
開発環境は，Ubuntu12.04LTS, gcc4.8.4，Qt5.2です。
Windows環境はWindows7 Pro 64bit，GNU Make 3.81，Qt5.1です(近いうちにバージョンそろえた方が良いですね)。
QtはGUIアプリケーションをクロスプラットフォーム開発できる有名なライブラリですが，今回は一般的に用いられているQtCreatorを使わずに開発しようと思います。
(ただし，Windowsのmakeを利用したコンパイルがなぜか出来なかったので，コンパイル時のみQtCreatorを使用しています。まあWindowsでQtCreator使わないメリットが特に無いような気がするので良いでしょう)

Qtについてはまだ勉強中なので間違いが見つかると思いますが，その際は指摘をいただけると幸いです。

Qtって何よ？

公式サイトによると

Create connected devices, UIs and applications that run anywhere on any device, on any operating system at any time.

だそうです。
これはマルチプラットフォームで動作するGUIアプリケーションを作るためのフレームワーク，かみ砕いて言えば，Qtを使えばWindowsでもMacでもLinuxでも，はたまたAndroidでも動作するソフトが作れるようになります。 しかも同じソースコードで！
かの有名なSkypeやGoogleEarthなどもQtを利用して作られているそうですので安心して使うことができそうです。

対象読者

  • GUIアプリケーションを作ってみたいが何を使ったら良いか迷っている人
  • Linuxで開発したい人
  • Qtは聞いたことがあるがQMLについて知りたい人

QMLとは

一言にQtと言っても，特にUI設計の作り方にはいくつかの方法があります。

  • フォームファイルでデザインする方法
    VisualStudioでGUI設計することをイメージすると伝わりやすいと思います。 マウスでぽちぽちと部品を配置して，画面の設計をする方法です。 QtCreatorを使う必要があります。

  • QMLでデザインする方法
    独自のQML形式で画面設計を行います。 QMLはCSSとよく似た書式ですが，拡張性に優れています。

今回はQtCreatorを使いたくなかったので，QMLを用いた方式で開発することにしました。 QMLを構成している，QtQuickというフレームワークを利用します。

ここでQMLの優れている点をまとめておきます。

  • 動的にロードするため，画面デザインの変更にはコンパイルが不要
  • C++と相互に連携して呼び出すことができる
  • テキストエディタがあれば編集することが出来る

導入方法

コンパイルするために，makeとgccが必要です。 (今回の開発ではC++を用います)
当然Qtも必要です。
あわせて，Makefileを生成してくれるqmakeもインストールしておきます。

Ubuntu

gcc，makeはすでにインストールされているものとします。

sudo apt-get update
sudo apt-get install qt5-default qt5-qmake

Windows

ダウンロード，インストールします。
Qt - Download
英語が読めない人は諦めましょう，と言いたいところですが，Google先生にでも頼って切り抜けてください。
正直なことを言うと，これくらいの英語が読めないとやっていけないです。 Qtのドキュメントはほとんどが英語です。頑張って慣れてください。

続いてmakeもダウンロード，インストールします。
Make for Windows

あとMinGWをインストールする必要があります。 MinGW - Minimalist GNU for Windows - Browse /Installer at SourceForge.net

次の三つのパスを通しておきます。

C:\Program Files (x86)\GnuWin32\bin
C:\Program Files (x86)\MinGW\bin
C:\Qt\Qt5.1.1\5.1.1\msvc2012_64\bin

拡張子

QMLを用いた開発の際，どのようなファイルが必要なのかまとめておきます。

  • .cpp .h
    C++のソースコードとヘッダです。
  • .qml
    QMLファイルです。 デザインを定義します。
  • .pro
    qmake用のファイルです。 Makefileを生成するためのルールを書きます。
  • Makefile
    qmakeにより自動生成します。

計画

  1. 導入
  2. コンパイルとQML
  3. QMLとドキュメントの使い方
  4. QML要素の動的変化
  5. QMLからC++を呼び出す
  6. C++からQMLを呼び出す

以下未定
次回はコンパイルの仕方とQMLの基礎をまとめます。