(2013年08月)ちょっと倒錯気味な、ただの日記です。(^^;)これはやばいと思われた場合は、お早めに閲覧を中止されることをお勧め致します。写真をたくさん並べて掲載しているようなページで、キャプションを画像の下部や周辺に置きたくない場合......という状況はあんまり思い浮かびませんが(^_^;)、まあ、デザイン的な都合から、ページ上には画像だけを並べたくて、他の余計なものは置きたくない......と思うことはあるかもしれません。そんな状況でも、特定の写真に興味を持った人に対しては、その写真が何なのかの補足説明的な情報を伝えたい、という場合もあるでしょう。Aboutで解説しました。(^_^;;;......自分でも「そんな状況ってあるのか?」と思ってしまいますが。^^;まあ、デザイン・機能的におもしろいので、キャプションの存在がそれほど重要ではない画像に対して使ってみると良いんじゃないかと思います。ホームページ作成)デフォルトでは画像に対する「キャプション」を非表示にしておいて、マウスが載ったときにだけ「半透明のキャプション」が《スライドするアニメーション効果》と共に、画像に重なって表示される......という表示効果の作り方の解説です。CSSで装飾し、jQueryを使って動作を作ります。jQueryを使うので、スクリプト部分のソースは驚くほど短いです。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合に良さそうな気がします。サンプルページを用意していますので、そのページのHTMLソース(CSSもJavaScriptも全部含んでいます)をご覧になりながら解説を読み進めると、分かりやすいと思います。[コンピュータ]スティーブ・バルマーがCEOになったのって、もう13年も前なのか先日、MicrosoftのCEOスティーブ・バルマーが1年以内に退任することを発表しました。Newsweek今週号にもその記事が1ページ載っていたんですが......ビル・ゲイツの後を引き継いでスティーブ・バルマーがCEOになったのって、もう13年も前(2000年)の話なんですね!(爆)ビル・ゲイツの引退計画(CEO職を退いてCSA職を新設。その後徐々に引退していくという話)はPC雑誌でもずいぶん話題だったのでよく覚えています。あれからそんなに経っていたとは。記事中の以下の部分を読んで驚きました。^^;;;バルマーがCEOに就任した00年当時、アメリカの大統領はビル・クリントンだった。アップルは売れないパソコンメーカーで、グーグルは創業から2年足らずの新興企業。フェイスブックのマーク・ザッカーバーグはまだ15歳だった。Appleのカラフルな画面一体型マシンiMacがなぜか大学図書館に導入されて驚いたり、Googleのあまりのシンプルなトップページに(どうやって儲けるんだろうかと)驚いたりしていたのを思い出しました。^^;SNSはまだなくて、PC-VANやニフティサーブのようなパソコン通信ネットワークのWEB版が辛うじて残ってた頃ですよね。検索エンジンもまだ豊富に種類がありましたねえ......。^^;あああ、もうあの頃から13年も経ってるのか......。Aboutというサイトを立ち上げるから記事を書きませんか?」と誘われたのもあの頃だな......。(オープンは2001年だけど準備は2000年からやっていました。)そして、私が某R大を辞めて、某K大に編入したのも、2000年。(^_^;;;あの頃は、大学内では、パソコンよりもワークステーションの方が多かったような気が......。大量のPCが導入され始めた頃だったような気がします。自宅でのインターネット常時接続は、まだそれほど一般的(安価)ではなく、うちはISDN回線でTA(ターミナルアダプタ)を使って通信してた気がします。うーん、さすがに13年経つと結構いろいろ変わっていますね......。項目数(列数)の多い表は、行や列を間違えずに読むのが大変です。Excelのような表計算ソフトには、列の[表示・非表示]を切り替える機能があります。いう機能があれば、閲覧者自身が「自分にとって必要な列」だけを選択できるので便利です。それと同じような機能を、ウェブ上に掲載した表(テーブル)でも実現するjQueryを使ったスクリプト「MediaTable」があります。Aboutで公開しました。ホームページ作成)このスクリプトを使えば、描画領域の幅に応じて、自動的に(優先度の低い順に)列を削減して表示してくれたり、閲覧者に「列名一覧」のチェックボックスを提供して、自由に各列の[表示・非表示]が切り替えられるようになります。大きな表を掲載する際には特に便利です。[交通機関]キタノザウルスJR北新地駅にあるキタノザウルスの写真を撮ってきました。たしかに、米俵を背負っています。(^_^;;;大阪駅から地下街を突っ切って、大阪駅前第1ビルと第2ビルの間を通って、北新地駅にぶち当たる位置にあります。(^_^;)北新地駅の西改札口と東改札口の中間あたり。待ち合わせ用のオブジェとして作られたらしいですけども、ここで待ち合わせている人を目撃したことはありません。(^_^;;;まあ、普段通るとしても通過するだけなので、じっくり観察したことはないんですが。閑散としてるんですよね......。人通りが少ないわけではないと思うんですけども。ここって基本的に人々が「通り過ぎる」だけな気がします。[交通機関]JR北新地駅の壁に「稲」が貼ってある理由はJR北新地駅(地下駅)の壁には、「稲」のオブジェが壁にたくさん貼ってあります。疑問に思っていました。(下記写真参照)さすがに、こんな大阪市のど真ん中に田んぼはないと思うので。1~3ビル」に隣接する位置の地下にあります。思っていたところ、「この堂島に米市があったから」だと、Twitter経由で教えて頂きました。それで北新地で稲のオブジェなんですねえ。そんなのがあったんですねえ。18.堂島米市場(どうじまこめいちば)跡碑(@大阪市)北新地駅に居る「キタノザウルス」が米俵を背負っているのも同様の理由によるとのこと。あれ、キタノザウルスっていうのか......!(爆)たしかに、あります。JR北新地駅の、両改札口の中間くらいのところに、怪獣っぽいオブジェが。(^_^;;;「キタノザウルス」という名前だとは知りませんでしたが、その存在自体はそこを通過するたびに目撃して知っていました。いつも正面をちらりと目撃する程度だったので、背後は見たことがなかったんですが。背中側の画像を確認したところ、たしかに小さな米俵を背負っています。^^;というわけで、JR北新地駅の米(稲)の理由は、江戸時代の米市場でした。先頭車両付近の壁に貼ってあるカラーバーコードっぽい物体の意味は?ところで、最初に気になったのは、「稲」の方ではなく、「色の付いたバーコード」みたいなオブジェの方でした。JR北新地駅のホームドアの向こう側にある壁に、なんかカラーのバーコードのような謎のオブジェが4つ貼ってあるんですよね。これが何なのか、ずっと気になっていたんです。^^;※下記写真の黄色矢印のところ。壁にあるので、JRの列車運行上で何かを意味するものなんでしょうか?(^_^;)デザインにしては、なんか唐突ですし、意味も分かりませんし......。(^_^;;;気になります!......と書いていたら、mixi経由で教えて頂きました。あれは、「停止目標」だそうです。ホームドアとか柵のある駅に設置されているんだとか。ホームドアの位置にぴったり停止させるために運転士が確認するための目標なんですね......!たしかに、ホームドアがあると、停止位置がずれすぎると困りますからねえ。[雑誌]原発事故でアメリカ政府が何をどう考えたか(それがどう報道されたか)という記事がNewsweek今週号は、表紙は「エジプト非常事態」一色ですが、中程に8ページほど福島原発事故の記事が「フクシマ神話の歪められた真実」と題して載っていました。アメリカ政府が、何を決断するために誰を集めてどう考えたのか日米のメディアが、どう大げさに報道するに至ったのかという話。アメリカ政府が誰を招集して何を検討させたのか、とかが順番に語られています。アメリカ側が何をどう考えて実行したのかという情報は、ほとんど読んだことがなかったので、ちょっと興味深かったです。たしかに、アメリカとしては、在日米軍基地が東京近辺にもあるわけで、彼らを避難させる必要があるかどうかを第一に検討する必要がありますよね。大げさに報道される原因になったのは、誰のどういう発言(誰が出したどんなシナリオ)だったのかといった点が書いてあって、なるほどと思いました。8ページなので、そんなに長いわけではない記事ですが。[交通機関]なぜ、宝ヅカ......。touchで地図を見てみました。Mapでは「宝ヅカ市」になっていました。(爆)なぜ、宝ヅカ......。(^_^;;;iOS6に標準で入っているApple側のMapアプリでは、普通に「宝塚市」でしたけども。最近のレンタルサーバだと、独自ドメイン名でアクセスする際に、サブドメイン名として「www」を付けても付けなくても同じウェブサイトにアクセスできる仕様になっていることが多い気がします。同じ内容が表示される感じ。この状態のまま放置しておくと、検索エンジン側に同じサイトが2つあると認識されてしまう可能性があります。実害はありませんが、SEO面をとても気にするとか、URLを元にして何かを実行するようなスクリプトを書いているとか、wwwの有無を統一したい場合があります。ウェブサーバがApacheの場合で、mod_rewriteモジュール(=URLを指定した条件で書き換えるためのモジュール)が使用可能であれば、.htaccessファイルに以下の3行を含めておくことで、「wwwあり」に統一できます。閲覧者が、wwwサブドメインを省略したURLでアクセスしてきても、強制的にwwwサブドメインを付加したURLに転送できます。[R=301,L]1行目は、URLの書き換えを行うよ、という宣言みたいなもの。(必ずこのまま記述)2行目の「RewriteCond」は、調べる対象と、条件(一致パターン)の指定。3行目の「RewriteRule」は、URLの書き換え内容の指定。「%{HTTP_HOST}」で、ホスト名を調べる対象に指定しています。「^(example\.com)(:80)?」で、一致パターンを指定しています。「^」とか「?」の各記号は正規表現です。ここでの意味をざっくり言うと、「ホスト名が先頭から『example.com』で始まっていて、その後に『:80』(※)が0個または1個ある場合」となります。「[NC]」は、大文字・小文字を区別しない指定です。※「:80」というのは、ポート番号です。通常、ウェブの場合は80番が使われます。いうURLでもアクセスできます。普通は80番なので、「:80」という記述は省略されますが。「:8080」みたいなポート番号を指定する必要のあるウェブとかがあります。※ただ、ここでは「(:80)?」の記述は別に存在しなくても問題ない気がしますが......。ポート番号付きのURLでアクセスしても、(ブラウザ側の仕様なのかウェブサーバ側の仕様なのか分かりませんが、ポート番号は自動的に省略されるので......。http://www.example.com/$1」で、あらゆるアクセス(URL)の先頭に「http://www.example.com/」を加えています。ちなみに、ここを「http://example.com/」にすれば『wwwなし』のURLに統一できます。「[R=301,L]」の「R=301」は、HTTPステータスコード301で転送するという意味です。Permanently」を返した上で移動します。「[R=301,L]」の「L」は、そこでURLの書き換え処理を終了するという指示です。それ以後にURLの書き換え処理が続けて記述されているときに、それらによってさらにURLが変化してしまうのを防ぐために書いておきます。いうわけで、サブドメイン名「www」を付加するURLに統一する方法でした。[コミック]「あさりちゃん」、とうとう第99巻!小学館から出ているコミック「あさりちゃん」が、とうとう第99巻!小学館の学習雑誌(小学○年生)での連載開始は、なんと1978年!私が小学生の頃にアニメが放送されていた気がします。あさりもタタミも全く学年が上がることなく、30年以上も続いているとは。(笑)アニメ「あさりちゃん」のOP曲の歌詞は、今でも朧気に記憶があります。今考えると結構すごい歌詞でしたよね。(笑)いや、明確には覚えていないので、そんなんだったかどうかはハッキリとは言えませんけども、たしかそんな感じだったような気が。(笑)昔はペットの犬は居なかった(と思う)んですけども、いつの間にか増えてたんですよね。^^;いつ飼うことになったのかな。その話は読んでいない(と思う)んですが、飼うきっかけになった話もどこかにあったんですかね?99巻全部を所有しているわけではありません。^^;「あさりちゃん」は巻と巻で特に話が繋がっていないので、たまたま書店で目撃して「ああ、懐かしいな」と思ったときにだけ買っています。前回購入したのは本棚によると第86巻だったようです。^^;小学生時代に購入した第11巻とかと合わせて、うちにあるのはだいたい16~7冊くらい。次はとうとう第100巻!この長期連載マンガですが、小学館の学習雑誌休刊に伴って(?)、コミック第100巻で終了することになっているのだそうな。この「あさりちゃん」コミックを見て気付いたんですが、帯がないんですよね。いえば、昔はコミックに帯ってありませんでしたよね。表紙も、完全に「帯がない」前提のデザインですし......。(^_^;;;いつ頃から帯って付けられるようになったのかな。今ググってみたら、小学館サイト内に、「あさりちゃん」の公式ページがありました。作者の絵日記が読めます。XPを使っていると、起動直後にCPU使用率100%状態がずっと続いて非常に動作が重たくなることがあります。タスクマネージャで、CPUを占有しているプロセスを見ると、svchost.exeが該当します。svchost.exeは、各種サービスを実行する際に使われる汎用のプログラムなので、こいつが重たいからといって、こいつ自身に原因があるわけではありません。svchost.exeの重たいプロセスをここから強制終了させればCPU使用率は下がりますが、次にWindowsを起動した際にはまたsvchost.exeのプロセスが重たくなりますから(一時的にでもCPU使用率を下げて急ぎの作業をしたい場合には有効ですが)、根本的な解決にはなりません。Explorer」というツールを使います。すると、重たいsvchost.exeは、wuauclt.exeというプログラムで利用されていることが分かります。Updateのプログラムのようです。このプログラムが延々と重たい処理を行っちゃうみたいですね。Update」の場合だと、ここまで重たくはならないようですが。Update」に戻せば、svchost.exeによって重たくなるのを防げるようです。その方法だと、アップデートが自動では手に入らなくなってしまいますが。MicrosoftコミュニティにあるQ&Aには、以下のようなことが書かれていました。更新プログラムを確認する際にパフォーマンスが低下するという報告をお客様から受けました。メモリ使用量が増加し、システムパフォーマンスの低下につながることが判明いたしました。私が使っているXPマシンは、メモリ1.5GBなんですけども、同様の問題が発生します。Update」を利用する限り避けられなさそうですね......。wuauclt.exeが必要な作業をすべて終えるまでしばらくPCを放ったらかしにすることができるなら、その後はCPU使用率は下がるので、問題はないんですけども。「更新の準備ができました」的なバルーンが表示されるタイミングで、CPU使用率も下がります。Windowsの起動直後から放っとけばいいんですけども、モバイル環境で利用している場合だと、バッテリの消費量が激しくなってしまうので、若干困ります。自動アップデートをOFFにして、すべてのアップデートを手動でやるとか、もしくは、PCを放ったらかしにできるタイミングまで、一時的に自動アップデート機能を無効にするとかですかね......。できる簡単な対策というと。Pro以上で動作しているXPモードとか)でも発生します。APIを使うと、簡単にQRコードを生成できます。これは、指定のURLにパラメータを付け加えてリクエスト(アクセス)すれば良いだけなので、使うのはとても簡単です。TypeのMTCanonicalURL独自タグを使って以下のように書けば、そのページのURLを含んだQRコードが動的に作成(表示)できます。http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=<$MTCanonicalURL$>たぶん、こういう使い方を想定して、URLだけで得られるようになっているんですよね......?(^_^;;;パラメータの「chs=150x150」の部分は、得られるQRコードの縦横サイズ(ピクセル)です。QRコードは正方形なので、縦横で同サイズを指定します。長方形を指定すれば単に余白が増えるだけで問題はありませんけども。(^_^;)このURLを、img要素のsrc属性に指定すれば、簡単に「今表示しているページのURLを含んだQRコード」を表示させられます。alt="QRコード">あまりにもアクセスが多いようなら、最初にAPI経由で得たQRコード(PNG画像)をサーバ内にキャッシュ(例えばパス名をファイル名に変換して画像ファイルとして保存しておくとか)しておいて、「まだ1度も生成していないURL」だけをAPI経由で生成するようにして、「既に作成済みのURL」に関してはキャッシュファイルを読むようにするとかしておくと良いかも知れません。(GoogleのAPIは無料サービスなので、いつ終了したり制限が掛けられたりするか分かりませんしね。Aboutで書いています。使い方とか、パラメータの指定方法とか、(QRコード内への)日本語文字の含め方とかは、そちらもご参照下さい。Typeで生成しているブログ(やウェブページ)の全ページに、別々のアクセスカウンタを設置する簡単な方法はないもんかな......と考えました。アクセスカウンタCGIは、たいていCGI本体を1つ設置するだけで(一意のパラメータを付加することで)複数ページにカウンタを提供できます。Typeで生成している場合、ページを一意に特定できるようなIDを出力する機能(タグ)を使ってアクセスカウンタ用のパラメータを作れば、テンプレート内にCGIの呼び出しを1行書いておくだけで、すべてのページで別々のアクセスカウントが可能でしょう。Typeで生成するページはブログエントリ以外にもありますよね。アーカイブページとか、トップページとか、ブログに含まない独自のウェブページとか。あらゆるページに対して一意に識別できるような何かが必要です。いうタグの存在に気付きました。href="<$MTCanonicalURL$>">......のようにして使われるためのもののようです。使うことで(<$MTCanonicalURL$>タグを使うことなく)link要素自体も含めて出力可能ですから、あまり直接<$MTCanonicalURL$>を使うことはないような気もしますが。これで得られるURLを、そのままアクセスカウンタCGIのパラメータに付加してしまえば良さそうです。有無を区別せずにURLを生成してくれます。アクセスされても、「http://example.com/」という文字列を出力してくれます。これで、アクセスされたURLによって、(本来は同じページなのに)異なるアクセスカウンタを提供してしまうのを防げます。使っていまして、以下のように記述しました。※細かいパラメータは省略していますが。alt="アクセスカウンタ">この1行を、独立したウェブページのHTMLを生成するすべてのテンプレート(=メインページとか、月別アーカイブとか、個別エントリとか)に書いておくことで、すべてのページに別々のアクセスカウンタを設置できました。......と、ちょっと思いました。STARBUCKS」経由で送られてくる各種Eチケットは、画面に表示されているチケットを印刷するか、もしくは携帯端末の画面に表示させてレジで提示することで使えます。touchにチケットを表示させて使ってみたんですが、使い終わったら、チケットの表示画面が変化する仕様になっていて、ちょっと驚きました。(下図参照)チケットの画面って、ただ「紙チケットのイメージ」と、「レジに通す用のバーコード」がブラウザ上に表示されているだけだったんですが。(^_^;)そんな動的に情報を更新できるようなページには見えなかったんですけども。^^;;;携帯端末用は、PC用とは異なるページレイアウトになっているので、これはレスポンシブ・ウェブデザインとかじゃなくて、何か携帯端末に対応した特殊なページにでもなっていたんでしょうかね......?(そこまでは使う前には確認しませんでした。^^;)レジを通して決済(無料だけど)が行われた瞬間に、その情報を携帯端末側が取得できるような仕組みになっているのかな......。すると、このチケット画面では、常に(たとえば1秒間隔とか)でサーバに対して、「使用されたかどうか?」の情報を取得しに行ってるってことでしょうか......?次のチケットを入手したときにはソースを読んでみよう......。[日々の生活]噂では7月は45日くらいまであるらしいので、今日は7月32日のはず......!ネット上から聞こえてくる噂では7月は45日くらいまであるらしいです。いうわけで、今日は7月32日(木)でございます。Geographic」今月号の表紙は、タイトルロゴが半分も見えていません......。ここまで隠れるのも珍しい気がします。(下記写真参照)価格はいつも通り980円です。Geographicは定期購読の割引率が結構高いので、さっさと定期購読にすべきですかね......。写真背後の「日経サイエンス」は1,400円です。́・ω・`)こちらは定期購読でも、ほとんど安くならないんですよね......。「know」ハヤカワ文庫JAの新刊「know」を読了しました。(下記写真参照)お、おもしろかった......。おもしろかった!おもしろかったです。......読書感想文は昔から非常に苦手だったので、他に言いようがないんですが。8月ああ、8月1日ですよ。半透明のキャプションを、スライドさせて画像に重ねて表示する方法スティーブ・バルマーがCEOになったのって、もう13年も前なのかウェブ上の表でも、指定の列を非表示にして、必要な列だけを表示できるようにする方法キタノザウルスJR北新地駅の壁に「稲」が貼ってある理由は原発事故でアメリカ政府が何をどう考えたか(それがどう報道されたか)という記事がなぜ、宝ヅカ......。著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。下記の電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。プロ顔負けのホームページ作成術2005年10月12日成美堂出版刊ご興味のある本がありましたら、ぜひ読んでみて下さい!にししのお勧め■ハクメイとミコチ▲夢のある独特の世界観と雰囲気がとても魅力的な物語です。■メイドインアビス▲好奇心旺盛な少女とロボット少年が大洞穴の底を目指して突き下る物語。冒険的な夢ある世界でキャラクターも可愛いのに、容赦ないシリアス展開で目が離せません。半分くらい溶け込んでいる妖怪の日常ほのぼの話。黒菜(主人公の猫娘)の天真爛漫ぶりが良いです。■乙嫁語り▲さらっと読み流したら申し訳ないくらい細かーいところまで描き込まれていて感心してしまう19世紀中央アジアが舞台の物語。マンガなので絵と文字だけなのに、なぜか音も聞こえてくる気がします。■3月のライオン▲中学生棋士マンガ。主人公はもちろん、周囲の人々の一所懸命さと、将棋界の背景がすごくおもしろいです。将棋を知らなくても間違いなく楽しめますよ!■アルテ▲16世紀フィレンツェ画家お嬢マンガ。職業画家になりたい(没落しそうな貴族の?)お嬢様アルテが家を飛び出し、偏屈画家青年の徒弟になって頑張る話。■空想科学X▲シュールなギャグが最高におもしろい科学は関係ないマンガ。毎話毎話笑えるんだけども、笑いの多くがシュールというのがすごく特徴的。盛大に(私から)惜しまれつつ5巻完結。■この美術部には問題がある!▲高校美術部まんが。かわいおもしろいです。■もやしもん▲菌が見える少年が主人公の酒造り農大マンガ。濃いキャラクターばかりで、おもしろいです。細いので1行をピンポイントに示せる上、鉛筆で文字も書ける愛用文房具です。■FRINGE(フリンジ)▲アメリカのSFサスペンスドラマ。FBI捜査官がフリンジサイエンス(非主流科学)科学者と共に説明不能な事件を捜査する話。