WordPressのContact Form 7に対応しているreCAPTCHAがv3になってから、バッジ（ロゴ）が邪魔な場所に表示されてしまうようになりました。 これはContact Form 7の問題ではなく、Goo […]
IT実践
【Google公認】reCAPTCHA v3のバッジ（ロゴ）をコピペで簡単に非表示
Contact Form 7
ICT実践記事
- シルバーハッカー世代がやってくる。時代はVGA。
Webコンテンツの制作をするにあたって、Internet Explorer／Google Chrome／Firefox／Safariといった主要ブラウザに加えて携帯電話での表示も乱れないようにと、クロスブラウザ対応に多くの時間を費やしてきました。 その後HTMLの文書構造が重要視されるようになり、テーブルタグを使ってページレイアウトをすることも減り、またフラットデザインというシンプルなデザインが好まれる風潮になり、クロスブラウザ対応もだいぶ楽になりました。 さらにスマホやタブレットが急速に普及したおかげでレスポンシブデザインが主流となり、構造化されたHTMLとメディアクエリを書いたCSSで多くのブラウザに対応できるようにもなりました。 さて前置きが長くなりましたが「今後何を基準にレイアウトを決めようか」と悩む出来事がありました。 下記をご覧ください。このサイトの記事です。 見る人の設定次第で表示は大きく異なる どちらも同じ記事です。 1枚目が私の見ている環境、2枚目が一般的な表示環境です。 このコンテンツは「WordPress」＋「海外のテーマ」を1時間程度の簡単なカスタマイズだけ施したものですが、パソコンから閲覧する際に、Windowsやブラウザのフォントサイズを巨大化させているのを忘れていました。 数年前から近眼なのか年のせいか、小さい文字が非常に疲れるんです。 高解像度ディスプレイは人間の目の限界超え 時々訪問先で「文字が小さくて」という話を耳にするのですが、拡大表示設定などをすると、文字がぼやけてしまいとてもお勧めできるものではありませんでした。 XGA（1024 x 768）がまだ出たてのころ、とある会社の社長デスクの設定を行った際に、VGA（640 x 480）にしたらとても喜んでもらったことがありました。内心（「もったいない…」）と思っていましたが。もう文字滲みまくり。 若い人は解像度が高い＝多くの情報が表示できるというのを好みましたので、設定で文字を大きくするような人はあまり見かけませんでした。 しかし最近はディスプレイの解像度が高くなりすぎて、そのままでは非常に小さい文字となってしまうため、OSやアプリによる拡大表示機能が充実してきています。 [DropWin src=”https://www.ii-sys.jp/tips/506″]4Kモニ […]
- WordPress管理画面のユーザー一覧をソート可能な任意の項目にする
WordPress管理画面のユーザー一覧から不要な項目を削除・オリジナル項目を追加し、並び替えができるように設定する方法をコピペ可能なソースで紹介。
- Windows 10 (1709)、KB4103727による死亡フラグからの生還
Windows 10 April 2018 Update (Windows 10 Version 1803)への大型アップデートが始まり、巷では不具合報告合戦が続いているようです。 私も参戦しようと思ったのですが、どうやら1803に辿り着く前のアップデートKB4103727にやられてしまったようで瀕死になりました。 スタートボタンが偶数回クリックしないと反応しない。 エクスプローラーにドライブ（Ｃ含む）が表示されない。 シャットダウンも再起動もできない。 ほぼ全てのアプリケーションが起動はするがすぐにフリーズする。 情報を調べようにもブラウザ（ChromeとFirefox）がすぐにフリーズ。 なぜかEdgeだけは機能しました。 普段使わないEdgeですが今回は役に立ちました。（ひょっとしてこれが狙い？） 更新プログラムを削除しようにも、フリーズして一覧表示されないので、思い切ってWindows 10 Version 1803へアップデートしてみることにしました。 最初のうちはサクサクと進むのに、途中から1％進むのに10分以上かかるという利用者の事を考えていなさすぎな仕様。 Microsoftに限ったことではありませんが、プログレスバーの表示は「全体の完了時間を予測してその割合」を表示するようにそろそろ改善してくれませんかね。 確か昔のWindowsインストーラは目安時間が表示されてましたが（40分とか表示されつつも平気で3時間とかかかってましたが）今の技術を使えばもっと正確な表示ができると思うのですが。 これが終わらなければ他に何もできない状況ですし、数字見ながらジーっと待ってると、もうね、詐欺にあった気分。 タバコ一箱無くなりましたがな。 ウサギと亀のウサギですか～っ！ 大きな企業が大勢の人を使ってＵＩがどうのこうのと改善しやすい部分に時間割いて突き詰めるよりも、まずここをお願いします。 話が脱線してしましたが、画面の表示変わりました。 「以前のバージョンのWindowsを復元しています」 ( ﾟρﾟ) まあ、、、システムファイルに不具合があったりすると正常にアップデートできないようなので無理もないですね。 暫く待つと、もとどおり瀕死のWindows 10 Version 1709が復元しました。 今度はセーフモードで起動してみました。 Windows 10はセ […]
- 【Google公認】reCAPTCHA v3のバッジ（ロゴ）をコピペで簡単に非表示
WordPressのContact Form 7に対応しているreCAPTCHAがv3になってから、バッジ（ロゴ）が邪魔な場所に表示されてしまうようになりました。 これはContact Form 7の問題ではなく、Googleが出力しています。 Googleにしてみれば謙虚に右下を選んだのかもしれませんが、右下は多くのサイトで「トップに戻る」アイコンが表示される大事な場所です。 （もっともGoogleがそれを知らないはずもないので、注目させたかったのでしょうか。） スタイルシートのposition: absolute; をJavaScriptで追加すれば好きな位置に移動できますが、親要素を変えられないのであまり実用的ではありません。 JavaScriptでgrecaptcha-badgeクラスをappendChildしてみたりしましたが、トークンの発行がうまくいかなくなったり不安定でしたので断念しました。 ネットで検索すると、海外でも多くの議論がされていました。 display: hidden; で非表示にしてしまうとスパム防止が効かなくなるそうです。 reCAPTCHA v3のバッジをGoogle公認の方法で非表示にする よく探せばGoogleのFAQにありました。 以下の表示をすればバッジを非表示にしても構わない This site is protected by reCAPTCHA and the Google <a href=”https://policies.google.com/privacy”>Privacy Policy</a> and <a href=”https://policies.google.com/terms”>Terms of Service</a> apply. コンタクトフォームを表示させるページごとに入れるのも面倒ですし、のちのち別のページにフォームを追加することになった時にはきっと忘れてしまっているので、コンタクトフォームの送信ボタン下に1行で書き込みました。 <p class=”recaptcha_policy”>This site is protected by reCAPTCHA and the Google<a href=”https://policie […]
- Windows 10 April 2018（1803）の不具合【前編】
Windows 10 April 2018 前後で多発している不具合 多くの不具合が同時に発生しているようで、私もここ1週間メインPCと格闘してきました。 Windows 10 バージョン1803（RS4） Google ChromeやCortanaなどを開いてしばらくすると、OSを巻き込んでフリーズしたり不具合が発生する問題。 これらを解消するために、早速KB4103721という更新プログラムが配信されましたが、これが最悪。 KB4103721 Intel SSD 600p / Pro 6000pシリーズを搭載している場合に、起動しなくなる問題。 Microsoftからの情報 東芝BG3シリーズを搭載したデバイスでバッテリー残量表示が正常に表示されない問題。 Microsoftからの情報 IObitなどの特定アプリを使用している環境で、再起動ができなるなる問題。 海外情報サイト 上記に該当していない場合でも多くの不具合報告。 スタートボタンなどが押せなり、再起動もできない Windows Update で履歴が表示されない（＝削除もできない） Windowsが起動しない Chromeの不具合が改善されていない Windows 10 バージョン1709（RS3）で安泰？ 不具合発生時は私もWindows 10 バージョン1709（RS3）を使っていました。 1709用の更新プログラムKB4134196のMicrosoft情報に以下の記載がありました。 「このビルドには、KB4103731のすべての機能強化が含まれています。」 これが原因かと思いましたが、KB4134196はそもそもMobile用の更新プログラムなので今回の件とは関係なさそうです。 なんとか安定稼働するまでの道のり 世間で1803（RS4）の不具合が騒がれ始めた2018年5月上旬当初、私はまだ1709（RS3）を使っていました。 Chromeを開いて作業している最中にスタートボタンが効かなかったり、新しいウィンドウが開かなかったりと、パソコンがフリーズ気味になる。 再起動・シャットダウンをしようとしてもいつまでもクルクルで止まるので、電源ボタンを長押しで強制終了して改めて電源投入。 再起動後は快適に動作するものの、しばらくするとまた同様の症状に。 危険を感じたので外付けHDDに最新のデータをバックア […]
- PukiWikiのURLをNginxで正規化【index.php非表示】
10年以上ぶりにPukiWikiをいじっているんですが、昔の情報は豊富にありますが最近の情報が乏しいですね。 PukiWikiの全盛期は、Nginxが誕生したばかりでしたので仕方ないのかもしれませんが。 PukiWikiのindex.php無しでURLを統一する URLの正規化としてまず、 http://example.com/ http://www.example.com/ https://www.example.com/ これらをhttps://example.comに301リダイレクトしました。 これについては各所に載っているようにserverディレクティブを追加して、return 301～といった感じです。（ここでは詳細は割愛します） これで完璧！と思いつつGoogle Search Consoleを眺めているとindex.php有りと無しが…。 pukiwiki.ini.phpの設定でindex.phpを表示しないという項目があります。 // Shorten $script: Cut its file name (default: not cut) //$script_directory_index = ‘index.php’; コメントアウトを外して試してみましたが、何かが違う。 確かに表示はされなくなりました。 index.php有りの膨大なURLがすでにGoogleにインデックスされているので、index.php有りで404エラーになると困るのですが、結果はindex.phpを入れたURLでもちゃんとページが表示されました。 しかしindex.phpが表示されたままの状態。ステータスコードは200。index.php有りと無しの両方のページが存在した状態です。 ということでNginxの設定を変更しました。 server { if ($request_uri ~* “^(.*/)index\.php(.*)$”) { return 301 $1$2; } } 上記のようにdefault serverディレクティブに書き加えて、 nginx -s reload で完了です。 PukiWikiネタってまだ需要あるんでしょうか。 今回PukiWiki 1.5.2（utf8）をベースに以下のようなカスタマイズをしたのですが、要望があれば時間を見つけて記事 […]
- Google AdSenseで広告が表示されたりされなかったり
ページ内に複数の広告がある場合には、広告コードの1行目にある<script>～</script>は1回で良いそうです。 ページ上に複数の広告コードがある場合、各広告ユニットに <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> を含める必要がありますか？ 非同期タグでしたので何も考えずに最後の方（</body>直前）に書いたのですが、どうやらそれが原因で広告が表示されたりされなかったりしていました。 プラグイン等の外部ファイルにAdSense表示部分が書かれている場合には、非同期での読み込みが間に合って表示されるようで、インラインで書かれている場合だけが不安定でした。 Nginx（Webサーバ）のFastCGI（キャッシュ）も影響していたようで、気が付くまでに時間がかかってしまいました。 <head>～</head>の間に記述して安定しました。 <head> ・ ・ ・ <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> </head> ・ ・ ・ <ins class=”adsbygoogle” data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” data-ad-slot=”XXXXXXXXXX”></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
- 常時SSL証明書の更新エラー対処法
上記のような画像がでてビックリされる方も多いと思います。当サイトでも数日の間、表示されてしまっていました。 パスワード、メッセージ、クレジットカード情報などを不正に取得しようとしている可能性があります。 してません…。 中にはそういったサイトもあると思いますが、SSL証明書を失効してしまっているサイトが大多数です。 常時SSLへの対応 Googleらが推し進めている常時SSL化がかなり浸透してきました。 常時SSL化とは、Webサイト全体をHTTPS化する（暗号化する）ことを言います。 以前は個人情報を送信するフォームを設置したページだけに使われるのが一般的でしたがここ数年で急速に常時SSL化が推し進められ、ブラウザによっては、SSL化されていないページは警告表示されるようにまでなってきました。 SSL化が進んだ背景についての詳細はこちらのサイトに詳しく書いてあります。 IISYSでは2017年よりLet’s Encryptを使った常時SSL試験運用をして参りましたが、証明書更新時にいくつかの問題に遭遇しましたので、レポートしておきます。 【現象】一部のドメインで自動更新が効かず、証明書の期限切れを起こしてしまう。 Webサーバーによるリダイレクト設定 well-knownディレクトリのパーミッション設定 WordPress等CMSを動かしている場合のHTTPステータスコードの問題 上記のような環境下でSSL証明書の更新がうまくいかずに期限切れを起こしてしまい、該当ドメインのサイトを開こうとするとブラウザ警告がでて表示されないという事象がネット上でも多く見受けられました。 該当ドメインの本来のルートディレクトリでは無く、認証専用のディレクトリを用意しておく方法で、多くの運用方法に対応することができます。 /usr/local/www/letsencrypt バーチャルドメイン運用の場合、上記のようなディレクトリを作成しておき、それをwebrootに指定します。 # certbot certonly –webroot -w /usr/local/www/letsencrypt -d DOMAINNAME 証明書が無事に発行されたら、Webサーバーの設定をしておきます。 Nginxの設定例 webroot.conf location ^~ /.well-know […]
- WordPressリダイレクトプラグインで日本語を扱えるように修正
WordPressに301リダイレクトを設定するSimple 301 Redirectsというプラグインを導入しました。 PukiWikiで運用していた旧コンテンツをWordPressに引き継いだ後に、Google Search Consoleのクロールエラー対策＆SEO対策です。 PukiWikiからのデータ移行については下記の記事をご覧ください。 https://www.ii-sys.jp/notes/716 WordPress用プラグイン Simple 301 Redirects 必須WordPress用プラグイン Simple 301 Redirects Download WordPress公式サイト Simple 301 Redirectsというプラグインですが、phpファイル1つだけで構成されていて、管理画面もURLを設定するだけという名前の通り非常にシンプルです。 Google Search Consoleでクロールエラーが出ているURLをコピーしてRequest欄に貼り付け、リダイレクト先のURLをDestination欄に貼り付けて「変更を保存」ボタンをクリック。 しかし挙動を確認するまでもなく、Request欄に貼り付けたはずのURLが一部消えてしまいます。 どうやらURLエンコードされている部分が消失してしまっているようです。 ソースコードを追いかけてみると、保存する前にWordPressの関数sanitize_text_fieldが呼ばれていました。 WordPress関数リファレンスを見ると、 オクテット（’%’ に続く 2 桁の 16 進数）を除去します。 と明記されています。 これは日本語を含むURLの場合は致命的で、それ以外にも「/」を「%2F」にエンコードするような仕様でも困ったことになります。 プラグイン「Simple 301 Redirects」のカスタマイズ セキュリティ的なリスクを承知の上で、wp-simple-301-redirects.phpの188行目と189行目にあるsanitize_text_field関数を削除しました。 wp-simple-301-redirects.php 変更前 for($i = 0; $i < sizeof($data[‘request’]); ++$i) { $request = […]
- PukiWiki 1.5.2対応XMLサイトマッププラグイン
平成も終わろうとしているこの時代に相変わらずPukiWikiをカスタマイズしています。 Google Search Consoleに登録するためにサイトマップを出力したかったのですが、過去に配布されていたプラグインはサイトが閉鎖されてしまっていて、インターネットアーカイブからもダウンロードすることができませんでした。 しばらく探したところ、上記のサイトマッププラグインとは別のものと思われますが、こちらのサイトで現在も配布されていました。 非常にシンプルながらも、プライオリティ設定もしたければできるというすばらしさ。 試しにそのままPukiWiki 1.5.2のプラグインディレクトリに入れてみたところエラーもなく動作しました。 ただどういうわけか私の環境ではトップページがリストに載りませんでしたので一部手を加えさせていただきました。 PukiWiki 1.5.2用サイトマップ出力プラグインのダウンロード 配布元サイトからダウンロードして下記の修正を加えるか、修正済みファイルをダウンロードしてください。 必須sitemap.inc.php（PukiWiki用サイトマップ出力プラグイン） Download 配布元 修正済み（当サイト） トップページ（FrontPage）をpriority1.0として出力する修正箇所（当サイトからダウンロードされた方は修正済みです） // <url> $urls = ”; // sio $front_page_date = gmdate(‘Y-m-d\TH:i:s’, get_filetime(‘FrontPage’) + ZONETIME) . ‘+00:00’; $urls .= ” <url>\n”; $urls .= ” <loc>$script</loc>\n”; $urls .= ” <lastmod>$front_page_date</lastmod>\n”; $urls .= ” <priority>1.0</priority>\n”; $urls .= ” </url>\n”; $count = PLUGIN_SITEMAP_MAXSHOW; foreach ($pages as $page=>$time) […]
- 光ネクストへ切り替わったのでルータ新調で下り320Mbps
NTTのフレッツ光プレミアムが2019年1月末で終わるという事で、トラブルの出尽くしたであろうギリギリで切り替え工事をしてもらいました。 「ハイスピード」と「ハイスピード隼」が選べましたが、工事に何倍も時間のかかる「ハイスピード隼」でお願いしました。（工事に来ていただいた業者様、忙しい時期にありがとうございました） タイトルの「下り速度320Mbps」ですが、実は古いルータ（NEC WR8700N）の有線接続で出た数字です。 あ、すみません。画像加工してMbpsをbps表記にしてあります。 オリジナルは↓これです。 WR8700Nのレビューはこちらが参考になります。 2010年の製品ですのでIEEE802.11n/11aしか対応していないのと2ストリーム（アンテナが2本）のためか、別の階でのWiFiは遅く、3台・4台と接続すると良く通信が切れたりしていました。 業務用はYAMAHA、家庭用はNECという信念を10年以上貫いてきましたが、家庭用ならバッファローもありかな…と。（NTTが切り替え工事の際に施策ルータとして提供しているのがBuffalo又はYAMAHAだったのがトドメ） お買い得品をネットで見つけて買ったのが「WSR-2533DHPL」です。 バッファローのルータは、WSR-2533DHP（L無し）とかWXR-2533DHPとか間違い探しみたいな型番号が多いので、気を付けてください。 IPoE（IPv6）には対応していませんが、4ストリームで1733Mbps（5GHz）＋800Mbps（2.4GHz）が魅力で実売価格7,000～8,000円。 9年前の機器とはさすが違いますね。 別の階で2台のパソコンを使っているのですが、どちらもUSBタイプの無線LAN子機を使っています。それも1,000円もしない11acには非対応で2.4GHz専用のもの。 それでも平均して下り速度100Mbps～200Mbps 出ています。 さらに非常に安定しています。 有線もすいている時には400Mbpsを超えます。 スマホやタブレットもWiFi回線が安定し、ブロスタやスリザリオがぬるぬる動くようになったと評判です。 屋根裏に潜ってLANケーブル引っ張ろうかと、釣り竿まで用意していたのが不要になりました。 無理なら屋外から引っ張ろうと、防水LANケーブルを「欲しいものリスト」に […]
- WordPressのTheme（テーマ）選びは大切
紺屋の白袴とでもいいましょうか、いろいろと問題の多いOneToneというWordPressテーマを当コンテンツでは使用しています。 一般的なサイトでの使用はおすすめしません。 私がOneToneを選んだ主な理由 このテーマを使う以前は、ホームページ全面にFlashを多用したコンテンツとなっていて、早急な改善の必要性に迫られていた。 海外のWordPressテーマサイトで上位にランキングされていた。 OneToneのインパクトが強く一目惚れしてしまった。 SEOで検索結果上位を狙う気はあまりなかった。 コンテンツ移行に（サーバー移行も含めて）1時間程度しか掛けたくなかった。 また自社サイトでしかできない、お客様には提案できないような（爆弾を抱えた）テーマを試してみたかったという部分も大きいです。 悪い点 独自に作りこまれているためカスタマイズがしにくい。 プラグインも必要となり、ページ読み込み速度が遅い。 ランディングページ向きに設計されていて、WordPressのページという概念がほとんどない。 タグが微妙（h2タグがフッタータイトル等）でSEOに弱い。 英文フォント仕様なので、スタイルシートの変更が結構必要。 トップ動画等に一部不具合あり。 良い点 見た目のカッコよさ。 基本的に1カラムのレスポンシブなので、PCとスマホで同じイメージを提供できる。 jQuery盛りだくさんで、昔ホームページビルダーで「アニメーションgifで画像が動く」「音楽が流れる」というコンテンツを好んで作られていた方には受けが良いかもしれません。 時代に逆行している感は否めませんが、もうしばらくOneToneを少しずつカスタマイズして使ってみようと思います。 まずはフッター周りですね。 「関連サービス」 「リリース」 「障害情報」 で検索エンジンに働きかけても意味ないですし。
- Let’s EncryptでSSL証明書の発行・更新・トラブル
Let’s Encryptから「証明書の期間があと20日で切れますよ」という英文メールが届きました。 cronで定期的にrenewをかけて自動更新しているのですが、何か設定がおかしいのかなと思い、複数のssl証明書を管理しているサーバにログインをしてみました。 原因が良くわからなかったので、該当ドメインを登録し直すために現在の更新情報ファイルを削除しました。 rm /usr/local/etc/letsencrypt/renewal/DOMAIN.conf 上記が正しいコマンドですが、深夜のせいか使い慣れないマウスのせいか、 rm /usr/local/etc/letsencrypt/renewal ん？ディレクトリだから消せないよと英文メッセージ。 confなのにディレクトリなのか。と深く考えもせずRオプション追加。 rm -R /usr/local/etc/letsencrypt/renewal （￣▽￣||| … Enter押して1秒後に気付きました。 renewalディレクトリごと消してしまった…。 全てのドメインのssl更新ファイルが消失しました。 Unix系のOSにはWindowsのようなゴミ箱はありません。 復旧ツールもあるみたいですが、稼働中サーバにいきなり入れてみるのも気が引けたので、潔くあきらめて手動で復旧させる事にしました。 私の環境では/usr/local/etc/letsencryptですが、/etc/letsencryptの場合も多いようですので、読み替えてください。 またcertbotコマンドはcertbot-autoになっているようですので、そのあたりも読み替えてください。 Let’s Encryptの登録をやり直す ドメインごとの情報ファイルを削除 以下を消します。 /usr/local/etc/letsencrypt/live/DOMAIN_DIR /usr/local/etc/letsencrypt/renewal/DOMAIN.conf /usr/local/etc/letsencrypt/archive/DOMAIN_DIR ここでも注意。 ※真似るな危険！ ↓↓↓ rm -r /usr/local/etc/letsencrypt/archive DOMAIN_DIR として、今度はarchiveディレクトリまで消 […]
- 無観客で行われる小学校の運動会を複数カメラでライブ配信したい
無観客で開催されることになってしまった小学校の運動会。一所懸命な姿を家族に見てもらうために複数カメラを使ってライブ配信できないか、多くの制約の中で試行錯誤しています。
- highlight.jsに「強調表示」を追加する拡張CSS
見やすいコード表示をするhighlight.jsをさらに便利にするための拡張スタイルシート。WordPressであまり使われることのないイタリック体アイコンボタンを押すだけで、任意の範囲を強調表示できるようになります。