朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

Atom HelperでCPUが100%になる問題

Atom HelperでCPUが100%になる問題

AtomのCPUががが
作業中、ブラウザとエディタくらいしか立ち上げていないのに、Macのファンが回りっぱなし、熱暴走。アクティビティモニタを確認すると

Atom HelperのCPUが異様な高さ

CPU高い問題は結構報告上がっているみたい。

AtomHelper High CPU Usage

Atom HelperのCPUが高い時、対処法

起動、再起動を繰り返してもダメなら以下 いくつか対処を。

atomをsafeモードで立ち上げる

$atom --safe
atomを safeモードで立ち上げると、拡張機能が呼ばれません。Atom Helperも立ち上がらないので、根本的な解決にはなりませんが、一時的ならこれでも良いかも。

拡張機能をすべて停止

拡張機能が原因なことも。一端停止する

パッケージディレクトリを削除

$mv ~/.atom/packages ~/.atom/backup-packages
パッケージを別のディレクトリへ対比。atom再起動でCPUが安定すれば成功かも。
私はその後、再びパッケージディレクトリをもどしました。
$mv ~/.atom/backup-packages ~/.atom/packages

一応、今のところこれでCUPは落ち着き、Macも静かになりました。

webpackのインストール

スクリーンショット 2018-02-09 12.58.38.png (57.0 kB)

Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルにまとめてくれる便利なツールです。

webpack公式サイト

npmでインストールします。

npmとnodeのバージョンは以下の通りで環境構築を進めます。

chihiro.matsuda$ npm -v
5.6.0
chihiro.matsuda$ node -v
v8.9.4
cd react-sample

私はreact-sample というディレクトリ内で作業することにしました。npmのパッケージ郡もこのディレクトリ以下に設置します。

>npm initの実行

npm initでpackage.jsonを作ります。
任意のディレクトリでターミナルから npm initを実行します。

全部Enterキー連打でも問題ありません。

chihiro.matsuda$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (react_sample) react-beginner <<< パッケージ名
version: (1.0.0) 0.0.0 <<< バージョン
description: package for react beginner<<< パッケージの説明
entry point: (index.js)<<< ビルドされるJSをファイル名
test command:<<< テストコマンド
git repository: git://github.com/chihirokaasan/react-beginner<<<git リポジトリ
keywords: react <<< npm 公開時に必要らしい
author: ITKAASAN.LLC<<< 著者
license: (ISC)<<< ライセンスこのまま
About to write to /Users/chihiro.matsuda/work/react_sample/package.json:

{
  "name": "react-beginner",
  "version": "0.0.0",
  "description": "package for react beginner",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/chihirokaasan/react-beginner.git"
  },
  "keywords": [
    "react"
  ],
  "author": "ITKAASAN.LLC",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/chihirokaasan/react-beginner/issues"
  },
  "homepage": "https://github.com/chihirokaasan/react-beginner#readme"
}

できあがったpackage.jsonのファイル

webpackのインストール

ではさっそくwebpackのインストールを行います。

グローバル

chihiro.matsuda$ npm install webpack -g

プロジェクト毎

chihiro.matsuda$ npm install webpack --save-dev

今回はプロジェクト毎にインストールする方を選択しました。
package.jsonのdevDependenciesにバージョン付きで登録します。

npm installするとpackage.jsonに自働で追記されます。

  "devDependencies": {
    "webpack": "^3.10.0"
  }

package.jsonの差分

試しに何かビルドしたい。そうだ、jQuery入れよう。

試しにjQueryをnpmでインストールして、ちょっとしたイベントを別ファイルで書いて、webpackで一つのファイルにビルドしてもらう手順をやります。

jQueryをnpmでインストールする

chihiro.matsuda$  npm install jquery --save

package.jsonの差分

webpackとinstallのオプションが違うのでdependenciesに保存されます。
package.jsonのdependenciesに関する情報はこちらでよくまとまっております。
ちゃんと使い分けてる? dependenciesいろいろ。

var $ = require("jquery");

$(function(){
  console.log('hoge');
});

PATHを通して、webpackのビルドコマンドを実行

webpackでビルドします。

nodeモジュールのパスを通す

 export PATH=$PATH:./node_modules/.bin

今回はシンプルにjQueryを呼び出してコンソールに文字列を出力するだけ。

/javascript/sample1.js

var $ = require("jquery");

$(function(){
  console.log('hoge');
});

私はjavascriptディレクトリを掘って、そこにjsファイルを作りました。
これをビルドします。すると、カレントディレクトリにbundle.jsができあがります。

chihiro.matsuda$ webpack javascript/sample1.js bundle.js

ビルドしたファイルをHTMLで呼び出し

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Webpack build test</title>
</head>

<body>
  <script src="bundle.js"></script>
</body>
</html>

本来jQuery本体と、実行のスクリプト2つ読み込まないといけないですが、ビルドされてひとつにまとまっているため、ビルドされたファイルだけが読み込まれていればOK。

console.logの出力結果console.logの出力結果

スクリーンショット 2018-02-09 12.51.06.png (15.2 kB)

スクリーンショット 2018-02-09 12.51.32.png (42.1 kB)

サンプルはこちら

react-beginner

※reactのことを書こうと思うも、環境構築のことをつらつら書いていたらなかなかreactのことが書けない。。

npmのn(エヌ)によるnode.js最新版のインストール

任意で適当に作業用ディレクトリを作成

chihiro.matsuda$ mkdir react_sample
chihiro.matsuda$ cd react_sample/

nodeとnpmのバージョン確認とアップデート

npmはインストールされている前提で進めます。

npmのバージョン確認

npmのアップデート情報ありましたらアップデートを行ってください。

chihiro.matsuda$ npm -v
5.5.1
   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.5.1 → 5.6.0    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯

chihiro.matsuda$ npm i -g npm to update

npmのバージョン確認

chihiro.matsuda:react_sample chihiro.matsuda$ node -v v8.9.1

ややこちらも推奨バージョンからは低め。 せっかくなのでLTS(推奨版)の最新である8.9.4を使いたいと思います。

(最新のnodeのバージョンは公式でご確認ください)

npm パッケージである n を導入

nodebrewっていう選択もあるんですが、windowsだと選択肢に無いので、npmパッケージのひとつであるn(エヌ)を導入して、最新のLTSの最新のnodeを導入します。

chihiro.matsuda$ npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@2.1.8
added 1 package in 3.094s

nでインストール可能な最新のバージョンを確認する

chihiro.matsuda$ n --stable
mkdir: /usr/local/n/versions/node: Permission denied
mkdir: /usr/local/n/versions/io: Permission denied
9.4.0
chihiro.matsuda$ n --lts
mkdir: /usr/local/n/versions/node: Permission denied
mkdir: /usr/local/n/versions/io: Permission denied
8.9.4

stableは9.4.0 LTSなら8.9.4のようです

その前にPermission エラーが気になりますね。 n では、この/usr/local/n ディレクトリに指定したバージョンのnode.jsがインストールされます。よって、インストールコマンドを叩く前に、ディレクトリを作って 権限を与える必要があります。

chihiro.matsuda$ cd /usr/local/n
-bash: cd: /usr/local/n: No such file or directory

ディレクトリ自体が存在しないようです。

/usr/localディレクトリにnディレクトリを作る

/user/localは macならばsudo しないと作れないので、sudoでroot権限でディレクトリを作って、whoamiで現在のユーザーに権限を与えます。

chihiro.matsuda$ sudo mkdir mkdir /usr/local/n
chihiro.matsuda$ sudo chown -R $(whoami) /usr/local/n

再度先程commandでのインストール可能なバージョンを調べてみましょう。 今度はpermissionエラーは出力されないと思います。

chihiro.matsuda$ n --stable
9.4.0

node.js LTS版のインストール

chihiro.matsuda$ n lts

       install : node-v8.9.4
       mkdir : /usr/local/n/versions/node/8.9.4
       fetch : https://nodejs.org/dist/v8.9.4/node-v8.9.4-darwin-x64.tar.gz
######################################################################## 100.0%
   installed : v8.9.4

chihiro.matsuda$ node -v
v8.9.4

これで推奨版の最新がインストールされました。

node.jsのバージョンを変更する

めでたく推奨版がインストールされましたが、やっぱり最新版を使いたいということもあると思います。latest バージョンをインストールしてみます。

chihiro.matsuda$ n latest
install : node-v9.5.0
mkdir : /usr/local/n/versions/node/9.5.0
fetch : https://nodejs.org/dist/v9.5.0/node-v9.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
installed : v9.5.0

chihiro.matsuda$ node -v
v9.5.0

無事最新版のnode.jsがインストールできました。

やっぱりさっきのバージョンに戻す!という場合も

chihiro.matsuda$ n lts

で、戻すことができます。 指定されたバージョンがあれば切り替えをし、無ければnode.jsの本家サイトからダウンロードして切り替えます。

細かいバージョンを指定してインストール

lts やlatestを使わず、細かいバージョンを指定してインストールすることもできます。

chihiro.matsuda$ n list

0.0.1
0.0.2
0.0.3
0.0.4
(省略)
8.9.3
8.9.4
9.0.0
9.1.0
9.2.0
9.2.1
9.3.0
9.4.0
9.5.0

ダウンロード可能なバージョン一覧を表示したらダウンロードしたいバージョンを指定してnコマンドでインストールできます。

chihiro.matsuda$ n 9.5.0

nodebrewもいいけど、すでにnpmコマンドが使えるなら n(エヌ) も良い選択ですよー

WordPressのテストデータベースと本番環境データベースを分ける

WordPressのテストデータベースと本番環境データベースを分ける


CPIのレンタルサーバーに移転した話は前回のブログの通りなのですが、このCPIレンタルサーバー、テスト環境と本番環境の2つが予め用意されているんですね。

テストURLの例

http://(ユーザーアカウント).smartrelease.jp/

WordPressのWordPressのwp-config.phpにDBを複数記述する

CPIのレンタルサーバーだとテストサーバーからSmartReleaseというツールを使って本番環境にデプロイしていくのですが、何も設定しないと本番環境とテスト環境のデータベースは一緒なので、データベースを2つ用意してあげて、wp-config.phpにホストによってデータベースを切り替えられるように設定してあげればOKです。

wp-config.phpに記述するのが正しいフローなのかどうかは不明ですが、取り急ぎDBをHOSTで切り替える手段として。