その、写真なるもの

それは元号的なアレっすね

「JIN-仁-」づいていて、元号的なソレ。

坂本龍馬の写真と綾瀬はるかの台詞

何かつぅと。「南方仁がタイムスリップしたのは「文久2年(1862年)」」なわけだね。で、劇中では「その、写真なるもの」と、綾瀬はるか演ずる橘咲が言うわけだ。

あら? 坂本龍馬の写真、あったよな? と思って。

てなことを考えてたら、「元号的なソレ」を更に「自分のためだけに便利に」したくなった:
gengo_v2

タイムスリップしたその年、なんだな、「龍馬さん」が肖像写真をお撮りになったがは。

してみるに、綾瀬はるか演ずる橘咲の言う「その、写真なるもの」という台詞は、時代考証的には「絶妙に微妙」な時期、なのだろうねぇ。

日本人の「識字率、なるもの」は江戸時代から今の今まで世界一高いそうで、つまりは、「瓦版」のようなメディアに対する民衆の「理解度」は大人では限りなく100%に近く、ということは「写真」の存在も、案外民衆は早くから知っていたのではないか、という想像もしてはいるけれど、軽く wikipedia 読んでるくらいでは、ここいらの「実のところ」はよくわからない。

技術ネタの方

つまりは、元号視覚化と何かの説明を並べたくなったのです。ブラウザのウィンドウを「いいあんばいのサイズに」並べるのはダル過ぎますでしょ。

全体は python で作ってますが、その種明かしというかは、気が向いたときにします。これはこれでネタとして面白いので。むしろ今回の技術的なネタとしては、

  • スクロールで動かない iframe
  • テキストボックス入力に反応して iframe の src を変更する

の方ね。gengo_v2.htmlのソースの表示をしてもらえれば中身はわかるはずですけど、一応。こんなことしてます:

 1 <!DOCTYPE html>
 2 <html lang="ja" dir="ltr" class="client-nojs">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 5 <script src="http://hhsprings.pinoko.jp/site-hhs/wp-includes/js/jquery/jquery.js">
 6 </script>
 7 <script>
 8 jQuery(function($) {
 9     $.fn.syncroll_a = function() {
10         return this.each(function() {
11             var o = $(this);
12             var container = $(window).scroll(function() {
13                 o.css({
14                     top: container.scrollTop(),
15                     left: $(window).width() - $('#outer').width()
16                 })
17             })
18         })
19     };
20     $('#outer').syncroll_a();
21     $(document).ready(function() {
22         $('#outer').css({
23             left: $(window).width() - $('#content').width() - 30,
24             height: $(window).height() - 150,
25         });
26         $('#content').css({
27             height: $('#outer').height() - $('#addressbar').height()
28         })
29         $('#addressbar').css({
30             width: $('#content').width(),
31         })
32         $('#addressbar').on('change', function() {
33             $('#content').attr('src', $('#addressbar').val());
34         });
35     });
36 })
37 </script>
38 <style>
39 #outer {
40     position: absolute;
41     top: 0;
42 }
43 #addressbar, #content {
44     margin: 0.5em;
45 }
46 </style>
47 </head>
48 
49 <body>
50 <!-- ここに svg。これは省略  -->
51 
52 <div id="outer">
53 
54 <input type="text" id="addressbar"/>
55 <iframe width="700" id="content"/>
56 </div>
57 
58 </body>
59 </html>