Web開発やブログ記事の執筆で安定して使えるソフトウェアと画面配置を具体的に説明。効率を追求するプロならではの環境・レイアウトを参考に、今以上に使い勝手の良い環境構築にお役立てください。
Web開発環境
記事検索
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モニ […]
- ある日を境にWEBサイトへアクセスできなくなった
数か月くらい前に取得して製作途中だったサイトが、いつからかアクセスできなくなっていました。 アクセスできない問題の切り分け サーバーの確認 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 […]
- サーバーのバックアップで過去18年間に遭遇した問題点
サーバーを運用してきた18年間に遭遇したバックアップ・リストアの具体的な問題と改善策をまとめてあります。
- Windows 10 バージョン1903(19H1)はいい感じ
Windows 10 May 2019 Update(バージョン 1903、19H1)がリリースされて1ヶ月程が経ちました。 Windowsの大型アップデートでは毎回トラブルに見舞われるのですが、今回は個人的には良いOSだと思っています。 Windows 10 April 2018(1803)の時には不具合が多く、ディスクドライブを疑いSSDを買い替えてしまいました。 今回は、数台の予備パソコンで試してみて特に不具合が無かったので、先日メインマシンも手動で導入しました。 以下はあくまでも個人的な感想です。 Windows Updateが軽くなった印象です。 全体的な動作がOSインストール直後のパソコンといった感じでキビキビしています。 Windows 10 1903(19H1)へのアップデート方法 Windows 10 May 2019 Update(バージョン 1903、19H1)は、まだ自動配信はされていないようです。 2019年6月上旬からWindows Updateの手動確認で更新ができるようになりましたが、Microsoft Windows 10のダウンロードからもダウンロードできます。 Windows 10 1903は不具合も多数ある模様 以下、Impress Watchさんの情報です。 調査中の問題 ディスプレイの明るさを調整できない “Dolby Atmos”ヘッドフォンおよびホームシアターでオーディオが機能しない ユーザープロファイルディレクトリに表示されるフォルダーとドキュメントが重複する 緩和策のある問題 外付けUSBデバイスまたはメモリカードを接続してアップデートしようとするとエラーが発生する Bluetoothデバイスを検出もしくは接続できない 夜間モードが適用されない 「Intel Display Audio」がバッテリーを過剰に消費する 「カメラ」アプリが起動できない Wi-Fi接続が断続的に失われる AMD RAIDドライバーの非互換性問題 D3Dアプリケーションおよびゲームが回転ディスプレイで全画面モードに入らない 古いバージョンの「BattlEye」アンチチートソフトとの非互換性問題 Windows 10 1903の目玉「Sandbox」 目玉と言われているサンドボックスですが、以前Hyper-Vを試した際にホストの設定をあれこ […]
- 無料の「Adobe Photoshop CS2」を「Windows 10」で使う
CS2用ライセンス認証サーバの停止に伴って、Photoshop・Illustrator・Premiere等をシリアルナンバーと共に無料でダウンロードできるようになっていますが、Windows 10では「動作を停止しました」とエラーになってしまう事が多いようです。 ※あくまでも正規ライセンスを所持している方が対象です。 ネットで検索をすると、この対策として「言語設定」の「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れると良いという情報が多くヒットします。 しかし残念ながら、Windows 10 October 2018 Update (1809)以降ではこの手法は使えなくなってしまったようで、「デバイス」→「入力」→「キーボードの詳細設定」から「アプリウインドウごとに異なる入力方式を設定する」にチェックを入れてもPhotoshop等は起動しなくなってしまいました。 Windows 10 October 2018 (1809) 以降でAdobe CS2を起動する応急処置 以下の方法で2回に1回程度の確率で起動できます。 Photoshop等のアイコンを右クリックして「その他」→「タスクバーにピン留めをする」 タスクバーにできたアイコンをクリックする 「アプリウインドウごとに異なる入力方式を設定する」は関係なさそうなのでデフォルト(チェックなし)に戻しておく スタートにピン留めやデスクトップにショートカットを作って試してみましたが、なぜかタスクバーだけが起動確率が非常に高いです。 もっと確実な方法がありましたら教えてください。 2019年5月追記 Adobe CS2の公開ダウンロードは終了したようです。 https://www.ii-sys.jp/notes/1324 https://www.ii-sys.jp/notes/1900
- highlight.jsに「強調表示」を追加する拡張CSS
見やすいコード表示をするhighlight.jsをさらに便利にするための拡張スタイルシート。WordPressであまり使われることのないイタリック体アイコンボタンを押すだけで、任意の範囲を強調表示できるようになります。
- WordPressの引っ越し・ドメイン変更ツール「Search Replace DB」日本語版配布
WordPressの引っ越しやドメイン変更の際に「All-in-One WP Migration」よりも「Search Replace DB」を使った方が良い理由。Search Replace DB日本語版のダウンロードができます。
- 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を比較するとマッチしていましたので、これで解決です。
- WordPressでメディアをアップロードできない
「画像の後処理に失敗しました。このファイルが写真もしくは大きい画像であれば、2500ピクセルに縮小してから再度アップロードしてください。」というWordPress 5.3のエラーについて。
- OCNのPOP・SMTPメール設定をBecky!にする方法
プロバイダから支給されているメールアドレスはほとんど使っていないのですが、OCNから【再度のご案内】【重要】と、えげつないメールが来ていたので目を通してみると、本当に重要な内容でした。 OCNではセキュリティ強化のため、 2019年10月1日以降順次、OCNメールをメールソフトでご利用いただく際、推奨設定以外では送受信(POP/SMTP)できないように変更いたします。 最近では受信メールにPOPを使う人は少ないのかもしれませんが、私はPOP派で、50以上のメールアカウント全てをPOPで設定しています。 自サーバにおいては何年か前にサブミッションポートの運用に切り替えましたが、OCNのメール設定は放置したままでした。 メールクライアントは以下のような理由からBecky!をいまだに使っています。 動作が軽快 複数アカウントの管理がしやすい データのインポート・エクスポート・バックアップが簡単で確実 過去にパソコンを入れ替えるたびにデータを引き継いできたため、受信箱には1999年のメールもいまだに残っています。 POPでの受信に加えてBecky!を使っている人となると限られてくるため、OCNの公式サイトはもとよりネット上を調べてもなかなか情報を得られませんでした。 2019年10月以降もBecky! Internet MailでOCNのメールをPOP・SMTPで送受信するポイントをまとめておきます。 この記事の対象となる方 OCNのメールをPOP・SMTPで使用されている方 メールクライアントにBecky!を使用されている方 OCNのPOP・SMTPメール設定をBecky!にする方法 OCN公式サイトによりますと、POP・SMTPの設定は以下のようにする必要があるそうです。 受信メールサーバー(POP3) pop.ocn.ne.jp と入力 ポート番号 995 と入力 SSL 使用する ユーザー名 メールアドレスをすべて入力 送信メールサーバー(SMTP) smtp.ocn.ne.jp と入力 ポート番号 465 と入力 SSL 使用する 認証 使用する ユーザー名 メールアドレスをすべて入力 Becky!「メールボックスの設定」を表示します 複数のメールアカウントを設定している場合には、該当のプロファイルを選択します。 Becky!基本設定の変更箇所 POP3サーバー […]
- VMware Workstation Player 仮想マシンの複製【簡単3ステップ】
VMware Playerでテスト環境用に構築した仮想マシンを複製しておきたいと思いネットで調べたところ、なんだか少し面倒くさそうに書いてある記事が多かったのですが、3ステップの簡単操作で出来ましたのでメモしておきます。 VMware仮想マシンの複製【3ステップ】 【ステップ1】ワーキングディレクトリ(ゲストOSフォルダ)の複製 VMware Playerは終了しておきます。 ゲストOSがサスペンド状態であれば、その作業状態のまま複製されますが、ネットワーク等の初期化のために後で再起動する必要があります。なるべくゲストOSはパワーオフの状態にしておいたほうが良いです。 【ステップ2】.vmxファイルのdisplayNameを変更 コピーしたフォルダの中にある拡張子がvmxのファイルをテキストエディタで開きます。 この作業をしないでも問題ありませんが、同じ仮想マシン名が複数あると自分自身で区別がつかなくなりますので末尾に数字を足す等の変更をしておきます。 【ステップ3】VMware Playerで仮想マシンを開く 新しく作成したフォルダにある.vmxファイルを選択します。 VMware Workstation Player上での各種OS動作報告 ichmyさんの「VMwareで遊ぼうのこーなー」というコンテンツがおすすめです。
- 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 […]
- Windows 10 April 2018(1803)の不具合【後編】
Windows 10 April 2018(1803)の不具合【前編】から5時間ほど経ちました。 https://www.ii-sys.jp/notes/331 msconfigの「サービス」タブからMicrosoft以外のサービスを全て停止した状態ですが、Chromeで作業している限り何時間でも問題が発生しないで使えています。 しかし別のアプリを操作しようと、タスクバーをクリックすると反応しなくなる時があります。(長時間経過した時にはほぼ確実に) 電源管理でドライブの電源が切れないようにしてみたり、ページファイル(pagefile.sys)を削除してみたりしましたが症状変わらず。 また、アクティビティを止めたり、履歴を完全にクリアしたりもしましたが症状変わらず。 以下のコマンドでWindows Updateをクリアしてみましたが、こちらも変わらず。 net stop usosvc net stop dosvc net stop wuauserv net stop cryptSvc net stop bits net stop msiserver ren %systemroot%\SoftwareDistribution SoftwareDistribution.old ren %systemroot%\System32\catroot2 catroot2.old del “%ALLUSERSPROFILE%\Microsoft\Network\Downloader\qmgr.db” del “%ALLUSERSPROFILE%\Microsoft\Network\Downloader\qmgr.jfm” net start msiserver net start bits net start cryptSvc net start wuauserv net start dosvc net start usosvc 5月17日にWindows 10 バージョン1803(RS4)更新プログラムKB4100347が出ていました。 「この更新プログラムをインストールすると、Windows の問題が修正されます。」と一瞬期待したのですが、インテルのマイクロコード更新プログラムのようで、古いi7使いの私は対象外。 一応害は無さそうだったので単独でインストールしてみました。 M […]
- 補助金で将来のためにWebサイト整備を
新型コロナウイルス対策の補助金を上手に活用して、将来の収入へと結びつけるためにWebサイトの整備を。
- 常時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 […]

