「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を利用していていい加減切り替えたいと思ってテスト中です。

続きを読む

米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リクエストを投げてしまうからそこをコンポーネントに切り分けて、必要なときだけリクエストを投げるようにした……まではよかったんだけど、描画されない。

続きを読む

Google Feed API を YQL で置き換え

yql.jpg RSSフィードを読み込むためのGoogleライブラリ「Google Feed API」が正式に廃止されたのは2017年1月ということなので、もう2年近く放置してたってことになりますが、サイトをいろいろ直しているついでにそれも何とかしておこうと言うことで代替手段を探すとYQLで代替するのが一番スマートそう。

続きを読む

【メモ】jQueryのPOST通信エラー

5aeea1845616c563c675a7c6424b9d21_s.jpg jQueryのajax関数で送信したときのエラーをハンドリングすると、

  • textStatus : error
  • errorThrown.message: 空
となって原因の特定に時間が掛かってしまいましたが、解決後に症状と原因を考えて列挙するとこんな感じ。

スクリプトの流れ

  1. フォームを生成
  2. buttonをクリックし、イベントハンドラでAjax処理
  3. 引数を付加してPOST通信
  4. サーバ側でDB処理を行う
  5. 成功したらページを再読込み

サンプルコード

$.ajax({
type : 'post',
url : 'sample.php',
data : {
'id' : 'sampleID'
}
}).done(function(data, textStatus, jqXHR) {
// ページを再読み込み
window.location.reload(true);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
});

続きを読む

【メモ】タグに独自属性を設定してjQueryで取得する

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 (中略) すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

使用例

Ippei Suzuki
これを取得するには、 関数data()を使うと便利です。
$('#userName').data('userId');

注意

data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。
$('#userName').data('userId'); //1234
$('#userName').attr('data-userId', '5678');
$('#userName').data('userId'); //1234 ← キャッシュを読み込む
$('#userName').attr('data-userId'); //5678 ← 属性を見る
その辺りは気をつけて上手いこと処理してやる必要があるようです。

参考

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP jQueryのdata-*属性キャッシュ仕様と対策

続きを読む

楽天市場の商品ページにPHPでの処理結果を表示させる

rms.jpg 色々制約がある楽天市場の商品ページ。通常だとJavaScriptも使えませんが、店舗用のサーバサービスである「楽天GOLD」を使うとJavaScriptが使えます。また「楽天GOLD」のページであれば、楽天市場のページにiframeを使って埋め込むことも可能です。 楽天GOLDでは基本的にhtmlしか使えないので、基本的にJavaScriptでの処理になります。それでやっても良いんですが、楽天GOLDは基本的にファイルサーバ的なサービスなので、処理系を作るのには向いてません。なので、プログラム処理する部分はサーバを借りてそこに置くしかありません。 で、結局流れとしては、

[自サーバ] プログラム処理して結果出力 ↓ [楽天GOLD] Ajaxで出力を取得して表示 ↓ [楽天市場] 楽天GOLDのページをiframe使って商品ページに埋め込む
という感じ。

注意点

自サーバの出力を取得するためには、自サーバ側でクロスドメインを許可しておく必要があります。詳しくはこの辺を参考に。 続 クロスドメインで使う XMLHttpRequest と CORS の話 | 日頃の行い PHPでやるんなら、出力時にヘッダを付加しておくのが便利です。
header('Access-Control-Allow-Origin: *');
Ajax取得はjQueryで適当にやりました。以下、サンプルコード。
$(document).ready(function() {
$.ajax({
url : 'http://hogehoe/sample.php',
type : 'GET',
dataType : 'html',
crossDomain : true,
}).done(function(data, textStatus, jqXHR) {
$("#result").append(data);
});
});
楽天市場は色々と使いづらいけど、やってみればいろいろやり方はあるんだなー

続きを読む