きゃらりこ日誌

最近の記事

サイト管理 / 技術 / メモ

CSSだけでアコーディオンメニューを実装する

デザイン変更の度に仕組みを忘れてしまい、調べなおすのも面倒なので、ここにメモとして残しておきます。

仕組み

CSS3の疑似クラス:checked(チェックボックスの状態の確認)でチェックボックスがONになっているかを調べ、間接セレクタ~(兄弟要素に適用)を使ってつなげることで、アコーディオンメニュー・ボタンの表示を切り替えています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
#cBox, #close, #aMenu,
#cBox:checked ~ #open {
/* チェックボックス、×、アコーディオンメニューを隠す。 */
/* チェックボックスが☑だったら、≡を隠す。 */
display: none;
}
#cBox:checked ~ #close,
#cBox:checked ~ #aMenu {
/* チェックボックスが☑だったら、×とアコーディオンメニューを表示。 */
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="cBox">
<label id="open" for="cBox">≡</label>
<label id="close" for="cBox">×</label>
<nav id="aMenu">
項目1<br>
項目2<br>
項目3<br>
 ⋮
</nav>
</body>
</html>

チェックボックス代わりにラジオボタン、間接セレクタの代わりに隣接セレクタ+(すぐ下の弟要素に適用)を使っても構いません。

また<input>・<label>タグを、<form>タグで囲みたくなる衝動に駆られますが、チェックボックスとアコーディオンメニューが兄弟要素(同階層)ではなく、アコーディオンメニューが叔父叔母要素(?)になってしまい間接セレクタが使えなくなるので、やめておきましょう。
HTML5の文法上問題ないとはいえ、<form>で囲まないのはちょっと気持ちが悪いですが…
[ | この記事のURL ]


インターネット / 技術 / メモ

Firefox Quantumで見かけるキャラクターを集めてみました

Mozilla Firefoxを使用していると、エラー画面に動物のキャラクターが登場することがあります。
これはFirefox Quantum(Firefox 57、2017年11月14日リリース)で、ブラウザのデザインがPhotonに一新されたことを機に導入されたものなのだそうです。
この動物たちのイラストの作者は、Mozilla Creative Teamで活動している、デザイナーのElio Qoshiさんだと思われます。
ちなみにFirefroxのキャラクターというと、フォクすけを思い浮かべる方もいると思います。あれはMozilla Japanが、Firefoxのプロモーションのために作ったキャラクターで、Firefox自体のキャラクターではないそうです。こちらの作者はITエンジニアで、雑誌「日経Linux」でマンガ「シス管系女子」を連載しているPiroさんです。

他にもいろいろなキャラクターが居るようなので、調べてみました。
なおこれらのキャラクターは、Firefoxに使われているコンポーネントの名称に由来しているようです。
ちなみにメーラー Mozilla Thunderbirdにもキャラクターが居ないか調べてみましたが、発見することができませんでした。

なお再現URL・画像ファイルURLは、Firefox固有の機能や内蔵されている画像ファイルを指定しているので、Firefox以外のブラウザでは表示することはできません。
Firefox以外のブラウザをお使いの方は、Firefox Quantumのソースコードの中にある同名の画像ファイルをご覧ください。
また動作確認は、この記事を執筆した時点での最新版 Firefox 64で確認したものなので、他のバージョンでは表示できない可能性があります。

アクセスしようとしているサイトを見つけられません。

ウェブサイトがドメインごと消滅してしまったときなどに出るエラーです。
開発元 Mozilla Foundationの名前がゴジラに由来するということもあり、そのマスコットキャラクターの恐竜が登場しています。

再現URL http://www.example.local
画像ファイルURL chrome://browser/content/illustrations/error-connection-failure.svg


接続がタイムアウトしました

ウェブサーバから応答がないときに出るエラーです。
サーバが混雑しているときや、サーバが落ちているときに出てきます。

再現URL http://192.168.255.1
画像ファイルURL chrome://browser/content/illustrations/error-connection-failure.svg
bugzillaでは赤色のものも公開されています。(https://bugzilla.mozilla.org/attachment.cgi?id=8861719


すみません。もう少しだけ操作が必要です。

バックグラウンドで更新があったときに表示される画面です。
通常ポップアップ通知で表示されるようになっているので、私は見たことがありません。上の「接続がタイムアウトしました」と同じイラストですが、イラストの差し替え忘れでしょうか。


再現URL about:restartrequired
画像ファイルURL chrome://browser/content/illustrations/error-connection-failure.svg


アドレスが正しくないようです

URLがおかしいときに出るようですが、通常は検索サイトに飛んでしまうので、これを見る機会はほとんどないと思います。
私は、Cドライブの残り容量が数十MBになってしまったたときの誤動作で、初めて見ました。

再現URL about:hoge
画像ファイルURL chrome://browser/content/illustrations/error-malformed-url.svg


ご迷惑をおかけして申し訳ありません。

Firefoxがクラッシュした後、ウィンドウ・タブを復元できなかった時に出るエラー画面です。
プロファイルの破損・User.jsの破損がきっかけでクラッシュした後、これが表示されたことがあります。

再現URL about:sessionrestore
画像ファイルURL chrome:browser/skin/classic/browser/illustrations/error-session-restore.svg


あなたの権利について

[≡]→[ヘルプ]→[Firefoxについて]の、クレジット画面からもリンクされています。
この青色のサルは、FirefoxのJavaScriptエンジン SpiderMonkey(クモザル)に由来しているのかもしれません。

再現URL about:rights
画像ファイルURL chrome://global/skin/illustrations/about-rights.svg


オプション

Firefoxの設定画面で、検索結果が見つからない場合に表示されます。
[≡]→[オプション]でも、about:preferencesの画面を表示することができます。

再現URL about:preferences で、右上の検索ボックスに「hoge」などの存在しない適当な単語を入れる。
画像ファイルURL chrome://browser/skin/preferences/in-content/no-search-results.svg


イースターエッグ

Firefox Quantumで追加された隠し機能です。
ちなみに緑色の生き物はレンダリングエンジン Gecko (トッケイヤモリ)、黄色の鳥はMozilla Firefoxの旧称 Mozilla Firebird(ボルチモアムクドリモドキ)、もしくはかつて存在したMozilla Application Suiteのスケジューラ Mozilla Sunbird (太陽鳥)に由来しているのかもしれません。

再現URL about:preferences で、右上の検索ボックスに絵文字「🔥🦊」を入れる。
画像ファイルURL chrome://browser/skin/preferences/in-content/critters-postcard.jpg


オーバーフローメニュー

ツールバーをカスタマイズする際の説明として表示されます。[≡]→[カスタマイズ]を選択すると、右上に表示されます。
この生き物はよくわかりませんが、コウモリでしょうか?

画像ファイルURL chrome://browser/skin/customizableui/empty-overflow-panel@2x.png


Firefoxにようこそ

Firefoxを始めて使うときや、新しいプロファイルで起動したときの、UI紹介で表示される画像です。Firefox 64で実装された機能です。
Firefoxはレッサーパンダの別名でもあることからなのか、レッサーパンダが登場します。

再現URL about:welcome のあと、Firefox Accountsにログインするか、[この手順をスキップ]を押す。
画像ファイルURL 
resource://activity-stream/data/content/assets/illustration-addons@2x.png
resource://activity-stream/data/content/assets/illustration-privatebrowsing@2x.png
resource://activity-stream/data/content/assets/illustration-screenshots@2x.png


はじめましょう

上記と同じもので、Firefox 57~63で使われていました。Firefox 64で、上記の「Firefoxにようこそ」に置きかえられたため、削除されてしまいました。
上であげたキャラクターに加え、ユニコーンも登場します。

再現URL about:newtab またはタブの「+」をクリックして新しいタブを開いた後、左上のFirefoxのロゴマークを押す。その先の各ページに、キャラクターが居る。

画像ファイルURL resource://onboarding/img/figure_performance.svg


画像ファイルURL resource://onboarding/img/figure_private.svg


画像ファイルURL resource://onboarding/img/figure_screenshots.svg


画像ファイルURL resource://onboarding/img/figure_addons.svg


画像ファイルURL resource://onboarding/img/figure_customize.svg


Firefox 開発ツールにようこそ!

ブラウザー開発者ツールの案内です。通常は目にする機会はないと思います。
この生き物はラッコだと思いこんでいましたが、ファイル名によるとカワウソだそうです。

再現URL about:devtools
画像ファイルURL chrome://devtools-startup/content/aboutdevtools/images/otter.svg

証明書エラー

SSL証明書のエラーで表示される画像だそうです。
再現手順はわかりませんでした。

画像ファイルURL chrome://browser/content/illustrations/blue-berror.svg


その他

旧イースターエッグ
Firefox 29(UIデザイン名:Australis、2014年4月29日リリース)から56までで実装されていたイースターエッグで使われていた画像です。
Firefox Quantumではこのイースターエッグは廃止されているので、削除し忘れだと思われます。

画像ファイルURL chrome://browser/skin/customizableui/whimsy.png


Firefoxをあなたとともに

Firefoxを始めて使うとき、新しいプロファイルで起動したときに最初に表示される、しっぽをイメージした背景画像です。
Firefox Quantum以前から使い続けている人は、見たことがないのではないかとと思います。

再現URL about:welcome もしくは、https://www.mozilla.org/ja/firefox/57.0.0/firstrun/
画像ファイルURL resource://activity-stream/data/content/assets/fox-tail.png


ニンゲンノミナサン、ヨウコソ!
Firefox 3 Beta 5で実装された、由緒正しい(?)イースターエッグです。
英語版では主に海外SFのセリフがランダムに表示されるのですが、日本では馴染みのないものが多いので、日本語版では独自のものに差し替えられています。ちなみに[再試行]ボタンにも、ちょっとした仕掛けがあります。

再現URL about:robots
画像ファイルURL chrome://browser/content/aboutRobots-icon.png

ちなみにfaviconは chrome://browser/content/static-robot.png です。


Firefox Screenshots BETA
Firefox Quantumから始まった、スクリーンショット共有機能のウェブサイトです。
説明書きだけではなく、一覧ページやスクリーンショット削除後など、随所にクマが出てきます。

再現URL https://screenshots.firefox.com


モックアップ
Firefox Quantumの新しいデザイン Photonを紹介する英語の記事の中で、制作過程で使用されたモックアップが紹介されています。
単色に変わる前のカラーのイラストや、正式リリースでは採用されなかったイラストもあります。

https://www.ghacks.net/2017/05/14/firefox-57-new-photon-design-screenshots/

Mozilla L10N
Mozillaの翻訳セクションのブログにおいて、「Friends of the Lion」の項でライオンのイラストが使われています。
「L10N」の文字が「LION」に似てるから、ライオンなのでしょうね。

Image by Elio Qoshi

出典 Mozilla L10NL10n report: January edition


※この記事で紹介しているイラスト・画像は、Mozilla Public License Version 2.0に基づいて使用しています。
またライオンのイラストは、Creative Commons BY-SA 3.0に基づいて使用しています。
[ | この記事のURL ]


技術

RaspberryPiでテレビのストリーミング配信実験をしてみたものの…

旅行先のホテルでも、自宅と同じチャンネルをリアルタイムで観たいなと思ったので、RaspberryPiを使ったテレビのストリーミング配信実験をしてみました。

サーバは、今年の3月までファイルサーバとして使っていた、RaspberryPi 2 Model B(2015年発売)。OSは、Raspbian Stretch(Debian 9ベース)を使用しました。
キャプチャーは、AliExpressで購入した、メーカー・型番不詳のUSBキャプチャー EasyCAP(変換チップはUTV007)。USB Video Classに対応しています。
映像ソースは、RCA端子(ピンジャック)出力がある、Panasonicのブルーレイレコーダ(2010年発売)。
受信には、同じネットワーク内にあるWindowsパソコンにインストールした、VLC media playerを使用しました。

まず以下の設定で、ストリーミング配信してみました。
ffmpeg -threads 4 -f v4l2 -i /dev/video0 -f alsa -thread_queue_size 2048 -i hw:1 -c:v mpeg4 -b:v 2M -c:a aac -b:a 64k -vsync 0 -async 0 -f mpegts udp://224.0.0.1:123

格安USBキャプチャを使ってるので画質が悪いのは仕方がないのですが、一番問題なのはコマ落ち。
コマ落ちが酷くて、音もとぎれがちです。
どうやらCPU負荷が高くなりすぎて、エンコード処理が間に合わないようです。

CPU負荷を軽減すべく、RaspberryPiをオーバークロックしたり、エンコード設定をワンセグと同じ320×240ピクセル・15fpsにしたり、音質を落としたりモノラル・mp3にしたり、ユニキャストにしたり、いろいろ設定を変えてみました。
音声はたまに途切れる程度までに改善しましたが、映像はコマ落ちが若干ましになった程度。
根本的な改善には至りませんでした。
RaspberryPi 2 Model Bは、Broadcom BCM2836(ARM Cortex-A7 4コア 900 MHz)なので、こういった用途には非力なのかもしれません。
[ | この記事のURL ]


サイト管理 / 技術

JS CMSを使ってみました

最近のトレンドを学ぶべく、いろいろなCMSを試していたのですが、どうもしっくりこない。
メジャーどころをいくつか入れてみたのですが、個人サイトで使うにはオーバースペックで、設定・カスタマイズも難しすぎでした。
一番普及しているであろうWordPressも面白そうだったのですが、自サイトのアクセスログを見ると、WordPressを標的とした不正アクセスが頻繁にあるので、今回は避けました。

自サイトをCMSに移行するという想定だったので、ノーメンテナンスでも末永く使えるのを重視するという運営方針の都合上、頻繁にアップデートされるCMSは避けたいのと、セキュリティを考えるとCGIやデータベースは極力使わないようにしたいです。
そういう訳で、ライセンスフリー・静的HTML・データベースサーバ不要・小規模サイト向きでのCMSを探してみたところ、JS CMSを発見しました。
JS CMS公式サイト

数日間いろいろいじってみましたが、JS CMSは私にとって機能は充分で、使い勝手もなかなかよかったです。
ただオープンソースとして公開されたのが2015年7月なので、比較的歴史が浅いのでユーザもあまり多くないようです。
またJS CMSにはユーザコミュニティがないので、ノウハウの共有がなされていなかったり、実装がまだ不十分の機能があったり。
しかしマニュアルは動画版も用意されおり、スライド版だけでは分かりづらかった説明も動画版で見ると一目瞭然。
こういうソフトって、ドキュメントが整備されてなかったり、未翻訳だったり、旧バージョンのマニュアルしかなかったりすることが多いのですが、現行バージョンのマニュアルが用意されているうえに、動画マニュアルも用意されているというところは、他のCMSと違ってとても良いです。
また開発者へのフィードバックは、メール・ウェブチャット・GitHub・Facebookと多岐にわたっています。

自サイトは、SSIをテンプレートとして使っている関係からCMSと相性がいいので、これを機に本当にJS CMSに移行しようかしら。
※12/7追記 自サイトのJS CMS移行を進めていたところ、テンプレート化に不向きなページがいくつも出てきてしまったので、最終的に移行を断念しました。

JS CMS 4.1.5.3の管理画面

私が、JS CMS 4.1.5.3を触った範囲で気になったことを、以下に列挙します。
※12/18追記 ユーザ側で対処可能なものやマニュアルの不備など簡単なものについては、マニュアルへの追記で対応していただけたようです。
※12/24追記 誤って解釈していた部分や、その後改善された点について、修正・追記しました。


分かりづらい言葉・概念

‣「テンプレート」・「ひな形」は、一般的には同義語ですが、JS CMSではそれぞれ意味するものが異なります。
‣「テンプレート」・「テンプレートHTML」とは、本文({{PAGE_CONTENTS}}内)以外の部分のテンプレート。要するに、外装用テンプレートのことです。
‣「ひな形ブロック」とは、本文({{PAGE_CONTENTS}}内)の中で、セクション単位で使う本文用テンプレートのことです。
‣「プリセット」とは、特定のフレーズをボタン一発で入力できる機能です(「プリセット」の設定・編集機能は未実装)。ただしページ単位の本文用テンプレートとしての代用するには不向きです。
‣「ページタグ」とは、システム定義のテンプレート用変数のことです。
‣「Myタグ」とは、ユーザ定義のテンプレート用変数のことです。
‣「Myタグ名ID」とは、テンプレート用変数の変数名のことです。
‣「ブロック情報パネル」とは、青色のウィンドウのことで、Windowsで言うところの「プロパティ」に相当する機能があります。
‣「{{Myタグ設定}}」ページを、2つに分けている理由が分かりづらいです。「UI用(ヘッダなど)」は「テンプレート用」、「パーツ用」は「本文用」に改名すると、分けた意図が分かりやすくなると思います。
‣公開時には表示させたくないメモ書きをページ内に書きたいときは、「基本ブロック」の中の「ノートブロック」を使います。

ノウハウ

‣JS CMSの管理画面にログインすることができるブラウザはGoogle Chrome・IE9以降で、非対応ブラウザではログインできません。しかし/_cms/js/cms.jsのinit:function() function init()の中身をいじることで、非対応のブラウザでも管理画面にログインできます(上級者向け 不具合が出ても自己責任で)。なお私はFirefoxで使いましたが、私が触った範囲ではブロック情報パネルがたまにおかしくなる(開きなおせば治る)くらいで、それ以外には大きな不具合はみられませんでした。
‣テンプレートの中身や「CMS設定」(もしくは/_cms/setting/setting.js)・jsonファイルを変更した後は、ブラウザをリロードしないと変更が反映されません。
‣「ひな形ブロック」のひな形は、{{Myタグ設定}}の「パーツ用」の中で設定します。
‣「ひな形ブロック」使用時には、ひな形の中で{{1}}・{{2}}・{{3}}などとなっている部分が、それぞれ置換されます。なおひな形ブロックは、セクション単位で使用することが想定されており、ページ単位での使用には向きません。また似たようなものに「プリセット」がありますが、こちらもページ単位での使用には向いていません。
‣「水平線ブロック」(<hr>)はありません。Myタグを使って代用することもできますが、HTML生成時には無駄に<p>タグで囲むことになる(<p><hr></p>)ので、「HTMLブロック」に<hr>と書くのが無難です。
‣「プリセット」や{{Myタグ設定}}のjsonファイルを追加する場合、/html/_mytag/や/html/_preset/に追加しても、自動では認識されません。「CMS設定」(もしくは/_cms/setting/setting.js)の「Myタグリスト設定」・「プリセットリスト設定」でファイル名・名称を追加する必要があります(上級者向け)。
「プリセット」の追加・編集機能は未実装です。独自の「プリセット」の中身は、適当なページで中身を作って、そのページのjsonファイルを、独自のプリセットのjsonファイルにコピペしてください(上級者向け)。
‣そのページだけ特別なMetaタグ・CSS・JavaScriptなどを追加したいけれども、そのために新たなテンプレートを作るまでもないときは、テンプレートの任意の位置に「Myタグ」を仕込んでおく。なおMyタグの値を入れるときは、青色のウィンドウ「テキスト編集」の左下にある「改行→<BR>」のチェックを必ず外します。
‣編集後は、必ず保存ボタン・ロックをかける癖をつけましょう。うっかり保存し忘れ・消してしまうと、1から作り直すはめになります。

残念なところ

‣ファイルマネージャでファイル削除しても、右側のエディタ上の表示は消えないので、うっかりエディタの保存ボタンを押してしまうと、消したはずのファイルが復活してしまいます。
‣「保存する」ボタンが、全然目立ちません。文字色を黄色にするのではなく、背景色を反転させたり、反対色にするくらいやらないと見落としがちです。また保存し忘れを防ぐため、ページ遷移の際にダイアログで未保存であることを警告してほしいです。これで何度も痛い目にあいました。
‣ページを保存後、自動でロックする機能が欲しいです。編集後にロックをかけ忘れることも多く、うっかり削除ボタンを押してしまうと、ページが消えてしまうことがあります。これで何度も痛い目にあいました。
‣ページを誤って削除してしまった場合、復活させる方法がありません。せめてページ削除時に、確認のダイアログを出してください。
‣「Myタグブロック」はページ内ではなく、「HTMLページ編集・削除」の中に「Myタグ」タブを作り、その中で設定する仕様にしたほうが自然です(要するに、設定関係は本文から分離)。基本はそこで設定し、{{PAGE_CONTENTS}}を使わない特殊なテンプレートを使う場合のみ、ページ内に「Myタグブロック」を置いて設定するという使い分けにするのがよいと思います。
‣ディレクトリ選択をクリック、もしくはダブルクリックでできるようにしてほしい。
‣編集画面の左上のファイル名の横にも「設定」ボタンをつけて欲しい。ここにもあった方が使いやすいです。
‣「テキスト編集」のモーダルウィンドウで、「改行→<BR>」のチェックを外すと、HTMLを生成した際に改行が削除されてしまう。¥nは残してほしいです。
‣「ページタグ」の命名ルールは、ユーザ定義の「Myタグ」との重複を防ぐために、特殊なルール(例えば{{PAGE_CONTENTS}}ではなく、{{_PAGE_CONTENTS_}}や{{CMS_PAGE_CONTENTS}}に)にした方がよいと思います。

不足している機能

‣サイト名・今年の西暦を表示するための{{SITE_NAME}}や{{THIS_YEAR}}がありません。特に今年の西暦は、著作権表記などで多用するので、使用頻度が高い機能です。 ※追記 今年の西暦は「Myタグ用JavaScriptブロック」を使えば利用者側でも実装できますが、利用頻度を考えるとシステム側で用意したほうがよいです。
「オリジナルタグ」の追加・編集機能が未実装です。現状、JavaScriptを直接いじらないといけないので、ハードルが高いです。
‣テンプレートに、その用途説明・注意事項などを書いておくための場所(いわゆるreadme.txt的なもの)が欲しいです。
‣実装途中で止まっているようですが、{{PAGE_DATE}}や{PAGE_PUB_DATE}}の日付表記で、一般的な表記(2018-01-02 13:04、1/2(土)、PM 1:04など)に対応してほしいです。
‣「ファイルマネージャ」で、フォルダの移動ができません。
‣「ファイルマネージャ」に、コンテンツ部分・テンプレート・ページのステータス等もコピーしてくれる「丸ごとコピー」ボタンが欲しいです。
Myタグ{{SRC}}の値にdog.jpgを入れたら、<img src="./img/dog.jpg">と展開され、値が空の場合はimgタグ自体が表示されない機能が欲しいです。現在のMyタグの仕様では、値が空の場合に<img src="./img/">と表示されるものしか作れないです。 ※追記 「Myタグ用JavaScriptブロック」を使えば利用者側でも実装できます。
‣「Myタグブロック」にタイトルを付けたいです。ページ内に「Myタグブロック」を複数設置したとき、「これはヘッダ用」などのように、用途説明を書きたいです。
‣「Myタグブロック」で、値以外の部分を誤って編集したり、うっかり削除しないようにロックをかけたいです。
‣「{{Myタグ設定}}」の使い分けを意図するなら、「ひな形ブロック」の設定は「{{Myタグ設定}}」下ではなく、「ひな形の設定」という独立したページにまとめてほしいです。
‣「ひな形ブロック」使用時、「MyタグID」をプルダウンメニューで選択できるようにしてほしいです。
「プリセット」は正規手段での編集方法が実装されておらず、ガイドには使用方法が未記載になっています。現状では「プリセット」の代わりに、非公開のコピペ専用ページを用意しておいて、そこからコピーしてくるという運用にならざるをえません。
‣sitemap.txt、できればsitemap.xmlを自動生成して欲しいです。

重箱の隅

‣フローティングウィンドウの文字色が水色ですが、読みづらいです。
‣公式サイトの各所に誤字が散見されるのと、ウェブ版ガイドで意味が正反対になる致命的な誤記があるのが気になります。
‣動画版ガイドではナレーションの口調が丁寧なだけに、「グロナビ」・「テンプレ」のようなくだけた略称や、「おおまか」・「だったり」などの口語表現が気になります。
‣動画版ガイドで、ナレーション原稿の脱字や違和感のある言い回し・入力ミスは、それほど気にはなりませんが、できれば撮り直した方がよいと思います。
また断りを入れているとはいえ、「ファイルマネージャ」の隣にあるエディタではなく、Macのエディタで編集してしまう点も気になりました。
[ | この記事のURL ]