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
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
Search
やじはむ
August 30, 2023
Technology
0
1k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料
やじはむ
August 30, 2023
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
19
8.1k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
3
1.7k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
3.9k
Other Decks in Technology
See All in Technology
How to Think Like a Performance Engineer
csswizardry
4
590
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
簡単に始めるSnowflakeの機械学習
nayuts
1
190
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
750
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
Speed Design
sergeychernyshev
9
270
How GitHub Uses GitHub to Build GitHub
holman
471
290k
RailsConf 2023
tenderlove
16
720
Automating Front-end Workflow
addyosmani
1362
200k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Atom: Resistance is Futile
akmur
261
25k
Practical Orchestrator
shlominoach
185
10k
A Tale of Four Properties
chriscoyier
155
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Designing for humans not robots
tammielis
247
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Transcript
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた 2023.8.30 @yajihum
# 自己紹介 • やじはむ:矢島千紘 →最近改名しました! • 株式会社 COMPASS のフロントエンドエンジニア →公教育で使われている教材アプリを作ってる会社
→最近転職しました! • X:@yajiuhum • Zenn:@rorisutarou • 趣味:昼寝、ゲーム実況を見ること、ぬいぐるみ、 温泉
# こんなの作った • GitHubリンク • Microsoft Fluent Emojiを使って絵文字画像を 取得できるピッカー ※厳密には絵”文字”ではない
• npmパッケージとしてインストールして Client Component上で利用可 ←めちゃかわいい
デモサイトで触ってみる
# 使い方
# 使用技術 • Microsoft Fluent Emoji • Figma API(絵文字画像の取得に利用) •
Cloudflare R2 (絵文字画像の静的配信) • Cloudflare Workers(R2にアクセス) • React • Tailwind CSS • Rollup(ビルド)
# 思ったことつらつら ①画像のリネーム figma-zipperを加工してFigma API経由でFigma 上から絵文字画像を取得まではよかった ある程度使いやすい順番にして表示できるよう に、取得してきた画像を1から順にリネームし た 手動で大変だった
→何かいい方法あった?
# 思ったことつらつら ②R2便利 大量の画像を表示するのにCDNを使ってパ フォーマンスを上げられる エグレス(下り料金)が無料で安い Workersを使えるので操作しやすい
# 思ったことつらつら ③初めてのnpmパッケージの作成に苦戦 今まで目を瞑っていたtsconfig.jsonや package.jsonの中身についてちゃんと調べなけれ ばいけなかった (ビルドするのにエラーがたくさん発生した) →GPTに聞いて何とか乗り越えた
# 課題(気力があればやりたい) • テストコードを書く • カテゴリーナビゲーションの連動部分 (Intersection Observer API) •
i18nの対応 • ダークモードの対応 etc
終わりに 自分が使いたいからという理由で作成してみましたが、npmパッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです! これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい