タグ: javascript

【Chart.js】グラフの変更が完了しました【#np2020】

Chart.js

これまでのFlashを使ったグラフからChart.jsを使ったグラフへの切り替えが完了しました。既存のデータを現在のシステムに移行する必要がありましたが、Laravelで適当なコマンドツールを作って、amChartのXMLファイルを読み込んで解析、必要に応じてデータベース上にテーブルを作ってデータを入力という流れで簡単にコンバートできました。特にLaravelのEloquent ORMには助けられてばかりです。素敵すぎ。

続きを読む

開発環境の大幅な刷新が必要性はわかるけれども（しんどい）

倒れるプログラムのキャラクター パートタイムなエンジニアとして復帰してから早くも1年と8ヶ月が経ちました。早いなあ。始めの1年2ヶ月は前任者であり技術部門の責任者であったAさんの部下として、Aさん退職後の6ヶ月間は責任者代理として仕事をしてきましたが、開発環境を変えるというのは楽しいけれどしんどいですね。自分の趣味であれば新しい技術に対しては楽しさ100で接することが出来るんですけど、業務でってことになると学習コストがそのまま納期へのプレッシャーとなっていくので、なかなか楽しんでばかりもいられない。ただでさえ歳取って新しいことが入って来にくくなってるので、若い頃よりもさらに学習コストが掛かる。きついなー。

続きを読む

Vue.js+Chart.js（vue-chartjs）+Laravelでグラフを作成しました。 【#np2020】

vuechartjs.png このブログではこれまでFlashを使ったグラフを採用してきたのですが、ブラウザ側のFlashへの対応が厳しくなっている今、Flashじゃないよなあということでリニューアル後はJavaScriptによるグラフを採用することにしました。 で、その作業が一段落したので現行ブログの方も置き換え。

サンプル

こんな感じです。データは普段「内閣支持率」のグラフで使用しているもの。 インタラクティブに動きますが、これ、JavaScriptなんですよねえ。すごい。しかも自分ではほとんどコードを書くことなく実現出来てしまいます（データ取得部分を除く）。 以下、導入のポイントと参考になったサイトを。

続きを読む

【vue-chartjs】グラフのオプションを一括設定したい【#np2020】

vuechartjs.png Vue.js と Chart.js を連携させてグラフを描画する場合、ラッパーとして「vue-chartjs」を使うと面倒なことがかなり省略できて楽です。ファイルさえ準備しておけばデータを入れて簡単にグラフが描画できるというイメージでしょうか。導入に関しては公式サイトなどを参照してください。 最初に | vue-chartjs

続きを読む

RSSを読み込んで表示するだけのツールをLaravel + BootstrapVueで作ってみました【#np2020】

Laravel + BootstrapVueの習作として、RSSを読み込んで何らかの形で表示するだけのツールを作成してみました。例によって僕個人が個人サイトで使用する目的のためだけに制作しているので、汎用性は保証していません。 （トラフィック次第では制限が掛かる可能性もあります）

続きを読む

「npm run production」でエラー（メモリ不足）が出てコンパイル出来ない【#np2020】

npmのサムネイル画像 今現在のフロントエンドはBootstrapVueで、Laravel Mixを使って 

npm run dev
コマンドで開発用コンパイルをして動作チェック、問題なければmasterブランチにマージしてデプロイというかたちになっています。「npm run dev」コマンドは複数のファイルを1つにまとめてくれるんですが、minifyはしません。一方で本番用コンパイルである 
npm run production
の方は、まとめた上でminifyしてくれます。どれくらい小さくなるかは環境によると思いますが、僕の環境ではおおむね1/4程度にはなるようです。jsファイルやcssファイルは参照される頻度も高いので、これが小さくなるのはとてもデカい。というわけで、デプロイ前にはそれをしたかったんですが……これまでエラーが出て上手く行かなかったんですね。それがようやく解決出来ましたというお話。

続きを読む

【メモ】vue-chartjs を入れて「[Vue warn]: Invalid prop: type check failed for prop “chartData”」が出る場合の対処方法【#np2020】

vue-chartjs

グラフを描くJavaScriptライブラリとして最近人気なのが「Chart.js」というやつらしいです。このサイトでもいくつかグラフを作っていますが、いまだにFlashを利用していていい加減切り替えたいと思ってテスト中です。

続きを読む

【メモ】npm「package-lock.json」がコンフリクトしたら

npm ローカル環境で環境に変更を加えてpushしようと思ったら「package-lock.json」がコンフリクト。どうやら別のローカル環境で行った変更をマージするのを忘れていたみたい。これは面倒なことになった……と思ったのだけど、どうやら普通に 

$ npm install
とするだけで勝手に直してくれるらしい。マジか。

やってみた

npm WARN conflict A git conflict was detected in package-lock.json. Attempting to auto-resolve.
npm WARN conflict To make this happen automatically on git rebase/merge, consider using the npm-merge-driver:
npm WARN conflict $ npx npm-merge-driver install -g
などなどと表示され、 
updated 1 package and audited 16936 packages in 22.821s
found 0 vulnerabilities
問題なく終了！ そのままマージコミットして事なきを得ましたとさ。 慌てて手作業で直し始めなくて良かった。素晴らしすぎ。 これに限らず今さらながら様々な自動化の恩恵を受けている気がします。モダンな開発環境、ステキ。 あと、
Attempting to auto-resolve.
っていう言い回しが控えめでとても好き。

参考

npm installでコンフリクトしたpackage-lock.jsonを自動でresolveしてくた – nwtgck / Ryo Ota package-lock.jsonについて知りたくても聞けなかったこと – Qiita

続きを読む