SailfishOS向けアプリの開発

#今年も参戦！
(何故か)日本Qtユーザー会の宴会部長(と呼ばれてしまってるヒト)デス！！
と言って特に何かしている訳じゃないんだけど、今年も9/10に「Qtの日」をコーディネートしてみた。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">2018年の「9/10はQtの日」は昨日9/10無事開催・終了となりました。<br>一応コースだったんですが、料理はちょっと貧相でしたね・・・次回までの反省材料とさせて頂きます m(_ _)m<a href="https://twitter.com/hashtag/qtjp?src=hash&amp;ref_src=twsrc%5Etfw">#qtjp</a> <a href="https://t.co/k6U79vl1yX">pic.twitter.com/k6U79vl1yX</a></p>&mdash; helicalgear＠はりきらない (@helicalgear) <a href="https://twitter.com/helicalgear/status/1039313371873599488?ref_src=twsrc%5Etfw">2018年9月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

企画者がヘボいので大したイベントにならないのが難点ではあるんだけど、一応（忘れなければ）来年も募集する予定でいたりするので、もし良かったらぜひみんな来てほしい。

さて、昨日は@shin1_okadaさんの[Qt3D を使ってみよう](https://qiita.com/shin1_okada/items/dcf1fd1124a83fefd797)。なんか面白そうなので年末の休みの間にこれを読みながらいろいろ試してみようと思っている。

で、自分の記事はというと、普段から開発したりしているワケじゃないので今年のカレンダーネタが全然ないんだけど、どうせいつもニッチな俺得記事しか書かないんだから、今年も俺得で十分だろうってことでタイトル通りのネタになった（ぉぃ

#SailfishOSって？
良く言われてる言い方で紹介すると、元NokiaのMeeGo開発部隊がスピンアウトして作った"Jolla"が開発してるモバイルOSって感じだろうか。UI/UXの部分はQtで書かれていて、アプリケーションも基本Qt/QMLで作れる。この記事の時点でのバージョンは3.0。

日本では対応端末が入手しづらい状況が続いていたけど、Jollaが2017年のMWCでSONYのオープンデバイスプログラムでXperiaシリーズをサポートすると発表し、同年11月に最初のバージョンがリリースされている。OS自体は以下で日本から購入＆ダウンロードできる。

- https://shop.jolla.com

まだサポートは不十分なところがあるけど、Xperia X、Xperia X Compact、Xperia XA等がサポートされていて、今後もデバイスを増やしていく予定ってことなので、そのうち「お手元でご不要になりましたXperia」で動かせるようになるかもだし、アプリの開発自体はエミュレータで十分やれるので端末持ってないヒトもなんかやってみるといいよ(笑)

#開発環境
エミュレータ及びビルドエンジン(という表現で合ってる？)のために[Oracle VirtualBox](http://www.oracle.com/technetwork/jp/server-storage/virtualbox/overview/index.html)が必要なので先にインストールしておこう。

あとは[Jollaのサイト](https://sailfishos.org/wiki/Application_Development)にかなり細かい情報が公開されていて、ここから"Get Started" > "Install" > "[Download the latest SDK](https://sailfishos.org/wiki/Application_SDK)"とたどってOSに合ったSDKをダウンロードして実行するだけでOK。
Windows、MacOS辺りはダウンロードしたファイルをダブルクリックするだけだけど、Linuxだけはダウンロードした後にchmodしてから実行ってことになる。

```shell
$ chmod +x ~/Download/<installer_name>
$ ./Download/<installer_name>
```

Linuxでインストール時に下のようなエラーが出るケースは、多分インストールしようとしてるユーザがVirtualBoxの実行グループに参加できてない可能性があるのでチェックしてみるといい。

```
Exception while loading the component script '://metadata//org.merproject/installscript.qs'. (TypeError: Cannot call method 'substring' of undefined)
```

(Linuxであれば)デフォルトなら「~/SailfishOS」に一通りインストールされるはずだから、「~/SailfishOS/bin/qtcreator.sh」を実行すると概ねいつも通りのQtCreatorが起動する。IDEはSailfishOS開発用のPlug-inが入ってはいるけどQtCreatorそのものなので、操作方法については普段Qtで開発してる人たちは何も迷わないはず(笑)

#とりあえず動かしてみる。
とりあえずはIDEを起動してみる。
<img width="960" alt="Screenshot_20181211_215750.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/3e1df9fb-8eff-5e01-2c77-60c613f98aec.png">
うん、見た目フツーのQtCreatorだよね。

とりあえず新規プロジェクトを起こそう。
<img width="791" alt="Screenshot_20181211_215843.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/ab7a4b53-024c-2405-0878-5969808165be.png">
プロジェクトの種類として、通常のQMLアプリとQML Onlyというのがある。前者はmain.cppが入っていてC++とQMLの両方で書く前提、後者は文字通りQMLだけをガシガシ書いて実行するとxxxxx(qmlviewerみたいなの)経由で動く感じになる。とりあえずここでは普通のQMLアプリを選択して次に進む。
<img width="517" alt="Screenshot_20181211_220025.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/0f491c2f-7f50-72b7-1972-b569a7a15fc4.png">
環境は実機用がarmv7hl、エミュレータ用およびJolla Tablet用ならi486を選択する感じ。エミュレータで開発して実機用の実行ファイルはarm用環境でビルドしなおして・・・みたいな感じでいつもやってる。ここでは一応全部選択しておく。
そのまま進めていくと、スケルトンが表示される。
<img width="960" alt="Screenshot_20181211_220159.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/445e62d3-e553-8904-6281-f3bcaa1e0cb5.png">
ちなみに「QML Only」を選択した場合、こんな感じの構成になる。
<img width="960" alt="Screenshot_20181212_132323.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/55eb4d1a-a698-60d7-37eb-4813f1765c64.png">
通常のQtアプリの開発であればここで「実行」してみればビルドからアプリの起動まで一発なんだけど、SailfishOSアプリのビルドはVirtualBox上で動く開発環境(SailfishOS Build Engine)の中で行なわれるので、左下の""をクリックしてウラで仮想マシンを起動しておく。
<img width="91" alt="Screenshot_20181212_100138.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/720f8fe6-fb9e-c496-0610-57211b2e4e8a.png">
実行しても特に何かポップアップされるワケではなく、こんな感じに変化するだけ。
<img width="87" alt="Screenshot_20181212_102218.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/b5048add-4b99-ce36-af82-7f30d1e811df.png">
あとは実機がある場合には実機の接続だとかいろいろ準備があるんだけど、とりあえず今回はエミュレータでの開発を前提に書くので（ぉぃ）、i486の環境を選択しておく。あとデプロイは"Deploy As RPM Package"で。
<img width="550" alt="Screenshot_20181212_102420.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/3e119671-b94a-fecb-9b9e-8a09028d43b5.png">
armv7hlが選択されていた場合、こっちに切り替えるとさっきのBuild Engineのアイコンの下にもう一つエミュレータ起動用のアイコンが出てくるので、これをクリックしてエミュレータを起動する。
<img width="247" alt="Screenshot_20181212_102825.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/b850fe44-e7ee-5d4a-5fe6-041e1567fa24.png">
コレでとりあえずビルド及び実行の準備が整ったのでビルドしてみよう。
<img width="247" alt="Screenshot_20181212_111015.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/40e4c203-2c70-250c-44c3-079745dadbb9.png">
こんな感じでサンプルアプリが起動する。

#ソースを見てみる
ソースを眺めてみると、こんな1行が目につくはず。

```qml:FirstPage.qml
import Sailfish.Silica 1.0
```

SailfishOS独自のUIに基づいて勘弁にアプリが開発できるように、Sailfish SDKには"Sailfish Silica"と呼ばれるモジュールが含まれている。

- [Silica Reference Documentation](https://sailfishos.org/develop/docs/silica/)
- [Sailfish Silica Reference](https://sailfishos.org/develop/docs/silica/sailfish-silica-all.html/)

リファレンスの方を眺めてもらうと、いくつかのPageやDialog、View、その他ボタン等の部品類等が並んでいる。まぁ、だいたい見てもらって判る通りこれは"Qt Quick Controls"と同じ位置付けのモジュールで、そこにモバイルアプリ向けな要素やSailfishOS独自のUIを詰め込んである感じってイメージで使えばいいってコトになる。
とりあえず独自なUIの一つがいきなり出てくるのでちょっと見てみる。

```qml:FirstPage.qml
SilicaFlickable {
    .....
    PullDownMenu {
        MenuItem {
            text: qsTr("Show Page 2")
            onClicked: pageStack.push(Qt.resolvedUrl("SecondPage.qml"))
        }
    }
    .....
}
```

プルダウンメニューは画面を下に引っぱると出てくるメニュー。こんな感じ。
<img width="247" alt="Screenshot_20181212_133906.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/86ad31db-2f1f-c97b-26e9-dd4445b8bbd9.png">
メニューを完全に引っぱり降ろしてタップで選択することもできるけど、ある程度引っぱると（複数ある場合にはその段階で一番上にあるものが）選択されるので、そこで手（指）を離すだけでアクションが実施される。
そしてSecondPage.qmlの画面が出てくる。
<img width="247" alt="Screenshot_20181212_133920.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/b568696d-502f-95d3-d032-fc187e0415db.png">

```qml:SecondPage.qml
SilicaListView {
    .....
    delegate: BackgroundItem {
    .....
    }
    .....
}
```

基本的にはListViewと同じだけど、この組合せで使うとMouseAreaを設定しなくても各要素はClickableだし、タップした時のハイライトとかも特に設定する必要はない。

ちなみにページはStackViewと同じくpush、pop、replaceで遷移するんだけど、SecondPage.qml上にはpop()がない。スクリーンショットの左上にインジケータ（明るい点）が表示されていて、ここをタップするかあるいは画面を左から右にスワイプするとpop()される。

その他のUIについては、エミュレータにプレインストールされている（ホーム画面を下から上にスワイプすると出てくる）「Component Gallery」というアプリを実行してみると確認することができる。
<img width="247" alt="Screenshot_20181212_124753.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/f0b98db0-7bd3-3a13-5a91-4cfeb2d7c5f1.png">
またそのソースコードがSailfish IDE（という名のQtCreator）にサンプルとして付属している。
<img width="960" alt="Screenshot_20181212_125206.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/c6fe7549-2e7c-cde6-0fde-a30ce0a41348.png">

#そんなこんなで
まぁ、そんなのを駆使(?)して自分で作ってみたのがこのアプリ。
[Qayttamaton Info](https://helicalgear.blogspot.com/p/qayttamaton-info.html)
<img width="414" alt="Screenshot_20170925_001.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/17cd60bf-1579-f58e-6161-d33ecd6fb333.png">
コード直してくれるヒト絶賛募集中(?)なのでゼヒお願い！

今年は海外ユーザからなんとこのアプリのパッチが飛んで来たという一大イベントがあったんだけど、すでに自分のブログにネタを書いてしまったのでここには書けなかった(ぉぃ

- [qayttamatonにpatchが飛んできた！！(YAH YAH YAH) ](https://helicalgear.blogspot.com/2018/06/patch.html)

#ちなみに
プロジェクトページで"Build & Run"の"Run"を選択すると下の方に"Sailfish OS Application Settings"というのがあって、"Enable receiving updates with Qt QmlLive"という項目があるのが見える。
ここにチェックを入れて実行すると下のようなウインドが出てくる。
<img width="414" alt="Screenshot_20181212_130546.png" src="https://qiita-image-store.s3.amazonaws.com/0/57538/f1476258-eb11-5ebe-ac43-e69abc18ff99.png">
この状態でQMLファイルを変更して「保存」すると、即時実行環境の方に送られて実行画面に反映される。まぁ、ライブコーディング向きなヤツかな。いつ使うのか知らないけど(笑)

#という事で
どういう事なんだって話ではあるけど、とりあえずSDK(とVirtualBox)をインストールするだけで開発環境が一式揃って、実機がなくてもサクサク開発ができるのでとてもラクチン。
まぁ、そもそも日本で端末が流通しているワケではない（まぁ、サポートされているXperia系の端末を買って自分でインストールする事は可能だけど）ので、フツーの人はアプリを作るモチベーション自体が出ない感じだとは思うけど（ぉぃ
まぁ、でも、一応日本に正式にローンチする予定はあるみたいなので、ちょこっと弄ってみてもいいんじゃなかろうか（ぇ

という事で今年も単なる俺得なネタだった。

明日は@task_jpさんが何か書いてくれるようなので、マトモなネタを読みたいヒトはそっちに期待してください！（ぉ