古いBuffaloの外部記憶HDD(LS-Vlシリーズ)からデータを掘り起こす

数年前に使っていたBuffaloの外部記憶HDD、LS-Vlシリーズ。

現在は使っていないので物置に眠っていたが、クライアントから会社の周年記念のパンフレットを作るために過去のデータがどうしても必要ということで、WEB制作当時のデータがないかと問い合わせがあった。

5年以上前の話なので、データの保管期間が過ぎていると言って断ってもよかったのだが、お世話になっている社長の頼みともなれば、何かしら力になりたいという思いの方が大きく、データを掘り起こすことに。

Windows(OSは10)のデスクトップにBuffalo、LS-Vlのハードディスクをつなぎ、電源を入れる。

・・・ここからどうするんだっけ?

繋いだだけでHDDは使えなかったような気が…。

そう思い、記憶を辿る。

そこで気がついたのがHDDのドライバーが確か必要だったということだった。

そこで、Buffaloのサイトからドライバーをダウンロードした。

ドライバーダウンロード
http://buffalo.jp/download/driver/hd/ls-vl.html

ここで大事なのはソフトウェアの項目の「NAS Navigator2(Windows)」をインストールするということだ。

最初、LinkNavigator for LS-V(Windows)の方をインストールしたところ、環境の影響か動作しなかった。

その後、NAS Navigator2を立ち上げる。

すると(上記の画像は完了後の画像なのでないが)ハードドライブアイコンのところに「?」マークがついてフォルダを開くことができない…。

どうしたものかと色々調べていると、どうもドライバーもしくはHDDのファームウエアを最新のものにする必要がありそう。

NAS Navigator2に「IPアドレス」と記載があるので、そのIPをブラウザに打ち込むと下記のようなログイン画面が表示される。

ここにログインしてHDDのファームウェアを最新に設定できるようだが、次はユーザ名とパスワードが分からない…。(なんせ古いHDDなもので記録も残してなかった。)

しかし、こちらも調べてみると、初期設定のユーザ名とパスワードがあったので、それでまずはトライしてみてというヘルプがあった。

ヘルプページはこちら
https://faq.buffalo.jp/app/answers/detail/a_id/11707

製品出荷時の初期情報は下記とのこと

ユーザー名:admin
パスワード:password

こちらでログインすると無事ログインできた。

システム>メンテナンスで画面を進み、「ファームウェアアップデート」を選択すると、ここからファームウェアアップデートをしてという表示がされているので、アップデートを試みる。

(画像は最新アップデート済の画面)

再びNAS Navigator2にアクセスし、HDDのアイコンをダブルクリックすると無事フォルダの中身を確認することができた。

こうして無事、化石となった古いデータを掘り起こすことができた。

 

<まとめ>

(1)ドライバーをダウンロード
http://buffalo.jp/download/driver/hd/ls-vl.html

※NAS Navigator2(Windows)をインストール

(2)NAS Navigator2を立ち上げIPを確認

(3)ブラウザに(2)のIPを打ち込む

(4)ID/PWでログイン。わからない場合は初期設定のIDとPW(ユーザー名:admin パスワード:password)でトライ。

(5)ファームウェアをアップデート

(6)NAS Navigator2からHDDにアクセス

Macでスペイン語(他言語)の入力をできるようにする

 

【記事要約】

Macでスペイン語などの他言語を入力できるようにする方法。

 

去年から興味でスペイン語の勉強を始めています。

スペイン語練習の際に、スペイン語をキーボードで打ち込む必要があったのだが、アルファベットにはない、スペイン語特有の「ñ」や「á」や「¿」、「¡」が入力できなかったので、設定をすることに。

1.  Macの言語設定をする

(1)リンゴマーク>システム環境設定を選択

(2)「言語と地域」を選択。この時「キーボード」を選択して、入力設定だけ設定してもよいのだけれども、将来的に通貨の利用なども考慮して、取り急ぎ「言語と地域」から設定。

(3)「優先する言語:」のプラスマークをクリック

(4)Españolを選択

(5)最優先言語は日本語のままにしておきたいので「日本語を使用」の方をクリック

(6)入力ソースは「スペイン語」(ISOとついていない方)を選択

(7)優先する言語にスペイン語が追加されていることを確認

(8)フォント候補にスペイン語が追加されています。スペイン語入力の際は、このスペイン語を選択するとスペイン語入力ができるようになります。

2.  特殊文字の打ち込み方

スペイン語の特殊文字は、アルファベットと違って、ちょっと特殊な入力方法になります。

また、キーボードの種類によって、押すコマンド文字が異なっていたりもします。

(1)á・í・ú・é・ó【アクセント記号つき文字】

僕のMacキーボードはUS仕様(日本語表記がなく、配列も異なる)なので、一般的な日本語キーボードのキー表示と異なるのですが、取り敢えず「P」の右隣のキーを叩いて、a、i、u、e、oを押すと、アクセント記号付きの文字が入力できます。

この時、長押ししながらではなく、押して、指を話してから次のキーを押すのがポイント。

(2)Ü・ü

Shiftを押しながら「P」の2つ右隣のキーを叩いて、uを押すと「ü」が入力できます。

大文字「Ü」はShiftを押しながら「P」の2つ右隣のキーを叩いて、Shiftを押しながらuを押すと「Ü」が入力できます。

(3)Ñ・ ñ

Lの横の文字をクリックすると「ñ」が入力できます。

Shiftを押しながらLの横の文字をクリックすると「Ñ」が入力できます。

(4)Ç・ç

Mの3つ右隣のキーを押すと「ç」が入力できます。

Shiftを押しながらの3つ右隣のキーを押すと「Ç」が入力できます。

(5)句読点など

¡・・・[Shift]+[1]

!・・・[Shift]+[2]

¿・・・[Shift]+[,](Mの右隣)

?・・・[Shift]+[.](Mの2つ右隣)

;(セミコロン)・・・Lの2つ右隣のキー

:(コロン)・・・[Shift]+Lの2つ右隣のキー

キーボードの種類によっては、これらのキーと異なる場合があるので、メモ帳などに実際に打ってみて、何が入力されるのが一番手っ取り早いです。

3. Googleの入力を使っていてキーボードの動きがおかしい時の解決方法

僕は、Macのデフォルト入力が苦手なので、Googleの日本語入力(https://www.google.co.jp/ime/)を使っているのだが、どうも影響で、1のスペイン語の設定をした後に、入力ソースを日本語やアルファベットにしても、スペイン語の入力ソースのままになってしまっていた。

スペイン語を使う度に環境設定で切り替えをするのも、とても面倒なので、解決策が無いか模索したところ、Googleの日本語入力の設定で回避できたのでご紹介。

(1)Google日本語入力の「ConfigDialog」の設定画面を立ち上げる

(2)[一般]タブ>キー設定>キー設定の選択で「MS-IME」を選択

(3)[入力補助]タブ>入力補助で「日本語入力では常に日本語キー配列を使う」にチェックを入れる

この設定で、無事に元通り、日本語入力の場合は日本語の入力ソース、アルファベットの場合はアルファベットの入力ソース、スペイン語の入力の際はスペイン語の入力ソースとして、キーボードが機能するようになった。

外部ネットワークのMacからWindowをリモートコントロール(遠隔操作)する

Macから他のWindowsを遠隔操作するためのアプリとして、Microsoftより「Microsoft Remote Desktop」というアプリが公開されているが、外部ネットワークからのアクセスがうまくいかなかった。

Windowsのサポートページ(英語版のみ)にルータのポート設定でイケる。といったページがあるが、実際に設定しても、エラーが出てうまくいかず・・・。

もしくはVPNを利用、といった記述があったが、VPNまでは面倒臭くてやりたくなかったので、他に方法がないか検討。

そして、見つけました。と言うより、忘れてました。

「TeamVewer」(https://www.teamviewer.com/ja/)

そういえば、TeamViewerで8年ほど前にWindowsユーザだった頃、このソフトで遠隔地のWindowsを操作してミーティングしたことがあったっけ。

設定手順は本当に簡単。

①TeamViewerを遠隔操作したいパソコンと遠隔操作されるパソコンの両方にインストール。
https://www.teamviewer.com/ja/download/

②TeamViewerのアカウントを作成
https://login.teamviewer.com/LogOn#register

③遠隔元と遠隔先の両方でインストールしたTeamViewerで②で作成したアカウントでログイン

④遠隔先のパソコンで「アカウントにデバイスを割り当てます」からアカウント情報を入力し、TeamViewerにPCを認識させる

⑤遠隔先のパソコンで「簡易アクセスを許可」を設定する

⑥TeamViewerに遠隔できるPCが表示されるので、ダブルクリックするとWndowsの画面が立ち上がります。

 

全画面表示にすれば、結構画質もよいです。

外部ネットワークのMacからWindowsの遠隔操作が必要な方は是非お試しください。

 

(2017/12/4追記)

TeamViewerは、セキュリティーが少々怖いソフトでもあるので、なるべくリスクを減らすための設定をして置いた方が無難。

実際に2016年には、アカウントの乗っ取り事件が多発している。

よって、以下のような設定をしておいた方が◯。

①バージョンを常に最新にする

(Windowsの場合)ヘルプ>新しいバージョンの確認をクリックすると、バージョン確認が行われ、最新でない場合は、最新版インストールボタンが表示される。

(Macの場合)ヘルプ>更新の確認をクリックすると、バージョン確認が行われ、最新でない場合は、最新版インストールボタンが表示される。

②パスワードを強化する

(Windowsの場合)その他>オプションで[セキュリティ]の項目のパスワードのセキュリティレベルを「非常に安全(10文字)」を選択

(Macの場合)TeamViewer>環境設定で[セキュリティ]の項目のパスワードのセキュリティレベルを「非常に安全(10文字)」を選択

③アクセスできるパートナーを限定する

(Windowsの場合)その他>オプションで[セキュリティ]の項目の「ブロックと許可リスト」の[設定]ボタンをクリック。

次の画面で[追加]ボタンを押すとユーザの選択ができるので、追加するユーザを選択して、OKボタンを押して完了。

(Macの場合)TeamViewer>環境設定で[セキュリティ]の項目の「ブロックと許可リスト」の[設定]ボタンをクリック。

次の画面で[追加]ボタンを押すとユーザの選択ができるので、追加するユーザを選択して、OKボタンを押して完了。

その他に、TeamViewerアプリを使っていない時はアプリを終了しておく、または自動起動させない(Windows)という設定もセキュリティ対策としては有効だが、遠隔操作したい自分のパソコンがかなり遠方で、操作ができない場合は、この設定をしてしまうと本来の目的が果たせなくなってしまうので、この辺りは自身の判断で設定してもらうのが良いと思う。

 

AmazpnPayエラーハンドリング設定などの詳細を詰める[EC CUBE3でAmazonPayを利用するためのステップその8]

【記事要約】

AmazonPayはエラーハンドリングなど適切な処理をしていないと、Amazonサイドから利用を打ち切られる場合がある。そのため、確実に処理が適正に行われるよう念入りなコーディングと検証が必要になる。

 

その1から7に記載した内容はあくまで概要のため、AmazonPayをEC CUBE3で利用するためには、確実な処理を行うように詳細を念入りに設計する必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

1.  Amazonログインステータスによる切り分け

当然のことだが、Amazonアカウントにログインしている状態か否かでロジックを切り分ける必要がある。

Amaonアカウントにログインしているかどうかを判別するためには、Amazonログインと同時にCookieが作成されるため、それらを利用するのが望ましい。

Cookieの内容はEC CUBE3の管理画面の設定>システム情報設定>EC CUBEログ表示で閲覧できる。

デフォルトのログ表示設定はINFOレベルとなっているため、デバックレベルに変更したい場合は、app>config>eccubeのlog.ymlの設定が必要となる。

詳細はこちら
http://doc.ec-cube.net/guideline_log

僕は、ややこしさとトラブルを回避するために、会員ログイン時はAmazonPayを利用できない仕様にした。

また、Amazonログイン時は、カート画面にログアウトボタンを表示させた。

さらに、ログアウトした時点で自作のAmazon関連のセッション等をクリアする処理を施した。

2. エラーハンドリング

STEP7の3にも記載したが、Amazonとの通信時には、レスポンス、オーソリーエラーなどエラーハンドリングが必要となる

AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]

さらにウィジット表示の際も、Javascriptにエラーハンドリングの記載が必要になる。

この点もコーディングを施し、テストをする必要がある。

3. セッションのハンドリング

AmazonPay関連のオリジナルセッションを使った場合、Amazonアカウントでのログイン時とログアウト時でそれらのセッションハンドリングが必要になる。

忘れがちなので、これらも合わせて確認してほしい。

4. デバックモードでの検証

検証の際に絶対的に必要になってくるのが、デバックモードだ。

EC CUBEでは、echoやprint_rなどを使ってエラーを表示させようとしても、出てこない。

そのため、デバックモードを利用する。

デバックモードの利用は簡単で、

https://ショップアドレス/index_dev.php

でアクセスするだけでOKだ。

しかし、僕の場合は、index_dev.phpの47行目付近を下記のように書き換える必要があった。

AmazonPayから渡ってくる値等も閲覧できたので、デバックモードはかなり重要だ。

 

他にも細かいところでつまづき、色々と調べながらのコーディングとなったが、大体の概要は紹介できたと思う。

EC CUBE3とAmazonPayがランニングコストなしで利用できれば、かなりのコスト削減になるので、ぜひ実現してほしいと思う。

2018年1月16日追記:

このシリーズを書き終えた直後にNIPPON PAYという会社からEC CUBEで利用できるAmazon Payの無料プラグインがリリースされていた模様。

https://nippon-pay.com/AmazonPay.html

僕には必要なくなったので、詳しく調べていませんが、基本無料配布のようです。もしかしたら設定サポートや何やら費用がかかる可能性もあるので、ご自身で確認の上、自己責任で利用するのもよいかもです。


[EC CUBE3でAmazonPayを利用するためのステップその8]AmazpnPayエラーハンドリング設定などの詳細を詰める[EC CUBE3でAmazonPayを利用するためのステップその8]
AmazpnPayエラーハンドリング設定などの詳細を詰める

AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]

【記事要約】

[注文する]ボタン押下と同時にEC CUBE3から購買情報をAmazonPayへ送信し、購入処理を完結させる

 

購入確認画面にて[注文する]ボタンが押下されたら、購買情報をAmazonPayへ送信し、購入処理を完結させる必要がある。

また、それと同時に無事処理が完結した場合、完了確認画面を表示させる必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

1.  event.ymlにフックポイントを記載

各々のプログラムの組み方によると思うが、僕の場合、購入処理を下記フックポイントにて実施した

ShoppingController.phpを読み解いてもらうと分かるかと思うが、処理内容に応じて、適切なフックポイントは異なり、プラグインを作成する上で、フックポイントは重要な要素となってくる。

function名は命名規則に則り、onRouteFrontShoppingConfirmRequestとする。

2. EventファイルにonRouteFrontShoppingConfirmRequestの処理内容を記載

プログラム内容を記載するとセキュリティ上もよろしくないので、プログラムの詳細は記載せずに、大まかな流れだけ紹介します。

下記、流れに沿って、独自にコーディングしていただけたらと思う。

Amazon Pay API リファレンスの「ワンタイムAmazon Pay API」、「Amazon Payデータタイプ」、「Order Referenceの制約」の内容を熟読し、コーディングに活用する。

プログラムに慣れた人はたいていマニュアルを読まないでも、それまでの経験値で多くのシステム構築をクリアできることが多いけれども、このAmazonPayに関しては独自の仕様が多いので、とにかく提供された資料を事前によく読むのが一番の近道だと実際に構築して感じた。

(1)Amazonログイン中の場合に、AmazonPayAPIのgetOrderReferenceDetails関数で、アドレスや連作先等の詳細情報を取得し、EC CUBE3の購買情報へセットする。

<参照URL>

https://pay.amazon.com/jp/developer/documentation/lpwa/201952090#201952090

(2)AmazonPayのPHP SDKのcharge関数を使用し、AmazonPayへ購買情報を送信する。

<参照URL>

https://github.com/amzn/amazon-pay-sdk-php?ld=APJPLPADirect

(3)レスポンス、オーソリーエラーなどエラーハンドリングをする。

AmazonPayのテスト環境に用意されているテストアカウントにて、カードのエラーをテストできるアカウントが用意されている。

<参照URL>

オーソリー状態と理由コード
https://pay.amazon.com/jp/developer/documentation/apireference/201752950

エラーコード
https://pay.amazon.com/jp/developer/documentation/apireference/201753060

(4)処理が無事完了した場合に、完了画面を表示する。

 

これらAmazonPayの開発者向け情報を参照しながら、EC CUBE3の開発者情報も非常に参照した。

http://doc.ec-cube.net/

上記フローでAmazonPayの基本的な流れを作り出すことができるが、次回はさらに細かい点について紹介したいと思う。

 


[EC CUBE3でAmazonPayを利用するためのステップその7]AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

AmazonPayログイン時に購入確認画面へ遷移させる表示[EC CUBE3でAmazonPayを利用するためのステップその6]

【記事要約】

Amazonアカウントでログインした場合、EC CUBEの画面は購入確認画面へ遷移させ、アドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。

 

カート画面の[Amaozonアカウントでお支払]ボタンを押して、Amazonへのログインが完了した場合、EC CUBE3の画面は購入確認画面へ遷移し、さらにアドレスウィジットと支払いクレジットカード選択ウィジットを表示させる必要がある。

そのためには、通常非会員の場合は、会員ログインまたはゲスト購入のボタンが表示された画面へ遷移するが、会員ログイン状態と同じ画面遷移にする必要がある。

※ここに書いてある記事はあくまで概要です。プログラムは自己責任で開発してください。

1.  event.ymlにフックポイントを記載

EC CUBE3のおおまかな購入ロジックはsrc>Eccube>Controller>ShoppingController.phpで定義されている。

そのため、プラグイン作成時にはこのプログラムも良く見て置いたほうがよい。

ShoppingController.phpを読み解くと、非会員でも一度注文者情報($Customer)が作られている場合は、一度入力された情報を保持して、購入確認画面へ飛ばしていることが分かる。

そのため、Amazonログインと同時にこの$Customerを擬似的に作成し、購入確認画面へダイレクトに遷移させる。

Amazonアカウントに登録されている個人情報はウィジット表示後でないと取得できないため、ダミーの値等で仮作成しておく。

 

ShoppingController.php読み込み前にこの仮注文情報を作成するためのフックポイントは下記となる。

function名は命名規則に則り、onRouteShoppingRequestとする。

さらにウィジットを表示させるために、下記フックポイントを追加

function名は命名規則に則り、onShoppingIndexRenderとする。

2. EventファイルにonRouteShoppingRequestの処理内容を記載

eventファイルにonRouteShoppingRequestの処理を記載するが、その前に、ここでAmazonPayのPHP SDKを使用するため、eventには下記のように事前にAmazonSDKの環境設定を記述しておく。

例:

*********には、独自の情報を入力。ログイン時点(ウィジット表示前)の時点でAPIから取得できるのは、氏名とEmailといった限られた情報のため、それらで仮注文者情報($Customer)を作る。

上記コード中の$access_tokenは、Cookie中から取得することができた。

各々、取得ロジックを独自に設定してほしい。

都道府県情報がないとエラーになるため、仮に1を設定している。

紹介したコードはあくまで最低限の内容のため、その他必要ロジックを書き足して欲しい。

3. EventファイルにonShoppingIndexRenderの処理内容を記載

onShoppingIndexRenderの処理内容には、Amazonログイン中の場合に、下記内容に表示を差し替える指示を記載する

①お客様情報エリアにアドレスウィジットと支払いクレジットカードウィジットを表示

②お客様情報変更ボタンを非表示

③配送情報変更ボタンを非表示

④配送日時指定のみ表示

⑤お支払い方法選択エリアには、AmazonPayとのみ表示し、他の決済手段を非表示とする

基本的に下記パターンで上記の表示差し替え指示をコーディングする

正しくコーディングできれば、Amazonログインと同時に購入確認画面へ遷移し、アドレスウィジットと支払いクレジットカードウィジットが表示される。


[EC CUBE3でAmazonPayを利用するためのステップその6]AmazonPayログイン時に購入確認画面へ遷移させる表示[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

カート画面に[AmazonPay]でお支払ボタンを表示[EC CUBE3でAmazonPayを利用するためのステップその5]

【記事要約】

AmazonPay導入のためのEC CUBE3系のプラグイン作成の第一段階。カート画面に[Amazonアカウントでお支払]ボタンを表示するプラグイン要素を作成する。

 

で、 「2.AmazonPayプラグインの全体的な動き」に書いたように、Amazonプラグインは大きく3つの要素に分割できる。

そのまず最初のカート画面部分について説明する。

以下、プラグインはステップその4で紹介したEC CUBEのプラグイン開発ドキュメントの内容に基いて、EC CUBE3のapp>Pluginフォルダの中に、プラグインの初期ファイル一式が自動生成された状態であることを条件とする。

EC CUBE3プラグインをつくる[EC CUBE3でAmazonPayを利用するためのステップその4]

1.  event.ymlにフックポイントを記載

カート画面にお支払ボタンを表示させるためのフックポイントは、直接Cart/index.twigとした。

そのため、event.ymlに、下記のコードを記載する。

 

2. Eventファイルに処理内容を記載

EC CUBEのプラグイン開発ドキュメントの内容に基いて、EC CUBE3のapp>Pluginフォルダの中に、プラグインの初期ファイルが自動生成された場合、指定した名前の***event.phpというファイルが生成される。

(僕は、AmazonPayEvent.phpという名前にした。)

このイベントファイルにフックポイントで指定し「onCartIndexRender」の動作の内容を記載する。

例:

上記のコードの場合、元ファイル(Cart/index.twig)中の</form>を探し出し、amazonpaybutton.twigの内容を追加して出力するというものだ。

よって、次にamazonpaybutton.twigを作成する。

3. Twigファイルを作成する

twigファイルは、プラグインフォルダ内のResource>templateの中に作成する。

例:

 

作成したファイルをサーバにアップし、カート画面アクセス時にAmazonアカウントでお支払ボタンが表示されればOK。

 


[EC CUBE3でAmazonPayを利用するためのステップその5]カート画面に[AmazonPay]でお支払ボタンを表示[EC CUBE3でAmazonPayを利用するためのステップその5]
カート画面に[AmazonPay]でお支払ボタンを表示

EC CUBE3プラグインをつくる[EC CUBE3でAmazonPayを利用するためのステップその4]

【記事要約】

EC CUBE3系でのAmazonPay導入に関して、いよいよ本番実装。EC CUBEのプラグインを作成する。

 

EC CUBEはASPサービスではなく、自身のWEBサーバーにEC CUBEのプログラムを設置し、運用するタイプのネットショップだ。

大抵の場合、ホスティングサービスにEC CUBE3の自動インストール機能がある。

それによって、インストールした後、FTPなどによってサーバにアクセスし、全ファイルをダウンロードすれば、すべてのプログラムが閲覧できる。

よって今回、AmazonPayを利用できるようにするために、それらEC CUBEのコードをゴリゴリいじればよいかと考えた人も多いはずだ。

しかし、EC CUBE3になってから特に、基本的なEC CUBE3のプログラムを改変することは推奨されていない。

他のプラグインや、バージョンアップによって、変更部分が先祖返りしたり、思わぬ障害の原因になる可能性があるからだ。

そのため、EC CUBEに独自の機能を持たせるためには、プラグインによるドロップインが正規の干渉方法となっている。

そこで当初、僕もEC CUBE3のソースコードをゴリゴリ改変するつもりだったが、安全性を保つためにAmazonPayのプラグインを制作することにした。

僕が行ったプラグインの開発方法を下記に紹介する。

1.  EC CUBE3プラグイン開発の全体像をつかむ

EC CUBEのプラグインを、どのように作成したら良いかEC CUBEのプラグイン開発ドキュメントが用意されている。

http://doc.ec-cube.net/plugin_tutorial-generate

AmazonPayのPHP SDKのインストールの際に、MacからSSHで接続する方法をすでに学んでいたので、

AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]

EC CUBEのプラグイン開発ドキュメントの内容に基いてコマンドをひとつひとつ打ち込むと、app>Pluginフォルダの中に、コマンドで指定した名前のプラグインファイル一式が自動生成された。

EC CUBEのプラグイン開発ドキュメントの中にある、新規ページの追加、利用しないページの削除、フォームの追加、変更、プラグイン用テーブルの追加、チュートリアルさらには、ベストプラクティスの内容を熟読して、プラグインに関する全般的な内容を頭に入れる。

一見遠回りのようだが、この事前に全体把握をすることは、後々の時間節約になる。

闇雲に、ひとつひとつ追求していると今自分がどこの何に向き合っているのか迷子になってしまうからだ。

こちらのプラグイン開発ドキュメントには、EC CUBE3のプラグイン仕様書も用意されている。

こちらの内容も僕はとても参照した。

http://downloads.ec-cube.net/manual/v3/plugin.pdf

 

2. AmazonPayプラグインの全体的な動き

今回、EC CUBE3でAmazonPayを利用するためのプラグインの具体的な内容に関しては、全内容の公表を差し控えさせていただく。

僕が紹介するヒントを確認いただいた上で、独自にコーディングを行い、さらに確実なテストを行った上で、自己責任で実装して欲しい。

なお、僕の場合、購入後の管理画面にて実質請求する処理(配送後にする処理)はAmazonPayの管理画面で行うことにしたため、EC CUBEの管理画面には実質請求の処理を組み込んでいない。

さて、プラグイン仕様書にあるように、EC CUBEのプラグインは「フックポイント」と呼ばれる各ポイントに切り込んで、独自の処理を通す。

AmazonPayプラグインの大まかな動きは下記のようになる。

1.カート画面

(1)[Amazonアカントでお支払い]ボタンを表示する

(2)会員ログイン時は[Amazonアカントでお支払い]ボタンをグレーアウト

(3)Amazonアカウントでログイン時は、その旨をメッセージ表示し、Amazonアカウントログアウトボタンを表示

(4)Amazonアカウントでログインしたら、購入確認画面にダイレクト遷移する

2.購入確認画面

(1)Amazonアカウントでログイン時、アドレスウィジットと支払いクレジットカード選択ウィジットを表示する。

(2)Amazonアカウントでログイン時は、EC CUBEの配送先変更、お客様情報変更ボタンを非表示とする

(3)Amazonアカウントでログイン時は、EC CUBEの支払い方法をAmazonPayで固定とする。

3.購入完了画面

(1)Amazonウィジットで選択したお客様情報をEC CUBEに登録する

(2)AmazonPayへ購入情報を送信する

(3)AmazonPayからエラーが返ってきた場合のエラーハンドリング

このような内容でプラグインの構築をすすめた。


[EC CUBE3でAmazonPayを利用するためのステップその4]EC CUBE3プラグインをつくる[EC CUBE3でAmazonPayを利用するためのステップその4]
EC CUBE3プラグインをつくる

AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]

【記事要約】

EC CUBE3系でのAmazonPay導入に関して、EC CUBEに組み込む前にまず簡単なファイルを作成し、AmazonPayの大まかな動きを把握。そうすることによってEC CUBEへの組み込みイメージをつかむ。

 

AmazonPayをEC CUBEに組み込む前に、まずは簡単なファイルを作成し、ローカルのファイルとAmazonPayの動きを把握すると、その後の作業がしやすい。

目次にあるように、AmazonPayの全体的な流れをつかむために3つのファイルを作った。

お支払ボタンを表示させる機能とアドレス・支払いウィジェットを表示させるには、特にプログラミングは必要なかった。

AmazonPayへ売上電文を送信したり、AMAZON_ORDER_REFERENCE_IDという一意なキーから住所や連作先を取得する場合にプログラミングが必要となる。

なお、以下の作業内容は、AmazonPayでの設定がすべて完了し、テスト環境での実施を想定している。

初期設定とテスト環境に関しては、AmazonPayインテグレーションガイドのStep1登録Step2 SDKの設定を参照

1.  [Amazonアカウントでお支払い]ボタンを表示させる(step1.html)

AmazonPayでお支払ボタンを表示させる手順は、インテグレーションガイドのStep3 ボタンウィジェットの追加を参照した。

基本的にこのページに記載されているコードでAmazonお支払ボタンが表示される。

エラーハンドリングなどは省略されているが、取り急ぎテスト環境での動作検証なので、本番環境のコードにエラーハンドリングをしっかり記載する。

分かりにくかった点としては、SELLER-IDと記載されている箇所には、AmazonPayでログインし、インテグレーション>MWS Access Keyで見ることができる出品者IDを記載する必要があった。

REDIRECT-URLには、step2.htmlを記載する。

その他のパラメータの詳細は、ボタンウィジェットのページで確認できる。

2. アドレスウィジェットと支払カード選択ウィジェットを表示させる(step2.html)

アドレスウィジェットと支払いカードウィジェットを表示させるstep2.htmlは、インテグレーションガイドのStep 4:アドレス帳とお支払い方法ウィジェットの追加を参照した。

ここで、アドレスウィジェットと支払いカードウィジットが表示されると、orderReferenceIdが取得できるようになる。

PythonとRubyのサンプルコードが表示されているが、ページ下部の「アドレス帳ウィジェット」と「お支払い方法ウィジェット」のコードを記載すれば、それぞれのウィジットが表示されるはずだ。

AmazonPayに売上情報を送信するために、orderReferenceIdと支払い総合計が必要になる。

そのため、次のstep3.phpへのフォームボタンを用意し、hiddenで値を渡すようにコーディングを追加した。

oRIDには、orderReferenceId。

支払い総額は、OrderTotalとし、valueに1500と記載し、1500円を仮の支払い総額とした。

さらに、orderReferenceIdを取得し、hiddenのoRIdに自動的に反映させるJavascriptを追加

インテグレーションガイドのStep 5:注文詳細のセットと確認も参照するとよい。

なお、インテグレーションガイドのStep5に記載されているサンプルコードはPHP以外のものなので、取り急ぎ見なくてOK。

なお、インテグレーションで紹介されているコードにはエラーハンドリングが省略されているので、これも本番環境でしっかり記述する必要がある。

3. AmazonPayに売上情報を送信する(step3.php)

step2.htmlから渡ってきた情報をAmazonPayに渡し、決済を完結させる必要がある。

ここで登場するのが、SDKだ。

AmazonPayのPHP SDKはこちら>>

これをどこで使うべきなのかが分からず当初苦労した。

なぜなら、Amazonアカウントでお支払ボタン(step1)やウィジットの表示(step2)にもSDKを絡ませる必要があると思い込んでいたからだ。

また、インストール方法に「Installing using Composer」と記載されているのも意味が分からなかった。

とことん調べてみると、元々composerがインストールされているサーバに直接アクセスするSSHを利用して、「composer require amzn/amazon-pay-sdk-php」と電文送信すれば、Amazon Pay SDK (PHP)がインストールされるということだった。

幸いにして、EC CUBEは、このComposerが利用されている。

vendorという名前のフォルダを見ていると分かるが、中にComposer関連のファイルが格納されている。

よって、SSHでサーバにアクセスし、「composer require amzn/amazon-pay-sdk-php」と打ち込めば、vendorフォルダの中に、amznというフォルダができて、AmazonPay関連のSDKファイルが追加される。

しかし結果的に後からわかったことは、この面倒くさい手続きをしなくとも、AmazonPayのPHP SDKのページからファイルをダウンロードして、パスを通せば、Amazon Pay SDK (PHP)の機能は利用することができた。

Composerというものも、EC CUBE3にすでにComposerが存在することも知らなかったため、Composerのインストールから、MacからSSHでサーバにアクセスする方法も調べ、実施してみたが、結局はファイルをダウンロードして、サーバにアップロードし、step3.phpのファイルからamzn内のClient.phpへパス通すという作業で問題なかった。

そして、AmazonPayと決済完結の処理を実施するために使うのが、AmazonPayのPHP SDKのページに記載されいる「Convenience Methods」の内容だ。

Amazon Pay SDK (PHP)ですでに用意されているchargeという関数を使えば、Standard Payments(ワンタイムペイメント:ワ) / Recurring Payments(定期支払:定)で必要な下記の3ステップの処理を一括で行ってくれるのである。

①SetOrderReferenceDetails(ワ) / SetBillingAgreementDetails(定)
②ConfirmOrderReference(ワ) / ConfirmBillingAgreement(定)
③Authorize(ワ) / AuthorizeOnBillingAgreement(定)

charge関数を実施するために必要なパラメータの詳細も記載されている。

print_r($response);と記載したので、step2.htmlからstep3.phpに画面が変わった時に、AmazonPayからのレスポンス内容が表示される。

レスポンスコードが200で帰ってくれば、OKということになる。

エラーレスポンスコードに関しては、エラーコードのページを参照。

step1.htmlからstep3.phpの一連の流れを実際に自分の手で掴んでみると、今後の作り込みイメージも湧きやすくなったと思う。


[EC CUBE3でAmazonPayを利用するためのステップその3]AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

AmazonPayを申し込む[EC CUBE3でAmazonPayを利用するためのステップその2]

【記事要約】

EC CUBE3系でのAmazonPay導入に関して、まずAmazonPayへの申し込みが必要。実際に申し込みをしてみた経緯を紹介。

 

AmazonPayを利用するためにはまず、AmazonPayへの申し込みが必須。

実際に申し込み作業をしてみた経過についてご紹介。

1. AmazonPay申し込みの必須条件

AmazonPayを利用する必須条件には下記の2点がある。

① 法人であること

② 法人カードもしくは社長の個人カードがあること

①が多くの場合、ハードルになり、ガッカリされる方も多いだろう。

②に関しては、僕は法人カードを持っていないので、個人(代表取締役)のカードで手続きができた。

①と②の条件を満たす場合は、ちゃんとした会社であれば、問題なく審査は通ると思う。

まずは、AmazonPayのページで条件などをよく読んだ上で

下記ページからAmazonPayの申し込みをする。

https://pay.amazon.com/jp/contactsales

2. 必要書類の提出と手続き

申し込みをすると、自動返信メール(メール①)が送られてくる。

その後、僕の場合は翌日、審査に関する詳しいメール(メール②)が送られてきた。

具体的な手順や審査過程、開発ソリューション会社の提案などが書かれている。

審査の流れは下記のような内容だった。

(1)審査書類提出(御社)

(2) セラーアカウント作成方法の案内(Amazon)

(3)セラーアカウント登録(御社)→完了後、Amazonへ連絡

(4)審査開始(Amazon/1~2週間を要します)

(5)審査完了の連絡(Amazon)

(1)の審査書類には、登記簿(履歴事項全部証明書)、代表者の身分を証明する書類、銀行口座(法人)を証明する書類が必要だった。

(2)のセラーアカウントは、既にAmazon出品サービスのセラーアカウントを持っていたとしてもまた別にアカウントを作る必要があるとのことだった。

実際僕も出品アカウントを持っていたので、別のメールアドレスで、AmazonPay用のセラーアカウントを新しく作った。

メール②が送られてきたその日のうちに審査書類を提出。

すると審査用書類受理の自動返信メール(メール③)が送られてきて、さらにその日の内にセラーアカウント作成方法についての案内メール(メール④)が送られてきた。

ちょっとバタバタしていたので、メール④が来た後、しばらく放おっておいたところ、ふたたび同じ内容のメールが3日後に送られてきた。

そのため、直ぐにセラーアカウント作成をしたところ、セラーアカウントの設定で漏れている箇所の指摘がメールで送られてきた。(メール⑤)

修正したところ、審査に1週間かかるという内容のメール(メール⑥)が送られてきて、実質その日から6日後に審査完了の連絡メール(メール⑦)が届いた。

必要書類の提出やセラーアカウントの作成などをテンポよくやれば、一週間ほどで手続きが完了するだろう。

なお、各メールに丁寧な説明やマニュアルがリンクされているので、迷うこと無く作業ができると思う。

3. AmazonPay管理画面設定

審査完了メール(メール⑦)に開発に必要なキーの確認方法や初期の設定について詳細が書かれているマニュアルが記載されている。

マニュアルやメールの説明文に沿って、まずはAmazonPayの管理画面の設定や確認が必要になる。

基本的に本番環境、テスト環境、ログイン設定の3パターンへの切り替えを行って、都度必要な確認や設定を行う。

4. 開発者向け情報を熟読

AmazonPayの利用準備が整ったら、次はEC CUBEとの連携のための開発に取り掛からなければならない。

そこで、この段階から一番見るようになるのが、開発者向け情報のページだ。

https://pay.amazon.com/jp/developer/documentation

僕はワンタイムペイメントを利用するつもりで、またEC CUBE3はPHPを利用しているので、一番良く見たのは、「ワンタイムペイメント」のページと「イントロダクション」のページ、そして、PHPのSDKページだった。

とにかく、ここを熟読することが大事だ。

なお、PHPのSDKページは英語しかない。しかもサンプルへのリンクが切れている…。

詳しくはまた追って書くが、英語のスキルも多少は必要になってくるといえるだろう。

では、次回また続きをご紹介したいと思う。


[EC CUBE3でAmazonPayを利用するためのステップその2]AmazonPayを申し込む[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む