Qtプログラミング

ALPHA XG シリーズ Qt プログラミング PROJECT Co.,LTD. Rev1.0 2013/01/31 目次 1. 概要 1 1.1 はじめに...1 1.2 開発言語について...1 1.3 Qt の GUI 開発環境について...1 2. Qt Creator の概要 2 2.1 システム概要...2 2.2 Qt システム構成...2 3. Qt Creator のインストール 3 4. Qt Creator によるサンプルアプリ作成 4 4.1 Qt Creator の起動...4 4.2 プロジェクトの作成...5 4.3 クロスコンパイル設定...8 4.4 サンプル GUI アプリ作成...13 4.5 サンプルの実行...21 5. 関連情報 22

1. 概要 1.1 はじめに Qt は主に Unix/Linux で利用されている GUI ツールキットです Windows でも利用することができ Linux と Windows 両方に対応するアプリケーション開発などでしばしば利用されています また 組込み系のシステムの GUI としても利用されています 本ドキュメントでは XG シリーズをターゲットとした Qt のアプリケーション開発方法を説明します 本ドキュメントでは アプリケーションノート Qt のためのルートファイルシステム作成方法 が 先に行っていることが前提となりますので もしお読みでない場合は 先にそちらをお読みください 1.2 開発言語について Qt は C++ によって開発されており 多くのアプリケーションが C++ によって開発されています また 多くのコミュニテ ィによって Qt バインディングが開発されており 多くの言語で Qt アプリケーションを開発することが可能です 本アプリケ ーションノートでは Qt Creator を使った XG シリーズ用のクロスアプリ開発について解説します Qt はバインディングを利用することによって他の多くの言語で開発することも可能です 各種言語で Qt を利用するときはそ の言語で必要となるバインディングのためのライブラリ等をターゲットインストールすることが必要となります 本ドキュメントでは Qt Creator および C++ での開発を前提としたアプリケーション開発について説明します その他の言語での詳細については 一般書籍やインターネットから多くの情報を得られますので それらを参考にしてくださ い 1.3 Qt の GUI 開発環境について Qt Creator は Qt 用の GUI 開発環境です Qt Creator は Ubuntu ソフトウェアセンターに登録されています 通常はそのま まインストールすることができますが 最新版を利用したい場合は別途インストール作業が必要となります 1

2. Qt Creator の概要 2.1 システム概要 Qt アプリを実行するには バックエンドとして X.org や Kdrive(Xfbdev) DirectFB framebuffer を使用するなどの方法が あります これらのどのバックエンドと組み合わせるかは アプリケーションの稼動環境に応じて選択することになります 2.2 Qt システム構成 Qt を動かすための構成は幾つかありますが ここでは DirectFB をバックエンドにした構成を例にとって説明します アプリの稼動環境がすべて Qt による独自開発のアプリケーションの場合は DirectFB をバックエンドにした構成のほうが GUI の動作が速くなります X11 を前提としたアプリを移植する場合は Xfbdev をバックエンドにしたほうが便利です (Xfbdev の場合も手順はほぼ同じです アプリをコンパイルしたときに使ったルートファイルシステムの GUI 構成と XG シリーズの GUI アプリ実行環境が異なっていると実行時にライブラリが見つからないなどのエラーが発生します ) Qt アプリケーション + Qt DirectFB Linux カーネル ソフト ウェア XG シリーズボード + LCD タッチパネルキット ハード ウェア Fig 2.2-1 Qt システム例 2

3. Qt Creator のインストール Qt および Qt Creator をインストールするにはターミナルを開き以下のコマンドを入力します 省略 $ sudo apt-get install qtcreator 入力 Ubuntu メニューの アプリケーション - プログラミング に Qt Creator が登録されています Ubuntu10.04 でインストールされる Qt Creator は 1.31(Qt 4.6.2) です XG シリーズの Qt は 4.7.4 です 4.7 以降に追加された QML などの機能を活用するには Ubuntu 側を最新の Qt & Qt Creator にする必要があります 3

4. Qt Creator によるサンプルアプリ作成 4.1 Qt Creator の起動 Ubuntu メニューの アプリケーション - プログラミング - Qt Creator より Qt Creator を起動します 4

4.2 プロジェクトの作成 Qt アプリケーションを作成するには 最初に Qt プロジェクトを以下の手順で作成します 1 Qt Creator メニューの ファイル - ファイル / プロジェクトの新規作成 にて新規作成ダイアログを開きます プロジェクトの中の Qt4 GUI アプリケーション を選択し OK ボタンをクリックします 2 名前に qt-test1 パスは参照ボタンをクリックしてディレクトリ /home/guest/workspace を作成し 次へ ボタンをクリックします プロジェクトは /home/guest/workspace/qt-test1 に作成されます 5

3 QtCore QtGui 以外にアプリケーションで必要とされるモジュールにチェックを入れ 次へ ボタンをクリックします 例題では何もチェックせずにそのまま 次へ ボタンをクリックします 4 クラス情報にて クラス名 ヘッダーファイル ソースファイル フォームファイルを設定します ここではデフォルト のまま 次へ ボタンをクリックします 6

5 プロジェクトに作成されるファイル一覧が表示されます 確認の上 完了 ボタンをクリックし プロジェクトの作成を 完了します 6 qt-test1 プロジェクト開発用に変わります 7

4.3 クロスコンパイル設定 Qt アプリケーションのクロスコンパイル環境の設定をします 1 Qt Creator メニューの ツール - オプション にてオプションダイアログを開きます Qt4 の左側の + を クリックして展開し Qt Versions を選択します 2 Qt バージョンの自動検出には Ubuntu の Qt が検出されています ARM 用の qmake を指定するため マニュアルを 選択した後 右上隅の + ボタンをクリックします 8

3 バージョン名のところは何も入力しないで QMake パスの参照ボタンをクリックし 各開発キットの該当する qmake を 選択します 選択する qmake のフルパスは 開発キットごとに異なりますので下記表を参照してください 開発キット LK-1808-A01(XG-1808) LK-3517-A01(XG-3517) LK-3730-A01(XG-3730) qmake のパス ~/xg1808/buildroot-2011.11-xg1808-x.x/output/host/usr/bin/qmake ~/xg3517-lk/buildroot-2011.11-xg3517-x.x/output/host/usr/bin/qmake ~/xg3730/buildroot-2011.11-xg3730-x.x/output/host/usr/bin/qmake 指定した qmake が認識されると 自動的にバージョン名に 4.7.4 がセットされます 4 次にデフォルト Qt バージョンは 4.7.4 を選択します ( 複数の XG シリーズ開発をする場合は バージョン名を XG-3730 4.7.4 のように分かりやすい名前に変更します ) 9

5 デバッグヘルパに赤の が付いているときは リビルド ボタンをクリックします 6 最後に 適用 ボタンをクリックし OK ボタンをクリックしてオプションダイアログを閉じます ビルド後 出来上がった実行可能ファイルを /nfs ディレクトリに自動的にコピーするように設定します 1 プロジェクトをクリックしてプロジェクト設定の編集に切り替えます 10

2 ビルドステップを追加 ボタンをクリックすると メニューが表れますので 独自プロセスステップ を選択します 3 独自プロセスステップ ( 使用不可 ) と一行追加されますので 右端の 詳細を表示 ボタンをクリックします 11

4 独自プロセスの 独自プロセスステップを有効にする にチェックを入れ 名前に qt-test1 を /nfs にコピー を コマンドに cp コマンド引数に./gt-test1 /nfs と入力します 5 編集ボタンをクリックして 編集モードに戻します 個々のプロジェクトで使用する qmake を固定にするときは プロジェクト - 概要 の 詳細を表 示 ボタンをクリックして概要を展開しデフォルト Qt バージョンから 特定の Qt バージョンに変更 します Ubuntu 上で動作確認するときは PATH に含まれる Qt を設定します qmake を変更したときは す べてリビルド してください 12

4.4 サンプル GUI アプリ作成 GUI のデザインは次のような手順にて行います 1 qt-test1 - フォーム を展開し mainwindo.ui をダブルクリックし GUI デザイン用に切り替えます 2 Display Widgets から Label をドラッグ & ドロップでフォームに配置します 13

3 配置したラベルを選択し プロパティの QWidget ー geometry を展開し X に 100 Y に 50 Width に 400 Height に 60 をセットします 4 プロパティで QLabel - text に Hello, world と入力します 14

5 プロパティの QWidget - font - Point Size を 40 にします 6 次にアプリケーションの終了ボタンを追加します Buttons の Push Button をフォームの右下端にドラッグ & ド ロップで配置します 15

7 配置したラベルを選択し プロパティの QWidget - geometry を展開し X に 420 Y に 250 Width に 160 Height に 80 をセットします 8 プロパティにて QObject の Object Name を btnquit に QAbstructButton の Text プロパティを 終了 に します 16

9 プロパティの QWidget - font - Point Size を 40 にします 10 Quit ボタンをタップしたときに qt-test1 アプリケーションが終了するようします そのためには btnquit にてマウス 右ボタンをクリックしポップアップメニューの Go to slot を選択します 17

11 ここでは単にタップ ( クリック ) するだけなので clicked() を選択し OK ボタンをクリックします 12 自動的にコードエディタに切り替わり MainWindow::on_btnQuit_clicked() が自動的に生成されますので その中に 実際の処理のコードを記述します ここではアプリケーションを終了するために 以下のコードを入力します close(); 18

13 Qt アプリケーションのビルドは Qt Creator メニュー ビルド - プロジェクト qt-test1 をビルド を選択しビル ドを開始します 保存してないファイルがあるときは 以下のように問い合わせがあります その場合は すべて保存 をクリックします ビルドが正常に終了すると ディレクトリ /nfs に qt-test1 がコピーされます エラーが無いときは次のように 画面左下のビルドの部分が緑色になります 19

エラーがある場合は ビルドが赤色になり 次のようにエラーメッセージが表示されます 20

4.5 サンプルの実行 ビルドが正常に終わると開発 Linux サーバの /nfs ディレクトリに実行可能なアプリケーションファイルをコピーされています ターゲット側の XG ボードで NFS マウントしてあればそのまま /mnt/nfs ディレクトリに移動して実行する事ができます 1 開発用 PC の NFS サーバに接続してないときは mount します /etc/init.d に K95debug スクリプトがある場合は入力 # /etc/init.d/k95debug start コマンドで直接 NFS マウントする場合は以下のようにします # mount -t nfs -o nolock 192.168.128.201:/nfs /mnt/nfs 入力 2 qt-test1 が存在することを確認します # cd /mnt/nfs 入力 # ls -alg 入力 total 280 drwxr-xr-x 2 root 4096 Nov 26 2012. drwxrwxrwx 9 root 4096 Nov 26 2012.. -rwxr-xr-x 1 root 275164 Nov 26 2012 qt-test1 3 qt-test1 を実行します #./qt-test1 -qws 入力 4 次のような画面が表示され 終了 ボタンをタッチすると終了します 21

5. 関連情報 Qt Creator に関しての情報は以下の書籍および サイトが参考になります 名前 著者 出版社 実践 Qt プログラミング Mark Summerfield オライリージャパン Qt プログラミング入門 - 使いやすいフレームワークを基礎から解説 津田信秀 工学社 Table 5-1 参考書籍 サイト名 digia Qt Qt 開発ツール Qt wiki( 日本語 ) Qt Creator 日本語化プロジェクト URL http://www.digia.com http://qt.digia.com http://qt.digia.com/product/developer-tools/ http://qt-project.org/wiki/wiki_home_japanese http://qt-creator-jp.sourceforge.jp/ Table 5-2 参考 Web サイト 22

ご注意 本文書の著作権は 株式会社アルファプロジェクトが保有します 本文書の内容を無断で転載することは一切禁止します 本文書に記載されているサンプルプログラムの著作権は 株式会社アルファプロジェクトが保有します 本文書に記載されている内容およびサンプルプログラムについての技術サポートは一切受け付けておりません 本文書の内容およびサンプルプログラムに基づき アプリケーションを運用した結果 万一損害が発生しても 弊社では一切責任を負いませんのでご了承下さい 本文書の内容については 万全を期して作成いたしましたが 万一ご不審な点 誤りなどお気付きの点がありましたら弊社までご連絡下さい 本文書の内容は 将来予告なしに変更されることがあります 商標について Windows の正式名称は Microsoft Windows Operating System です Microsoft Windows Windows NT は 米国 Microsoft Corporation. の米国およびその他の国における商標または登録商標です Windows 7 Windows Vista Windows XP は 米国 Microsoft Corporation. の商品名称です 本文書では下記のように省略して記載している場合がございます ご了承ください Windows 7 は Windows 7 もしくは Win7 Windows Vista は Windows Vista もしくは WinVista Windows XP は Windows XP もしくは WinXP その他の会社名 製品名は 各社の登録商標または商標です 株式会社アルファプロジェクト 431-3114 静岡県浜松市東区積志町 834 http://www.apnet.co.jp E-MAIL : query@apnet.co.jp 23