スポンサーリンク
RubyMine で aaaaaa.rb というファイルだけど、RubyではなくText を間違って割り当ててしまった時の設定の修正方法です。
Preference > Editor > File Types
を表示
Text を選択すると、Registed Patternsに aaaaaa.rb があるはずなので これを削除するとaaaaaa.rbが Ruby ファイルとして認識してくれるようになります。
地味なのに、すごいハマってしまいました。
プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)
たのしいRuby 第6版 (Informatics&IDEA)
ネットプロテクションズの後払いサービスNP後払い
| プラン | 手数料率 | 月額固定費（税抜） | 請求書発行・郵便料金 | 月間取引額の目安 |
|---|---|---|---|---|
| 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円以上 |
ライフカードの後払いサービス「ミライバライ」
| プラン | 手数料率 | 月額固定費（税抜） | 請求書発行・郵便料金 | 月間取引額の目安 |
|---|---|---|---|---|
| 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のみの利用は無料。
スコア後払い決済サービス
| プラン | 手数料率 | 月額固定費（税抜） | 請求書発行・郵便料金 | 月間取引額の目安 |
|---|---|---|---|---|
| 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円以上 |
株式会社キャッチボールの後払い決済サービス
| プラン | 手数料率 | 月額固定費（税抜） | 請求書発行・郵便料金 | 月間取引額の目安 |
|---|---|---|---|---|
| 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ペイメントサービスが提供する後払い決済サービス
| プラン | 手数料率 | 月額固定費（税抜） | 請求書発行・郵便料金 | 月間取引額の目安 |
|---|---|---|---|---|
| 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円以上 |
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
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ファイルでアイコンを利用する場合は、下記のようになります。
<template> <fa-icon icon="spinner" class="fa-3x fa-pulse" /> </template>
これまで、React Nativeが気になりながらも、学習コストを考えてVueを選択していたのですがVue Native が登場したんですね！ 嬉しい状況です。
早速、インストールから、最初の起動までを試してみました。
vue-native-cli と create-react-native-app のパッケージをインストールします。
npm install -g vue-native-cli npm install -g create-react-native-app
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のエミュレータで起動しました。
そのほかの動作は
ここまでは、想像以上に簡単でした。
ここから、VueとNativeのコンポーネントを組み合わせればできるのかなというイメージでいますが アプリ初心者ので、モロモロ問題は出てきそうなので色々と試してみたいと思います。
React Native入門 - Expoではじめる - iOS・Androidアプリ開発入門 (1)
vue init webpack my-project
何個か質問されるので、回答しながら進んでください。
インストール終わったら、
パッケージをインストールして、起動！
cd my-project npm install npm run dev
vueからgraphqlを叩きやすくしてくれるモノです。
下記パッケージをインストールします。
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
こんな感じです。
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
適当に 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のアカウント名が表示されれば成功です。
下記はポイントや注意です
graphql-tagをインポートします。
graphqlのクエリーを書きやすくしてくれるもの
const ViewerQuery に graphql-tagを使って、クエリーを書いています。
ハマったのが、
gql`
の
`
ングルクォーテーション【 ' 】 じゃなくて バッククォーテーション【 ' 】です。
ご注意を！！
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
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 で確認することができます。
こんな画面がでれば成功です。
2018-05-29
を
2018/05/29
に置換したい時に replace 使えば OKだと思って
'2018-05-29'.replace(/-/, '/')
としたら
2018/05-29
となりました。 先頭しかかわらないんですね。
全部置換したい時は g が必要です。
'2018-05-29'.replace(/-/g, '/')
そうすると
2018/05/29
となります。
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発