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

Presented by Nishishi via Movable Type. Last Updated: 2018/02/19. 10:39:09.

Sakura Scope (2014年12月)

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

title属性値の内容を「吹き出し」の形で表示させる方法

吹き出しツールチップが簡単に作れるPowerTipの使い方ウェブページ上のリンクやボタンなどに、吹き出し型のツールチップ(バルーンヘルプ)を超簡単に付加できるスクリプト「PowerTip」の使い方を、All Aboutで解説しました。

吹き出しツールチップが簡単に作れるPowerTipの使い方(@All About ホームページ作成)

このスクリプトを読み込ませておくと、リンクやボタンなど(に限りらず何の要素でもいけますが)のtitle属性値に指定した内容が、その要素の上にマウスポインタを載せたときに、(一般的なツールチップに代わって)図のような見栄えの良い「吹き出し」の形で表示されるようになります。

HTMLに書いておく内容は、一般的なツールチップを表示させたい際と同じtitle属性を使えば良いだけなのがとても楽です。
スクリプト自体もとても軽量ですし、必要な記述量も少ないので、かなり簡単に使えるスクリプトだと思います。デザインも配色も複数用意されていますし。
ぜひ、試してみて下さい!

ちなみに、All Abuotで公開する2014年分の記事はこれで最後です。
2015年1月は、たぶん過去記事の修正版を3本公開してから、1月分の新規記事2本を公開することになると思います。

サイズの異なるBOXを隙間なくタイル状(レンガ状)に自動整列

Masonryでサイズの異なるBOXを隙間なくタイル状に整列横幅や高さの異なる複数のボックスを、できるだけ無駄な隙間ができないように自動的に詰めて配置してくれるスクリプト「Masonry」の使い方をAll Aboutで(再)解説しました。

閲覧者のウインドウ幅に合わせて配置を自動調整してくれるので、レスポンシブWEBデザイン採用ページでも便利に活用できます。
特に、メインの機能とは関係ないんですが、閲覧者がウインドウ幅を変えたときに、各ボックスがアニメーションして再配置される様が見ていて楽しいです。(^_^;)

なかなか便利で面白いので、ぜひ使ってみて下さい。スクリプトのサイズはそんなに大きくはありませんし、使うために必要な記述量も少ないので気軽に使えます。

Masonryでサイズの異なるBOXを隙間なくタイル状に整列(All About ホームページ作成)

同ネタは2年前にも書きました。ただ、当時は「jQuery Masonry」という名称のjQueryプラグインとしての提供だったので、jQueryとの併用が必要でした。
が、いつの間にかjQuery不要の単独スクリプトになって、使い方もより簡単になっていたので、解説を1から書き直したのでした。
(記事のURLは以前と同じです。)

シュタインズ・ゲート、名作!

シュタインズ・ゲート Blu-ray BOX570日くらい前に友人から「シュタインズ・ゲート」のBlu-ray BOXを借りていたんですが、今年の10月にようやく(PCでの)Blu-ray再生環境が整ったので(^_^;)視聴開始していました。(Blu-rayレコーダは以前からあったんですが、自室で見るにはPCにBlu-rayドライブが必要だったので。)
で、第1話を観てから68日経った先日、ようやく全25話(TV放送24話+SP1話)を見終わりました。
いやあ、名作ですね! シュタインズ・ゲート!
観て良かった……!
TVで放送されていたのは2011年なんですねえ。当時は全然存在を知りませんでした。「輪るピングドラム」の放送開始直前くらいに終わったのかな。

Blu-ray BOXに付属してるブックレットにあった用語解説はとても役に立ちました。あれは「シュタインズ・ゲート」の視聴に必須ですね。(^_^;)
ネタバレを防ぐべく、Blu-rayを1枚見終える度に、ちょっとずつ読み進みました。
そのおかげで、内容がよく理解できました。

しっかし、このTVシリーズは完全に「紅莉栖ルート」なんですね?
TVシリーズの最終話(第24話)では、まあその後どうなるか分からないっぽい感じで終わっていましたけども、オマケのSP(25話目)を見ると、完全に紅莉栖ルートですし。
原作のゲーム版がどういう結末を用意しているのかは全然知らないんですが、「まゆりルート」とかもあるんでしょうか?
まゆしぃがいいなー。(^_^;)

原作であるゲームにも興味はあるんですが、さすがにゲームはやる暇がなさすぎて手を出せません。テキストを読み進めるタイプのゲームは特に時間がかかりますからね……。
昔はこの手のゲームをやる時間はいくらでもあった気がするんですけども、あの頃はどうやって時間を捻出していたのかな……。(^_^;;;
ゲームは、Xbox版→Windows版→PSP版→iOS版といろんな環境でリリースされたんですねえ。

※このTVシリーズを見るよりも前に、劇場版は映画館で友人と一緒に観ていました。(そのときにBlu-ray BOXを借りたんですが。) さすがにあの映画は、TVシリーズを見ていない状態ではさっぱり理解できなかったので、どんな映画だったのかが思い出せません……。(^_^;) TVシリーズを見終わった今、もっかい見れば楽しめるんだと思うんですけども。^^;;;

(追記) STEINS;GATE 無限遠点のアークライト

STEINS;GATE 無限遠点のアークライト

まゆり視点で話が進むというコミカライズ「STEINS;GATE 無限遠点のアークライト」(発売されたばかり)を買いまして、早速読みました。
まゆり視点のコミカライズというか、アニメの最終話(第24話)とその直前に差し挟まれるストーリーみたいな感じでした。
23.5話みたいな。
オカリンが紅莉栖を助けるのに一度失敗した後、なんで、まゆりが強気にオカリンを張り叩いたのか、そこに至る理由が描かれている感じでした。
なるほど、まゆりがこんな苦労をしていたとは……、という話。
これ1冊で完結です。
これもすごく良かった……。(※ただ、シュタインズ・ゲートのストーリーを知らない状態で読むと意味が分からないはずなので、知っていることが前提の話ですが。^^;)

コミカライズやノベライズでは、紅莉栖視点で進む話とか、何かもっといろいろ出ているんですかね?
とりあえず、本編6年後の世界を描くという小説版が来年1月に出るらしいので、あとはそれを楽しみにします。

シュタインズ・ゲート DVD/Blu-ray(@Amazon.co.jp)

閲覧するたびに表示画像を変化させる方法とか

複数の画像リンクからランダムに1つを表示する方法All Aboutで7~11年前に書いた記事2本を全面改訂して公開しました。
さすがに、そんなにも年数が経っていると、書いてある内容も結構古くなってしまうので。(そういう記事はたくさんありますけども。^^;)

▼『アクセスされるたびに画像をランダムに切り替える方法
ウェブページが表示されるたびに、画像リストの中からランダムに1つの画像が選択されて表示される仕組みの作り方を解説。

▼『複数の画像リンクからランダムに1つを表示する方法
(先の記事をベースにして)ウェブページが表示されるたびに、ランダムに選ばれた画像が1つ表示され、クリックするとその画像に対応するページに移動できるような機能の作り方を解説。

1本目の記事は、単にランダムに画像を1つ表示するだけの方法です。2本目の記事は、ランダムに画像を表示した上で、その画像をクリック可能(リンク先は自由)にする方法です。2本目の記事は1本目の内容も含んでいるので、2本目を読むだけでもいいんですが。(^_^;) ただ、1本目の内容の方が記事が短くて内容もシンプルです。画像をリンクにする必要がなければ、1本目の記事を参照して頂く方が、楽に実践できる気がします。

興味がおありでしたら覗いてみて下さい~。

シュールな笑いがおもしろい「空想科学X」が第5巻で完結しちゃった

空想科学X(第5巻)シュールなギャグが最高におもしろかった「空想科学X」がとうとう完結してしまった……!
毎話毎話笑えるんですけども、その笑いの多くがシュールな笑いというのが、ものすごく特徴的だったと思います。
この第5巻が最終巻だということはオビの表記でも分かっていましたけども、まあ、予想していましたが、具体的に何がどう完結したということはなく、ただ連載が終わった、という感じです。(笑) 別にこのまま第6巻が出ても何もおかしくなさそうな。^^;
最後は何もかも片付けられてしまったということなんでしょうかね?(^_^;)
結局、コトちゃんは何歳だったんだろう……?^^;

冒頭と巻末のおまけマンガがまた、シュールなSFマンガでした。
良いです。こういうの好きです。(笑)

ゴルフでチャーシューメンとか、どれくらいの年代まで分かるんだろ?(^_^;)
キャディさんに当たり前のように湯豆腐を要求して(意味が分からなさすぎる)、キャディさんも当然のように湯豆腐を持ってくる1コマだけでずいぶん笑いました。(^_^;;;
いろんな場面で思いますが、この作者(saxyunさん)の頭の中はどうなってんだろうなー、と思うことしきりです。^^;

「空想科学X」の連載は9年間だったんですねえ。
9年で5冊。だいたい2年に1冊くらいのペースですか。
ゆるめいつ」の連載もありましたしね。^^;

ああ、終わってしまったのは惜しいなあ~。
大変おもしろいマンガでした。お勧めです。

「空想科学X」:saxyun著/電撃コミックスEX(@Amazon.co.jp)

ハッシュタグ機能を搭載したニュースクリップCGI

Fumy News Clipper2ミニブログツールとしても利用可能なニュースクリップCGI「Fumy News Clipper 2」をフリーCGIコーナーで公開・配布していますが、これに「タグ機能(ハッシュタグ機能)」を搭載した最新版Ver 2.3.4を公開しました。

Twitterと同じように、半角「#」記号を使ってタグを表します。ただし、実装を簡単にするために(というか上手い正規表現が思いつかなかったので)、タグ名の表記は以下のような多段仕様になっています。

  • タグ名が半角英数字だけで構成される場合は、 #Tag123 のような感じでそのまま書ける。
  • タグ名に半角英数字以外の文字(日本語などの多バイト文字や記号・空白など)を使う場合は #[漢字名] のように半角角括弧で囲むのが必須。(この仕様の副作用として、 #[Space In Tag] のように空白文字も含められます。)
  • タグの前後には空白(または改行)が必須。(※行頭なら前方の空白は不要、行末なら後方の空白は不要。)複数のタグを連続して書く場合は、最低1つの半角空白文字で区切る必要がある。

ハッシュタグそのものは、クリップの表示時には自動でリンクになり、クリックすると「同種タグのクリップ」だけが連続表示されます。タグの場合は、大文字と小文字は区別しない方が使いやすいかな?と思って、タグの検索表示時には、(半角英字に限っては)大文字と小文字は区別せずに表示する仕様にしてあります。

一部、カタカナをタグ名に使った場合で、タグをクリックしても「1件も見つからない」と表示されてしまう不具合があります。たぶん、原因は文字コード(SHIFT-JIS)の処理にあるんだとは思うんですけども。いい加減、SHIFT-JISはやめてUTF-8にすべきだよな……とは思うんですけどもね。(^_^;)
昔から使って下さっている方々に簡単にアップデートして頂くには、文字コードは変えない方がいいだろうな……とも思って、今のところそのままなんですが。

なお、今回のアップグレードは、本体CGIファイルである hb.cgi だけを上書きすれば完了します。(新しいCSSを使いたい場合は、CSSファイルもアップロードして下さい。)

というわけで、1ヶ月半ぶりくらいのバージョンアップでした。

EmEditorを手動で最新版にしないと自動アップデート機能は復活しない

EmEditor Ver 14.6.1そういえばEmEditorのアップデートが最近ないな……と思っていたら、Emurasoftから「EmEditor更新に関する重要なお知らせ」というアナウンスメールが届きました。
以前にあった(自動アップデート機能を悪用した)セキュリティの問題に対処するため、サーバ上からは(古いバージョンの)更新定義ファイルを削除しているらしいです。なので、手動で最新版にアップグレードして欲しいとのこと。一向にアップデートの案内が表示されないのは、そういう事情だったんですね。単にアップデート版が公開されていないだけかと思っていました。(^_^;;;
というわけで、早速アップグレード。
いつの間にかVer 14.6.1 になってたんですねえ。(インストール前は、Ver 14.5.3 でした。)
https://jp.emeditor.com/

最新版にすれば、セキュリティを強化した自動アップデート機能が使えるようです。
(私は自動アップデートは設定しておらず、アップデートの存在を自動チェックさせるだけで、自動インストールはしない設定でずっと使っています。だから前のセキュリティ問題でも被害はなかったわけですが。)

EmEditor更新チェッカーのカスタマイズ

ちなみに、EmEditorの自動更新チェック機能は、メニューの「ヘルプ」→「更新チェッカーのカスタマイズ」で設定できます。

モバイルフレンドリーテストを試してみた

先月半ばに、Googleが「モバイルフレンドリーテスト」というツールを公開しました。
どうやら今後、Googleの検索結果には、「そのページがモバイル環境でもうまく閲覧できるかどうか」を示す『スマホ対応』というラベルが付加されるようになるらしいです。
自身のサイトが「モバイル環境に対応していると(Googleから)判断されるかどうか」をチェックできるツールが、モバイルフレンドリーテストです。

モバイルフレンドリーテストの結果

早速、使ってみました。下図はその結果。実際にスマートフォンで閲覧した場合にどう見えるのか(Google側がどう見ているのか)が図でも確認できて分かりやすいです。

モバイルフレンドリーテスト結果

■モバイルフレンドリーな場合

レスポンシブWebデザインを採用して、モバイルファーストでCSSを設計したうちのサイトのトップページは、「問題ありません。 このページはモバイル フレンドリーです。」という評価になっています。

■モバイルフレンドリーではない場合

でも、viewportを設定しただけで、他に何も対策をしていない他のページ(例えばこのブログ)では、「モバイル フレンドリーではありません」と表示されます。(^_^;;;
その際、モバイル対応ではないと判断された理由も(日本語で)表示されるので、「モバイルに気を遣ったつもりだけどうまくいっていない」という場合には特に、それらの情報が参考になるのではないかと思います。

最近は、モバイル環境からのアクセスも増えたので、うちの個人サイトもレスポンシブWebデザインを全面採用するよう修正していきたいんですけどもね。なかなかそこまでの時間は確保できていなくて、今のところはトップページだけがレスポンシブWebデザインになっております。(^_^;;;

モバイル対応も兼ねる「レスポンシブWebデザイン」とは

ちなみに、「レスポンシブWebデザインって何?」という方々向けに、All Aboutで「レスポンシブ・ウェブデザインの簡単な作り方」という記事を過去に公開していますので、そちらもぜひどうぞ。
ただ、レスポンシブWebデザインを作るには、「モバイルファースト」なCSSの記述方法を採用するとすごく楽だと思うので(※うちのサイトでもトップページ(だけ^^;)はそのような書き方になっています)、その方法も今後記事にしたいな……と思っています。(先の記事にはそこまでは書いていません。)

リンクを「角丸タブ」っぽく見えるようにスタイルシートで装飾する方法

角の丸い「タブ」をHTMLとCSSで作る方法リンクをスタイルシートで装飾して「角の丸いタブ」に見せるデザインの作り方を解説した記事を、6年ぶりに全面改訂しました。

角の丸い「タブ」をHTMLとCSSで作る方法(@All About ホームページ作成)

ul要素とli要素を使って作成したリストにリンクを含ませておき、「リストを横方向に並べ」て「リンクをタブっぽく装飾する」方法で、タブに見えるデザインを作ります。
2008年に記事を書いたときには、タブっぽく見せる目的で画像を駆使する方法を解説しました。でも、今なら画像などは一切使わずに、CSSだけで充分表示可能ですから、CSSだけで作成する方法に改訂しました。

この記事で解説している内容は、タブっぽく見せる装飾を作る方法までです。
実際にタブとして機能させるには、JavaScriptなどを併用する必要があります。それはそれで別記事として既に書いているので、併せて参照頂くと「タブ機能」が作れます。

この記事の続編として、実際にこの記事で解説した「タブデザインの作成方法」を使って、タブ機能を作る方法を解説しても良いのですが……、それが可能かどうかは、この記事がどれくらい読まれるか次第な気がします。(^_^;;;

ATOKナントカ変換サービスを試してみた

ATOK 2014 for WindowsパワーアップモジュールPCを使っておりましたら、JUSTSYSTEMのアップデータに、「ATOK 2014 for Windowsパワーアップモジュール」というアップデートが来たと表示されました。中身は、不具合の修正のほか、先日発表された「ATOKナントカ変換サービス」の実装があるようです。

「ATOKナントカ変換サービス」は、名称の先頭が正確に思い出せない名詞でも、思い出せない部分を「なんとか」の文字で置き換えることで、推測候補に出してくれる機能です。
公式案内ページによると、「なんとかひるず」で「六本木ヒルズ/虎ノ門ヒルズ/ビバリーヒルズ……」とかが推測候補に出てくると解説されています。

ATOKナントカ変換サービス
▲ATOKナントカ変換サービス

ここで候補に出てくる順序はどういう規則なんでしょうかね?
世間での使用頻度とか出現頻度とかそういう情報を得ていて、そこから判断しているんだろうか? まあ、漢字変換の候補も(履歴や文脈などの別情報がない場合には)そういう情報を元に表示しているのでしょうから、そういうことなのかな?

名称の『後方』が思い出せないのなら、従来の推測候補表示機能で対処可能だけど

「名称の一部分が思い出せない」という場合には、『前方』が思い出せない場合と、『後方』が思い出せない場合があります。このうち、名称の『後方』が思い出せない場合であれば、従来から存在する推測候補機能(補完機能)で対処できていました。

たとえば、「ごーるでん」まで入力して(変換はせずにそのまま)放置すると、「ゴールデンウィーク」が推測候補として表示されます。そこで、[TAB]キーを押せば、「ゴールデンタイム」・「ゴールデンバット」・「ゴールデンボンバー」……などが推測候補としてずらずらと出てきます。
(この機能は、かなり昔のATOKから存在していました。標準機能です。)

でも、この推測候補は、名称の前方が分からない場合には使いようがなかったのですよね。
それを可能にしたのが、今回の「ATOKナントカ変換」のようです。
わざわざ「なんとか」と4文字を入力しなくても、「?」記号を打つだけでも代用できるようです。推測候補の表示機能の拡張としては、便利そうです。

しかし……!

ATOKナントカ変換機能を使うには、ATOK Passportが必要

ATOKの標準機能としては提供されないんですね……。なんでかな?
推測候補をその都度ネットから探してくる仕様なんでしょうか?(ATOKでは、ネット上から省入力候補を追加したり、ネット上にある辞書で意味を調べる機能など、一部のネット活用機能は、オプションとして有料サービスになっています。)

というわけで、この機能を使うには、ATOK Passportの取得(契約)が必要なわけです……が、

ATOKクラウドサービス:ATOKナントカ変換先のATOK修正パッチ(パワーアップモジュール)を導入してみたところ、再起動後に右図のような「ATOKナントカ変換」のセットアップ画面が現れました。
ここから新規の契約を促そうとしているのかな……?と思ったんですが、どうやらそうでもないようです。そのままセットアップを継続すると、「ATOKナントカ変換」も使えるようになりました。

なんでかな……と考えて、思い出しました。
そういえば、ATOKのパッケージ購入者には独自の権利があったのでしたね。

ATOK最新版パッケージの購入者には、期間限定のATOK Passportがある

ATOK2014そういえば、ATOKの最新版パッケージには、1年間の期間限定で「ATOK Passport」を利用できる権利が付いていたのでした。
ATOKは毎年2月頃に新パッケージ(バージョンアップ)が販売されるので、「ATOK Passport」を1年間限定で提供することで、継続的なバージョンアップを促そうという戦略でしょうかね。^^;

私は今年の2月にATOK2014にバージョンアップさせたので、ATOK Passportの権利をまだ保有しています。(2月で切れますが)
というわけで、今なら何の追加契約もなしに「ATOKナントカ変換サービス」も利用可能なのでした。

なんとかさくら

早速、「ATOKナントカ変換」機能を使って、試しに『なんとかさくら』の入力で推測候補を出してみました。それが下図。

なんとかさくら

「カードキャプターさくら」は10番目、「木之本桜」は18番目に出てきました。^^;
「丹下桜」は12番目。他に、「真宮寺さくら」とか、「あさくら」なんてのもあります。
さすがに、「あさくら」の「あ」を思い出せないってことはないと思いますが……。(^_^;;;

なかなか面白そうな機能でした。

絶好調な「僕らはみんな河合荘」第6巻

うーむ、今月に入ってから、ネタがなさすぎて、読んだコミックの話しかしていない……。(^_^;;;

僕らはみんな河合荘6「僕らはみんな河合荘」第6巻を読了。新刊は9ヶ月ぶりです。
あぁ、これは絶好調だな……と思いました。(作者が?^^;)
帰宅途中の電車内で読んでいたんですが、笑えて仕方がありません。(土曜日の夜だったので、電車は空いていました)

ツネコの荒しっぷりが酷い……。(笑)
後輩の女の子(椎名)が、あまり波乱の要因にはならないっぽくて良かった。(^_^;)
そして、先輩はかわいい。いい感じに距離が縮まってきて良かったなー。^^;
第7巻も早く読みたい。次も9ヶ月後……ですかね?

僕らはみんな河合荘(@Amazon.co.jp)

桐山が言ったぁ!(3月のライオン10)

3月のライオン101年2ヶ月ぶりの新刊「3月のライオン」第10巻を読了。
今巻10話収録の10話目(Chapter.104「約束」)で、
桐山~~ッ! よく言った……ッ!
と叫ばずにはいられない!(^_^;)
いやあ、言っちゃった。そんなこと言っちゃった。
まさかこんなことを言い出すとは予想しませんでした。(^_^;)
ほぼその直後で今巻が終わっているので、続きがとても気になります!

ようやく10巻。これで「ハチミツとクローバー」に並びましたねえ。
桐山も3年生になって、そろそろ完結が見えてきたのかな……という感じも受けつつ読んだんですけども、今巻最後の3話を読む限りでは、まだまだ波乱はあるんですね(?)。
第11巻も首を長くして待っていたいと思います。

3月のライオン(@Amazon.co.jp)

金田一スピンオフ「金田一少年の小旅行」が笑える^^;

金田一少年の小旅行「金田一少年の事件簿」のスピンオフ、「金田一少年の1泊2日小旅行」を読了。
ギャグマンガです。笑えます。(^_^;)

原作ストーリーは、「ある場所へ行って、事件に巻き込まれて、情報を集めて、解決する」という一連の流れを複数話で描かれるパターンです。なので、スピンオフであるこれも、この1巻を通してどこかに旅行に行く話なのかな……と思ったらそうではありませんでした。
10話収録で、毎話、違う場所に行きます。
具体的には、主に原作側ストーリーで解決された事件のあった場所に旅行します。(^_^;) んで、事件に関わった人とかが、若干残念な感じで登場します。(^_^;)
なので、たぶん、これを読むには、オリジナルの「金田一少年の事件簿」の話(特にキャラクターについて)を知っている方が望ましい気がします。
全話がそうというわけではなく、事件と関係ない場所に行く話もありますけども。学校とか。

この「金田一少年の1泊2日小旅行」が出たのは9月なんですが、発売に気付いたのが遅かったためか、そのときは売り切れていて買えなかったんですよね。で、入手が遅くなって今になったのでした。
次巻も楽しみです。

金田一少年の1泊2日小旅行(@Amazon.co.jp)

七つ屋志のぶの宝石匣

七つ屋志のぶの宝石匣1 (KC KISS/二ノ宮 知子)のだめカンタービレ作者の新刊、「七つ屋志のぶの宝石匣」を読了しました。
宝石と質屋の話。
おもしろいです。
最終ページのオチに笑いました。お前も同じこと考えとんのかい!と。(^_^;)

オビには、「『のだめ』の次は『宝石×質屋』!?」と書かれてるんですが、オーバークロックの話「87Clockers」はどこに行った?(^_^;;;
あれは版元が違うからか……。

続きも楽しみです。

七つ屋志のぶの宝石匣1 (KC KISS/二ノ宮 知子)(@Amazon.co.jp)

2014年12月
  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 31      

他の月

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