Help us understand the problem. What is going on with this article?

QtWebService の画像対応

More than 1 year has passed since last update.

はじめに

昨日は @task_jp さんによる Qt の値型のクラスで使われている Implicit Sharing 技術の紹介と実装 でした。

今日は勉強会中に参加する予定だったのですが、家族一同体調がわるくてキャンセルしてしまいました。。。

QtWebService とは?

qtwebservice.io が公式サイトです。
概要は Qt Advent Calendar 2017 5日目の QtWebService の紹介 をご覧ください。

QtWebService の画像対応

これまで様々な テキスト形式 のデータを QML で記述することを目指してきた QtWebService ですが、諸事情により画像の動的生成に対応しました。

hello.qml
import QtWebService.Image 1.0

Image {
    id: root
    width: 100
    height: 100
    contentType: 'image/png'
    source: './qt-logo.png'

    Text {
        y: 70
        text: 'Hello World'
    }
}

こんな QML を書くと以下の画像が生成されます。

Hello World

注意点

QtWebService の画像の生成機能を使うためには QtGui モジュールが必要です。
QT = webservice
QT += gui

それから、QCoreApplication の代わりに QGuiApplication を使う必要があります。

また、QtQuick モジュールの Image や Text と同じ名前ではありますが、一切関係ないエレメントです。そのうち同じようなプロパティを整備する予定ですが、いまは最低限の機能しか用意していません。

なにがうれしいの?

画像を生成することができます。昔懐かしの画像のアクセスカウンターを以下のような感じで作ることも可能です。

counter.qml
import QtWebService.Image 1.0
import QtWebService.Cache 1.0
import QtQml 2.2

Image {
    id: root
    width: 100
    height: 30
    contentType: 'image/png'

    Cache { id: cache }
    Text {
        id: text
        y: 20
        x: root.width - text.width
    }

    Component.onCompleted: {
        var counter = cache.fetch('counter')
        counter = counter ? counter + 1 : 1
        cache.add('counter', counter)
        text.text = counter
    }
}

実行結果:
アクセスカウンター

なんで作ったの?

Google の Static Maps API で、地図上に画像マーカーを指定する際に、様々な画像を用意するのが面倒だったので、QtWebService で提供した画像を表示するようにしています。

https://maps.googleapis.com/maps/api/staticmap?center=Tokyo&zoom=13&size=600x300&maptype=roadmap&markers=anchor:center|icon:http://qtwebservice.io/examples/marker.qml|35.6992897,139.6759042|35.6700093,139.7146997

地図

以下のような marker.png を用いて、

http://qtwebservice.io/examples/marker.png

以下のようなコードで画像を生成します。

marker.qml
import QtWebService.Image 1.0

Image {
    id: root
    width: 32
    height: 32
    contentType: 'image/png'
    source: './marker.png'

    Text {
        x: (root.width - width) / 2
        y: 22
        text: (new Date).getSeconds()
    }
}

これを表示すると以下のようになります。

http://qtwebservice.io/examples/marker.qml

実際に運用している(秘密の)サービスでは、画像の qml にパラメータを渡して、少し高度な画像の生成を行っています。

おわりに

Qt を使うとウェブサービスでの動的な画像の生成も簡単ですね。
アイディア次第で本当に色々な事ができるので、様々なことに活用してみてください。

明日は @argama147 さんによる「今更聞けないシグナル・スロット総整理」です。お楽しみに!

task_jp
Qt が好きで遊んでいたら2014年、世界で史上2番目の Qt Champion というのになっちゃいました。 2019年にも自身2度目の Qt Champion を獲得。 現在求職中です。今までの経験を活かして活躍できそうなお仕事があれば是非紹介してください。 それ以外のお仕事の問い合わせは https://qt5.jp/qwork/ からお願いします。
https://qt5.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away