To Doリスト
あらゆるプラットフォームでネイティブのように見えるアプリケーションを作成する方法を示す、To DoリストアプリケーションのQML実装です。
「To Do List」は、どのプラットフォームでもネイティブアプリのように見えるTo-Doリストアプリケーションのサンプルです。このサンプルは、Qt Design Studio およびQt Creator の両方で実行および編集が可能です。カスタムスタイルの作成と使用方法、および設定を使用してアプリケーションの外観や動作を制御する方法を示しています。また、デリゲート上で簡単なドラッグ&ドロップ動作を実装する方法も紹介しています。 このアプリケーションでは、デバイス上のアイテムを保存するためにローカルストレージを使用し、パブリックAPI(「ランダムタスク」機能)からデータを取得するためにXMLHttpRequestを使用しています。ビューはStackView コンポーネントによって制御されています。
例の動作確認
このサンプルは、以下の手順で実行できます。
- Qt Creator
Welcome モードを開き、Examples からこのサンプルを選択してください。詳細については、「Qt Creator :チュートリアル:ビルドと実行」を参照してください。
- Qt Extension for Visual Studio Code
「Command Palette 」から「Qt: Open Qt examples 」コマンドを実行し、リストからこのサンプルを選択します。詳細については、「Qt Extension for Visual Studio Code :チュートリアル:ビルドと実行」を参照してください。






アプリケーションスタイルの選択
本アプリケーションは、ターゲットプラットフォームに応じて異なるスタイルに対応しています。各プラットフォーム(Windows、Android、iOS、macOS)では、「CustomStyle」、「Basic」、「Material」、「Universal」が利用可能です。 WindowsスタイルはWindowsでのみ、iOSスタイルはiOSでのみ利用可能です。利用可能なスタイルの一覧は、SettingsView の「Style」というサブページに掲載されています。現在使用中のスタイルは、同じ場所から変更できます。変更を反映するには再起動が必要です。アプリケーションは、「ToolTip 」というメッセージでユーザーにこのことを通知します。
テーマの変更
各スタイルでは、ダークテーマとライトテーマもサポートされています。 テーマは、「SettingsView 」の「Theme」サブページから変更できます。すべてのスタイルでユーザーが手動でテーマを変更できるわけではありません。例えば、iOSではこのオプションは利用できません。その場合、テーマはシステムのデフォルト設定に従って変更されます。アプリを初めて起動した際は、システムのテーマが使用されます。
アプリ設定からの動作制御
アプリの動作やスタイルは、SettingsView から変更できます。この設定では、以下の項目を変更できます:
- スタイル
- テーマ
- フォントサイズ
- タスクの最大数
- 完了したタスクを自動的に削除するかどうか
タスクリストの実装
このアプリケーションには、以下の3つのリストがあります:
- 「今日のタスクリスト」 → 期限日が今日の日付となっているタスク。
- 今週のタスク一覧 → 今後7日以内に期限を迎えるタスク。
- 「今後のタスク」 → 上記のリストのいずれにも該当しないタスク。
タスクは、アプリケーションの起動時に各リストモデルに割り当てられます。もちろん、実行時(期限日が変更された場合など)には、タスクがリストモデル間を移動することも可能です。各リストの定義は `TasksList.qml ` および `TasksListForm.ui.qml` で行われ、インスタンスは `TasksListsView.qml/TasksListsViewForm.ui.qml` で作成されます。
ListModel {
id: todayTasksListModel
}
ListModel {
id: thisWeekTasksListModel
}
ListModel {
id: laterTasksListModel
}
Column {
id: column
anchors.fill: parent
spacing: 14
TasksList {
id: todayTasks
width: column.width
maxHeight: 180
listModel: todayTasksListModel
headerText: qsTr("Today")
tasksCount: todayTasksListModel.count
}
TasksList {
id: thisWeekTasks
width: column.width
maxHeight: column.height - y - 60
listModel: thisWeekTasksListModel
headerText: qsTr("This week")
tasksCount: thisWeekTasksListModel.count
}
TasksList {
id: laterTasks
width: column.width
maxHeight: column.height - y
listModel: laterTasksListModel
headerText: qsTr("Later")
tasksCount: laterTasksListModel.count
}
}リストモデルへのデータの投入は、TasksListsView.qml およびComponent.onCompleted で行われます。
function createTasksLists() : void {
var tasks = Database.getTasks()
var currentDate = new Date()
var format = Qt.locale().dateFormat(Locale.LongFormat)
var dateStr = currentDate.toLocaleDateString(Qt.locale(),format)
tasks.forEach( function(task){
if (task.date === dateStr) {
todayTasksModel.append(task)
} else if (checkThisWeekDate(task.date)) {
thisWeekTasksModel.append(task)
} else {
laterTasksModel.append(task)
}
})
}
Component.onCompleted: createTasksLists()スワイプ、ドラッグ&ドロップの動作
リストビューは、TasksListDelegate をデリゲートとして使用しています。このデリゲートはSwipeDelegate であり、ユーザーがアイテムをスワイプしてハイライト表示(アイテムはリストの一番上に移動)したり、削除したりできるようにします。 また、ユーザーがタスクを「完了」としてマークしたり(その項目はリストの一番下に移動されます)、項目をドラッグ&ドロップしてリスト内の特定の位置に移動したりすることも可能です。これらの動作の実装は、TasksListDelegate.qml で行われています。
ローカルストレージの使用
ローカルストレージは、タスク項目をSQLiteデータベースに読み書きするために使用されます。この機能およびその他のヘルパー関数の実装は、シングルトンオブジェクトであるDatabase.qml 内で行われています。
property var _db
function _database() {
if (_db) return _db
try {
let db = LocalStorage.openDatabaseSync("ToDoList", "1.0", "ToDoList app database")
db.transaction(function (tx) {
tx.executeSql(`CREATE TABLE IF NOT EXISTS tasks (
task_id INTEGER PRIMARY KEY AUTOINCREMENT,
task_name,
task_dueDate TEXT,
task_dueTime TEXT,
task_notes TEXT,
done INTEGER,
highlighted INTEGER
)`);
})
_db = db
} catch (error) {
console.log("Error opening databse: " + error)
};
return _db
}
function addTask(taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted) {
let results
root._database().transaction(function(tx){
tx.executeSql(`INSERT INTO tasks (task_name, task_dueDate, task_dueTime,
task_notes, done, highlighted) VALUES(?,?,?,?,?,?);`,
[taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted])
results = tx.executeSql("SELECT * FROM tasks ORDER BY task_id DESC LIMIT 1")
})
return results.rows.item(0).task_id
}公開APIからデータを取得するためのXMLHttpRequestの使用
XMLHttpRequestは、公開APIへリクエストを送信し、応答データを取得するために使用されます。このアプリケーションでは、実行すべきランダムなタスクを返すことができるboredapiを使用しています。そのタスクは、本日のタスクリストに追加されます。
function sendHttpRequest() : void {
var http = new XMLHttpRequest()
var url = "https://www.boredapi.com/api/activity";
http.open("GET", url, true);
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if (http.readyState == 4) {
if (http.status == 200) {
let object = JSON.parse(http.responseText.toString());
let currentDate = new Date()
let format = Qt.locale().dateFormat(Locale.LongFormat)
addTask(todayTasksModel, object.activity,
currentDate.toLocaleDateString(Qt.locale(), format), "","")
} else {
console.log("Failed to fetch a random TODO item; the API provider might be down")
}
}
}
http.send();
}ソースファイル
関連項目: すべての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.