WPプラグイン – 更新中にエラーが発生しました: ダウンロードに失敗しました。 Unauthorized

WordPressプラグインを更新したところ、以下のエラーが表示された。

CM Tooltip Glossary Pro+ の更新中にエラーが発生しました: ダウンロードに失敗しました。 Unauthorized

よく見ると、ダウンロードリンクが表示されていたため、アクセスしてみたところ、「Your download link has expired」と表示された。
おそらく、セッションかなにかの期限が切れたから、ダウンロードできない状態になってしまっているだけっぽい。

しょうがないため、対象のプラグインサイトにログインしてプラグインをダウンロード後に手動で更新(pluginsフォルダに直接ぶちこむ)して解決した。

参考サイト

【WordPress】DigiPress専用プラグインが更新できないときは手動で更新しよう!そして、もうひとつの方法とは!?

ElectronでSoundCloudプレイヤー開発

アプリ開発とはいえないぐらいショボいのですが、デスクトップPC/Mac向けアプリ開発で、Electronが流行っているため、少し試してみました。

SoundCloudを再生するアプリ

Firefoxなどのブラウザで音楽を再生できるSoundCloudというサービスがありまして、UIが優れていて操作しやすく、音楽もストリーミングでいろんなものが聞けるので、昔から使っていました。

ですが、ブラウザ上でいろんなタブを開いていると、メモリ消費が多くなりすぎるので、ブラウザを再起動することが多いのですが、そうするとSoundCloudも落ちてしまうので、別アプリとして起動したいと考えていました。

いくつかのMac用SoundCloudアプリを試しましたが、いずれも安定せず、曲が再生できなかったり、途中で止まったりと、使えるものがない状況でした。推測ですが、SoundCloud APIを使って、がんばって独自のUIでアプリ開発されたものと思いますが、逆にそれが安定しない理由なのではと考え、思い切って、「ただのPC版SoundCloudを表示して再生するだけのアプリ」を作りました。

SoundCloudのUIが、すでに音楽プレイヤー風になっていることや、ほとんどの画面が非同期遷移で作られていることから、アプリとしてPC版を表示するだけでも、アプリっぽい感じになりました。当然ですが、非常に安定しています。

アプリのイメージ

Dock(下のメニューバー)の「青い音符つき雲」アプリをクリックすると、起動します。

アイコンは、Webalysさん作成の雲アイコンを使わせていただきました。

アプリのソース

こちらに格納しました。

Simply Listen to SoundCloud – GitHub

Electronの仕様が把握できれば、すぐに作れます。ものすごい簡単でした。
いろいろと踏み込んで開発する場合は、HTML、CSS、JSの知識がメインで必要になってきまして、そこからElectronの仕様やAPIを調べて開発する感じになるかと思います。

このアプリは、Electron知識が0の状態から調べていき、環境準備、プログラミング(PC版読み込むだけなので、ほとんど何もしてませんが)、アイコン調整やリリースファイル(Macのappファイル)、GitHubアップなど、全て込みで3〜4時間程度で作りました。リリースファイルの作成にハマってしまい、これで1時間ぐらいは使いました。

参考サイト

以下の2サイトが非常にわかりやすいです。

用語集プラグイン CM Tooltip Glossary Pro+の設定

有名な用語集プラグインの無料版「CM Tooltip Glossary」だと、標準の投稿や固定ページには用語ハイライトに対応しているのですが、ACFで登録したカスタムフィールドには対応されていません。有料版の「CM Tooltip Glossary Pro+」を購入するとACFにも対応することができます。

用語ハイライトのイメージ

以下は、「昇華印刷」という用語と説明文を登録したため、該当キーワードにマウスを重ねると、説明が表示されます。

なお、キーワードの前後には空白のスペースを入れることで、用語ハイライトとして認識されるようになります。

実際の動作イメージはこちらを参照(「スペック」という箇所に用語ハイライトがあります) → MassdropでALTキーボード購入 – コトコト

ACFのカスタムフィールドへの対応

有料版の「CM Tooltip Glossary Pro+」を購入したあと、該当プラグインの「Settings」メニュー > 「General Settings」タブより、以下の設定を行います。

  • Highlight terms in ACF fields? → チェック入れる
  • Types of fields to highlight → チェック入れる

    ハマりポイント1

    「Types of fields to remove the WP functions:」は、チェックを入れると、改行が自動削除されます。意図しない挙動を防ぐため、チェックを外したほうがよいでしょう。

    ハマりポイント2

    ACFのカスタムフィールドに、のショートコードだけを入力しているような場合(たとえばInstagramだけ入力)、CM Tooltip Glossaryプラグインの上記設定と競合してうまく表示されませんでした。
    なんでもよいため、カスタムフィールドには冒頭に文字が入力されている必要があります。

カスタム投稿タイプへの対応

カスタム投稿タイプかつACFのカスタムフィールドを利用していますが、そのままの設定で動作しました。特に意識する必要はないようです。

関連キーワードを非表示にする

記事の下部に、以下のような形で「Related Terms:」という関連するキーワードが自動的に表示されてしまいます。

「Settings」メニュー > 「Glossary Terms」タブより、以下の設定で非表示にできます。

  • Show linked glossary terms list under post/page? → チェック外す

補足

記事の中身をいろいろと変えてしまうようなので、設定は一通り、ご覧になることをオススメします。

Angular CLIインストール後にngコマンドが見つからない場合

MacのターミナルでAnagular用にnpm経由でインストールしてから、

npm install -g @angular/cli

CLIのngコマンドを入力したところ、コマンドが見つからないと表示された。

mymac:test user$ ng
-bash: ng: command not found

aliasで一時的にPATHを通す

ngコマンドのPATHが通っていないだけなので、AngularのCLI(ngファイル)がインストールされた場所を確認してから、以下を実行で解決。

alias ng="/usr/local/Cellar/node/9.7.1_1/lib/node_modules/@angular/cli/bin/ng"

上記の「ng=”〜”」は、インストールした場所によって変わるため、適宜変更する。「npm install -g @angular/cli」を実行時にインストール場所がターミナルに表示されているはずなので、それを入力する。

ただし、あくまで一時的な反映なので、永続的に反映しておきたい場合(ターミナル起動した場合)は、.bash_profileに設定が必要。

.bash_profileにalias設定する

ターミナル起動時に読み込まれるbash設定を開く。

vi ~/.bash_profile

.bash_profileに以下を追記する。

alias ng="/usr/local/Cellar/node/9.7.1_1/lib/node_modules/@angular/cli/bin/ng"

ついでに、「ll」で「ls -la」としたかったため、ついでにllのエイリアスも追記した。

alias ll="ls -la"

追記が完了したらviでファイルを保存して抜ける。そのあとに、.bash_profileをすぐに反映するために、sourceコマンドを実行する。

source ~/.bash_profile

これでターミナル起動時に、ngコマンドの実行(ついでにllコマンドも)ができるようになった。

参考サイト

パワポで箇条書きの点とテキストの距離を縮める方法

PowerPointの水平ルーラーのつまみをいじって距離を詰めることもできるが、テーブル表なんかで、一括選択して全ての枠内に反映したい場合は、

  1. 行間のオプションを選択

  2. ぶら下げを選択して、「テキストの前」と「間隔」の大きさを両方とも数値を小さくする

これで箇条書きの点とテキストの距離が縮まります。

参考サイト

PowerPointでインデント・箇条書きの位置調整

WP Twenty Seventeenテーマの1カラム表示

先ほどWordPressのTwenty-Seventeenテーマがver1.6への更新通知がきていたので更新したところ、表示が2カラム形式に戻ってしまっていた。本来は1カラムで設定をしていた。

  • 外観 > カスタマイズ > テーマオプション(この時にプレビュー表示が固定ページじゃないとこのメニューが表示されない) > 1カラム に設定する
  • 外観 > カスタマイズ > ウィジェット > ブログサイドバー で全てのウィジェットを削除する

雑な感じだったけど、これでもとの1カラム表示に戻った。

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 でご利用いただけます。