$ npm create tauri-app@latest ----rcNeed to install the following packages:create-tauri-app@4.3.0Ok to proceed?(y)y> npx> create-tauri-app --rc✔ Project name · menu-firststep✔ Identifier · com.menu-firststep.app✔ Choose which language to use for your frontend · TypeScript / JavaScript -(pnpm, yarn, npm, bun)✔ Choose your package manager · npm✔ Choose your UI template · React -(https://react.dev/)✔ Choose your UI flavor · TypeScriptTemplate created! To get started run:cd menu-firststepnpm installnpm run tauri android initFor Desktop development, run:npm run tauri devFor Android development, run:npm run tauri android dev
ひな形の動作確認
cd menu-firststepnpm inpm run tauri dev
実装
書きたいことは全部コメントに書いたので、コードを貼るだけ。
usetauri::menu::{MenuBuilder, MenuId, MenuItemKind};usetauri_plugin_shell::ShellExt;// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command#[tauri::command]fn greet(name:&str) ->String{format!("Hello, {}! You've been greeted from Rust!", name)}#[cfg_attr(mobile,tauri::mobile_entry_point)]pubfn run() {tauri::Builder::default().setup(|app|{// メニュー組み立て開始// ビルダーを作ってlet menu =MenuBuilder::new(app)// テキストメニューアイテムを追加// 第一引数は ID, 第二引数がラベル.text("open-url","Open URL")// チェックボックスメニューアイテムを追加// 第一引数は ID, 第二引数がラベル.check("toggle","Toggle")// アイコンメニューアイテム追加// 第一引数は ID, 第二引数がラベル, 第三引数がアイコン.icon("show-app","Show App", app.default_window_icon().cloned().unwrap(), )// ビルドしてメニュー完成.build()?;// app にメニューをセット app.set_menu(menu.clone())?;// 各メニューがクリックされたとき、// on_menu_event で定義した処理が走る。 app.on_menu_event(move|app, event|{// イベントからメニューアイテム ID を取得してlet MenuId(menu_id) = event.id();// メニューアイテム ID に応じた処理を実行するif menu_id =="open-url"{println!("Received open-url event.");// デフォルトブラウザで URL を開く app.shell().open("https://github.com/mikoto2000/TIL",None).unwrap();}elseif menu_id =="toggle"{println!("Received toggle event.");// トグルはこんな感じで CheckMenuItem が取得できるので、// それを使って ON/OFF を判別できるlet option_menu_item_kind = menu.get("toggle");ifletSome(MenuItemKind::Check(check)) = option_menu_item_kind {println!("Check is {:?}.", check.is_checked());}else{panic!("???");}}elseif menu_id =="show-app"{println!("Received show-app event.");}else{println!("Unknown event.");}println!("{:?}", event);});Ok(())}).plugin(tauri_plugin_shell::init()).invoke_handler(tauri::generate_handler![greet]).run(tauri::generate_context!()).expect("error while running tauri application");}
動作確認
npm run tauri dev
各メニューを押下すると標準出力にどれが押されたかが表示される
Open URL を押下すると、デフォルトブラウザで
mikoto2000/TIL
のページが表示される(コンテナ上だと失敗するので、これだけ Windows
で試した)
create table account (
id serial primary key not null,
name varchar,
age integer
);
insert into account
(
name, age
)
values
(
'mikoto2000', 2000
),
(
'mikoto2048', 2048
),
(
's2000', 25
);
実装
今回やりたいことをちょこちょこ試していたらよくわからない firststep
になってしまった…。
まぁ、最低限 select 文を投げるところは分かるでしょう。
src/main.rs:
use sqlx::postgres::PgPoolOptions;
use sqlx::Column;
use sqlx::Row;
use sqlx::TypeInfo;
#[tokio::main]
async fn main() -> Result<(), sqlx::Error> {
let pool = PgPoolOptions::new()
.max_connections(5)
.connect("postgres://postgres:postgres@localhost/postgres")
.await
.unwrap();
// 静的なタプルにマッピング
let row: Vec<(i32, String, i32)> = sqlx::query_as("SELECT id, name, age from account")
.fetch_all(&pool)
.await
.unwrap();
println!("{:?}", row);
// 動的に各 row, column を確認していく
let age: i32 = 2000;
let result = sqlx::query("SELECT id, name, age from account WHERE age >= $1")
.bind(age)
.fetch_all(&pool)
.await
.unwrap();
for row in result {
for column in row.columns() {
let type_info = column.type_info();
let type_name = type_info.name();
match type_name {
"INT4" => {
let value: i32 = row.try_get(column.ordinal()).unwrap();
print!("{}, ", value);
}
"VARCHAR" => {
let value: String = row.try_get(column.ordinal()).unwrap();
print!("{}, ", value);
}
_ => {
print!("unknown type {}", type_name);
}
}
}
println!()
}
Ok(())
}
cd {PLUGIN_ROOT}
npm run build
cd examples/tauri-app
npm run tauri android build -- --target aarch64 -d
adb.exe install \\wsl.localhost\Ubuntu-24.04\home\mikoto\project\TIL\tauri\2.0.0-beta\plugin\android\helloworld\tauri-plugin-helloworld\examples\tauri-app\src-tauri\gen\android\app\build\outputs\apk\universal\debug\app-universal-debug.apk
コマンド名の変更
ひな形では ping になっているので hello
に直していく。
数が多いので無言で変更点だけ列挙。
バックエンド
android/src/main/java/HelloWorldPlugin.kt:
--- HelloWorldPlugin_old.kt 2024-08-10 08:43:37.958074978 +0000
+++ HelloWorldPlugin.kt 2024-08-10 08:43:54.033949948 +0000
@@ -17,7 +17,7 @@
class HelloWorldPlugin(private val activity: Activity): Plugin(activity) {
@Command
- fun ping(invoke: Invoke) {
+ fun hello(invoke: Invoke) {
val ret = JSObject()
ret.put("message", "Hello, World!")
invoke.resolve(ret)
cd {PLUGIN_ROOT}
npm run build
cd examples/tauri-app
npm run tauri android build -- --target aarch64 -d
adb.exe install \\wsl.localhost\Ubuntu-24.04\home\mikoto\project\TIL\tauri\2.0.0-beta\plugin\android\helloworld\tauri-plugin-helloworld\examples\tauri-app\src-tauri\gen\android\app\build\outputs\apk\universal\debug\app-universal-debug.apk
cd {PLUGIN_ROOT}
npm run build
cd examples/tauri-app
npm run tauri android build -- --target aarch64 -d
adb.exe install \\wsl.localhost\Ubuntu-24.04\home\mikoto\project\TIL\tauri\2.0.0-beta\plugin\android\helloworld\tauri-plugin-helloworld\examples\tauri-app\src-tauri\gen\android\app\build\outputs\apk\universal\debug\app-universal-debug.apk
cd {PLUGIN_ROOT}
npm run build
cd examples/tauri-app
npm run tauri android build -- --target aarch64 -d
adb.exe install \\wsl.localhost\Ubuntu-24.04\home\mikoto\project\TIL\tauri\2.0.0-beta\plugin\android\helloworld\tauri-plugin-helloworld\examples\tauri-app\src-tauri\gen\android\app\build\outputs\apk\universal\debug\app-universal-debug.apk