スキップしてメイン コンテンツに移動

投稿

注目の投稿

Next.js 13 以降で PWA を有効にするその2(開発環境にも対応)

Next.js 13 以降で PWA を有効にするその2 多分、その内 next-pwa が対応するので、待ってれば大丈夫だと思うが、どうしても今すぐに対応したい人用のパッチコード。 バージョンは、 next ^13.4.2 next-pwa ^5.6.0 となっている。 修正するファイルは、next.config.js next.config.js /** @type {import('next').NextConfig} */ const path = require("path"); const isDev = process.env.NODE_ENV !== "production"; const withPWA = require("next-pwa")({ dest: "public", disable: isDev, buildExcludes: ["app-build-manifest.json"], }); const generateAppDirEntry = (entry) => { const packagePath = require.resolve("next-pwa"); const packageDirectory = path.dirname(packagePath); const registerJs = path.join(packageDirectory, "register.js"); return entry().then((entries) => { // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427 if (entries["main-app"] && !entries["main-app"].includes(registerJs)) {
最近の投稿

ssh config で複数の秘密鍵を切り分ける方

ssh config で複数の秘密鍵を切り分ける方法 ようやく、納得の行くやり方が出来たのでメモ。 まずは設定 ~/.ssh/config に、下記の設定をする。 # github プライベートアカウント Host github.com HostName github.com User git IdentityFile ~/.ssh/githubkey1 IdentitiesOnly yes # github 仕事用アカウント Host github.com.sub HostName github.com User git Port 22 IdentityFile ~/.ssh/githubkey2 TCPKeepAlive yes IdentitiesOnly yes 解説 ポイントは、Host 名に必ず、トップレベルドメインまで入れる事。 Host github ---> NG Host github.com ---> OK Host github.com.subdomain --->OK ちなみに、最近まで一番上のトップレベルドメイン省略で設定していたせいで、何にも参照していない状態だった(辛い)。 ~/.ssh/config に設定する際には、必ずトップレベルドメインまで指定しましょう。 さて、自分は仕事の関係上、プライベートアカウントと仕事用アカウントを2つに分けて運用している。 あとはこれを使い分けるために色々やってるのだが、仕事用アカウントのリモートレポジトリを下記のように設定している origin git@github.com.sub:仕事用アカウント名/レポジトリ名.git ポイントは、 git@github.com.sub で開始している所。 こうする事で、仕事用アカウントのレポジトリは、仕事用の秘密鍵を参照するようになる。 便利。 この設定は、クローン時に下記のコマンドを実行すれば良い git clone git@github.com.sub:仕事用アカウント名/レポジトリ名.git その他設定 コミットする名前を変えていないならば問題ないが、もし変えたい場合、下記のように変更する cd {仕事用アカウント名/レポジトリ名} git config --loc

Next.js 13 以降で PWA を有効にする

Next.js 13 以降で PWA を有効にする 2023/5/28追記: さらに良い設定を、新しい記事に書いたので、そちらを参照の事。 多分、その内 next-pwa が対応するので、待ってれば大丈夫だと思うが、どうしても今すぐに対応したい人用のパッチコード。 バージョンは、 next ^13.4.2 next-pwa ^5.6.0 となっている。 修正するファイルは、next.config.js next.config.js /** @type {import('next').NextConfig} */ const path = require("path"); const isDev = process.env.NODE_ENV !== "production"; const withPWA = require("next-pwa")({ dest: "public", disable: isDev, exclude: [ // add buildExcludes here ({ asset, compilation }) => { if ( asset.name.startsWith("server/") || asset.name.match( /^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/ ) ) { return true; } if (isDev && !asset.name.startsWith("static/runtime/")) { return true; } return false

ユーザ体験に基づく、漫画Viewerの分析

漫画 Viewer について ここ数年、インターネット漫画は大きく様変わりした。 新都社という素人がツギハギして作っていた漫画サイトから、出版社の公式漫画サイトが乱立するという状況になっている。 色々な漫画 Viewer が登場したが、最終的にはある程度の種類に落ち着いた形になっている。 自分は基本的に PC で漫画を読んでいるが、スマホから漫画を読む人も多いだろう。 アプリをインストールして読むというスタイルが今は普通なのかもしれない。 自分は、アプリを入れるのが死ぬほど嫌なので、基本 PC で読める漫画のみ読むようにしている。 面白ければ、電子版書籍を購入して、一応ある程度は還元するようにしているつもり。 まあ、でも実際には企業プロモーションにタダ乗りしているというのが実情だ。 漫画 Viewer に関しては、はてなが作っている GigaViewer が一番読みやすいと感じている。 しかし、漫画 Viewer にも色々タイプがあるので、個人的な分析と感想をまとめたいと思う。 多分、Twitter か何かに書いたかもしれないけれど、ブログに書いておきたいなと思ったので、書く。 GigaViewer スタイル まず、王道の GigaViewer スタイル。 これはとにかく読みやすい。PC の見開きに対応、スマホでの表示にも対応、過去話へのリンクが画面下部にまとまっている事や、コメントを見る事が出来るなど、機能面での充実も素晴らしい。 唯一、ダサいなと思うのはスマホ版で全画面表示した後に出てくる ✕ ボタン。あれはマジでダサい。 CSS の border で表現してると思うのだが、やたらと左下に長く表示される(一瞬だが)。 データ量が増えるかもしれないが、svg に置き換えて欲しいというのが本音だ。 GigaViewer スタイルの一番良いのは、単話へのアクセスが早いこと。すぐに読み進められるのが良い。 ページめくりにはクリックが必要だが、それがそこまで気にならないので、全部の漫画がこのスタイルになってくれたら良いのにといつも思っている。 独自の漫画 Viewer を作ってメンテナスするより、GigaViewer を導入したほうが絶対に良い。 あと、GigaViewer は地味に画像をバラバラにして表示するという技術を採用しているので、画像を直接抜き取られて

blueskyを始めて、独自ドメインを設定した

bluesky始めました 今話題の bluesky の招待コードをもらうことが出来たので、blueskyを始めました。 画面としてはこんな感じ。 見慣れたTwitterのUIで作られています。 これ、アカウントを作ると最初は、「ユーザ名.bsky.social」みたいになるのですが、独自ドメインを持っている人は、自分のドメインを設定することが出来ます。 以下、その設定方法のメモです。 Blueskyのスクリーンネームに独自ドメインを設定する方法 これから仕様が変わるかもしれませんが、2023年4月現在、PCからも blueskyへのアクセスが出来ます 。このページに招待コードを入れて、アカウントを作った後の話です。 アカウント作成にアプリはなくても大丈夫です。 さて、スクリーンネームに独自ドメインを設定する方法ですが、「Settings→Change my handle→”I have my own domain"」とクリックすると下記の画面が表示されます。 Enter the domain want to use と書いてあるフィールドに、自分が持っているドメインを入力すると、下部にどういうDNS設定をすればいいかが表示されます。 TXTレコードのサブドメインとして_atprotoを設定して、did=did:plc:ほにゃららみたいな値を設定すればいいだけです。 Value-domainで設定する 自分は、Value-domainを使っているので、こういう感じで一番最後に設定しました。 他のDNSサーバでも同じだと思いますが、TXTレコードに txt _atproto did=did:plc:ほにゃらら と言った感じで、設定すれば良いです。 浸透したかどうかを whatsmydns で確認後、Blueskyの画面に戻り、Verify DNS RecordとすればOK。 ちゃんと浸透していればスクリーンネームが更新されます。 blueskyの感想 まだ始めてから数日なので、雰囲気を掴み取れてないのですが、mastodonと違って、TLは自分がフォローした人しか流れてこないので、相当に穏やかな流れになっています。 フォローしていない人の情報を眺めてカオスな感じのmastodonもありますし、まったりとしたローカルタイムライ

Vim のテキストオブジェクトと surround.vim で効率よく入力

Vim のテキストオブジェクトと surround.vim で効率よく入力 これは Vim 駅伝 の 13 本目の記事です。 テキストオブジェクトとは 皆さんは、テキストオブジェクトを活用しているでしょうか。 私は、特に HTML を書く時にテキストオブジェクトを活用しています。 テキストオブジェクトは、Vim7 から導入された新しい概念であり、記号などで囲まれたテキストをオブジェクトとして扱うことができる、Vim の機能です。 具体的には、カッコやダブルクオーテーションやタグ等で囲まれているテキストの削除、コピー、変更を簡単に行なう事が出来るようになります。 実際にテキストオブジェクトを使う場面 では、実例を考えてみましょう 例1)記号で囲われたテキストの中身を削除する 例えば、下記のようなコードがあったとします。 function (arg1,arg2,arg3) { } (arg1,arg2,arg3)と書かれた所を一気に削除したい事がありますよね。 通常の削除処理では dwdwdwdw と連打して消すとか、 5dw で消すというやり方が思い浮かぶかもしれませんが、テキストオブジェクトの場合、下記の操作で削除出来ます。 di( または di) 実際に、上記コードをコピペして、やってみてください。 ()内であればどこででもこの操作は有効です。 同じような例として const str = "Hello, World"; のように、ダブルクオーテーションで囲まれた文字列を削除したい場合は、 di" で削除する事が出来ます。 例2)記号で囲われたテキストの中身を変更する 例えば、下記のようなコードがあったとします。 function (arg1,arg2,arg3) { } (arg1,arg2,arg3)と書かれた所を一気に変更したい事がありますよね(デジャブかな?)。 そんな場合、下記の操作で変更出来ます。 ci( と入力すると、()の内側を消して、入力モードになります。 そのままタイプすれば、中身を変更することが出来ます。 同じような例として <h1>sample title</h1> のように、タグで囲まれた文字列を変更したい場合は、 cit と入力すると、

帰宅した時に、Sesami4 を自動解錠するよう IFTTT で操作する

Sesami4 を IFTTT で操作する 先日、スマートロックの Sesami4 を購入した 。 使い始めて 1 ヶ月ちょいになり、不満点が出てきた。 手ぶらで解錠がロクに効かない Android のウィジェットが常時表示はウザい オートロックを有効にしてると締め出される(当たり前だよなぁ!?) と言った感じ。 この中では特に手ぶらで解錠がロクに効かないのには相当不満があった。 原因はシンプルで、BLE(Bluetooth Low Energy)が上手く動作していなかった。 観察した結果だが、動作する時はちゃんと動作するが、ダメな時はとことんダメ。 Sesami の作り込みが甘いのか、純粋に Android の反応が悪いだけなのか、どちらなのか判断は付けられない。 その両方である可能性もあるが、いずれにせよこれでは快適な生活が送れない。 Sesami は API を公開しているので、それを使ってリモートコントロールする事にした。 あ、一応 Sesami の WiFi モジュール は導入している前提。 これがないと今回の Tips は使えないので、気をつけるように。 今回は スマートロックのセサミをさらに便利にする(アレクサからパスコードレスで解錠&オートロック化) の記事をそのままパクってるだけなので、その記事を読めば概ね同じことが出来る。 Sesami API キー取得 公式ページ にアクセスし、メールアドレスを入力する。 認証コードが送られてくるので、それを入力すると API 取得画面が表示される。 スマホアプリの「このセサミの鍵をシェア」から QR コードのスクリーンショットを撮って、API 取得画面にアップロードする。 そうする事で、デバイスの UUID と SecretKey が取得出来る。 API キー デバイスの UUID デバイスの SecretKey GAS のエンドポイント認証用のハッシュ値を用意する 下記のコマンドを実行して、認証用ハッシュ値を取得する。 任意のパスワードは、IFTTT との連携に使用するので、メモしておく事 $ echo -n '任意のパスワード' | shasum -a 512 自分は WSL2 上で実行して取得した。 SHA512 Onl