Programmers Office

色々溜まっていることもやらねばならず、車検を申し込み、自動車保険の見積も申し込み。 車検はディーラーに任せるスタイル。そのおかげではないかもしれませんが、今の車は中古ながら装備的に非常に満足度が高く、それでいてお値段もお得だったので、基本的には一切合切お任せしています。 で、その時は、任意保険もお任せでやったのですが、さすがに、保険の内容はディーラーは感知しないし、値段もだいぶ違うだろうということで、ネットでの一括見積もり。 申し込むとすぐに見積もりが表示されますが、やはりだいぶ違いますね。あまり、各社の差異もないと思われるので、最安値で良いか、という感じです。

仕事の方の年度末のパワープレーの影響で、こちらはすっかりご無沙汰になりました。 そして、突然チャットボットを作ることを思い立ち、試してみたところこれがなかなか面白い。ということで、いくつか作ってみたいのですが、前半戦を終えたところで、まとめてみたいと思います。 LINE bot　の処理の流れ 作るにあたって、今回いきなり作り始めましたが、ある程度流れがわかっていると、よりスムーズに入れるのでは、ということで、流れの絵を描いてみました。 絵心のなさアピールしてどうするんだという気持ちもありますが・・・ ①普通に、LINEでトークをする場合に、自分が発言入力したら、それはおそらくLINEのDBに保存されて、画面に表示されて、処理終了となると思います。 チャットボットを作る場合は、利用者の入力に対して、Webhookという仕組みを組み込みます。 設定としては、Webhook送信を「利用する」として、そのURLを指定するのみです（けど、URL指定するなら、「利用する」の当たり前じゃない？？最初、URLだけ指定して、呼び出しに失敗して小一時間ほどハマりました）。 ②LINEはWebhook送信先に、入力内容をPOSTします。 ですので、まずPOSTを受けられるサイトを用意する必要があります。 これを、今回は、GAS（Google Apps Script）を使用して立ち上げました。 しかし、立ち上げたという表現は正しくないかもしれません。「立ち上げる」的な行為は何もしてません。ただ、Googleドキュメントの１ページを作るかのように、ファイルを一つ作成し、そこにおもむろにコードを書きます。 function doPost(e) と書いて、ウェブアプリケーションとして公開するのみです。これがサーバーレス・アーキテクチャというものか・・・とちょっと感動しました。 ③GASの中で色々やっても良いのですが、GASから外部サービスを呼んで、Responseを受け取ることができます。多くの場合はこのパターンではないでしょうか。Webhookはhttpsで呼ぶ必要がありますが、GASからの呼び出しはhttpでもよい、という裏技的な使い方も可能です。 ④受け取った情報を加工して、最後は、LINEのMessaging APIを呼び出します。Replyというのが、要は、利用者にとっての、トーク相手の発言になります。この返し方も、単純なテキストメッセージとして返すだけでなく、様々なフォーマットで返すことができる、というところがボットとしてのインターフェースの魅力につながります。 また、②のPostに対するResponsとしてReplyを返すのではなく、独立したAPI呼び出しになっている、というのもなるほどと思いました。例えば、一つの入力に対して、複数のReplyを返すことができる、ということです。※これはできないっぽい。メッセージを配列で返すことはできます。 ⑤最後に、Replyの内容が、画面上に表示されます。 なぜチャットボットを作るのか 正直、これまで、限られた知り合いとの連絡手段として以外にLINEをあまり使ってこなかったこともあり、ボットの何が良いのかわかりませんでした。 しかし、今回作る方から入ってみて、魅力があることも分かりました。 利用者にとってのチャットボットの魅力 一言で言うならば、「入力画面というインターフェースからの解放」とでも言えば良いのでしょうか。画面にいくつか項目があって、それらを入力して情報を得る、というのは、やはり処理する側の都合に合わせたインターフェースではあると思います。より直接的にこれが欲しいと言ってもらう、あるいは、質問に答えてもらいながら欲しいものを認識する、という方法が、自然な気がしました。 開発者にとってのチャットボットの魅力 主題はこちらですが、意外と良いものでした。 (1)フロント側作業の軽減 LINEとして決まっているReplyの返し方に従っている限り、ある程度の見た目の保証が得られる、かつ、フロント側障害が発生しにくい、ということがあるかと思います。もちろん、綺麗にメニューを出そうと思ったらイラストを書く等が必要になってきたりして、フロント側の才能が不要になるわけではありません。しかし、見た目の印象作りにいつも悩まされる身としては、これだけの作業でこの結果が得られるというコスパはかなり高いと感じます。 (2)クロスプラットフォーム開発 今作っているのも、身近な人用のこじんまりとしたアプリですが、その利用者の中でもiPhoneとアンドロイド端末は半々という感触です。すなわち、各OS向けのアプリと作るか、クロスプラットフォーム開発をするしかない、と考えています。 しかし、クロスプラットフォーム開発は、ここでも色々トライしているように、なかなか決定打が現れないというのが現状かと思います。また、それぞれ作ろうと思っても、macアプリを作ろうと思ったらmacが必要、というのもやはり障壁です。 これに対して、LINEのプラットフォーム上で動作するチャットボット方式はそこへの配慮が０で良い、という点で強力です。 (3)インストールへのハードルの低さ 上とも関係しますが、特に、身近な人向けの野良アプリの場合、作ったものをインストールしてもらおうというのも、一苦労があったりします。iPhoneの場合に野良アプリを配布する方法があるのか、分かりません。 アンドロイドの場合も、apkファイルをダウンロードしてもらう方法は提供できたとして、それをインストールしようとしたら警告が出てしまうことを考えると、ちょっと無理だな、と思ってしまいます。 これに対して、チャットボットであれば、LINEで繋がっている人であれば「おすすめ」でその人を指定することですぐに見てもらうことができますし、友達になる前にQRコードを見せて繋がってもらうこともできます。これであれば、安心して利用してもらえるのではないかと感じました。 開発に向けての情報 世間には１時間で開発できる系の情報がたくさんあります。確かに、１時間で動くもの（入力した文字をそのまま応答する、程度ですが）が完成するので、とっかかりやすいのは間違いないです。そこからさらに、６時間くらいかけて、 ・日→中、中→日、日→英、英→日　翻訳 ・リクルートのスタディサプリAPIからの情報検索 ・クックパッドの情報検索 を作りました（クックパッドは丸パクリですが）。 作ったもののそれぞれの解説をしてみたいと思う他にも、今後の開発に向けての情報として、書きたいことが色々出てきました。 ・GASとは。サーバレストは。 ・GAS版JSON処理方法、XMLパース方法、HTMLスクレイピング方法 ・LINEリッチメニューのコツ ・Flex MessageによるリッチUI ・ローソンアプリ（現在のLINEボットの最高峰？）の分析 ボチボチやっていこうかと思います。

WooCommerce・WCFM Marketplaceサイトに、PayPal決済を導入します。 お金の動き WooCommerceとして、こういうのを本当は簡単にまとめて欲しいわけですが・・・まず、購入者がPayPalを使って支払う、この支払われたお金は、どこに行くべきか。 WooCommerceだけで考えるなら、このサイト開設者＝店舗なので、そこに行けば良いわけですが、Marketplaceの場合は、基本的には店舗に行きつつ、システム利用料（コミッション）がサイト開設者に行くべきとなります。 で、最終的にはそうなのですが、では、具体的にPayPalの設定は誰のアカウントで設定すべきなのか。店舗ごとに設定するのは大変ではないですか？と考えると、開設者のアカウントで設定し、一旦開設者に支払われた後、店舗に利用料を差し引いた分が支払われる？ そんなことを考えながら、進めます。 上記の予想から考えると、サイトとしての設定はWooCommerceとしてやるべきだろうということと、WooCommerceの方が情報が多いので、それをやってみましょう。 WooCommerceのPayPal設定 ダッシュボードから、WooCommerce→Settings→Paymentsと進むと、支払い方法を選択する画面になります。 たくさん・・・Paypalは二つ、Stripeはたくさん・・・ さて、PayPalには、PayPalという、いわゆるPayPal Standardと、PayPal Checkoutというものがあります。 この違いは何か。 開発者向けTOP（導入方法・技術情報）-PayPal(ペイパル) https://www.paypal.com/jp/webapps/mpp/developer このページの「簡単決済ボタン」と「API決済」に対応するということですね。 簡単決済は、いったんPayPalサイトに飛んで行って戻ってくるタイプ。 API決済はどこまで裏でできることになるか分かりませんが、「よりセキュリティーが高く、画面遷移が少ないため、成約率のアップが期待でき、カゴ落ち率の減少に貢献します。」とのことです。 PayPal Standard（簡単決済ボタン） とりあえず、簡単そうな方から。 Payment methods画面のPayPalの文字、または右端のSetupボタンから、設定画面に移動します。 「PayPal email」に、PayPalサイトの「Sandbox Accounts」で確認した、BUSINESSのアドレスを登録します。 そして、「PayPal sandbox」にチェックします。 「Receiver email」にもBUSINESSアドレスを登録。 「PayPal identity token」は、PayPal画面で確認。 Sandboxのダッシュボードの右上歯車アイコンで、アカウント設定画面に入ります。 左メニューから「アカウント設定」→「販売ツール」→「ウェブサイトの設定」で、 「ウェブペイメントの設定」という画面に入ります。 ここで、自動復帰：オン、復帰先は、サイトのトップにしてみます、そして、支払いデータ転送：オンにすると、IDトークンが表示されます。 あまり日本語情報ないなと思っていましたが、こちらが参考になりました。 https://e-yota.com/webservice/wooccommerce_paypal_standard_payment/ いったんは、これで動作するのではないか、ということで、試してみます。 商品をカートに入れて、支払い画面に遷移すると、注文者情報入力欄の右側に、下記のようなエリアが現れます。 ・・・おっと、これだと配送方法が決定できず、支払いに進めませんので、先にそちらの設定をします。

次は、WooCommerce・WCFM Marketplace からのPayPal決済連携を試したいと思いますが、その前にPayPal決済環境の準備。 PayPal Sandbox 当然、いきなり決済を開始できるわけではないので、まずはお試しをしたい。 そのために、Sandbox環境が用意されています。 いつも、PayPalにログインするものの、開発者サイトへの入り口に悩んで、結局ググって直接、飛んでいく。 PayPal Developer https://developer.paypal.com/ PayPal、仕組み自体は開発者に優しいと思いますが、Webサイトはあまり優しくない。 PayPal Developerにログインしたら、右上にログイン者の情報が表示されるエリアがあるので、その中のDashboard。 そこから先は、こちらなどを参考に。 https://qiita.com/PPJP/items/6ba65ed21da7fba65586 ポイントとして、gmailのアドレスでは、「＋」記号を使ってエイリアスを自動的に作ってくれるところ。これで、買い手用のアカウントと売り手用のアカウントをそれぞれ作ります。 アカウントを作成したら、Sandboxサイトにログインしてみます。 https://www.sandbox.paypal.com/jp/webapps/mpp/home これも、Sandboxだと分かるようにしてくれれば良いと思うのですが、本番サイトさながらのページ。 URLを確認しながら、ログインし、トップページのダッシュボードを確認します。 私の場合、アカウントは以前作ってあったのですが、どこから情報を確認したらよかったんだっけ、という状態でしたので、その場合は、PayPal Developerにログインし、ダッシュボードでアカウントを確認し、そのアカウントで、Sandboxサイトにログインする、ということになります。 このアカウントを使って、決済連携を試してみます。

WCFM Marketplaceの設定。各ショップページの設定。 基本的には、Marketplace→Vndorsで設定していきます。 デモサイトのこちらの見た目を参考にします。 http://wcfmmp.wcfmdemos.com/store/wcfm-vendor/ 気になる点は二つ。 一つは、STORE HOURS。 WCFM MARKETPLACE – STORE HOURS https://wclovers.com/knowledgebase/wcfm-marketplace-store-hours/ これを見ると、2ヶ所の設定だけで良さそう。念のためと思って、ベンダーユーザでログインしてこのヘルプページと同じ画面でも確認してみましたが、設定はされているけど、公開ショップページには表示されない。 この辺は、おそらく使用しているテーマにも関係してくる。 Shop Isleを使っている訳ですが、テーマのカスタマイズで、「Vendor Store Sidebar」という設定項目があり、そこで、Store Hoursを追加できます。 で、これをやると表示されるようになった訳ですが、ただ、元々表示されていた、商品カテゴリー表示とか、店舗地図とかが消えちゃった。 まあ、あまりデフォルト表示に頼るのもどうかというのもあるので、必要な表示をここに追加していくことで、だいぶ見た目も整ってきました。 ※用意されているウィジェットも豊富です。 もう一点は、ABOUTとPOLICIESの入力場所。 これは、どうやら管理者ログインだと表示されないようで、ベンダーログインして設定。 管理者は全部できるようにしておいて欲しい気もしますが、まあ、良いかと思います。

地図のプラグインMAPPRESS GOOGLE MAPを入れて、API Keyを設定すると、地図自体は表示されるけれども、入力した住所と連動してくれないという状態でした。 で、productsの地図を入力しようとすると、このようなエラーが。 Google Maps API Key error: please enable the Places API in the Google Developer Console. すなわち、Google Maps Platformという大きな括りの中で、大きく三つのサービスが提供されています。そして、そのうちの一つが、Places APIです。 https://cloud.google.com/maps-platform/products/?hl=ja たしかに、3つ目をチェックしなかった気がします。 改めて、有効にするのはこちらの画面から。 無事連動するようになりました。

立川流の人たちは本を書きますね。 落語進化論は立川志らくさんの本。 落語進化論 /新潮社/立川志らくposted with カエレバ 楽天市場 Amazon 7net この最後に紹介されるのが、鉄拐という落語。 鉄拐は、李鉄拐という仙人。八仙人の一人ということで、八仙人とは、こちら。 https://ja.wikipedia.org/wiki/%E5%85%AB%E4%BB%99 八仙人が登場する小説としては東遊記などがある。西遊記ではなく東遊記。 内容は、上海問屋のイベントのために仙人が駆り出され、そこから仙人が芸人として俗人化していくところに、人間(仙人は人間？)の業があるか。 最後に登場するのは、李白と陶淵明。 李白は唐代の詩人。陶淵明は東晋から南北朝時代の文学者。どちらも酒飲みという背景がオチとして使われている。

Homepageに表示する固定ページ 設定画面のReadingから「Homepage」にショップページを指定します。 最初Wordpressインストール時に日本語指定していたからか、日本語になってしまってますが、WooCommerce本体としてのトップページであり、これがWCFM Marketplaceでは、全店舗横断の商品ページ、という位置付けになります。 「Posts page」は指定すると、その画面はブログページになってしまうので、必要な場合はそれ用の固定ページを作る、ブログが不要な場合は非表示のページを指定しておく、というような形で良いかと思います。 地図 今日のメインは地図。 地図の表示にあたっては、他のプラグインとの連携が考えられているようです。 DOCUMENTATION https://wclovers.com/knowledgebase/ この中で、INTEGRATIONSに挙げられている地図関連のものが3つ。 どれを使っても良いのかなというのは、それぞれの紹介文面から見て取れます。 WCFM – MAPPRESS GOOGLE MAP https://wclovers.com/knowledgebase/wcfm-mappress-google-map/ In recent days Map – Google Map is very much essential to inform about your store/product location to your customers. “MapPress Easy Google Map” is one of the most easiest and user friendly plugin to do so. You can associate any number of maps with your product and also allowed any no of points within a single map, isn’t it really cool!

WCFM Marketplaceならではのサイト構成をどう考えるか。 デモサイトを見ると、まず、HOMEPAGEとしては、色々なショップの商品一覧。 http://wcfmmp.wcfmdemos.com/ 地図があって、検索条件項目があって、商品写真が並ぶ。 妥当ですね。 ヘッダのリンクは管理画面のリンクも混在していますが、コンシューマ画面と考えた場合に必要なのは、ショップ一覧というのは先日も書いたところ。 https://www.programmers-office.ml/2019/01/26/wcfm-marketplace-%E6%9C%80%E5%88%9D%E3%81%AE%E4%B8%80%E6%AD%A9/ 上記デモサイトでは「STORES」から遷移する画面。 http://wcfmmp.wcfmdemos.com/stores/ こちらも、地図があって、左サイドにショップの検索項目と、お勧めショップがあって、メインにショップの写真一覧が並ぶ。妥当。 次に必要なのは、各ショップのページ。 デモサイトで一例を見る。 http://wcfmmp.wcfmdemos.com/store/wcfm-vendor/ ヘッダに写真があって、左サイドに商品検索、クーポン、営業時間情報、カテゴリ、その他のショップのお勧め、地図、商品おすすめ。メインに商品を並べて、タブ切り替えで、店舗情報、レビュー等。 妥当。 そして、商品情報。 http://wcfmmp.wcfmdemos.com/product/olive-oil/ とりあえず、全体的にオーソドックスで良いと思いますので、この構成を一つずつ作っていきたいと思います。

サイトの構成が見えてきたら、やはり見た目を整えたくなる。 ということで、WooCommerce用テーマの選択。 最初使ってみたのはこちら。 THESHOP https://athemes.com/theme/theshop/# おしゃれだなとは思ったのですが、ヘッダ部分にアイコン三つの表示が固定になっているようで、ちょっとアピールされすぎている感が気になりました。 そしてもう少し探してみて見つけたのがこちら。 ShopIsle https://docs.themeisle.com/article/184-shopisle-documentation https://ja.wordpress.org/themes/shop-isle/ 以前、別のサイトを作るときに、IsleMagというテーマを使ったことがあります。 https://ja.wordpress.org/themes/islemag/ カラフルな見た目が気に入りました。 このサイトでも使おうと思いましたが、投稿日の表示のされ方だけ、ほんのちょっと気になって、また、現在使用しているMesocolumnがよりカラフルだったのでこちらにしたのですが、情報量の多さではIsleMagの方が強いので、実は今でも気になっています。 （ただ、今ちょっと調べてみると、This theme has been retired.となってしまっていますね。2019/1/28に更新されているのに？？謎・・・ https://themeisle.com/themes/islemag/ ） で、名前から分かるように同じ作者のeCommerce WordPress Themeとして提供されているものが、ShopIsleな訳です。 こちらの日本語情報も一通りの確認をするのに良さそうです。 https://lightup-works.com/shopisle Islemagに比べれば情報はかなり少なくなりますが、共通知識も使えるのではという期待も込めて、使ってみたいと思います。 なお、他にテーマを探したい方は、こちらも参考になりそうです。THESHOPもShopIsleも紹介されています。オンラインストアの構築に最適！すべて無料のおすすめWordPressテーマ20選