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
180
TauriでカスタマイズしたTODOアプリを作ってみる
TauriでカスタマイズしたTODOアプリを作ってみる
Yohei Iino
November 22, 2022
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
42
作成中のFlutterアプリの中間発表
wheatandcat
0
41
最近読んだ技術書を簡単紹介
wheatandcat
0
62
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
120
Firebase App Checkを実装したので紹介
wheatandcat
0
110
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
280
Flutter HooksとRiverpodの解説
wheatandcat
0
390
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
340
App Routerの紹介
wheatandcat
0
100
Other Decks in Technology
See All in Technology
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
630
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
300
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
140
alecthomas/kong はいいぞ
fujiwara3
6
1.3k
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
4.6k
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
200
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
120
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
210
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
160
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.2k
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
270
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
220
Featured
See All Featured
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
223
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
A Tale of Four Properties
chriscoyier
160
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Facilitating Awesome Meetings
lara
54
6.5k
Gamification - CAS2011
davidbonilla
81
5.4k
RailsConf 2023
tenderlove
30
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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
ストアで公開する予定
ご清聴ありがとうございました