Corredor

ウェブ、プログラミングの勉強メモ。

Excel で24時間以上の時間を表記する

Excel 最強の教科書[完全版]――すぐに使えて、一生役立つ「成果を生み出す」超エクセル仕事術

Excel 最強の教科書[完全版]――すぐに使えて、一生役立つ「成果を生み出す」超エクセル仕事術

久々に Excel ネタ。Windows Excel 2007 で確認したのでそれ以降の Excel なら大丈夫かと。


Excel の書式設定で hh:mm と設定すると、22:15 のように時分を入力できるようになるが、時には 26:39 のように、24時以上の時間を表現したい時もあるだろう。

そんな時は、「セルの書式設定」で [hh]:mm と、hh をブラケット [] で囲めば良い。

見た目は 26:39 のように入力できるようにはなるのだが、セルをアクティブにして数式を見てみると、1900-1-1 02:39:00 のようになっている。年月日部分は最近の日付にしたりできない (入れると時刻のシリアル値みたいなのがセルに表示されてしまう)。中身はちょっとおかしな日付になっているようなので、時間集計や計算には使えないかも。

iOS・MacOS をクラッシュさせる「chaiOS」は何をしていたのか

iOS 11 Programming Fundamentals With Swift: Swift, Xcode, and Cocoa Basics

iOS 11 Programming Fundamentals With Swift: Swift, Xcode, and Cocoa Basics

少し前に、iOS や MacOS をクラッシュさせる「chaiOS」というバグがニュースになっていた。

「chaiOS」バグは、何十万もの不必要な文字をメタデータに詰め込んだウェブサイトのURLをiMassageでテキストメッセージとして受信すると、iOSやmacOSが応答しなくなったり、クラッシュしたりするというもの。macOSの場合、SafariでこのURLにアクセスしようとした場合も読み込みが終わらなくなる不具合が出るとのこと。

どんな仕組みになっているのか、ソースコードはないかと探してみたら、以下の Reddit で紹介されていた。

そして以下が、問題を起こすソースコードを公開している GitHub リポジトリ。以下の URL は GitHub のファイル一覧を表示するページで、開いてもクラッシュはしないのでご安心を。

ココにある index.html が問題のコード。12MB 超のファイルで、分割して中身をテキストエディタで見てみたところ、title 要素に大量のテキストが入っていた。Unicode 特殊文字や Base64 文字列っぽいモノが大量に埋め込まれていた。

正直サッパリ内容が分からなかったのでこれ以上解析はしなかったが、ただの HTML テキストでもこんなことができるのかと驚愕。

Web ページ中の画像が読み込めなかった時に処理させる

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

Webデザイン良質見本帳  目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

Web ページ中の img 要素が画像を読み込めなかった場合、Error イベントが発火することを知った。

つまり、onerror 属性などで Error イベントを拾ってやれば、その img 要素を目立たせたりとか、要素ごと削除したりとか、好きな処理ができるというワケだ。開発中に画像がちゃんと貼れているか確認したり、画像リンクが切れているところをログに残したりできるだろう。

サンプル

以下に CodePen でサンプルを作ってみた。

See the Pen 読み込みに失敗した画像を処理する by Neos21 (@Neos21) on CodePen.

onerror 属性を書いてみる

まずはシンプルに、img 要素に onerror 属性を書いてみる。

<img src="not-found.jpg" onerror="this.style.border = '5px solid red';">

以下のように DOM 操作してやれば、img 要素を削除できる。

<img src="not-found.jpg" onerror="this.parentNode.removeChild(this);">

JavaScript で一括指定する

実際は HTML 中に onerror 属性を書くのは気が引けるので、JavaScript 側だけで一括処理するようにする。

// window.onload 前に処理を入れておく
document.addEventListener('DOMContentLoaded', () => {
  // ページ中の img 要素を全て取得する
  const imgElems = document.querySelectorAll('img');
  for(const imgElem of imgElems) {
    // 各 img 要素に Error イベント時の処理を付与する
    imgElem.addEventListener('error', (event) => {
      // ココでは枠付けするようにしたが、要素の削除などにしても良い
      imgElem.style.border = '5px dashed red';
    });
  }
});

こうすれば、読み込めなかった画像の情報を console.log() に出すなどの処理も自由に変更できるだろう。querySelectorAll() の範囲を狭めて、確認したい箇所の img 要素だけをピックアップするようにしても良い。


このように、画像読み込みエラーを割とサクッとチェックできるのでオススメ。