プログラミングvue-chartjsで円グラフに直接ラベルを表示する【vue-chartjs】
chart.jsには様々なプラグインが存在していて、それらを使うことでchart.jsを拡張することができます。今回はラベルを表示するための chartjs-plugin-datalabels を用いて円グラフに直接ラベルを表示します。 ...
プログラミングプログラミングvue-chartjsでグラフの大きさを調整する
vue-chartjsでグラフを描画すると大きさがメチャクチャになったりして、ハマったので調整する方法についてメモです。またvue-chartjsにはあまり関係ありませんが、Nuxtでやりたいと思います。 目標は「親要素に合わせた大...
プログラミングVueで画像プレビュー機能を作る
<input>と$refsを使う方法 流れとしては 画像を受け取るのを@changeで監視する@changeが発火したら$refsから画像を取得してcreateObjectURLでその画像のURLを作る画像のURL...
プログラミングVueで閉開するメニューを実装してみた
今回はVueを使って、閉開するメニュー（アコーディオンメニューって言うのかな？）を実装してみました。こういう閉開する機能を作るのはJavaScriptでも基本的なところなので、簡単に実装できるのではないかなと思います。 ロジ...
プログラミング同ドメインなのにaxiosでのCORS policyエラーが起きた時の解決メモ
Vueでaxiosを使っているときに以下のようなエラーが出て、ハマってしまったので解決した方法を残しておきます。ただ、あくまでこの方法でたまたまうまくいったという程度のものなので、根本的に理解して解決するにはほかのサイトを参照することをオ...
FlaskHerokuでflaskアプリをデプロイする方法
flaskアプリをHerokuにデプロイする方法について解説していきます! 事前準備 Heroku CLIのインストールやログインが済んでいる方は飛ばしてくださいね。 Heroku CLIのインストール コマンドで...
FlaskflaskでPostgreSQLを使えるようにする方法
必要なパッケージをインストールする flaskからPostgreSQLを操作するには flask_sqlalchemypsycopg2 の2つのパッケージが必要になります。 pip install flask_sq...
プログラミングHerokuのPostgreSQLをCLIで使う方法
HerokuではPostgreSQLがアドオンとして提供されてるのですが、このPostgreSQLをCLIで扱う方法について解説していきます。 Herokuでアプリを作成する まずはHerokuで新しいappを作成しましょう。...
プログラミング簡単にMacでPostgreSQLを使えるようにする
今回はPostgress.appというものを用いて、MacでPostgreSQLを使えるようにします。難しいコマンド等もなく、ただアプリケーションをインストールするだけなので、誰にでもできると思います。 Postgres.appをダ...
FlaskVueとflaskの連携のやり方【Vue&flask】
プロジェクトを用意する まず最初に作業フォルダを作ります。今回はVueをfrontendディレクトリ,flaskをbackendディレクトリにして作業します。 プロジェクト名 ├── backend └── frontend ...