みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

JavaScript

ブラウザーで大量の硬貨を表示する

ドイツのベルリン美術館には,500,000個の硬貨が所蔵されており,紀元前7世紀に小アジアで硬貨が鋳造され始めてから21世紀の現在に至るまでの幅広い種類の硬貨があることで有名です*1. この膨大な所蔵品で戯れることが可能なWebサイトを紹介します. uclab.…

node.jsでERR_HTTP2_HEADER_SINGLE_VALUE

TestCafeを使っていたところ,"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出たので,原因と対応方法をまとめます. node.jsのinternal/http2で"ERR_HTTP2_HEADER_SINGLE_VALUE"というエラーが出るのは,headerに重複するキーが存在するためです. ERR_HT…

reCAPTCHAを使用するフォームを自動でテストする

Google reCAPTCHAを使用することで,ボットがフォームに機械的なデータを送信するのを防ぐことができますが,フォームが正しく動作するかを確認するためにテストをすると,機械的なデータを送信することになり,フォームを通過できません.このどうしようも…

Vue.jsのv-bindにObjectを使うときはXSSに気をつける

Vue.jsを使うときはDOM-based XSSに注意しなければなりません.例えば,v-htmlがXSSの原因となる可能性があることは有名です. Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. On…

Sentry Loaderが簡単すぎた

Webアプリケーションのエラーを扱うためにSentryを利用しています. webpackを使ってSentry SDKを使うと,bundle.jsが正常にロードされれば問題なくSentryにエラーが送信されますが,もしもbundle.jsでSentryが読み込まれる前にエラーが発生すると,エラーが…

MPEG DASHで動画を配信する時のCloudFrontのCORS設定

MPEG DASHを使ってアダプティブストリーミングで動画を配信しようと挑戦したところ,CORSで躓いたのでまとめます. 目標 shaka-playerを使ってDASHでアダプティブストリーミングする. 動画を配信するためにAmazon S3を使い,CloudFrontでキャッシュする. …

開発環境のTestCafeでSSLを利用する

TestCafeは,JavaScriptでe2e testを作成すれば,たくさんの種類のブラウザーで実行できる便利なライブラリです. Apple Payなど通信がhttpsでなければ実行できない機能があるため,開発環境のTestCafeでもhttpsを使うことにしました.そのためにTestCafeの-…

SPA開発でhot reloadしたら自動でconsoleを削除する

hot reloadを使いながらシングルページアプリケーション(SPA)を開発していると,ブラウザーを再読み込みせずに開発が進められるのでとても便利なのですが,その代わりにconsoleにエラーが溜まっていきます. このような状況では,以前のバージョンのエラーが…

npmのpackage.jsonでソートする

npmをつかってWebサービスのフロントエンドの開発をしていると,いろいろなパッケージをインストール・アンインストールすることがありますが,次第に順番がぐちゃぐちゃになって,だんだんカオスになっていきます.それを簡単になんとかするには, > npm re…

npmでnode-sassがpermission deniedとなる問題

npmでnode-sassをインストールしようとしたら,permission deniedとエラーになりました. 環境 macOS 10.14.3 node-sass@4.11.0 詳細 > node-sass@4.11.0 install /Users/xxx/node_modules/node-sass > Unable to save binary /Users/xxx/node_modules/node-…

webpack 4, vue.js, vue-routerを用いたSPAの開発環境

自分用メモも兼ねて,シングルページアプリケーション(SPA)基本となるプロジェクトの構成を紹介します. webpack 4ではconfig.jsを省略できるようになったようですが,少しは設定が必要なようです. ディレクトリ構成 index.html node_modules/ package.js…

WebpackでHot Module Replacementを使用する時のCPU使用率を改善する

Webpackを使ったウェブサイトの作成時にHot Module Replacementを使用するとnodeのCPU利用率が異常に高いので,原因を調べてみました. 環境 iMac late 2015 macOS High Sierra node v9.2.0 webpack 3.8.1 watchするファイルが多すぎるのが原因 webpackを起…

HxPat公開

特許の分類検索を補助するサービスを作成してみました. Vue.js, Djangoの練習を兼ねています.3日間で完成に至ったのは,Vue.jsがよいライブラリであるおかげです. hxpat.herokuapp.com ICPやFIなど特許分類を用いた検索に有用なツールだと思います.使っ…

jQueryでarrayに対し$.ajax()を非同期直列で呼び出す

$.ajax()を使ってarrayに格納された複数のurlを順番に取得していく方法です. var urls = ["909253","909254","909255","909256"]; urls.reduce(function(previous,current) { return previous.then(function(response) { if (response) { console.log(respo…