先ほどWordPressのTwenty-Seventeenテーマがver1.6への更新通知がきていたので更新したところ、表示が２カラム形式に戻ってしまっていた。本来は１カラムで設定をしていた。
- 外観 > カスタマイズ > テーマオプション（この時にプレビュー表示が固定ページじゃないとこのメニューが表示されない） > 1カラム に設定する
- 外観 > カスタマイズ > ウィジェット > ブログサイドバー で全てのウィジェットを削除する
雑な感じだったけど、これでもとの1カラム表示に戻った。
Category: Web
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（１サイトのみ利用）で日本円で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サイトにアクセスする）と、リアルタイムのトラフィックを確認したが、どうしても自分のトラフィックが検出できない。設定は１から全て確認したがどうみてもあっている。ブラウザもChromeとFirefoxの両方で確認を取ってみたが、やはりトラフィックが検出できない。
携帯からアクセスしたらトラフィックが検出できたため、ブラウザ側の問題と思い、色々調べていた、Google Analyticsでアクセスを除外するためのアドオンをインストールしていたのを忘れていた。（2回もこれでハマった。うっかり忘れてしまう。）
ChromeやFirefoxにインストールすることができる。新しくWebサイトをリリースしてトラフィックがあまりないときにノイズを載せたくない時などに活用できる。だけど、使い終わったら機能はオフ（機能を無効化）にしておいたほうがハマらずに済む。
Google アナリティクス オプトアウト アドオンは、Google アナリティクス JavaScript（ga.js、analytics.js、dc.js）によるデータの使用をウェブサイトのユーザーが無効にできるように開発された機能です。
この機能を利用するには、このアドオンをダウンロードして、ご利用のブラウザにインストールしてください。Google アナリティクス オプトアウト アドオンは、Chrome、Internet Explorer 11、Safari、Firefox、Opera でご利用いただけます。
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アカウントと２つキーチェーンに登録していたため、それら２つを削除）して再接続したら直った。
キーチェーンは、Macの ユーティリティ > キーチェーンアクセス.app で該当するURLやIPアドレスを選択して削除すればOK。
GitHubのSSH接続の時も誤ったパスフレーズ登録＆複数アカウント登録していて、それに気づかずにハマった。SSHのパスフレーズやアカウントパスワードがどうやっても正しい場合は、キーチェーンを削除（同一URLが複数あった場合は全て削除）してみると改善するかもしれない。
GitHub+SourceTreeで複数アカウント設定
会社用リポジトリとプラベート用リポジトリで、複数アカウントをGitHub連携できなかったため、そのメモ。
仕組み
- GItHubのURLごと（ドメイン＋サブドメインの組み合わせごと）にパスワードがCredentialsという名前でキーチェーンに保存される
- キーチェーンは アプリケーション > ユーティリティ > キーチェーン > （ログインメニュー選択）GitHub Credentials で存在を確認できる
- しかし、GitHubはドメインのスラッシュ以下にアカウント名が含まれているため、Credentialsが複数アカウントごとに作成されない。例えば以下２つのリポジトリは１つしかCredentialsが作成できない。
対応方法
OAuthのアカウント連携をした上で、リポジトリURL「github.com」の前に「アカウント名@」を含めてSourceTreeに設定する。
もしすでにキーチェーンを作成している場合
キーチェーンにある該当の「GitHub Credentials」を削除して、上記の「対応方法」を再度設定する必要がある。一度作成されてしまっているとうまくアカウントが分けられない。
よくある症状
アカウントがうまく分けられていないと、プッシュした時に「Pushing to [リポジトリ名]」のままで永遠に終わらない ← これはアカウント認証が通らないことが原因。２つアカウントがあったとして、どちらか一方のリポジトリのプッシュは成功するが、もう一方は成功しない（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.
SQLite3のUNIQUE constraint failed
RubyフレームワークのHanamiでRepositoryの挙動をminitestでテストしてもユニークじゃないよと怒られた。migrationファイル見たら、カラムがユニークだったため（unique: true）、それを削除してbundle exec hanami db prepareしたが、やはりユニークじゃないと怒られた。
エラーメッセージ
TnoteNoteRepository#test_0001_associations are successful:
Hanami::Model::UniqueConstraintViolationError: SQLite3::ConstraintException: UNIQUE constraint failed: tnote_streams.tnote_note_id
↑「tnote_note_id」というカラムがユニーク設定になっているのに、値が重複したレコードを追加してるよ、的な意図のメッセージ
原因
minitest実行はtest環境で実行されるが、db prepareでdevelopment環境しかDB更新していなかったため。test環境もdb prepare（コマンド：HANAMI_ENV=test bundle exec hanami db prepare）することで解決。
Written with StackEdit.
ローカルのファイル群をSourceTree経由でGithHubに初めてコミットする
作成していたアプリはBitBucketと連携してprivateリポジトリで運用していたが、GitHubに公開することにしたため、その時の手順メモ。すでにローカルに作業中のファイルがあると、リモートリポジトリ（GitHub）からクローンできないため（空フォルダじゃないと怒られる）、ローカルのファイルをリモートリポジトリにアップする方法を記載。
（強引なやり方な気がするため、仕事で管理しているものは、社内の識者に確認された方がよいです。）
手順
ローカルで作業中のファイル群（プロジェクトフォルダ）があり、SourceTreeをすでに使っている想定で記載。
1. GitHubでアカウント登録する
2. GitHubで新規にリポジトリを作成する
3. SourceTreeで作成済みのリポジトリを削除する
その前に念のためプロジェクトのフォルダを丸ごとコピペしておく。失敗してもそれを元に戻せば直る。
4. ローカルにあるプロジェクトフォルダ内の.gitフォルダを丸ごと削除する
5. SourceTreeでローカルリポジトリを新規作成する（対象のプロジェクトフォルダのルートを指定する）
6. 右上の歯車アイコンからリモートを選択して、GitHubアカウントを追加する
7. プルしてローカルにマージする
これやらないでコミット・プッシュすると、GitHubにプッシュできなくてエラー1になったりするため、必ずプルしておくこと。
[ローカル] –> [ローカルのリポジトリ] –> [GitHubのリポジトリ1]
8. 普通にローカルからコミット・プッシュする
9. 以上で完了
参考サイト
- SourceTreeでローカルリポジトリからリモートへプッシュする設定
- SourceTree の使い方 ～ リポジトリの作成からコミットまで ～
- オマケ（Gitをシミュレーションしながらわかりやすく勉強できるすごいサイト）: LearnGitBranching
Written with StackEdit.