Programmers Office

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

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

WordPressサイトを引っ越したものの、なかなか苦労しましたという話の後編。 前編は サイト引っ越し、そして、再引っ越し（Part1） WordPressサイトの引っ越し方法 色々あると思いますが、毎回検討するのは、こちらのプラグイン。 All-in-One WP Migration – WordPress そして、毎回容量オーバーに引っかかっている気が・・・ あまり、検索で引っかからないのですが、その後の作業の中で、以下のような方法もあるのではないか、と思っています。試してませんが、これをまとめておくと次回に役立ちそうな気はしますね。 Jetpack、UpdraftPlus、あと忘れた・・・ phpmyadminのイメージ追加 今回は結局、力業で、DBもダンプ取ってリストア、ファイルは丸ごとwp-content/uploadsを持ってくる。 そのために、是非新サイトのDBもphpmyadminで参照したいということで、イメージを追加します。 これ自体は比較的すんなりいきました。下記を参考にさせていただきました。 https://qiita.com/furu8ma/items/50718efebee20fd24517 /home/wordpress/mariadb/docker-compose.yml に下記を追加します。 phpmyadmin: image: phpmyadmin/phpmyadmin environment: – PMA_ARBITRARY=1 – PMA_HOST=db-data – MYSQL_USER=●●● – MYSQL_PASSWORD=●●● – MYSQL_ROOT_PASSWORD=●●● links: – mariadb ports: – 8080:80 volumes: – /sessions networks: – common_link PMA_HOSTのdb-dataは、この直前で定義しているデータベースデータのコンテナ名です。 また、8080で公開されるので、ファイアウォールのルールで8080を解放する必要があります。 ファイルの移行 DB移行後、最初はそのままデータをINSERTしてしまったら、最初のページから旧サイトに飛ばされるという事態になり、文字列を変換してからINSERTするように修正。 次にファイルの移行ですが、こちらについては、まずファイル20MB制限があったので（何の話か忘れてしまいましたが）、分割してzipでアップしました。 そして、GCE初期状態ではzipが入っていなかったためインストール。 sudo apt install unzip なぜだか、ずいぶん画像リンク切れが多発していますが、とりあえずは良しとします。 サーバ停止 とりあえず良しとして、アナリティクスの設定をしていたら、数日後、サイトの検索が利いていないことに気づきました。 おかしいと思い、Dockerのダウン・アップをすると利くようになるので、はて？と思っていたら、しばらくするとまた同じ現象。そして、だんだん間隔が短くなっていき、最後は、SSHが接続できなくなってしまいました。 Webコンソールだからかなと、ここでgloudコマンドツールをインストールすることにします。 しかし、gloudコマンドツールは使えるようになっても、そのSSHはやはり使えません。 Google公式トラブルシューティングということで、 https://cloud.google.com/compute/docs/troubleshooting/troubleshooting-ssh?hl=ja を試していきます。 「インスタンスをシャットダウンせずに検査する」あたりは、今回の件とは関係なくためになる、GCEの色々な機能の勉強になる手順でしたが、結局デバッグインスタンスにも接続できません。

サイト引っ越しの目的 Lighthouseを知って調査してみると、そういえばこのご時世にHTTPS対応されていない。 また、体感としてページの読み込みが遅い。 サイト構成も、イマイチに感じられてきた。 ということで、引っ越しをすることにしました。 さくらのレンタルサーバは使っているので、それでも良いと思いましたが、新しいことにも挑戦しようということで、引っ越し先を検討したところ、こちらのサイトが面白かったので、これに従いました。 GCPの無料枠でdev.toなみの爆速WordPress環境を構築する 引っ越し手順でのトラブル色々 上記サイトの手順は、非常に良くできているので、基本的には、そのまま従えば大丈夫なのですが、私の環境の問題等で、若干はまったところがありました。 freenom 大した話ではないですが、最初登録した際にエラーになりました。 そういう場合は、Service > My Domainsから確認できる。 プロキシサーバーコンテナを起動（nginx-proxy） 今回の方法では、Docker-composeで、いくつかのDockerコンテナを起動して、それらを連携して動作させます。 大きな手順としては、Dockerインストール、Docker-composeインストール、Dockerネットワーク作成、プロキシサーバーコンテナを起動（nginx-proxy）、と進めていくのですが、最初のコンテナであるnginx-proxyの起動でエラーとなりました。 Creating nginx-proxy … error ・・・ ERROR: for nginx-proxy Cannot start service nginx-proxy: b’driver failed programming external connectivity on endp oint nginx-proxy (・・・): Error starting userland proxy: listen tcp 0.0.0.0:80: bind: address already in use’ という感じです。よく読めば、ポート80番がバッティングしているとわかります。 元々、勉強用に色々立ち上げていたGCE環境のため発生した問題で、綺麗な環境であればこれは発生しないと思われます。 これに対して、最初は、/home/wordpress/nginx-proxy/docker-compose.yml　を編集して、80:80　→　8088:8088　と変更しました。 これにより、起動するようにはなりました。ただ、その後結局他のエラーが発生し、そもそも新しいサイトを8088で公開するのもありえないので、 sudo service apache2 stop sudo update-rc.d -f apache2 remove

先日参加した Meet Magento 2018 得られたものを書きたいと思いつつ、多すぎてどうしようという状態。 とりあえず、書きなぐっていきますが、息切れの可能性しかなし。 The path to purchase with Google 最後はGPayの宣伝！と思いつつ、色々なサービスの紹介が面白かったです。 https://httparchive.org/ 資料を作る際の統計情報的な根拠として、使い勝手がよさそうですね。 revenue impact calculator 検索すると、https://www.thinkwithgoogle.com/feature/mobile/　に行けと言われるます。で、このサイトを調べようとすると、Domain not found！弱小すぎてダメみたい。 Lighthouse https://developers.google.com/web/tools/lighthouse/?hl=ja に情報がありますが、むしろ簡単なのは、F12デベロッパーツールのAudits。 さらに、セミナーと同日発表になっていますが、PageSpeed Insights　にLighthouseが組み込まれたとのこと。 で、このサイトを調べようとすると、Lighthouse was unable to reliably load the page you requested！ 弱小すぎるにも程がある。 Lighthouseをもう少し使ってみる さて、せっかくなので、F12→Autditsをもう少し使ってみます。 まず、Performanceから試してみると、画像が大きいよ、と言われます。最近、ページ上部にスライダー画像を付けましたが、早速悪影響があるということで、画像を調整しました。最近アナウンスされた、Googleの https://squoosh.app/ を使ってみました。既存のアップロード済み画像を一気に調整できたらうれしいです。 SEOについては、meta descriptionがないということだけだったので、さっと付けられるところだけ付けていきます。

Code4Startup 先に作ったFacebook連携用APIの呼び出し。 ここでログイン・ログアウトの機構を一気に作るので、ここをやっておかないとドライバー用アプリが進められなくなる。 が、とりあえず、一旦は一通りビデオを見てみることにする。 この先は、その他API呼び出しの部分なので、ある意味飛ばしても良いはず。 一つへーと思ったのは、API呼び出しで、httpだと怒られる訳ですが、info.plistで、App Transport Security Settingsの設定を追加することで接続できるようになる。 例えば、この辺の情報ですね。 https://qiita.com/uhooi/items/68939999c2c31e5f5557

Code4Startup Task17ではFacebookへの接続。 色々なものをインストールしますが、それによりこんなに簡単にできるのだ、ということが感じられます。 ただ、やればできそうなので、一旦ビデオだけ見てスルーしてます。 そして、Task18に入ると、Asynchronousの世界の講義が始まりました。そして、Closureの解説。 Appleのドキュメントも読みましょうと。 https://docs.swift.org/swift-book/LanguageGuide/Closures.html

Code4Startup Task 16終了。 最後は、デザインの統一等を行いますが。 UIApplication.shared.statusBarStyle = .lightContent は、Setter for ‘statusBarStyle’ was deprecated in iOS 9.0: Use -[UIViewController preferredStatusBarStyle] という警告が出ます。しかし、 UIApplication.shared.preferredStatusBarStyle = .lightContent はダメです。これはこのままにしておきます。 また、 UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAtrributeName: UIColor.white] はエラーとなり、コメント欄では、[NSAttributedStringKey.foregroundColor: UIColor.white] にしたら良いというコメントがあるのですが、正しくは、 [NSAttributedString.Key.foregroundColor: UIColor.white]でした。 また、色選択の支援Webサービスが紹介されています。 http://uicolor.xyz/#/hex-to-ui Code4Startup

Code4Startup さて、クレジットカード情報入力画面を作るにあたっては、cocoapodsなるものを導入するようです。 ターミナルで、sudo gem install cocoapodsを叩きます。 ビデオでは1 gem installedであっさり終わっていましたが、私の環境では結構な量のインストールログが流れて、28 gem installed。そもそも、ターミナルを立ち上げるのさえ初めてというまっさら環境ですから、そんな感じなのでしょうか。 次にpod initによって、Podfileというファイルができますが、それをVisual Studio Codeで開いて保存したらファイル名が「Pod file」になっていた。まあまあの驚き（何かの操作ミスかとは思いますが、そんなミスする？？）。 さらに、pod installすると、ビデオではすぐにStripeのインストールが始まっていますが、私の環境では、Analyzing dependenciesから始まって、結構な量の何かをインストールし始めて、ちょっと不安になりましたが、無事完了。 そして、これをインストールすることにより、Viewにクラスを指定するだけで、クレジットカード番号入力欄が勝手にでき上がるというのはセンス良い！ という訳で、この辺も飛ばさずにやっておくべきですね。 Code4Startup