フェンリル

Developer's Blog

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

ubuntu_phone_01

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

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

Ubuntu for Phones って?

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

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

ubuntu_phone_02

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

ubuntu_phone_03

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

ubuntu_phone_04

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

ubuntu_phone_05

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_phone_06

ubuntu_phone_07

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

ubuntu_phone_08

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

ubuntu_phone_09

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 } } }

アプリの実行

コードを書いたらアプリを実行してみます。まず、Tools メニューから Ubuntu→Device→Enable→Developer Connection とたどり、端末を開発モードにします。

ubuntu_phone_10

端末が開発モードになると、Devices タブで設定を確認したり、端末のファームを書き換えたりすることができます。

ubuntu_phone_11

実機でアプリを実行するには、Build メニューから Ubuntu→Run in Ubuntu Device と選びます。

ubuntu_phone_12

今回のプログラムは実行すると、海外向けの Developer's Blog の記事一覧が表示されます。(ちなみにスクリーンショットはToolsメニューの Ubuntu→Device→Take a screenshot にあります。)

ubuntu_phone_13

また、驚いたことにこのままローカルで実行すると、デスクトップの Ubuntu でも一切コード変更なしに動きます!

ubuntu_phone_14

おわりに

今回は Ubuntu for Phones で簡単なアプリを作って実機で実行してみました。スマートフォンとデスクトップで全く同じコードが動くというのは少し驚きでした。

Tizen、Firefox OS、Ubuntu for Phones と、新しいスマートフォンOSの情報がいろいろ出てきています。今後もアンテナを高くして、新しい技術に触っていきたいですね。

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。