2019-08-30

Rubyの消費税計算の話

Ruby

f:id:jun9632:20190830150844p:plain

最初、金額に消費税かけて切り上げすればOKでしょと思って

(price * tax).ceil

をしたところ

(400 * 1.1).ceil

の結果は、

となります。

~~くそ、、、~~

こんな親切な数字なのになんで 440 にならない、、、

~~くそ、、、~~

で実際

400 * 1.1

すると

440.00000000000006

になります。

僕には何に必要になるかわからない小数点以下の大量の 0 と挙句の果てには 6 まで付いてきます。

その 6 を切り上げちゃってるので、結果 (400 * 1.1).ceil は

になります。

計算方法

結果僕が行き着いた計算方法がこちら

((price * tax).round(2)).ceil

基本的に、%なので小数点第２位までを考えるため小数点第3位を一応四捨五入して、残った少数点第2位までを切り上げです。

(基本少小数点第3位は0になると思っています )

400円の 10% は

 400 * 1.1 = 440.00 => 440

401円の8%は

 401 * 1.08 = 433.08 => 434

になります。

まとめ

切り上げ

((price * tax).round(2)).ceil

四捨五入

((price * tax).round(2)).round

切り捨て

(price * tax).floor

marketing-web.hatenablog.com

プロを目指す人のためのRuby入門言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

作者: 伊藤淳一
出版社/メーカー: 技術評論社
発売日: 2017/11/25
メディア: 大型本
この商品を含むブログを見る

2019-06-19

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

Ruby

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

Preference  > Editor > File Types

を表示

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

f:id:jun9632:20190619101254p:plain

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

プロを目指す人のためのRuby入門言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

作者: 伊藤淳一
出版社/メーカー: 技術評論社
発売日: 2017/11/25
メディア: 大型本
この商品を含むブログを見る

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

作者: 高橋征義,後藤裕蔵
出版社/メーカー: SBクリエイティブ
発売日: 2019/03/19
メディア: 単行本
この商品を含むブログを見る

2019-05-07

BtoC向け後払いサイト比較

決済後払い

ＮP後払い

ネットプロテクションズの後払いサービス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円以上

2018-06-21

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

Vue 使い方

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

基礎から学ぶ Vue.js

作者: mio
出版社/メーカー: シーアンドアール研究所
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2018-06-20

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

Vue app

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

React Native入門 - Expoではじめる - iOS・Androidアプリ開発入門 (1)

作者: 中野仁
発売日: 2018/06/01
メディア: Kindle版
この商品を含むブログを見る

2018-06-14

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

Vue graphql api

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

基礎から学ぶ Vue.js

作者: mio
出版社/メーカー: シーアンドアール研究所
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2018-06-13

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

Vue Nuxt

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

作者: mio
出版社/メーカー: シーアンドアール研究所
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

参照記事

ja.nuxtjs.org

計算方法

まとめ

切り上げ

四捨五入

切り捨て

関連記事

関連記事

ＮP後払い

ミライバライ

@払い

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

後払い.com

GMO後払い

インストール

importの設定

.vueで利用する

参考サイト

関連記事

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

watchmanのインストール

プロジェクトの作成

起動

感想

参考サイト

関連記事

vueのインストール

vue-apolloのインストール

main.jsに設定を追加

compornetの書き方

import gql from 'graphql-tag'

const ViewerQuery

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

参考サイト

関連記事

インストール方法

関連記事

参照記事