サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
blog.narumium.net
Next.jsは基本ポート:3000で起動します。 これを定義1つで起動ポートから、プログラムからの参照(自身のAPIアクセスなどで)までするためのメモ。 next.config.jsドキュメントを見るといつも通り基本的な部分しか乗っていません。 定義ソースを見ろとあるので見てみますがポート関連の設定はなさそうです。 CLIのヘルプを見てみると-pオプションでポート設定が可能なようです。 > next dev -h #or > next start -h ... Options --port, -p A port number on which to start the application --hostname, -H Hostname on which to start the application --help, -h Displays this message
Vercel に Next.js プロジェクトをデプロイします。 公式で色々なフレームワーク向けの紹介をしているのでバニラ状態からやるのは簡単そうですが、色々と弄った後なので難しいんじゃないかと危惧してました。 実際に使ってみると「なんでもっと早く使わなかったんだ」って思うほど便利だったので、一連の流れを覚書きしておきます。 サービスについて Vercelっていうと Next.js を開発してるところですね。 実際に使ってみると使用履歴がありました。 ちょうど一年前に使った Now の Zeit が2020/04 に Vercel に改名したようです。 Zeit の Now が Vercel の Vercel になったわけですね。ややこしい。 設定 Next.js のdeployment を見ると vercel が推奨になっています。 https://nextjs.org/docs/dep
##とりあえず普通にインストール sudo apt install -y nodejs ##コマンドがnodejsになってるしバージョンが古い $ node -v The program 'node' is currently not installed. You can install it by typing: sudo apt install nodejs-legacy $ nodejs -v v4.2.6 ##使いにくいのでアンインストール sudo apt remove nodejs ##nodejs入れ直し curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt install -y nodejs $ node -v v8.11.1 ##npmのアップデート $ npm -v 5.6.0 $
Next.jsのexport機能でSSG(Static Site Generation)して、Firebaseでホスティングします。 思い付きをサクッと見れる状態に持っていけるので便利です。 用途的にはGatsbyの方が向いていますが、慣れの問題からNext.jsを使います。 また静的ファイルの配信を目的にしているのでFirebaseを使いますが、Next.jsだと普通は Vercel を使うのが楽でいいと思います。 Next.jsのexport まずはnextjsプロジェクトを作成します。Typescriptは好みで。
WEBページを作る際に外部 API を使いたいことがあります。 Next.js で 外部API を叩く際にどうするか整理したので覚書き。 アクセスごとに取得したい API 情報の更新が早い、あるいは常に最新の情報が欲しい場合はアクセスごとにAPIアクセスが必要です。レート制限に注意します。 クライアントサイドで叩く CORS 設定で許可されている場合にはクライアント側で DOM 構築後に API を叩くということが出来ます。class なら componentDidMount でアクセスしたり、フックを使うなら以下のように書けます。 import React from "react"; const url = "https://api.github.com/repos/zeit/next.js"; const App = () => { const [stars, setStars] =
タブレットに入れてるmicroSDカードが突然の読み取りエラー。 USB接続でも認識しないので久々に抜き取ってPCのカードリーダーに入れてみると「読み取り専用(書き込み禁止)」になってました。 microSD なので当然ロックなんてないです。 こういうのは大体寿命なんでAmazonで再購入しつつ悪あがきしてみる。 色々と調べてみると以下の方法で直ることもあるみたい。 アダプタ(microSD -> SD)に入れて何回かロックピンをON/OFFして最後にOFFにする コマンドプロンプト、レジストリ編集によるロック解除(参考) まあ今回はダメだった。 原因としてはエラー領域で容量を上回ったとか、制御チップが壊れたとか見かけましたが原因追及は難しいでしょう。 SDを入れられるカードリーダーを持ってきてアダプタ込みで入れたところ、「セキュリティで保護された記憶域デバイス」として認識される。 これは
React(Next.js)でTwitterの埋め込みを行いたい。 主にタイムラインが対象ですが、一応何でも埋め込めるようにしておきます。 ライブラリを使ったり使わなかったり。 公式埋め込み まず前提として公式で簡単に埋め込みコードが作れます。 https://publish.twitter.com/ コレクション、ツイート、プロフィール、リスト、モーメント、いいね、各種ボタンを埋め込みに使える。検索結果はないんですね。 これらはツイートなどの単体、タイムライン、ボタン形式で埋め込まれる。 ここで生成するとdomとscript読み込みを出されるのですが、Reactで外部scriptの読み込みは普段することが少ないです。 場合によってはindex.html(nextjsなら_document.js)にで読み込むのもいいけど、埋め込まないページでは負荷が増えるだけになる。 それでライブラリを使
日本製ヘッドレスCMSであるmicroCMSと静的サイトジェネレータ―のGatsbyを使ってブログのサンプルを作った感想とか。 以前にもヘッドレスCMS(Netlify cms, Contentful)を触ってみたんですが、わかりにくかったり、使いにくかったり、データ形式が気に入らなかったりなど細かい所が引っかかって放置してました。 最近よくmicroCMSの記事を見るのでとりあえず使ってみます。 MicroCMSの準備をする https://microcms.io/ マニュアルや公式の導入ブログがわかりやすく簡単に始められます。
newやmakeを使って変数宣言したりappendを使ってスライスの追加なんかを自然とやってきたけど、ふとこれは何だっけと思って調べてみました。 するとビルトインパッケージとして参照することができた。 ソースを見た感じgodoc用に見えるので中身は説明を読んで使ってみる必要がある。 この辺は知らないと使えないものなのでおさらいしておきます。 標準出力
Next.js(React)でTypescriptで書いていますが、DOM関連でNullableな操作が続きどう処理するのがいいか悩んだので色々やってみます。 Typescriptは制限と同時にできることも多いので思いのほか色々できました。 キーワード:Null合体演算子Null条件演算子Null許容型Type GuardNon-null assertion operatorDefinite Assignment AssertionsOptional chaining テストのためjsdomを使ってElement操作をします。 //lib for test //> yarn add jsdom @types/jsdom import { JSDOM } from "jsdom"; const { window: { document } } = new JSDOM( `<div><p id
NEUTRINOでNSF法を使った音声合成ができるとのことで試してみます。 NSF法はニューラルソースフィルタモデルを使った手法で高速に高品質な音声を合成できる方法みたいです。理屈はともかく早速試そう。 最終的な聞き比べは最後にあります。 オンライン版の使用について 現在はNSF法の部分をWindowsで動かせないとか何とかでオンライン版を使う必要があるようです。 公式の解説ページを元に進めていきます。 まずはここからオンライン版をダウンロード。 中身を解凍したらそのままGoogle Driveにアップロード。 容量は1GB、保存の容量はデフォルトで15GBあるので大丈夫だとは思いますが、足りなければ追加購入したり別アカウント使ったり。 Colaboratoryのインストール Google Driveにアプリを追加します。 フォルダ内で右クリックから「その他」→「アプリを追加」。 Cola
URLは 2000 字程度まで使えるのでパラメータで色々渡すことが出来ます。 ただ共有に不便にはですし、ツイッターなどの文字制限があれば載せることが出来ません。よく見かける bitly を使ってみます。 アカウント作成から API で短縮 URL を作るまで。 アカウントの作成 https://bitly.com/ トップ右上の「Sign up」でプラン一覧に遷移します。 もう一度「Sign up」を押すと新規登録画面に移ります。 後は流れで進めていきます。メールの確認を忘れずに。 ユーザ名、メール、パスワードを入力。 確認メールが来るので「VERIFY YOUR EMAIL」をクリック。 使用方法(仕事、個人、両方)を選択。 氏名、どこで見つけたかの選択(skip可)。 APIの利用 まずはアクセストークンを取得します。 「PROFILE SETTINGS」から「Generate Acc
ディスコード上で動くボットを作ろうとすると少しハードルがあります。 ウェブフックは他サービスでイベントが起きた時の通知を受け取るような用途が主ですが、自分でリクエストを投げることもできるので通知ボットを作成可能です。 Golangを使って適当なメッセージを投げてみます。 BotとWebhook ボットはディスコードにログインして各種イベントに対して処理をしたり、ディスコードで出来ることはなんでも出来ます。 ボットアカウントを作って、権限を付けて、イベントに合わせて色々な処理を行う必要があります(ディスコードはちょくちょく落ちたりもするので特に通信/再接続に関するハンドリングが面倒)。 golangで作るならbwmarrin/discordgoというライブラリがあります。 ウェブフックはイベントが起きた時に通知を送る仕組みです。 簡単かつメンテナンスフリーですが通知(書き込み)しかできません
前回のぼかし・平滑化と似た処理になりますが、ノイズをなくすのではなく逆に追加して認識しにくくするのが目的です。 今回はノイズ追加、乱反射、RGB分離を行います。 ノイズの追加 乱数は「GLSL 乱数」で最初に出てくるものをお借りします。 fract(x-floor(x))を返すので値域[0 ~ 1]の乱数です。 precision highp float; varying vec2 uv; uniform sampler2D t; uniform vec2 resolution; float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { gl_FragColor = texture2D(t, uv) * vec4(vec3(rand(uv)+
Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。 マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。 pages/ の管理 pages/ 下には設定用にスクリプト(js, jsx, ts, tsx)を置けません。 data/ などを外に用意してもいいんですが疎になりすぎてフォルダを行き来するのが面倒になります。 jsonで管理してもいいんですがコンテンツを入れると構造がごちゃごちゃします。 マークダウンならタグ付きのコンテンツを簡単に管理できます。 この辺は以前の内容ですが、gray-matter を使って config 付きのコンテンツとして管理することが出来ます。 gray-matter とは gray-matter は front matter の YAML 解析を行うラ
課金データの書き出し まずは「お支払い→課金データのエクスポート」 BigQueryを使うプロジェクトを指定して保存します。 実際に書き出されるまで何時間かかかるようなのでしばらく放置。 BigQuery 上の画像にあるようにBigQueryのデータセットを作成する必要があります。 プロジェクト名の横の▼から「Create new dataset」でデータセットを作る。 エクスポート後にできるテーブル名はあとで使うので控えておきます。 Google Data Studio / データポータル これはデータの視覚化をするツールです。 ここで先ほどBigQueryに入れた課金データをグラフにします。 まずQiitaに載せていただいてるGCP無料枠レポートを開きます。 コピーアイコンからコピーを始めます。 「新しいデータソースを作成する」から可視化するデータの元を作成します。 コネクタからBig
gl-reactを使ってGLSLでリアルタイムな画像処理がしたい。 ace.jsという有名なコードエディタがあるので使いたいですが、Reactでそのまま使うとなると難しそう。 バージョンは最新ではないもののReactコンポーネント化したreact-aceというものがあったので、その使い方とnext.jsで使う時の注意を覚書き。 やりたいこと GLSLを書くと画像に反映させたい。 これはtextareaでも可能ですが見栄えは悪いし書きにくいです。 使い方 モジュールを2つ追加します。
サンプルコード まず Next.js で動かしてみます。 様々なコンポーネント形式で動かせますが基本的にフックを使っていきます。 サンプルコードに accept を追加。 ドロップエリアにファイルをドラッグすると isDragActive が true になります。 import React, { useCallback } from "react"; import { useDropzone } from "react-dropzone"; const App = () => { const accept = "image/*"; //"image/jpeg, image/png"; const onDrop = useCallback((acceptedFiles) => { console.log(acceptedFiles); }, []); const { getRootProp
golangではtypeによる型定義とレシーバと呼ばれるメソッド定義ができます。 複数の外部パッケージを同時使用するときなどにレシーバ追加をしたいときがあるんですが、言語規則のためそのままだと追加できません。 基本的なことからおさらいしつつ対策を考えます。 型定義とレシーバ package main import ( "fmt" ) type MainType struct { Name string } func (m *MainType) Say() string { return "my name is " + m.Name } func main() { m := MainType{"main"} fmt.Println(m.Say()) //-> my name is main }
モーダルを出さずにくるくる回して設定するUIをExpoで使いたい。 マザー2の影響かドラムロールUIって言ってしまいますが、一般的にはwheelらしいです。spinnerって言ってるのもありましたが、これは他にも色んな意味を指しすぎなので使いにくい(ローディング、時計など円状のUI、数値入力の横の▲▼など)。 🔗https://github.com/search?q=react-native+wheel Githubで適当なワードで検索してみましたが望むものは見当たらなかったです。 🔗https://www.npmjs.com/package/react-native-wheel-picker-android 人気があるけどgithubしか見ていなかったので見つけるのが遅れた。 yarn add react-native-wheel-picker-androidだけで使えるように見えた
カスタムサーバーを使っている場合はPORTオプションを変えるだけです。 場合によってはこれと永続化だけで十分。 HTTPSポート設定 現在ならSSL化はわりと必須な感じがします。 個人利用ならLet’s Encryptを使うのが常道なのでCertbotのドキュメントを見て認証。 ここで作成した証明書のファイルを使ってサーバーを起動します。 デフォルトサーバーの場合、next/dist/compiled/arg/index.jsあたりを見るとサーバーオプションを-p, -H, -h以外の引数で渡せそうなので>next start -key keyファイルの中身 -cert certファイルの中身 で出来そうな気もしたんですが、そもそもhttpモジュールなので無理そう。 カスタムサーバー デフォルトサーバーではSSL対応が難しそうなので導入。 Custom Serverやcustom-serv
Next.jsとMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。 現象としてはnext.jsのPHASE_PRODUCTION_BUILDでgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。 ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。 結構複雑な問題だったので要点をまとめながら解決を図ります。 環境:next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1 推察 next.jsとMaterial UIによる問題で以前クラス名が合わないエラーがあった。 初期アクセスで問題が起きるのでライフサイクルも考えると_documentが怪しい。 ビルドの有無で変わることからコンパイルの処理も見る必要があ
GatsbyはReact用の非常に人気の高い静的サイトジェネレータです。 Next.js(SSR寄り)を使っているとどうしてもGatsbyも試してみたくなります。 スター数ではNext.jsの方が多いですがUsed byで見るとGatsbyの方が倍以上使われてるんですよね。 WordPressの代替を探していることもあり、GatsbyとNetlify CMSで管理するブログを試してみます。 用語・略語:CMS:コンテンツマネジメントシステムSSG:静的サイトジェネレータ
next.jsはnowと合わせると秒単位でWEBアプリを公開できるような超速フレームワークですが、それなりの規模のものを作ろうと思うと色々設定が必要です。 大分慣れてきたので振り返りもかねてプロジェクト初期設定の備忘録。 プロジェクト作成からGit設定、各種コンフィグ類の設定、必須ライブラリの導入とカスタムページの用意まで。
Golang製Web Framework「gin」とjavascriptライブラリ「React」を合わせてウェブサービスを作ることを考えます。 ルーティング部分でちょっと詰まったので覚書き。 ファイルサーバーとしてginを動かす まずginでファイルを返すにはStaticを使う。 r:= gin.Default() //フォルダを指定 r.Static("/assets", "./assets") //ファイルシステムを指定 //シングルバイナリにしてる時など r.StaticFS("/assetfs", statikFS) //ファイル単体を指定 r.StaticFile("/some.file", "./assets/favicon.png")
React管理下にない値の変更時に描画を更新したい。 あまり使いたいものでもないですが、React.Componentでは適切なタイミングでthis.forceUpdate()を使うことになります。 今回は関数コンポーネントで作成中にforceUpdateに当たる処理が必要になったのでどうにかしようという内容です。 Function Component での forceUpdate これを簡単に言い換えるとHookが欲しい。 しかし、そのものはないようなので他Hookを使って同様の結果になるようにします。 forceUpdateを使うためのuseForceUpdateを考えます。 const useForceUpdate = () => { const [value, setValue] = React.useState(0); return () => setValue(value =>
次のページ
このページを最初にブックマークしてみませんか?
『Narumium Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く