UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

2021-03-01から1ヶ月間の記事一覧

【Youtube】埋め込み動画の自動再生がスマートフォンからだと再生されない

前回の続きで uga-box.hatenablog.com 動画を埋め込む際のオプションで、URLに「autoplay=1」をつけると自動再生されるはずが、スマホではうまくいかなかった(iPhone/Android) 調査した結果、iframe 組み込みの YouTube Player API リファレンスに記載があ…

【Youtube】動画の埋め込み

Youtube動画をサイトに埋め込みたい iframe タグを使用してプレーヤーを埋め込む方法とプレーヤーのオプションなどを調べた結果を書いておく iframeタグの取得 埋め込みたいYoutubeページの[共有] > [埋め込み] 書き出された埋め込み用iframeをコピーして、…

【CSS】white-spaceをつかって改行をなくすと間にスペースがはいる

CSS

ある改行を含む文章をpタグなどで囲って表示すると間にスペースがはいる <p> Windows でコン ピュータの世界 が広がります。 </p> ↓ Windows でコン ピュータの世界 が広がります。 変なところで改行しているデータの方がおかしいのはそれとして、この空白を置換な…

【IntelliJ IDEA】メモリのプロファイリング

Nodeアプリのメモリリークを調べるためにnode-heapdumpを使ってdumpをとり解析しようとしたところ、ChromeのDevToolsでうまくdumpファイルが読み込まれず解析ができなかった 【Node.js】メモリリークを調べる - UGA Boxxx そこで別の方法として普段 IntelliJ…

【Node.js】メモリリークを調べる

Node.jsのアプリケーションのメモリリークを調べたことがなかったので方法を調査する 2017年の記事だけどfurukawaさんの記事を参考にした yosuke-furukawa.hatenablog.com node-heapdump を利用してみる 何らかの事前処理を伴ってからプログラマブルに取得し…

【Node.js】MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 disconnect listeners added to [MemoryStore]

(まだ解決できていないが)開発環境でExpressのNodeアプリケーションを動かしていたところ以下のエラーメッセージが表示された MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 disconnect listeners added to [MemoryStore]…

【Jest】APIのレスポンス結果をモック

Jestで外部のAPIとやりとりするRepositoryをモック化して、テストしやすくしたい jestjs.io まず、importしているRepositoryをモック化する import { findById as findFooById } from "../../repository/FooRepository"; jest.mock("../../repository/FooRep…

【Web高速化】Resource Hints

ユーザが次にアクセスしそうなページのリソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させる方法にResouce Hintsがある このResource Hintsについて調べた w3c.github.io Resource Hintsは以下の4つの要素から構成される dns-pref…

【Webセキュリティ】Content Security Policy

以前、クリックジャグリングを調べた時の対策としてContent Security Policyによる対策を知ったが、書き方が古くなっていたので再調査した uga-box.hatenablog.com 古い例 X-Content-Security-Policy: allow 'self'; frame-ancestors *.ipa.go.jp *.meti.go.…

【JavaScript】条件付きでオブジェクトにメンバーを追加する

JavaScriptで条件に応じてオブジェクトにメンバーを追加するかどうかを下のように実装していた const obj = { foo: "foo", bar: "bar" }; if (someCondition) { Object.assign(obj, { baz: "baz" }); } これをオブジェクト定義時に条件判定してメンバーに追…

【Elasticsearch】ES6からES7へマイグレーションでindexからtypeがなくなる

ES6からES7へマイグレーションしていて ES6のときからライトに使用していたので、アプリケーションの修正点は少なかったが、まとめておく typeがindexがなくなる www.elastic.co template作成時に以下のようにmappingsの下にitemというtypeを作っていたが、E…

【Postman】PostmanからElasticsearchのmulti searchクエリを実行する

Elasticsearchのmulti serachクエリはちょっと特殊でESのdevtoolで実行する場合は GET my-index/_msearch {"index":"accounts"} {"query":{"bool":{"should":[{"match":{"owner.first_name":"Creeple"}}]}}} このように2つのオブジェクトを改行して並べる必…

【SQL高速化】遅いクエリを早くした話

たった1回のDBアクセスに0.1秒くらいかかるクエリがあったので調査した テーブル定義はこんな感じ 緯度経度が格納された位置テーブルと、エリア名などが格納されたエリアテーブル そして、この2つのテーブルの中間テーブルがあり、これらを結合して検索を…

【Webセキュリティ】X-Content-Type-Options

自分のサービスをWebPageTestにかけた結果、セキュリティで重要度は低いがNGがあった sniffingを防ぐためにレスポンスヘッダーに「X-Content-Type-Options: nosniff」を付与すべきというもの developer.mozilla.org IEではContent-Typeに従わずにコンテンツ…

【Fastly】 GAEのトランザクション分割を利用してA/Bテストを行う

GAEのトランザクション分割を利用してA/Bテストを行う方法を考えた uga-box.hatenablog.com ただ、間にFastlyがある場合、何も考えずにオリジンサーバーで表示パターンを切り替えると、A/Bのどちらか 1 つが Fastlyにキャッシュされてしまうので、キャッシュ…

【GAE】トラフィック分割を利用したA/Bテスト

GAE

App Engineにはトラフィック分割という機能があり、トラフィックの配分比率を指定して同じサービスの複数のバージョンにトラフィックを振り分けることができる cloud.google.com これを使えば簡単にA/Bテストできるんじゃないかと考えた 考え方 Aパターンを…

【GTM】GAで定義したカスタムディメンションを取得する

GTM(Google Tag Manger)で、GA(Google Analytics)で定義したカスタムディメンションを取得したい 手順はこのドキュメントにあった support.google.com この中で、「データレイヤーからカスタム ディメンション値を設定する」を行う データレイヤーに描画…

【GA】カスタムディメンションを定義する

GA(Google Analytics)にはカスタム ディメンションの用意されたディメンション以外で、自分で作成できるディメンションがある そのディメンションをつかってABテストの分析に使えないかと考えた support.google.com ドキュメントを読んで気になったところ …

【WebAPI】stopPropagation、preventDefault

モーダルなどのメインコンテンツの手前に表示するコンテンツをクローズする時に、奥にあるメインコンテンツのイベントが実行されてしまった 原因はevent.preventDefault()とevent.stopPropagation()を間違えて実装していたため preventDefaultはリンクの遷移…

【ServiceWorker】サービスワーカーを停止したい

開発中のプロダクトにうっかり中途半端な状態のサービスワーカーを実装してインストールしてしまい 実装を削除した後もChromeがServiceWorkerを実行し続けてしまうので止めたい Chromeから削除 chrome://serviceworker-internals/にアクセスすると、サービス…

【Git】メモ:空コミットをつくる

Git

以下の理由で、Gitリポジトリをつくったあとの最初のコミットを空コミットにしておきたい 新しいfeatureブランチが存在する プルリクをビルドのトリガーにしたい いまままで調べていたのをすぐ忘れるのでオプションをメモするのと、そもそもドキュメントを読…

【Spring Boot】 2.4 系でプロファイルの挙動が変わった

Spring Boot 2.4.X にバージョンアップしたらビルド時にエラーが発生した 具体的には次のような構成で、 └── src ├── main │ └── resources │ ├── application.yml │ ├── application-development-include.yml │ ├── application-development.yml applicatio…

【Elasticsearch】日付ごとの集計値を出す

あるアプリの処理実行時間をstartDateTimeフィールドに格納している このstartDateTimeフィールドを使って日付毎の集計値を出したい Date histogram aggregationedit を使う www.elastic.co { "size": 0, "aggs": { "histogram_daily": { "date_histogram": …