このサイトの使用技術

更新 2021/12/15 1:07:00
管理者
Bookmark-Boardを製作するにあたって使用した技術のご紹介です
フロントエンド
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel ...
nextjs.org
今回初めて使いましたが、開発効率も良く、LinkやImageなど便利な機能も多く非常に良かったです
React – ユーザインターフェース構築のための JavaScript ライブラリ
ユーザインターフェース構築のための JavaScript ライブラリ
ja.reactjs.org
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leav...
tailwindcss.com
FigmaプラグインやオンラインのPlaygroundなども充実しており、最近お気に入りのCSSフレームワークです
バックエンド
Firebase
Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your ...
firebase.google.com
Firestore / Function / Authentication / Storageを使用
ホスティング
Introduction to Vercel - Vercel Documentation
An introduction to the Vercel platform and how to get started deploying any kind of application.
vercel.com
ビルド・デプロイに止まらず、ドメインの取得やCDNとして利用もできるので非常に助かってます
CDN
Global Image CDN with Real-time Image Optimization
A global network of servers for real-time image optimization, resizing, image upload, and a fast Im...
imagekit.io
OGP画像のCDNに利用。リアルタイム画像処理の能力が高く、様々な有用な使い方できそう
デザイン
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
heroicons.com
ワンクリックでJSXコピーできるのが非常に良いです
Search | unDraw
The design project with open-source illustrations for any idea you can imagine and create. Create be...
undraw.co
色も自在に変更でき、かなりいい感じのイラストが揃っています
PWA
GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰
Zero config PWA plugin for Next.js, with workbox 🧰 - GitHub - shadowwalker/next-pwa: Zero config PW...
github.com
Next.jsで作ったアプリをPWA化するために使用。数ステップでPWA化できます
PWA Manifest Generator | SimiCart
www.simicart.com
PWA化に必要なmanifest.jsonのテンプレートや画像を自動生成してくれます
Line Bot
Messaging APIの概要
LINE Developersサイトは開発者向けのポータルサイトです。LINEのさまざまな開発者向けプロダクトを利用するための、管理ツールやドキュメントを利用できます。LINEログインやMessagi...
developers.line.biz
Lineのチャットボットの開発に利用
LINE Front-end Framework
LINE Front-end Framework(LIFF)は、LINEが提供するプラットフォームです。
developers.line.biz
LINEで登録したブックマーク編集などの操作をSPAチックに実現したかったのでLIFFを採用しました