So-net無料ブログ作成
検索選択
ソフトウェア関連のもろもろ ブログトップ
前の10件 | -

俺氏、Stack Overflow デビューする!そこで明かされた浮動小数点の危険性とは? [ソフトウェア関連のもろもろ]

先日、 ftoa (少数を文字列に変換する関数) を自作していたときに、不可解な現象に出くわしました。問題となったのは下記のようなプログラムです。

#include <stdio.h>

void main()
{
    double f = 0.12;
    int d;
    f *= 10;    // f = 1.2
    d = (int)f; // d = 1
    f -= d;     // f = 0.2
    f *= 10;    // f = 2.0
    d = (int)f; // d should be 2
    f -= d;     // f should be 0.0
    printf("%lf\n", f);
}



この結果は当然ゼロとなるべきところですが。結果は、1.000000 となってしまいます。極論すると、

2.0 - 2 = 1.0

と同じということです。しかも、問題が発生するのは、0.12 という数字だけ。0.11 でも 0.13 でも 0.23 でも 0.34 でも問題は出ません。

あまりにも不可解なので、こんな問題に答えられるのは、世界中のプログラマが集まる掲示板 Stack Overflow くらいだろうということで、思い切って質問することにしました。ドキドキ。


stackoverflow.png
http://stackoverflow.com/


日本の掲示板では答えに巡り合うまでに時間がかかることが多いですが、さすが世界の天才プログラマが跋扈する Stack Overflow、なんと数分後には回答が来ました。すげぇ・・・。アドバイスに従い、下記のプログラムを動かすと答えはすぐに見つかりました。


#include <stdio.h>

void main()
{
    double f = 0.12;
    int d;
    printf("f          :f: %.16f\n", f);

    f *= 10;
    printf("f *= 10    :f: %.16f\n", f);

    d = (int)f;
    printf("d = (int)f :d: %d\n", d);

    f -= d;
    printf("f -= d     :f: %.16f\n", f);

    f *= 10;
    printf("f *= 10    :f: %.16f\n", f);

    d = (int)f;
    printf("d = (int)f :d: %d\n", d);

    f -= d;
    printf("f -= d     :f: %.16f\n", f);
}



演算の結果はこちらです。


      1 f         :f: 0.1200000000000000
      2 f *= 10   :f: 1.2000000000000000
      3 d = (int)f:d: 1
      4 f -= d    :f: 0.2000000000000000
      5 f *= 10   :f: 1.9999999999999996
      6 d = (int)f:d: 1
      7 f -= d    :f: 0.9999999999999996



4行目から5行目でいきなり数値が豹変しています。ここで問題が発生していました。問題発生のメカニズムも教えてもらいました。

1.0 は、C言語の採用している binary64 では正しくは以下の数値となります。17桁以降は丸め誤差です。

1.0000000000000000444089...

上記の値を4行目の 1.2 -1.0 に適用すると下記のようになります。

1.2000000000000000 - 1.0000000000000000444089 = 0.1999999999999999555911

この段階では、小数点以下17桁以下の数は丸め込まれるので、0.2 と表示されます。

しかし、5行目で10をかけると、状況が一変し、この誤差がひょっこり顔をのぞかせます。末尾の一桁が、繰り上げられますので、f の値は、1.9999999999999996 となってしまいます。

あとはプログラムの通り、この微妙な誤差が致命的な違いとなって表れ、期待された値とまったく異なる結果となります。しかもこの条件にあてはまるのは、17桁以降の数値と丸め誤差が重なったときなので非常に稀です。

このようなプログラムが人命にかかわる車や飛行機、ロケットなどに混入していたらと思うとぞっとします。プログラマの皆さん、浮動小数点の扱いは十分に注意してくださいね。

せっかくなので、Stack Overflow で解決策ないの?と質問をしたら下記の対策を勧められました。


#include <stdio.h>
#include <float.h>

void main()
{
    double f = 0.12;
    int d;

    printf("f          :f: %.16f\n", f);

    f *= 10;
    printf("f *= 10    :f: %.16f\n", f);

    d = (int)f;
    printf("d = (int)f :d: %d\n", d);

    f -= d;
    printf("f -= d     :f: %.16f\n", f);

    f *= 10;
    printf("f *= 10    :f: %.16f\n", f);

    f *= (1 + DBL_EPSILON);
    printf("DBL_EPSILON:f: %.16f\n", f);

    d = (int)f;
    printf("d = (int)f :d: %d\n", d);

    f -= d;
    printf("f -= d     :f: %.16f\n", f);
}



EPSILON は、理系の人ならお馴染みのイプシロン・デルタのイプシロンです。float の場合は接頭子は FLTになりますので注意してください。詳細については下記のサイトが参考になります。


Is floating point math broken?
http://stackoverflow.com/questions/588004/is-floating-point-math-broken


普段、見てばかりいる Stack Overflow ですが、今回は自分で参加してみて、あらためて世界の叡智の凄さを体感しました。日本のプログラマの皆さんもどんどん世界に出ていきましょう!
(^_^)/





苦しんで覚えるC言語

苦しんで覚えるC言語

  • 作者: MMGames
  • 出版社/メーカー: 秀和システム
  • 発売日: 2011/06/24
  • メディア: 単行本






絵で見てわかるシステムパフォーマンスの仕組み

絵で見てわかるシステムパフォーマンスの仕組み

  • 作者: 小田 圭二
  • 出版社/メーカー: 翔泳社
  • 発売日: 2014/06/21
  • メディア: 単行本(ソフトカバー)




ブログにソースコードを貼る "Google Code Prettify" が使えなくなっていた件 [ソフトウェア関連のもろもろ]

GW開けからブログに貼ったソースコードが随分味気ないものになってしまっていました。

こんな感じです。

#include <stdio.h>

void main() 
{
   printf("Hello World\n");
   return;
}


どうも "Google Code Prettify" が使えなくなっているようです。

さ~て困りました。"Syntax Highlighter" は仕込んであるので、そちらを使ってもいいのですが、今まで ”Google Code Prettify” を使った記事を見捨てるのも忍びない。

ということで、対策を考えることにしました。”Google Code Prettify”のページに飛んでみると、、、


google code prettify.pnghttps://code.google.com/archive/p/google-code-prettify/


あらら、いつの間にか GitHub に移行していたのね。分かりやすい理由です。

しかし、GitHub にあるチュートリアルはスクリプトをサーバーにコピーして使う前提。私のように、グーグル師匠のリポジトリを直接参照して楽しようという輩は相手にしないということなのか?

目を皿のように”Google Code Prettify”のリポジトリを探索し、ようやく解決策が見つかりました。下記”おまじない”に差し替えれば、素敵な感じに生まれ変わります!


<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script>
※hは半角hに置き換えて下さい

"skin"は四種類用意されていて、引数を変えることで置き換えることができます。

desert
doxy
sons-of-obsidian
sunburst


ソネブロで ”Google Code Prettify” を設定する方法は下記の記事を参照してください。少々高度な設定を使いますので、あくまで自己責任でお願いしますね。


ソネットブログにソースコードを貼る方法
http://makers-with-myson.blog.so-net.ne.jp/2014-10-31


使っているテンプレート・テーマによっては、文字装飾が継承されて、見にくい場合があるかもしれません(私がそうでした)。その場合は CSS に <pre>要素の追加定義をしてあげてください。


pre {text-shadow:none; font-weight:normal;}


以上の対策を講じて、こんな感じになりました。使用したskinは"sunburst"です。


#include <stdio.h>

void main() 
{
    printf("Hello World\n");
    return;
}



いかがでしょう?少しくどいですけど、ちょっと素敵になりましたね。
(^_^)/~






プログラミングコンテストチャレンジブック [第2版] ~問題解決のアルゴリズム活用力とコーディングテクニックを鍛える~

プログラミングコンテストチャレンジブック [第2版] ~問題解決のアルゴリズム活用力とコーディングテクニックを鍛える~

  • 作者: 秋葉拓哉
  • 出版社/メーカー: マイナビ
  • 発売日: 2012/01/28
  • メディア: 単行本(ソフトカバー)



いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

  • 作者: 赤間 公太郎
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)



How Google Works

How Google Works

  • 作者: Eric, III Schmidt
  • 出版社/メーカー: John Murray Publishers Ltd
  • 発売日: 2015/03/12
  • メディア: ペーパーバック




ブログのフォントの修飾をはずしたい [ソフトウェア関連のもろもろ]

HTMLを使ってコンソールの表現をたびたびするのですが、ブログのテンプレートはフォントの修飾が定義されているので、そのまま書くといまいちコンソールっぽさが出ません。

普通に書くと、下記のような記述になります。

<table bgcolor="black" width="100%">
<tr><th>
<font color="white">
$ sudo apt-get update
</font>
</th></tr>
</table>


表示はこんな感じ。

$ sudo apt-get update



やはりフォントの修飾を消したくなりますよね。しかし、このフォントの修飾を消すのは意外と難儀な作業になります。テンプレートで定義されたCSSの内容を理解した上で消さないといけないからです。

私が使っているテンプレートの場合、"text-shadow" とフォントの "bold" が設定されているので、下記のように記述してキャンセルしてみました。

<table bgcolor="black" width="100%">
<tr><th>
<span style="text-shadow:none; font-weight:normal; color:white">
$ sudo apt-get update
</span>
</th></tr>
</table>


こんな感じになります。コンソールらしくなりました。

$ sudo apt-get update


簡単そうで意外と難しいTIPSでした!
( ´ ▽ ` )ノ






今すぐ使えるかんたん ホームページ HTML&CSS入門

今すぐ使えるかんたん ホームページ HTML&CSS入門

  • 作者: リブロワークス
  • 出版社/メーカー: 技術評論社
  • 発売日: 2015/07/23
  • メディア: 大型本



HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

  • 作者: エビスコム
  • 出版社/メーカー: ソシム
  • 発売日: 2014/10/28
  • メディア: 単行本



HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

  • 作者: 草野 あけみ
  • 出版社/メーカー: 翔泳社
  • 発売日: 2013/03/12
  • メディア: 大型本




nice!(44)  コメント(0) 
共通テーマ:趣味・カルチャー

ソネットブログにソースコードを貼る方法 [ソフトウェア関連のもろもろ]

ソネットブログにソースコードを貼るには二つの方法があります。

方法1: Syntax Highlighter を使う方法 
http://alexgorbatchev.com/SyntaxHighlighter/

方法2: google-code-prettify を使う方法 
https://code.google.com/p/google-code-prettify/


Syntax Highlighter のほうがPCの見栄えはいいですが、スマホで表示が崩れる場合があります。(このサンプルは問題ないですね。。。)

// test
#include <cstdio>

int main() {
    printf("Hello World\n");
}


google-code-pretiffy は地味ですが、スマホでもそれなりに見えます。こんな感じ。

// test
#include <cstdio>

int main() {
    print("Hello World\n");
}


これらの設定は、So-netブログ管理ページのテンプレート管理でできます。

0 Template.png


上級者向けと書いてありますが、勇気をもって「HTMLの追加」を押します。

1 Template Management.png


スクリプトは<head>タグ内に配置します。検索で</head>を探して、その前にそれぞれのスクリプトを配置します。

2 EditHTML.png


</head>の前に Syntax Highlighter のスクリプトを追加します。追加したスクリプトの詳細はこちらを参照ください。

3 EditedHTML_SYTXHL.png


さらにgoogle-code-prettify を追加します。google-code-prettify の場合は、<body> に onload="prettyPrint()" を追加します。追加したスクリプトの詳細はこちらを参照ください。

4 EditedHTML_GCP.png


これで名前をつけて保存して終了です。ちなみにサンプルはHTMLで下記のように記述しています。

Syntax Highlighter
<pre class="brush: c;">
// test
#include &ltcstdio&gt

int main() {
    printf("Hello World\n");
}
</pre>


google-code-prettify
<pre class="prettyprint">
// test
#include &ltcstdio&gt

int main() {
    printf("Hello World\n");
}
</pre>


これからは、じゃんじゃんソースコードを貼っていきたいと思いますー。
(^_^)/~


関連記事
ブログにソースコードをどう貼るか悩む。。。パート2!
http://makers-with-myson.blog.so-net.ne.jp/2014-10-28

ブログにソースコードをどう貼るか悩む。。。
http://makers-with-myson.blog.so-net.ne.jp/2014-10-27






HTML+JavaScriptによるプログラミング入門

HTML+JavaScriptによるプログラミング入門

  • 作者: 古金谷 博
  • 出版社/メーカー: 日経BP社
  • 発売日: 2014/08/06
  • メディア: 単行本



作りながら覚えるHTML5+JavaScriptプログラミング

作りながら覚えるHTML5+JavaScriptプログラミング

  • 作者: 松岡 宣
  • 出版社/メーカー: ソフトバンククリエイティブ
  • 発売日: 2013/04/18
  • メディア: 大型本



ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

  • 作者: 田中 賢一郎
  • 出版社/メーカー: インプレスR&D
  • 発売日: 2013/10/25
  • メディア: オンデマンド (ペーパーバック)




ブログにソースコードをどう貼るか悩む。。。パート2! [ソフトウェア関連のもろもろ]

昨日 Syntax Highlighter を導入してやれやれと思っていたのですが、スマートフォンから見るとかなり表示が崩れてる。。。 う~む。

なんかイマイチだなぁと思っていたら、”google-code-prettify”なるものを発見!


google-code-prettify
https://code.google.com/p/google-code-prettify/


さすが、インターネッツの雄 Google さんです。で、早速下記コードをHTMLヘッダーに追加してみました。(追加の仕方はまた後日~)


<link href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css" type="text/css"
 rel="stylesheet" />
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/lang-css.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/lang-sql.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/lang-vb.js"></script>




きちんと見えるかな。。。いろいろ試行錯誤しましたが、ようやく見えるようになりました。スマートフォンでもそれらしく見えています。

PCとスマホ両方それなりに見せるには、"Syntax Highlighter" ではなくて "google-code-prettify" のほうがよさそうです。でもちょっと癖があるので使いこなすのが大変そうだなぁ。
σ(ー ε ー)


関連記事
ブログにソースコードをどう貼るか悩む。。。
http://makers-with-myson.blog.so-net.ne.jp/2014-10-27






HTML+JavaScriptによるプログラミング入門

HTML+JavaScriptによるプログラミング入門

  • 作者: 古金谷 博
  • 出版社/メーカー: 日経BP社
  • 発売日: 2014/08/06
  • メディア: 単行本



HTMLとCSSで基礎から学ぶJavaScript

HTMLとCSSで基礎から学ぶJavaScript

  • 作者: 園田 誠
  • 出版社/メーカー: 秀和システム
  • 発売日: 2011/09
  • メディア: 単行本



ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

  • 作者: 田中 賢一郎
  • 出版社/メーカー: インプレスR&D
  • 発売日: 2013/10/25
  • メディア: オンデマンド (ペーパーバック)




ブログにソースコードをどう貼るか悩む。。。 [ソフトウェア関連のもろもろ]

Raspberry Pi のプログラミングをやっているとプログラムがどうしても長くなりがち。Arduino に比べると Raspberry Pi は複雑です。

Arduinoでやっていたような画面キャプチャはとっても面倒だしカッコ悪い。ソースコードを綺麗に貼っているブログがあるので絶対手段があるはずとグーグル先生に聞いてみました。

どうやら皆さん"Syntax Highlighter"というものを使っているらしい。


SyntaxHighlighter 3.0.83 Download
http://alexgorbatchev.com/SyntaxHighlighter/download/


ダウンロードしてSo-netにアップロードするの面倒だなぁと思ったら、作者の方は hosted version も用意してくれているではないですか。感謝!


SyntaxHighlighter 3.0.83 Hosting
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html


ということで早速下記のコードをHTMLのヘッダー領域に追加してみました。











きちんと表示されるかな?

おぉ、きちんと表示されました!明日にでも SyntaxHighlighter の設定の仕方を解説したいと思います~。
(^_^)/~






Web Design with HTML, CSS, JavaScript and jQuery Set

Web Design with HTML, CSS, JavaScript and jQuery Set

  • 作者: Jon Duckett
  • 出版社/メーカー: Wiley
  • 発売日: 2014/07/08
  • メディア: ペーパーバック



HTMLとCSSで基礎から学ぶJavaScript

HTMLとCSSで基礎から学ぶJavaScript

  • 作者: 園田 誠
  • 出版社/メーカー: 秀和システム
  • 発売日: 2011/09
  • メディア: 単行本



詳解HTML&CSS&JavaScript辞典

詳解HTML&CSS&JavaScript辞典

  • 作者: 大藤 幹
  • 出版社/メーカー: 秀和システム
  • 発売日: 2013/12
  • メディア: 単行本




Qt のアプリケーションをAndroidで動かしてみた [ソフトウェア関連のもろもろ]

さて、今回はいよいよQtの一番のウリである”マルチプラットフォーム”を試すために、Android上で動作するか試してみましょう。

Androidで動かすためには Android NDK が必要になります。下記のサイトからダウンロードします。

https://developer.android.com/tools/sdk/ndk/index.html
0 Android NDK.png


ダウンロードが終わったら、適当なディレクトリに展開して QtCreator の設定を行います。メニューの「ツール」の中から「オプション」を選択します。「オプション」ウィンドウからAndroidアイコンを選択すると設定メニューが出てきます。私の場合、下記のように設定しました。


1 QtCreator_OptionSettings.png


QtCreatorに戻って、「プロジェクト」を選択すると「ビルドと実行」メニューが開きます。そこで、「キットを追加」を選択して「ameabi-v7a 用 Android (GCC 4.8, Qt 5.3.2)」を選択します。


2 QtCreator_AddKit.png


すると設定が追加されます。あらかじめ設定されていますので、特に編集せずそのまま使います。


3 QtCreator_AddAndroidIcon.png


では実行してみましょう。左下の「ビルド/実行キットセレクタ」のアイコンをクリックして「ameabi-v7a 用 Android (GCC 4.8, Qt 5.3.2)」を選択します。アイコンがPCディスプレイからAndroidに変わったことを確認したら実行ボタンを押します。


3 QtCreator_Execution.png


Androidデバイスの選択画面が出てきますのでとりあえずエミュレータを選択してみます。


4 QtCreator_DeviceSelection.png


いつまでたっても画面が出てきません。。。OTZ...


5 EmulatorScreen.png


コンソールを見たら、"OpenGL ES API がない" と叱られています。どうもエミュレータ側の実装の問題のようです。


6 ErrorMessage.png


気を取り直して実機(スマホ)で試してみます。XperiaをPCとUSBで接続してQtCreatorの実行ボタンを押します。Androidデバイスの選択画面でXperiaを選択します。


7 QtCreator_DeviceSelection2.png


動きました!





300x300ではスマホのアプリとしては小さすぎました。。。OTZ... フォントの大きさも違いますが画像の動きは設計通りです。ここまでできれば、マルチプラットフォーム対応の看板に偽りなしでしょう。

Raspberry Piが動き出せば、そのうちRaspberry Piでも試してみたいと思います!(時間があるかなぁ・・)
(^_^)/~



関連記事
Qt のアプリケーションを作ってみる(6)
http://makers-with-myson.blog.so-net.ne.jp/2014-10-07

Qt のアプリケーションを作ってみる(5)
http://makers-with-myson.blog.so-net.ne.jp/2014-10-03

Qt のアプリケーションを作ってみる(4)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-23

Qt のアプリケーションを作ってみる(3)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる(2)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる(1)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20





タグ:Qt

Qt のアプリケーションを作ってみる(6) [ソフトウェア関連のもろもろ]

ちょっとした小技を発見したので、ご紹介したいと思います。

(1)画像をリソースに追加する。 
これをやらないと、Androidにアプリを転送したときに画像が転送されないという憂き目にあいます。

リソースフォルダを右クリックし”既存のファイルの追加”で追加できます。


0 AddResource.png


追加されると画像がリストの中に表示されます。


1_AfterAddedMyImage.png


Imageオブジェクトは前回まで、”file:///Qt/Samples/MyFirstQt/tyoshino.jpg”と指定してましたが、直接ファイル名を指定するだけになります。


2_ModifiedImageProperty.png


(2)テキストを画像の動きと連動させる。
テキストレイアウトのターゲットを"image1"(tyoshino.jpg) に指定するだけです。簡単ですね。


3_TextLayout.png


テキストオブジェクトを確認すると、Anchors の値が"image1" に変わっていることが確認できます。


4_ModifiedQMLTextObject.png


動きを確認してみましょう。




テキストが連動していることが確認できると思います。ここまでで一行もC++のコードを書いていません。さすがGUIのために作られたツールですね。
(^_^)/~



関連記事
Qt のアプリケーションを作ってみる(5)
http://makers-with-myson.blog.so-net.ne.jp/2014-10-03

Qt のアプリケーションを作ってみる(4)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-23

Qt のアプリケーションを作ってみる(3)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる(2)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる(1)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20






Qt QuickではじめるクロスプラットフォームUIプログラミング

Qt QuickではじめるクロスプラットフォームUIプログラミング

  • 作者: 折戸孝行
  • 出版社/メーカー: アスキー・メディアワークス
  • 発売日: 2013/08/01
  • メディア: 大型本



OpenGL Tutorials using Qt4

OpenGL Tutorials using Qt4

  • 出版社/メーカー: Omid Sakhi
  • 発売日: 2013/11/10
  • メディア: Kindle版



Application Development with Qt Creator

Application Development with Qt Creator

  • 出版社/メーカー: Packt Publishing
  • 発売日: 2013/11/20
  • メディア: Kindle版




タグ:Qt

Qt のアプリケーションを作ってみる(5) [ソフトウェア関連のもろもろ]

久しぶりのQt記事になります。前回マウスクリックで画像を移動するアプリを作りました。


1_AddRectangles.png


今回はその動きにアニメーションを付け加えたいと思います。前回QMLに追加したStateGroup にtransitions という属性を追加します。


1_AddTransitions.png


この記述をよく見ると分かるように、Stateの移り変わり(form "*" to "StateX")で効果(easing.type)を指定しています。”State1”に移るときは OutBounce、"State2"に移るときはInElastic、最初の位置に戻るときはInExpo と指定しています。


さて、どんな動きになるのか動画で見てましょう。





なかなかしゃれた動きですね。こんなに簡単に効果を与えることができるなんてほんと便利です。Raspberry Pi で、早く試してみたいなぁ。(^_^)/~


関連記事
Qt のアプリケーションを作ってみる(4)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-23

Qt のアプリケーションを作ってみる(3)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる(2)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる(1)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20






Qt QuickではじめるクロスプラットフォームUIプログラミング

Qt QuickではじめるクロスプラットフォームUIプログラミング

  • 作者: 折戸孝行
  • 出版社/メーカー: アスキー・メディアワークス
  • 発売日: 2013/08/01
  • メディア: 大型本



Application Development with Qt Creator

Application Development with Qt Creator

  • 出版社/メーカー: Packt Publishing
  • 発売日: 2013/11/20
  • メディア: Kindle版



OpenGL Tutorials using Qt4

OpenGL Tutorials using Qt4

  • 出版社/メーカー: Omid Sakhi
  • 発売日: 2013/11/10
  • メディア: Kindle版




タグ:Qt

Qt のアプリケーションを作ってみる(4) [ソフトウェア関連のもろもろ]

前回、クリックすると背景色とテキストを変えるアプリケーションを作りました。今回はクリックで画像を移動するアプリケーションを作ってみたいと思います。

まず、前回作成した Rectangle を MouseArea ごとコピーをして左右に並べます。それぞれが画像を表示するためのエリアになります。

1_AddRectangles.png


Rectangleは全部で3つで、Rectangle1、Rectangle2、Rectangle3 です。QMLファイルは下記のようになりました。


2_ModifiedQml.png


動きをつけるために、StateGroup という属性をQMLファイルに追加します。ここに画像を移動するための記述を加えます。


3_AddStateGroup.png


MouseAreaがクリックされた時に、どのStateに移動するかを各Rectangleの属性に記述します。


4_ModifiedRectangles.png


それでは、アプリを起動してみましょう。


5_AppBeforeClicked.png


左をクリックしてみます。


6_AppAfterLeftClick.png


右をクリックしてみます。


7_AppAfterRightClick.png


期待通りにアプリケーションが動いてくれました。本当に簡単に動きがつけられますね。QMLの仕様が秀逸です。Qtなかなか使えそうです。Tutorial を読んでいたら、画像の移動時にアニメーションが付け加えられることも分かりました。次はアニメーションでアプリに味付けしてみたいと思います!
(^_^)/~


関連記事
Qt のアプリケーションを作ってみる(3)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる(2)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる(1)
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20





Application Development with Qt Creator

Application Development with Qt Creator




OpenGL Tutorials using Qt4

OpenGL Tutorials using Qt4

  • 出版社/メーカー: Omid Sakhi
  • 発売日: 2013/11/10
  • メディア: Kindle版



Qt QuickではじめるクロスプラットフォームUIプログラミング

Qt QuickではじめるクロスプラットフォームUIプログラミング

  • 作者: 折戸孝行
  • 出版社/メーカー: アスキー・メディアワークス
  • 発売日: 2013/08/01
  • メディア: 大型本




タグ:Qt
前の10件 | - ソフトウェア関連のもろもろ ブログトップ