Live Server

VSCode VSCode

デザイナーさんが作成した画像ページから、HTMLを作成する際に見つけたVSCodeの拡張です。

何がすごいかって、ボタンひとつで、 Webサーバが立ち上がり、ブラウザが開いて HTMLを更新するたびにホットリロードしてくれるところ。

npmの設定しなくていいし、楽ちんだ。

f:id:rarao1048:20191029183511p:plain

シャローコピーとディープコピー

Javascript

Nuxt.jsの勉強で出てきたオジェクトコピーの用語

シャローコピー 配下の構造のオブジェクトを参照コピーする。 コピーしたオブジェクトの値を変更すると、コピー元の値も変わってしまう。 参照コピーなので当たり前か。

ディープコピー 配下の構造のオブジェクトを値コピーする。 コピーしたオブジェクトの値を変更しても、コピー元の値は変わらない。

Javascriptでディープコピーをやる場合は、 loadshというライブラリを使うとcloneDeep()関数でできちゃうから楽。

npmでインストールするといいよ。

Nuxt.jsをVisual Studio Codeでデバッグ

nuxt.js

１日格闘してやっとできたのでメモ

Debbuger for Chromeをインストール

VSCodeの"Debbuger For Chrome"をインストールします。

package.jsonの変更

  "scripts": {
    "dev": "nuxt",
+  "dev-debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",    ←追加
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },

nuxt.config.jsの変更

  build: {
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {  ←ここから3行追加
      config.devtool = 'inline-cheap-module-source-map'
    }
  },

Visual Stdio Codeのデバッグ構成作成

.vscode/launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}",
      },
      {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
          "run-script",
          "dev-debug"
        ],
        "sourceMaps": true,
        "port": 9229
      },
    ],
    "compounds": [
      {
        "name": "Full-stack",
        "configurations": ["Launch via NPM", "Launch Chrome"]
      }
  ]
}

デバッグウインドウからFull-stackを実行すれば、Chromeが起動する。 起動したばっかりだと、ビルドが間に合わず404ページが出るかも。リロードすると、画面が表示できる。

f:id:rarao1048:20191014205834p:plain

trapコマンド

trapコマンドって便利だね。 シェルコマンドの実行中に、Ctrl + Cでプロセス停止イベントを補足し、コマンドを実行することができる。

使い方

trap 'コマンド' シグナルリスト


$ trap 'echo trapped.' 2
※ ここで Ctrl+c を押す。
$ trapped.

Amazon Product APIで売り上げ実績が30日ないとエラーになるようになってた

以下のプログラムで何度やってもエラーになってた。 どうやら、2019年1月から、仕様変更があり、 売り上げ実績が30日ないとエラーを返すようになったらしい。

使いづらくなったなあ。

import os
import time

from amazon.api import AmazonAPI # pip install python-amazon-simple-product-api

AMAZON_ACCESS_KEY = os.environ['AMAZON_ACCESS_KEY']
AMAZON_SECRET_KEY = os.environ['AMAZON_SECRET_KEY']
AMAZON_ASSOCIATE_TAG = os.environ['AMAZON_ASSOCIATE_TAG']

amazon = AmazonAPI(AMAZON_ACCESS_KEY, AMAZON_SECRET_KEY, AMAZON_ASSOCIATE_TAG, Region='JP')
products = amazon.search(Keyword='kindle', SearchIndex='All')

for product in products:
    print(product.title)
    print(product.offer_url)
    price, currency = product.price_and_currency
    print(price, currency)

エラー

Traceback (most recent call last):
  File "5.6_amazon_product_search.py", line 13, in <module>
    for product in products:
  File "/Users/qhssk842/PycharmProjects/python_clowling/scraping/lib/python3.7/site-packages/amazon/api.py", line 544, in __iter__
    for page in self.iterate_pages():
  File "/Users/qhssk842/PycharmProjects/python_clowling/scraping/lib/python3.7/site-packages/amazon/api.py", line 561, in iterate_pages
    yield self._query(ItemPage=self.current_page, **self.kwargs)
  File "/Users/qhssk842/PycharmProjects/python_clowling/scraping/lib/python3.7/site-packages/amazon/api.py", line 573, in _query
    response = self.api.ItemSearch(ResponseGroup=ResponseGroup, **kwargs)
  File "/Users/qhssk842/PycharmProjects/python_clowling/scraping/lib/python3.7/site-packages/bottlenose/api.py", line 274, in __call__
    {'api_url': api_url, 'cache_url': cache_url})
  File "/Users/qhssk842/PycharmProjects/python_clowling/scraping/lib/python3.7/site-packages/bottlenose/api.py", line 235, in _call_api
    return urllib2.urlopen(api_request, timeout=self.Timeout)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 222, in urlopen
    return opener.open(url, data, timeout)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 531, in open
    response = meth(req, response)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 641, in http_response
    'http', request, response, code, msg, hdrs)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 569, in error
    return self._call_chain(*args)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 503, in _call_chain
    result = func(*args)
  File "/usr/local/Cellar/python/3.7.4_1/Frameworks/Python.framework/Versions/3.7/lib/python3.7/urllib/request.py", line 649, in http_error_default
    raise HTTPError(req.full_url, code, msg, hdrs, fp)
urllib.error.HTTPError: HTTP Error 503: Service Unavailable
ERROR: exit status 1

自身で売り上げ発生させればいいじゃんと思って、自分でつくったリンクで商品を購入してみたけど、ダメだね。。。 うーん。どうしたらいいかなぁ。。。。