KONNO Kiyotaka

WC Marketplace(ベンダー関連機能)

しかし、WooCommerceも日本語情報は、豊富とは言えませんね・・・ ほとんどお一人で頑張られている?? https://docs.artws.info/about-this-site/ WC Marketplaceと言っても、そもそもWooCommerceが分からなければ始まらないので、上記を参考にさせていただきながら、進めていきます。 なお、現時点で、 WooCommerce Version 3.5.3 WC Marketplace Version 3.3.0 です。 基本ドキュメント インストールは、基本レベルだと特に悩まないとは思いますが、 https://wc-marketplace.com/knowledgebase/wcmp-setup-guide/ 一応こちらを参照しておけば、安心かと思います。 その他のドキュメントも、ここから辿っていきます。 ベンダー管理システム Vendors Management System https://wc-marketplace.com/knowledgebase/vendors-submenu/ まず、考え方として、Vendorを登録し、これは、wpサイトログインのユーザにもなります。そして一対一でShopが紐付きます。 基本的には、管理者がVendorユーザを作って、詳細情報はそのVendorユーザが自分自身の情報を登録し、管理者がその登録内容を承認する、という流れのようで、そのためのステータス管理(Pending、Rejected、Suspended、)がされているという形のようです。 これを登録すると、 http://localhost/circlant/user1/ という形で、そのベンダーのページが作成されるのですが、そこに表示される画像はどこで設定するのかが分からない。追々分かることを期待して進めます。 ベンダー登録方法 Setting up – Vendor Registration for WCMp https://wc-marketplace.com/knowledgebase/setting-vendor-registration-wcmp/ ベンダーについては、より詳細な登録方法として、さらにドキュメントが提供されています。 管理者が登録する方法以外に、Registration Formも用意されており、それをするしない、承認を経由するしない、フォームで登録する内容、等が設定可能です。 例えば、Store DescriptionとCountry を追加すると、このような登録フォームになります。 ベンダー用機能 Setting Up WCMp – A Vendor Guide https://wc-marketplace.com/knowledgebase/setting-wcmp-vendor-guide/ どうもドキュメントの並びが綺麗ではないように思うのですが、ベンダー登録したところで、今度は、ベンダー用機能を見てみます。 Vendorロールのユーザでwp管理画面にログインすると、ダッシュボードの見た目はだいぶ違います。 上に書いた、店舗画面の見た目等はここから設定することになります。 その他、商品や、支払い方法等を登録し、あるいは、注文情報の確認等を行いますが、ポイントは商品登録だと思いますので、今回はここで一旦終了します。

WooCommerceを試す

MagentoのDocker環境を作った訳ですが、サンプルデータを後から投入しようとすると、やはり、「PHP Fatal error: Allowed memory size of xxx bytes exhausted」が発生したりして、Dockerの出来合いの環境ならもう少しすんなり行くかなと言う期待は、あまり応えてはもらえませんでした。 そこで、ちょっと浮気をしてみます。 Docker力強化も兼ねて、今回もDocker環境を作ります。 WooCommerce入りのDocker Hubのイメージもありますが、そこは後からプラグイン入れても良いよね、ということでwordpress環境をまず作ります。 イメージは、あえて公式ではなく、先日の構成を参考にして、bitnami版にしてみます。 今回は、最初から、ymlに永続化用の記述をしておきます。 mkdir docker/WooCommerce mkdir docker/WooCommerce/wc-mariadb-persistence mkdir docker/WooCommerce/wc-wordpress-persistence cd docker/WooCommerce/ curl -LO https://raw.githubusercontent.com/bitnami/bitnami-docker-wordpress/master/docker-compose.yml ・・・yml編集・・・ docker-compose up -d やはり、wordpressセットアップ画面をすっ飛ばして、サイトが立ち上がっている状態まで来てくれます。 管理画面はwp-admin、ユーザ・パスワードは、Settings画面参照(WORDPRESS_USERNAME、WORDPRESS_PASSWORD)。 日本語化はされていません。 そして、おもむろに、Pluginsから、WooCommerceをInstall、Activate。PluginsのページにWelcome to WooCommerceのメッセージと「Run the Setup Wizard」ボタンが表示されているので、クリックします。 基本情報を入力し、Payment画面では、PayPalとstripe、さらにCash on deliveryを有効にしてみます。Shippingはとりあえず適当に、オススメのAutomated TaxesとMailChimpも有効にしておいて、Jetpackは接続できないというメッセージになりましたがそのまま行きます。 チュートリアルに従って商品登録し、「Visit Site」の下の「Visit Shop」をクリックすると、商品が表示され、カートに投入し、カートを見ると購入商品が表示されます。 ただ、この状態ではあまりに見た目が投げやりなので、AppearanceのThemesからStorefront を検索して、Install、Activateします。 「Design your store」という画面が表示されますので、流れに従って入力。多少見た目が整います。「Design your store」が公式のようなので入れてみましたが、なかなかのシンプルさではあります。 https://shimesan.com/2018/03/24/woocommerce-netshop-003/ この辺は参考になりそうです。 試しにもう一つ、THESHOPというテーマを入れてみます。 https://athemes.com/theme/theshop/# さすがの良い感じ。 とりあえず、こうしておきます。 さらに、今回やりたいのは単一ショップではないので、複数ベンダー対応のプラグイン、「WC Marketplace」を入れます。 そして、ちょっと設定を初めてみましたが、これはなかなか骨が折れそうなので、また改めて。

DockerでMagento環境を構築する

Dockerで、ビジュアルに、Magento環境を構築していきたいと思います。 参考情報 https://qiita.com/kzkiq2nd/items/29f69c156f6f6e2fb215 を入り口として、 https://qiita.com/kzkiq2nd/items/b8162cfc41d13616f861 https://principle-works.jp/blog/how2runm2ondocker-apache/ https://principle-works.jp/blog/how2runm2ondocker-compose/ も参照。 しつつ、いかにビジュアルに構築するかを考えます。 イメージ検索 まずは、Kitematic内で検索してみます。 最初は、一つしかヒットしなかった気がしたのですが、気のせい?? まあまあ、結構な数がヒットします。 Googleで「magento docker」で検索した場合は、bitnami/magentoが先頭でヒットします。 さらに、DevBoxなるものもあるといいます。 どれを使うべきか。 DevBoxが正攻法のようではあります。 https://magento.com/blog/technical/set-your-magento-2-development-environment-faster が、最初の参考情報によると、ちょっとフルスペックすぎる感じが無きにしも非ず。 かつ、2.3には未対応っぽい。 次は、Pulls 1M+ となっていて、利用者の多そうなこちら。 https://hub.docker.com/r/alexcheng/magento2 解説も丁寧にされているのが好印象。2.3.xとも書いてあるので安心。 こちらにさらに情報あり。 https://microbadger.com/images/alexcheng/magento2 bitnami版も確認。 https://hub.docker.com/r/bitnami/magento 利点として書かれているのは、最新版追跡の速さですね。 こちらにも、いくつかのパターンが置かれています。 https://bitnami.com/stack/magento/containers ちょと悩むところではあるのですが、ブランド名を信じて、bitnamiにしてみます。 bitnami版magento2のインストール 改めて、Kitematicで「bitnami/magento」で検索し、CREATEボタンを押します。 しばらくダウンロード画面が表示され、追加されたかと思いきや、エラーメッセージ。 Welcome to the Bitnami magento container Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-magento Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-magento/issues ERROR == The MAGENTO_DATABASE_PASSWORD environment variable is empty or not set. This environment variable is required for Magento to be properly installed.

MacにDocker環境をビジュアルに構築する

目的 2018年11月にMagentoが2.3にバージョンアップしたため、その環境を作りたい。 しかし、現在AWSに構築している環境をバージョンアップするのは、素人には難しそう。そもそも、現状が綺麗にできていない気がするので、クリーンインストールすることにする。 そして、今後も複数バージョンをどう取り扱うか問題は出てくると思うので、このWordpressサイト構築にあたって興味を持ったDockerをもう少し突き詰めてみる。 考えること Dockerもコマンド打つだけじゃないでしょ、もっとビジュアルに行こうぜ!と思ったら、思いの外深い。 参考 https://yoshinorin.net/2017/08/30/try-docker-rancher/ まず、Docker for Macにするのか、Docker Toolboxにするのかを考えなければなりません。 一般的には、VirtualBoxが不要であるDocker for Macの方が、早い、ということのようです。 そして、実際のビジュアルツールとして、やはり本命はDocker社純正のKitematicと言うことになるかと思います。 ただ、上記参考サイトにあるように、これは「Docker for WindowsとDocker for Mac」用となるので、AWS等のLinux環境では同一環境にはならないと言うことになります。 もっとも、それは「外側」が異なるという話であり、Dockerで構築される「中身」については同じでしょうから、それは別の話として良いのかなと考え、Kitematicで構築することにしてみます。 なお、第二の選択肢として、Portainer、Rancherも興味深いです。 Kitematicのインストール 手順としては、Docker for Macをインストールし、そうすると、Dockerアイコンが表示されるようになるので、そこからKitematicをインストールするということのようです。 この辺が比較的新し目の情報かと思います。 https://yatteq.com/localdev-docker で、Docker for Macをダウンロードしに行くわけですが、そこの名前はDocker Desktop (Mac)。分かりにくくないですか?? Dockerのアカウント登録をして、ダウンロードします。518MB、なかなかですね・・・ インストール方法は特筆すべきことはないですが、本家docsでも眺めておけば良いでしょう。 https://docs.docker.com/docker-for-mac/install/#install-and-run-docker-for-mac 丁寧な手順はこちらとか。 https://qiita.com/seijimomoto/items/357ac7aa84f98b96021f 最初、Docker アイコンからKitematicをクリックしても反応なく焦りましたが、再度アプリケーションフォルダからDockerをダブルクリックしたら反応してくれました。 ということで、インストールまでは、簡単に行きます。

Code4StartUp ~ UberEatsを作ろう ~ ついに完了!

[ ][1] Code4Startup Task26では、ドライバー側マップでドライバーの移動ロケーションを追加し、カスタマー側マップにも追加します。 そして、シミュレータを二つ立ち上げて、動きを見ることができますよと言うテクニック。 最後にTask27でdanielgindiのチャートコントロールを使ってグラフを表示します。 https://github.com/danielgindi/Charts と言うわけで完了!長かった・・・ ただ、完成まではしないのですね・・・ 例えば、ドライバーが配達完了すると、ステータスが変わる、と言うところは作りますが、その時のドライバー画面は白いままとか。 ともあれ、この画像でおめでとうと言われました! https://www.google.com/search?q=congratulations!+gif&tbm=isch&tbs=rimg:Cf_126g8pSGmDIjj2cw58GhEDRb1Tm-QQfezqphKGfD1O0NL-e3qT_1YKO7LZvVAYaur8hA3bBucnHSIqfOWhf0o2EKyoSCfZzDnwaEQNFEaLGpRKdOq-YKhIJvVOb5BB97OoROM0rrFOchCUqEgmmEoZ8PU7Q0hGkQsPwogAEjSoSCf57epP9go7sEcYO1TRi5KJ5KhIJtm9UBhq6vyERQUG6cqDuGNMqEgkDdsG5ycdIihE6TOBfMSUADCoSCZ85aF_1SjYQrEe5Ue_1GH1SA_1&tbo=u&sa=X&ved=2ahUKEwiOhtjjxdXfAhXXAIgKHaCBBUsQ9C96BAgBEBs&biw=1765&bih=1034&dpr=2#imgrc=__bqDylIaYNUMM:

Code4StartUp ~ UberEatsを作ろう ~ ドライバーサイドアプリ

[][1] Code4Startup ここまでは、カスタマーサイドのアプリ。 Task24は、ドライバーサイドのアプリ。 このスピード感で画面を追加していける、というのがSwiftの強みだと思う。 そして、この段階で初めてCusotmerとDriverでディレクトリを分けていけるのもよい。 ということで、Task24がViewControllerで画面遷移のあたり。 Task25で、API部分で、注文のピックアップのあたり。 悩みながら、進めます。

Code4StartUp ~ UberEatsを作ろう ~ 地図上の経路描画

Code4Startup Task23は、決済部分から、お店から配達先までの経路描画など、ある意味、講座のクライマックス。 経路は、import Mapkit しなければならないとすると、他の方式で開発する場合は、またちょっと苦労するということでしょうか。 画面作成の観点で、Swift最強だな、というのはひしひしと感じるわけですが、Android版も開発するとなった場合に、まるっきり別物の開発になってしまう、というのはやはり辛いなとも感じています。

Code4StartUp ~ UberEatsを作ろう ~ 地図

Code4Startup 年末なので、頑張ります。Task22まで来ました。 トレイ(ショッピングカート)画面で、注文者の住所を入力するところで、地図と連携。 とりあえず、キーワドとしては、 MKMapView CoreLocation.Framework info.plistの Privacy – Location When In Use Privacy – Location Always CLLocationManager というあたり。 次のTask23は決済部分で、Task24がお待ちかねドライバー機能、全27タスクの終わりが近づいてきました。

Code4StartUp ~ UberEatsを作ろう ~ 詳細画面からショッピングカート

Code4Startup リスト画面から詳細画面呼び出し、そこからショッピングカート(この講座ではTrayという言葉)への追加。 途中のミニ講座は、「pyramid if」。 pyramid ifで調べても何も出てこないので、この講座独特の言葉でしょうか。しかし、「Pyramid of doom」という言葉はあるようです。 https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming) 簡単に言えば、過剰な入れ子(ネスト)構造でしょうか。そこでなぜ「doom」なのかはやはり不明。 そして、ifの多重入れ子回避の対応として、Swiftでは「guard」があるよ、というお話です。 そして、この「ガード節による入れ子条件記述の置き換え」という方法は、ファウラー「リファクタリング プログラミングの体質改善テクニック」からきているのですか・・・。大昔に読んだ・・・   リファクタリング―プログラムの体質改善テクニック (Object Technology Series)posted with カエレバ マーチン ファウラー ピアソンエデュケーション 2000-05 Amazon 楽天市場 7net

Code4StartUp ~ UberEatsを作ろう ~ リストの実装

Code4Startup Task19はレストランリストの実装。 最初は、仮実装でリスト表示の枠組みを作っておいて、ここで、API連携により実際のデータを表示させます。 合わせて、サーチバーの実装でデータのフィルタリングを行い、Activity Indivatorという、Windowsで言えば砂時計を表示させます。 とりあえず、この辺は淡々と進めます。