にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2019/07/15. 17:19:45.

Sakura Scope (2014年06月)

ちょっと倒錯気味な、ただの日記です。(^^;)
これはやばいと思われた場合は、お早めに閲覧を中止されることをお勧め致します。

ブラウザの1画面単位で大きくスクロールするタイプのページ作成方法

1画面ずつスクロールして進むウェブページを簡単作成ブラウザの画面全体に文字や画像を大きく配置して、「1画面ずつスクロールして見せる」デザインを使ったウェブページを最近よく見かけます。
特に、GoogleとかAppleとかMicrosoftとか、企業の製品紹介サイトなどで頻繁に見かける気がします。
単純に「1画面単位でスクロールしていく」デザインであれば、小さなjQueryスクリプトを用意して、短いCSSソースを記述するだけで、わりと簡単に作成できます。

というわけで、そんな「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを作成する方法を、All Aboutで解説しました。

1画面ずつスクロールして進むウェブページを簡単作成(@All About ホームページ作成)

簡単に作れますので、ぜひ試してみて下さい。
記事中でも必要なソースを掲載して解説していますが、シンプルなHTMLソースで作成したサンプルページも用意しています。
ソースの内容を把握しやすいように、極力シンプルにして、コメントも付加したソースにしました。サンプルページのソースも参照しつつ解説を読むと、分かりやすいのではないかと思います。

「人類は衰退しました」第9巻を読了。完結!

「人類は衰退しました」第9巻ガガガ文庫から出ている小説「人類は衰退しました」が、とうとう完結! 完結!
この小説、最初は牧歌的な衰退世界を舞台にした、人類と妖精さんとのゆるゆる不思議日常小説だと思っていたんですけども、終わってみると中身は結構SF小説だった気がします。^^;
工場の廃墟っぽいとこをさまよった巻あたりから、なんとなくこれは実はSF小説なんだなと思った気が。月まで行ったのは今回だけですけども。(^_^;)

さて、最終巻もおもしろかったです。わたしちゃんの爺さん、まさかこうなるとは。^^;
何かいろいろと背後の解釈を読者にゆだねる感じでしたが、カラー口絵の最初の1枚がちょっと「妖精って何なの?」という解釈を示している感じがしました。(最初にこの絵を見たときは、もしかして「みんなが妖精になってEND」という展開なのかなと思いました。^^;;;)

あと、今巻のどの辺に出てきたか忘れちゃったので具体的なページ番号は分かんないんですが、銀河鉄道の夜のパロで「カムパネルラさんキャンセル」的な妖精さんの発言に笑いました。(笑)
この小説はこういう笑いどころが多数ちりばめられているのも面白かったです。

「人類は衰退しました」本編は完結だけど、まだ短編集が出るっぽい

「人類は衰退しました」本編全巻本棚から抜き出して、「人類は衰退しました」全9巻を並べてみました。
6巻までは最初のイラストレーター(山﨑 透)さん、7巻からは新しいイラストレーター(戸部 淑)さん。今は第1~6巻も新装版になっているので、全巻が新しいイラストになっていますが。
どちらもかわいくて良いです。

で、この第9巻で「完結」ということですけども、それはイコール「最終巻」というわけではないのですね?^^;
あとがきには、今後短編集が1冊出るっぽいことが書かれていましたので楽しみにしています。
それが売れれば、短編集のシリーズとして(?)続刊される的なようなニュアンスのことも書かれていたので、それは要するに「まだ続く」ということなんじゃないのかな?(笑)
ここまで人気でアニメ化もされたシリーズの番外編的な巻が1冊で打ち切られるほど売れないわけないですし。^^;

短編集は「スレイヤーズすぺしゃる」的な感じだと書かれていました。刊行の位置づけがそうなのか、それとも本編とは時間軸的に直接の繋がりはないという意味なのかは分かりませんけども。何にしても、「スレイヤーズすぺしゃる」は(本編完結後に)それだけで結構続きましたよね……。(笑)
そういえば、「スレイヤーズすぺしゃる」は最後どうなったんだっけ。なんとなく「これが最後」という何らかの話は示すことなくフェイドアウトした?という気が。ドラゴンマガジンのリニューアルと同時に終わったとか、なんかそんな感じだったかな? どうなんだったかな?
まあ何にせよ、「人類は衰退しました」もそれくらい長く続いてくれると良いですね。

お勧めですので、未読の方はぜひどうぞ。

◆『人類は衰退しました第9巻(@Amazon.co.jp)

widthプロパティを100%にすると「はみ出す」のを防ぐbox-sizingプロパティ

横幅を100%にした際、親ボックスからはみ出すのを防ぐ

スタイルシートを使って、画像やボックスなどを横幅いっぱいに広げる目的で、widthプロパティの値(=横幅)を「100%」と指定すると、なぜか親ボックスの領域(表示領域)からはみ出してしまう……という現象に遭遇することがあります。
このとき、意図せずはみ出てしまうのは、CSSでのwidth(=横幅)の『解釈』が原因かも知れません。

スタイルシートで細かくデザインしている際などにたまに遭遇する「微妙にはみ出してしまう」現象について、その原因と、box-sizingプロパティを使って解決する方法をAll Aboutで解説しました。

横幅を100%にした際、親ボックスからはみ出すのを防ぐ(@All About ホームページ作成)

この方法を覚えておくと、「微妙にはみ出してしまう」問題に遭遇しても、イライラする頻度を減らせるかも知れません。(^_^;;;

Thunderbird内でURLをクリックしたとき、ブラウザ選択ダイアログを表示する方法

Thunderbirdでのブラウザ選択ダイアログメーラ「Thunderbird」では、メール本文中に記載されたURLをクリックすると、デフォルトのブラウザが起動します。(まあ、Thunderbirdに限らずたいていのメーラの動作はそうですよね。^^;)
私の場合は、用途別にブラウザを使い分けていたり、動作確認用に複数のブラウザで閲覧したいこともあって、デフォルトのブラウザではなく「任意のブラウザ」をその都度選んで開けると便利です。

Thunderbirdでは、「URLをクリックしたときに起動するブラウザ」の設定を変更できるんですが、ただブラウザの種類を変更できるだけではなく、「どのブラウザで開きたいのか?」の選択ダイアログを出すこともできます。右図のように。
このように設定しておくと便利です。

というわけで、

Thunderbirdのオプションで、連携ブラウザの設定を変更する方法

以下に『Thunderbirdでメール本文内のURLをクリックしたときに、ブラウザの選択ダイアログを出す』方法の操作手順を記しておきます。
なお、選択ダイアログを出すのではなく、「指定ブラウザが常に起動するよう変更したい」という場合も、同様の手順で設定できます。
(※縮小してある画像はクリックすると原寸で見えます。)

◆1. Thunderbirdのメニューを「ツール」→「オプション」とたどって、オプションウインドウを開きます。

◆2. オプションウインドウのツールバーから「詳細」を選択し、「一般」タブの下部の「高度な設定」欄内にある「設定エディタ」ボタンをクリックします。
Thunderbirdのオプションウインドウ

◆3. 「動作保証対象外になります!」というウインドウが開くので、「細心の注意を払って使用する」ボタンをクリックします。
Thunderbirdのabout:configウインドウ

◆4. 上部の検索欄に「warn-external」と入力してみましょう。すると、いくつかの項目が出てくるはずです。
※「network.protocol-handler.warn-external.http」と全部入力しても構いません。その方がヒットする項目が限定されるので操作ミスを防げる気がします。
Thunderbirdのabout:configで「warn-external」を検索

◆5. ここで、以下の2項目をそれぞれダブルクリックします。

  • network.protocol-handler.warn-external.http
  • network.protocol-handler.warn-external.https

すると、値が「false」から「true」に変わり、項目全体が『変更済み』であることを示すボールドになります。(状態欄も「初期設定値」から「ユーザ設定」に変わります。)
network.protocol-handler.warn-external.httpの値をtrueに変更

◆6. これで設定の変更は完了です。
ウインドウの[×]ボタンを押してabout:configウインドウを閉じ、[OK]ボタンでオプションウインドウも閉じて下さい。

ただ、操作はもう少し必要です。↓

Thunderbirdから呼び出されるブラウザ(の選択肢)を追加する方法

上記の設定操作によって、メール本文内のURLをクリックすると、どのブラウザでURLを閲覧するかの選択ダイアログが表示されるようになります。しかしながら、この段階では、リストにはデフォルトブラウザ(標準ならInternet Explorer)しか表示されません。下図の左側のように。
「選択」ボタンをクリックして、望みのブラウザを必要なだけ登録しましょう。
Thunderbirdのブラウザ選択ダイアログに望みのブラウザを追加

必要なだけブラウザを追加できます。このとき、1回でも起動させないと、追加したブラウザがリストに残ってくれない(次回以降にリストに表示されない)ので注意して下さい。ブラウザをリストに追加するたびに、とりあえず1回は起動させましょう。
なお、http://~ で始まるURLと、 https://~ で始まるURLは、別々に設定する仕様になっています。両方のURLをクリックして、同じ設定をしておくと良いでしょう。

※ブラウザのインストール場所

ブラウザを追加するには、望みのブラウザの実行ファイルを探して選択する必要があります。各ブラウザのインストール先は(お使いの環境によって異なる場合もありますが)だいたい以下の場所にあると思います。

  • Firefox:
    → C:\Program Files\Mozilla Firefox\firefox.exe
  • Chrome:
    → C:\Program Files\Google\Chrome\Application\chrome.exe
  • Opera:
    → C:\Program Files\Opera\launcher.exe

ちなみに、ブラウザの実行ファイルの場所(フルパス)は、スタートメニュー内にあるブラウザの起動アイコン(ショートカットアイコン)を右クリックして、「プロパティ」を選択した後、「リンク先」欄を見るとすぐに分かります。(タスクバーにピン留めしたアイコンではダメ。スタートメニューとかデスクトップにあるアイコンを右クリックしましょう。)

※Thunderbirdから起動されるブラウザを、任意の1種類に固定したい場合

私の場合は、URLをクリックしたときに「ブラウザの選択ダイアログを出したい」ので上記のままで良いのですが、「常に指定のブラウザで表示させたい」方もいらっしゃるでしょう。その場合は、ブラウザの選択ダイアログで、「今後 http リンクは同様に処理する」というチェックボックスにチェックを入れた上で、望みのブラウザで1回起動させればOKです。
次回以降にURLをクリックした際には、選択ダイアログは表示されず、直接、今選んだブラウザで表示されます。

Thunderbirdとの連携ブラウザの設定を変更したい場合

さて、使うブラウザの設定を元に戻したいとか、間違えて設定しちゃったとか、一度Thunderbird上で設定した連携ブラウザの設定を変更したい場合もあるでしょう。
その際は、以下の手順で簡単にブラウザを変更できます。

◆1. Thunderbirdのメニューを「ツール」→「オプション」とたどって、オプションウインドウを開きます。

◆2. オプションウインドウのツールバーから「添付ファイル」を選択し、「受信」タブをクリックします。

◆3. 下図のように、「ファイルの種類」欄に「http」や「https」という項目があるはずです。(注:ブラウザを追加する設定をしていない状態では表示されません!)
ここで、「動作設定」欄をクリックすれば、どのように動作させたいか(どのブラウザを起動したいか)が選択できます。
Thunderbirdのオプションウインドウ「添付ファイル」ページ
なお、図のように「毎回確認する」を選択しておけば、ブラウザの選択ダイアログが表示されるようになります。

◆4. 選択できたら[OK]ボタンでオプションウインドウを閉じましょう。
これで設定変更が完了します。

というわけで、Thunderbirdでメール本文内に記載されたURLをクリックしたときに、ブラウザ選択ダイアログを表示する(or指定のブラウザを起動する)方法でした。
便利!

6月の更新記事とか

ふと気がつくと、10日以上もブログを更新してなかった……。
その間、何もしていなかったわけではなく、CSS TIPSやらJavaScript TIPSやらのコーナーにはネタを投下してはいたんですが。^^;

迫力アニメーション効果で差を付ける! jQeury活用術5選あと、All Aboutでは、jQuery活用記事のまとめ「迫力アニメーション効果で差を付ける! jQeury活用術5選」を公開したり、10年前に公開した記事のアップデートをしたりしていました。

最初に書いてから10年以上も経っていると、読めば読むほど文章を修正したくなってしまって仕方がありません。(^_^;;;
技術面で環境が変化している部分も多々あるので、その辺の修正はすぐに済むんですが。説明の仕方とか、記事の構成とか、内容に直接は関係ない部分も修正したくなってしまいます。(で、実際にそこそこ修正しました。^^; なので、予定していた以上に時間を消費してしまいました……。)

空白文字の記事は、なぜかアクセス数が多いので不思議です。小ネタとして書いてみたような記事で、そんなに閲覧されるとは予想していなかった記事なんですが。^^; みんな、そんなに(ウェブ上での)空白文字の書き方を探しているのか、と。^^;;;

なお、上記のアップデートはオマケのようなもので、6月の新規記事としては、今週と来週で2本書きます。

病院のエスカレータが看板と鎖で封鎖されて数ヶ月……

毎月通院している病院の入り口にあるエスカレータが、鎖と看板で封鎖されて、たぶんもう3~4ヶ月くらいになる気がします。(^_^;)

封鎖されたエスカレータ

この病院は、あらゆる受付や外来診察室が2階にあるので、1階の扉から入ると、目の前にあるエスカレータで2階に上がる必要があります。
敷地が斜面になっているので、奥の駐車場側から入る場合は直接2階に入れたと思いますけども。
多くの利用者は、この正面エスカレータを利用することが前提のデザインになっている建物です。(^_^;;;
でも、今、そのエスカレータ前にバリケードが築かれて(^_^;)、封鎖されています。

エスカレータの封鎖に使われている看板には、以下のように書かれています。

当院では、注意喚起の看板やエレベータへの誘導表示などの対応に努めて参りましたが、依然として転倒事故が減らないため、患者様の安全を第一に考え、当面の間エスカレータを停止させて頂きます。
皆様には大変ご迷惑をおかけしますが、右側のエレベータまたは階段をご利用願います。

エスカレータを避けて奥に入ると、小さなエレベータが1基と、その脇に小さい階段があります。
こんだけでっかいエスカレータがあるのにそれは使えず、奥の小さな階段を使わねばならんとは……。
まあ、別に階段は遠いわけではないので、すごく不便だということはないですが、「階段を使え」というなら、このエスカレータ自体を「階段」として利用させてくれれば済む気がするんですけどね。(^_^;;;
看板だけではなく鎖が巻いてあって、進めなくしてあります。(鎖をくぐれば行けなくはないですが、まあそこまでして使いたいわけではありませんから。^^;)
エスカレータの速度を落とすとか、なんか対応はできなかったんだろか。(^_^;;;

※エスカレータを利用することが前提のデザインなので、受付窓口の配置もエスカレータの正面になっています。階段からだと、受付からは若干離れていることと、他の診察室への導線も設けられていて、初めて来た人や久しぶりに来た人は、一瞬迷いそうな気がします。(^_^;)

なんとなく、転倒した人からの苦情が鬱陶しくて、責任者がブチ切れた結果……という気がしてなりません。(^_^;)

ちなみに、この写真には写っていませんが、手前側には、ものすっごく大きなサイズで「転倒事故多発」と書かれた看板もあります。
たぶん、どんなに近眼でも確実に見えるサイズです。(^_^;)
その看板は、相当以前から置かれていたような気がします。

さて、このエスカレータの稼働が再開される日は来るんでしょうか。

とりあえず、動かさなくてもいいから、階段としては利用させて欲しいです。^^;

マウスポインタの現在位置を「丸枠」で教えてくれる便利機能

マウスポインタの位置を丸枠で教えてくれる「あれ? 今、マウスポインタはどこにあるんだ?」と画面上を探すことはないでしょうか?(^_^;)
特に最近のように画面サイズが大きくなると、マウスポインタの所在が分からなくなる頻度も高くなりそうな気がします。

たいていは、適当にマウスを動かしてみて、画面上でマウスポインタがちらちら動くのを探すと早く見つかります。
が、その方法でもなかなか見つけられないことがあるんですよね。
画面が真っ黒で、表示されている物体がマウスポインタしかなければ簡単に見つかるでしょうけども(^_^;)、画面上にはたいてい複数のウインドウが表示されていますし、そうでなくても壁紙がカラフルだったりしますし。

というわけで、「マウスポインタは今どこにあるんだ!?」と苛立って探すことが多い場合には、お勧めの設定があります。
コントロールパネルから『Ctrlキーを押すとマウスポインタの位置を表示する』にチェックを入れておくとすごく便利です。
この設定をしておくと、キーボードの[Ctrl]キーを押すだけで、マウスポインタの位置を丸枠で教えてくれます。

この設定をした上で、[Ctrl]キーを押すと(正確には押し下げてから『離した瞬間』に)、マウスポインタの周囲に丸枠が現れ、(丸枠が縮む)0.5秒くらいのアニメーションで、マウスポインタの位置を示してくれます。
丸枠がそこそこ大きい上に、アニメーションするので、これで見つけられないことは、まず無いでしょう。(よっぽどデスクトップが広大で、複数のLCDにまたがって表示されているとかでない限り。^^;)

「Ctrlキーを押すとマウスポインタの位置を表示する」設定方法

この「Ctrlキーを押すとマウスポインタの位置を表示する」機能は、コントロールパネルから簡単に設定できます。

  1. まず、「コントロールパネル」を開きます。
    ※たいていは、スタートメニュー内に「コントロールパネル」という項目があります。ない場合は、「すべてのプログラム」→「アクセサリ」→「システムツール」→「コントロールパネル」で開けます。
  2. 次に「マウスのプロパティ」を開きます。
    ※Windows7の場合は、「コントロール パネル」→「ハードウェアとサウンド」→「マウス」と進むと表示できます。
    ※面倒な場合は、コントロールパネルの右上にある検索窓に「マウス」と入力すると、マウスに関連する項目がずらっと表示されるので、『マウスの見やすさ向上』という項目をクリックすると簡単です。
    コントロールパネル「マウスポインターの見やすさ向上」項目
  3. 「マウスのプロパティ」が開いたら、「ポインターオプション」というタブをクリックします。
  4. すると、その下部に、「Ctrlキーを押すとマウスポインタの位置を表示する」という項目がありますから、そこにチェックを入れます。
    「Ctrlキーを押すとマウスポインタの位置を表示する」項目
  5. あとは、「OK」ボタンなどですべてのウインドウを閉じます。

こう設定すると、[Ctrl]キーを押すだけで(押して離すだけで)、マウスポインタの位置が丸枠のアニメーションで示されるようになります。
便利です。

2014年06月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

他の月

--- 当サイト内を検索 ---