「気になる展覧会」記事の表部分に使ったJavaScriptのメモ

ブログ本館では、3か月毎に以下のような展覧会リストを(自分のために)作っています。

このブログで次のようなことが出来るように JavaScript を書いてみました。

  • 展覧会期間が過ぎた行は非表示にする。
  • 展覧会期未定の場合は会期末の日付を「00」にすることで処理を無視する(2020/5/21追加)
  • 展覧会開始4週間(28日)前及び12週間(96日)前の行は表示を薄くする。
  • 開催中の展覧会の期間部分をボールド且つ背景色をグレーに。
  • 展覧会開始後1週間及び終了前1週間は展覧会名の色を変更して目立たせる。

いままで書いていたはてなダイアリーでは JS が使えなかったので、やりたくても出来なかったのです。

JS を一から書いたのは初めてに近いので、下手くそなのは見逃してください。

const trs = document.querySelectorAll('table > tbody > tr');
const re = /^([\d\/]+)-([\d\/]+)/;
const yyyy = "2020" // 該当する記事の年に変更する
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当日真夜中
for (let i=1; i < trs.length; i++) { // i=0 は項目名なので排除
  let tr = trs[i]
  let titleElem = tr.childNodes[1];
  let scheduleElem = tr.childNodes[3];
  let text = scheduleElem.innerText;
  let dates = text.match(re); // dates[1]が期間開始日、dates[2]が期間終了日
  
  // 終了日関係
  let endDateArray = dates[2].split("/");
  // 会期末未定の場合には日付を 00 にすることで以下の処理を無視する
  if (endDateArray[endDateArray.length - 1] === "00") {
    continue;
  }
  let endDate;
  if (endDateArray.length === 2) {
    endDate = new Date(yyyy + "/" + endDateArray.join("/"));
  } else {
    endDate = new Date(endDateArray.join("/"));
  }
  
  let endDateCountFromToday = (endDate - today)/86400/1000
  // 展覧会終了日を過ぎていたら表示しない(visibility:collapse;)
  if (endDateCountFromToday < 0) {
    tr.setAttribute('style', 'display:none;');
    continue;
  } else if (endDateCountFromToday < 7) {
    titleElem.setAttribute('style', 'color:#39f;'); // 終了日7日以内ならばタイトルtitleElemを青色に
  }
  
  // 開始日関係
  let startDateArray = dates[1].split("/");
  let startDate;
  if (startDateArray.length === 2) {
    startDate = new Date(yyyy + "/" + startDateArray.join("/"));
  } else {
    startDate = new Date(startDateArray.join("/"));
  }
  
  let startDateCountFromToday = (startDate - today)/86400/1000
  // 展覧会開始日が96日前よりも前だったらopacityをかなり小さくする
  if (startDateCountFromToday > 96) {
    tr.setAttribute('style', 'opacity:0.25;');
    continue;
  }
  // 展覧会開始日が28日前よりも前だったらopacityを小さくする
  if (startDateCountFromToday > 28) {
    tr.setAttribute('style', 'opacity:0.6;');
    continue;
  }
  // 展覧会開始日を過ぎていたら日程部分scheduleElemをボールドに
  if (startDateCountFromToday <= 0) {
    scheduleElem.setAttribute('style', 'background:#eee;font-weight:bold;');
  // 展覧会開始日を過ぎて7日以内ならばタイトルtitleElemを赤色に
    if (startDateCountFromToday > -7 && endDateCountFromToday >= 7) {
      titleElem.setAttribute('style', 'color:#f63;');
    }
    continue;
  }
  // 展覧会開始前3日以内だったらタイトルtitleElemを茶色に
  if (startDateCountFromToday <= 3) {
    titleElem.setAttribute('style', 'color:#c42;');
  }
}

もちろんこの JavaScript<script> タグに挟んで記事末尾に入れておくわけです。

参考:HTMLのテーブルの要素を消したり薄くしたりするCSSは(Safari除く) - 別館 子子子子子子(ねこのここねこ)はてブロ部

備忘録なので、誰の参考にもならなくてもいいのです(イイワケ

DRY じゃない部分をそのうち関数にしてみたりしよう(ひとりごと

HTMLのテーブルの要素を消したり薄くしたりするCSSは(Safari除く)

テーブルの要素を消して詰めるには

世間的には要素を非表示にするときに「display: none;visibility: hidden;」を使うようですね(例:【CSS】非表示にするならどっち?display:noneとvisibility:hiddenの違い | BeGeek)。が、テーブルの行であれば visibility: collapse; というのがかなり使えるようです。原理的にはコストがかからないようなので速いのではないでしょうか。

2019/2/25夜追記

残念なことに Safari*1 では visibility: collapse;visibility: hidden; と同じになってしまい、行の表示が詰められませんでしたorz

collapse
  • <table> の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に display: none が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます
  • その他の要素では、 collapsehidden と同じと扱われます。

visibility - CSS: カスケーディングスタイルシート | MDN(下線は引用者追加)

上にも書きましたが、いちおう再度書きます。行要素 <tr> を非表示にするときにコストが低そうですが、他の要素では特に意味が無さそうです。

サンプルをこちらに載せています。

要素を薄く表示するには

文字も背景色も普段より薄く表示してみたいなあ、と思ったときにいちいち文字と背景色の値を変更するのは面倒。ということでまとめて薄く表示させるのは opacity プロパティを使います。

CSSopacity プロパティは、要素の透明度、または要素の裏にあるコンテンツが見える度合いを設定します。

opacity - CSS: カスケーディングスタイルシート | MDN

引数は0以上1以下です。つまり opacity: 1; とか opacity: 0.6; などのように書きます。

サンプルをこちらに載せています。

テーブルの要素を消す例

サンプルとして2018年度気になる展覧会その4(冬編) - 子子子子子子(ねこのここねこ)はてブロ部のテーブルを使います。なおブラウザは「Chrome バージョン: 71.0.3578.98(Official Build) (64 ビット)」です。

行要素 <tr> を非表示にする場合

王羲之書法の残影―唐時代への道程―」の行を取り扱います。

  • オリジナル

f:id:riocampos:20190225160839p:plain:w500

  • display: none;

指定した行が詰められています。完全に消えてしまって、位置表示もされませんね。

f:id:riocampos:20190225160901p:plain:w500

  • visibility: hidden;

行が存在した場所が空白として空きます。

f:id:riocampos:20190225160955p:plain:w500 f:id:riocampos:20190225161003p:plain:w500

  • visibility: collapse;

display:none; のように行が詰められていますが、存在した位置は表示されます。

f:id:riocampos:20190225161013p:plain:w500

単一要素 <td> を非表示にする場合

  • オリジナル

f:id:riocampos:20190225165728p:plain:w500

  • display: none;

指定した要素が消え、右にあった要素が左へ詰められています。完全に消えてしまって、位置表示もされませんね。

f:id:riocampos:20190225170503p:plain:w500

  • visibility: hidden;

指定した要素が表示されません。この例では下の枠線が消えてしまい、真下の要素が縦に伸びたように見えます。

f:id:riocampos:20190225170602p:plain:w500 f:id:riocampos:20190225165815p:plain:w500

  • visibility: collapse;

指定した要素が表示されません。visibility:hidden; と同じ表示になっています。

f:id:riocampos:20190225170231p:plain:w500 f:id:riocampos:20190225170210p:plain:w500

行要素 <tr> を薄く表示する例

やはり「王羲之書法の残影―唐時代への道程―」の行を取り扱います。

  • opacity: 1;

オリジナルと同じです。

f:id:riocampos:20190225172732p:plain:w500

  • opacity: 0.5;

半分の濃度。わりと薄くなります。

f:id:riocampos:20190225172750p:plain:w500

  • opacity: 0.1;

かなり読みづらいです。

f:id:riocampos:20190225172806p:plain:w500

*1:macOSSafari バージョン12.0.3 (12606.4.5.3.1) 及び iOSSafariiOS 12.1.4)にて確認

はてなブログにおける脚注メモ(Markdown方式)

Markdownの脚注記法に対応しました

はてなブログの記事編集画面で利用できるMarkdownモードで、Makrndownの脚注記法に対応しました。

 :

今回サポートした脚注は、PHP Markdown Extra由来の記法です。

はてな記法Markdownの脚注に互換性はなく、それぞれ個別にフォーマットされます。


Footnotes

Footnotes work mostly like reference-style links. A footnote is made of two things: a marker in the text that will become a superscript number; a footnote definition that will be placed in a list of footnotes at the end of the document.

いままでのはてなダイアリー由来の脚注*1Markdown 方式の脚注1とは残念ながら全く別個なのよね。書く側が統一しなきゃいけないので、なんだかなあと思う。はてなダイアリーの脚注で表記しておけば、マウスポインタを当てたときに脚注の内容が表示されるので便利、でも Markdown 方式の脚注では表示されない。結局、はてなブログでは旧来のはてな記法で脚注しておくほうが良いと思う。


  1. こっちがMarkdown方式の脚注

*1:こっちがはてなダイアリー由来の脚注

はてなブログでブログ外リンクを別ウィンドウ/タブで開くように(JS解説付き)

ポイント

はてなブログで全てのリンクを別ウィンドウで開くならば <base target="_blank"> を設定しておけば済むのだけど、しかしこの状況でははてなブログ内のリンクまで別ウィンドウで開いてしまう。これはウザい。ってことで先人の知恵を借りた。けど若干のチューニングをしたのでメモっておく。

どうするの?

はてなブログの「設定>デザイン>カスタマイズ>ヘッダ」の「タイトル下」に HTML を書く欄があるので、そこに

<script>window.addEventListener("DOMContentLoaded",()=>document.querySelectorAll("a[href^='http']:not([href*='"+location.hostname+"'])").forEach(anchor=>anchor.setAttribute('target','_blank');));</script>

をコピペして「変更を保存する」ボタンを押して保存。これでおk。

スクリプトを読みやすくして解釈していく

<script>
window.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("a[href^='http']:not([href*='" + location.hostname + "'])").forEach( (anchor) => {
    anchor.setAttribute('target', '_blank');
  })
});
</script>

1. document.querySelectorAll を解釈

document.querySelectorAll の引数は CSS セレクタで指定します。その中身である

"a[href^='http']:not([href*='" + location.hostname + "'])"

を解釈していきましょう。

まず a[href^='http'] から…との記事を書いていたのですが、先に location.hostname から。location.hostname は「現在ページURLのホスト名」の文字列です(参考:location.hostname-JavaScriptリファレンス)。ここでは本ブログのホスト名 riocampos-tech.hatenablog.com になります。次に、その前後をみると '" + location.hostname + "' とあります。シングルクオートとダブルクオートとが並んでいて読みづらい上、なぜシングルクオートとダブルクオートとが並んでいるのか?と悩んでしまいます。結論から言ってしまうと、+ location.hostname の前のダブルクオートは冒頭 a から続く文字列を閉じるものです。CSS セレクタは当然ながら文字列なので、文字列の中にさらに文字列であるURLを引用するにはシングルクオートを使う必要があります。しかし文字列の中に引用を入れるのは従来の JavaScript では不可能だった1ので、シングルクオートとダブルクオートとを並べることになるわけです。ややこしいので、先に location.hostname の部分を文字列にしましょう。すると[href*='riocampos-tech.hatenablog.com'] という文字列になります。CSS セレクタ全体を見直してみると

"a[href^='http']:not([href*='riocampos-tech.hatenablog.com'])"

となりました。では改めて解釈していきましょう。

まず a[href^='http'] は「a 要素のうち href 属性の値が文字列 http から始まる要素」という意味です(参考:E[foo^="bar"]-CSS3リファレンス)。

次に :not(〜) は「引数(〜)に該当しない要素」なので a[href^='http']:not(〜) は「a 要素のうち href 属性の値が文字列 http から始まり、且つ引数(〜)に該当しない要素」という意味になります2(参考:E:not(s)-CSS3リファレンス)。で、引数の部分は [href*='riocampos-tech.hatenablog.com'] となっています。ここは「href 属性の値が文字列 riocampos-tech.hatenablog.com を含む要素」という意味です(参考:E[foo*="bar"]-CSS3リファレンス)。

まとめると「a 要素のうち href 属性の値が文字列 http から始まり、且つhref 属性の値が文字列 riocampos-tech.hatenablog.com含まない要素」が document.querySelectorAll で選び出されることが分かります。

2. forEach 以降を解釈

(いずれ書きます)

先人の情報

この記事の内容は、基本的には一つ目のリンク先のままなのだけど、空白や改行を削除したり、jQuery のリンク先をはてな内にしたり、<script>タグの表現を変更したり jQuery から ES5 へ変更したり、ヘッダじゃなくフッタへの設定に変更したり、 function を Fat arrowにしたりしてます。

補足

じつは Document.querySelectorAll() の返値 NodeListNodeList.forEach() を使えなかったのですよ。最近のブラウザは使えるようになったようなので、それで使ってます。古いブラウザ対応は無視w (参考:NodeList.prototype.forEach() - Web APIs | MDN

はてなブログスマホビューのとき

でもね。iPhoneスマホビューで見たときには別タブで開いてくれないのです…なんでなの。 jQuery$(document).ready なのがスマホだとダメなときがあるという話を読んで「これは jQuery を止めちゃおう」と思って ES5 に書き換えたのにな。 HTML 読み込みなどの設定はスマホ用サイトだと別設定になっているし、はてなブログ PRO じゃないとスマホ用の HTML を書けないということに気付きました…うーむ。2年まとめ払いでも月額600円だから、はてなダイアリープラスの価格より大幅値上げに感じてしまうのよね…。 まあそれぞれのブログの末尾に

<script>document.querySelectorAll("a[href^='http']:not([href*='"+location.hostname+"'])").forEach(anchor=>anchor.setAttribute('target','_blank'))</script>

って毎回追記しておいてもいいのだけどね。面倒だけど3

なお、ブログ末尾に上記のスクリプトを追記するのであれば、はてなブログの設定のスクリプト

<script>window.addEventListener("DOMContentLoaded",()=>document.querySelectorAll("a[href^='http']:not([href*='"+location.hostname+"'])").forEach(anchor=>{if(anchor.getAttribute('target')!=='_blank')return;anchor.setAttribute('target','_blank');}));</script>

のように target="_blank" がある場合にはスクリプトを実行しないようにしておいたほうがいいかなと思います。


  1. いまはテンプレートリテラル``を使えば読みやすく書ける。今回の場合だと`a[href^='http']:not([href*='${location.hostname}'])`

  2. セレクタを続けて書くとandになると思われます。

  3. セコイねw

はてなブログ記事を改善するためのメモ

はてなブログを将来改善するためのメモが投げ込まれてます

今回はちょっと古めの記事ばかりですが、どうせチューニングしてないので今なら古め記事でも大いに役立つはずなのです。

…とはいえ、jQuery じゃなく ES2018 で書きたいものですなあ。

ってことでコレ欲しいな。(pdf 版を買いました→ JavaScript コードレシピ集 | Gihyo Digital Publishing … 技術評論社の電子書籍

JavaScript コードレシピ集

JavaScript コードレシピ集

↑の著者blog:

「気になる展覧会」記事での表をなんとかしたい

ソートしたり限定したり。これが役立つはず。

(2019/2/26追記:ソートは入れずに必要部分のみ目立つようにした。 「気になる展覧会」記事の表部分に使ったJavaScriptのメモ - 別館 子子子子子子(ねこのここねこ)はてブロ部

はてなブログでも、はてブホッテントリのRSSフィードリーダを使いたい(未完

本館も引っ越ししました

はてダが使えなくなる日が近いので、この別館だけではなく本館も子子子子子子(ねこのここねこ)はてブロ部としてはてなブログへ引っ越ししました。 しかし、以前使っていたサイドバーが簡単に使えないのが気に入らない。特にRSSフィードリーダを使う設定が無いので、以前から使っていたホッテントリ表示が出来ない。ぶつぶつ。

先人の知恵

サイドバーにRSSを表示させるツールに関してはこちらで情報を得ました。

ってことで私もRSS・SNS表示用ブログパーツ|FeedWind(フィードウィンド)を使ってホッテントリのフィード http://b.hatena.ne.jp/hotentry.rss を流し込み本館のサイドバー*1に登録しました。

しかし…

いま FeedWind を日本語化して気付きましたが、無料で使えるプランは無くなったようです…>_<。
FeedWind Plansのご案内 | FeedWind
「29日後に作成したウィジェットは無効になります。有料版の利用をご検討くささい。」くささい じゃねーよ!

ってことで未完

無料で優秀なRSSフィードリーダは無いのかしら…ということで探し中。

検討中情報(2019/1/21追記)

jQuery で作ってしまう、ってやり方も。

おまけ:日英の表現ちがい

サイドバーに使うようなツールを日本語だとブログパーツと言うけど、英語だと Web widget と言うのだなあ、と Wikipedia で気付いたのであった。

さらにおまけ:日付

はてなダイアリーだと翌日5時までが前日の日付扱いで投稿出来たのだけど、いま見たら0時で日付の取扱が変わってますね。まあしゃあないのかな。

*1:と言いつつブログが全幅使ってるのでサイドじゃなくフッタの上なんだけどな

デジカメで撮影したMotion JPEGな動画ファイルをPhotos.appに登録してもiOS端末に同期されない

はてなblogでのお初記事です。よろしくお願いします。

状況説明

別記事にも載せていますが、デジカメは RICOH CX5 を使っています。このデジカメで動画を撮影すると Motion JPEG 形式(拡張子は .avi)になります。macOS の写真.app(以下 Photos.app )に Motion JPEG を登録すれば再生可能なのですが、残念ながら iOS では Motion JPEG を再生出来ないようで、Photos.app に Motion JPEG を登録しても iOS に同期されません。さらに残念なことに、Photos.app は iOS 向け変換をしてくれないのです(してくれればいいのに)。ということで、このような動画ファイルを iOS 端末へ同期するようにするには、動画をPhotos.app に登録する前に iOS で再生可能な形式に変換しておく必要があります。つまり H.264 形式(拡張子は .mp4)にしておけば良いわけです。

変換にはやはりFFmpegでやるのですが

ただし、ごく単純に FFmpeg

ffmpeg -i RMOV0001.AVI RMOV0001.mp4

とやっても、生成されたファイル RMOV0001.mp4 は iOS 端末や MacQuickTime)で再生出来ません。YUV420 という形式にしておかないと再生出来ないのです。Motion JPEG は YUV422 なので、FFmpeg は何もオプション指定していないとそのまま YUV422 の H.264 形式の動画ファイルを作ってしまうんですね*1

ということで動画変換には

適切なオプションを付けておく必要があります。今回は YUV420 にするために -pix_fmt yuv420p を付けておきます。そして iOS 端末で撮影した動画ファイルの拡張子は .mov なので今回の変換後ファイルの拡張子も揃えておきましょう。

ffmpeg -i RMOV0002.AVI -pix_fmt yuv420p RMOV0002.mov

この変換後の動画ファイル RMOV0002.mov を Photos.app に登録すれば、問題無く iOS 端末へ同期できます。

時刻情報はどうする

さて。上で FFmpeg で動画形式を変換しましたが、撮影時刻情報が全く消えています。このままでは FFmpeg で変換した時刻が撮影時刻であると Photos.app が判断してしまいます。困りますよね。

① 変換後の動画ファイルの作成時刻を変換前の動画ファイルと同じにしちゃえ

touch コマンドで変換後の動画ファイル RMOV0003.mov を変換前の動画ファイル RMOV0003.AVI の作成時刻と同じにしてやってもOKなようです。

touch -r RMOV0003.AVI RMOV0003.mov

もちろんこの作業を行った後に Photos.app へ登録します。登録後に行っても意味ありません。

② 変換後の動画ファイルに時刻のメタ情報を書き込んじゃえ

私が最近お気に入りの exiftool を使うと、撮影時刻情報を変換後の動画ファイルに書き込むことができます。どうやら QuickTime:CreateDate というメタ情報が撮影時刻情報になるようです。変換前の動画ファイル RMOV0003.AVI の作成時刻、もしくは RMOV0003.AVI の撮影時刻のメタ情報を使って、QuickTime:CreateDate に書き込んでやれば OK です。変換前の動画ファイルの作成時刻のメタ情報は、私の使っている RICOH CX5 の場合だと RIFF:DateTimeOriginal に入っていました。

$ exiftool -s -G -RIFF:DateTimeOriginal RMOV0003.AVI
[RIFF]          DateTimeOriginal                : 2019:01:01 07:13:24:

この RIFF:DateTimeOriginal には時差情報が入っていません。一方、 Photos.app は QuickTime:CreateDate を基本的にUTCとして取り扱うようです。ですので、日本で撮影した場合には時差を考慮してやる必要があります。いちいち手作業でこんなことをやっていては間違うでしょう。ということでシェルスクリプトなどをつかってやります。私は bash をほとんど分かっていないので、慣れている Ruby で大半の変換作業を行いました。

$ exiftool -P -overwrite_original -QuickTime:CreateDate="$(ruby -rtime -e 'print Time.strptime(`exiftool -DateTimeOriginal RMOV0003.AVI`[/\d{4}:\d\d:\d\d \d\d:\d\d:\d\d/], "%Y:%m:%d %T").utc.strftime("%Y:%m:%d %T")')" RMOV0003.mov
    1 image files updated

-QuickTime:CreateDate= 以降にある $()bash のコマンド展開です。ので、丸括弧の中に Ruby ワンライナーを入れておけばワンライナーの実行結果が反映されるってわけです。今回は文字列としての日付が欲しいのでさらに外側をダブルクオートで括っておきます。

Ruby での処理内容は以下の通りです。

  1. `exiftool -DateTimeOriginal RMOV0003.AVI` で作成時刻のメタ情報の文字列を取得。
  2. メタ情報の文字列から [/\d{4}:\d\d:\d\d \d\d:\d\d:\d\d/] で時刻情報のみを抜き出す。
  3. Time.strptime メソッドを使って時刻情報文字列を Time オブジェクトへ変換。
  4. Time#utc メソッドでUTCに変換。
  5. Time#strftime メソッドでフォーマットを指定して時刻表示文字列に変換(目的としていた UTC 表記時刻)。
  6. Kernel.#print メソッドで文字列を出力

この後に Photos.app へ登録します。(しつこいですが)登録後に行っても意味ありません。

*1:JPEG ファイルも YUV422 なので、FFmpeg で複数枚の JPEG ファイルから動画ファイルを造るときにも同様の現象が生じます。そんなことをメモ書きしたのが連番静止画からタイムラプス動画を作る - Qiitaです。