HaikuでGUIアプリを開発する

# Haikuとは

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/43c1a768-34d1-2075-9be4-06848e47943b.png)

Haikuといっても、Sketchファイルからアニメーションを作るツールのことではありません。オープンソースのOSの方です。紛らわしいので、ときどき Haiku OS と表記されることがありますが、正しくは Haiku です。UIが特徴で、BeOSを再現することを目指しているとのことです。本記事では、このOSをVirtualBoxの仮想マシン上にインストールして、GUIアプリの開発を行います。言語はC++、GUIフレームワークはQt5を使用します。開発環境の構築は、Haikuのパッケージマネージャーから簡単にインストールできますので心配いりません。

ただし、あらかじめお断りしておきますが、仮想マシンで動かすHaiku自体は比較的快適なものの、仮想マシンで動かすHaiku上で動かす開発環境（Qt Creator）の動作がかなり重いです。小さなアプリ開発ならあまり問題になりませんが、大きめのプロジェクトを開発しようとすると、ちょっとカーソルを移動しただけで20秒くらい待たされるなどが頻繁に発生するので、そういうのは控えましょう。

## ダウンロード

本家Haikuサイトのインストールガイドのページを開きます。
https://www.haiku-os.org/get-haiku/installation-guide/
適当なミラーサイトから64-bitと書かれたzipファイルをダウンロードします。

haiku-r1beta1-x86_64-anyboot.zip を展開すると haiku-release-anyboot.iso が現れます。

まず、VirtualBoxの仮想マシンの新規で、Other/Unknownの仮想マシンを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/847dce19-2dff-9a50-459d-cb4bd9566916.png)

## 仮想マシンを作る

メモリサイズは適当です。4GBくらいでいいと思います。仮想ハードディスクの容量は10GBもあれば充分です。

実機にインストールするなら、ダウンロードしたisoファイルをDVD-R等に焼きますが、本記事ではVirtualBoxにインストールしますので、仮想DVDドライブにこのファイルを使う設定をします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/7933ee11-dbf7-7a32-7f1a-4de2158aae63.png)

ネットワークの設定は「NAT」でいいのですが、HaikuのネットワークドライバとVirtualBoxの仮想ネットワークアダプタの動作がいまいち不安定な感じがします。高度な設定を開くと、アダプタータイプを選べますので、「PCnet-PCI II」か「PCnet-FAST III」を選んで、後で調子が悪そうだったらアダプタータイプを変更してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/985a0d6a-339c-89da-799f-0944c839d266.png)

## Haikuをインストールする

インストーラー起動中の画面です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/e8d87f83-dabb-0dd8-f3a3-91c6428dc252.png)

「Welcome to Haiku!」という画面が表示されたら、「日本語」を選んで、「インストーラーを実行」ボタンを押します。

進んでいくと、「インストール可能なパーティションが見つかりません」というメッセージが出ると思いますが、焦らずにOKを押します。

「パーティションを設定...」ボタンを押し、Be File System でフォーマットします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/37b3bd6f-6758-2128-05f3-0c1b9465da81.png)

インストール先を変更し、「開始」ボタンを押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/e671dffc-d519-03f3-e179-6803f11a93bf.png)


インストールはすぐに終わりますので、最後に「再起動」ボタンを押したらインストール終了です。

## Haikuを起動する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/d3b360ed-bb37-b351-1519-dcc4eda244b5.png)

右上の青い葉っぱが描かれたところが、いわゆるスタートメニューです。とりあえず、ターミナルを開きましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/05ee7c8c-fca3-9497-bd34-be45689a4acc.png)

適当なサイトにpingを送り続けます。通信しないで放っておくと、時々ネットワーク接続が切れていることがありますので、このターミナルのウィンドウはping送りっぱなしで開いたままにしておくのがおすすめです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/ec152630-585c-60c5-c1a4-c073380715c5.png)

## 開発環境をインストールする

次に、メニューから「HaikuDepot」を開きます。これがパッケージマネージャです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/9bbd92cf-105a-a681-1c79-ccd4046c06a1.png)

とりあえず、リポジトリの更新を行います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/0252afa8-3b95-93ab-cdc2-3a4690f0a8e5.png)

「開発用パッケージ」を表示するように、メニューを選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/992110c3-f557-4655-4b46-a5455da4c704.png)

検索ボックスに「qt creator」と入力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/3576197e-04db-57ba-86ee-92bc734cfef9.png)

これをクリックしてインストールします。追加パッケージをいくつかインストールするかという問い合わせがありますので、「Apply changes」ボタンを押して、続行します。

Qt Creatorのインストールが終わったら、HaikuDepotの上部にある「おすすめパッケージのみ表示」というチェックボックスをオフにします。続いて、検索ボックスに「qt5 devel」と入力し、その名の通りのパッケージをインストールします。もしこれが出ない場合、上に書いた「開発用パッケージ」の表示設定を忘れていないか確認してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/0852cf14-f708-d927-25f4-6a075d183b27.png)

二つ目のターミナルを開いて`qmake -v`を実行します。QMakeとQtのバージョンが表示されたら成功です。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/fa2906f6-73c7-2637-c34a-19269cc4faac.png)

メニュー → Applications → Qt → Qt Creator を選択して起動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/4a5db44f-ed43-0848-6648-4a3dfc0202c7.png)

ウィンドウが大きすぎて画面からはみ出るかもしれません。タイトルバーの右上の最大化ボタンを押すか、メニューの Preference → Screen で画面解像度を広くする設定をしましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/d9bfb872-8f45-a2eb-eaab-444eccb9f3d5.png)

Qt Creator のメニューバー、Tools → Options... を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/fb624a06-f830-c585-b9c6-2fc94645643d.png)

オプションウィンドウの「Kits」、「Qt Versions」タブを開くと、赤い感嘆符とともに、「Qt 5.12.0 in PATH () /bin/qmake」と表示されると思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/849be73b-3b20-9488-78c4-daa8996e0b98.png)

余談ですが、普通は赤い感嘆符はエラーの印なので、このままではダメなはずです。しかし、なぜかこのままで動いてしまいますので、気にしないことにします。エラーメッセージをよく見ると、ABI（呼出規約）が間違っているというエラーのようです。「x86-linux-generic-elf-64bit」でなければいけないのに、「x86-unknown-x86-unknown-unknown-unknown」になっているので、これがいけないようです。繰り返しますが、これでもなぜか使えてしまえるようですので、そのままにしておきます。

「Kits」タブを開いてみると、やはり赤い感嘆符が表示されていますが、ここでは、コンパイラの設定としてGCCが登録されていることを確認すれば大丈夫のようです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/88b1c181-b92e-c69d-9282-4f3f71637ad8.png)

OKボタンを押してQt Creatorの最初の画面に戻ります。

## 初めてのQtプロジェクトを作る

ボタンが3つ並んでいるうちのいちばん上「Projects」を押します。続いて「＋ New Project」ボタンを押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/75cb8413-a627-14e2-febf-40743aabbe25.png)

「Qt Widgets Application」を選択して「Choose...」ボタンを押します。

プロジェクト名を決める画面になって、untitled と表示されています。初めてのプロジェクトなので、そのままでも構いませんし、TestやHogeやHelloなど、適当な名前を付けて、「Next>」ボタンを押します。

Kit Selection の画面では、特に変更することはありませんので、そのまま「Next>」ボタンを押します。

Class Information の画面も変更はありません。「Next>」ボタンを押します。

プロジェクト作成の確認画面になります。ファイルが5つほど生成されることがわかります。そのまま「Finish」ボタンを押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/23822fdd-551a-635b-9487-99b5dc41a54e.png)

左下の▶ボタンを押すとビルドと実行が行われます。何もないウィンドウが表示されたら成功です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/c76844d4-c141-a9ac-2645-19b926b730ff.png)

## 簡単なGUIの機能を作る

プロジェクトのツリーの中から、Forms/mainwindow.ui をダブルクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/dffeb5e0-82fc-115d-25cd-f1b431baa0b8.png)

「PushButton」をドラッグして、ウィンドウ上に配置します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/6695674d-c47c-75a2-aa96-7a4f8428edac.png)

リストを下の方へスクロールすると「Label」がありますので、これをドラッグして、ウィンドウ上に配置します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/109f4df8-a299-0e59-29da-9d1bc8a1b896.png)

配置したPushButtonを右クリックして、「Go to slot...」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/84857c0b-9473-d00e-a355-70f64be1bb71.png)

QAbstractButton::clicked()が選択された状態になっていると思いますので、このままOKボタンを押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/86b24d9a-98fc-6439-bc6e-642290b1f2c9.png)

void MainWindow::on_pushButton_clicked() という関数が追加されます。ここで一度、プロジェクトのビルドを行っておきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/b948306c-4605-90b5-051a-e846e613954b.png)

ボタンが押されたときの動作を記述します。

``` mainwindow.cpp
void MainWindow::on_pushButton_clicked()
{
    static int value = 0;
    value++;
    QString text = QString::number(value);
    ui->label->setText(text);
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/35b987db-cc22-9e76-c29b-a0154614d31a.png)

## 完成

左下の▶ボタンを押してビルドと実行します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/61222/41472dc5-fa72-2b05-cecb-b82cd126db33.png)

ボタンを押す度に、ラベルの数値が更新されます。