話題の Ubuntu for Phones でアプリ開発をやってみた

こんにちは。共同開発部開発担当の伊藤です。

新しいスマートフォンOS「Ubuntu for Phones」が今年の初頭に発表され、スマートフォンアプリを開発している身としては気になって気になって仕方がなかったのですが、つい先日触る機会があり、アプリの開発も手探りながら少し試すことができました。今回はその様子をご紹介したいと思います。

Ubuntu for Phones って？

Linuxディストリビューション Ubuntu を開発している Canonical 社が開発しているスマートフォン OS です。Windows 8 のような、エッジからのスワイプ操作を使った操作が特徴的です。以下でいくつか画面をお見せしましょう。

・右エッジからスワイプで実行中のアプリの切り替え
　左エッジからスワイプでお気に入りのアプリを選択

・上エッジからスワイプで通知を確認したり、Wi-Fi の接続をしたり(スワイプするアイコンによってかわります)

・下エッジからスワイプで現在のアプリを停止したり、設定を変更したり、共有するメニューを表示

・ホーム画面は Windows Phone のピボットみたいな感じで、Music、People、Videos などが並んでいます。

Ubuntu for Phones 開発ことはじめ

Ubuntu for Phonesのアプリ開発については、Ubuntu app developers のサイトに情報があります。

開発環境のインストール

開発環境はデスクトップの Ubuntu がインストールしてあれば、端末を開いて、下記のコマンドで簡単に準備できました。

sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-proper && sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get install ubuntu-sdk notepad-qml

プロジェクトの作成とプログラムの記述

インストールが完了したら、開発環境 Qt creator を起動します。

新規作成で「Ubuntu UI – Simple」のテンプレートでプロジェクトを作成します。

エディタが起動しました。普段は Objective-C や Java を相手にしている僕としては、あまり見慣れないコードがでてきます。

Ubuntu for Phones のアプリは Qt ベースで QML という UI 記述言語で UI を作り、JavaScript で処理を記述する形になっているようです。ちょうどオンラインの通貨変換 API を使ったチュートリアルがありましたので、これを少し変えて RSS を表示するアプリを作ってみました。

import QtQuick 2.0

import QtQuick.XmlListModel 2.0

import Ubuntu.Components 0.1

import Ubuntu.Components.ListItems 0.1
MainView {

    // objectName for functional testing purposes (autopilot-qt5)

    objectName: "mainView"

    applicationName: "Developer's Blog"
    width: units.gu(100)

    height: units.gu(75)
    // ListView に表示されるデータのモデル : items と命名

    ListModel {

        id: items

    }
    // XMLを取得

    XmlListModel {

        id: rssFetcher

        source: "http://blog.sleipnirbrowser.com/feed"

        query: "/rss/channel/item"

onStatusChanged: { if (status === XmlListModel.Ready) { // XMLを受信したら、items に入れていく for (var i = 0; i < count; i++) { items.append({"title": get(i).title, "description": get(i).description}) } } } XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "description"; query: "description/string()" } } // items をモデルにして ListView を表示する ListView { width: parent.width height: parent.height model: items delegate: Standard { text: title } } }