ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

RubyMineで間違ったファイルタイプを割り当ててしまった時の変更方法

RubyMine で aaaaaa.rb というファイルだけど、RubyではなくText を間違って割り当ててしまった時の設定の修正方法です。

Preference  > Editor > File Types 

を表示

Text を選択すると、Registed Patternsに aaaaaa.rb があるはずなので これを削除するとaaaaaa.rbが Ruby ファイルとして認識してくれるようになります。

f:id:jun9632:20190619101254p:plain

地味なのに、すごいハマってしまいました。

関連記事

たのしいRuby 第6版 (Informatics&IDEA)

たのしいRuby 第6版 (Informatics&IDEA)

BtoC向け 後払いサイト比較

NP後払い

ネットプロテクションズの後払いサービスNP後払い

www.netprotections.com

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 5.0% 0円 1取引ごとに190円 -
Bプラン 4.4% 5,000円 901,000円以上
Cプラン 3.6% 20,000円 2,026,000円以上
Dプラン 2.9% 48,000円 4,321,000円以上

ミライバライ

ライフカードの後払いサービス「ミライバライ」

www.lifecard.co.jp

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 4.8% 0円 1取引ごとに164円 -
Bプラン 4.3% 5,000円 1,000,000円以上
Cプラン 3.5% 20,000円 1,875,000円以上
Dプラン 2.8% 48,000円 4,000,000円以上

注文情報登録API、審査状況確認API、キャンセルAPI、出荷情報APIを利用するするには、初期費用20万円 月額 2万円 の料金が別途必要 注文情報登録APIのみの利用は無料。

@払い

スコア後払い決済サービス

www.scoring.jp

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 4.7% 0円 1取引ごとに コンビニ:153円 コンビニ+郵便局:185円 -
Bプラン 4.2% 4,700円 1,000,000円以上
Cプラン 3.4% 19,000円 1,800,000円以上
Dプラン 2.7% 45,700円 3,800,000円以上

APIの利用は無料で、リアルタイム与信も可能

クロネコ代金後払いサービス

ヤマト運輸系の代金後払いサービス

www.yamato-credit-finance.co.jp

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 5.0% 0円 1取引ごとに コンビニ:160円 コンビニ+郵便局:190円 -
Bプラン 4.4% 5,000円 901,000円以上
Cプラン 3.6% 20,000円 2,026,000円以上
Dプラン 2.9% 48,000円 4,321,000円以上

後払い.com

株式会社キャッチボールの後払い決済サービス

www.ato-barai.com

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 4.8% 0円 1取引ごとに169円 -
Bプラン 4.2% 4,5000円 810,000円以上
Cプラン 3.5% 18,000円 2,090,000円以上
Dプラン 2.8% 45,000円 4,170,000円以上

GMO後払い

GMOペイメントサービスが提供する後払い決済サービス

www.gmo-ps.com

プラン 手数料率 月額固定費(税抜) 請求書発行・郵便料金 月間取引額の目安
Aプラン 4.7% 0円 1取引ごとに コンビニ:150円 コンビニ+郵便局:180円 -
Bプラン 4.2% 4,500円 ,9000,000円以上
Cプラン 3.4% 18,000円 1,700,000円以上
Dプラン 2.7% 45,000円 3,900,000円以上

Font AwesomeをVue.jsにインストールして使う

f:id:jun9632:20180621154229p:plain

Vue.jsにFont Awesomeをインストールして使います。

インストール

下記のパッケージをインストールします。

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

追加分のiconも利用したい場合は、こちらのパッケージもインストールしてください。

$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

importの設定

src/main.js に下記のように編集します。 下記のケースではアイコンのspinnerだけを利用しています。

import Vue from 'vue'
import App from './App'

/* 追加ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faSpinner)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)
/* 追加ここまで */
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

ほかのアイコンが必要な場合は、下記のように必要なアイコンをimportして、libraryに追加してください。

import { faSpinner, faArrowDown} from '@fortawesome/free-solid-svg-icons'
library.add(faSpinner, faArrowDown)

えいやぁで全部追加する場合は、下記のように書くこともできます。

import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

.vueで利用する

実際 .vueファイルでアイコンを利用する場合は、下記のようになります。

<template>
  <fa-icon icon="spinner" class="fa-3x fa-pulse" />
</template>

参考サイト

fontawesome.com

github.com

www.npmjs.com

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

Vue Nativeをインストールしてみたら想像以上に簡単だった!

f:id:jun9632:20180620110835p:plain

これまで、React Nativeが気になりながらも、学習コストを考えてVueを選択していたのですがVue Native が登場したんですね! 嬉しい状況です。

vue-native.io

早速、インストールから、最初の起動までを試してみました。

パッケージのインストール

vue-native-cli と create-react-native-app のパッケージをインストールします。

npm install -g vue-native-cli
npm install -g create-react-native-app

watchmanのインストール

watchmanがインストールされていないと npm start を実行した時にエラーが発生します

今回 blewでインストールします。

brew install watchman

プロジェクトの作成

プロジェクトを作成していきます。

今回プロジェクト名は 「test-vue-native」 として作成していますが、 適宜自由に変更してください。

vue-native init  test-vue-native

起動

cd test-vue-native
npm start

watchmanがインストールされていないと、下記のようなエラーが発生します。

See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-native@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-vue-native@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

起動が成功したら 下記のようにどのように起動するかが表示されるの表示したいものをクリック

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

今回 i で iosのエミュレータで起動しました。

f:id:jun9632:20180620103559p:plain

そのほかの動作は

  • a で Androidのエミュレータ起動
  • i で iOS エミュレータ起動
  • s で 電話番号かメールにアプリのURLを送信
  • q でQRコードを表示
  • r (小文字)で 再起動
  • R (大文字)でキャッシュを削除してから再起動
  • d で developモードとproductionモードの切り替え

感想

ここまでは、想像以上に簡単でした。

ここから、VueとNativeのコンポーネントを組み合わせればできるのかなというイメージでいますが アプリ初心者ので、モロモロ問題は出てきそうなので色々と試してみたいと思います。

参考サイト

Vue Native

GitHub - GeekyAnts/vue-native-core: Vue Native is a framework to build cross platform native mobile apps using JavaScript

Expo

GitHub - react-community/create-react-native-app: Create a React Native app on any OS with no build config.

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

vue cli で Github の graphql (API)を vue-apolloを使って叩く

f:id:jun9632:20180614113106p:plain

vueのインストール

vue init webpack my-project

何個か質問されるので、回答しながら進んでください。

インストール終わったら、

パッケージをインストールして、起動!

cd my-project
npm install
npm run dev

vue-apolloのインストール

vueからgraphqlを叩きやすくしてくれるモノです。

github.com

下記パッケージをインストールします。

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

main.jsに設定を追加

こんな感じです。

import Vue from 'vue'
import App from './App'
import router from './router'

import {ApolloClient} from 'apollo-client'
import VueApollo from 'vue-apollo'
import { HttpLink } from 'apollo-link-http'
import {ApolloLink, concat} from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'

Vue.config.productionTip = false
Vue.use(VueApollo)

const AccessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `bearer ${AccessToken}`,
      Accept: 'application/vnd.github.v4.idl'
    }
  })
  return forward(operation)
})

const httpLink = new HttpLink({
  uri: 'https://api.github.com/graphql'
})

const apolloClient = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache()
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
  defaultOptions: {
    $loadingKey: 'loading'
  }
})

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  router,
  components: { App },
  template: '<App/>'
})

headers の Authorizationに githubのAccessTokenを渡してあげています。

githubのAccessTokenは下記リンクよりの取得して自分のtokenに修正してください。

https://github.com/settings/tokens

compornetの書き方

適当に graphql.vueなどでお試しください。

<template>
  <p>
    {{viewer.login}}
  </p>
</template>

<script>
import gql from 'graphql-tag'

const ViewerQuery = gql`
  query {
    viewer {
      login
    }
  }
`

export default {
  name: 'index',
  data () {
    return {
      viewer: ''
    }
  },
  apollo: {
    viewer: {
      query: ViewerQuery,
      // update (data) {
      //  return data.viewer
      // }
    }
  }
}
</script>

<style scoped>

</style>

{{viewer.login}} に自分のgithubのアカウント名が表示されれば成功です。

下記はポイントや注意です

import gql from 'graphql-tag'

graphql-tagをインポートします。

graphqlのクエリーを書きやすくしてくれるもの

const ViewerQuery

const ViewerQuery に graphql-tagを使って、クエリーを書いています。

ハマったのが、

gql`

`

ングルクォーテーション【 ' 】 じゃなくて バッククォーテーション【 ' 】です。

ご注意を!!

受け取り用の変数とapolloからの呼び出しを定義

dataにviewerを定義しています。

data () {
    return {
      viewer: ''
    }
  },
apollo: {
    viewer: { // <= セットする変数名
      query: ViewerQuery, // <= 呼び出すクエリー
    }
  }
}

今回、graphqlのクエリの戻りが、下記のようになります。

{
  "data": {
    "viewer": {
      "login": "xxxxxxx"
    }
  }
}

※ 変数名とレスポンスでdata配下の名前をviewerで統一しておくと、暗黙的にセットしてくれます。

ここもハマりポイントで、

下記のように レスポンスの名前と変数名が異なると値がセットされません。

data () {
    return {
      hello: ''
    }
  }
apollo: {
    hello: { 
      query: ViewerQuery
    }
  }
}

↑ ダメな書き方です

しかし

変数名とレスポンスの名前が違う時 や レスポンスの部分的に値をセットしたい時などは、 update (data) を使って特定の値をセットすることもできます。

data () {
    return {
      hello: ''
    }
  }
apollo: {
    hello: { 
      query: ViewerQuery,
      update (data) {
        return data.viewer
      }
    }
  }
}
data () {
    return {
      viewer: '',
      login: ''
    }
  }
apollo: {
    login: { 
      query: ViewerQuery,
      update (data) {
        return data.viewer.login
      }
    }
  }
}

参考サイト

ありがとうございます

GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS

GitHub - apollographql/graphql-tag: A JavaScript template literal tag that parses GraphQL queries

Introduction to GraphQL | GitHub Developer Guide

GraphQL API Explorer | GitHub Developer Guide

新卒エンジニアがVue+GraphQL+ServerlessでTodoアプリ作ってみた

express-graphql + vue-apollo で GraphQLを試してみた | PLAID engineer blog

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

Nuxt.jsをインストールする

f:id:jun9632:20180613104804p:plain

Nuxtをインストールしていきます。

今回は、nuxt_testというプロジェクト名で作るようになっていますが、 適宜変更してください。

また、vue-cliを使っていますが、

インストールしていなければ、下記でインストールすることができます。

npm install -g vue-cli

インストール方法

スターターテンプレートでインストールしています。

途中、Project nameやProject description、Authorなど聞かれますが、用途に合わせて設定してください。

vue init nuxt-community/starter-template nuxt_test

インストールが完了したら、パッケージをインストールします。

cd nuxt_test
npm install

以上です。

プロジェクトの起動は以下です。

npm run dev

http://localhost:3000 で確認することができます。

こんな画面がでれば成功です。

f:id:jun9632:20180613104623p:plain

関連記事

marketing-web.hatenablog.com

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

参照記事

ja.nuxtjs.org

Javascriptで置換する

f:id:jun9632:20180529213304p:plain

Javascriptで置換(replace)する時の注意点

2018-05-29

2018/05/29

に置換したい時に replace 使えば OKだと思って

'2018-05-29'.replace(/-/, '/')

としたら

2018/05-29

となりました。 先頭しかかわらないんですね。

replaceAll したい

全部置換したい時は g が必要です。

'2018-05-29'.replace(/-/g, '/')

そうすると

2018/05/29

となります。

参考サイト

developer.mozilla.org

関連記事

marketing-web.hatenablog.com

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

  • 作者: Ethan Brown,武舎広幸,武舎るみ
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2017/01/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る