OSS アプリケーションとプログラミング言語についての一考察

(1)

OSS アプリケーションとプログラミング言語についての一考察（翁長）

はじめに

現在 PC-UNIX で用いられる主なデスクトップ環境として，オープンソース・ソフトウェア（OSS）のデスクトップ環境である KDE や GNOME が利用されている。これらの OSS デスクトップ環境におけるシステムツールやアプリケーションの開発には，それぞれ Qt と GTK というアプリケーション開発フレームワークが使われている。GTK は C 言語，Qt は C++ 言語で記述され

1 ）

1 ） 2 ）2 ）

3 ） 3 ） 4 ）4 ）

論文

OSS アプリケーションと

プログラミング言語についての一考察

翁長朝英

（京都学園大学経営学部論集第21巻第 1 号 2011年10月 55頁〜72頁）

要約新しい OSS アプリケーションの開発フレームワークである Qt Quick とその開発言語である QML について考察している。特に，従来の Qt で用いられていたモデル／ビューアーキテクチャが，QML においてどのように取り扱われているか，考察した。QML は，アプリケーションのユーザーインターフェースを記述する宣言型の言語であり，言語構造が簡単で解り易い言語である。また，JavaScript や C++ 言語と組み合わせて，複雑な処理を行うことも可能である。QML は，現在モバイルデバイス用のシステムアプリケーションの開発に利用されており，QML によるアプリケーションの作成技法の研究は，

今後さらに重要になることを指摘している。

キーワード：OSS，Qt，QML

1 ） KDE Community http://www.kde.org 2 ） GNOME Project http://www.gnome.org

3 ） Qt Project http://qt-project.org http://qt.nokia.com/title-jp/

4 ） GTK+ Project http://www.gtk.org

(2)

ているため，これらのモジュールを利用したアプリケーションの作成においても，C 言語や C++ 言語を使う必要がある。

C や C++ 言語によるプログラミングは，文法の習得や言語構造の理解など，

またコンパイルの操作等の煩わしさを伴っている。そして，このような問題を解決する方策として，Ruby や Python といったオブジェクト指向のスクリプト言語を用いて，GTK や Qt などのモジュールを利用する方法が取られている。

一方，今日のスマートフォンやタブレットの普及のような，モバイルデバイスの急速な進展に伴って，新たなアプリケーション開発フレームワークの開発も行われている。モバイルデバイスのシステムにおいては，デザインやアニメーションを重視したタッチ操作可能なアプリケーションの開発，より迅速なアプリケーションの開発が求められている。このようなアプリケーション開発フレームワークは，従来の開発フレームワークを拡張するように，新たなモジュールを追加する形で開発されてきた。Qt では，新たな開発フレームワークとして，Qt Quick（Qt Quick User Interface Creation Kit）を導入している。

Qt Quick アプリケーションの作成には，同時に導入された，宣言型のプログラミング言語である QML（Qt Meta-Object Language）を利用する。モバイルデバイス用のアプリケーション作成技法の特徴は，アニメーションを利用した状態遷移の方法やデータの表示方法にある。QML は，このようなアプリケーション作成技法に対応し，より直感的で現代的なユーザーインターフェースを作成できる言語である。

本稿では，Qt Quick フレームワークで新たに導入された QML における，

データの表示方法について考察する。特に，従来の Qt フレームワークで採用

5 ）

5 ） 6 ）6 ）

7 ）， 8 ） 7 ）， 8 ）

5 ） Ruby http://www.ruby-lang.org/ja/

6 ） Python http://www.python.org

7 ） Qt Quick http://qt.nokia.com/products-jp/qt-quick

8 ） Qt Quick 入門 http://labs.qt.nokia.co.jp/category/qt-quick-tutorial

(3)

されているモデル／ビューアーキテクチャの観点から，QML でデータがどのように取り扱われているか考察する。

Ⅰ Qt Quickと

QML

1 Qt Quick

Qt Quick は，Qt のバージョン4.7から導入されている。これは，QML，Qt Creator，QtDeclarative モジュールの 3 つの要素から構成されている。QML は，CSS（Cascading Style Sheets）に似た構造を持つ，宣言型のプログラミング言語である。アプリケーションのユーザーインターフェースを簡単に記述できる特長がある。また，アプリケーションの振舞いは JavaScript 言語を用いて記述され，この点においても理解し易い言語になっている。

Qt Creator は，アプリケーションの統合開発環境である。これは Qt プログラム開発用として以前から利用されていたが，Qt Quick の導入と同時に，

QML プログラムの開発用途にも利用できるように拡張されている。

3 つ目の要素である QtDeclarative モジュールが，QML プログラムを実行するためのランタイムを提供するモジュールである。このモジュールによって，

QML プログラムは，Qt のオブジェクトとして実行される。また，QML プログラムと Qt の C++ プログラムを組み合わせたアプリケーションを開発する際に必要となるモジュールである。

2 QML

下記のリスト 1 のプログラムは，図 1 に示してあるサンプルアプリケーションを QML で記述したプログラムである。

9 ） 9 ）

9 ） Model/View Programming Qt4.7 Documents

http://doc.qt.nokia.com/latest/model-view-programming.html

(4)

このサンプルアプリケーションは， 1 個のラベルと 2 個のボタンで構成されている。起動直後は「Label」と表示されるが，「Hello」ボタンをクリックすると「Hello World!」と表示し，「Quit」ボタンをクリックすると終了するアプリケーションである。

他の言語との比較として，付録に GTK と C 言語，Qt と C++ 言語，Qt をバインディングした Python 言語のプログラムを掲載してある。これらの言語と比較して，QML ではアプリケーションの構造，ラベルやボタンなどの各部品の設定や処理などが理解し易くなっていることが，一見して分かるであろう。

QML で記述されたプログラムを実行する方法は 2 つある。 1 つは，

QDeclarativeView クラスや QDeclarativeEngine クラスを用いて C++ プログラム内で QML プログラムを呼び出す方法である。 2 つ目は，QML Viewer ツールを利用する方法である。後者の方法では，C++ プログラムの作成は必要とせず，インタープリタのように利用することができる。

10）

10） QtQuick 基本モジュール以外に QtDesktop モジュールも使用している。

http://qt.gitorious.org/qt-components/desktop/

図 1 サンプルアプリケーション

(5)

リスト 1 QML プログラム import QtQuick 1.0 import QtDesktop 0.1 Rectangle {

width: 200 height: 60 Column { spacing: 10

anchors.centerIn: parent Text {

id: label

anchors.horizontalCenter: parent.horizontalCenter text: "Label"

} Row { spacing:8 Button { id: button1 text:"Hello"

width: 80

onClicked: label.text = "Hello World!"

} Button { id:button2 text:"Quit"

width: 80

onClicked: Qt.quit() }

} } }

(6)

Ⅱ QMLにおけるデータの取扱い

1 モデル／ビューアーキテクチャ

Qt では，データの取り扱いにモデル／ビューアーキテクチャを採用している。これは，デザインパターンで言われる，モデル／ビュー／コントローラ

（MVC）アーキテクチャから，ビューとコントローラを統合したアーキテクチ

ャである。Qt では，コントローラの代わりとして，デリゲートを採用している。

Qt アプリケーションでは，モデルとビューをデフォルトの状態で利用する場合は，モデルとビューを統合したクラスである QListWidget や QTableWidget，

QTreeWidget などを利用してデータの表示を行うこともできる。

QML におけるデータの取り扱いにも，このモデル／ビューアーキテクチャが採用されている。しかしながら，QML では，モデルとビューを統合したクラスはなく，これらを組み合わせてデータを表示するようになっている。

モデルの要素（Element）には，ListModel，XmlListModel，VisualItem- Model，VisualDataModel などがある。また，データの表示を担うビュー要素としては，ListView，GridView，Repeater などがある。

2 モデルとビュー

通常の文字データや数値データを取り扱う場合は，ListModel を利用する。

各データアイテムの設定には，ListElement 要素が用いられる。リスト 2 に ListModel を利用したデータ設定の一例が示してある。

ListElement による各データの設定は，ロール（role）を用いて行う。 name や cost がロールである。これらのロール名はデータの設定とともに，ビ

11）

11） Qt Reference Documentation http://doc.qt.nokia.com/4.7-snapshot/qml-listmodel.html

(7)

ューにデータを表示する際デリゲートによる参照に利用される。リスト 3 は，

ListView によるデータ表示の一例である。データは，リスト形式で表示される。

データをテーブル形式で表示するには，GridView 要素を用いる。リスト 3 の ListView を GridView に変更すれば，テーブル形式の表示となる。また，

セルの幅や高さは，cellWidth や cellHeight プロパティで変更できる。QML においては，GridView で使用するデータモデルはリスト形式のモデルである。

twitter アプリケーションや flickr アプリケーションのように，XML 形式のデータを取り扱う場合は，XmlListModel 要素を利用する。source プロパティで，読み込む XML 文書を指定する。ネットワーク上の XML 文書を利用する場合は，その URL を指定する。また，query プロパティで，XML 文書内の読み込むデータの位置を指定する。

モデルに読み込むデータは，このモデルでは XmlRole 要素を用いて設定する。XmlRole では，name プロパティでロール名を設定し，query プロパティリスト 2 ListModel

ListModel { id: fruitModel ListElement { name: “Apple”

cost: 2.45 }

ListElement { name: “Orange”

cost: 3.25 }

ListElement { name: “Banana”

cost: 1.95 }

}

(8)

でロール名に対応したデータを設定する。XmlListModel で定義されたモデルのデータは，ListView を用いて表示できる。flickr 画像のサムネール表示に使用する XmlListModel と対応する XML 文書の一例をリスト 4 に示す。

色付けされた矩形のようなビジュアルデータには，VisualItemModel を利用する。このモデルで設定されたビジュアルアイテムは，ListView や GridView を用いて表示する。VisualItemModel では，モデル内にデリゲートが組み込まれている。そのため，ビューはデリゲートを必要としない。

VisualDataModel は QML の特徴的なモデルである。このモデルでは，モデル内にデリゲートをカプセル化して利用する。特に，Package 要素とともにマルチビューの表示を行なったり，ツリー形式のデータを取り扱う際に，データアイテムのインデックス（index）操作に用いられる。Package 要素を用いたマ

12）

12） QtQuick Examples http://jryannel.wordpress.com/2010/02/24/

using-the-listview-with-an-xml-model/

リスト 3 ListView Rectangle {

width: 200; height: 200 ListModel {

id: fruitModel ・・・・

} ListView {

anchors.fill: parent model: fruitModel delegate: Text {

text: name + “ $” + cost }

} }

(9)

ルチビューの一例をリスト 5 に示す。また，ツリー形式のデータの取り扱いについては，次章で考察している。

Ⅲ 考察

前章で示したように，QML におけるデータの設定と表示には，ロール名が大きな役割をしている。従来の Qt にも，データアイテムの属性を示すロール

13）

13） Qt Reference Documentation http://doc.qt.nokia.com/4.7-snapshot/qml-package.html 例示されたプログラムを一部変更してある。

リスト 4 XmlListModel と XML 文書 XmlListModel {

id: model

namespaceDeclarations: “declare namespace media=

\”http://search.yahoo.com/mrss/\”;”

source: “http://api.flickr.com/services/feeds/

photos̲public.gne?format=rss2”

query: “/rss/channel/item”

XmlRole { name: “thumbnail”

query: ʻmedia:thumbnail/@url/string()ʼ } }

対応する XML 文書の一部

<?xml version=”1.0” encoding=”utf-8”?>

<rss>

<item>

<media:thumbnail

url=”http://farm5.static.flickr.com/xxx.jpg” />

</item>

<item>

<media:thumbnail

url=”http://farm5.static.flickr.com/yyy.jpg” />

</item>

・・・・

(10)

がある。Qt では，モデルの既定クラスを利用する際は，ロールを使う必要はないので，ロールは表には現れない。しかしながら，カスタムモデルを作成して利用する場合は，ロールを用いて表示するデータの設定を行う。QML においてもロールの役割は Qt と同様である。Qt のロールの他に新たなロールを追加して利用している。これは，QtSDK に付属している，QAbstractListModel を親とするカスタムモデルと ListView のサンプルプログラムから読み取ることができる。その一部をリスト 6 に示す。

Qt::UserRole が Qt で定義されたロールである。これには一意的に数字が割リスト 5 VisualDataModel と Package

Delegate.qml Package {

Text { id: listDelegate; width: 200; height: 25; text: display;

Package.name: ʻlistʼ }

Text { id: gridDelegate; width: 100; height: 50; text: display;

Package.name: ʻgridʼ } }

main.qml

VisualDataModel { id: visualModel delegate: Delegate {}

model: myModel }

ListView {

width: 200; height: 200 model: visualModel.parts.list }

GridView {

x: 200; width: 200; height: 200; cellHeight: 50 model: visualModel.parts.grid

}

(11)

り当てられ，UserRole には一番大きな32が割り当てられている。QML で使用するロールは，Qt::UserRole の値に 1 を加えて設定し，新たなロールとして作成される。

Qt には，リストやテーブル，ツリー形式のデータモデルが用意されている。

これらのデータは，それぞれ QListView，QTableView，QTreeView を用いて表示する。しかしながら，QML で用意されているデータモデルは，リスト形式のモデルである。データをテーブル形式で表示するには GridView を用いるが，設定するモデルはリスト形式のモデルである。

ツリー形式のデータを取り扱うには，VisualDataModel を利用する。このモリスト 6 カスタムモデルとロール

model.h

class AnimalModel : public QAbstractListModel {

・・・・

public:

enum AnimalRoles {

TypeRole = Qt::UserRole + 1, SizeRole

};

・・・・

};

model.cpp

AnimalModel::AnimalModel(QObject *parent) : QAbstractListModel(parent)

{

QHash<int, QByteArray> roles;

roles[TypeRole] = “type”;

roles[SizeRole] = “size”;

setRoleNames(roles);

}

(12)

デルには，rootIndex プロパティと modelIndex メソッドが備わっており，ツリー形式のモデルにおけるデータアイテムのモデルインデックス^（QModel-

Index）を取得したり，取得したインデックスを親として設定することが可能

である。

ツリー形式のデータを扱う VisualDataModel の一例をリスト 7 に示してある。dirModel は Qt の QDirModel で定義されたモデルであり，ディレクトリ構造をツリー形式で表すデータモデルである。ディレクトリ名をクリックすると，そのデータアイテムが子のノードをもつ場合は，アイテムのモデルインデ

14）

14） Qt Reference Documentation

http://doc.qt.nokia.com/4.7-snapshot/qml-visualdatamodel.html リスト 7 ツリー形式データモデルと VisualDataModel

ListView { id: view width: 300 height: 400

model: VisualDataModel { model: dirModel delegate: Rectangle { width: 200; height: 25 Text { text: filePath } MouseArea { anchors.fill: parent onClicked: {

if ( model.hasModelChildren ) view.mode.rootIndex =

view.model.modelIndex(index) }

} } } }

(13)

ックスを取得し，ルートのデータアイテムとして設定する。そしてこのノードを起点に，ディレクトリの内容がリスト形式で表示される。

ここで使用するデータは，QAbstractItemModel やそのサブクラスで定義される階層構造をもつデータである。Qt のモデル／ビューアーキテクチャで取り入れられたデータ構造を基に，QML でも同様なデータが扱えるように拡張されている。

おわりに

本稿では，OSS デスクトップ環境の基礎をなすアプリケーション開発フレームワークの一つである Qt について考察した。特に，最近導入された新しいアプリケーション開発フレームワークである Qt Quick におけるデータの取り扱いについて考察した。

Qt Quick で使用している QML は，本来ユーザーインターフェースを記述するような宣言型言語であり，本稿で指摘したように，言語構造が簡単で分かり易い言語である。一般的なアプリケーションでは，複雑な処理も必要となるが，これは JavaScript や C++ 言語と組み合わせて利用することで可能である。

また，Qt Quick には，アプリケーション開発ツールとして Qt Creator 統合開発環境が備わっている。この開発環境では，GUI（Graphical User Interface）のデザインツールを利用して，手軽にアプリケーションの開発が行えるようになっている。

このような状況から，現在 QML は通常のアプリケーションの作成のみなら

ず，OS（オペレーティングシステム）のシステムアプリケーションの作成にも利用

されるようになっている。例えば，モバイルデバイス用途では MeeGo や KDE^15）^15）

15） MeeGo Project http://meego.jp http://apidocs.meego.com

本稿執筆中に、MeeGo プロジェクトは新しいプロジェクトへ移行することがアナウンスされた。

(14)

プロジェクトの PlasmaActive に利用され，デスクトップ用途では Ubuntu ディストリビューションの Unity2D デスクトップに利用されている。

今後，Qt Quick は多くの OSS システムにおいて，そのシステムツールやアプリケーションの開発に用いられることが期待される。その際には，本稿で考察した QML におけるデータの取り扱い方法やアニメーションを利用した独特なアプリケーションの開発技法などが重要になってくるであろう。

参考文献

1 ．Jasmin Blanchette, Mark Summerfield 杵渕聡，杉田研治訳「入門 Qt4プログラミング」オライリー・ジャパン，2010．

2 ．朝木卓見『Qt を理解しよう』「Smartphone World」Vol.2 p.96 CQ 出版，2011．

3 ．高橋和良『Qt で MeeGo アプリを作ろう』前掲書 p.104．

4 ．Qml Presenting Data, Qt Essentials ‒ Training Cource http://qt.nokia.com 5 ．Qt Reference Documentation http://doc.qt.nokia.com/4.7-snapshot/

各種ドキュメント

本論文に出てくる製品名等は，各社の商標および登録商標です。

付録他の言語を用いたプログラムリスト 1 GTK プログラム

#include <gtk/gtk.h>

static void

quit̲button̲clicked (GtkWidget *button, gpointer user̲data) {

gtk̲main̲quit ();

}

16）

17）

16） Plasma Active Project http://plasma-active.org http://community.kde.org/Plasma/Active/Development 17） Unity2D Project https://wiki.ubuntu.com/Unity2D

(15)

hello̲button̲clicked (GtkWidget *button, gpointer user̲data) {

gtk̲label̲set̲text (GTK̲LABEL (user̲data), "Hello World!");

}

int

main (int argc, char **argv) {

GtkWidget *window;

GtkWidget *vbox;

GtkWidget *hbox;

GtkWidget *label;

GtkWidget *button1;

GtkWidget *button2;

gtk̲init (&argc, &argv);

window = gtk̲window̲new (GTK̲WINDOW̲TOPLEVEL);

gtk̲window̲set̲title (GTK̲WINDOW (window), "Hello");

gtk̲widget̲set̲size̲request (window, 200, 100);

gtk̲container̲set̲border̲width (GTK̲CONTAINER (window), 10);

g̲signal̲connect (G̲OBJECT (window), "destroy", G̲CALLBACK (gtk̲main̲quit), NULL);

vbox = gtk̲vbox̲new (TRUE, 5);

gtk̲container̲add (GTK̲CONTAINER (window), vbox);

label = gtk̲label̲new ("Label");

gtk̲box̲pack̲start (GTK̲BOX (vbox), label, TRUE, TRUE, 0);

hbox = gtk̲hbox̲new (FALSE, 0);

gtk̲box̲pack̲start (GTK̲BOX (vbox), hbox, TRUE, TRUE, 0);

button1 = gtk̲button̲new̲with̲label ("Hello");

gtk̲box̲pack̲start (GTK̲BOX (hbox), button1, TRUE, TRUE, 0);

button2 = gtk̲button̲new̲with̲label ("Quit");

gtk̲box̲pack̲start (GTK̲BOX (hbox), button2, TRUE, TRUE, 0);

g̲signal̲connect (G̲OBJECT (button1), "clicked",

(16)

G̲CALLBACK (hello̲button̲clicked), (gpointer) label);

g̲signal̲connect (G̲OBJECT (button2), "clicked", G̲CALLBACK (quit̲button̲clicked), NULL);

gtk̲widget̲show̲all (window);

gtk̲main ();

return 0;

}

リスト 2 QT プログラム main.cpp

#include <QtGui/QApplication>

#include "hello.h"

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

QApplication a(argc, argv);

Hello *w = new Hello;

w->show();

return a.exec();

} hello.h

#ifndef HELLO̲H

#define HELLO̲H

#include <QWidget>

class QLabel;

class Hello : public QWidget {

Q̲OBJECT

(17)

public:

Hello(QWidget *parent = 0);

public slots:

void setLabelText();

private:

QLabel *label;

};

#endif // HELLO̲H hello.cpp

#include "hello.h"

#include <QtGui>

Hello::Hello(QWidget *parent) : QWidget(parent) {

label = new QLabel("Label");

label->setAlignment(Qt::AlignHCenter);

QPushButton *button1 = new QPushButton("Hello");

QPushButton *button2 = new QPushButton("Quit");

connect(button1, SIGNAL(clicked() ), this, SLOT(setLabelText() ) );

connect(button2, SIGNAL(clicked() ), this, SLOT(close() ) );

QHBoxLayout *hbox = new QHBoxLayout;

hbox->addWidget(button1);

hbox->addWidget(button2);

QVBoxLayout *vbox = new QVBoxLayout;

vbox->addWidget(label);

vbox->addLayout(hbox);

setLayout(vbox);

}

(18)

void Hello::setLabelText() {

label->setText("Hello World!");

}

リスト 3 Python プログラム（PyQt）

from PyQt4.QtCore import * from PyQt4.QtGui import * class Hello(QWidget):

def ̲̲init̲̲(self, parent=None):

super(Hello, self).̲̲init̲̲(parent) self.label = QLabel("Label", self) self.label.setAlignment(Qt.AlignHCenter) self.button1 = QPushButton("Hello", self) self.button2 = QPushButton("Quit", self) vbox = QVBoxLayout()

hbox = QHBoxLayout() vbox.addWidget(self.label) hbox.addWidget(self.button1) hbox.addWidget(self.button2) vbox.addLayout(hbox) self.setLayout(vbox)

self.button1.clicked.connect(self.on̲hello̲button̲clicked) self.button2.clicked.connect(qApp.quit)

def on̲hello̲button̲clicked(self):

self.label.setText("Hello World!") if ̲̲name̲̲ == '̲̲main̲̲':

import sys

app = QApplication(sys.argv) win = Hello()

win.show()

sys.exit( app.exec̲() )

OSS アプリケーションとプログラミング言語についての一考察

OSS アプリケーションと

プログラミング言語についての一考察

翁 長 朝 英

QML

1 Qt Quick

2 QML

1 モデル／ビューアーキテクチャ

2 モデルとビュー

翁長朝英