Programmers Office

Magentoのサンプルのホームページはアパレル業的なサンプルになっていますが、これを飲食業的なサンプルにしたいと思っています。しかし、なかなか思うようにいきません・・・ 1.やろうとしていること サンプルのトップページにあたる http://example.com/magento/　（magentoはインストール時に指定） これが、通常ベースURLになります。そして、ここに表示されているのは、アパレル業的なサンプルデータです。 今後の勉強用にこれはこれで残しておきたいのですが、できれば、アパレルサンプルはベースURLではなく別のURLにして、ベースURLで表示される内容を飲食業向けにしたいと思っています。 ただ、このベースURLで表示される内容のカスタマイズすら、どこから行うか分かりませんので、それは置いておき、まずは、とにかく飲食業向けホームページを作ることを目標とします。 2.ウェブサイト、店舗、ストアビューを作る 最初の基本は、ウェブサイト＞店舗＞ストアビュー　の構成です。 https://docs.magento.com/m2/ce/user_guide/stores/websites-stores-views.html https://www.programmers-office.ml/magento-open-source-user-guide/getting-started/configuration_configuration-basic/stores_websites-stores-views/ 今イメージしているのは、この飲食業向けに、標準のウェブサイトとは別のウェブサイトを作ります。 その下に、店舗を複数作ります。ストアビューは、通常複数言語対応用に使用されるようですので、これは各店舗1ストアビューとします。 https://docs.magento.com/m2/ce/user_guide/configuration/scope.html https://www.programmers-office.ml/magento-open-source-user-guide/getting-started/configuration_configuration-basic/stores_websites-stores-views/configuration_scope/ 3.商品を作る 次に商品を作ろうとしますが、いくつか、前提知識が必要です。 まず、最初に選択する必要がある、属性セットというものがあります。 これを選択することにより、商品として登録する属性の内容が切り替わります。 例えば、服にはサイズという属性があるが、カバンにはサイズという属性はない、というような形です。 そして、サンプルとして登録されている属性セットはアパレル用のものなので、料理用の属性セットを作成します。 例えば、ピザという属性セットを作成します。 しかし、実は、それよりも前に把握しておくべき内容があります。それは、商品には商品タイプというものがある、ということです。 https://docs.magento.com/m2/ce/user_guide/catalog/product-types.html https://www.programmers-office.ml/magento-open-source-user-guide/catalog/catalog_product-create/catalog_product-types/ 例えば、ピザの場合は、一種類のメニューに対して、サイズという考え方があると思います。 そのような複数バリエーションを持つ場合は、Configurable Productを指定して、新規商品の追加を行います。 商品タイプは見えるようになっておらず、そのまま新規商品画面に遷移できるので、最初は分かりませんでした。 4.ページを作る では、いよいよ、コンテンツ＞ページ　から、この飲食業ウェブサイト用のページを作ります。 ページのタイトル等を入力して、デザインを決めて、コンテンツを作成します。 で、ここが今日の本題なのですが、なかなか思うように表示がされないのです。 コンテンツのエディタとしては、ビジュアルに色々できます。 一番基本は、ウィジェットの追加という方式かと思います。 例えば、静的ブロックの挿入ということができ、そこで、サンプルとして用意されているブロックを挿入することは簡単です。 しかし、それではアパレルの商品が表示されてしまうので、ピザを表示させようと思います。 例えば、商品一覧というウィジェットタイプがあるので、それを選び、商品の条件として、属性セットがピザと等しいもの、という指定をします。 しかし、表示されません。 何が悪いのやら、となります。 5.SQL解析を始める ここで、ユーザガイドを丁寧に読み始めるというのが王道かと思い、だからこそユーザガイドの和訳を始めたわけですが、そう簡単に把握はできなそうです。 むしろ、実行されるSQLを解析した方が、原因にたどり着くのは早いのではないかと思い、そちらからのアプローチに切り替えました。 その話は明日に続けたいと思います。 関連記事 Magento(マジェント)始めました

さてMagentoを調査しているのは、あるプロジェクトで使おうとしているからです。これはいつもの一人プロジェクトではなくて、グループで行おうとしています。 そのプロジェクトで、タスク管理ツールを使いたいなと思い、ちょっと調べてみました。 1.有名そうなウェブ上のサービス 世界的に、となると、AsanaとWrikeが強そうに思われました。 asana Wrike どちらも日本語対応もされていますし、見た目もきれいです。確かに、スケジュールの概念も欲しいとは思ったので、ガントチャート機能も魅力的です。 日本だと、Backlogでしょうか。 Backlog ヌーラボさん、あちこちのイベントに通っていたころは接点もあったので、懐かしいなという気持ちで、応援もしたい気持ちはあります。 シンガポールのNuSpaceにも期待していたのですが、私が行くタイミングには間に合いませんでした。しかし、準備は進んでいるようですので、もしもまたシンガポールに行くようなことがあれば、是非訪問してみたいと思っています。 NuSpace そして、みんな大好きソフトウェアかんばん（って最近言わないのかな・・・）に特化した、Trelloは人気のように思われます。 Trello 2.インストールするなら 上記のウェブサービス利用型と異なり、自分でサーバ立ててインストールするなら、Redmineはかなり強いのではないかと思っています。 Redmine この辺見ていると、ガントチャートもカレンダーもWikiも、何でもあるよね、という感じでうっとりするレベルです。 3.考察 で、どうしようか考えたのですが、やはり無償で済むなら済ませたい。ウェブサービス系は、皆さん無料トライアルはあるけど、無料プランはないのですね（Wrikeはあるように見せかけてすでに終了している模様）。 Redmineはサーバ準備して、インストールして、というハードルの高さと、インストールにはまったりしてまた時間かかるんじゃないのという恐怖感。 タスク管理ツールを紹介しているサイトはたくさんありますが、なかなかこれ以上の情報がないように思われます。 4.GitLab一択では しかし、見つけました。無料のウェブサービス。 このページの画像を見てもらえば、一目瞭然かと思います。 Issue Boards イシュー（課題）を、とりあえず登録したものはOpen、具体的に始める段階になったらToDo、着手したらDoing、完了したらClosedという分類でタスクの状況が見えるようになりますし、イシューをドラッグアンドドロップで移動したりすることもでき、操作性も悪くないです。 大きな声では言ってはいけないのかもしれませんが、Trelloよりよいのでは？？ ということで、今はこれを使ってタスク管理しています。 まだコーディングには入っていませんが、ソースもドキュメントもまとめて管理できて、言うことないのではと思っています。 なお、余談ですが日本語化しても、この画面はBoardとなっています。中国語だと看板です。日本語でなぜ「かんばん」にしないのだろう。時代が変わったのですか？？ （私の頭はこの辺かな）   GitLab実践ガイド (impress top gear) posted with カエレバ 北山 晋吾 インプレス 2018-02-01 Amazon 楽天市場 7net  関連記事 Agilo ソフトウェアかんばん　初日の感想 平準化

現在作ろうとしているサービスの基盤として、Magento(マジェント)がよいのでは、と思い、Magento(マジェント)を使い始めました。 いろいろ苦労していますが、やったことを片っ端から忘れてしまうので、ちょっとずつ記録を残していきたいと思います。 1.インストール先、方法について (1)AWS Lightsail 一番小規模の構成だと1か月無料で使用できます。 簡単に起動できるのは感動です。ただ、これだとパワー不足です。サンプルデータを入れようとすると途中で失敗するので、いったんメモリを増やしたりする必要があります。 今改めて試してみたらまた感じ方も違うかもしれませんが、。 (2)AWS Bitnami こちらはEC2のインスタンス作成に、AWS Marketplaceで提供されているBitnamiのAMI（Amazon マシンイメージ）を使用するという方法です。 こちらもサンプルデータを入れようとするとエラーになるのですが、その理由はシステム構成をバージョンアップしなければならないということでしたが、どうやってもPHPを7.1に上げられず、断念しました。BitnamiがMagento2.2環境を提供してくれるようになると、これはかなり有望な選択肢になると思います。

(3)GCP Bitnami では、ということで、いったんAWSではなく、GCPの方に立てようとしてみたのですが、AWS Bitnamiとほぼ同じ結果でした。 Bitnamiのイメージではなく、通常構成でインストールしようともしてみましたが、それも失敗（理由はもう忘れてしまいました）。 (4)AWS クイックスタート もういちど、AWSに戻り、やはり手順書見ながらやらないとね、ということで、こちらを参照。 AWS クラウドでの Magento: クイックスタートリファレンスデプロイ サンプルデータ付きでインストール完了。 しかし、翌日、請求警告メール。改めて見てみると、これはものすごいリッチな構成で環境ができています。 （転載）

慌てて環境削除しました。 (5)AWS LAMP with PHP 7.1 Certified by Bitnami 最終的に現在使用している環境はこれ。Magento入りのAMIではなく、LAMP環境まで入っているAMIにMagento2.2.5をインストールしました。 こんな素人状態で大丈夫かなと思いつつ、AWSの勉強もしながらMagentoも勉強していきます。 2.現状の問題 問題もいろいろあるのですが、ありすぎて、とりあえず役立ちそうなところから勉強していく感じです。 (1)bin/magento setup:upgrade等をすると500エラーになる この問題のために、当初はサンプルデータを入れられず悩んでいました。 ところが、サンプルデータはインストール後にsetup:upgradeしなくてもちゃんと入っていましたので、それでしばらく動かしていました。 ただ、管理画面を日本語化しようとして、 composer require mageplaza/magento-2-japanese-language-pack:dev-master php bin/magento setup:static-content:deploy -f ja_JP php bin/magento cache:flush とやったら、また500エラーになってしまいました。 そうなった場合、 bin/magento deploy:mode:set developer とすると一応は動きます。しかしなぁ・・・ (2)Cronを動かせていない もしかしたら、これが(3)の原因だと悲しいのですが、これもなかなか手順が分からず・・・ (3)ホームページのカスタマイズができない サンプルのホームページは一応残しておいて、特定のストアビューのホームページを作って、ウィジェット等を配置したいのですが、うまくいっていません。

各国チャイナタウン比較をしてみたいですが、そもそも最近横浜も行ってないし、不十分ながら羅列。 シンガポール シンガポールというと洗練されたイメージがあり、チャイナタウンも横浜的な整備されたチャイナタウンかな、と何となく思っていたのですが、想像以上に良い意味でごちゃごちゃでした。これぞチャイナタウンと言ってもよいかもしれません。 駅前（北側？）に大きなショッピングビル 南側？が商店街

ちょっと離れたところにあるマックスウェルフードセンターが、一番コスパ高かったと思います。 ニューヨーク ある意味、チャイナタウンという英語はニューヨークのチャイナタウンを指すのでは、と思うくらい有名かと思われる、ニューヨークチャイナタウン。 孔子像の前にもシティバイクがずらり こんな感じでひたすらお店が並んでいます。ただ、何となく生活感はないというか。そういう意味だと横浜に近いかもしれませんが、お土産屋さんがあるわけでもなく・・・ 一軒入ってみました。麻婆豆腐はあまり辛さのない、ザーサイ味的な麻婆豆腐でした。 アメリカにあったって、中華街では麦当劳です。 ワシントンDC ワシントンDCにもチャイナタウンはあります。しかし、ここは逆に、普通の生活しかない、けど、チャイナだけでもない、という、こんな門を作らなくてもよかったんじゃない、とうい感じです。

薄っぺらい門があるだけで、チャイナ以外も入り混じっている こんな感じで、漢字は見られますけどね。ていうか、ここのHOOTERSの店員は中国人だったのだろうか。入ってみればよかった？  西川口 オチのような扱いですみません。普通の街がチャイナタウン化していくという現在進行中の面白さがあります。 駅ビル内の総菜屋さんから始まってます 夜は映えますね 最近多いと思ったのが、この大鍋料理。

ヨーカドーの中だってこうなっちゃいます 芝園団地 生活の場としての中華街最前線（完成形？）と言えば芝園団地。 共存のように見せているけど、多分本当は1か国語で十分。

いえ、そうではありません。それは誤解です。 https://prtimes.jp/main/html/rd/p/000000008.000028394.html ワークスペースとして利用できるのです。 「フーターズでテレワーク」とか検索してみてください。皆さん、下心全開で仕事してますよ。 そんな中から一番役に立つと思われるページは、こちら。 https://de-gucci.com/blog/29475 ちゃんと入店の準備をしてから行きましょうというお話です。 で、私も準備して行ってきました。で、ちょっとマイナス気味の所感。 ・顔認証は時間がかかる。ネットワークのせいか、顔のせいか・・・ 帰りはあまりに時間がかかるので、QRコード認証にしたら、あっという間でした。 ・そもそもネットワークはあまり早くなかったような（測定したりしないので感覚です） ・電源席は満員ということで普通の席でした。ソフトドリンクはたっぷり入って200円で安いから、その辺のカフェよりは良いかもしれませんが、電源使えないとあまり意味ないのですよね・・・

旅程は、8/11（土）8:30羽田出発エアチャイナ北京経由便、同日14:35ワシントンダレス空港到着。途中、8/14（火）6:00発の国内便でニューヨークへ行き、8/15（水）10:35ニューヨーク発のAmtrak（列車）でDCに帰還。8/17（金）16:35発便で北京に8/18（土）18:25到着。北京に一泊して、8/19（日）17:10発、羽田21:30着。月曜日から仕事しましたよ。いや、出勤はしましたよ（つらかった）。 1.そもそもワシントンDCって言っても 「ワシントンDC　地図」でGoogle検索すると、この画像が表示されます。

よく、ワシントンDCには空港が3つあると言われ、今回利用した国際便で利用したのはダレス空港、国内便で利用したのはロナルドレーガン空港ですが、ダレス空港は、この画像の左端、切れかかっているところにありますし、ロナルドレーガンもDCとして囲まれている枠線よりは外にあります。有名なアーリントン墓地も外です。ですから、東京と言っても、成田も東京国際空港だし、ディズニーランドも東京ディズニーランドだし、みたいな捉え方が良いのかなと思います。 ちなみに、川を渡って西側がバージニア州で、実は今回ほとんどバージニア州で過ごしました。 2.政治の中心と言うよりは観光地では ワシントンDCというと、ニューヨークが経済の中心であるのに対して、政治の中心というイメージでしたが、霞が関、永田町のような雰囲気ではなく、やはり観光地なのでは、と思いました。 ベストスポットの一つと思われる連邦議事堂、入るときにガイドさんがちょっと警察官と交渉的なことをしていましたが、とは言え、このノリで入って行けてしまうのは、日本ではちょっと考えられないのではないでしょうか。

その他の建造物も美しさというか荘厳さが感じられ、見てて惚れ惚れしました。 DCの鉄道駅、ユニオン駅

ジョージワシントン大学

議事堂の美しさは格別だと思いました。

3.セグウェイ そして、その街を移動する手段として、セグウェイはベストではないかと思いました。 今回の初体験の中でもかなり興奮度の高い体験でした。 ワシントンDCで面白いのは、道路の真ん中が自転車等のレーンになっているということ。セグウェイもそこを堂々と走る形になります。 乗りこなしもすぐになれますし、何も疲れることなくそれなりのスピードも出ますし、今更ながらこれは面白い乗り物を発明したものだと感動してしまいました。 4.今後のIT集積地としての役割 AWSでもGCPでも、サービスを使用しようと思いリージョンを選択しようとすると、バージニア北部というリージョンがあることに気づきます。 それはどこかというと、まさに今回訪問した場所になります。 ダレス空港にほど近い、レストンという場所に、IT企業が集まってきています。 街はまだそんなに大きいとは言えませんが、きれいに整備されてきています。 恐らく高給取りの皆さんがこの中心部に住んで、車で10分ほど行ったところにあるデータセンターで働く、みたいな図式が想像されます。 5.ペンタゴン このエリアに行くのであれば見たいと思っていたものの一つがペンタゴンでした。 しかし、付近では写真撮影禁止、車で移動するとちょっと離れたところからは写真取れますが、五角形を感じられるわけではなく、建物もくすんだ色で、こんなにインスタ映えしないものか、と愕然としました。繰り返します。ペンタゴンはインスタ映えしない。

ところで、地下鉄駅としては、ペンタゴン駅とペンタゴンシティ駅があります。 ペンタゴン駅は駅のホーム内から撮影禁止。外に出ても、インスタ映えしないペンタゴンとバス停があるのみです。 それに対して、ペンタゴンシティ駅は、駅前に大きなショッピングモールがあり、その他、このエリアの商業の中心と思われる風情です。

この駅前のショッピングモール、入り口に中国語の看板があって驚きました。

実は中国資本なのかと思いきや、そういうわけでもなさそうです。しかし、このSimon Property Group（西盟地产集团）のやっているアウトレットモールでも、中国語が目立っていましたので、何かはあると思うのですが・・・ 6.買い物、食事 ワシントンDCだけというわけではなく、事情はニューヨークもそんなに変わりませんが、とにかくいわゆるお土産がない！ 今回なんとか勝ったのは、スミソニアン航空宇宙博物館で、宇宙食。 また、ホワイトハウス近くにはお土産屋さんがありましたが、日本人が好みそうな、特に会社バラマキに適したようなものはなく、買ったのは屈辱のワシントンDCチョコレート（単にそう書いてあるだけの普通のチョコレート）。 どうせなら、トランプ大統領チョコレートとかにしてくれれば、多少はウケも取れると思うのですが・・・ 食事で気になったのは、地球の歩き方に書いてあったクラブケーキ。 ちょっと高級店に入って、アメリカ式接客の圧をたっぷり浴びてしまいましたが、それも含めて楽しくおいしい店でした。

6.まとめ DCだけで1週間も観光する所ではないように思いますが（今回ほとんど行けなかった博物館系が好きな方は良いかもしれませんが）、セグウェイで半日で一回りして、翌日から気になったところを回っていく、なんていうのは良い観光の仕方かもしれません。

自転車についてはやはり書いておかざるを得ない。 1.日本 最近の日本の状況はどうなんでしょうか。 東京では一応順調に増えているように感じます。 個人的には渋谷区が入ったのが嬉しい。 あとは、中野区、豊島区も頑張れ！ ドコモ・バイクシェア https://www.d-bikeshare.com/

ソフトバンクとセブンイレブンが組んだHELLO CYCLINGは、アナウンスされてから大分時間がたっているように思いつつ、あまり見かけないような気がしますが、マップを見るとまあまあ展開されているのですね。今度乗ってみます。 https://www.hellocycling.jp/

メルカリのメルチャリも話題になったと思ったらその後音沙汰なく、部分的に始まりつつある、という感じでしょうか。 https://merchari.bike/ 個人的には、シェアサイクルに興味を持つきっかけとなり、わざわざ乗りに行った金沢のまちのりにも引き続き頑張ってほしいと思っています。

2.ニューヨーク 今回、ニューヨークでcitybykeに乗ってきました。 一つの特徴として、手続き的に借りやすいです。クレジットカードのみで手続きが完了します。 かなり広まっていると言ってよく、マップを見ても万遍なさが分かると思います。

日本も増えてきていますが、自転車用レーンが整備されているのも強いです。 最初に乗った自転車は無段変速というのでしょうか、よくあるタイプと同じで右手側のグリップを回すのですが、3段階とかではなく、回した分だけギアが変わるような動きが面白かったです。

（この写真では分からない・・・） ところが2台目以降は普通の3段変速で、自転車もバラバラなんだというのも新鮮でした。 ちなみに、私は身長181cmですが、1台たりともサドルを下げずに乗れた自転車はなかったというのはちょっと悔しかったです・・・

（栄光のプラザホテルの前にも山ほど・・・） また、他のレンタル業者もいっぱいいました。

3.ワシントンDC ワシントンDCでは乗りませんでしたが、一応ありました。感覚的には東京と同程度という感じでしょうか。

4. 北京 中国式は何と言っても乗り捨て式。現在は三国時代のようで、オレンジ、黄色、青の自転車が街中にあふれています。

自転車用レーンもかなり整備されています。 今回オレンジのモバイクは北京在住の友人に支払ってもらって乗り、黄色のofoには自分のお金で乗りました。ただ、これは準備不測のためにちょっと苦労しました。 ofoはクレジットカード決済ができるのですが、手続き完了のためにはSMS認証が必要です。しかし、今回通信専用SIMしか持っていかなかったので、SMSが受けられませんでした。事前に国内で認証通しておけばよかっただけなのですが、やっちまったなと諦めかけましたが、先ほどの友人が裏技的なサービスを押してくれました。WeChat上で色々なサービスが展開されているのですが、その中にSMSを代行で受けてくれるサービスがあるのです。おかげで手続き完了して、自転車を満喫できました。 5.自転車以外のシェア もう一つ書いておきたいのは、このような形でシェアされているのは自転車だけではないということです。 6月に行ったシンガポールでもありましたが、ワシントンDCでは、LimeBikeとBIRDの電動キックボードが目立ってました。 https://www.li.me/ https://www.bird.co/

この辺も知っていればアプリダウンロードしておく等準備ができたのですが、とっさに手続きができずに残念ながら乗ることはできませんでした。 しかし、6月に行ったシンガポールでもこれはありましたし、より手軽ということで広がる可能性はあるのではないかという気がします。 さらに、中国ではオートバイ的なものもシェアされていました。

mebikeなんていう、冗談で所みたいな名前ですが、意外と置いてありましたし、乗っている人もいました。これはコストに見合わないのでは、という気がしますが、そう考えると日本の自転車が電動自転車なのは、なかなかすごいですね。高くても仕方ないか。ただ、東京では、あまりに坂だらけなので、電動は必須だなと思います。 7.まとめ 中国ではこの業界は経営危機だという話も出ているようですが、ここまでのインフラを作り上げた経験は強いなと思います。少なくとも道路を変えてしまいましたから、もう少し収益の良いモデルもどんどん出てくるのではないかと思いますし、キックボードの次の乗り物も見てみたいです。 関連記事 シンガポール ダイジェスト3 2018年6月 スタートアップハブ 日経プラス10のシンガポール特集

書きたいことは山ほどたまっているのですが、次に進みたい気持ちも抑えられず・・・ 前回まで書いていたMonacaアプリwithWPは、形にすることができました。 諸事情により非公開アプリですが、一つ形をつかむと、それを基礎として発展させるアイデアが出てきますね。 それがきっかけでありがたいお話をいただいたりして、そういう意味でも作ってよかったなと思っています。 その後、アメリカ・中国に行ってきたので、その話もまとめておきたいのですが、全体をまとめようとすると膨大なボリュームになってしまうので、その話も挟みつつ、今やっていることも挟みつつ、小さくテーマ分けしていこうと思います。 今回は小さいネタで、Viber。 今どきは、国内だろうが海外だろうが、知人との通話なんていくらでも手段はあると思います。 一番多用しているのはFBのMessenger。LINEもたまに。 今回、アメリカに行くにあたり、FB以外の経路も用意しておこうということで、WhatsAppとViberをインストールすることにしました。 WhatsAppは知っていました。WhatsAppが世界一のユーザ数という話も聞いたことがありますが、現在もそうでしょうか？ それに対して、Viber、まったく知りませんでした。 楽天が買収してたのですね。最近は割とヘビー楽天ユーザですが、それでも気付いていませんでした。 今回、一度、Viberに助けられました（と言いつつ助けられ未遂ですが）。 ニューヨークで、現地夜景ツアーを頼んでいたのですが、時間になってもお迎えが現れません。 今回は通信専用SIMで行っていたので、電話もできません。 しかし、Viberは電話回線への電話もできるのですね。それは有償なのですが、GooglePayと連携してくれて、難しい手続きを経ずに利用することができました。 （ただ、未遂に終わったのは、連絡先の事務所が電話に出てくれなかったということで・・・けど、その後あれこれあって素晴らしい夜景を楽しめたというのはまた別の話） さらにそれよりも衝撃を受けたのが、電子マネー機能を持っているということです。 ちょっと、ここからは現在確認できる情報とは齟齬があるので、勘違いか、別の話と混じっていますが、大筋は下記のとおりです。 今回、中国でWeChatPayを使いたかったので、羽田空港でポケットチェンジで入金をしました。 これは、お金を別の通貨の電子マネーとして入金することができるというものです。 すなわち、日本円を投入して、変換したい通貨を指定して、どの電子マネーに入金するかを指定できるのです。 そこで、中国元を指定して、WeChatPayをしていしたのですが、WeChatPay以外にViberも指定できたのです。 （現在下記情報を見ると、ViberはUSDとEURとなっていますが・・・ https://www.pocket-change.jp/ja/voucher-list/ ） で、要はViberは中国でも広く使われているのか、と思ったのです。 その後中国でViberが使われているような気配はなかったので、本当のところはどうか分かりません。 しかし、少なくともWhatsAppにはそんな機能はないと思いますので、実はMessengerアプリの今後の覇権争いは、まだまだこれからなのでは、と感じました。 （しかし、ネタを寝かしても忘れるばかりでよいことありませんね）

関連記事 MonacaアプリwithWP

さくらレンタルサーバの共有SSL（続き） さくらにテストサイトを立てて、データもコピーします。 あまり作りこんでいない段階でしたら、普通に、DB新規作成→WordPressをインストール→データエクスポート・インポートでやっても大した手間ではありません。 そして、共有SSLの設定は簡単です。 https://help.sakura.ad.jp/hc/ja/articles/206054862&amp;#8211;%E5%85%B1%E6%9C%89SSL-%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95 これにより、「the content must be served over HTTPS.」のエラーは解消します。 MonacaアプリがさくらサーバからJSON取得する場合のCORS対応 次は、予想通りではありますが、「No ‘Access-Control-Allow-Origin’ header is present on the requested resource.」エラーになります。 ※ちなみに、この辺のエラーは、Chromeデベロッパーツール（F12キー）で確認します。 個人的には、これの対応についての情報も分かりにくかったです。 これは、ブラウザ側の制約だ、ということで、それを回避するのは、クライアント側アプリだと考えました。 しかし、config.xmlには既にの記述があるので、これで回避できていないとおかしいのでは、とかなり悩みました。 結論としては、データを提供する側で回避用のヘッダを付けます。自分が提供するデータを勝手に取られるのはまずいが、データ提供側で許可しているならブラウザも安心して取得する、という感じでしょうか。 ですので、サーバアプリ側でヘッダを追加します。 PHP・WordPress記述なので、こんな感じです。（$wpdb->get_results　が好き） $rows = $wpdb->get_results($sql); if ($rows) { $json_data = json_encode($rows); } header(‘Access-Control-Allow-Origin: *’); header( ‘Content-Type: application/json; charset=utf-8’ ); echo $json_data; これにより、CORS制約も回避されました。 Monaca（Vue）でのJSON取得処理 これで、データが取得されましたので、あとは画面で使うように加工します。 ここも、まあまあ苦労しましたが、 var data = []; ・・・ axios.get(‘[https://xxx’)][1] .then(function (response) { for(var i = 0; i < response.

＜環境の復習＞ サーバサイドの開発をAWS Cloud9で行います。 なるべく無料範囲で、ということで、EC2を使用せず、GCP上のGCEに接続します。 ですので、サーバ側開発環境はGCEに立っています。 クライアント側開発は、クロスプラットフォーム開発を行うためにMonacaを使用しています。 ですので、開発中は、MonacaからGCEに接続して、JSONを取得しよう、と考えています。 本番環境は、さくらレンタルサーバにサーバアプリを構築し、Monacaでビルドしたモバイルアプリから接続します。 ここまで、GCE上でWordPressを動作させており、Monacaでデザインの概要を作成しました。 次は、MonacaからJSON取得をしようとしています。 Let’s Encrypt さて、MonacaからGCEに接続してJSONを取得しようとしたところ、 The page at ‘https://ide.monaca.mobi/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://xxx/’. This request has been blocked; the content must be served over HTTPS. というエラーになりました。 これは、ここまでの調査の中で予期されたエラーなので、では、SSL証明書を導入しましょう、ということになります。 こちら https://nozomi-hiragi.com/gcd_wp_ssl_support/

を参考に、Let’s Encryptを入れようと思いました。 SSL証明書も無料の時代、すごいなと思います。 ところが。やはり、ところが。 ConfigurationError: Requested name xxx.xxx.xxx.xxx is an IP address. The Let’s Encrypt certificate authority will not issue certificates for a bare IP address.