エンジニア日記

日々の開発あれこれ

Gitで管理されているファイルを管理対象から外す

ローカルで、あるファイルが長期的に編集状態にあり、かつ間違ってコミット対象としない時などに便利。

管理対象から外す

1
git update-index --skip-worktree【ファイル名】

管理対象外のファイルを確認

1
git ls-files -v | grep ^S

管理対象に戻す

1
git update-index --no-skip-worktree【ファイル名】

Macのdiffツール「meld」インストールメモ

(必要であれば)Homebrewをアップデート

1
brew update

次にHomebrew-Caskをインストール

1
brew tap caskroom/cask

もしインストール時、権限エラーになった際は下記コマンドを実行する

1
2
sudo chown -R $(whoami) /usr/local/Cellar
sudo chown -R $(whoami) /usr/local

meldインストール

1
brew install caskroom/cask/meld

medl を起動する

ターミナルで下記コマンドを実行

1
meld

meldのウィンドウが立ち上がります。

ESLintでJavaScriptのコードスタイルを統一

ESLintとは?

  • 特定のスタイルガイドライン(検証ルール)に準拠していない、問題のあるパターンやコードを見つけるための静的検証ツール。
  • 検証ルールの追加や、有効or無効化、検出レベル(ワーニング、エラーなど) が自由に設定できる。

ESLintのインストール

プロジェクトルートに移動し、下記コマンドを実行

1
2
3
4
$ npm install eslint --save-dev

$ ./node_modules/.bin/eslint -v
v4.9.0

コーディングスタイルのルールを記述するファイル(json形式ならば.eslintrc.json)を下記コマンドで生成

1
2
3
4
5
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? (Use arrow keys)
❯ Answer questions about your style  (対話形式で作る)
  Use a popular style guide          (人気のスタイルガイドから作る)
  Inspect your JavaScript file(s)    (JavaScriptファイルから作る)

コーディングスタイルをチェック

プロジェクトルートに生成された、.eslintrc.jsonに記述されているルールに従ってチェックしてくれる

1
2
3
4
5
$ ./node_modules/.bin/eslint index.js
/index.js
   46:10  error    'hoge' is defined but never used                     no-unused-vars
   83:13  warning  Unexpected console statement                   no-console
   85:37  error    Empty block statement                                    no-empty

常にコーディングスタイルをチェックするように、IntelliJに設定する

設定より、

  1. Languages & Frameworks
  2. JavaScript
  3. Code Quality Tools
  4. ESLint
  5. Enableにチェック
  6. ESLint package にeslintモジュールのパスを設定

ESLint

コーディングスタイル ルール一覧

公式サイト

qiita

ESLintのエラールール。

React Native Life Cycle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';

export default class sampleClass extends Component {

    // コンストラクタ
    constructor(props) {
        super(props);

        this.state = {
            hoge: null
        };
    }

    // マウント時マウントされるときに1度だけ実行され、
    // 以降は実行されない
    componentWillMount(){
        // render()直前の処理。
        // setStateを行うとrenderは更新されたstateを
        // 参照する。
    }

    // 描画処理
    render() {
        return (
            <View></View>
        );
    }

    // マウント時マウントされるときに1度だけ実行され、
    // 以降は実行されない
    componentDidMount(){
        // render()直後の処理。
        // setStateを行うとrenderが再実行されるので、
        // 行わない方がいい。
    }


    // ------------------------------------------
    // 更新時ライフサイクルメソッド ここから
    // ------------------------------------------

    // 新しいpropsを受け取ると実行
    // 引数に受け取る
    componentWillReceiveProps(nextProps){
        // 更新時ライフサイクルメソッドでsetState()を
        // 実行できるのはここだけ。
    }

    // stateが更新されると実行
    shouldComponentUpdate(nextProps, nextState){
        // パフォーマンス・チューニング時は特に意識する。
        // falseを返すと、以降のcomponentWillUpdate(), render(), componentDidMount()の処理が
        // スキップされる。

        return true;
    }

    componentWillUpdate(nextProps, nextState){
        // 再render()直前の処理。
        // 変更前後のprops、stateを参照し処理を行える。
        // render()処理に移る直前にprops、stateの値が更新される。
    }

    componentDidUpdate(prevProps, prevState){
        // 再render()直後の処理。
    }

    // ------------------------------------------
    // 更新時ライフサイクルメソッド ここまで
    // ------------------------------------------


    // アンマウント時に実行
    componentWillUnmount(){
        // タイマー停止などの後始末処理を記述する。
    }
}

AppRegistry.registerComponent('sampleClass', () => sampleClass);

Vagrant + PHP + IntelliJ IDEA でリモートデバッグを設定

Vagrant側の設定

サーバーにログイン

1
vagrant ssh

peclコマンドをインストール

(php7の場合、pearのバージョンは1.10.0以降でないと上手く動かない)

1
2
3
4
5
6
sudo yum --enablerepo=remi-php70 install php-pear

pear -V
PEAR Version: 1.10.5
PHP Version: 7.0.11
Zend Engine Version: 3.0.0

xdebug インストール

1
pecl install xdebug

You should add “zend_extension=/usr/lib64/php/modules/xdebug.so” to php.ini
インストールに成功すると最後に出力される

php.iniにパラメータを設定

zend_extension=xdebug.so ← Apacheの場合はフルパス指定「/usr/lib64/php/modules/xdebug.so」
xdebug.remote_enable = On
xdebug.remote_connect_back = On
xdebug.remote_autostart = On
xdebug.remote_host = 192.168.33.1 ← echo $_SERVER[“REMOTE_ADDR”]; の値
xdebug.remote_port = 9001 ← ローカルPCにて lsof -i :9001 コマンドを使用し、使用されていないポートか確認
xdebug.idekey=“HOGEhoge” ← IDE側の設定で使用する

環境変数PHP_IDE_CONFIGを設定

Apache

1
SetEnv PHP_IDE_CONFIG serverName=FUGAfuga

nginx

1
fastcgi_param PHP_IDE_CONFIG serverName=FUGAfuga;

cliで実行する場合

vagrantユーザーの~/.bashrc に設定

1
2
export PHP_IDE_CONFIG="serverName=FUGAfuga"
source .bashrc

サーバー再起動

nginx

1
2
sudo service nginx restart
sudo service php-fpm restart

Apache

1
sudo service httpd restart

設定を確認

1
php -i | grep xdebug

IDE側の設定

接続するリモートホストを設定する

  1. RUN → Edit Configurations を選択
  2. ダイアログ左上にある「+」を押下し、PHP Remote Debugを選択 Edit Configurations php_remote_debug
  3. Serversの「…」を押下し、Serversダイアログを表示
    Servers1
  4. Serversを設定
    Name : PHP_IDE_CONFIG serverName=で指定した値(FUGAfuga)
    Host、Port : vagrant ssh-config コマンドで確認
    Debugger : Xdebug
    Use Path mappings をチェックし、ローカルとリモートホストでシンクしているディレクトリを設定
    Servers_設定 Preferences → PHP → Debug よりXdebugのポートを設定
    Preference Ide keyを設定(HOGEhoge)
    Name を設定 (わかりやすいサービス名、Vagrant) Servers2
  5. RUN → Break at first line in PHP scripts にチェック
    (デバッグが動作するとき、必ず最初の1行目でブレークポイントが走る)

  6. RUN → Start Listening for PHP Debug Connections をチェック

    ブレークポイントをはり、処理の途中でデバッグができるようになりました。

Let’s EncryptのSSL証明書を取得し、Apacheに設定する

certbot-auto のセットアップ

(「certbot-auto」は Let’s Encrypt が提供しているツール)

1
2
3
4
5
6
7
8
9
# curl https://dl.eff.org/certbot-auto -o /usr/bin/certbot-auto
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 57175  100 57175    0     0   162k      0 --:--:-- --:--:-- --:--:--  163k

# chmod 700 /usr/bin/certbot-auto

# ls -l /usr/bin/certbot-auto
-rwx------. 1 root root 57175 Sep 23 06:27 /usr/bin/certbot-auto

certbot-auto コマンドを実行し、証明書を作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# certbot-auto certonly
Saving debug log to /var/log/letsencrypt/letsencrypt.log

How would you like to authenticate with the ACME CA?
-------------------------------------------------------------------------------
1: Apache Web Server plugin - Beta (apache)
2: Spin up a temporary webserver (standalone)
3: Place files in webroot directory (webroot)
-------------------------------------------------------------------------------
Select the appropriate number [1-3] then [enter] (press 'c' to cancel): 3  # 既存のWEBサーバを使うモードを選択
Plugins selected: Authenticator webroot, Installer None
Please enter in your domain name(s) (comma and/or space separated)  (Enter 'c'
to cancel): 【your-domain.com】  # 取得したドメイン
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for 【your-domain.com】

Select the webroot for 【your-domain.com】:
-------------------------------------------------------------------------------
1: Enter a new webroot
-------------------------------------------------------------------------------
Press 1 [enter] to confirm the selection (press 'c' to cancel): 1   # 指示に従い1を押下する
Input the webroot for 【your-domain.com】: (Enter 'c' to cancel): 【/var/www/your-document-root】  # ドキュメントルート
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:

・・・・・

/etc/letsencrypt/live/【your-domain.com】配下に証明書が自動生成される

Apacheに設定

1
2
3
4
5
6
7
# vi /etc/httpd/conf.d/ssl.conf

以下の項目を設定する。

SSLCertificateFile /etc/letsencrypt/live/【your-domain.com】/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/【your-domain.com】/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/【your-domain.com】/chain.pem

Apacheを再起動すると、httpsで安全な接続が出来るようになりました

Sequel ProでVagrantのMySQLに接続

1.接続するホスト情報をvagrant ssh-configで確認。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
cd vagrant_project

vagrant ssh-config
Host hoge
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile /Users/hoge/vagrant_project/.vagrant/machines/vh/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
  ForwardAgent yes

2.Sequel Proの設定画面にてSSHタブを選択し、接続情報を記述

設定名
MySQLホスト 127.0.0.1
ユーザー root
パスワード rootユーザー パスワード
データベーズ 接続するデータベース名
SSHホスト 127.0.0.1
SSHユーザー vagrant
SSH鍵 /Users/hoge/vagrant_project/.vagrant/machines/vh/virtualbox/private_key
SSHポート 2222


設定キャプチャ

接続できました。

S3にCSSファイルをアップロードしたら、読み込みエラー

S3にCSSファイルをアップロードし、上書き更新を行ったら突然下記読み込みエラーに遭遇。
CSSが読み込まれなくなった。

1
Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream

以下の手順でファイルのヘッダー情報を修正し、対応

  1. S3 consoleへ移動
  2. 対象のCSSファイルを選択
  3. 「さらに」をクリックし、メタデータを選択
  4. Content-Typeのvalueをbinary/octet-streamから「text/css」に変更

エラーが解消されました。