【Vue.js】Vuexで他のモジュールのアクションを呼び出す【メモ】

Vue.js logo

ストアオブジェクトを複数のモジュールに分けていた場合に、1つのモジュールから他のモジュールのアクションを呼び出した方が効率的ということがあります。それぞれ名前空間が決まってるわけだし、呼び出すことは出来ないんじゃないか……と思ってたんですけど、普通に出来るみたいですね。

続きを読む

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

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

続きを読む

【メモ】npmからyarnに乗り換え【#np2020】

yarn_logo.png 少しずつ開発している新サイト(プロジェクト名:np2020)では、環境の設計以来ずっとnpmを使っていたんですけど、業務でこれまた新しく設計された環境(設計したのは前任者)で開発をしていて、そこでyarnを使っていてインストールがとても速くて使いやすいので、こっちでもそれに乗り換えましょうということで乗り換え。 npmとyarnの違いについてはこの辺がわかりやすいです。 Yarnとnpmの違い:JavaScriptパッケージマネジャーを比較する – WPJ npm vs yarnどっち使うかの話 – Qiita 手順は以下の通り。

  1. npmでyarnをインストール
  2. yarnコマンドを実行
以上です。それだけ。

続きを読む

Amazonの検索を簡易に行うツールをLaravel + BootstrapVueで作ってみました【#np2020】

bootstrapvue

Amazon Search

Amazon Search

簡単な解説

前提として、特にWebサービスとしてリリースしたいということではなくて、自分がブログに商品を貼り付ける時なんかに軽く使いたいツールであって、僕以外の人間が使うことは想定していないということがあります。なんで、あくまでデモであって動作は保証してません。ただ仕事でもBootstrapVueを使い始めたこともあって、一通り出来ることはやってみようじゃないかという方針で組み込んではいます。割と軽快に動くし、bookmarkletも使えるしいい感じです。 基本はLaravelがAmazon APIとの通信処理部分を担当しJSONで出力、それをVue.jsが受けて描画、装飾部分はBootstrapが担当するという感じです。 作成するに当たって苦労したところはデザインの調整ですかね。Bootstrap4の癖にはだいぶ慣れてきたんですが、細かい調整「こことここを合わせたい」だとか、「ここもう少しスペースを空けたい」とかそういうのをするのにいちいちビルドするのが面倒に感じました。デベロッパーツール使えば良いんですけど。まあ、ナビとかレスポンシブとかでかなり楽させてもらってるのでプラスマイナスゼロですかね。 Vueの処理部分についてはさほど大変なことはやっていないので、先日作った商品情報表示用のアプリの一部分を切り分けて共通化して、APIからのレスポンスをそれで処理して表示して終わり。このあたりはLaravelとVueのおかげでものすごく簡単です。ありがたい。

この後は

とりあえずここまででAmazon関連は終わりですね。十分なテストが出来、個人として十分実用的なものは作れたので。まあでも次も多分、Laravel + BootstrapVueで作るサンプル的な機能かな。

候補

  • RSSフィードを読み込んで指定したスタイル(リスト表示、サムネイル一覧、スライドショーなど)で書き出す機能
  • Chart.jsを使ったグラフ描画

続きを読む

「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】

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

続きを読む

JavaScript エラー「Uncaught SyntaxError: Unexpected end of input」への対応

記録されたエラーは下記の通り。

"message": "Uncaught SyntaxError: Unexpected end of input",
"file": "",
"lineNo": 1,
"colNo": 158,
"stack": "SyntaxError: Unexpected end of input",
"user_agent": "Mozilla/5.0 (Linux; Android 7.1.1; OPPO A79; Build/N6F26Q; wv) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.92 Mobile Safari/537.36 SogouMSE,SogouMobileBrowser/5.6.0"
このエラーは一般的にはコーディングのミスで発生するものです。例えば閉じ括弧を付け忘れたとか。 Uncaught SyntaxError: Unexpected end of inputというエラー でもこのエラーは長く安定して動いている(はずの)スクリプトで生じていて、十分にチェックしてもそのての文法ミスは見つかりません。しかも毎回記録されるわけではなく、何か特定の条件が重なったときにだけ記録されるようです。もし閉じ括弧の付け忘れなら、毎回エラーが記録されるはず。 致命的な問題にはなっていなさそうだけれど、気持ち悪いので調査を続けたところこんな情報が。

analog_MultiMeter: JSON.parseでハマった

原因 ChromeのJSON.parseは、空文字が入るとおかしなことになるらしい。 JSでは空文字列はfalse性を持つので、上記の対策で通るという事。 そのエラー発生は良いとしても、JSON.parse()のエラーでなくてEnd of Inputなんてわかりづらいエラー、それもHTMLの1行目なんかに出るのが悲しい。

なるほど。 ChromeのJSON.parse()に空文字を入れるとエラーになると。エラーログからでは具体的にどのJavaScriptファイルでエラーが出ているのかわからないし、そもそも1行目のエラーとなっていて問題の特定が難しかったけれど、幸いサイト内で「JSON.parse()」を使っている部分は限られていたので、そこを改修。 もともと発生頻度の低いエラーなのでこれで効果があるかどうかは不明だが、しばらく様子を見たいと思います。 ちなみに僕が見た環境での「JSON.parse()」は、こんな感じで使われていました。
function (error) {
var obj_error = JSON.parse(error);
}
どこかで生じたエラーをキャッチしてエラー処理を行う的な感じの部分。errorはエラーメッセージを格納するようでPHPとの連携がある部分なんですが、コードを追っていくとどうやら、一部の古いコードで例外は投げるがエラーメッセージは投げない、という処理がなされている模様。それがJavaScript側に渡され、空のerrorが作られ、それを JSON.parse() しようとしてエラーが出る……みたいな流れ。 そう考えると悪いのはPHPのコードの方なんじゃないのという気もしないでもないけど、だとしても空文字に対する処理は必要だし。とりあえず解決したっぽくて良かった。

続きを読む

米Yahoo!のYQLサービスが終了してました(なんてことだ)

先月の頭くらいに、動かなくなっていたGoogle Feed API を YQL で置き換えるということをやりました。 Google Feed API を YQL で置き換え | mutter これを使ってサイト内でRSSを読み込んで表示するということをやって上手く行っていたんですけど、最近また上手く表示されていないようなので見に行ったら……YQL終わってました。

YQL – Yahoo Developer Network

Important EOL Notice: As of Thursday, Jan. 3, 2019, the YQL service at query.yahooapis.com will be retired.

マジかー。まあいかにもYahoo!らしい時代遅れな感じのサービスではあったけども、それなりに便利そうだったのに。今どきは流行らないか。 仕方ない、Vue.jsで実装するかなあ……と思ったけど、そうだ、相手がはてなブックマークRSSの時のCoRSの解決方法が僕にはわからないんだった。一旦サーバ側で情報を取得してから、 ヘッダ付けてVue.js用に出力し直せば出来るかなあ。面倒くさすぎるけど。 ……復活は引っ越し後かな。。

続きを読む

【今日のハマり処】コンポーネントのテンプレートをnew Vue のルートに入れて `Property is not defined on the instance.`

Vue.js logo

別々のページで開発していた機能を一つのファイルにまとめることとして、そのままだと全部のページで 他サービスのAPIにGETリクエストを投げてしまうからそこをコンポーネントに切り分けて、必要なときだけリクエストを投げるようにした……まではよかったんだけど、描画されない。

続きを読む