【emacs】faceの文字色と背景色を変更する手順メモ

emacs

新しいモードを使うときにデフォルト色がちらつくことがよくある。毎回調べてる気がするので自分用にメモしておく。

## 1. 色を変えたいface名を調べる
M-x describe-face

## 2. 一覧が表示されるのでface名で検索
M-x list-faces-display

## 3. 該当のfaceの上で、Enter ボタン
## 色設定の画面が開くので、「Choose」でEnterボタン

## 4. 色の一覧表示されるので変更したい色の上でEnterボタン

## 5. 色設置の画面に戻るので、そこでファイル保存(C-x C-s)

以上です

【mysql】コミット前のselectの結果が更新前のままだった理由

php mysql

ネタみたいだけど、また初歩的なミスをしたのでメモ。

mysqlクライアントから確認

$ begin;
$ insert into tests(id, name) values(1, 'test');
$ select count(*) from tests where id = 1;
+----------+
| count(*) |
+----------+
|       1 |
+----------+

期待通りの動きなのだがPHPのスクリプトから同じことをやるとなぜか結果が0件。。結論はこのシステムはDBがマスター、スレーブ構成になっていて、このシステムではselectはデフォルトでスレーブをみにいくというだけでした。。

以上です

【php】curl使い方メモ - GET,POST,PUT,DELETEとJSON

php

今更な内容だけど。たまにcurlで外部のAPI叩く必要があるときにいつも同じこと調べてる気がするのでコピペ用にまとめておく。
GET、POST、PUT、DELETEメソッドでリクエストして、パラメータがちゃんと送れているか確認するためのスクリプト。ついでにパラメータをJSONで送る場合も。

受信側
$method = $_SERVER['REQUEST_METHOD'];
$content_type = $_SERVER['CONTENT_TYPE'];

if ($content_type == 'application/json')
{
    $params = json_decode(file_get_contents('php://input'),1);
}
else if ($method == 'GET')
{
    $params = $_GET;
}
else if ($method == 'POST')
{
    $params = $_POST;
}
else if ($method == 'PUT')
{
    $params = file_get_contents('php://input');
}
else if ($method == 'DELETE')
{
    $params = file_get_contents('php://input');
}

print_r(array(
    'method' => $method,
    'content_type' => $content_type,
    'params' => $params,
));
送信側

GET

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => sprintf(
        '%s?%s', API_URL,
        http_build_query(array(
            'param1' => 'パラメータ1',
            'param2' => 'パラメータ2',
        ))
    ),
    CURLOPT_RETURNTRANSFER => true,
));

$response = curl_exec($curl);
$info = curl_getinfo($curl);

curl_close($curl);

print_r(array(
    'http_code' => $info['http_code'],
    'response' => $response,
));

POST

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => API_URL,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => array(
        'param1' => 'パラメータ1',
        'param2' => 'パラメータ2',
    ),
));

$response = curl_exec($curl);
$information = curl_getinfo($curl);

curl_close($curl);

print_r(array(
    'http_code' => $information['http_code'],
    'response' => $response,
));

POST(JSON)

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => API_URL,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => json_encode(array(
        'param1' => 'パラメータ1',
        'param2' => 'パラメータ2',
    )),
    CURLOPT_HTTPHEADER => array(
        'Content-Type:application/json',
    ),
));

$response = curl_exec($curl);
$information = curl_getinfo($curl);

curl_close($curl);

print_r(array(
    'http_code' => $information['http_code'],
    'response' => $response,
));

PUT

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => API_URL,
    CURLOPT_CUSTOMREQUEST => 'PUT',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => http_build_query(array(
        'param1' => 'パラメータ1',
        'param2' => 'パラメータ2',
    )),
));

$response = curl_exec($curl);
$information = curl_getinfo($curl);

curl_close($curl);

print_r(array(
    'http_code' => $information['http_code'],
    'response' => $response,
));

DELETE

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => API_URL,
    CURLOPT_CUSTOMREQUEST => 'DELETE',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => http_build_query(array(
	'param1' => 'パラメータ1',
	'param2' => 'パラメータ2',
    )),
));

$response = curl_exec($curl);
$information = curl_getinfo($curl);

curl_close($curl);

print_r(array(
    'http_code' => $information['http_code'],
    'response' => $response,
));

これで次回からは早くなるはず。書いたこと忘れてなければ。。以上です

rbenvを使ったローカル環境にrailsをバージョン指定してインストール

Ruby Rails

たまにやりたいときがあるけど毎回調べてる気がするので手順をメモしておく。

# 作業用ディレクトリ作成
$ mkdir test
$ cd test

# rbenvでインストール可能なrubyのバージョン確認してなければインストール
$ rbenv install -l
$ rbenv install 2.4.1

# このディレクトリで使用するrubyのバージョンを設定
$  rvenv local 2.4.1

# bundlerインストール
$ gem install bundler

# Gemfile生成
$ bundle init

# インストール可能なrailsのバージョン確認
$ gem list -ra '^rails$'

# Gemfileにrailsのバージョンを指定して追加
$ vi Gemfile
# frozen_string_literal: true                                                                                                                                                                                      
・・・                                                                                                                                                                                                             
gem "rails", "4.2.9"

# インストール
$ bundle install --path=vendor/bundle

# railsプロジェクト生成
$ bundle exec rails new myapp

# railsアプリ起動
$ cd myapp
$ bundle exec rails s

以上です

参考URL
http://qiita.com/keisuke_kimura/items/5f814a6c6126c14a1619
http://qiita.com/tanakayo/items/7b85261924eca1a5a3d6
http://qiita.com/HayneRyo/items/d493a2b3cec2322f167c
http://qiita.com/narikei/items/cd029911597cdc71c516
Qiitaばっかりだ

vue.js vuex入門 開発で最低限必要そうなこと

vue.js vuex javascript

はじめに

vue.js使うことになりそうなので少しいじってみたのでメモしておく。

とりあえず今回やってみようと思ったことは以下
・ヘッダー、フッター、メニューなどの共通化　
・vue-routeを使ったルーティング
・ログイン機能
・APIへのリクエスト
・vuexの導入

セットアップ
プロジェクトを作成してvuexとaxiosをインストール。vueでのajaxしたい場合axiosが奨励されてるぽい?

$ vue init webpack test
$ npm install --save vuex axios

作る画面
・ログイン画面
・商品一覧画面
・商品詳細画面
こんなかんじの管理画面とかでありそうな画面を想定。ログイン画面以外に未ログイン状態でアクセスしたらログイン画面へリダイレクト。商品一覧と詳細画面ではAPIへリクエストして取得したjsonを画面へ表示する。

ディレクトリ構成

vuexのexampleとか他の人のソースみてるとこんな感じなのかな。

$ tree src
├── App.vue             ## この辺はおきまりぽい
├── main.js
├── api                 ## APIリクエスト
│   └── index.js
├── components          ## コンポーネント
│   ├── Element
│   │   ├── Footer.vue
│   │   └── Header.vue
│   ├── Product
│   │   ├── Detail.vue
│   │   └── List.vue
│   ├── Login.vue
│   ├── Member.vue
│   └── Root.vue
├── router              ## ルーティング
│   └── index.js
└── store               ## vuex関連
    ├── index.js
    └── modules
        └── auth.js

また、config以下のdev.env.jsとprod.env.jsに環境ごとに変わる定数などを定義するのがよさそう。今回はAPIのURLをここに書いた。

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_URL: '"http://api.example.com/"'
})

実装

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // ★ 追加

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                   // ★ 追加
  template: '<App/>',
  components: { App }
})

基本的に今回はvuexを使うのでstoreをVueのオプションに追加。

ルーティング

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import Auth from '@/store/modules/auth'

import Root from '@/components/Root'
import Login from '@/components/Login'
import Member from '@/components/Member'
import ProductList from '@/components/Product/List'
import ProductDetail from '@/components/Product/Detail'

Vue.use(Router)

var router = new Router({
  routes: [
    {
      path: '/',
      component: Root,
      redirect: '/member/list',

      // 大きく「login」と「member」に分ける。member以下はログインしてないと遷移できないように。
      children: [
        {
          path: 'login',
          name: 'login',
          component: Login
        },
        {
          path: 'member',
          name: 'member',
          component: Member,
          meta: {
            requiresAuth: true
          },
          // 各ページは以下に追加していく
          children: [
            {
              path: 'product/list',
              name: 'product/list',
              component: ProductList
            },
            {
              path: 'product/detail/:id',
              name: 'product/detail',
              component: ProductDetail
            }
          ]
        }
      ]
    }
  ]
})

// ログイン認証はここで行う
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !Auth.state.loggedIn) {
    next({
      path: '/login'
    })
  } else {
    next()
  }
})

export default router
APIリクエスト

きっとアプリごとに共通のhttpヘッダーとか送ることが多いと思うのでそういうのはここにまとめるようにする。　

api/index.js

import axios from 'axios'

export default {

  request (method, url, params) {
    var promise = null
    url = process.env.API_URL + url

    if (method === 'get') {
      promise = axios.get(url, { params: params })
    } else if (method === 'post') {
      promise = axios.post(url, params)
    }
    promise.catch(function () {
      return alert('エラーが発生しました')
    })
    return promise
  },

  get (url, params) {
    return this.request('get', url, params)
  },

  post (url, params) {
    return this.request('post', url, params)
  }
}
vuex関連

今回はログイン関連の情報をstoreで管理する。　

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './modules/auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

store/modules/auth.js

import api from '@/api'

export default {
  namespaced: true,
  state: {
    loggedIn: false
  },

  mutations: {
    login (state) {
      state.loggedIn = true
    },
    logout (state) {
      state.loggedIn = false
    }
  },

  actions: {
    login ({ commit }, payload) {
      api.get('/login', {
        mail: payload.mail,
        pass: payload.pass
      }).then(function (response) {
        commit('login')
        // ログイン後、リダイレクト
        payload.router.push('/member')
      })
    }
  }
}
コンポーネント

残りはコンポーネントを実装して画面を作っていく。

コンポーネント概要
Root.vue 全コンポーネントのルートとなる
Login.vue 未ログインの画面
Member.vue ログイン済の画面のルートとなる。ヘッダやフッターなどはここで表示する
Element/Header.vue(Footer.vue) ヘッダー(フッター)
Product/List.vue 商品一覧画面(Memberの中に埋め込まれる)
Product/Detail.vue 商品一覧画面(Memberの中に埋め込まれる)

components/Root.vue

<template>
  <router-view></router-view>
</template>

components/Member.vue

<template>
  <div>
    <app-header></app-header>
    <router-view></router-view>
    <app-footer></app-footer>
  </div>
</template>

<script>
 import Header from '@/components/Element/Header.vue'
 import Footer from '@/components/Element/Footer.vue'

 export default {
   name: 'root',
   components: {
     'app-header': Header,
     'app-footer': Footer
   }
 }
</script>

components/Login.vue

<template>
  <div>
    <h1>ログインページ</h1>
    id:<input type="text" v-model="id" /><br />
    password:<input type="password" v-model="password" /><br />
    <input type="button" value="LOGIN" @click="onLogin" />
  </div>
</template>

<script>
 import { mapActions } from 'vuex'

 export default {
   data: function () {
     return {
       id: null,
       password: null
     }
   },

   methods: {
     ...mapActions('auth', [
       'login'
     ]),

     onLogin: function () {
       var self = this
       self.login({
         mail: this.$data.id,
         pass: this.$data.password,
         router: self.$router
       })
     }
   }
}
</script>

components/Product/List.vue

<template>
  <div>
    <h1>一覧ページ</h1>
    <table>
      <tr>
        <th>id</th>
        <th>name</th>
      </tr>
      <tr v-for="item in items">
        <td>{{ item.id }}</td>
        <td><router-link :to="{ name: 'product/detail', params: {id: item.id} }">{{ item.name }}</router-link></td>
      </tr>
    </table>
  </div>
</template>

<script>
 import api from '@/api'

 export default {
   data: function () {
     return {
       items: []
     }
   },
   beforeCreate: function () {
     var self = this
     api.get('/product')
        .then(function (response) {
          self.items = response.data.items
        })
   }
}
</script>

components/Product/Detail.vue

<template>
  <div>
    <h1>詳細ページ</h1>
    <a v-on:click="$router.go(-1)">戻る</a>
    <table>
      <tr>
        <th>id</th><td>{{ item.id }}</td>
      </tr>
      <tr>
        <th>name</th><td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
 import api from '@/api'

 export default {
   data: function () {
     return {
       item: {}
     }
   },
   beforeCreate: function () {
     var self = this
     api.get('/product/detail', {
       id: self.$route.params.id
     })
        .then(function (response) {
          self.item = response.data.item
        })
   }
 }
</script>
おわりに

また、作ったものをずらずら書いただけになってしまった。storeではどんな値を管理するのがよいのだろうか。APIから取得した値を一旦すべてStoreに保存するようなことも考えたけどけっこう手間そうな割に実装も複雑になりそう。。アプリの要件次第だけれども極力コンポーネントで完結させるのがシンプルになる気がした。以上です。

【mysql】date型とnow()を比較する

mysql

大した話じゃないけど、ミスったのでメモしておく。

calendar

idtarget
12017-09-20
22017-09-21
32017-09-22
こんなテーブルがあって、今日(9/21)以下の日付のレコードを抽出したかった。

ヒットしない

select * from calendar where target <= now();

ヒット

select * from calendar where target <= date(now());

now()は「2017-09-21 00:00:00」となるからあたり前なんだけど。。以上です

macのターミナルでsshが切れやすい場合の対処メモ

mac linux

うちの回線が調子悪いのかsshの切断が頻発。昔にteratermで何か対処したのを思い出して検索したらこれでいけるみたい

~/.ssh/config

ServerAliveInterval 3
TCPKeepAlive yes

ServerAliveIntervalはもっと長い方がよいかも。。以上です