2014年7月31日(木) 09時29分29秒 [交通機関]

宝塚歌劇団100周年デザインの阪急電車

今月の頭に、久しぶりに阪急電車に乗ったときの写真。たまたま「宝塚歌劇団100周年」デザインの電車でした。外側に宝塚歌劇を模したデザインが追加されていて、車内広告は一切なくて、広告の代わりに宝塚歌劇団の歴史の紹介ポスターが掲示されていました。乗客が多かったので、車内の写真までは撮りませんでしたが。(^_^;;;
この「宝塚歌劇団100周年」デザイン車両は、たしか、阪急電車の各路線に1編成だけ用意されているとかだったような気がします。（違うかも？）

阪急電車の7～10両編成のうち、先頭と最後尾の車両にだけ、側面に大きく宝塚歌劇のデザインが描かれてるんですね。舞台の階段がドアのところに描かれていました。^^; 両端以外の車両の側面には、文字で「宝塚歌劇100周年」と書かれているだけっぽいです。

今年は、宝塚歌劇団ができて100周年、宝塚市ができて60周年なんですねえ。宝塚市ができるよりも40年も早かったのか、宝塚歌劇団。(^_^;)

あと、宝塚大劇場のすぐ傍にある「手塚治虫記念館」が設立20周年らしいです。JR宝塚駅と阪急宝塚駅の間にあるデッキに、「今年は宝塚トリプル記念年」とかなんかそんな感じの垂れ幕が掲げられていた気がします。

2014年7月30日(水) 09時48分23秒 [Web関連]

ウェブページ上で下線として波線を引く方法

文字列を強調したい場合の手段の1つとして、文字の傍に波線を引く、という方法は、手書き文書では頻繁に使われていると思います。
ところが、これまでのウェブ上では、そう簡単には波線を引けなかったんですよね。画像を駆使するとかそんな方法でしか。

ところが、CSS3では、下線の種類として「wavy(波線)」も用意されているんですね。
下線や上線・取り消し線などを引くことのできる、文字列を装飾するためのプロパティとして「text-decoration」プロパティがありますが、CSS3ではこれに「text-decoration-style」という線種を指定するプロパティが増えていまして、ここに値「wavy」を指定すると、波線が引けます。

……というのが仕様ではあるんですが、残念ながら2014年7月の時点では、メジャーなブラウザの内、これに対応しているのはFirefoxだけっぽいです。しかも、まだ、ベンダープレフィックス「-moz-」を付加しないといけません。

……のように各種ベンダープレフィックス付きのCSSソースを記述してみて、今のところ有効だったのは、Firefox向けの「-moz-text-decoration-style: wavy;」だけでした。
表示例を画像で見せると、以下のような感じになります。（Firefox31での表示例）

なお、波線の色だけを変える場合は、text-decoration-colorプロパティを使います。こちらもやはり、実際に使うにはベンダープレフィックスが必要です。
直接このページに表示例を掲載してみると、以下の通りです。（現時点ではFirefoxでないと効果が見えません。）

この、下線として波線が引けるCSS3のプロパティは、すごく需要がありそうな気がします。
ぜひ、他のメジャーブラウザもサポートして欲しいな……。^^;
このネタをスタイルシートTIPSコーナーで使おうかな、と思ったんですけども、現時点ではFirefoxでしか表示できなかったので見送ったのでした。（代わりにここに書いてみました。^^;）

波線って個人的には結構需要があると思うんですけども、未だに対応していないブラウザがこれだけあるってことは、世界的にはあまり優先度が高くない（需要はさほどない）装飾方法なんですかね……？ 実現はさして難しくないと思うので……。
どうなのかな？^^;

あと、なんとなく赤色や青色の波線を見ると、Microsoft Wordが文法ミスを指摘している状況に見えてしまうので、波線を使うときは赤や青以外の色の方がいいかな……と思ったり思わなかったり。(^_^;)

2014年7月27日(日) 09時53分38秒 [仕事]

閲覧者のスクロール位置を判別してボタンの表示・非表示を切り替える方法

閲覧者がページをある程度スクロールした段階で、ウインドウの右下あたりに「トップへ戻る」ボタン（など任意のボックス）を固定表示させるデザインをよく見かけます。
縦方向に長いページで、ページの上部に各種ナビゲーションが存在する場合なんかには便利です。

「ユーザのスクロール量を判断して云々」……というと、なんだか複雑なスクリプトが必要なように感じられるかもしれませんが、jQueryを使えば「今、ページ最上部から何ピクセルほどスクロールした位置なのか」という情報は、たった1行『$(window).scrollTop();』と書くだけで取得できます。
かなり楽で便利です。

そんなjQueryを活用してスクロール位置を判別し、「トップへ戻る」ボタンを動的に表示（または非表示）させる方法を、All Aboutで解説しました。

→『スクロール量に応じてTOPへ戻るボタンを表示する方法』（＠All About ホームページ作成）

ソース中にコメントを記述して分かりやすくしたサンプルページも用意（記事中からリンク）していますので、ぜひ覗いてみて下さい。

jQueryを使っているので、記述するスクリプトのソース量はとても短くなっています。
便利ですね、jQuery。便利すぎて、CSSでちょっと工夫を凝らせば静的に実現可能なことでも、「もうjQueryで動的に処理しちゃえばいいか」と思ってしまうのが危険ではありますが。(^_^;;; （いやまあ別に危険というほどではないんですが、頭を使うのを避けすぎないようにはしないといけません。^^;）

2014年7月20日(日) 10時04分51秒 [仕事]

枠線(border)の背後にも、背景画像(background-image)は描かれている

背景画像(background-image)を指定したボックスに枠線(border)を引いたとき、その「枠線の真下」にも背景画像が描かれている……という仕様って、わりと気付きにくいと思うんですけども、どうなんでしょうかね？ みんな知ってるのかな？(^_^;)
私は、それに気付いたときにちょっと驚きました。
なんとなく「枠線」というと『外側に引かれる』というイメージがあるので、枠線の真下の領域まで、「そのボックスの背景画像」が影響するとは思いませんでした。

で、まあそんな驚きを何か記事のネタにできないかな……と考えて(^_^;)、All Aboutの新記事の題材にしました。

■『枠線の真下に描画される背景画像のずれを調整する方法』（＠All About ホームページ作成）

枠線を半透明にしたり、枠線の線種を点線や二重線にしてみると、隙間などから背後が見えます。そうやって確認すると、「枠線の真下にも、そのボックスの背景画像が描画されている」ということが分かります。

ところが、背景画像の「描画開始位置」は『枠線よりも内側』になる仕様なので、枠線の真下にある背景画像は、ちょっとズレているように見えることがあります。（背景に指定した画像次第ですが。タイル状に繰り返すことが前提の「模様」画像だと、特に違和感はないと思います。）

んで、そのズレを防ぐいくつかの方法として、CSS3で新たに追加されたプロパティ「background-clip」や「background-origin」を使う方法を解説しました。
background-clipプロパティでは背景画像の表示範囲を調整できますし、background-originプロパティでは、背景画像の開始位置を調整できます。

2014年7月19日(土) 10時44分26秒 [小説]

星海社文庫版「ジハード」第4巻を読了

2ヶ月ごとに1冊刊行されている星海社文庫版「ジハード」も第4巻。ここから後半なのかな？（全6巻だったっけ？）
先週あたりに発売された「ジハード 4 神なき瞳に宿る焔」を読了しました。

うおぉ、ヴァレリーの周囲に居る人がどんどん死んでいく……。
いや、もしかしたら「どんどん」という程は多くないのないかも知れませんけども(^_^;)、「ええ!? この人も!?」という感じで、なんか次々と去っちゃったような印象でした。
今後どうなっていくのかな。
気になります。

オビの裏表紙側に書いてあった告知によると、次巻（第5巻）はまた2ヶ月後の9月発売らしいので、それを楽しみにしています。

■『ジハード』定金伸治 Illustration／えいひ（最前線／星海社）
■「ジハード」星海社文庫版（＠Amazon.co.jp）

ところで、著者の定金伸治先生のブログが3月27日を最後に更新されていないんだけど、大丈夫なのかな。(^_^;;; いやまあ、本が出ていることと、あとがきからすると、大丈夫なんだろうけど。^^;

2014年7月13日(日) 09時52分51秒 [雑誌]

フラッシュメモリの仕組みの解説がわかりやすい

今月号のNewton（8月号）に、フラッシュメモリの仕組みを解説した記事が4ページだけ載っていました。
SDカードみたいな小型のチップに数十～数百GBものデータを格納して読み書きできる技術の原理は不思議だったんですけども、こんな仕組みだったんですねえ。
分かりやすい……！

しっかしこの技術、誰が考案したのか知らないけど、よく作ったな……。(^_^;;;
単純に電子を出し入れするだけじゃなくて、「電子が入っているかどうか（＝値が0かどうか）」を確認する仕組みとか。いや、電子を出し入れする仕組みもすごいんだけど。

実際に値を記録する部分（＝電子の有無で0か1かを表す部分）を作るシリコン半導体で作られた小部屋は、16×16×30nm（ナノメートル）。
ナノは「10^-9」(10億分の1)の単位。(小数で書くと、1nm＝0.000000001m)
ミリは「10^-3」(千分の1)なので、ナノをミリに直すと10^-6ですから、1辺16nm（ナノメートル）＝0.000016mm（ミリメートル）ですね。
よく製造できるもんだな……。(^_^;;;

「細長い金属の板」と、「細長い半導体の板」を直角に交差させて（他に絶縁体とかも合わせて）作られるので、1辺16nmの小部屋を1つ1つ製造するわけではないですが。それでも、そんな極小サイズの板を均等に並べる必要があるわけで。

この製造技術も感心するんですけども、やっぱり一番すごいと思うのは、こう設計すれば実現できると気付いた人。(^_^;;;
どうやって考え出したんだ……。

で、SSD、もっと安くなってくれるといいな♪(笑)

■Newton 2014年8月号（＠Amazon.co.jp）
■SDカードの価格, SSDの価格（＠Amazon.co.jp）

2014年7月12日(土) 09時53分09秒 [Web関連]

ブラウザのタブにサイト独自のアイコンを表示したり、未インストールのフォントを使って表示したり

All Aboutで公開している以下の2本の過去記事を数年ぶりに更新。

■『アドレス欄やタブに独自アイコンを表示する』（＠All Aboutホームページ作成）

ブラウザのアドレスバー・タブ・ブックマーク項目などの端に、ウェブサイト独自のアイコン(favicon)を表示させているサイトがよくあります。サイト独特のアイコンがあると、閲覧者の印象に残りやすくなる効果が期待できます。このfavicon(ファビコン)の表示方法と作成方法を解説しています。

こちらは、7年ぶりの改訂。さすがに7年も経つと、ブラウザの環境がかなり異なるので、画面イメージやらブラウザの話題やらが古くなっているので、その辺を修正……しようと思ったんだけど、思った以上の大改造になっちゃって、ほとんど1から書き直したような感じに。(^_^;;;

本当は、もっと5分の1くらいの労力と時間で終了するつもりだったんだけど、ずいぶんとボランティア活動をしてしまった……。（いや、修正分に対する報酬は一応はあるんだけど。新規記事を書くよりは安いので。^^;;;）

■『望みのフォントで表示できる！ウェブフォントの使い方』（＠All Aboutホームページ作成）

CSS3の新機能「ウェブフォント」を使えば、指定フォントがインストールされていない環境でも、ブラウザがフォントファイルをダウンロードして使ってくれるため、望みのフォントで表示させられます。ウェブフォントの使い方を3通り解説しています。

こちらは、2年ぶりの改訂。さほど年数は経ってないものの、最初に紹介しているサービス「Google Web Fonts」が「Google Fonts」に名称変更されてURLも変わっていたり(旧URLにアクセスしてもちゃんと新URLにリダイレクトされるので問題はないんですが)、最後に紹介しているモリサワ運営の「TypeSquare」のサービス体系が変更されていたりしたので、その辺を修正。
画面イメージの大半を作り直しました。

というわけで、せっかく更新したので、興味がおありでしたら覗いてみて下さい。(^_^;;;