Let’s Encryptから「証明書の期間があと20日で切れますよ」という英文メールが届きました。 cronで定期的にrenewをかけて自動更新しているのですが、何か設定がおかしいのかなと思い、複数のssl […]
IT実践
Let’s EncryptでSSL証明書の発行・更新・トラブル
SSL
IT実践
常時SSL化（https）後に旧サイトのアクセスが減らない
最近SSL化したサイトで旧サイト（http）へのアクセスが一向に減らないという現象が発生しました。 httpへのアクセスを301リダイレクトでhttpsへ遷移。 Google Search Consoleの […]
IT実践
常時SSL証明書の更新エラー対処法
上記のような画像がでてビックリされる方も多いと思います。当サイトでも数日の間、表示されてしまっていました。 パスワード、メッセージ、クレジットカード情報などを不正に取得しようとしている可能性があります。 してません […]
ICT実践記事
- 最近主流の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 […]
- 偽サイトに嵌って防衛手段を検証する
公開しているメールアドレスは、最近トレンドなフィッシングメールをピックアップで紹介したように、フィッシングメールが毎日山ほど届きます。せっかくなので訪問してみました。 フィッシングサイトに嵌ってみました 最近のブラウザはデフォルト設定で注意喚起してくれます。 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. […]
- WordPressテーマXeory Extensionで同名のid属性が出力されるのを修整する
WordPress用のテーマXeory Extensionでトップページ表示用のfront-page.phpが、同じid属性の値（id=”front-contents-1″とid=”front-service-1″をそれぞれ複数）を持つ要素を出力してしまっているのを修正する方法。
- WordPressでメディアをアップロードできない
「画像の後処理に失敗しました。このファイルが写真もしくは大きい画像であれば、2500ピクセルに縮小してから再度アップロードしてください。」というWordPress 5.3のエラーについて。
- 時代錯誤な自社サーバーをクラウド（VPS）にするメリット
いまだに回線もサーバーも自社運用しているWeb制作会社がクラウド（VPS）への移行を考えて現在の構成を見直してみる。ランニングコストもさることながらスキル習得に無駄な時間を注ぎ込んできた気がする。
- 補助金で将来のためにWebサイト整備を
新型コロナウイルス対策の補助金を上手に活用して、将来の収入へと結びつけるためにWebサイトの整備を。
- Photoshopなんていらない！フォトショップを見据えた無料ペイントソフト
習得したスキルがAdobe Photoshopでも生かせそうな無料ペイントツールを、実際に使った独自の感想です。【小学校のパソコン講座にも導入しました】
- GIGAスクール端末のiPadをiOS18にアップデート
GIGAスクール構想で32GBのiPadを導入した自治体が直面しているiOS18へのアップデート空き容量の確保問題について
- 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）をベースに以下のようなカスタマイズをしたのですが、要望があれば時間を見つけて記事 […]
- 【Zoom代替ツール無料で公開中】オープンソースのJitsiは学校でも会社でも使える
Zoomに代わるオンライン会議ツールを無料で公開しています。 登録不要でブラウザからもすぐに利用できますので検証としてご活用ください。
- 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製品向けのサービスだと思うのですがファクステスト用専用番号も便利に使わさせていただきました。
- 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担当者スキルに合わせて管理 […]
- WordPressのTheme（テーマ）選びは大切
紺屋の白袴とでもいいましょうか、いろいろと問題の多いOneToneというWordPressテーマを当コンテンツでは使用しています。 一般的なサイトでの使用はおすすめしません。 私がOneToneを選んだ主な理由 このテーマを使う以前は、ホームページ全面にFlashを多用したコンテンツとなっていて、早急な改善の必要性に迫られていた。 海外のWordPressテーマサイトで上位にランキングされていた。 OneToneのインパクトが強く一目惚れしてしまった。 SEOで検索結果上位を狙う気はあまりなかった。 コンテンツ移行に（サーバー移行も含めて）1時間程度しか掛けたくなかった。 また自社サイトでしかできない、お客様には提案できないような（爆弾を抱えた）テーマを試してみたかったという部分も大きいです。 悪い点 独自に作りこまれているためカスタマイズがしにくい。 プラグインも必要となり、ページ読み込み速度が遅い。 ランディングページ向きに設計されていて、WordPressのページという概念がほとんどない。 タグが微妙（h2タグがフッタータイトル等）でSEOに弱い。 英文フォント仕様なので、スタイルシートの変更が結構必要。 トップ動画等に一部不具合あり。 良い点 見た目のカッコよさ。 基本的に1カラムのレスポンシブなので、PCとスマホで同じイメージを提供できる。 jQuery盛りだくさんで、昔ホームページビルダーで「アニメーションgifで画像が動く」「音楽が流れる」というコンテンツを好んで作られていた方には受けが良いかもしれません。 時代に逆行している感は否めませんが、もうしばらくOneToneを少しずつカスタマイズして使ってみようと思います。 まずはフッター周りですね。 「関連サービス」 「リリース」 「障害情報」 で検索エンジンに働きかけても意味ないですし。
- 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 […]
- Apache 2.4でバーチャルホストを実際に運用する際の参考記事
Apache 2.4でバーチャルホスト設定をすると403 Forbinddedが表示される原因はディレクティブを見直してみましょう。実際に運用していくうえでディレクティブに毎回記述しないで良いための設定方法。