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
Pyramid Makerの作成
Search
suzakutakumi
March 12, 2022
Technology
0
14
Pyramid Makerの作成
説明時に使うピラミッドをダウンロードできるWebサイトをReactで作成した
suzakutakumi
March 12, 2022
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
80
しゅみろん
suzakutakumi
0
98
trap-search
suzakutakumi
0
33
マークダウンパーサーの自作
suzakutakumi
0
89
絵文字ジェネレータボットの作成
suzakutakumi
0
120
send_discord
suzakutakumi
0
36
独自ドメインについて
suzakutakumi
0
25
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.1k
スターリンマージソート
suzakutakumi
0
140
Other Decks in Technology
See All in Technology
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
670
ServiceNow Knowledge Learning Rise up
manarobot
0
210
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
770
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
210
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
How GitHub (no longer) Works
holman
304
140k
Into the Great Unknown - MozCon
thekraken
10
990
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Designing for Performance
lara
601
67k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Docker and Python
trallard
34
2.7k
Designing the Hi-DPI Web
ddemaree
276
33k
Side Projects
sachag
451
41k
Web development in the modern age
philhawksworth
202
10k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Transcript
Pyramid Makerの作成 2022/03/12 NSEEM
自己紹介 HN: 朱雀 匠 ( 本名 : 鈴木 拓眞 )
学部 2 年 ( 新 3 年 ) Twitter: @suzakutakumi3 Portfolio: http://suzakutakumi.mydns.jp/
None
None
PyramidMakerとは 右図のようなピラミッド図を作成するツール 探しても無かったので作りました
作成手順 今回は React を用いて作成し、 GitHub Pages で公開した 1. canvas を用いてピラミッドを書く
2. 1 つの領域の高さを変えられるようにする 3. 領域を増やせるようにする 4. 領域の色を変えられるようにする 5. ダウンロードボタンをつける ※ CSS はわかりません
canvasを用いてピラミッドを書く 三角を領域の数だけ書いていく 高さから左下、右下の点を計算して三角を書いています context[i].beginPath(); context[i].moveTo(canvasWidth / 2, 0); //一番上 context[i].lineTo(canvasWidth /
2 - height * Math.sin(Math.PI / 6),height); //左下 context[i].lineTo(canvasWidth / 2 + height * Math.sin(Math.PI / 6),height); //右下 context[i].closePath(); context[i].stroke(); context[i].fillStyle = colors[i]; context[i].fill();
1つの領域の高さを変えられるようにする sizes( パーセンテージのリスト ) の数だけ、 map でスライダーを設置していきます 下のサイトを参考に、スライダーを複数設置しました https://qiita.com/taku_u9501/items/37c36cf9ad321b29302b {props.sizes.map((v,
i) => { return ( <input key={i} className="thmub" type="range" value={v} min="0" max="100" step="1" style={i === 0 ? {width: props.size, backgroundColor: "rgba(0, 0, 0, 0)" , border: "1px solid"}: { width: props.size, backgroundColor: "rgba(0, 0, 0, 0)" } } onChange={(e) => { props.onChange(e, i); }} /> ); })}
領域を増やせるようにする 色とサイズ ( 全部初期化 ) 、数をひとつ増やす <button onClick={() => {
setColors([...colors, "#eb7012"]); setSize([...Array(num)].map((_, i) => (100 / (num + 1)) * (i + 1))); setNum(num + 1); }} />
領域の色を変えられるようにする colors の数だけ map で input type=”color” を設置する {props.colors.map((c, i)
=> { return ( <> <input key={i} type="color" value={c} onChange={(e) => { props.onChange(e, i); }} /> <br /> </> ); })}
ダウンロードボタンをつける url に canvas の toDataURL 関数の返り値を設定する props.setURL(document.getElementById("canvas").toDataURL("image/png")); a タグに
href と download を設定する <a href={props.url} download="pyramid.png"> <button>ダウンロード</button> </a>
デモ https://suzakutakumi.github.io/PyramidMaker/
今後 - 領域を減らせるようにする - 枠線の大きさを変えられるようにする - 色に透明度を追加する