サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
zenn.dev/catnose99
前提: TypeScript + Next.js + svgrでSVGをインポートする 自分の関わっているNext.js製アプリケーションでは、svgrを導入することによりSVGを他のReactコンポーネントと同じ形でimportできるようにしています。 この記事の本筋からそれますが、svgrは以下のようにNext.jsへの導入できます。 ↓ インストール
Reactを使ったOSSなWebアプリをまとめていくスクラップ Next.js製のものが多いかも 随時更新予定 お気軽にコメントどうぞ
ちょっとしたCSSのTipsを紹介します。 テキストの一部をtext-decorationの適用対象外にしたい text-decoration: underlineにより下線が表示されるリンクがあるとします。
2021/5/14にNotion APIがPublic betaとなるようです。 「何ができるのか」も気になりますが、個人的にはそれと同じくらい「どのくらい使えるのか」が気になるのでRequest limitsを流し読みして気になった点をまとめてみます。 内容は2021/05/13時点のものです。 Rate limits Rate-limited requests will return a "rate_limited" error code (HTTP response status 429). The rate limit for incoming requests is an average of 3 requests per second. Some bursts beyond the average rate are allowed. 平均3回/秒がNotion APIへのリクエ
2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。 ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。 そんなときは絵文字をファビコンとして使いましょう。 やり方 先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%
Webページでのツイートの埋め込みについて、パフォーマンス周りで色々と工夫できることが分かったのでまとめておきます。 いちばん基本的なツイートの埋め込み方 最も基本的な埋め込みの仕方は、ツイートのメニューから[ツイートを埋め込む]を選んで、出力されたHTMLを貼り付けることです。 具体的には以下のようなHTMLが出力されます。 <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">Zennは個人開発を脱却してクラスメソッド社のサービスとなりました。<br>僕は引き続きZennの開発を続けます。<br><br>🐥 ZennとClassmethod<a href="https://t.co/jpes7Kbdpz">https://t.co/jpes7Kbdpz</a></p>— catnose (@catnose99)
VercelプロジェクトにGitHubリポジトリを連携すると、なんらかのブランチにプッシュするたびにプレビューデプロイを作ってくれる。とても便利な機能ではあるのだが頻繁にプッシュをしていると制限に引っかからないか不安になったりもする。 で、2021年3月時点ではこのプレビューデプロイの対象ブランチを特定のブランチのみに絞ることがややこしい。要望は多そうなので今後対応されるかも。最新の情報は下記のIssueをチェックするのが良いと思う。 特定のブランチ以外のプレビューデプロイを無視するには 「Ignored Build Step」というものを使うことになる。Zennの開発メンバーがやってくれた。このスクラップの通りにやればいける。 1. プロジェクトにシェルスクリプトを配置 例としてdevelopブランチにプッシュされたとき(PRがマージされたとき)のみ、プレビューデプロイを行いたいとする。
以下追記です。 Rails 5.2.5, 6.0.3.6, 6.1.3.1 で対応済 これらのリリースでmimemagicが他のライブラリ(Apache Tika)に置き換えられたため特に対応が不要となりました。 carrierwaveも2.2.1で対応済み これで使用者の多いGemではmimemagic問題が解決されたと思われます。 mimemagic の件でruby界隈が混乱していますね。このスクラップはそのへんの情報をまとめたいと思ってます。 注意 2021/03/26時点では色々と動きが激しいです。ここに書いてある情報をそのまま参考にはせず、最新の情報か確かめるようにしてください。 推測を含んだコメントを投稿するかもしれません。誤りや補足があれば返信コメントをどうぞ。 mimemagic の何が問題だったのか この部分はすでに多くの人がツイートや記事にしていると思うので、軽くまとめ
追記) サービス間通信に関わらず、東京リージョンではカスタムドメインを使うとレイテンシが増加 sinmetalさんにコメントで教えていただきました。 お察しの通り、Tokyo Regionを含むいくつかのRegionのApp EngineはCustom DomainでアクセスするとLatencyが増加します。 ドキュメントとしては https://cloud.google.com/appengine/docs/standard/ruby/mapping-custom-domains?hl=en に書いてあります。 確証はないですが、GoogleのネットワークのエッジポイントにあるGoogle Frontend Serverは、App EngineのCustom Domainの紐付けを持っておらず、us-central1に一度行ってしまうために、発生するLatencyなのではないかと思います
GCPのApp Engine(GAE)とCloud CDNを合わせて使う方法について、ググってもあまり解説が見つからなかったのでまとめておきます。 GAEとCloud CDNを合わせて使うメリット GAEにはエッジキャッシュがデフォルトで備わっています。レスポンスのヘッダーでCache-Control: public, max-age=86400などと指定するだけでレスポンスがGoogleのエッジサーバにキャッシュされます。 残念ながら、このエッジキャッシュについて公式ドキュメントがほとんど見つかりません。 GAEのエッジキャッシュが使えるならCloud CDNは不要では? GAEのエッジキャッシュは気軽に使えて楽なのですが、キャッシュを明示的に削除することができないという難点があります。アプリの新しいバージョンをデプロイしてもしばらくは古いキャッシュが表示され続けてしまったりするので、本
Next.jsアプリをGoogle App Engine(GAE)のスタンダード環境にデプロイする方法をまとめておきます。GitHubなどからCI/CDができるようにGoogle Cloud Buildから自動デプロイする方法も合わせて紹介します。 Next.jsアプリがすでに作成されているという前提で説明をはじめます。 1. app.yamlの設定 まずはプロジェクト内のルートなどにapp.yamlを作成します。GAEへのデプロイ設定の大部分はここで行います。今回は例として以下のようにします。 env: standard # スタンダード環境(省略可) runtime: nodejs14 # Node.js 14を使う(追記: nodejs16も使えるようになりました) instance_class: F4 service: default # GAEのサービスの名前。frontendと
最近Next.jsのISR(Incremental Static Regeneration)を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
export default function Page(props) { return (<p>現在時刻は{props.currentTime}です。</p>); } export async function getStaticProps() { const date = new Date(); const currentTime = date.toLocaleString(); return { props: { currentTime }, revalidate: 10, }; } export const getStaticPaths = async () => { return { paths: [], fallback: "blocking", }; }; A 2021-03-15T09:34:03.960288Z Failed to update prerender fil
🎉 追記: Safariでもscroll-margin-topをスクロール位置の調整に使えるようになった caniuse iOS Safari 14.7〜、また macOS Safari 14.1〜でscroll-margin-topによる位置調整が問題なく動くようになりました! 手元のiOS端末で試してみた限り、scroll-padding-topでもイメージ通りに動くようです(2021/09/24時点ではcaniuseに反映されていませんが…)。 Webサイトにおいてヘッダーを上部に固定したいというケースはよくあると思います。その際に問題になるのがページ内リンクが固定ヘッダーで隠れてしまうというものです。 Zennでは記事の表示ページでヘッダーを固定しており、なおかつページ内リンクの集合である目次を使っているため、この問題に対処しなければなりません。 scroll-margin-to
Vercel VercelはNext.jsなら特に設定しなくともSSRができる状態でデプロイできる。Nuxt.jsだとコミュニティが用意しているbuilderを使えばSSR対応アプリをVercelにデプロイできる。builderが用意されていないフレームワークでSSRを行うにはデプロイ周りで頑張る必要が出てくる。 VercelではちょっとしたWeb APIを用意したいときも、/apiディレクトリを用意してJSファイルなどを置いておけばまとめてデプロイしてくれる。 Netlify サーバーサイドで動かしたいスクリプトはNetlify Functionsで動かすことになるが、フレームワークごとに用意されているプラグインを使うことでまとめてデプロイができたりする。例えばnetlify-plugin-nextjsを使えばNext.jsでSSR対応したアプリを動かせるっぽい。またnetlify.to
2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ
Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある 追記: 従量課金が採用された!Vercel Proプランの料金体系の変更とNext.js での対策に関して Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。 とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration(ISR)が実現できるのかあまり分かっていない そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。 何かご存知の方はぜひコメントをお願いします🙏
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
Google Cloudを使った少人数のプロジェクトで、開発メンバーごとにサービスへのアクセス権限を管理するIAM設定についてまとめておきます。 「少人数のプロジェクト」と絞ったのはGoogle Cloud IAMのドキュメントを読むと設定のパターンが色々とあって混乱しやすいと感じたからです。「とりあえず小さく共同開発をはじめる」というケースに絞って紹介します。 より良い方法をご存知の方はコメントで指摘していただけるとありがたいです。 Google CloudのIAMの考え方 Google CloudのIAMについてまず知っておきたい3つの要素があります。 ※ かいつまんだ説明なので詳しくはIAMの仕組みをどうぞ。 メンバー: 誰に権限を付与するか。個人のGoogleアカウントや、Googleグループ、組織[1]など ロール: 何の権限を付与するか。「AppEngineの管理権限とLogs
ZennではAPIサーバーを動かすためにGCPを使っています。具体的にはCI/CDサービスのCloudBuildからAppEngineデプロイするようにしています。 その中で少しややこしいのが機密データを含むファイルの管理です。 GCPのプロジェクトの場合にはCloud Key Management System(KMS)というものを合わせて使うとCloudBuildのステップの中で暗号化したファイルを復元できます。 例えば、秘匿情報を含む.envというファイルがあるとして、GitHub等にはプッシュしたくないが、AppEngineで動かすアプリの中で読み込みたいというケースを考えてみます。 GCPではCloudBuild + KMSを使うことで実現が可能です。 大まかな流れ .gitignoreに.envを指定 ローカルでKMSにより.envを暗号化(.env.encファイルが作成される
こちらにリクエストがあったので整理も兼ねてまとめておく。 (技術関連以外のサービスも含めたかったのでスクラップに書くことにした) TablePlus SQLクライアント MySQL、PostgreSQ、Redis、MongoDBなどに対応 UIが良い。見やすい。操作しやすい。複数の接続先を管理しやすい ときどき「有料プランに入らない?」的なポップアップが出るので課金。これを書いてる時点ではマシン1台ごとに約$60の課金 快適なので課金してよかった
Next.js v10.0.6時点の情報です。最新の情報はこちらのIssueを追うのが良さそうです。 https://github.com/vercel/next.js/issues/18769 Next.jsに根本的な原因があるかどうかはまだ確認できていません 発生していた問題 はじめて https://zenn.dev を読み込んだときに、一瞬スタイルがあたっていない状態で表示されてしまう問題が発生していました。 いわゆるFOUC(Flash of unstyled content)と呼ばれる現象です。少し遅れてスタイルがあたるため、ちらつき・がたつきが生じてユーザー体験がよくありません。 ちなみに発生する条件は以下です。 Next.js で CSS Modulesを使用(styled-componentsでは問題なし) 後述のIssueではstyled-jsxでも同じ問題が報告されて
Cloudflare WorkersでNode.jsを動かしてみたので、その手順を整理してまとめておきます(元のスクラップ)。例として、Node.js + markedでHTMLをマークダウンへと変換するAPIをCloudflare Workersにデプロイしてみます。 関連記事 事前準備 Cloudflareのアカウントを作成しておきましょう。 Wranglerをインストールする Cloudflare Workersで関数のビルド・プレビュー・デプロイをするときにはWrangler(ラングラー)という公式の提供するCLIを使うことになります。ここではWranglerをグローバルインストールしておきます。 npmでインストールする場合 :::message warning 2021/02/07時点ではM1 Mac + npmで@cloudflare/wranglerをインストールすることが
Google日本語入力 長らくGoogle日本語入力を使っているのでデフォルトのIMEだと違和感がある(囲い込まれてる) 設定の[キーボード]→[入力ソース]で 「ひらがな(Google)」と「ABC」だけを残してあとを削除 トラックパッドの設定 前のPCでもタップでクリックできるようにしていたので [設定]→[トラックパッド]→[タップでクリック]にチェックを入れる ディスプレイの配置 サブモニターをPCの上に配置したい [設定]→[ディスプレイ]で設定 TouchBarの予測変換を非表示に タイプするときにTouchbarがテカテカして目障りなので… [設定]→[キーボード]→[ユーザ辞書]→[Touchbarに入力候補を表示]のチェックを外す
このスクラップは誰でも投稿OK 🙆♀️ 「こういう記事を読みたい」という要望をコメントで気軽に残していってください 💬 「自分も読みたい!」と思ったら「いいね」をつけましょう❤️ 技術 or エンジニアに関わる内容ならどんなテーマでもOKです 🙆♀️ アンサー記事を書いてくれた人は返信とかでURLを貼ってください💬 Zenn以外のプラットフォームに書いた記事でもOKです 🙆♀️ 「自分で調べて書けよ」はなしで🙅🏻♀️
先日Next.jsでXML Sitemapを生成する方法を書きました。同じ要領でRSSフィードの実装もできるので記事にしておきます。 Next.jsのgetServerSidePropsで動的にRSSフィードを生成 Next.js(TypeScript)のPageコンポーネントの中で実装を行います。例として/feedにアクセスしたときにRSSフィードが表示されるように/pages/feed.tsxというファイルを作成します。 getServerSidePropsを使う理由 このサンプルでは、RSSデータの生成からレスポンスの返却までgetServerSidePropsの中で行います。getServerSidePropsは本来はPageコンポーネント内で使うpropsを取得するためのものですが、ここではpageコンポーネントを介さずに直接レスポンスを返却してしまいます。 というのもPageコ
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント(_app.tsx)にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考:Next.jsの_app.tsxのカスタマイズ(TypeScript) import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
しかしここで問題になるのが「ZWJ Sequences」。 ZWJ Sequencesの説明をEmojipediaから引用。簡単にいうと複数の絵文字を組み合わせて、 An Emoji ZWJ Sequence is a combination of multiple emojis which display as a single emoji on supported platforms. These sequences are joined with a Zero Width Joiner character. ひとつの絵文字として表示しようというもの。たとえば👩💻という絵文字は👩と💻という絵文字を並べることで実現されている。絵文字で人物の肌の色を選べたりするけど、あれもZWJ Sequencesにより実現されている。 そのため、さきほどの書き方をすると…
次のページ
このページを最初にブックマークしてみませんか?
『catnoseさんの記事一覧』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く