Atelierで“iframe”タグの付いているブログ記事

2012年8月13日

隠居のパソコン備忘録:スマホのスクロール・イメージをブログに掲載する


 Masajii's Brog で、オーナーの Masajii さんから、【読書日記「くらしのこよみ」】に、スマホのスクロール・イメージを掲載できないかとの相談を受けた。
 今まで画像を横方向にスクロールしながら見るというようなことは試したことはない。興味を引くテーマなので、挑戦してみることにした。
 平凡社が提供するスマホ向け無料アプリ【くらしのこよみ】は、このようなトライをしてみるには格好の材料である。
 少し、時間を要する作業であるがなんとか実現できるので、備忘録として記録しておきたい。

   
出来上がりサンプル
スマホの画面イメージ
スクロールバーを右端へ移動してから左へ動かしてください。


  1. 対象となるスマホの画面をキャプチャーする。(キャプチャーの方法は、【隠居のスマートフォン備忘録:(14)Xperia acro の画面をキャプチャーする 】に記載している。)例題のアプリ「くらしのこよみ」では、26画面(1画面は480x854ピクセルl)をキャプチャーした。
  2. キャプチャーした画像を、Photoshop Elements を使って横に結合していく。この作業が、Photoshop を使い慣れていないせいもあって大変だった。
     先ず、「ファイル」⇒「新規」⇒「白紙ファイル」で、ファイル名を Kooyomi-1 とでもし、横幅2400pixel x 854pixel と指定した。キャプチャー画面を5枚 横に結合するスペースである。横幅、もっと大きくできるが、画像が小さくなり、結合する境界の判定が難しくなる。
  3. 次に、結合するキャプチャー画面を「ファイル」⇒「開く」と、画面下のプロジェクト・エリアに表示される。これを先の白紙ファイルにドラッグ&ドロップして、右端から埋めていく。スマホのスクロールでキャプチャーした画像は、必ずしもきちんと 480pixel となっていないので、ドラッグで重ねあわせ調整して画面を作っていく。連結した画面ができたら、右フレームの下方の「レイヤー」欄に画像名が表示されるので、連結した画像名を選択して右クリックすると出てくるセレクトボックスで、「レイヤー結合」を選択すると、下のスクリーンショットのように、結合した一つのファイルとなる。結合したファイルは、別名で保存しておく。

  4. このようにして、28の画面をグループ(今回の場合、6グループ)に分けて、画像ファイルを保存しておく。その後、6グループのファイルを結合する。この作業は、要するに、キャプチャーしたスマホのスクロール画面を一つの横長画像にする作業である。結果は、12480x854pixel の画像(jpegとした)となる。
  5. 出来上がった画像を、そのままのおおきさでブログに掲載するには、縦幅が大きすぎるので、Picasa のエキスポートを使って、縦・横幅を40%くらいに縮小した。なお、Picasa を使うと結合した結果、はみ出る白紙部分を削除する切り抜きが楽である。
  6. 今回のメインは、画像を横にスクロールするために、HTML <iframe> タグを使ったことである。
    上の出来上がりサンプルのためのコードは、次のようになる。
    <center><caption><strong>スマホの画面イメージ</strong><br /><small>スクロールバーを右端へ移動してから左へ動かしてください。</small></caption></center>
    <center>
    <iframe frameborder="1" scroling="yes" width="250" height="400" src="http://n-shuhei.net/atelier/screenshot/1-koyomi-c2.jpg" /></iframe>
    </center>
    
    <iframe> タグを使うと、上の Photoshop のスクリーンショットのように、横長の画像をスクロールバー付きで、横幅を抑えて表示できる。
 このような方法を使えば、スクロールしてつかうアプリの紹介は楽になるが、いまのところ紹介すべきアプリは思い当たらない。

2006年11月20日

改訂:早春の鹿児島:Google Maps API に litebox を使う

 今年の3月に掲載した旅行記に使用した地図が Google の利用規約に触れるのではないかと気になりエントリーから削除していた。 新たに、 Google Maps API を利用して地図を全面的に作り変えてみた。この API の利用は、このようなエントリーを編集するには革命的なソフトであるが、ただ不満は今年の7月から使っている litebox-1.0 がうまく動作しないことであった。いろいろと試行してみたが、11月12日のエントリーに litebox-1.0 の JavaScript を取り入れてみるとうまく動作するようになった。下の地図のサイドバーのチェックボックスをクリックするとその地点にマーカーが現れる。をクリックすると写真が lightbox 的に現れるので試してみてください。理屈的にはよく分かっていませんが、このエントリーに使っている iframe のソース head 部分で、lightbox.ccs を呼んでくるときに、次のように media="screen" を加えると上手くいきました。ご関心がある方は、 iframe 内のソースを参照ください。
<link rel="stylesheet" href="http://xxxxxxxxxxxx/litebox/css/lightbox.css" type="text/css" media="screen"/> 


 高校の修学旅行以来行ったことのなかった鹿児島に、2月末の日・月に家内とFlight&Driveした。鹿児島は私にとって47年ぶりであり、家内は初めてである。その当時は修学旅行専用列車で、24時間かかって西鹿児島まで行ったように思う。今回は、大阪空港7:50発に搭乗し、9時30分には空港近くで借りたレンタカーで国道504号線を走り出していた。鹿児島は車の方がバスや列車より便利なのか、空港近くには多くのレンタカー会社が沿道沿いにあり、利用者も多い。確かに、日曜日というのに道は空いており、ゆったりスイスイと走れた。
 昨秋のみちのくと異なり、季節のせいもあるかもしれないが、蘇鉄が街路樹として植えられている沿道の風景はどことなくのんびりとした風情であった。いつものように、細かいルートは決めず、北帰行前のツルを出水に見に行くことと指宿で温泉に入ることだけを最低限の目的にしていた。トラベル雑誌の地図は一応参考にするが、ルートは一般道を走るか高速道路を走るかといった設定だけであとはカーナビ任せである。カーナビのいいところは、おおよその到着地までの時間を教えてくれることである。都会と違って、渋滞が全くといってないから、予想到着時間は、ほぼ正確である。出水までの道(504→328号線)は、どこにでもあるような里山が続く田舎道であった。朝食が早かったので、早い昼食を出水市に入ったところの和風レストランで摂った。食事は家内がいつも地方色がでてリーズナブルなものを求めるので、店を選ぶのがなかなか難しい。この和風レストランで摂った黒豚のカツとじはなかなかであった。
 昼食を摂ったレストランの人の話では、「このごろの暖かさで昨日は数百羽が北帰行をした聞いている。もういないのではないか」というのでがっくりしながら、そこから10数キロ離れたツル観察センターに行ってみるとまだ沢山のナベヅルかマナヅルが、干拓地の田に群れていた。動物園くらいしかツルを見たことはなかったのでこれには驚いた。この地はもともとツルの飛来地だったのだが、麦などをあたえるようになったので、これだけ集まるらしい。ついでに、カラスもワシらしき鳥も餌を求めに来ている。どんよりと曇っていたのと時間が無かったので、4から5羽の群れで飛び立つ北帰行のような良い写真は撮れなかった。(ほんとの理由は技術だが。)出水市のツルの北帰行などの状況については、以下のサイトが詳しい。
http://www.city.izumi.kagoshima.jp/izumi08/izumi44.asp

 今日の宿休暇村指宿までは、東シナ海に面した海岸沿いを市来というところまで南下し、そこから南九州自動車道と指宿スカイラインのルートをカーナビに設定した。どんよりと曇った天候のせいもあるが、海岸沿いの道路は単調であった。それより、鉄道マニアの孫がいつもDVDで見ている肥薩オレンジ鉄道の線路がこの道路沿いに走っており、2時間ほどの間にオレンジ色の単車両の列車に2回出会った。旅行に出ていても、孫の話になるのは、やっぱりオジイチャン・オバアチャンなんですね。道の駅「阿久根」で求めた焼き芋と薩摩揚げは名物にうまいものなしというものの結構美味しく食した。  カーナビでは、南九州自動車道は市来からであったが、手前の串木野というところまで延びてきていた。最近の道路行政のせいか、それよりも北へ伸ばす計画だったらしく橋脚の上に道路ができあがった状態で工事を中断しているようであった。
 指宿スカイラインは、錦江湾を望む山を切り開いて造られた道であり、途中に造られたいくつかの展望台では錦江湾(鹿児島湾)から写真のように桜島が見渡せる。
スカイラインから指宿に下る途中にはかの知覧がある。朝からの運転に少し疲れていたこともあり、宿にいって早く風呂に入りビールを飲みたかったこともあって、翌日に訪問することにした。
 休暇村は乳頭温泉郷でもそうであったが、その観光地の中心的な場所から離れている。休暇村指宿は、開設されたのはいつか分からないが随分古ぼけていた。砂風呂もどうも天然ではないようだ。(入っていないので分からないが) リーズナブルな料金から言って、こんなもんでしょうと家内からは窘められた。それでも、波の音を聞きながらの露天風呂は格別であった。お湯を少し口に含んでみると海の近くの温泉らしく、ナトリュームの味がした。食事は、選択していた黒豚のしゃぶしゃぶとオプションのキビナゴの刺身を食べた。量は随分多かったが、やわらかくてしつこくなく全部食べてしまった。錦江湾にあがる朝日がきれいとのインフォメーションがあったので、日の出を期待したが、残念ながら曇天の雲で見ることはできなかった。
 2日目のカーナビ設定は、開聞岳→枕崎→知覧武家屋敷跡→鹿児島中央駅→空港という順にした。朝早くは曇っていたが、日が高くなるにつれて快晴となった。
 菜の花畑から開聞岳(薩摩富士)を見るというスポットを求めてうろうろしたが、結局見つからなかった。見つからなかったが、被写体はどちらもしっかり撮ったので合成写真にした。頭の中では、マルチデイメンジョンでこのような景色を見ている。
 開聞岳から枕崎に向かう国道226号線(南薩摩路)沿いに有名な「さつま白波」の工場があった。昔からこんなに綺麗な工場だったのだろうか。芋焼酎ブームに乗って、きっと見学者が多いのだと思う。
 枕崎漁港にある「お魚センター」では、カツオやマグロの腹皮、鰹節が現地の産物といった感じであったが、あとは大阪のスーパーでも手にはいるようなものばかりであった。八戸の八食センターにはとても及ばない。漁港に泊まっている船の上で、魚を発送するのかコンテナの魚を移し換えていた。高級料亭にでも持って行くのであろうか、ずいぶん大きなヒラメや鯛が見えた。
 岸壁に駐車している間に車内は高温となっており、走り出すと24度に設定したエアコンから冷風が流れてきた。
 枕崎から知覧への道は、ゆるやかな丘陵地帯に茶畑が続いている。なんとなくのんびりとした豊かさを感じる地域である。このようなところで、若き青年たちは死を覚悟しながら過ごしていたのだろうか。特攻平和会館が近づくにつれ、沿道の歩道には石の灯篭が整然と並んでいた。美しい町並みである。
 知覧の武家屋敷跡は、秋田角館の屋敷跡と異なって、7軒の比較的小さな庭園が公開されている。この7軒を含む街道沿いの垣根は美しく手入れがされていた。それぞれの庭園には春を告げる花々が咲いていた。一軒の屋敷にはお嬢さんがお住まいなのか、縁側に続く部屋にはひな人形が飾られていた。
 武家屋敷の庭園で撮った花は、別のエントリーに、Flash Album で掲載した。
 帰りの搭乗時間までは時間があったので、遅い昼食がてら鹿児島中央駅に立ち寄った。北の地域と違って南では、ラーメンの味もあっさり味が多いようである。アミュプラザ・ビルの地下1階のラーメン店をでたすぐそばに、カメラに収めたいポスターがあった。
 大阪伊丹空港に帰ってくると寒い風が吹いており、ああ、まだ冬なんだと季節を思い出させてくれた。1泊の旅行ながら、一足早い春を感じることができた旅行であった。