「Firefox 50」が安定版に。拡張機能のパフォーマンス改善や脆弱性の修正が行われる
http://forest.watch.impress.co.jp/docs/news/1030197.html
「Firefox 50」正式版がリリース、キーボードショートカットの更新やページ内検索機能を強化
http://gigazine.net/news/20161116-firefox-50/
firefox がとうとう バージョン「50」 になりました！
いろいろ強化・修正されたみたいで、
特に、
・border-radiusを用いて作成された角丸の点線と破線の描画に関する不具合を修正しました
という修正が入り、
個人的に非常に高まっております！
border-radius とは角丸を表現する CSS で、
最近の Web サイトでは使わない方が珍しいくらい多用しているプロパティの一つです。
丸くした箇所に沿って線を引いたりなども多用しますが、たまにその線を点線や破線にすることもあります。
しかし
角丸指定と点線や破線を同時に使うと、直線になってしまうというバグが firefox ではずーっと残っていて ( 2007年ごろから ) デザインを再現するには画像などで対応するしかなく、大変だったのですが、今回の新しいバージョンでは指定した通りになるようになった！ということです。
border-radius: 50%; などという円になる表現で点線や破線を指定した際が特にクリティカルなバグで、すべて直線になってしまいデザインを再現しにくいのが悩みでしたが、新しいバージョンが世の中に浸透していけばもっと楽しく・簡単に実装ができそうです！
今までの firefox の場合、これらは同じ直線でした…。
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定
しかし バージョン「50」 になったこれからの firefox の場合、ただしく描画されます！
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定
以上、嬉しい前置きでした。
本題（私のブックマークレット環境について）
さて、私はコーディング作業や確認作業、調べ物など、ブックマークレットを多用しており、これが無いと仕事に支障がでます…。
常時、ブラウザの右上に設置しており、ワンクリックで即座に動作させるようにしております。
( https 化してある Web サイト上で、たまに動作しないのが辛いところ…。 )
右上はこんな感じに。
テキスト（ブックマークの名前）を空にし、アイコンのみにすることで、限られたブラウザのスペースを節約しております！
- をクリックするとポップアップを表示し、日本語を入力すると Google 翻訳で英語に。
- をクリックするとポップアップを表示し、英語を入力すると Google 翻訳で日本語に。
といった使い方をしています。
ただしこれはアイコンがあるから、簡単に見分けがつくわけで…
アイコンが無いと、下記の様な感じになります。
これは大変ですね。
というわけで、アイコンを設定できるアドオンが存在します。
Bookmark Favicon Changer
https://sites.google.com/site/sonthakit/bookmarkfaviconchanger
こちらを使うと右クリックからのコンテキストメニューで、アイコンを簡単に変更したり保存したりができます。
バージョン「50」より以前まではこちらでまったく問題ありませんでした。
バージョンアップ直後は問題なかったのですが、「追加のツールと機能」のカスタマイズを行うと、アイコンが初期化されてしまい、以後変更ができなくなってしまいました。
いろいろ検証した結果、
- http や https から始まる URL には今まで通り問題ない
- javascript: から始まる URL には適用されない
ということがわかりました。
そこでハック的な考えで、
一度別の URL に変えてアイコンを設定し、また URL を戻すと上手くいくのでは…？
ということで実践しましたが、適用直後は想像通り上手くいきました。
が、やはり「追加のツールと機能」のカスタマイズを行うと、初期化されてしまい、無駄な作業の連続でした…。
解決策は…ユーザースタイルシート ！
かなり右往左往しましたが、
ユーザースタイルシート というのを思い出し、
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
こちらのユーザースタイルシートを管理できるアドオンを導入し、なんとかならないか挑戦しました。
実はユーザースタイルシートは Web サイトの調整だけでなく、
ブラウザの外観も操作することができるのです！
ユーザースタイルシート自体は Google Chrome にも存在します。
DOM Inspector
https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/
さらにこちらの DOM Inspector というアドオンで外観の要素 ( CSS を付与する箇所 ) を特定し、いざアイコン設定のスタイリングです。
要素の名前は「toolbarbutton」
toolbarbutton という要素 ( タグ ) にスタイルを付与していきます。
( ※未確認事項 ) 私の場合はブックマークツールバーという枠に、各ブックマークレットを収めているため、もしかしたらいくつか違いがあるかもしれません。
下準備として、名前を空にしていたブックマークレット達に、「bookmarklet_〇〇」といった形式で名前を付けてあげます。
〇〇は任意です。 先ほどの Google 翻訳だったら bookmarklet_google-translate-ja-to-en などの様に。
こうすることで追加したスタイルが toolbarbutton 全域に適用されるのを防ぐ書き方がをすることができます。
/* HTML */
<toolbarbutton label="bookmarklet_〇〇"></toolbarbutton>
/* CSS */
toolbarbutton[label^="bookmarklet_"] {
background: no-repeat center center !important;
background-size: 16px 16px !important;
cursor: pointer;
font-size: 0;
overflow: hidden;
text-indent: 100%;
transition: background-color .175s, background-size .175s;
white-space: nowrap;
}
toolbarbutton[label^="bookmarklet_"]:hover {;
background-color: #fff !important;
background-size: 13px 13px !important;
}
toolbarbutton[label^="bookmarklet_"] .toolbarbutton-icon {
visibility: hidden;
}
この CSS で、toolbarbutton の label ( 名前 ) 属性の値の先頭に bookmarklet_ を含んでいる要素だけにスタイルを付与することができます。
background にはデフォルトのスタイルがいくつか入っていて綺麗に打ち消すのが手間なので !important で強制してあげます。
目指すのはアイコンのみの省スペースかつ分かりやすい表示で、テキスト ( 名前 ) は不要なので、テキストを消す処理も忘れずに入れます。
また、デフォルトのアイコンが toolbarbutton-icon というクラス名で子要素に存在するので、こちらも邪魔になるので非表示にします。
その際に display: none; に使用して要素を消してしまうと、画像の高さを横幅が失われて、幅が小さくなってしまうので、非表示専用のプロパティ「visibility」を活用します。
ここまでをベースとして、各々にアイコンを設定していきます。
アイコンは base64 形式にすると、画像としてどこかにアップロードする手間が不要でおすすめです。
変換には様々な手段がありますが、
画像をbase64エンコードするツール
https://syncer.jp/base64-encoder
こちらの Web サービスが動作も良く、気の利いたコピー機能を提供してくださるのでおすすめです！
最後に、やっとやりたかったアイコンの設定です。
/* Google 翻訳にて、日本語を英語に */
toolbarbutton[label="bookmarklet_google-translate-ja-to-en"] {
background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABcElEQVQ4jZ2SMWtUURCFn6ygiYmViorCIgtbLNy9c757eTzX4qUI5A/cJlXAEFIIFomgkiZNLFLkB6RYsNBCe8FWsBEEbS1EQhCSQCqxsLG5C9vE9+LAaQbOx5yZKbz3XeAX8AP4nnUs6Uld1xeLpvLedyW97ff785OepJWzAFVVzQALzrkb/wUAZs3sqZltDwaDuaIpAvB1qj/RUfY8O/cEdV1fNrMtSbvOuSsTwCdgPRtXgP2zAKPRaB5YjjHenGS6BbwCVqcAL4DllFKn8QoppU5ZlleLorgwPWZVVTON5jblve+a2UNJj2KM98xsHdjx3ndb/QkwBj7kPX3OV/mW+9daTRFCqCUtAe/NbANYbR2hLMs7wGHWH+AE+ClprW2EB8Cb/HAH3vv7wKaZ7QCzbQBjSS9z9t/AqaTXwDjGeLcRMBwOTdJzSe8kreUn2wshLPZ6vUv/NJvZbUkfgd0QgqWUOmZ2HXgMfHHOlX8B3QSQeDjyLakAAAAASUVORK5CYII=' ) !important;
}
/* Google 翻訳にて、英語をに日本語 */
toolbarbutton[label="bookmarklet_google-translate-en-to-ja"] {
background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jb2Tv0ubYRDHX0ocCsVJsEiHDEqHhOTu+7m3ISLhAf8AF3ETbKfS2UIHh9LBoYV27vS21EXc3XQJdHFzcFHwJ+ggLu3SodDlTQkhRTPYg1uO5z58v8/dZSmliplVJX1y9/mIeAq8i4hlM6tmtwUwARTAoaRtYF/SMdAFilsBfaBXpZLvkt4Cc/96GxF1d39Zq9Ue9QqLwBVwCvwGroGLZrP5bBig1WqNS3ov6WOWUqoAq8CqmVWBS0DAlqSlRqPxRNIBcNyXZ8BP4ObvH0TEN+Bc0i/gCNgAina7/XBQgaRpSZ8jYiEDxty9A3yQtCvpOfAFWMvzfHaYhTzPH5uZAWOZJIAd4E05tgdmNgOsA2fuPnXnSdxblJ5XBrNer0/eFbAiaTMiXvSaga67d0YBvE4pVXo1oBgJ4O7rkqbNrFruy9aoCvaAr+XdFMDh/7Ug6QY46VvnH+7e+QMGaIYRE1OajgAAAABJRU5ErkJggg==' ) !important;
}
base64 形式に変換したアイコンを background-image で背景画像として設定します。
これで完成です！。
期待の効果は！？とまとめ
さて、今回の難関であった、アイコン初期化されないように維持できるかですが…。
「追加のツールと機能」のカスタマイズを開いたり、動かしたりしても全く問題ありませんでした！嬉しい！
実はバージョン「50」以前の Bookmark Favicon Changer を使用時でも、稀に初期化されてしまう現象に遭遇しており、何度か設定しなおしたことがありました。
その度にクリックでアイコンをひとつひとつ登録していく操作が面倒くさいと思っていたのですが、今回の件でまとめて解決したので、悩まされましたが最終的に満足いく結果になりました。よかったです。
最後に私の右上の完成はこんな感じです。なぜか最近恒例の GIF。
無駄に、 transition ( 変形を滑らかにするプロパティ ) をつけて楽しめるようにしました！
以上です。みなさんも、
よき firefox & ブックマークレット ライフを！！
- ちょっと古くなりましたが、過去に紹介したアドオンとブックマークレットの記事
-
[MacBook Pro Late 2016]
私は休みの日は専ら（休みの日ではなくても）、音楽を聴いて過ごしているのですが、
もう、これだけでも行く気満々なのに出演者が凄いのです！！！
ということで、斉藤和義さん好きの友達を誘い行ってきました。↓こんな感じで
見事、前方パイプ椅子席（3,000席限定）が当選したので意気揚々と二の丸広場に着いたら、見渡す限りの人！人！人！
友達とも「かっこよかったねぇ～～～」「ねぇ～～」←この言葉を家に着くまで何回も言ってました（笑）
↑開演前です
もちろんスタレビのライブは熱気に包まれており、老若男女が踊り歌い楽しいステージでした！
個人的な感想として、私がスタレビの中で一番好きな歌も歌ってくださいましたし
今回2つのイベントに参加しましたが、どちらも本当に行ってよかった！！！と心から思いました。
現地の方に来るのが一週間遅い！と言われてしまいました 笑
CSSのプロパティーでいうと
この場合 
ストライプやドット柄、市松模様のパターンは画像で対応していましたが、CSSで表現可能と分かったのでブラウザの対応は確認しながら最近は使っています。
ちっちゃくて可愛いトイカメラの「HOLGA」で〜す
みなさん、元気でっか？ 笑ってまっか？
私も一緒に祭たいったい！という事で熊本から大阪に来ました！わはは！
開会式では商店街のおばあちゃんによる「テープカット」ならぬ「ふんどしカット」で始まり
参加者が集められ行われる「人並べの儀式」（選ばれなかったので写真には写っておりません泣）
「飛び入りステージ太平洋」ではパフォーマンスなどが行われ
土俵では最終日のフィナーレに「UFOを呼ぶ儀式」が行われていました。（残念ながら自分はタイミングを逃し見に行くことができず・・残念）
地獄似顔絵を描くアーティストの方や、即席で合唱団を作るパフォーマー、珍しい小物を作ってる人、物々交換屋さん、本の良さを広める為にやってきた女の子、ドラッククイーンな占い師さん、セルフ料金でオリジナルの服を販売してる方、オリジナルゆるキャラ、アジアのアイドル。。。などなど
人の温かさを感じ、たくさん笑いとても楽しかったです。大阪よかですね。祭ってよかですね。
なんと面白そうなハウスでしょう！
くまモンが！！大阪で見ると知人に会ったような安心感。 熊本の神くまモンに見守られながら眠りにつきました。
ほかの場所もカラフルで元気が出てくるような宿泊地でした。オススメです！
気づいた事はガチャポンがめちゃめちゃ多い！あと安い自販機が多いのが衝撃的でした。。
ゲーセンが古く懐かしい感じはとても惹かれました（やった事ないけれど）。
