Qtで作成したアプリケーションを配布するとき、必要なライブラリ(dllとかsoとかdllibとか)を実行ファイルと一緒にする必要があります。
必要なライブラリを調べるのが意外と面倒だったりします。
Macではmacdeployqtというツール以前から使えていたのですが、他の環境ではありませんでした。

が、これから違います。
Qt 5.2からWindows用にも作成されSDKに同梱されるようになりました。
このツールのすばらしいところは、QMLファイルのimport構文を解析して必要なプラグインも同梱してくれるところです。
正直、ここが一番面倒でしたので。

この記事は、Qt 5.2.1 MSVC2012版で書きました。

/// 入手場所 ///
標準のインストールフォルダだと以下のあたりにあります。(VS2012版の例)
C:\Qt\Qt5.2.1\5.2.1\msvc2012_64\bin

/// 使用方法 ///
簡単で以下の書式でOKです。

> windployqt <実行ファイルのパス>

これで、実行ファイルと同じフォルダにライブラリをコピーしてくれます。
QMLファイルがある場合は、以下のようにします。

> windeployqt --qmldir <qmlのパス> <実行ファイルのパス>

QMLファイルのフォルダは中を再帰的に調べてくれますのでトップのフォルダを指定すればOKです。

ライブラリをコピーして配布パッケージを作るフォルダを実行ファイルが現在あるところから変更することもできます。
(実行ファイルはコピーされません)

> windployqt --dir <コピー先のパス> <実行ファイルのパス>

その他のオプションのことは「windeployqt.exe -h」です。

/// 注意 ///
・1つコピーされるライブラリが変です。
 このファイルだけはツール実行後に手動でコピーしてください。
  誤:D3Dcompiler_47.dll
  正:d3dcompiler_46.dll
・サードパーティ製のライブラリはコピーされないようです。
 手動でコピーしてください。
・QMLファイルがリソースに含まれる場合はサーチしてくれません。
 「--qmldir」オプションでプロジェクトにある生データのパスを指定してください。
・OpenSSL系のライブラリはコピーされないようです。(調べようがないですよね)
 手動でコピーしてください。

 

2014 Qt Developer Day Tokyoが開催されます。

2014 Qt Developer Day Tokyoが5/20に開催されるそうです。
開発元が公式に開催するイベントとしては2011年以来で楽しみです。
今回は、Qt Developer Days Asia 2014と題して中国と日本で開催され5/20に東京となります。
Qt Project のチーフメンテナ Lars Knoll氏も来るそうなので興味の有る方には是非参加してほしいです。

Qt公式ブログに東京で開催する理由めいたことも書いてありますが、中の人達が日本に興味を持ってもらえてるのはコミュニティなどを通じて関わっている身としては嬉しいですね。

Qtユーザー会からもアプローチしてイベントを盛り上げれないかを@task_jpさんがきっかけを作ってくれました。参加するだけじゃない関わり方もできるかもしれません。社会人の人も学生の人も中の人達と密に関われるチャンスが来そうです。
ぜひ、お休みとって参加しよう(笑)
自分は有給決定だけど、火曜日なのがちょっと残念。金曜日だったら泊まりにできたのに。。。

2014 Qt Developer Day Tokyoで、メールアドレスを登録して最新情報を入手しましょう。


前回の2011年の時は、Nokia Japanの方のサプライズで端末もらえたりとかあっていい事もあったなーと思い出に浸ってみたり。

Android関連(だけじゃないけど)では北陸の重鎮のとげとげさんが満を持してコミケに送り出す新感覚技術書のお知らせですよ!

まずは、サークル名と場所

トゲトゲ団 3日目 西す-20a
http://toge2dan.cnu.jp/2013/12/18/c85/

内容は、3D関連の技術がライトに学べるそうですよ。
3Dは難しいと思ってるあなたの固定観念(げんそう)をぶち殺しに行く感じのようです。

あ、お手伝いで売り子してるので遊びに来てくさいね!

OpenSSLをWindowsでビルド(32bit/64bit)

QtアプリでWebViewとかhttprequestとかするときにhttpsな通信しようとすると必要になるのですがSDKのパッケージにバイナリが含まれてないので自力ビルドする必要があるのでメモです。
4.7.xの時に入ってたのでずっと使ってた・・・のですが、さすがに64bit版が欲しかったのでビルド方法を調べたメモです。

準備物
Visual C++(Express 2012で説明します)
・Perl(ActivePerlあたりでもどうぞ)

作業フォルダ
・c:\openssl
・c:\oepnssl\x86
・c:\openssl\x64

ソースのダウンロード
OpenSSL公式(自分ときは1.0.1eでした)

32bit版の手順
「VS2012 x86 Native Tools コマンド プロンプト」を起動
>cd c:\openssl\openssl-1.0.1e
>perl Configure no-asm --prefix=..\x86 VC-WIN32
>ms\do_ms.bat
>nmake -f ms\ntdll.mak install

64bit版の手順
「VS2012 x64 Cross Tools コマンド プロンプト」を起動
>cd c:\openssl\openssl-1.0.1e
>perl Configure no-asm --prefix=..\x64 VC-WIN64A
>ms\do_win64a.bat
>nmake -f ms\ntdll.mak install

確認
c:\openssl\x86\binとc:\openssl\x64\binに
・libeay32.dll
・ssleay32.dll
が、できてればOK

クリーン
>nmake -f ms\ntdll.mak clean

さほど難しいことではないので必要なときに調べれば良いのだけど、プラットフォームごとにいちいち調べるのは面倒なのでまとめてみました。

Windowsでいうところのマイドキュメントや、Unix系のユーザーフォームのフォルダは環境やバージョンによって変わってしまいます。
このフォルダをハードコードするわけにも行きませんのでQtの力を使います。
というか、Qtがいい感じにしてくれます。

フォルダを取得するには「QStandardPaths」を使用します。
取得できる情報は列挙型「QStandardPaths::StandardLocation」で定義されています。Qt 5.1.xの時点で16種類あります。
例えば
StandardPaths::DesktopLocation 0
QStandardPaths::DocumentsLocation 1
QStandardPaths::FontsLocation 2
の、ような感じですがそれぞれの説明あらかじめ日本語で書くよりも具体的なパスを見たほうがピンとくると思いますのでプラットフォームごとにまとめます。

まとめの前に、使用するメソッドをいくつか消化します。
QStandardPaths::displayName
 プラットフォームごとのフォルダの名称(呼び名)が取得できます。
QStandardPaths::standardLocations
 いい感じにしてくれた結果のフォルダがQStringListで取得できます。リストの先頭から優先度の高いものが入っています。
 空の時はそのシステムには存在しない種類のフォルダになります。
QStandardPaths::writableLocation
 いい感じにしてくれた結果のフォルダが1つ取得できます。大抵は何かを書き込むために必要になったりすると思うのでこちらで十分かもしれません。

注意としては、取得したフォルダにアプリケーション名が含まれるため取得した時点でフォルダが存在しているとは限らないことです。
実際に使用する前にフォルダの存在を確認してなければ作成してください。

艦メモが保存する各種ファイルとその保存場所についてです。

/// 保存するファイルの種類 ///
設定
 KanmusuMemory.ini : 各種設定やCookie情報など
 KanmusuMemoryFav.ini : ユーザーが保存したお気に入り情報
ダウンロードデータ
 favoritedata.json : 初期配置されてるお気に入り(wikipediaなど)
 timerselectguide.json : タイマーの建造や遠征のテンプレ情報
キャッシュ
 いろいろ

/// Windowsの場合 ///
設定
 C:\Users\Iori\AppData\Roaming\KanmemoProject\
ダウンロードデータ
 C:\Users\USERNAME\AppData\Local\KanmusuMemory\
キャッシュ
 C:\Users\USERNAME\AppData\Local\KanmusuMemory\cache\


/// Ubuntuの場合 ///
設定
 ~/.config/KanmemoProject/
ダウンロードデータ
 ~/.local/share/KanmusuMemory/
キャッシュ
 ~/.cache/KanmusuMemory/

/// Mac OS Xの場合 ///
設定
 ~/.config/KanmemoProject/
ダウンロードデータ
 ~/Library/Application Support/KanmusuMeory/
キャッシュ
 ~/Library/Caches/KanmusuMeory/


保存場所についてですが、Qtでは環境ごとにお作法の違う保存先をいい感じに処理してくれます。

まず、設定の保存場所ですが、こちらはQSettingsクラスが自動的に選んでくれています。
下記のサンプルの「今」のコンストラクタの使用方法だとユーザーエリアに保存してくれます。「以前」の使用方法ではファイル名を指定方法でカレントディレクトリに保存されます。大抵は実行ファイルと同じフォルダになります。
実はこれだとMac OS X 10.9から保存できなくなってしまいました。(セキュリティ強化なのでしょうか)そのため、保存先を変更する意味もあって使用方法を変更しています。
//今
QSettings settings(QSettings::IniFormat, QSettings::UserScope, "organization", "application");
//以前
QSettings settings("hoge.ini", QSettings::IniFormat);

ダウンロードデータとキャッシュについてはQStandardPaths::writableLocation()を使用して場所を取得します。
このメソッドを使用するとシステム内で書き込み可能なフォルダパスを取得することが可能です。
引数にデスクトップやドキュメント、一時フォルダなど取得したいパスを指定するだけです。
書き込み可能であればパスが実際に返ってきます。

艦メモでは以下のように取得してます。
//ダウンロードデータ
qDebug() << QStandardPaths::writableLocation(QStandardPaths::DataLocation);
//キャッシュ用フォルダ
qDebug() << QStandardPaths::writableLocation(QStandardPaths::CacheLocation);

基本的にはQtがなんとかしてくれるので細かいこと考えなくても良いのでいいですね。

Qt 5.1.xになってデスクトップのコントロール(ボタンなど)が標準機能として組み込まれました。
これで、今までボタン1つでも自力でデザインしていた苦労がなくなります。

使用可能になったコントロールをいくつか紹介すると
・ボタン
・チェックボックス
・ラジオボタン
・ラベル
・メニュー
・プログレスバー
・スタックビュー(ウインドウを区切れる)
・リスト(グリッド表示も)
・ファイル選択ダイアログ
などなど

その他のコントールは以下のドキュメントを参照してください。

実際の見た目や動作が気になる方は以下のサンプルがQtのフォルダに入っていますのでビルドして実行してみてください。
パス:\5.1.0\\examples\quick\controls
このフォルダの「controls.pro」を開くといくつかのサンプルプロジェクトが開きます。
1つに収まりきらないものが分けられていますのでいろいろ動かして見てください。
今回はこの中の「gallery」というアプリを紹介します。
また、複数のOSのスクリーンショットを用意しましたので見比べて見てください。

タブがわかれているの代表的な2ページを用意しました。
上から、Windows7 / Windows8 / Ubuntu 12.04 / Mac OS X
qt-desktop-control-all-os.png

左の列を見ると各OSごとの雰囲気のデザインになっています。
これはQt Desktop Controlsのデフォルト状態でのデザインです。
使用してもらう環境ごとに馴染んだデザインにしたいときはコレでOKだと思います。

さて右側の列ですが、タブ名がスタイルになっています。
こちらは各コントロールのデザインを変更するための機能を使用したサンプルになります。
よく見なくてもわかりますが、OSに関係なく同じデザインになっています。これは開発者が作ったデザインがボタンなどに適用されているからです。
使用する環境に関係なく同じデザインにできるため、ゲームなどアプリケーションの世界観を出したいときに有効です。

コントロールの機能は用意されたものを使用してカッコイイデザインにすることができるようになったわけです。
スタイルの機能を使用したボタンの作り方を紹介します。
スタイルを定義するエレメントは、コントロールごとに用意されているものを使用します。ButtonエレメントならButtonStyleエレメントを使用します。
ボタンとスタイルを使用するために最初のimport(QtQuick.Controls 1.0とQtQuick.Controls.Styles 1.0)を追加します。

以下のサンプルソースを動かすとこのようなボタンになります。
qt-desktop-control-button-style.png

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Rectangle {
width: 400
height: 300

Button {
id: btn
anchors.centerIn: parent
text: "A button"
//スタイルの設定
style: ButtonStyle {
//ラベルのデザインを変更
label: Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: btn.text
color: "#ffffff"
}
//背景のデザインを変更
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: control.pressed ? "#d5075b" : "#075bd5"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ffffff" : "#ffffff" }
GradientStop { position: 0.3 ; color: control.pressed ? "#ff40a7" : "#40a7ff" }
GradientStop { position: 0.5 ; color: control.pressed ? "#e1197c" : "#197ce1" }
GradientStop { position: 1 ; color: control.pressed ? "#ff40a7" : "#40a7ff" }
}
}
}
}
}

デスクトップコントロールの紹介をしました。
OS毎でのデザインの違いを比較できる資料になればと思います。

つ部 Android 勉強会 2013年9月」で「艦メモ」について発表をしました。
艦メモは、Qtで作成していて
・楽しく
・こんな勢いで
・これくらいで
・みんなで
作れます、作ってますってのを感じてもらえるように資料とLTをしたつもりです。

今回は、部長の@gabuが海外へ仕事で行くことになって参加できる最後かもしれないということで大盛況でした。
遠方からもたくさんの方が集まって頂いて部長の人望の厚さを感じます。
LT(Long talk)もいつもどおりで、和やかに良いお話が聞けました。
そして、新部長に@RINA117ycに就任して若い力で盛り上げていってくれるといいですね。抱負として「優しいつ部」と語ってくれました、心強いです。
僕も含めて周りが全力でバックアップしていきましょう。

艦メモのビルド方法(Ubuntu編)

艦これ専用ブラウザの艦メモのビルド方法です。


■用意するもの
Qt 5.1.0 for Linux 64bit
・g++
・libgl1-mesa-dev
・git
Twitterのコンシュマーキーとシークレット
説明は、Ubuntu 12.10(64bit)でQt 5.1.0の64bit向けを使用して行います。
Twitterのコンシュマーキーとシークレットは各自で用意してください。

必要な物をインストールします。
$ sudo apt-get install g++ libgl1-mesa-dev git

Qtをインストールします。
$ chmod a+x qt-linux-opensource-5.1.0-x86_64-offline.run
$ ./qt-linux-opensource-5.1.0-x86_64-offline.run


■Twitter4QMLのビルド
艦メモはTwitter4QMLというTwitterアクセス用のライブラリを使用しています。
これを使用するとQtアプリからTwitterへ非常に簡単にアクセスできます。
gitでソースをダウンロードしてからビルドします。
$ git clone http://cr.qtquick.me/twitter4qml.git
$ cd twitter4qml
$ ~/Qt5.1.0/5.1.0/gcc_64/bin/syncqt.pl -version 0.1.0
$ ~/Qt5.1.0/5.1.0/gcc_64/bin/qmake
$ make
$ make install
make installするとQtのインストールフォルダにsoやヘッダファイルがコピーされるので他の標準のライブラリのように使用できます。


■艦メモのソースの入手
Twitterのコンシュマーキーとシークレットは間違えてコミットしたりしないように別ディレクトリにしてます。
twitterinfo.hに各自で入手した情報を記入してください。
$ git clone https://github.com/ioriayane/KanmusuMemory.git
$ mkdir KanmusuMemoryTwitter
$ cp KanmusuMemory/twitterinfo_sample.h KanmusuMemoryTwitter/twitterinfo.h


■艦メモのビルド
Qt Creatorで、KanmusuMemory.proを開いてください。
$ cd KanmusuMemory
$ ~/Qt5.1.0/Tools/QtCreator/bin/qtcreator.sh KanmusuMemory.pro &
プロジェクトの構成を行います。
複数のバージョンが有る場合は、複数キットが表示されますが5.1.0のものを選んでください。
 kanmusumemory-20130827-buildsetting-ubuntu.PNG

コマンドからの場合は
$ ~/Qt5.1.0/5.1.0/gcc_64/bin/qmake
$ make

艦メモのビルド方法(Windows編)

艦これ専用ブラウザの艦メモのビルド方法です。


■用意するもの
Qt 5.1.0(VS2012)
Visual Studio 2012(ExpressでOK)
Git for Windows
Active Perl
Twitterのコンシュマーキーとシークレット
説明は、Qt 5.1.0のVS2012 32bit向けで行います。
インストールするとgitとperlのパスはシステム設定されるはずです。
Twitterのコンシュマーキーとシークレットは各自で用意してください。


■Visual Studio使う時の準備
以下のショートカットがスタートメニューに追加されているので、これでコマンドプロンプトを開きます。
「Qt 5.1.0 32-bit for Desktop (MSVC 2012)」
パスなどを通すために以下のバッチファイルを実行
> "C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\vcvarsall.bat"


■Twitter4QMLのビルド
艦メモはTwitter4QMLというTwitterアクセス用のライブラリを使用しています。
これを使用するとQtアプリからTwitterへ非常に簡単にアクセスできます。
> git clone http://cr.qtquick.me/twitter4qml.git
> cd twitter4qml
> perl C:\Qt\Qt5.1.0\5.1.0\msvc2012\bin\syncqt.pl -version 0.1.0
> qmake
> nmake
> nmake install
nmake installするとQtのインストールフォルダにdllやヘッダファイルがコピーされるので他の標準のライブラリのように使用できます。


■艦メモのソースの入手
Twitterのコンシュマーキーとシークレットは間違えてコミットしたりしないように別ディレクトリにしてます。
twitterinfo.hに各自で入手した情報を記入してください。
> git clone https://github.com/ioriayane/KanmusuMemory.git
> mkdir KanmusuMemoryTwitter
> copy KanmusuMemory\twitterinfo_sample.h KanmusuMemoryTwitter\twitterinfo.h


■艦メモのビルド
これ以降は、Qt CreatorでもコマンドプロンプトからでもOKです。
Qt Creatorの場合は、KanmusuMemory.proを開いてください。
プロジェクトの構成を行います。デフォルトで表示される内容でOKです。
 kanmusumemory-20130826-buildsetting.PNG

あとは、ビルドして実行です。

■日本語化(とりあえず表示)
ビルドして実行するとメニューなどが英語です。(シャドウビルドをOffにしている人は日本語で表示されているはずです。)
ベースは英語で作って日本語リソースを追加するがAndroidアプリ作った時の教訓なので継続してます。
(英語はひたすら怪しいですけどね)
シャドウビルドでデバッグ中も日本語にしたいときは、
 KanmusuMemory\i18n\qt_ja_JP.qm
を以下の場所に配置します。(長ったらしいフォルダ名は適宜読み替えてください)
 build-KanmusuMemory-Desktop_Qt_5_1_0_MSVC2012_32bit-Debug\debug\KanmusuMemory.exe
 build-KanmusuMemory-Desktop_Qt_5_1_0_MSVC2012_32bit-Debug\i18n\qt_ja_JP.qm
Qt Creatorからの実行時のカレントディレクトリは実行ファイルのあるdebugとかreleaseフォルダではないので注意です。

■日本語化(中身を作る)
コードをいじって文言を追加したときに日本語の情報を作成する方法です。
もしリポジトリへPull requestをするつもりの方はリテラルの文字列に日本語を使わないでください。
Windows環境で化けます。謎でもいいので必ず英語で書いてください。(コメントは日本語でOK)
多言語対応するときソース上では文字列を以下の関数でマーキングします。
C++ : tr()
QML : qsTr()
さて、ソースに文言を追加したときはコマンドラインから以下のバッチファイルを実行します。
これ使ってね「Qt 5.1.0 32-bit for Desktop (MSVC 2012)」
> scripts\translate.bat
Scanning directory '.'...
Updating 'i18n/qt_ja_JP.ts'...
Found 157 source text(s) (1 new and 156 already existing)
以上のような感じで結果が出力されます。
その後、スタートメニューから「Linguist」を起動して「i18n\qt_ja_JP.ts」を開きます。
ツールの細かい使い方は省きます。(「QML(Qt)でマルチランゲージに対応する」この記事の下の方に簡単な使い方紹介してます。)
Linguistで「リリース」を実行するとqt_ja_JP.pmが更新されるのでコピーします。


■デプロイ
配布用パッケージの作り方です。
以下の構造になるようにQtのフォルダからdllをコピーしてきてください。と、思ったのですがだらだら書いても微妙なのでアーカイブ見てください。
注意点をいくつか
・必要なdllは基本的にDependecyWalkerを使って調べてください。
・プラグインのたぐいはデバッガを使用するかあたりを付けて探してください。
・ssl関連のファイルはQt 5.xに同梱されなくなってしまったので自力でOpenSSLをソースからビルドするかQt 4.xに含まれるものを使用してください。
 libeay32.dll
 libssl32.dll
 ssleay32.dll
・コンパイラ依存のdllなどはVS2012向けになります。
・その他のコンパイラの事情などは書籍の「Qt QuickではじめるクロスプラットフォームUIプログラミング」でも解説しています。