プロバイダから支給されているメールアドレスはほとんど使っていないのですが、OCNから【再度のご案内】【重要】と、えげつないメールが来ていたので目を通してみると、本当に重要な内容でした。 ＯＣＮではセキュリティ強化のため、 […]
IT実践
OCNのPOP・SMTPメール設定をBecky!にする方法
SMTP
ICT実践記事
- 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に最新のデータをバックア […]
- Windows10でFAXを送信
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製品向けのサービスだと思うのですがファクステスト用専用番号も便利に使わさせていただきました。
- オンライン学習を早期実現しなければコロナ世代の学力低下は不可避
新型コロナウイルスで休校中の学生を持つ親として学力の低下を懸念。 オンライン学習の早期実現に向けて、素案やZoomに代わるオンラインミーティングツールを独自の視点で考えます。
- XMLサイトマップをGoogle Search Consoleに準拠
インデックス登録されましたが、サイトマップに送信していません 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を比較するとマッチしていましたので、これで解決です。
- 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>
- フレッツ光を使っている人はウイルス対策ソフトを買う前に確認
スタートアップツールを導入しないでセキュリティソフトだけをインストールするNTT関係者からの情報。ウイルス対策ソフトを購入するまえにフレッツ光の無料ライセンスを確認しないともったいない。
- WordPressの新エディタGutenbergは待ち望んでいたUI
WordPress 5.0から採用された新エディタGutenbergですが、WP 5.2を導入して本格的に触ってみました。 ネット上の意見は賛否両論のようです。 （否定派が圧倒的に目につきますが、声を上げるのは決まって反対派が多数ですので…。） 追記：Classic Editorプラグインのダウンロード数（5,000,000以上）と評価を見る限り、以前のエディタの人気が伺えます。 NetCommonsのようなUI NetCommonsというCMSをご存知でしょうか。 今から10年以上前になるのですが、各学校で簡単にWebサイトを管理できるように、NetCommonsを使ったシステム提案を教育委員会に行った覚えがあります。（スルーされたと思っていたら翌年には似たようなシステムが導入されていましたが…） WordPressは「文章を書く」のに対して、NetCommonsは「ブロックを配置」するのに特化していたため、HTML知識が無い方でもコンテンツの書き換えや追加時に、それなりの見た目が維持できるという利点がありました。 複数の学校の先生がそれぞれの担当枠を書き換えたり、毎年担当者が変わるることを考えると、WordPressでは書く人によって、見た目に大きな差が出てしまうのです。 ページ更新・追加・削除のたびに数千円～数万円をWeb制作会社に支払って更新依頼するという形態は、現在は稀なケースだと思います。 WordPress等のCMSが主流になり、クライアント自身が好きなタイミングでコンテンツの更新を行うように移り変わりました。 ですが、制作時にどんなに頑張ってCSSを用意しておいても、更新する人が適切なHTMLタグやショートコードを使わなければ、素っ気ないページに仕上がってしまいます。 素っ気なさすぎるからと、ホームページビルダーで作ってHTMLを貼り付けたり、WordやExcelから貼り付けたり、スペースで文字を揃えたりと、なんだか悲惨なページになってしまったりもします。 更新者のスキルに左右されにくいブロックエディタ ブロックエディタの強みは、見栄えの良いページが直感的に作れるので、HTML・CSSを何も知らない人が更新やページの追加をしていっても、あまり酷い結果にはなりにくいという部分です。 私は制作時に、クライアントのWeb担当者スキルに合わせて管理 […]
- WP-PageNaviで2ページ目以降が404エラー【解決】
最近すっかりWordPressから離れていたんですが、良くも悪くも情報量が豊富ですね。 WordPressは10年以上前（WordPress MEの頃）からいじってますが、どんどん複雑化してきて最近はhome.phpやらfront-page.phpやらindex.phpやらと、テンプレート構造を理解するのさえ大変です。 時間があったので何年か前に構築したサイトを手直ししていたところ、トップページのページネーションが効かなくなってしまいました。 100個近いカスタムフィールド・300超えのカテゴリ・function長すぎなコンテンツで、どのタイミングで表示されなくなったのか不明なまま、ネット上の情報を頼りにあれこれ試して半日が過ぎ、ようやく解決しました。 固定ページ用WP-PageNavi対策コード function.php function pagenavi_home($wp_query) { if (!is_admin() && $wp_query->is_main_query() && $wp_query->is_home()) { $wp_query->set(‘cat’, 5); $wp_query->set(‘post_type’, ‘iisys’); $wp_query->set(‘posts_per_page’, 12); } } add_action(‘pre_get_posts’, ‘pagenavi_home’); 3行目のcatはカテゴリーID5を指しています。不要であれば行ごと削除。 4行目のpost_typeはカスタム投稿タイプを指定。iisysは一例で、通常の投稿であればpostになります。 両方を指定したい場合には配列にします。 $wp_query->set(‘post_type’, array(‘post’, ‘iisys’)); 5行目のposts_per_pageは表示件数。記事数よりも多い数にするとページネーションは表示されません。 上記を書いたうえで、該当テンプレート（私の場合はindex.php）のquery_posts等を消してください。 以下は私の環境では効果ありませんでした。 管理画面の表示設定にある「1ページに表示する最大投稿数」を1件にする pa […]
- Google reCAPTCHA v3をコピペで簡単に導入
PukiWikiのコメントスパム対策にGoogle reCAPTCHA v3を導入してみようと思ったのですが、検索してもWordPress前提の記事ばかりでしたので、具体的なソースコードを公開しておきます。 プラグインをわざわざ導入しないでもPHPで書かれたシステムであれば流用できます。 WordPress上のContact Form 7に表示される「reCAPTCHA v3バッジを非表示にする方法」は下記の別記事をご覧ください。 https://www.ii-sys.jp/notes/1511 Google reCAPTCHAにサイトを登録する まずGoogle reCAPTCHAでドメインを追加してreCAPTCHAのキーを2種類（サイトキーとシークレットキー）取得しておきます。 送信フォームを修整する 【1】フォームを表示する部分にJavaScriptを追加 インプットフォームが設置してあるページに以下を加えます。 挿入する場所は<head>と</head>の間が一般的ですが、ページ表示速度を考えると</body>直前が良い等いろいろありますが、そのあたりは今回触れません。 私の場合は、<form>と</form>の間に挿入しました。 手書きのHTMLならまだしも、最近はほとんどのコンテンツがPHPによる出力になっていますので、ヘッダ出力部分に追記するだけですと他の全てのページにまで挿入されてしまい、表示速度に悪影響を与えてしまいます。ですのでヘッダ出力部分に「インプットフォームがある場合にのみ挿入」という振り分け処理を入れる必要があるのですが、将来的にインプットフォームの表示ページ名等に変更があった際に、ヘッダ部分の書き換えを覚えている自信もないので、<form>～</form>にまとめたという次第です。 <script src=”https://www.google.com/recaptcha/api.js?render=ここにサイトキーを入れる”></script> <script> grecaptcha.ready(function() { grecaptcha.execute(‘ここにサイトキーを入れる’, {action […]
- 緊急でリニューアルが必須なWebサイト
Webサイトが「スマホに対応していない」「SSLに対応していない」「Flashなどの古い技術を使用している」に該当していたら至急リニューアルを検討してください。
- WordPressをお名前.comのレンタルサーバーRSプランに引っ越しをする際の注意点
お名前.comのコントロールパネルからMySQLファイルをインポートしようとするとエラーが発生した際の解決方法。WordPressのファイル転送はFileZilla（SFTP）を使って問題なく完了。
- 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) […]
- 最近主流のPC用ディスプレイ解像度は？【過去10年間の推移】
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 […]
- Webの文字サイズはvwでシルバーファーストに
Webコンテンツをシルバーファーストで Web制作において「パソコンで表示する文字サイズはvwを使ってmax-widthは1920pxまで対応するべき」という話。 最近は年配の方でも自宅でネットを楽しんでいますが、小さい文字が読みにくいためブラウザを最大化にしている姿をよく見かけます。 残念なことに、有名どころを含めてほぼすべてのサイトで文字は大きくならずに、左右の空白が増えるのみ。 「Ctrlを押しながらマウスホイールで拡大」すれば大抵のブラウザでは拡大されますが、そんな技を使っている一般高齢者を見たことがありません。 パソコンのディスプレイサイズは昔と比べて大きくなりましたが、それと共にディスプレイの高精細化も進んできたため、「目が悪くなってきたから大きなディスプレイを買うかのう」は期待を裏切られる結果となってしまいます。 一般的にWeb制作の現場では、幅1920px以上で見る人向けに作ってしまうと、小さいディスプレイ（解像度の低い）を使っている人や、ブラウザを最大化しないで使用している人には表示がはみでてしまうため、幅1000～1200pxで見た時に最適になるように制作されています。 少し前まではタブレットやスマホはこれよりも画素数が少ないものが多かったため、レスポンシブデザインという表示サイズによって可変のデザインが主流になりました。 しかし可変とは言っても通常はモバイル対応がメインです。画素数の大きい端末での全画面表示は基本的にあまり考慮されず、大きすぎる端末から見た場合にデザインが崩れるのを嫌がり、上述のように幅1000～1200pxを超えた場合は、それ以上には広がらずに左右の余白だけが広がるというのが現状です。 高齢化時代のWebスタンダートに max-width は最低でも1920px、4Kが主流になることを考えると4000px程度までは欲しいです。 メニューやヘッダ・フッタ等以外のコンテンツ部分のフォントサイズは、vwで指定。 これでサイトを作ってみたところ閲覧が非常に楽でした。 椅子にふんぞり返ったままでも、ブラウザを最大化すれば楽に文字が読めます。 あいにく当サイトはまだ着手できていませんので下記サイトをご覧ください。 ブラウザを最大化もしくは幅を広げると、デザインが崩れない範囲で文字も大きくなります。 現在主流のディスプレイ解像度を考慮して […]
- 偽サイトに嵌って防衛手段を検証する
公開しているメールアドレスは、最近トレンドなフィッシングメールをピックアップで紹介したように、フィッシングメールが毎日山ほど届きます。せっかくなので訪問してみました。 フィッシングサイトに嵌ってみました 最近のブラウザはデフォルト設定で注意喚起してくれます。 Chromeの場合 Firefoxの場合 Firefoxのほうがキッパリと言い切っていてかっこいいですね。 どのブラウザも、うっかり誤クリックで進んでしまわないように「無視して進む」というボタンが無いインターフェイスになってますが、頑張って先に進んでみました。 仮想PC・ブラウザをプライベートモード・LAN切り離し・IPアドレス変更等を行ったうえでの検証です。アクセスするだけで様々な情報を抜かれる恐れがありますので、安易に先に進むようなことはしないようにしてください。 APPLEっぽいサイトが表示されました。 一見APPLE公式のように見えますが、中央の入力フォーム以外はリンクすらされていない張りぼてです。 ですが疑いの目を持って見ない限り、偽サイトだということに気づかないと思います。 フィッシングサイトの見抜き方 騙されないためにはアドレスバーに表示されているURLをよく見てください。まずこの習慣をつけましょう。 見るのは最初に現れるスラッシュ「/」よりも左側です。それよりも後（右側）は一切気にしないで大丈夫です。 http://cert-protection-account-appleid-apple.com ブラウザによっては cert-protection-account-appleid-apple.com とhttp://（またはhttps://）が省略されて表示されます。 以下のような場合にはさらに注意が必要です。 apple.example.com/rmd_nid_vcss… google.example.com/rmd_nid_vcss… ドメイン名「example.com」の前にドット「.」が入っている場合、それより左側はドメインの保有者が自由に好きな文字を設定できるサブドメインと呼ばれます。 一番最初に知っている名前が入っているからといって絶対に信用してはいけません。 itunes.apple.com これはitunesがサブドメインですが、その右側を見るとドメイン名がapple. […]