JavaScript無効時に特定のページに遷移させる

<noscript> <meta http-equiv="refresh" content="0;URL=http://example.com" /></noscript> Next.jsなら_documentに入れるかページごとにnext/headで追加すれば良さそう note.onichannn.net

canvasを使って動的にOGPを設定する

概要 node-canvasを使ってNode.jsでもcanvasを使えるようにする 必要に応じてnode-fetchで外部APIを叩く 必要なフォント、ベース画像と共にHerokuにデプロイ 参考 github.com zenn.dev

React Hook Formでのチェックボックスの取り扱い

Path<T>の型定義を見ればわかるがチェックボックスのパスはhoge.fugaという書式になっている 初期値はdefaultCheckedとかを使わないでregisterに渡す初期値にて指定する 指定の仕方は簡単で、registerにてパスで指定する構造にしたがったオブジェクトであればい</t>…

Next.jsでのmultipart/form-dataの取り扱い

概要 Next.jsにおいてFEからmultipart/form-dataでデータをBFFに送り、そこからさらにBEにmultipart/form-dataで送る 今回の手法はFileとstringやnumberが混在したフォームデータに対応している 処理の流れ 1. FE to BFF fileのinputでonChangeのevent.targe…

ETagを使った排他制御について

メモ 排他制御の実装としてはバージョンで管理するより、ETagとIf-Match使う方が楽なのか? RFC5789 PATCH Method for HTTPではETagとIf-Match使った方法が言及されている https://datatracker.ietf.org/doc/html/rfc5789#section-2 https://datatracker.iet…

npm scriptsからPrisma Client使ったら終わらなくなった

npm scriptsからPrisma Clientを使ったところ、ソースコードを一番下まで実行し終わってもプロセスが終了しなくなったので色々試してみたところ await prisma.$disconnect() としたら直った 明示的に接続を切る必要があるようだ

material-ui-pickersと@date-io/date-fnsでエラー「Uncaught RangeError: Format string contains an unescaped latin alphabet character `n`」

@date-io/date-fnsのv2系をmaterial-ui-pickersと使うとエラーを吐くのでv1.3.13にダウングレードしなければいけないらしい。 github.com

AdSenseの広告が含まれたReactコンポーネントをレスポンシブに非表示にしたい

問題 AdSenseではレスポンシブ広告ユニット以外でdisplay: none等を利用して広告ユニットが見えなくなるようにしてはいけない。[1] よってメディアクエリを使ってdisplay: noneで広告を含んだReactコンポーネントの表示・非表示をコントロールするやり方はや…

NumPyのndarrayからPyTorchのTensorへ変換

arr = np.arange(3)とする。 torch.Tensorかtorch.FloatTensor torch.Tensorはtorch.FloatTensorのエイリアス dtypeはtorch.float32かtorch.float。 torch.Tensor(arr) torch.tensor() 元のdtypeを受け継ぐ。 dtypeを指定することもできる。 コピーを作る。 …

Lancersでアンケート作るときに気をつける事

CSV内での変数の順番とHTML内の変数の出てくる順番を揃える。 CSVもHTMLも文字数制限がある。 HTMLの機能の一部が使えない。 一度アップロードしたCSVファイルをダウンロードすることはできない。 結果のCSVには元のCSVが含まれているのでそこで確認できる。

CRAのビルドがメモリ不足で落ちる問題の解決方法

起きたこと react-scripts buildがメモリ不足でFailedする。 対策 package.jsonのscriptsにあるbuildをreact-scripts --max_old_space_size=4096 startに変更する。 参考 github.com

CRAで作ったプロジェクトでTwitterCardを表示させるにはrobots.txtを変える

何故かCRAで作ったデフォルトの/public/robots.txtが以下のようになっているのでCard Validatorで何回試してもTwitterCardが表示されない。 # https://www.robotstxt.org/robotstxt.html User-agent: * 以下のように変更したら直った。 # https://www.robots…

スクロールさせたいけど中身がずれてる

CSS

display: flex; justify-content: center; を外側の要素に指定するとずれるので display: flex; justify-content: flex-start; にする。 See the Pen RwNZBeZ by to_m0ya (@gazimum) on CodePen.

VideoとCommentを投稿できるUserをそれぞれの投稿への一定期間中のLike数の合計で並べ替え

前提 UserはVideoとCommentを持っている。 それらに付いたLikeをwhere('created_at > ?', Time.now - 1.days)とかで一定期間に制限してカウントして足し合わせて、その合計が多い順にUserを並べたい。 PostgreSQL 以下、例示のために必要な部分だけ抜き出し…

ActiveModelSerializersのCollectionSerializerを使うときはネストの深さをどこで指定する?

A. renderで渡す @res = Hoge.where(name: hoge) @items = ActiveModel::Serializer::CollectionSerializer.new( @res, serializer: HogeSerializer, some_values: user_signed_in? && current_user.some_values ) render json: { items: @items.page(@page)…

YouTube埋め込みプレーヤーのあるページでhistoryに同一URLがpushされる

何が起こった? YouTube埋め込みプレーヤーを使っているページで同一のURLがhistoryにpushされていた。つまりページAからYouTube埋め込みプレーヤーのあるページBに遷移し動画の読み込みが完了した後に「前のページに戻る」操作をしてもそこは同じページBで…

RailsでItem has many Tagの時にTagに対する条件のANDをしたい

やりたいこと # Item has_many :item_tag_relations, dependent: :destroy has_many :tags, through: :item_tag_relations, dependent: :destroy # ItemTagRelation belongs_to :item belongs_to :tag Tag name: string という状況で「"red"と"blue"と"yello…

Heroku, Rails, BigQueryを使って日付毎にログを保存して、APIエンドポイント毎のコール数を知りたい

なぜ? WEBページのPVやAUはGoogle Analyticsを見ればわかるが、ページによってはタブの遷移などでURLが割り振られていない動作があり、それはAPIコールの回数を解析することでしか知ることができない。そして解析はSQLを使っていい感じにやりたい。 やりか…

Rubyでgoogle-api-clientを使ってYouTube Data APIを呼ぶ

使い方例 準備 Gemfile gem 'google-api-client', '~> 0.30.6' /config/initializers/youtube.rb require 'google/apis/youtube_v3' module YouTube class Client Service = Google::Apis::YoutubeV3::YouTubeService.new Service.key = ENV.fetch('DEVELOPE…

RailsでSerializerを使ってログインしたUserがLikeできるItem列をPaginationしたい

詰まった点 Serializer側で、「ユーザはログインしているか」と「ユーザは過去にLikeしたか」を判断して値を返さなければいけないがActiveModel::Serializer::CollectionSerializerを使ってどうやってやる? 解決策 ActiveModel::Serializer::CollectionSeri…

APIモードのRailsでActive StorageとS3を使ってバックエンド、Reactでフロントエンドを実装したい

作り終わってから思い出して書き始めたので抜けがあるかもしれない バックエンド(Rails API) APIモードでRailsアプリを作ってCORSの設定とかをいい感じにする aws-sdk-s3とactive_model_serializersをGemfileに追加してbundle install S3にバケットを作っ…

devise-token-authのvalidate_tokenのレスポンスをSerializer使ってカスタマイズしたい

class User < ActiveRecord::Base # いろんな処理 def token_validation_response UserSerializer.new(self, root: false).as_json end end github.com

Reactでimg要素のwidth, heightを取得

See the Pen bGGpEqr by to_m0ya (@gazimum) on CodePen.

Redisを使って「急上昇」を実装

やりたいこと Redisを使って「急上昇」を実装したい やってみたやりかた ソート済みセット型のインスタンスとして 以下を使う スコアの最新の増減を記録する用:score_diff 過去のスコアを記録する用:score 手順 アイテムのスコアを変動させる diffは変動量…

Redisのソート済みセット型をコピー

やりたいこと Redisのソート済みセット型を簡単にコピー やりかた zunionstore dst 1 src 参考 redis.shibu.jp

ReactでHOCしててちょっとはまったこと

withHoge()でWrapする処理をrenderの中で毎回行ってしまっていてinputのonChangeでrenderが呼ばれるたびにフォーカスが外れてしまっていた。 See the Pen HOC000 by to_m0ya (@gazimum) on CodePen.

Hyperappのボイラープレートを作った

概要 Hyperapp Hyperapp Router Picostyle Atomic Design を使用するボイラープレートを作った Repository github.com デモ hyperapp-boilerplate 展望 TypeScript Test axiosを使った簡単なAPIコール を追加したい

<textarea>においてctrl+enterでvalidate付きform.submit()

したかったこと <textarea>においてctrl+enterでform.submit()させたい ただしrequiredとかのvalidateも効かせたい やりかた 送信させたいときにform.reportValidity()でvalidateしてから form.submit()する サンプル 参考文献 developer.mozilla.orgdeveloper.mozilla</textarea>…

2018年はてなサマーインターン優勝した!!!

これに参加してきました developer.hatenastaff.com 全体では4週間あってその中で前半2週間、後半2週間に分かれているのですが、ずっと↓のホテルで生活しました ご飯が美味しいし部屋がきれいでめっちゃ良かったです goo.gl 講義パート(前半課程) Go言語、…

Real-Time Floor pricing

概要 はてなの2018年サマーインターンで機械学習を使って広告収益をX%くらい上げてきた(Xの数値は諸事情で詳しくは言えないけど10いかないくらい) ちゃんとはてなの人に記事の公開許可もらってます 前提知識 Ad Exchange の広告枠の値段はセカンドプライス…