ベースシステム
- Nginx
- MySQL
- WordPress
主な制作項目
- サーバー設置・SSL証明書設定
- CMS設置設定
- コンテンツ制作
- 管理画面のUIカスタマイズ
- 予約システム組み込み
- クレジットカード決済組み込み
- 簡易SEO
【Zoom代替ツール無料で公開中】オープンソースのJitsiは学校でも会社でも使える
FreeBSDのディスク容量を拡張する(ConoHa VPS)
WP-PageNaviで2ページ目以降が404エラー【解決】
ついき来たのか!?Windows 10 バージョン1803安定版。
Google Ad Grantsで支払情報を求められてしまう
OCNのPOP・SMTPメール設定をBecky!にする方法
PukiWikiをWordPressに移行する方法に困って半手動で実施
Web開発や効率が良いブログ記事執筆の環境構築の参考に
PukiWiki 1.5.2対応XMLサイトマッププラグイン
最近主流のPC用ディスプレイ解像度は?【過去10年間の推移】
PukiWikiのURLをNginxで正規化【index.php非表示】
ConoHa VPSリニューアル後のプランに移行する方法
Webコンテンツの適正画像サイズをディスプレイ解像度の利用者統計データを元に検証します。 ホームページに載せる適正画像サイズをデータで検証という記事から11年も経ってしまいましたので2018年版を載せました。 (StatCounterによる統計データを元にしています。) 2018年版が確定したのでデータおよびグラフを修正しました。 2019年版も(確定版ではありませんが)掲載しました。 Webコンテンツに使用する画像サイズ結論 掲載データが多くなってしまいましたので、結論を先に書いておきます。 パソコンのモニター幅いっぱいの可変サイズの画像(ヘッダ等)を想定するのであれば、(w)2,000ピクセルは必要。これくらいあれば(w)2,560ピクセルで表示したとしても耐えられるクオリティ。10年前に比べると回線環境は良くなったとはいえ、画像サイズが大きくなれば読み込みに時間がかかり、またスマホユーザーに無駄なデータ通信量を消費させてしまう。 記事に添える画像は300~800ピクセル程度のサムネイルを表示して、高解像度が必要であれば元画像にリンクを張る。 レスポンシブデザインの場合、表示サイズと同等にリサイズされた画像が表示される工夫が必要。(CSSにwidthを書いても元画像が同じであればデータ量は変わらず、w320のスマホユーザーにw2,000の画像を送り付けるという事態に。) jQueryで端末サイズに応じて読み込む画像を振り分けるのが今のところ良さげ。 下記のようなメディアクエリーを書いても読み込む画像が増えるだけで逆効果。 <img class=”w1920″ src=”../img_1920.png” /> <img class=”w480″ src=”../img_480.png” /> .w1920 { display: block !important; } .w480 { display: none !important; } @media only screen and (max-width: 480px) { .w1920 { display: none !important; } .w480 { display: block !important; } } 2018年ディスプレイ解像度利用者率Best10(世界) 1366 […]
送信者を偽装できる脆弱性 Mailsploit Mailsploitの脆弱性が発表されてから半年余り過ぎますが、なぜか日本ではあまり話題にすらなっていません。 バックドアを仕掛けられる等、直接ファイルを改竄されるわけではないからなのでしょうか。 しかし悪用しようとする人からすれば、本人だという証明付きで権威ある人になりすましてメールを送れるというのは、最高のソーシャルハッキングツールです。 私宛にトランプ大統領からメールが来たところで(仮に本人だったとしても)日本語以外のメールは普段やりとりをしていないので、迷惑メールと決めつけて開封すらしないでしょう。 差出人がソフトバンクの孫正義さんであったとしても、 「ついに自分も認められたか」などと思い上がるほど若くはありません。 怖いのはもっと身近な人を詐称したメール。 取引のある会社の担当者から本人証明されたメールが届けば、疑うよりも先に開いてしまいます。 URLが記載されていれば、ソースをじっくり見ることもせずにクリックしてしまうかもしれません。 緊急なのでこちらに電話を!と電話番号が記載されていれば、電話してしまうでしょう。 振り込め詐欺なんかと組み合わされると、比較的ITリテラシーが高い人でも騙されてしまう危険性があります。 Mailsploitの影響を受けるメールソフトが非常に多く、ThunderbirdやApple Mail.app・Outlook 2016などを使っている人も多いのではないでしょうか。 一部メーカーからは既に対策パッチも出ていますが、対策しないと宣言をしているメーカーもあります。 該当するアプリを使っている方は情報収集が必要そうです。 影響を受けるメールクライアント Apple Mail.app MACOS IOS Mozilla Thunderbird / SeaMonkey MACOS WINDOWS Mail for Windows 10 WINDOWS Microsoft Outlook 2016 MACOS WINDOWS Yahoo! Mail IOS Yahoo! Mail ANDROID [A bug bounty program that does not allow disclosure yet] ANDROID [A bug bounty program that do […]
PL-US56KというUSB接続のアナログモデムを以前使っていましたが、何年か前にWindowsのバージョンアップをした頃から使えなくなっていました。 ここ数年はFAXの必要性が無く、届くものといえばDMばかりでしたので放置していましたが、どうしてもFAXを送る必要に迫られFAX再稼働しました。 PL-US56KはPLANEX製のかなり古いものですが、Windows10のドライバが入手できます。 PLANEXのルーターは、不安定であったり初期不良が多かったりと散々苦労した思いがあり、今回も問題の切り分けに悩みましたが、今回は機器の問題では無さそうでした。(余談ですが家庭用ルーターならNECを、業務用ならYAMAHAをお薦めしています。エンジニアいればCiscoも有りですが。) 今回、パソコン・PL-US56K(USBに接続できるアナログモデム)・電話回線等の物理的な接続は完了しているという前提です。 ちなみに私の環境では、以下のようになっています。 【パソコン】 ┃ ┃USB ┃ 【アナログモデム(PL-US56K )】 ┃ ┃モジュラーケーブル ┃ 【VoIP】 ┃ PLANEXのサイトからドライバのダウンロードをしてインストールします。 デバイスマネージャーを開き、モデムに「PL-US56K USB Modem」が追加されているのを確認し、それを右クリックでプロパティを開きます。 「モデム」タブのダイヤルの管理、『発信音を待ってからダイヤルする』のチェックを外します。 上記の手順で送信できるようになりましたが、目的の宛先にはエラーとなったため、同じく「モデム」タブにある『ポートの最高速度』を9600まで下げたらエラーは無くなりました。 FAXソフトはWindows標準のものを使いました。スタートボタン隣にある検索に「FAX」と入れると「Windows FAXとスキャン」が出てきます。 テストとして自分の携帯電話にダイヤルしてみると懐かしいアナログモデムの音を楽しめます。(1200ボー程だった記憶が…) また、本来はEPSON製品向けのサービスだと思うのですがファクステスト用専用番号も便利に使わさせていただきました。
インデックス登録されましたが、サイトマップに送信していません Google Search Consoleのカバレッジで緑色の有効(インデックスに登録されている)になっているものの、「インデックス登録されましたが、サイトマップに送信していません」という詳細情報が気になりました。 クリックしてみると「例」としてURL一覧が表示されます。 そのURLをさらにクリックすると、UTF-8でエンコードされたURLが表示されます。 送信しているXMLサイトマップもUTF-8でエンコードをしていますし、URLの正規化も済んでいるのになぜ? じっくりと見比べてみると、XMLサイトマップのURLはスラッシュが「%2F」にパーセントエンコーディングされているのに対して、Googleでは「/」のままです。 サイトマップを出力しているphpソースを見てみると、PATH_INFOをrawurlencodeでエンコードしています。 rawurlencodeはRFC3986にもとづいて「-_.~」とアルファベット以外をすべてエンコードするようですので妥当なはずです。 Google独自仕様?と思ったのですが、RFC3986の3.4章に「スラッシュ (“/”) と疑問符 (“?”) の文字はパーセントエンコーディングする事を避けるほうがユーザビリティのためにはよい。」という記述がありました。 スラッシュはパーセントエンコードしないように修正 GoogleもRFCもスラッシュはパーセントエンコードしないと提唱しているのであれば、これに合わせるべきだと思い以下のように修正しました。 $r_page = rawurlencode($page); $r_page = str_replace(‘%2F’, ‘/’, $r_page); 修正後、XMLサイトマップの出力とGoogle Search ConsoleのURLを比較するとマッチしていましたので、これで解決です。
小中学校でZoomを使った遠隔授業を「安全」「簡単」に行うQRコードの作成方法と、実際に授業へ導くためのフォーマットの作成方法の紹介。
Web開発やブログ記事の執筆で安定して使えるソフトウェアと画面配置を具体的に説明。効率を追求するプロならではの環境・レイアウトを参考に、今以上に使い勝手の良い環境構築にお役立てください。
職業柄、古いパソコンのOSセットアップを多数行ってきましたが、問題となるのが機種特有のドライバ類。 Webからダウンロードできるメーカーもあれば、古い機種はさっさと見切りをつけてしまうメーカーなどさまざまで、古い機種になればなるほど入手は困難になります。 メーカーサポートも終了しているので基本的に自力での解決が必要になるのですが、東芝dynabookのサポートには感心させられました。 15年前のパソコンであっても電話サポートを受け付けていて、夜間しか問い合わせできない方に向けて、オンラインで予約をしておけば電話を掛けてきてくれるというものです。 さすが日本のメーカー! 東芝dynabookのサポートセンターに予約 日本のメーカー!日本の東芝!と夢を見すぎていたようで、親身になってどうにかしようという思いが感じられない残念なサポート内容でした。 具体的にはハードディスクトラブルでOSをクリーンインストールし、東芝のWebサイトにあったドライバ類を入れたのですが、一部のドライバと専用アプリが見当たりません。 専用アプリはテレビ視聴のもので、他のソフトウェアによる代替は不可能なものです。 事前に東芝のWebサイトで配布されているのを確認して安心していたのですが、いざ導入してみると、元となるバージョンが入っていなければインストールができないというアップグレード版。 他メーカーでもよくありますが、一部のドライバにおいては入手不可なものもあり、仕方なくその機能は使わないという選択肢もありますが、テレビパソコンにおいてテレビが機能しないのであれば、もはやゴミ同然…。 やむを得ず冒頭のサポートセンターに予約を入れて電話を待っていると、時間どおりに電話がかかってきました。 10年も前のパソコンであっても大切に使っているユーザを大切にしているんだな。と一瞬、東芝愛が生まれかかっていたのですが、現実はそうでもなく…。 サポ「該当の機種のドライバは配布していません」 私 「でも東芝Webサイトに型番検索で表示されますが」 サポ「・・・」「あ、本当ですね。失礼しました。」 私 「テレビ視聴アプリを入手する方法はありませんか?」 サポ「ありませんね」 私 「HDDが壊れて仕方なくOSをクリーンインストールしたのですが」 サポ「dynabookはOSのクリーンインストールに対応していま […]
無観客で開催されることになってしまった小学校の運動会。一所懸命な姿を家族に見てもらうために複数カメラを使ってライブ配信できないか、多くの制約の中で試行錯誤しています。
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 […]
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 = […]
WordPress用のテーマXeory Extensionでトップページ表示用のfront-page.phpが、同じid属性の値(id=”front-contents-1″とid=”front-service-1″をそれぞれ複数)を持つ要素を出力してしまっているのを修正する方法。
数か月くらい前に取得して製作途中だったサイトが、いつからかアクセスできなくなっていました。 アクセスできない問題の切り分け サーバーの確認 IPアドレスを指定したsshやsftpなどではサーバーへアクセスできました。 Webサーバー(Nginx)の確認 正常に動作していた時から設定を変更していませんが、念のため見直しました。問題なさそうです。 DNSの動作確認 $ host my.domain Host my.domain not found: 3(NXDOMAIN) DNSの設定に問題がありそうですが、少し前までは正常に引けていて、それ以降設定は変更していません。 $ ping my.domain PING my.domain.work(xxx.xxx.xxx.xxx): 56 data bytes 正引きできないのに、設定した覚えがないホストに向かっています。(xxx.xxx.xxx.xxxは心当たりがないIPアドレス) そもそもドメインの最後にworkがついているのは何故…。 resolv.confを書き換えてみたり、hostsに書き込んでみたり、別のDNSサーバーに設定を移してみたり、半日格闘しましたが解決せず。 レジストラ(Value Domain)に問い合わせ Value Domainの問い合わせフォームにチャットでの問い合わせがあったので、初めてクリックしてみました。 運が良かったのだと思いますが、待ち時間6秒! 非常に手際よくドメインの状態を調べてくれて、2分後には的確な回答をいただきました。 (06:55:30) *** MYNAME joined the chat *** (06:55:30) MYNAME: ドメインが参照できません(DNS) (06:55:34) ※自動メッセージ: お問い合わせありがとうございます。只今込み合っております。お急ぎの場合はフォームよりお問い合わせいただきますようお願い申しあげます。 (06:55:36) *** Chat Support joined the chat *** (06:55:39) Chat Support: お問合せありがとうございます。担当の 【***】 と申します。 どうぞ、よろしくお願いいたします。 (06:55:44) MYNAME: よろしくお願いいたします。 (06:55:4 […]
ページ内に複数の広告がある場合には、広告コードの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>
Windows XP関連のFAQを10年以上前にPukiWikiで公開していたのですが、最近は限られたアクセス数となっていたため、Webサイト全体を常時SSL化した際にバッサリと切り捨ててしまいました。 ですが、Google Search Consoleのクロールエラーが気になり、整備をした手順です。 プラグインで簡単にPukiWiki→WordPressにできないかと探しましたが、現行バージョンのWordPressで動作するものを見つけられませんでした。 コンテンツも100程度とそんなに多くなかったので、それぞれのページを手動で変換できればいいやと思い、PukiWiki記法をHTMLに変換してくれそうなツールを探したのですがこれも見つからず。 考えてみれば、PukiWikiの該当ページをプラウザで表示させてソースをコピーすれば良い訳なので普通は利用しないですよね。 ですが私の場合すでにPukiWiki環境が無く、そのためだけに環境を構築するのも非常に面倒でしたので…。 (WebサーバーをNginxに移行したのでさらに億劫になりました。Apache環境が手近にある方はPukiWikiを動かしたほうが早いかもしれません) PukiWiki記法をなんとかして別の表記に PukiWiki表記からMarkdown表記に変換してくれるサービスをなんとか見つけることができました。 非常に精度の良い素晴らしいツールで完璧に変換してくれます。 左側にPukiWiki記法のソースコードを貼りつければ、右側にMarkdown記法に変換されたものがリアルタイムで表示されます。 ここで一つ問題が発生。 Markdownには<dl> <dd> <dt>といったdlリストの記法が存在しません。 幸い上記の変換サービスでは行の先頭にdt ddと残してくれます。 これを使ってテキストエディタ(秀丸)で全置換を行いました。 検索:dt (.+)\ndd (.+)\n 置換:<dl><dt>\1</dt><dd>\2</dd></dl>\n ※正規表現です これでMarkdown記法+HTMLタグになりました。 MarkdownをHTMLに変換 MarkdownをHTMLに変換するサービス […]
全自動「3分」で実用的なバーチャルドメイン対応のメールサーバーを構築できるQMAIL2020を配布しています。cdb+tcpserver+qmail+SMTP AUTH+VPopMailと諸々のパッチ自動化 for FreeBSD
