カテゴリー: Programing / Coding

【メモ】Vagrant では npm run watch が動作しない【#np2020】

Laravelで静的ファイルを更新した場合、Laravel-mixを使ってコンパイルするわけですが、今の僕のサイズで1回あたり40秒ぐらい掛かるので、頻繁にコードを書き換える必要があるときには結構煩雑。出来ればこうもっとパパッとやって欲しい、バックグラウンドでやっておいて欲しい。

続きを読む

LaravelでスクレイピングしてAmazonのおすすめ度を取得【#np2020】

Amazonで参考にするものと言えばレビューとそれに基づいて表示されるおすすめ度の星の数。商品表示するときにその星の数を取得出来ると良いんですけど、残念ながら現在のAPIでは提供されていません。提供されているのは、レビューとおすすめ度が表示されたページのURLだけです。例えばこんな感じ。

続きを読む

Tumblrから画像データを取得してサムネイル表示するアプリをLaravel + BootstrapVueで作ってみました【#np2020】

昨日から引き続いて。 Laravel + BootstrapVueの習作の一環として、Tumblrから画像データを取得してきてサムネイル表示するアプリケーションを作成してみました。このブログのトップにずっとあったやつですね。「umbls.com」というサイトで「Tumblr Thumbnails」として提供していたものとほぼ同じですが、テスト版なので機能面での互換性はありません（デザインのアレンジも出来ません）。

続きを読む

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ファイルは参照される頻度も高いので、これが小さくなるのはとてもデカい。というわけで、デプロイ前にはそれをしたかったんですが……これまでエラーが出て上手く行かなかったんですね。それがようやく解決出来ましたというお話。

続きを読む

Laravel + Bootstrap4でレスポンシブ・フォントサイズ（Responsive font sizes/rfs）を有効にする【#np2020】

Bootstrap.jpg Bootstrap v4.3から、デバイスやビューポートのサイズに合わせてフォントサイズを変更することが出来る「レスポンシブ・フォントサイズ」に対応しています。ドキュメントを読むと、

RFSは、 $enable-respond-font-sizes Sass変数を true に変更してBootstrapを再コンパイルすることで有効になる
と書いてあります。 Laravelの場合、Bootstrapのソースコードはnode_modulesディレクトリ以下にあり、そこに設定ファイルもあるのですが、このディレクトリはレポジトリに登録されていないために環境によってかわることがあるし、Nodeのトラブルを解決する為に削除→再インストールをされることもあるディレクトリです。なので、ここの設定を変更してもあんまり意味がありません。 ていうかそもそも「laravel/node_modules/bootstrap/scss/vendor/_rfs.scss」では、 
// Disable RFS by setting $enable-responsive-font-sizes to false
$enable-responsive-font-sizes: true !default;
となっていて最初から有効になってます。そうなのねー

続きを読む

SCSSコンパイル時に「Incompatible units rem and px」エラー【#np2020】

npmのサムネイル画像 以下の構成をコンパイルしようとしたときに 

├ resouces
│    ├ _variables.scss
│    └ app.scss
└ public
└ app.css
次の様なエラーが出ました。 
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
^
Incompatible units rem and px.
最初何のことだかさっぱりわからなかったのですが、これ要するに、
数式に含まれている要素の単位は同じじゃないとダメだよ
ということなんですね。 ソースを見返してみると「_variables.scss」の中で「$font-size-base 」が「px」で指定されていましたが、ここはBootstrap4が使っている部分なので「rem」で指定しないといけません。 というわけで「14px」を「0.9rem」に変換して再度コンパイルしたら無事成功。なるほど。

続きを読む