Chromeからactix-webにHTTPリクエストを実行した際に発生したCORSエラーの解消

環境についてざっくり クライアント側 ブラウザ: Google Chrome バージョン 87.0.4280.141 (Official Build) (64ビット) OS: Windows 10 Home 19041.746 HTTPクライアント: axios v0.21.1 サーバ側 OS: Raspbian GNU/Linux 10 (buster) webフレームワーク: actix-web v3.3.2 現象 Access to XMLHttpRequest ... has been blocked by CORS policyというエラーが出力される Raspberry Pi 4 Model B上でバックエンド(actix-web)とフロントエンド(Vue CLI)を稼働させている。WindowsPCからブラウザを使ってフロントエンドにアクセスし、axiosを使ってバックエンド(actix-web)にGETリクエストを実行した。すると、ブラウザのコンソールに以下のようなエラーが出力された。(ローカルIPが記述されていたところは一部編集している。) Access to XMLHttpRequest at 'http://<localIP>:50001/' from origin 'http://<localIP>:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource....

January 16, 2021 · 2 min

Vue.jsでローディング表示を実装する

ローディング表示モジュールの調査 vue.jsでローディング表示を行う場合、ローディング表示に関係するモジュールについて調査する。 出来れば、 実装が簡単 よく見かけるような見た目(独自性がない) メンテされている という条件にあてはまるものを採用したい。 調べた結果を以下の表にまとめた。 名前 種類 GitHub Star 最終更新(2020/05/06時点) 備考 vue-loading Vueコンポーネント 2018/12/22 紹介している記事が多い vue-spinner Vueコンポーネント 2017/10/07 Vue2.0をサポートしていない Single Element CSS Spinners css 2019/12/09 よく見かける見た目 vue-loading-overlay Vueコンポーネント 2020/04/18 全画面に表示するらしい vue-wait Vueコンポーネント 2019/10/08 だいぶ機能がリッチそう ajaxload.info gif - - よく見かける見た目 調べて出てきた候補は以上。...

May 6, 2020 · 1 min

Chart.jsで時刻データを扱う

Chart.js公式のドキュメントを参考にして、Chart.jsで時刻データを扱う場合の描画オプションについて確認する。 入力データ 入力データはx軸データをy軸データを各点それぞれ指定する。 今回はx軸データに時刻データを使う。 例としては、以下のように指定すればOK。 data: [{ x: '1995-12-17T00:00:00', y: 1 }, { x: '1995-12-18T00:00:00', y: 10 }, { x: '1995-12-21T00:00:00', y: 20 }, { x: '1995-12-25T12:00:00', y: 30 }, { x: '1996-01-01T00:00:00', y: 40 }] データフォーマット 時刻スケールのデータを使う場合、フォーマットはMoment.jsが扱えるフォーマットであればどういった形式でも良い。詳細はMoment.jsのドキュメント参照。 描画オプション 時刻目盛りを扱う場合、以下のオプションを設定できる。 adapters.date 外部の時刻ライブラリ(つまりMoment.js以外)を使うためのオプション。 distribution データのプロット方法。 指定できる値はlinearまたはseriesのいずれか。 初期値はlinear。 linearはデータ描画間隔が時間間隔に応じて変化する。 seriesはデータ描画間隔がすべて同じになる。 以下に同一データを用いてdistribution設定のみ変えた場合の描画例を示す。 linearを指定した場合 var ctx = document.getElementById('distribution_linear').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { datasets: [{ label: 'linear', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1995-12-17T00:00:00', y: 1 }, { x: '1995-12-18T00:00:00', y: 10 }, { x: '1995-12-21T00:00:00', y: 20 }, { x: '1995-12-25T12:00:00', y: 30 }, { x: '1996-01-01T00:00:00', y: 40 }] }] }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', //!...

April 26, 2020 · 9 min

Chart.jsで横軸が日付のグラフを作成する

webサイト上で横軸が日付情報のグラフを作りたかったのでChart.js周りで色々調べた。 横軸が単純な数値じゃない場合は面倒くさくなるかなと思っていたが、Chart.jsが非常に使いやすく、すんなりできた。 最終的に作ったもの 画像で貼ろうと思ったが、結構サイズが大きいのでリンクで貼り付けておく。 Chart.jsとは グラフ類を描画するためのJavaScriptライブラリ。 HTMLの<canvas>要素に2Dグラフィックを描画できる。 ライセンスはMIT。 Chat.jsのインストールと使い方 基本的な使い方を公式に従って確認してみる。 インストール 今回はとりあえず手軽そうなCDNを使う。 よってHTMLに以下のタグを追加する。 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> なお、ここで Chart.bundle.min.js を選択したのは、今回日付データを扱うため。 Chart.min.js の方は日付データを扱うためのライブラリMoment.jsが含まれていない。 使い方 HTML側はグラフ描画用の<canvas>タグを作成する。 先ほどのCDNの参照及び今回作成するJavaScriptの読み込みを合わせて、HTML側のソースは以下のようになる。 index.html JavaScript側は公式のサンプルを参考にして以下のようにする。 main.js これら2つのファイルを適当なところに保存して、index.htmlをブラウザで開く。 以下のようなグラフがブラウザ上に表示される。 横軸が日付情報のデータをプロットする サンプルが動いたので、今回扱いたい、横軸が日付情報のデータをプロットする。 HTML側は特に変更せず、JavaScript側を以下のように変更する。 main.js 参考ページ main.jsを上記のように変更し、index.htmlをブラウザで開くと以下のようなグラフが描画される。 横軸が日付になっており、横軸の間隔もデータに合わせていい感じになっている。 まとめ Chart.jsを使って横軸が日付情報のデータをプロットできた。 色々と描画オプションがあるようなので、それぞれ変更させるとどのようにグラフが変化するか、また今度まとめたい。 確かな力が身につくJavaScript「超」入門 第2版 狩野 祐東 Amazon Kindle 楽天 楽天Kobo

April 5, 2020 · 1 min

Laravel+Vue.jsでLighthouseのスコアを0点から97点にした(バンドルサイズ削減)

Laravel+Vue.jsで作成していたwebサイトの応答速度が激遅だったので、対策を実施した。 環境 Laravel 6.14.0 Vue.js 2.6.11 対策前はページロードに20秒かかっていた 特に何も考えずにwebサイトを作っていたら、トップページのロードに20秒ほどかかっていた。 これではさすがにwebサイトとして成立しない。 Googleが提供しているwebページ分析ツールLighthouseを使ってパフォーマンスの測定を行ったところ、以下のような結果になった。 堂々の0点である。提示されている対応策の詳細を見ると、以下のように書かれていた。 どうやらバンドル後のapp.jsのサイズが約4MBと、超巨大になっているらしい。対応策としてapp.jsのサイズ削減を行った。 対策1:本番用ビルド設定を適用する バンドルサイズ 3.86MB(app.js) → 1.59MB(app.js) 解説 そもそもビルド設定が間違っていた…。ビルドコマンドとして npm run dev を実行していたが、これは開発用のビルドコマンドらしい。 本番用のビルドコマンド npm run prod を実行したところ、バンドルサイズは3.86MB→1.59MBと、約40%になった。 Lighthouseの結果 0点→10点に上昇した。 対策2:gzipで圧縮する バンドルサイズ 1.59MB(app.js) → 395KB(app.js.gz) 解説 以下のページを参考に、gzipでapp.jsを圧縮した。 そのままコピペで適用できた。 Lighthouseの結果 10点→63点に上昇した。 対策3:ページごとにJSファイルを分割する バンドルサイズ 395KB(app.js.gz) → 243KB(app.js.gz) 解説 以下のページを参考に、ページごとにJSファイルを分割した。 こちらも特に詰まることはなく、ほぼコピペで実装できた。 この対策を実装したことで、ビルド後のJSファイルが以下のように、分割されて生成されるようになった。 Lighthouseの結果 63点→87点に上昇した。 対策4:bootstrap-vueの選択的インポート バンドルサイズ 243KB(app.js.gz) → 129KB(app.js.gz) 解説 対策1~3で、あらかた大きなところは対策できたと思ったので、より細かいところを対応するため、webpack-bundle-analyzerを使ってバンドル結果の分析をした。 webpack-bundle-analyzerの出力結果は以下のようになった。 この結果から bootstrap-vue ckeditor lodash あたりのサイズが大きいらしいことが分かった。...

March 8, 2020 · 1 min