このページでは

Qt Quick デモ - RESTful API クライアント

RESTful API QMLクライアントの作成例。

カラーパレットサービスGUI

この例では、基本的なQML RESTful APIクライアントを、架空のカラーパレットサービスを用いて作成する方法を示します。このアプリケーションは、選択したサーバとRESTfulな通信を行い、データの要求や送信を行います。RESTサービスはQML要素として提供され、その子要素はサーバーが提供する個々のJSONデータAPIをラップしています。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳しくは、Qt Creator:Tutorialを参照してください:ビルドと実行を参照してください。

アプリケーションの機能

このサンプルは以下の基本機能を提供します:

  • 通信するサーバーの選択
  • ユーザーと色のリスト
  • ユーザーのログインとログアウト
  • 色の変更と新規作成
サーバーの選択

アプリケーションの起動時に、カラーパレットサーバーが通信できる定義済みのオプションが表示されます:

選択されると、RESTful APIクライアントはカラーAPIにテストHTTP GETを発行し、サービスがアクセス可能かどうかをチェックします。

選択可能な2つのサーバーを表示するGUI

2つの定義済みAPIオプションの大きな違いは、Qt-based REST API server exampleは色を変更できるステートフルなアプリケーションであるのに対し、reqres.in はステートレスなAPIテストサービスであるということです。言い換えれば、reqres.in バックエンドを使用する場合、色を変更しても永続的な影響はありません。

ユーザーと色のリスト

ユーザーと色はサーバーサイドでページ分割されたリソースです。これは、サーバーがページと呼ばれる塊でデータを提供することを意味します。UIのリストはこのページ分割を反映し、ページ上のデータを表示します。

UI上でデータを表示するには、標準的なQMLビューを使用します:

ListView {
    id: colorListView

    model: root.colors.data

モデルはサーバーから受け取ったJSONデータのリストです。

ログイン

ログインはログインポップアップによって提供されるログイン機能によって行われます:

userMenu.userLoginService.login({"email" : userInfo.modelData.email,
                    "password" : "apassword",
                    "id" : userInfo.modelData.id})

ボンネットの下では、ログインはHTTP POSTリクエストを送信します。成功したレスポンスを受信すると、認証トークンがレスポンスから抽出され、トークンを必要とする後続のHTTPリクエストで使用されます。

ユーザーを一覧表示するGUI

色の編集

色の編集と追加はポップアップで行います:

色を編集するためのGUI

色の変更をサーバにアップロードするには、ユーザがログインしている必要があることに注意してください。

RESTの実装

この例では、個々のリソース要素からRESTサービスを構成する1つの方法を示しています。この例では、リソースはページ分割されたusercolor リソースとログインサービスです。リソース要素は、ベースURL(サーバーURL)と共有ネットワーク・アクセス・マネージャーによって結合されています。

REST サービスの基本はRestService 要素で、その子項目が実際のサービスを構成します:

RestService {
    id: paletteService

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colors
        path: "unknown"
    }

    BasicLogin {
        id: colorLogin
        loginPath: "login"
        logoutPath: "logout"
    }
}

インスタンス化すると、RestService 要素は子要素をループし、同じネットワーク・アクセス・マネージャーを使用するように設定します。こうすることで、個々のリソースは、サーバーのURLや認証トークンなど、同じアクセス詳細を共有することができます。

実際の通信は、HTTP REST APIに特化した便利な機能を実装し、必要に応じてQNetworkRequestQNetworkReply の送受信を効果的に処理するレストアクセスマネージャーで行われます。

ソースファイル

サンプルプロジェクト @ code.qt.io

すべてのQtサンプルと Qt Quick サンプルとチュートリアルも参照してください

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.