Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TauriでカスタマイズしたTODOアプリを作ってみる
Search
Yohei Iino
November 22, 2022
Technology
0
110
TauriでカスタマイズしたTODOアプリを作ってみる
TauriでカスタマイズしたTODOアプリを作ってみる
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
26
Flutter HooksとRiverpodの解説
wheatandcat
0
38
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
99
App Routerの紹介
wheatandcat
0
41
Flutter × GraphQLでアプリを作ってみる
wheatandcat
0
150
T3 Stack + Supabaseでアプリを作ってみる
wheatandcat
0
130
Supabaseの紹介
wheatandcat
0
130
tRPCの紹介
wheatandcat
0
110
Plasmoの紹介
wheatandcat
0
52
Other Decks in Technology
See All in Technology
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
How to Ace a Technical Interview
jacobian
274
23k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
How GitHub (no longer) Works
holman
305
140k
Writing Fast Ruby
sferik
623
60k
Facilitating Awesome Meetings
lara
46
5.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Thoughts on Productivity
jonyablonski
64
4.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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
ストアで公開する予定
ご清聴ありがとうございました