WordPress ACF ProのInstagramとYouTube表示が異常に重い

WordPress ACF Proプラグインでカスタムフィールドを作成して、InstagramとYouTubeコンテンツをフィールドタイプ「oEmbed」を使って、10件ほど登録したところ、表示までに8秒ほど時間がかかり、異常に遅くなった。

やったこと

フィールドタイプ「Wysiwyg」に置き換えてから、URLを貼り付けて登録したところ、劇的に改善した。表示速度が0.18秒になった(元々のKUSANAGIの速さに戻った)。

原因はわからず

WordPressのoEmbed機能自体は全く問題なく、ACF ProのoEmbedフィールドタイプが問題と思われるが、バグ情報などが見つからず、原因わからず。もしかしたらACFではない可能性もあるが、ひとまずACF ProのoEmbedは利用しないでおく。(非常に便利だったので改善されたらまた使いたい)

ACF Proの柔軟コンテンツ

プライベートでWordPressのプラグイン ACF Pro を購入して柔軟コンテンツを利用したため、そのメモ。

柔軟コンテンツの超わかりやすい図解はこちら。
[WordPress] Advanced Custom Fieldsの拡張パッケージ、Flexible Content Fieldの使い方

柔軟コンテンツの登録例

柔軟コンテンツの中に柔軟コンテンツを入れる、っていう入れ子の構造も可能。
ACF Proの繰り返しフィールドの中に繰り返しフィールドを入れる、っていう入れ子と同じ仕組みが使える。

柔軟コンテンツの入力例

「行を追加」ボタンで柔軟コンテンツを呼び出せる。
以下の画像はすでに呼び出した後だが、右下にそのボタンを押したときにパターン選択できる模様も表示しておいた。

ACF ProはPersonal(1サイトのみ利用)で日本円で2,000円ぐらいだった。
がんばって開発するぐらいなら、これ買ったほうが確実に楽できる。安いし。
Developer(サイト無限に利用)はいつでもアップグレードできるらしいので、まずはPersonalからスタート。

WP Mail SMTPでOAuth認証するときに401エラーが出る場合

WordPressのWP Mail SMTPやRubyとかでOAuth認証を実装するときに、「Client ID」と「Client Secret」を作成するアプリケーション側に記述することになるが、OAuth認証を実行しようとすると、Google側には遷移するものの、「401. That’s an error.」と表示される。
これは、「Client ID」や「Client Secret」がちゃんと入力されていない可能性がある。Google Cloud Platform側でそれらの値をコピーしてから、ペーストすると、なぜか文頭と文末に空白(スペース)が入ってしまう。このスペースが入っていると動作しないため、前後にスペースが入ってしまっていないか要注意。(HanamiのOAuth認証実装時と、WordPressのOAuth認証実装時と、2回もこれでハマってしまった。)

この画面でコピーすると、すでに空白も一緒にコピーされている

OAuth認証を実行すると401エラー

参考サイト

Google Analyticsで自分のトラフィックが検出されない

Google Analyticsで新規のWebサイトを追加する設定をしてから、テストトラフィック送信(Webサイトにアクセスする)と、リアルタイムのトラフィックを確認したが、どうしても自分のトラフィックが検出できない。設定は1から全て確認したがどうみてもあっている。ブラウザもChromeとFirefoxの両方で確認を取ってみたが、やはりトラフィックが検出できない。
携帯からアクセスしたらトラフィックが検出できたため、ブラウザ側の問題と思い、色々調べていた、Google Analyticsでアクセスを除外するためのアドオンをインストールしていたのを忘れていた。(2回もこれでハマった。うっかり忘れてしまう。)

ChromeやFirefoxにインストールすることができる。新しくWebサイトをリリースしてトラフィックがあまりないときにノイズを載せたくない時などに活用できる。だけど、使い終わったら機能はオフ(機能を無効化)にしておいたほうがハマらずに済む。

Google アナリティクス オプトアウト アドオン

Google アナリティクス オプトアウト アドオンは、Google アナリティクス JavaScript(ga.js、analytics.js、dc.js)によるデータの使用をウェブサイトのユーザーが無効にできるように開発された機能です。

この機能を利用するには、このアドオンをダウンロードして、ご利用のブラウザにインストールしてください。Google アナリティクス オプトアウト アドオンは、Chrome、Internet Explorer 11、Safari、Firefox、Opera でご利用いただけます。

256hax.inを閉鎖してtanebox.comに移行します

10年近く運営していた 256hax.in ドメインやサーバを閉鎖して、 tanebox.com に移行することにしました。2018年6月末で閉鎖となります。

256hax.inでは、自分が作りたいと思ったWebサイト グルーポン系ポータル(旧名称:グルーポン系サイト一覧)やマーケティング用テストサイト、開発や機能検証用などに使っていました。更新せずに放置していたサイトが大半だっため、この機会にサイトを全部停止しました。
さくらインターネットのレンタルサーバー(スタンダードプラン)を利用していましたが、月額525円と格安で勉強や趣味、仕事にと、色々遊ばせてもらって、本当に助かりました。
さくらVPSが月額972円で1Gメモリのサーバーが使えることと、KUSANAGI・WordPressが標準でインストールできて、価格も安くてスペックも十分なため、乗り換えました。

サイトの引っ越しは BloggerからWordPress(KUSANAGI仮想マシン)に引っ越し を参照ください。

CyberduckでSFTP接続するとExhausted available authentication methods.

Exhausted available authentication methods. Please contact your web hosting service provider for assistance. Please contact your web hosting service

MacのCyberduckでSFTP接続すると上記のエラーが表示された。
コンソールからSSH接続すると正常にログインができる。

原因

2つ原因があった。
1. 調べるとログイン失敗多数によりアカウントロックや.sshフォルダや公開鍵の権限が誤りなどの情報があったが、自分の場合はキーチェーンに誤ったパスフレーズを登録してしまっていて、それが原因で接続できない(厳密にはパスフレーズが誤り)だった。「# cat /var/log/secure」に情報が載ってこなかったのでおかしいなとは思った。
2. キーチェーンに同一URLに対して、複数のアカウントのパスワードをキーチェーンに登録していたため、異なるアカウントが先に認証が走ってしまっていた。

対応

キーチェーンに登録したパスフレーズを削除(自分の場合は、xx.xx.xx.xxというサーバIPに対して、Aアカウント、Bアカウントと2つキーチェーンに登録していたため、それら2つを削除)して再接続したら直った。
キーチェーンは、Macの ユーティリティ > キーチェーンアクセス.app で該当するURLやIPアドレスを選択して削除すればOK。
GitHubのSSH接続の時も誤ったパスフレーズ登録&複数アカウント登録していて、それに気づかずにハマった。SSHのパスフレーズやアカウントパスワードがどうやっても正しい場合は、キーチェーンを削除(同一URLが複数あった場合は全て削除)してみると改善するかもしれない。

BloggerからWordPress(KUSANAGI仮想マシン)に引っ越し

KUSANAGI仮想マシンで作るWordPressが物凄い速いというのをちょくちょく見かけたため、構築して見たら、静的ページかと思うほど速かった。このまま使えそうだったため、いくつか持っているWebページを移行することにしました。まずはBloggerからお引っ越し。

Bloggerを使用している上での悩み

  • レイアウトいじったり、記事を綺麗に見やすくするのが大変
  • プログラムのコードを綺麗に見せるためのjsがうまく実装できない
  • Markdownが使えない(StackEdit経由で使えるようにはなりましたが・・・)

WordPressの進化

数年前に案件とか趣味で、WordPressを使いまくっていた時期もありましたが、とにかく重い、遅い、セキュリティホールを狙われる、ということで敬遠していました。
最近のWordPressはどうなんだろう、とのことで調べてみたら、なにやら相当進化していた。プラグインでAdvanced Custom FieldsとかCPT UIみたいな超便利なものが出てきていて、色々と組み合わせればWebサービスをわりと簡単に実現できそうなことがわかりました。(知識不足で、WordPressでWebサービスが作れるとは思っていなくて、CakePHP、Laravel、Rails、Hanamiとかのフレームワークでしか作れないと誤解していました)

さらに、昨今のトレンドを取り入れたのか、フロントエンドとREST APIによる構築ができるように(?)、WordPressのコアにREST APIが実装されるようになったようです。

HTTP REST API で WordPress を自由自在!

「WordPress はアプリケーションフレームワークへと生まれ変わろうとしています。」とありますように、たしかに変わろうとしているのだと感じました。

超高速WordPress仮想マシン「KUSANAGI」とは

超高速WordPress仮想マシン「KUSANAGI」はあなたのWordPressサーバを通常の約10倍の速さにブーストさせます。

とありますが、さくらVPSにKUSANAGI仮想マシンが選択できたため、試しにインストール&セットアップしてみたら、異常なほど簡単で、たしかに速かったです。静的ページを表示しているみたいです。当ブログがさくらVPS+KUSANAGIになっているため、色々なページをクリックして速さを実感してみてください。

KUSANAGI for さくらのVPS

インストールは上記にもあるマニュアルの通りに進めたら完了します。

さくらインターネットのVPSに申し込むことで利用可能になります。2週間は無料なので、まずはお試しで利用してみるとよいと思います。(もしやめたい場合は2週間以内にキャンセルを実行すればOKです。そのまま継続利用したい場合は、クレカ支払いでそのまま放置すれば自動的に本申し込みになります。)

さくらのVPS

KUSANAGIセットアップのメモ

256hax.blogpost.com → blog.tanebox.com という引っ越しのために以下のようなことをしました。

  1. DNS設定(お名前.comでドメイン取っていて、お名前.com側だけに設定する場合。時間かかる場合があるから先に設定を済ませておく)
    Aレコード→さくらVPSのIP登録、CNAME→サブドメイン登録
    https://qiita.com/megane42/items/df84f87c0bdcdd015eb6

  2. KUSANAGIセットアップ、WordPressインストール
    http://www.sakura-vps.net/kusanagi-for-sakura-vps-wordpress-setting/

  3. httpアクセスをhttpsにリダイレクトする設定
    # kusanagi ssl –https redirect 【プロファイル名】

  4. セキュリティ設定(WordPressのダッシュボード上で表示される警告は以下を対応すると消える)
    https://kusanagi.tokyo/document/security/

  5. Basic認証設定
    KUSANAGIのマニュアル通りでうまくいかなかったので以下を実施。
    “allow 0.0.0.0/0;”をコメントアウト
    https://ex-cloud.jp/support/question/q-841

  6. プラグインインストール時の注意
    プラグインをインストールしたり削除すると、「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」のメッセージが表示される。セキュリティ対策の関係らしい。下記を入力すればOK。
     ホスト名:localhost
     ユーザー名:kusanagi
     パスワード:[インストール時に設定したユーザー「kusanagi」のパスワード]
    https://kusanagi.tokyo/faq/

BloggerからWordPress移行に使うプラグイン

手抜きですみませんが、3つのプラグインを使ったため、プラグインのスクリーンショットを貼っておきます。

  1. Bloggerのデータをエクスポートしたら、Blogger Importer Extendedプラグインでインポート。これでBloggerのデータがWordPressに移行完了します。
    https://web-memo.fragmentnews.com/blogger-wordpress-279.html
  2. 次に、このままだとWordPressに入った記事のカテゴリーが全部、未分類になっているため、Batch Catプラグインを使って記事を然るべきカテゴリーに手動でちまちま紐づけていきます。100記事ぐらいでしたが、これ結構大変でした。
  3. 最後にBlogger To WordPressプラグインで、Blogger→WordPressにリダイレクトするHTMLを出力して、Bloggerに反映します。Blogger To WordPressプラグインは旧→新に来た人向けにURLリダイレクトをするため、停止せず、ずっと有効化のままにしておきます。(リダイレクト用のHTML置いたら終わりかと思って、うっかり停止したらリダイレクトしないままになっていました)
    http://lahatnggusto.com/net/blogger/blogger-to-wordpress

最後に

以上で一通りの対応が完了です。あとは、Google Analytics、Google Search Consoleの設定追加、各Webページからのリンク変更、Google Search Consoleでのサイト引っ越し手続き(ただしBloggerは301リダイレクト設定できないためこれは完了できませんでした)などでしょうか。
引っ越しが完了した後も、新旧サイトのWeb解析はチェックして異常がないか確認されるとよいかと思います。

参考(表示速度)

同じ構成ではないため、あまり参考にならないかもしれませんが、各サービス別のWordPressほぼデフォのフロント画面表示速度の平均は以下になりました。(Google Chromeの検証ツールのNetworkより速度を図りました。FirefoxのNetworkの表示速度と若干異なっていたため、あくまで目安までに。)

  • さくらVPS(メモリ1G, SSD)+KUSANAGI+WordPress2つ稼働 → 600msec(当ブログです)
  • AWSインスタンス1つ(メモリ1G)+WordPress1つ稼働(一部チューニング) → 800msec
  • AWSインスタンス1つ(おそらくメモリ512M)+WordPress1つ稼働 → 3sec
  • さくらレンタルサーバ(スタンダード, HDD)+WordPress+(その他いろんなサービス稼働中) → 5sec

ArduinoクローンのCH340G搭載シリアルには気をつける

毎回トラップに引っかかってしまうのでメモ。
IoT作成で安いからと、UNOクローンの廉価版を買ってしまうことがあるが、その中でも、どうしてもうまくいかないものが、CH340Gというシリアル通信(USBケーブルさしてデータ書き込みとかする)するためのアダプタが載った基盤。いろんな人の手順書を見ると、中国のメーカーサイトでCH340Gドライバーをダウンロードして終わり、というような形で書いてあるものの、やはり認識しない。MacOS SierraとHigh Sierraで試した。前に試した時はUSB接続するとクラッシュする現象が起きて、恐くてもう触ってない。

結論

廉価のCH340Gが載ったものは買わないことに決めた。
一方で、サインスマートの基盤は安いわりにちゃんと動くし、しっかりしてる。CH340G使ってないし。
サインスマート UNO R3 ATmega328P

CH340Gが載った基盤例(おすすめできないもの)

CH340Gのドライバー

だいたい、以下の2つが書かれている。どちらをインストールしても認識しなかった。

Written with StackEdit.

GitHub+SourceTreeで複数アカウント設定

会社用リポジトリとプラベート用リポジトリで、複数アカウントをGitHub連携できなかったため、そのメモ。

仕組み

  • GItHubのURLごと(ドメイン+サブドメインの組み合わせごと)にパスワードがCredentialsという名前でキーチェーンに保存される
  • キーチェーンは アプリケーション > ユーティリティ > キーチェーン > (ログインメニュー選択)GitHub Credentials で存在を確認できる
  • しかし、GitHubはドメインのスラッシュ以下にアカウント名が含まれているため、Credentialsが複数アカウントごとに作成されない。例えば以下2つのリポジトリは1つしかCredentialsが作成できない。

対応方法

OAuthのアカウント連携をした上で、リポジトリURL「github.com」の前に「アカウント名@」を含めてSourceTreeに設定する。

  • 256haxがGitHubアカウント名だった場合 → https://256hax@github.com/256hax/tanebox.git
  • tarou-yamadaがGitHubアカウント名だった場合 → https://tarou-yamada@github.com/hanami/hanami.git

    もしすでにキーチェーンを作成している場合

    キーチェーンにある該当の「GitHub Credentials」を削除して、上記の「対応方法」を再度設定する必要がある。一度作成されてしまっているとうまくアカウントが分けられない。

    よくある症状

    アカウントがうまく分けられていないと、プッシュした時に「Pushing to [リポジトリ名]」のままで永遠に終わらない ← これはアカウント認証が通らないことが原因。2つアカウントがあったとして、どちらか一方のリポジトリのプッシュは成功するが、もう一方は成功しない(Pushing toが終わらない)という症状がでる

    参考サイト

    GitHubの複数アカウントを使い分けるならSSHよりhttpsの方がいいんじゃね?という話

    Written with StackEdit.

    MacでYarn+Vue.js+Webpack

    YarnのインストールからVue.jsの表示までのメモ

    インストール手順

    今後はnpmの代わりにYarnで管理していけるため、npm経由ではなく、Yarnをインストールする。もしエラー出たら、npmでYarnをインストールも可能。

    $ brew install yarn
    

    フォルダを適当に作って移動する。

    $ mkdir sample
    $ cd sample
    

    Yarnでpackge.json作る。いろいろ聞かれるが、これはEnter連打でOK。

    $ yarn init
    

    Vue.jsをYarn経由でインストールする。Vue.jsをコマンドラインでいろいろ実行する必要があるため、最初にvue-cliをインストールする。(インストールしていないと、vue-cliをインストールしろとエラーメッセージで教えてくれるため、インストールし忘れても後で気づくことができる。)

    $ yarn add vue-cli
    $ yarn vue init webpack my-project
    

    Vue.jsプロジェクト用にフォルダ作って移動する。

    $ mkdir my-project
    $ cd my-project
    

    Yarnを起動して、コンパイルが終わったらURL「http://localhost:8080」にアクセスする。

    $ yarn start
    

    参考URL

    Written with StackEdit.