風 山 堂

(foussin's diary)

はてなブログで JavaScript のスライド表示

前回のスライド表示のソース(要点のみ)：

<p>
<!-- ここに画像を表示(0.JPG は初期値の画像) -->
<img name="hiyo_dori_slide"
    src="ｈｔｔｐ://domain.jp/usr-name/image/hiyo-slide-550px/0.JPG"
    alt="ヒヨドリ" width="550" height="387">
</p>

<p>…記事…</p>

<!-- 記事本文の最後に JavaScript コードを記述 -->
<script type="text/javascript">
my_num = 0;
function changeImage() {
  ++my_num;
  my_num %= 22;
  document.hiyo_dori_slide.src =
    "ｈｔｔｐ://domain.jp/usr-name/image/hiyo-slide-550px/" +
    my_num + ".JPG";
}
setInterval('changeImage()',1750);
</script>

　はてなブログでこんな風に記述するだけで OK。<head>～</head> 内ではなく、ブログの記事本文に記述しても一応表示できるようだ。これは HTML5 風の記述だが、読み込み時に自動的に xhtml 形式に変換される(はてなブログは xhtml 形式らしい)。

　普通のブログでは head ブロックには記述できないし、onload で読み込むのも無理なので、これはありがたい。はてなブログでは『設定 - 詳細設定』で head ブロック内に追記が可能らしいが、1つの記事のためだけに head に記述するのもどうかな、と思うし…。

　ただ、写真は『はてなフォトライフ』ではなく、自分のホームページ・スペースに置いた。はてなフォトライフの写真を使うとアップロード時にファイル名が変わってしまって面倒臭くなるので。写真は 0.JPG ～ 21.JPG の計22枚を用意している(剰余演算に反映)。

　あと、ご覧の通り html 直入力なので…。そんで、ちゃんと表示できるようになるまでに、けっこう色々とハマったので、それを紹介しておきます。

  • img 要素… id 属性ではなく、name 属性を使う(ブラウザ依存の問題?)
  • img 要素… 画像サイズはブログ本文スペースの width 以内とする
  • img 要素… 画像の拡張子は ".jpg" か ".JPG" かを正確に指定
  • JavaScript… 変数名には - (ハイフン)は使わない(代わりに _ を使う)
  • JavaScript… ブログ内で変数名が衝突しないように気を付ける
  • name属性、id属性… ブログ内で名前が衝突しないように気を付ける

　気を付けるべきは、こんなところかな。これでうちの環境では Firefox、Chrome、Edge で表示確認しました。ちなみに、コードは以下のサイトを参考にしました。↓

◆ スライドショー
我が家のスライドショー
http://www.scollabo.com/banban/java/jvsample_003.html

ベランダに野鳥を呼び込む

f:id:foussin:20151216213359j:plain

01-ベランダ.jpg

　最近のうちのベランダ。色々とゴチャってるが、とりあえず今年もピラカンサ(正確にはピラカンサスというらしい)の実が成った。野生動物にとっては、そろそろ食べ物の乏しい冬が本番を迎える。すると、野鳥たちは虎視眈々とうちのピラカンサを狙い始める……

　で、ベランダに来た野鳥を写真に撮ろうと、自分も毎年、今頃の季節になるとあの手この手を考えるが、どうもうまくいかなかった。それがやっと叶ったので、今回の方法をまとめておく。
　

f:id:foussin:20151216213423j:plain

02-障子.jpg

f:id:foussin:20151216213444j:plain

03-窓越しにベランダをズーミング.jpg

　まず、このように障子の一部分を切り抜き、その周りを墨で塗っておく。こうしておくと、窓の向こう側(外)の適正露出を決め易いし、周辺を黒く塗りつぶしているお陰でガラスに障子紙の白が反射するのを抑えることができる。
　

f:id:foussin:20151216213500j:plain

04-実を食べに来たヒヨドリ.jpg

　写真はこんな感じ。ガラス越しで撮っているので、画質はイマイチだが、窓を開けっぱなしにしてると絶対に鳥は寄ってこないので、これは仕方がない…　あと、カメラを窓に密着させるのも NG。…カメラのレンズは、鳥には捕食者の『目』に見えるらしい。

　窓にマジックミラーのフィルムを貼ったこともあるが、そうすると今度は、ガラスに自分の姿(とカメラ)が反射して写り込んでしまって外の景色が綺麗に撮れなかった。結局、一番うまくいったのは、自分自身は部屋の奥に引っ込んで、ズームレンズでアップにして撮る方法。今回はこれでうまくいった。

　いっぱい撮ったので、JavaScript でスライドを作ってみた。
ヒヨドリ

f:id:foussin:20151217133850j:plain

05-別のヒヨドリ.jpg(おまけ)

　まだ実はたくさん残っているので、今度は動画で撮ってみたい。最近の手ブレ補正(シェイク・リダクション)はかなり優秀で、手持ち撮影でもオートカムを使ってるみたいにスムーズな画質で撮れることが分かったので、いずれ動画撮影を試す予定。

　今回のスライドは JavaScript を使ってます。ソースも紹介しようと思ったけど、それは次回にします。
　

注意：マンションのベランダで野鳥を呼び込むと、近隣から糞害のクレームが来る可能性があるので、マンションではやめた方がいいです。。。

1511 大規模アップデート…? (Windows10)

　昨日、Windows10 で『1511 大規模アップデート』というのがあった。表示しっぱなしのエクスプローラ画面で、C:ドライブでテンポラリ・フォルダが大量に作られたり、削除されたりを繰り返していたのに気付いていたので、今回のアップデートは大がかりなものになりそうだ…という予測はしていたが、まさかここまでとは思わなかった。

f:id:foussin:20151116033146j:plain

アップデート画像.jpg

　ご覧の通り、Windows10 を初めてインストールした時と同じ画面になったので、さすがにビビった。完了までに 1時間ぐらいかかったかな……　Microsoftアカウントを登録してる人は、このことを知ってたのかな(自分は SNS もやってないし)。そろそろ登録する頃合いかも。。。

　アップデートの完了直後は、Firefox が不安定になったり色々あったが、Windowsを再起動したら安定した。が、デフォルトのブラウザが Edge に変更されてたりしたので、Firefox を既定ブラウザに戻した。

　新しい Edge もちょっとは使い易くなったと思ったが、W3C 準拠の表示をまだ実現できていない…というのが自分の感想。実行速度では Edge、Chrome に劣るが、Firefox の html5 対応は、現時点では最高レベルにあると思っている(オープンソースの範疇という制限はあるが＝ロイヤリティが発生する技術には未対応…)。
　

　さて。Windowsアップデートを軽く考えていた自分は、軽率にアップデートを実行してしまった。最近の自分は、久し振りにコーディングのスイッチが入ってゴリゴリとタイピングしていたが、このアップデートで水を差された感じになった。。。

　で、今日はもう諦めた。録画はしたけど、まだ観ていないアニメがたくさんあるので、久し振りに一杯やりながら録画番組を観て、あとは寝てしまおう、と。。。