2013年6月17日月曜日

関東Qt勉強会 #16で発表してきました

相当お久しぶりな隠者です。
いやぁ、仕事にはまりすぎて、なかなか身動きできない状態でした。

昔から地雷仕事を踏みやすい傾向にあるのですが、最近顕著な気がします。
まぁ、そんな愚痴は置いておいて。

関東Qt勉強会 #16で発表してきました。鈴木さんに主催がバトンタッチされてから、モクモク形式で、集まって各自自由に勉強している雰囲気が強かったのですが、たまには発表もしましょうということで。

内容は、Qt小技集ということですが、とりあえずCUIでアプリ書こうよ的な話をしたくてCUI中心にもっていこうとして、微妙にこけた感じでしょうか。つまらなくてごめんなさい。

次回はもう少しまともなネタを発表できるように頑張ります。








なお、今回をもって関東Qt勉強会としての活動は終了で、次回からQtユーザー会 @関東 となります。なにせ2カ所で告知したりするのめんどくせーという人とかいるので、リファクタリングしましょうということで。
楽しく活動できる会になるといいですね。

2013年1月7日月曜日

Qt の過去のNews Titleを途中まで


Webarchiveでnewsの過去ログを漁ってみた隠者です。
YAPF部の部長-黒の王-が時期等も含めて、Qt/Embeddedの流れとか知りたいなとおっしゃられていたので、少しまとめてみたいなぁと思ったのですが、抜けているものも多くて。

過去のものは楽だったのですが、2006年以降の動的なページはアーカイブされていないものも多いようでして。

Nokiaさんがサイト作ってた頃は、Trolltech時代のnewsまでArchiveしていてくれたのですが、Digiaさんでは見当たりませんでした。まとめるどころか、まだ日付とタイトルを並べただけですが、一応残しておきます。この続きどうしよう・・・。


1998/03/27 Trolltech Announces Qt Snapshots
1998/04/05 Trolltech Presents Qt-Based Port of Netscape Navigator 5.0
1998/04/08 The KDE Free Qt Foundation Announced
1998/07/09 Qt version 1.40 released
1998/10/01 Qt version 1.41 release
1998/11/18 Next Generation of Qt Free Edition to be Open Source
1998/12/02 Qt version 1.42 released
1999/03/02 Linux version of Opera to be based on Qt
1999/03/04 QPL 1.0 released
1999/03/12 Qt version 1.44 released
1999/06/25 Qt version 2.0 released
1999/07/23 Qt version 2.0.1 released
1999/09/30 Qt version 2.0.2 released
2000/03/09 The Embedded Linux Consortium launched
2000/03/20 Qt/Embedded (Preview)
2000/04/12 Qt version 2.1 released
2000/05/31 Qt version 2.1.1 released
2000/06/19 Beta release of Qt/Embedded
2000/06/27 Qt Designer preview
2000/07/10 Trolltech Donates Qt/Windows Site Licenses to Educational Institutions
2000/08/07 Partnership with Ericsson
2000/08/09 Trolltech and NEC Cooperate
2000/09/04 Qt free edition goes GPL
2000/09/06 Trolltech and Loki Partnership
2000/09/06 Qt 2.2 released
2000/09/25 Opera Software, PalmPalm and Trolltech form Strategic Alliance
2000/09/26 Embedded partnerships in Asia
2000/10/05 Qt 2.2.1 released
2000/10/24 Qt Linguist pre-released
2000/10/26 Trolltech congratulates KDE
2000/10/30 Trolltech to add GPL licensing to Qt/Embedded
2000/11/13 Qt/Embedded available for download (with Qt Palmtop)
2000/11/13 Qt 2.2.2 released
2000/12/07 What's the Difference Between a Linux Smart Phone and an Expensive Paper-Weight?
(PalmPalm http://www.mobilemag.com/2001/04/05/tynux-the-first-linux-based-smart-phone/)
Tynix OS
2000/12/12 Qt 2.2.3 released
2000/12/18 Qt Palmtop Environment 1.1 released
2000/12/19 Qt Palmtop Environment 1.1.1
2001/01/31 Voice control on desktop Linux applications
2001/02/02 Qt 2.2.4 released
2001/03/07 I can see clearly now (Qt 2.3 released)
2001/03/12 Prime time for Embedded Linux
2001/03/12 Concept Engineering's Support for Qt Provides Boost to C++ EDA Developers
2001/04/03 Trolltech's Qt University Makes the Dean's list
2001/04/09 Trolltech Previews Enterprise Ready Cross-Platform Application Framework
2001/04/09 MontaVista and Trolltech Join Forces: Embedded Linux and Graphical Toolkit
2001/04/10 Lineo and Trolltech expand Embedded Linux partnership
2001/04/11 Trolltech and Lynuxworks provide a robust GUI solution for embedded Linux devices
2001/05/21 A Whole New Universe of Applications Available for the Mac
2001/03/22 Qt 3.0 Beta Release
2001/06/04 Embedded Industry Leaders Establish Open Standards Java and Linux Platform for Device Manufacturers
2001/06/15 Qt 2.3.1 Released
2001/06/20 Trolltech, NeoMagic Collaborate on Platform for Handheld Internet and Personal Entertainment Devices
2001/06/26 Trolltech Makes Qt/Windows Available Under New Non-Commercial License
2001/07/31 Qt Palmtop Environment 1.3.1
2001/08/06 Trolltech releases an Open Beta of Qt/Mac
2001/08/28 Linux-Based PDA Suite Preview
2001/08/29 Qt 3.0 beta released
2001/09/03 Trolltech to include Qt/Mac in the Qt Academic Program
2001/09/13 New release of Linux-based mobile computing platform (Qt palmtop 1.4)
2001/10/15 Trolltech Releases Qt/Mac, OS X
2001/10/15 Trolltech Releases Qt 3.0
2001/11/05 Maintenance release: Qt 2.3.2
2001/11/05 Sharp, Trolltech Put Embedded Linux Applications in the Palm of Your Hand
2001/12/03 Trolltech Launches Worldwide Developer Contest for Sharp's Zaurus SL-5000D
2001/12/12 Maintenance Release: Qt 3.0.1
2002/01/23 Windows Evaluation Version Available
2002/01/31 Qt 3.0 Nominated for Product of the Year 2001
2002/02/25 Maintenance Release: Qt 3.0.2
2002/03/25 Maintenance Release: Qt 3.0.3
2002/03/25 Trolltech Unveils Qtopia
2002/03/25 Qtopia SDK (1.5)
2002/04/23 Trolltech's New ActiveQt Speeds and Simplifies Creation of ActiveX Controls
2002/05/03 Maintenance Release: Qt 3.0.4
2002/07/15 Maintenance Release: Qt 3.0.5
2002/10/23 Maintenance Release: Qt 3.0.6
2002/11/13 Trolltech releases Qt 3.1
2002/12/17 Maintenance Release: Qt 3.1.1
2003/02/03 Maintenance Release: Qt 3.0.7
2003/02/12 Trolltech's Qtopia Included in IBM's Embedded Linux Reference Platform
2003/02/19 Qtopia Pre-integrated and Productized for the new MontaVista Linux Consumer Electronics Edition
2003/03/03 Maintenance Release: Qt 3.1.2
2003/03/05 Trolltech launches latest version of Qtopia (1.6)
2003/06/24 Qt/Mac GPL Released
2003/07/02 Trolltech Introduces Qt Script for Applications, (QSA) Version 1.0
2003/07/23 Trolltech Releases Qt 3.2
2003/07/31 Maintenance Release: QSA 1.0.1
2003/08/05 Trolltech releases Qtopia 1.7
2003/08/27 Trolltech releases Qt 3.2.1
2003/10/16 Trolltech releases Qt 3.2.2
2003/10/31 Trolltech Unveils Qtopia Phone Edition
2003/10/31 Motorola selects Trolltech for the A760 Linux smartphone
2003/11/14 Trolltech releases Qt 3.2.3
2004/02/04 Trolltech releases Qt 3.3 and QSA 1.1
2004/03/01 Qt 3.3.1 released
2004/04/27 Qt 3.3.2 released
2004/05/26 Trolltech Releases Qtopia Phone Edition To Customers
2004/08/11 Trolltech Releases Qt 3.3.3
2004/08/27 Trolltech Releases Qt Script for Applications (QSA) 1.1.1
2004/09/27 Qtopia Development Environment for Linux Devices Now Available on TI's OMAP Processor
2004/09/27 Trolltech's Qtopia Phone Software Powers Yuhua TelTech's Upcoming Normandy Mobile Phone
2004/11/09 Trolltech Releases Major Upgrade to Qtopia Software for Embedded Linux Devices(Qtopia 2.1)
2004/11/09 New Motorola Linux-based Mobile Phones Built on Trolltech Platform
2004/11/09 Datang Mobile Picks Qtopia for New Linux-Based Mobile Phone Platform
2004/11/15 Philips Multimedia Software to Support Qtopia for Mobile Devices
2004/11/16 Trolltech and Toshiba to Provide Embedded Linux Software
2004/12/22 Qtopia PDA Edition Released Under GPL License(Qtopia 2.1)
2005/01/17 Trolltech Releases Qt Script for Applications (QSA) 1.1.2
2005/01/26 Trolltech Releases Qt 3.3.4
2005/02/07 Trolltech to Extend Dual Licensing to Qt for Windows
2005/02/14 Leadtek Chooses Qtopia Software for IP VideoPhones
2005/02/14 Ningbo Bird Standardizes on Trolltech's Qtopia Software for Linux-based Mobile Phones
2005/02/14 Trolltech's Qtopia Software Available on Philips NexperiaTM Mobile Platforms.
2005/06/06 Qt 4 Release Candidate Now Available
2005/06/28 Trolltech Launches Major New Version of Qt
2005/08/03 Trolltech Releases Qtopia SDK for Archos PMA400
2005/08/19 Trolltech Releases QSA for Qt 4
2005/08/19 Trolltech Releases Qt 4.0.1
2005/09/05 New Cellon Phone Platform Built with Trolltech's Qtopia
2005/09/09 Trolltech Releases Qt 3.3.5
2005/11/09 Trolltech Partners with Nissin Systems to Accelerate Embedded Linux Adoption in Japan
2005/11/09 Trolltech Inks Agreement with NeoMore to Resell Qtopia and Qt Embedded in France
2006/02/08 Teleca and Trolltech enter strategic partnership to deliver Linux-based mobile phone solutions
2006/02/13 Trolltech's Qtopia Strengthens Design and Flexibility of Latest Linux-based Mobile Phones
2006/02/13 Amoi Phone Built on Cellon's Qtopia®-Based Handset Design
2006/02/13 Accton uses Trolltech's Qtopia for Embedded Peer-to-Peer Wi-Fi VoIp Phone
2006/02/13 Trolltech raises bar again with Qtopia 4 Series
2006/02/22 Trolltech Releases Qt 4.1.1


2013年1月6日日曜日

Ubuntu for Phoneのアプリケーション作成チュートリアル(その3)


本日から、こちらのブログのQtネタはplanet で日本Qtユーザー会に転載される事に成りました。

Google Bloggerの機能だけだと、コードとかわかりやすくするのが難しいので、手書きHTMLで枠をつけたりしていたのですが、Atomを使った転載だと消えてしまうようでして。<hr>とか使って、区切りを入れたりとか、少し工夫してみる事にします。直前までの記事をわざわざ大仰に手直ししたりはしないので、planetでお読みの方は、読みづらい記事が多くてごめんなさい。

あと、Twitter経由の知り合いの読者が多いので、割と内輪ネタが多い場合もあります。ご不快でしたらごめんなさい。

さて、それでは引き続きにゅあんすで翻訳しつつ、適当に補足しつつ、チュートリアルのにゅあんすで〜翻訳を続けようかと思います。3ページ目、4ページ目は少ないですから、続けて行っちゃいます。


UIのアレンジ

ここまで、通貨コンバータアプリのためにバックエンドと素材のセットアップをしてきました。それでは最終のステップに移り楽しみましょう。それらを統合して、結果をみてみます。

ここまでと同様に最後の断片を追加しましょう。


    Column {
        id: pageLayout

        anchors {
            fill: parent
            margins: root.margins
            topMargin: title.height
        }
        spacing: units.gu(1)

        Row {
            spacing: units.gu(1)

            Button {
                id: selectorFrom
                property int currencyIndex: 0
                property TextField input: inputFrom
                text: currencies.getCurrency(currencyIndex)
                onClicked: PopupUtils.open(currencySelector, selectorFrom)
            }

            TextField {
                id: inputFrom
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
                onTextChanged: {
                    if (activeFocus) {
                        inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
                    }
                }
                function update() {
                    text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
                }
            }
        }

        Row {
            spacing: units.gu(1)
            Button {
                id: selectorTo
                property int currencyIndex: 1
                property TextField input: inputTo
                text: currencies.getCurrency(currencyIndex)
                onClicked: PopupUtils.open(currencySelector, selectorTo)
            }

            TextField {
                id: inputTo
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
                onTextChanged: {
                    if (activeFocus) {
                        inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
                    }
                }
                function update() {
                    text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
                }
            }
        }

        Button {
            text: i18n.tr("Clear")
            width: units.gu(12)
            onClicked: {
                inputTo.text = '0.0';
                inputFrom.text = '0.0';
            }
        }
    }

これは、前の断片よりも長いコードの一部ですが、かなり単純で新しい構文はでてきません。ここでは、root のエリアにユーザーインターフェースを提供するための視覚コンポーネントの配置とシグナルハンドラの設定を行っています。

どのようにonClickedシグナルハンドラが、ユーザーが通貨の選択しをクリックした時の動作(例えばpopupを開く)動作を定義しているか、onTextChengedハンドラが入力された通貨の変換ように事前に定義された関数をどのように呼び出すのか、そしてcurrentSelector コンポーネントで前回期待されていたlist view itemのupdate()関数を定義している事に着目して下さい。

レイアウトを設定するためにColumnと2つのRowを使用しています。各行には、通貨選択ボタンと、通貨変換値を表示入力するためのテキストフィールドがあります。下には両方のテキストを一回でクリアするためのボタンも設置しています。これは、レイアウトのモックアップ画像です。

驚く事なかれ!

これでおしまいです。さぁ、もうのんびりと作ったものを楽しめます。好きな方法でqmlsceneを呼び出して下さい(私は、Ctrl+Shift+Pのカスタムショートカットを使っています)、そして、あなたがほんの数行のコードで書いた、完全な機能の素敵な通貨変換をご覧下さい。


まとめ

これで、フォームファクター非依存の携帯電話向けUbuntuアプリケーションの作成方法を学びました。ここまでで、あなたはQML, JavaScriptと色々なUnuntuコンポーネントのようなパワフルなテクノロジーを組み合わせて、素敵に奇麗なUbuntuルックのアプリケーションを作り出しました。

あなたは、これらのテクノロジーがもたらすとても大きな可能性に気がついた事でしょう。ここからはあなた次第です。私たちのtoolkitのpreviewを試し、フィードバックをすることで、Ubuntuが新しい多数の携帯電話に搭載されるお手伝いをして下さい。

詳細は

この先は、Toolkitの話ですが、こちらは以前のエントリに書いたのでそちらをどうぞ。

ここまでの記事

その1、その2、Toolkitについて

ここまでのコード

import QtQuick 2.0
import QtQuick.XmlListModel 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1
import Ubuntu.Components.Popups 0.1

Rectangle {
    id: root
    width: units.gu(60)
    height: units.gu(80)
    color: "lightgray"

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Label {
       id: title
       ItemStyle.class: "title"
       text: i18n.tr("CurrencyConverter")
       height: contentHeight + root.margins
       anchors {
           left: parent.left
           right: parent.right
           top: parent.top
       }
    }

    ListModel {
        id: currencies
        ListElement {
            currency: "EUR"
            rate: 1.0
        }

        function getCurrency(idx) {
            return (idx >= 0 && idx < count) ? get(idx).currency: ""
        }

        function getRate(idx) {
            return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
        }
    }

    XmlListModel {
        id: ratesFetcher
        source: "http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml"
        namespaceDeclarations: "declare namespace gesmes='http://www.gesmes.org/xml/2002-08-01';"
                               +"declare default element namespace 'http://www.ecb.int/vocabulary/2002-08-01/eurofxref';"
        query: "/gesmes:Envelope/Cube/Cube/Cube"

        onStatusChanged: {
            if (status === XmlListModel.Ready) {
                for (var i = 0; i < count; i++)
                    currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)})
            }
        }

        XmlRole { name: "currency"; query: "@currency/string()" }
        XmlRole { name: "rate"; query: "@rate/string()" }
    }

    ActivityIndicator {
        anchors.right: parent.right
        running: ratesFetcher.status === XmlListModel.Loading
    }

    function convert(from, fromRateIndex, toRateIndex) {
        var fromRate = currencies.getRate(fromRateIndex);
        if (from.length <= 0 || fromRate <= 0.0)
            return "";
        return currencies.getRate(toRateIndex) * (parseFloat(from) / fromRate);
    }

    Component {
        id: currencySelector
        Popover {
            Column {
                anchors {
                    top: parent.top
                    left: parent.left
                    right: parent.right
                }
                height: pageLayout.height
                Header {
                    id: header
                    text: i18n.tr("Select currency")
                }
                ListView {
                    clip: true
                    width: parent.width
                    height: parent.height - header.height
                    model: currencies
                    delegate: Standard {
                        text: currency
                        onClicked: {
                            caller.currencyIndex = index
                            caller.input.update()
                            hide()
                        }
                    }
                }
            }
        }
    }
    Column {
        id: pageLayout

        anchors {
            fill: parent
            margins: root.margins
            topMargin: title.height
        }
        spacing: units.gu(1)

        Row {
            spacing: units.gu(1)

            Button {
                id: selectorFrom
                property int currencyIndex: 0
                property TextField input: inputFrom
                text: currencies.getCurrency(currencyIndex)
                onClicked: PopupUtils.open(currencySelector, selectorFrom)
            }

            TextField {
                id: inputFrom
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
                onTextChanged: {
                    if (activeFocus) {
                        inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
                    }
                }
                function update() {
                    text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
                }
            }
        }

        Row {
            spacing: units.gu(1)
            Button {
                id: selectorTo
                property int currencyIndex: 1
                property TextField input: inputTo
                text: currencies.getCurrency(currencyIndex)
                onClicked: PopupUtils.open(currencySelector, selectorTo)
            }

            TextField {
                id: inputTo
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
                onTextChanged: {
                    if (activeFocus) {
                        inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
                    }
                }
                function update() {
                    text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
                }
            }
        }

        Button {
            text: i18n.tr("Clear")
            width: units.gu(12)
            onClicked: {
                inputTo.text = '0.0';
                inputFrom.text = '0.0';
            }
        }
    }
}


ということで、Ubuntu for Phoneのチュートリアルをにゅあんすでー翻訳してみましたけど、いかがでしたでしょうか。

細かい説明をと考えていましたが、このチュートリアルをやるうちに、実はこのチュートリアル、QMLを知らないといまいち良くわからずに流れてしまう気がしてきました。

そんなわけで、QMLについて、もうちょっと何かわかりやすい方法で、チュートリアル作れたらなぁなんて思ってます。

Twitterでは、今の円・ドルレート表示とかも欲しい的な話を聞きましたので、XMLでデータをくれそうな所を探しています。見つかったらさっくり作ってみたいなと思います。
QMLでグラフ書くのはちょっと大変そうなんで、まぁ、最初は文字だけ表示でしょうけど。

ちなみに、Rectangleの代わりにImageを指定し、colorプロパティの代わりにsourceプロパティを指定して、画像ファイルをURL指定するとこんな事も出来ちゃいます。


え、なんでアニメを使わないかって?さすがにQtユーザー会に転送されますからねぇ。そういう無茶はできませんでした。誰か、一定のルールで背景に使わせてくれる、いけてる萌え絵の絵師さんを紹介してくれませんか・・・。