プログラミンGOO

プログラミングナレッジ、ワードプレス、広告収入等について、気づき・備忘録を残していきます。

MetaMaskでイーサリアムの購入ができない？コインチェックからの送金で解決

仮想通過

今回坂本龍一のnftをadam by GMOで購入した。
adam by GMOでのnftの購入はイーサリアムでのみ可能となっているため同仮想通過を購入したのだが、引っかかるポイントが非常に多かったのでメモ。

坂本龍一のnftについて

ニュースでも話題になった『メリークリスマス ミスターローレンス』の2021年7月30日演奏音源。
右手の演奏分の1音1音をnft化したものである。
2021/12/21から初回販売が開始され、初販分は各音1万円となっている。
僕が購入したのはこれが再販されていたもので、1/23に158,000円で落札した。
僕自身は坂本龍一の熱狂的なファンというわけではないが、もともとピアノ音が好きであることと、坂本龍一が世界的なアーティストであること。
また、僕自身好きな曲であること。
そして、nftを管理している会社が信頼のおける会社であること、が購入の決め手となった。
ちなみにnftの管理会社はadam by GMOで、僕はDMMという会社が好きで、DMMと思って購入したがあとからよく確認したらGMOだった。
おそらく寝ぼけていたのだと思う…
GMOはお名前.comで利用したことがあるが、あとからWhois情報に課金を迫られたりあまり好きではなかった。
さておき、adam by GMOの利用は、入札は自由にできるのだが、落札後の入金は仮想通過（イーサリアム）でしか行うことができず、さらに今回はオークションのため3日以内に入金を済ませなくてはならないという厳しい条件が付いてきた。
このイーサリアムの購入に苦戦したのでその流れを備忘録として残しておく。
ちなみに当たり前のことだが、仮想通過の取引など、寝ぼけた状態で絶対に行ってはいけない。

adam by GMOでの取引はMetaMaskで行う

お話してきた通りadam by GMOではイーサリアムでの取引しか行うことができない（2022/1月時点）のだが、決済に進もうとすると、MetaMaskというアプリケーションの利用が要求される。
このMetaMaskはスマホアプリと、PCブラウザではGoogleChromeのアドインでも導入することができる。
このMetaMaskを使用してイーサリアムの取引をする。

MetaMaskでイーサリアムの購入ができない

このMetaMask、なかなか曲者で、ここでイーサリアムを購入しようとすると、wyreまたはTRANSAKという、法定通貨と仮想通過を換金する会社を通すことになる。
この2社で決済を試してみたが、僕は結局この2社で決済ができず、別の方法を取ることになる。
まず、購入の過程で、説明はすべて英語である。さらにサポートに問い合わせようにも、こちらも英語しか対応していない。
という前提で、wyreとTRANSAKを利用した所管。

wyreでの決済

wyreではApplePayでデビットカードを推奨している。
しかしそもそもApplePayに登録できるデビットカードというのは非常に種類が少ない。
僕の手持ちのカードはご多分に漏れず対応していなかったのでこちらは断念。

TRNSAKでの決済

次にTRANSAK、こちらはクレジット決済が利用できるということで試してみた。
しかし、何度カード情報を入力してもエラーになる。JCBだからか？もしかするとVISAならいけるのかもしれないが、VISAのカードは持っていないのでこちらも断念。
日本語のサイトであればここでサポートに問い合わせるところだが、決済という専門分野でとても英語でやり取りする気にはなれず、MetaMaskでのイーサリアムの購入は断念した。

コインチェックでイーサリアムを購入し、MetaMaskに送金する

MetaMaskのみでの決済で挫折したため、他の販売所で購入してMetaMaskに送金した。
最終的にコインチェックを採用したが、BitFlyer、DMM Bitcoinも少し検討した。
BitFlyerは入力フォームの予測変換やちょいちょい挙動がスムーズでないところがあった。
また、送金メニューを見ると、『ビットコインを送金』と表示があり、イーサリアムはそもそも送金できないのか？と思ったのでやめた。
DMM Bitcoinは、そもそも送金の仕組みがわからなかった。
仮想通過を購入せずに口座開設だけした形なので、もしかすると仮想通過を入手したタイミングで送金の可否が表示されるのかもしれない。
どれを採用するにしても、まず利用のための本人確認が必要で待ち時間が発生するので、試すのであれば早めに登録→仮想通過の口座開設までしておくことをお勧めする。
ちなみにどのサービスでも口座開設までは無料で出来る。

コインチェックから即時送金

さて、今回はオークションでの落札ということで、3日以内にMetaMaskにイーサを送金する必要があった。
そのために以下の対応をしなくてはならない。

  1. コインチェックで日本円を入金
  2. 入金した円でイーサリアムを購入
  3. イーサリアムをMetaMaskに即時送金

1の入金についてコインチェックでは主に以下の入金方法から選択する

  • 銀行入金
  • コンビニ入金
  • クイック入金

しかし、コンビニ入金・クイック入金はなんと入金しても7日間はその使用が凍結され、送金はもちろん取引に使用することができない。
マネーロンダリングの観点らしいが、これではあんまりである。
即時送金をするためには銀行入金を行う。
指定の銀行口座に振り込むとそれがコインチェックに反映されるというもの。
あまりこの手の決済は利用したことが無く本当に即時反映されるのか？
された。
反映までおそらく1時間もかからなかっただろう。
銀行口座というアナログなものに振り込んで本当にコインチェックというアプリケーションに反映されるのか不安だったが、何の問題もなかった。だいぶリテラシーのおくれを取っていたようだ…
送金は、まずMetaMask側でパブリックアドレスをコピー。
その後コインチェック側で送金手配をし、宛先に先ほどのアドレスを指定すればいい。
ここは全く苦戦することもなく、時間もかからなかった。

まとめ

苦戦はしたが、なんとか入金を済ませ、nftを落札することができた。
発狂ポイントは英語サポートしかないMetaMaskでの入金というところだ。
このあたり、GMOに再び少し冷たい視線を注いでしまう自分がいるが、nftを購入したので一蓮托生である。
無礼な客ですが、今後もお付き合いのほど、よろしくお願いいたします。

Stripe、Paypal、サブスクリプション自動引き落とし特徴比較

SaaS

サブスクリプションの導入にあたり、決済システムを検討した。
それぞれのサービスの比較は以下の記事でよく解説してあった。
Shopifyでまず導入したい決済「Stripe」と「PayPal」を比較 – コマースメディア株式会社

今回の記事では、サブスクリプションのポイントとして筆者がわからなかった、顧客がどのようにして支払いを完了するのか？について備忘録として書き留めておく。

今回のケース

Stripe

【概要】
Github、Slackなどでも採用されている決済システム

【特徴】

  • UIがおしゃれ
  • 支払いに当たり顧客側でのStripeアカウントの作成は不要
  • 決済にあたり住所や電話番号の入力も不要

【課題】

  • JCBの登録は事前に申請が必要
  • 銀行振込不可（あることはあるが、日本で対応していない？）
  • インボイス（請求書）が送られるタイミングや、本当に送られたのか？を確認する方法がわかりづらい

登録や課題については
Stripeサブスクリプション決済導入備忘録 - プログラミンGOO
でまとめたので参考に。
※例のごとく箇条書きで非常にわかりづらいので恐縮であります

Paypal

【概要】
古参大手フィンテック。知名度が非常に高い。

【特徴】

  • 銀行振込可能（アカウント登録必要）
  • クレジットカード決済であればアカウント登録不要
  • アカウントを登録してくれれば、相手のPaypalアカウントの設定に基づいて行うことができるため、サブスクリプションの決済情報も相手のアカウント内で設定することができる。
  • クレジットカードをOCRでカメラ自動読み取りできる（有効期限の年月が逆に読み込まれるエラーあり）

【課題】

  • ボタンデザインがしょぼい。Smartシリーズが出たが全然使い物にならない
  • エラーがとても多い。戻るボタンでいろいろ挙動がおかしくなる。
  • 決済に当たって、住所、電話番号まで入力しなくてはならない

PayPalの登録や課題については
PayPalサブスクリプション登録備忘録 - プログラミンGOO
でまとめたので参考に。
※こちらも恐縮であります

まとめ

サブスクにおいて、PayPal決済は、UI、UX的にStripeに大幅な遅れをとっているといった感触でした。
とにかく、請求、顧客、商品の管理がわかりづらいしやりづらい。
PayPalの優っている点としては銀行振り込みに対応しているところと、日本語化が容易なところ、そして圧倒的な知名度。
ただ、決済時の入力情報の多さという大きすぎるボトルネックのため、Stripeを採用する機会の方が圧倒的に多そうです。

PayPalサブスクリプション登録備忘録

SaaS

PayPal決済でサブスクリプションを導入する方法を備忘録としてまとめておきます。

基本手順

  1. PayPalアカウントを作成（今回の本筋から外れるため省略）
  2. ログイン
  3. 右上の歯車を選択
  4. 『売り手向けツール』を選択
  5. 『PayPalボタン』＞『管理する』を選択
  6. 『購読する』または『SmartSubscription』ボタンを選択
  7. 商品の情報を設定

ウェブサイトのHTMLに生成されたコードを貼り付けます。

SmartSubscriptionを使用する場合の注意点

サブスクリプションは今まで『購読する』というボタンで作成していました。

SmartSubscriptionは後から追加された機能で、UIがとてもきれいでユーザからしてもクリックしやすい見た目となっています。

しかし、以下の点に注意が必要です。

■作成したボタンは保存されないため、都度作成する必要がある（HTMLに埋め込むため、更新頻度は高くないはず）

■メールでの送信は難しく、ウェブページに埋め込むことしかできない。
従来の『購読する』ではメールでURLを送ることができた。ただ、これも単なる文字列として送ることになるのであまり良くはない。

■作成したボタンから決済に進むとその先の画面が英語表記になる。
フッターで言語を変えることはできるがデフォルトの変更不可。
従来の『購読する』ボタンでは、作成時のステップ3で、変数に『cl=JP』と打ち込むことで日本語表記にすることができた。

■PayPalサブスクリプション登録というボタンの他に、『PayPal CREDIT』ボタンと、黒い謎のボタンが併設される。
『PayPal CREDIT』はPayPalログインアカウント登録を要求するもので、謎の黒いボタンは登録せず決済に進むもののようだが、どちらも最初は英語の画面が出るためとても使えるものではない。

■テンプレートが使用できない
単発の請求では、基本請求額＋クーポン割引額、のように商品を組み合わせて請求することができるが、SmartSubscriptionではそもそも登録されている商品自体を引用することができない。

SmartSubscriptionをワードプレスに埋め込む

一般的な『購読する』ボタンでは、HTMLのみで作られているため、ワードプレスのテキストエディタで問題なく埋め込むことができます。

しかし、SmartSubscriptionはjavascriptを使用しているため、テキストエディタで埋め込むことができません。

そのためWordPressのプラグインであるScripts n Stylesを使用して埋め込みます。

参考：
個別ページにJavaScriptを埋め込めるWPプラグイン”Scripts n Styles”の紹介 | Fukuro Press

これで個別記事ページにjavascriptを記述するフィールドが出現します。

ここから少しコツがいります。

SmartSubscriptionで生成されたコードは以下のような形態です。

<div id="paypal-button-container-●●"></div>  //本文に貼り付け
<script src="https://www.paypal.com/sdk/js?●●></script>  //本文に貼り付け
<script>

  //ここから下をScripts n Stylesによって出現したjavascript記述フィールドに貼り付け
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          /* Creates the subscription */
          plan_id: '●●'
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID); // You can add optional success message for the subscriber here
      }
  }).render('#paypal-button-container-●●'); // Renders the PayPal button

  //javascript記述ここまで
</script>

ポイントは、最初の2行は本文のテキストエディタに貼り付け、その他はjavascript記述用のフィールドに貼り付けること。

また、javascript記述フィールドに貼り付けるところでは、すでに

コメントを書く

Apache備忘録

インフラ

【参考】

・全般
Apache入門 | Let'sプログラミング

・ドキュメントルートについて
Apache | DocumentRootディレクティブ：Webサーバで公開するコンテンツを配置するディレクトリ

【apache導入】

参考：
Apache入門 | Let'sプログラミング
これで『localhost/』でアクセスできるようになる

～C:/～～/Apache24/conf
・ServerNameの設定
どのURLからアクセスするかを設定する
初期設定は以下

#ServerName www.example.com:80

コメントを外してURLを指定する。
複数Listenすることもできる。
参考：Apache | Listenディレクティブ：リクエストを受け付けるポート番号

Listen 80
Listen 8080

・ドキュメントルートの設定
後悔ディレクトリのルートを示すパスを設定する。
初期設定は以下

DocumentRoot "${SRVROOT}/htdocs"

この直下に公開用のプログラムを配置すれば、ServerNameで指定したURLからアクセスできる。

【apacheの起動】

binフォルダに移動

cd C:/～～～/Apache24/bin

スタート

httpd -k start

確認
URL：http://localhost/　に接続

再起動

httpd -k restart

終了

httpd -k stop

GUIでは以下
Winアイコンをクリック
＞コンピューターの管理
＞サービスとアプリケーション
　※apacheをWinのサービスとして登録していることが前提
　参考：Apache | Listenディレクティブ：リクエストを受け付けるポート番号
＞サービス

【Appendics】

■IPアドレスの調べかた

ipconfig

IPv4アドレスに表示されている

Vuex備忘録

javascript

【参考】

ステート | Vuex
【初心者向け】状態管理にVuexを使ってみた【入門】 - Qiita
・moduleについて
Vuex の使い方を勉強してみた - Qiita
・mapState
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita

【基本】

Vuexではstore>index.tsというファイルの中にstoreで管理した変数・関数を記述する。
主な機能に以下がある

  • state：変数を記述
  • mutations：非同期処理を記述
  • actions：同期処理を記述

■state
・変数を記述する
・JavaでいうところのModelにあたる？

■mutations
・同期的（並列処理）な処理を記述する
・mutations内に定義する関数は第一引数にstateを受け取る。
・主にセッターなど、privateな内部処理を記述する
・JavaでいうところのLombocがやっている処理に当たる？

mutations: {
  setClientName (state, payload) {
    state.clientName = payload
  }
}

・mutationsの使用

this.$store.commit('funcName', value)

■actions
・非同期（順序制御）な処理を記述する
・戻り値はpormiseになる
・JavaでいうところのServiceにあたる？

・actions内に定義する関数は第一引数にcontextを受け取る。
contextとは自分自身。※thisに置き換えても挙動は同じ？
そのためcontextからstateにもアクセスできる

actions: {
  setClientName (context, clientName) {
    context.commit('setClientName', clientName)
  }
}

・actionsの使用

this.$store.dispatch('funcName', value)

■actionsとmutationsの切り分け
actionsはプロミスを返すため、経由することで処理の順序を制御できる（同期処理）
mutationsを直接呼び出すケースはprivate settersに限定すると良いかも

■第3引数が認識されない
mutations、actionsはここまで記述した通り、引数の型が決まっている。
例）mutations(state, payload) //2つまで
複数の引数を渡したい場合は第2引数をオブジェクトとしてまとめて輪つ必要がある

【実装】

～store/index.ts～

state: {
  clientName: null  //…①stateに変数を確保
},
getters: {
  getClientName: (state) => { //…②getterを用意する
    return state.clientName
  }
},
mutations: {
  setClientName: (state, payload) { //…③セッターを用意する
    state.clientName = payload
  }
},
actions: {
  setClientName (context, clientName) {
    context.commit('setClientName', clientName)
      //…③commitでmutationsを呼び出す
      //setterなど情報更新が必要なければactionsだけで完結しても良いかも
  }
},
modules: {
}

～Home.vue～

<form name="myForm">
  <input type="text" name="myText">
  <button @click.prevent="myFunc"></button>
</form>

<script lang="ts">
export default class Home extends Vue {
  //storeから値を取得 ※computedでプロパティを取得する
  get clientName (): string {
    return this.$store.getters.getClientName
  }

  //storeに値を保存
  myFunc () {
    this.$store.dispatch('setClientName', val)  //…④storeのactionsを呼び出す
  }  
}
</script>

【フォーム】form

Vuexで定義した値をv-modelでバインドしようとすると、エラーになる。
これは、値の変更をVuexが検知できなくなるため。
v-modelを分解し、イベント検知とバインド処理を分ける。

～Comp.vue～

<input v-model="clientName">  //エラー

<input v-on:input="setClientName">  //関数を呼び出し、関数内でバインドする

～～～
//ゲッター
get clientName (): string {
  return this.$store.getters.getClientName
}

//セッター
setClientName (e: any) {
  this.$store.dispatch('setClientName', e.target.value) //…②dispatchでactionsを呼び出す
}

～store/index.ts～

state: {
  clientName: null
},
getters: {
  getClientName: (state) => {
    return state.clientName
  }
},
mutations: {
  setClientName (state, payload){
    context.commit('setClientName', clientName) //…③commitでmutationsを呼び出す
  }
},
modules: {
}

【導入】

■vue createでvueプロジェクトを作成する際に、オートではなくマニュアル設定に切り替え、Vuexにチェックを入れる

■後から追加する場合は以下を追記
～main.ts～

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //追記

Vue.config.productionTip = false

new Vue({
  router,
  store,  //追記
  render: h => h(App)
}).$mount('#app')

～src/store/index.ts～

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

■バージョン確認
node_modules/vuex/README.md
を確認する

fire
**HEADS UP! ** You're currently looking at Vuex 3 branch.

//Vuex 3 であることがわかる

【ローカルストレージにデータを保存】vuex-persistedstate

・リロードしたり、ページ遷移して値が消えるのを防ぐ
・ローカルストレージに情報を保存できるプラグインを使用する。
・ただ、リロード・ページ遷移しても値を使いまわすのはVue本来の使い方ではない気がした。VuehaSPAで値をため込み、一括処理することでサーバとの通信を減らすことができるのが最大のメリット。vuex-persistedstate自体はその域を逸脱してはいないが、『リロード・ページ遷移しても値を使いまわす』という目的自体がSPAでデータをため込む手法の中では特に不整合を起こすリスクをはらむ。あくまで、データを保護する保険的な意味で使用するのがよさそう。

■参考：
【Vuex】リロードしてもStateの中身を消さずに維持する方法 | Pizzamanz.net

■導入

npm install vuex-persistedstate

～store/index.ts～

import createPersistedState from 'vuex-persistedstate'  //追記
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  plubins: [createPersistedState()]  //追記
})

Atomエディタでショートカットキーをカスタマイズしてカーソルをカッコの外に移動する

エディタ

Atomはパッケージなどで終了タグを自動補完できたりと、コーディング効率を上げるナレッジが数多くある。

閉じカッコなども自動で生成してくれて便利なのだが、カッコ内にコードを書き終わった後に、カッコの外に移動したい。

そんなとき、カーソルキーの『→』を押して移動するわけだが、このキーはキーボードの場末（一番右下）にあり、いちいち目視しなくてはならない。

これもショートカットキーでどうにかならないかを模索した。
※環境はWindows

カッコの外に移動する挙動がそもそも無いので、単語の末尾に移動する

ショートカットキーを探したが、カッコの外に移動するキーは無いようだった。（誰か知っていたら教えて！）

一番近い挙動をするものがCtrl + →で、単語の末尾に移動するというもの。
すでに単語の末尾にいる場合は閉じカッコを出た位置にカーソルが移動してくれるので、ベストではないが要件は達成できるため、これを実装する。

ショートカットキーをカスタマイズしてこの挙動をできるだけベースポジションに近いキーで入力できるようにする。

ショートカットキー一覧をカスタマイズ

まず、Atomエディターのショートカットキーの設定を行う場所。
File＞Settings＞Keybindings　に移動する。

ここで、現在登録されているショートカットキーの一覧を見ることができる。

  • Keystroke列：入力するキー
  • Command列：実行する動作
  • Selector列：どの要素にカーソルが当たっているときの処理か

といった情報が登録されている。

内容を見るに、Selectorは『body』とすれば良いようだ。

やり方は後述するが、Commandに登録する動作を調べる必要がある。

独自のショートカットキーを登録する

ここで『your keymap file』というリンクをクリックすると、『keymap.cson』というファイルが開く。

keymap_file

独自のショートカットキーを実装する場合にはこのファイルに記述していく。

今回は、ベースポジションに近い位置でかつ、普段使用されないキーの組み合わせで登録する。

以下で設定することにした。

Ctrl + ;

keymap.csonファイルは最初はすべてコメントアウトされていると思うが、この末尾に以下を記述する。

'body':
  'ctrl-;': 'editor:move-to-end-of-word'

この、『editor:move-to-end-of-word』に当たる部分が、さきほどのCommandに当たる挙動を示す。

これで、Ctrl + ; で単語の末尾に移動する挙動が実装できた。

ショートカットキーの動作確認方法

今回はCtrl + → のショートカットキーをCtrl + ; にコピーしたわけだ。

そのため、Ctrl + → でどのようなCommandが実行されているのかを調べた。

先ほどのkeybindingsの一覧から探しても見つかるのかもしれないが、このページではなぜか文字列検索ができなかった。

目視で探すのは大変なので別の方法を紹介する。

まず、やりたい挙動を再現してみる。
実際のエディタの画面で、カッコ内のテキストを選択し、Ctrl + → で、単語の末尾に移動することを確認する。

それができたら、Ctrl + > というショートカットキーを押す。
すると、Key Binding Resolverと名乗る画面が開く。
この状態で、ショートカットキーを実行すると、そのショートカットキーがどんな挙動をしているのかがここに表示される。

key_binding_resolver

これをもとにCommandを調べれば、今回紹介した操作以外でもショートカットキーをカスタマイズすることができる。

ちなみに、これでも結局使いずらくてただの右移動（Commandは core:move-right）に変更しました。