<style>
.reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", Meiryo, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
text-transform: none !important;
}
.color-yellow{
color: yellow;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
padding: 10px 0;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.reveal .slides span {
text-align: left;
display: inline-block;
}
p, li {
font-size: 0.88em !important;
}
li>p {
font-size: 1em !important;
}
</style>
# 2022-08-19 ツール勉強会
###### tags: `Desmos` `prezentation`
---
# Desmosと初めてのChrome拡張
[堀川 由人, ほりたみゅ, @Hyrodium](https://hyrodium.github.io)
----
## おしながき
Desmosの話をします
* 自己紹介
* Desmosで出来ること
* Desmosの不満点
* Chrome拡張を作った話
* まとめ
---
## 自己紹介
Desmosがスキ！(9年目)
[ドキュメント翻訳](https://desmos.s3.amazonaws.com/Desmos_User_Guide_JA.pdf)もやってました
ご褒美に貰ったTシャツ↓
----
### ペットの亀の卵を食べた話
 
美味しかったです
---
## Desmosで出来ること
* 陽関数 $y=f(x)$
* 陰関数 $0=f(x,y)$
* 媒介変数曲線 $(f(t),g(t))$
* 微積分
* データフィッティング
----
### 陽関数 $y=f(x)$
<iframe src="https://www.desmos.com/calculator/kbkn9cf1ya" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 陰関数 $0=f(x,y)$
<iframe src="https://www.desmos.com/calculator/zqm4bypwqn" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 媒介変数曲線 $(f(t),g(t))$
<iframe src="https://www.desmos.com/calculator/tsif8n39mc" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 微積分
<iframe src="https://www.desmos.com/calculator/c9rrxjgiey" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
(微分もあるよ)
----
### データフィッティング
<iframe src="https://www.desmos.com/calculator/qrdbrcfnsl" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
---
## Desmosの不満点
* 標準で使える色が6色しかない
* 画像サイズが圧縮されて解像度が下がる
* オンラインでしかグラフを保存できない
----
### 色数が少ない
6色しかない
----
### 画像圧縮問題
容量削減のために画像が不可逆圧縮されてしまう
 
https://www.desmos.com/calculator/fe7sjsg6wd
----
### オンラインでしか保存・共有できない
Desmosはグラフの保存・共有ができて便利！
しかし…
* Staff picksに選ばれると恥ずかしい
* テキスト保存してバージョン管理したい
---
## Chrome拡張を作った話
* 開発期間
* Chromeのconsole
* 拡張機能で出来ること
[あなたとDesmos,今すぐインストー
ル](https://chrome.google.com/webstore/detail/desmos-text-io/ndjdcebpigpfidnilppdpcdkibidfmaa)
 ←ロゴ
----
### 開発期間
作業自体は1週間くらい
* 2022/07/08 ConsoleからDesmosを弄る方法を知る
* 2022/07/30 Chrome拡張を作り始める
* 2022/08/05 主要な機能が完成
* 2022/08/06 仕上げ
* 2022/08/07 Chrome Web Storeに登録申請
* 2022/08/10 Chrome Web Storeに登録完了
----
### Chromeのconsole
`Ctrl+Shift+I`でConsoleが開ける
----
### 拡張機能で出来ること
グラフをテキスト(json)としてimport/exportできる！
[デモ (YouTube)](https://www.youtube.com/watch?v=RnQ7_H4XFGY)
*前述の不満点を全て解決！*
* 標準で使える色が6色しかない
→ `#FF00FF`の形式で色を設定可能
* 画像サイズが圧縮されて解像度が下がる
→ 画像urlを直接埋め込めばOK (:no_good: gif, apng)
* オンラインでしかグラフを保存できない
→ git管理でも何でもござれ
---
## まとめ
* Desmos大好き！
* 拡張機能は1週間で作れる！
* [私の拡張機能](https://chrome.google.com/webstore/detail/desmos-text-io/ndjdcebpigpfidnilppdpcdkibidfmaa)をインストールしてください！
LT会でChrome拡張の作り方を話したいが…体系的な知識が習得できていない
試行錯誤は[zenn.devのスクラップ](https://zenn.dev/hyrodium/scraps/463f00275860a5)までどうぞ
{"metaMigratedAt":"2023-06-17T06:43:09.487Z","metaMigratedFrom":"YAML","title":"2022-08-19 ツール勉強会","breaks":true,"lang":"ja","dir":"ltr","robots":"noindex, nofollow","slideOptions":"{\"theme\":\"white\",\"transition\":\"slide\"}","contributors":"[{\"id\":\"41421433-16a1-4a57-ac11-6f7b7becb765\",\"add\":4972,\"del\":706}]"}