Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TauriでカスタマイズしたTODOアプリを作ってみる
Yohei Iino
November 22, 2022
Technology
0
1
TauriでカスタマイズしたTODOアプリを作ってみる
TauriでカスタマイズしたTODOアプリを作ってみる
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
mswでフロントエンドのインテグレーションテストを実装する
wheatandcat
0
4
zxとRetoolでコード健全性の可視化のダッシュボードを作成する
wheatandcat
0
24
opentelemetry-goとGCPでパフォーマンス解析
wheatandcat
0
24
Cloud Runの紹介
wheatandcat
0
52
Denoの紹介
wheatandcat
0
50
Prismaを試してみた
wheatandcat
0
380
CSSのclip-pathの紹介
wheatandcat
0
130
振り返りアプリを作ってみた話
wheatandcat
0
420
React Native + Firestoreで運用しているアプリをRESTful APIからGraphQLに移行した話
wheatandcat
0
74
Other Decks in Technology
See All in Technology
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
800
スクラム導入して変わったチーム、組織のありかた
yumechi
0
300
クックパッドがRubyKaigiに20名以上の社員で参加するわけ
midorikawa
0
470
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.7k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
0
160
Cloudflare Workersで動くOG画像生成器
aiji42
1
500
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
400
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
510
AI Builderについて
miyakemito
1
1k
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
初めてのデータ移行プロジェクトから得た学び
tjmtmmnk
0
420
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
250
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1020
430k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Into the Great Unknown - MozCon
thekraken
2
310
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Navigating Team Friction
lara
177
12k
Designing Experiences People Love
moore
130
22k
Statistics for Hackers
jakevdp
785
210k
A better future with KSS
kneath
230
16k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.6k
Code Reviewing Like a Champion
maltzj
508
38k
How STYLIGHT went responsive
nonsquared
89
4.2k
Transcript
Tauri でカスタマイズしたTODO アプリを作ってみる Press Space for next page
自己紹介 📝 飯野陽平(wheatandcat ) 🏢 フリーランスエンジニア(シェアフル株式会社CTO ) 💻 Blog: https://www.wheatandcat.me/
🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
Tauri とは Tauri はRust で作成されたクロスプラットフォームでデスクトップアプリが作成できるフレームワーク デスクトップアプリのネイティブ部分のコードはRust 、フロントエンドはWeb の技術を使用できる なのでフロントエンドに関しては以下を使用できる HTML
React Next.js Svelte 開発の領域的には、Electron と同じ Tauri Rust
Electron との比較 違いについては以下を参照 Tauri 1.0 が正式リリース!概要や特徴、Electron との違いを解説 | アンドエンジニア 主な違い以下の部分
Electron は、Chromium をそのままバンドルしているがWebView エンジンのwry を使用している Rust で実装されており、バンドルサイズ、消費CPU 、セキュリティ共に改善されている Electron
TODO アプリを作って みた Tauri を使用してTODO アプリを作ってみた。 GitHub https://github.com/wheatandcat/todo 使用技術 Tauri
React markdown-to-jsx Tailwind CSS
モチベーション 仕事のTODO リストは今までslack のDM に書いて運用していた 雑な運用でリストで書き出して、タスクが終わったら「✔」をつけるのみで運用 他のTODO アプリも試したが無駄にリッチなアプリが多くて続かなかった ブラウザだと、他の作業で間違って消したりするのでデスクトップアプリで作りたかった 仕事のTODO
だとセンシティブな内容が多かったので、サーバー通信は避けたい なので、自分用にカスタマイズしたTODO アプリを作ってみた
Tauri での開発① 以下でブラウザでローカル環境を起動 これだとブラウザで起動するので、ブラウザのDevTool も活用できる。 $ yarn dev
Tauri での開発② 以下でデスクトップアプリでローカル環境を起動 これだとデスクトップアプリの状態で起動するので、ネイティブの機能をデバッグする場合は、 こちらで起動。 ホットリロードも有効なので、快適に開発できる。 $ yarn tauri dev
Tauri での開発③ 以下でデスクトップアプリをビルド デフォルトだとhost のデバイの環境で起動できるアプリにビルド。 以下のオプションで各バイナリに変換可能。 binary options $ yarn
tauri build
frontend の開発 frontend はReact で作成 コード Markdown の表示はmarkdown-to-jsx を使用 コード
Markdown のparse はremark-parse を使用 checkbox 部分のパースする自前で作成 コード
ネイティブ機能の開発 アプリのmenu は以下で作成 コード 詳細は、こちら menu からfrontend 側の通信は、以下のように作成 ネイティブから送信 コード
frontend で受け取り コード frontend 側から、Tauri API を使用してネイティブの機能も活用可能 @tauri-apps/api | Tauri Apps
まとめ Tauri での開発は快適 React 経験者なら、ほぼ学習コスト無しで作れる ネイティブ機能の部分がRust なので書きやすい ビルドが通れば、ほぼOK な感じの安心感がある ちゃんと開発できたらApple/Windows
ストアで公開する予定
ご清聴ありがとうございました