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
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Search
yud0uhu
October 27, 2023
Technology
2
2.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Vue Fes Japan 2023 LT登壇資料です
https://vuefes.jp/2023/sessions/yud0uhu
yud0uhu
October 27, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
610
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
180
ブログを自作した話
yud0uhu
1
29
Other Decks in Technology
See All in Technology
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
いま注目のAIエージェントを作ってみよう
supermarimobros
0
300
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
400
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
250
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
250
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
390
Practical Agentic AI in Software Engineering
uzyn
0
110
テストを軸にした生き残り術
kworkdev
PRO
0
210
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
306
46k
Designing Experiences People Love
moore
142
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Context Engineering - Making Every Token Count
addyosmani
3
48
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
RailsConf 2023
tenderlove
30
1.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Into the Great Unknown - MozCon
thekraken
40
2k
Transcript
1 Vue3/Electronで自作したマーク ダウンエディタをVue3/Tauriに リプレイスした話 Vue Fes Japan 2023
自己紹介 • 名前:0yu(おゆ) • 所属:合同会社DMM.com動画配信開発部 23新卒 • 出身:北海道 2 っっっz
yud0uhu
3 作ったもの
4
サポートする機能 • .txt .md形式での保存 • リアルタイムプレビュー • コードハイライト 5
6 作ったもの
7
追加で実装した機能 • 絵文字、マークダウンサジェスト • Mermaid.js記法の対応 8
概説 Electron 9
10
概説:Electron • Webフロントエンドの技術でデスクトップアプリが作れるGUIフ レームワーク • ChromiumとNode.jsがバイナリに組み込まれている ◦ 単一のJavaScriptコードベースを維持しつつ、クロスプラッ トフォームアプリが開発可能 •
開発元はGitHub社 ◦ VSCodeやSlackはElectronで作られている 11
12 概説 Tauri
概説:Tauri 13
概説:Tauri • RustとWebフロントエンドの技術でデスクトップアプリが作れる GUIフレームワーク • 一言で言うと「小さいElectron」 • Chromiumなどのブラウザを組み込んでおらず、OSのWebView機 能を呼び出すラッパー(WRY)を用いている ◦
軽量・高速に動いてくれることが特徴 ◦ ブラウザの脆弱性に関する対策を行う必要がない 14
15 WRY is 何?
WRY(Webview Rendering librarY) • 「OSに備わっているWebViewを使ってレンダリングする」機能 をラップしたクレート ◦ Windows 👉 WebView2
◦ Linux 👉 WebKitGTK ◦ macOS 👉 WKWebView 16
17 Core Ecosystem
Core Ecosystem 18
19 • tauri-build 👉実行可能なインストーラとバイナリを生成する • tauri-codegen 👉アイコンやシステムトレイなどのアセットを埋め込み、ハッ シュ化・圧縮する 👉コンパイル時にtauri.conf.jsonを解析し、Config構造体を生成 する
Core Ecosystem(1/3)
20 • tauri-macros 👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する • tauri-runtime 👉TauriとWebViewライブラリ(WRY,TAO)の連携を行う層 • tauri-utils
👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する Core Ecosystem(2/3)
21 TauriのWebView部分を支える外部モジュール • WRY 👉WebViewを扱うためのクレート • TAO 👉Windowを操作するためのクレート Core Ecosystem(3/3)
22 Tauriのプロセスモデル
23 Tauriのプロセスモデル
24 Tauriの プロセス間通信の仕組 み
25 プロセス間通信:具体例
プロセス間通信:具体例 26 // … #[tauri::command] fn generate_mermaid_img(code: String) -> String
{ let encoded_code = encode_to_base64(&code); let response = ApiResponse { img: format!("https://mermaid.ink/img/{}", encoded_code), }; format!("{}", response.img) }
プロセス間通信:具体例 27 // … fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![generate_mermaid_img]) .run(tauri::generate_context!())
.expect("error while running tauri application"); }
28 プロセス間通信:具体例
プロセス間通信:具体例 29 import { invoke } from "@tauri-apps/api"; // …
const generateMermaidImg = async (code: string) => { try { const response = await invoke("generate_mermaid_img", { code: code }); return response; } catch (error) { // …
30 Tauriの セキュリティ
31 Tauriのセキュリティ • tauri/allowlist 👉アプリケーション内でのJSの実行・API呼び出しを制御するた めの機構 👉使用する機能を個別に有効化、無効化できる
tauri/allowlist:具体例 "tauri": { "allowlist": { "all": false, ... "dialog": {
"open": true, "save": true }, "fs": { "all": true, "writeFile": true }, ... }, 32
tauri/allowlist:具体例 <script setup lang="ts"> import Header from "./components/Header.vue"; import MarkdownEditor
from "./components/MarkdownEditor.vue"; import { ref } from "vue"; import { open, save } from "@tauri-apps/api/dialog"; import { readTextFile, writeFile } from "@tauri-apps/api/fs"; import { appDir } from "@tauri-apps/api/path"; 33
tauri/allowlist:具体例 const openFile = async () => { try {
const selected = await open({ directory: false, multiple: false, defaultPath: await appDir(), filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); 34
tauri/allowlist:具体例 if (selected !== null) { if (!Array.isArray(selected)) { const
filePath = selected; const contents = await readTextFile(filePath); onMarkdownUpdate(contents); } } } catch (error) { // … 35
tauri/allowlist:具体例 const saveFile = async () => { try {
const result = await save({ defaultPath: "untitled.txt", filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); if (result) { const fileContents = markdownText.value; await writeFile({ path: result, contents: fileContents ? fileContents : "", }); 36
37 パフォーマンスを計測 してみる
38 パフォーマンスを計測してみる 比較 Tauri Electron インストーラサイズ 3.1MB 52.1MB メモリ利用量 180MB
462MB 起動速度 0.39秒 0.8秒 レンダリング WRY Chromium
39 実際のアプリケーションサイズ・実行時間の比較 パフォーマンスを計測してみる 比較 Tauri Electron 起動速度 0.49秒 0.58秒 アプリケーションサ
イズ 31.1MB 588MB
最終的な実装 40 https://github.com/yud0uhu/markdown-editor-tauri-web
41 ご静聴ありがとうござ いました !