隠居のパソコン備忘録：スマホのスクロール・イメージをブログに掲載する
Masajii's Brog で、オーナーの Masajii さんから、【読書日記「くらしのこよみ」】に、スマホのスクロール・イメージを掲載できないかとの相談を受けた。
今まで画像を横方向にスクロールしながら見るというようなことは試したことはない。興味を引くテーマなので、挑戦してみることにした。
平凡社が提供するスマホ向け無料アプリ【くらしのこよみ】は、このようなトライをしてみるには格好の材料である。
少し、時間を要する作業であるがなんとか実現できるので、備忘録として記録しておきたい。
スクロールバーを右端へ移動してから左へ動かしてください。
- 対象となるスマホの画面をキャプチャーする。（キャプチャーの方法は、【隠居のスマートフォン備忘録:（14）Xperia acro の画面をキャプチャーする 】に記載している。）例題のアプリ「くらしのこよみ」では、26画面(1画面は480x854ピクセルl)をキャプチャーした。
- キャプチャーした画像を、Photoshop Elements を使って横に結合していく。この作業が、Photoshop を使い慣れていないせいもあって大変だった。
先ず、「ファイル」⇒「新規」⇒「白紙ファイル」で、ファイル名を Kooyomi-1 とでもし、横幅2400pixel x 854pixel と指定した。キャプチャー画面を5枚 横に結合するスペースである。横幅、もっと大きくできるが、画像が小さくなり、結合する境界の判定が難しくなる。 - 次に、結合するキャプチャー画面を「ファイル」⇒「開く」と、画面下のプロジェクト・エリアに表示される。これを先の白紙ファイルにドラッグ＆ドロップして、右端から埋めていく。スマホのスクロールでキャプチャーした画像は、必ずしもきちんと 480pixel となっていないので、ドラッグで重ねあわせ調整して画面を作っていく。連結した画面ができたら、右フレームの下方の「レイヤー」欄に画像名が表示されるので、連結した画像名を選択して右クリックすると出てくるセレクトボックスで、「レイヤー結合」を選択すると、下のスクリーンショットのように、結合した一つのファイルとなる。結合したファイルは、別名で保存しておく。
- このようにして、28の画面をグループ（今回の場合、6グループ）に分けて、画像ファイルを保存しておく。その後、6グループのファイルを結合する。この作業は、要するに、キャプチャーしたスマホのスクロール画面を一つの横長画像にする作業である。結果は、12480x854pixel の画像（jpegとした）となる。
- 出来上がった画像を、そのままのおおきさでブログに掲載するには、縦幅が大きすぎるので、Picasa のエキスポートを使って、縦・横幅を40%くらいに縮小した。なお、Picasa を使うと結合した結果、はみ出る白紙部分を削除する切り抜きが楽である。
- 今回のメインは、画像を横にスクロールするために、HTML <iframe> タグを使ったことである。
上の出来上がりサンプルのためのコードは、次のようになる。
<iframe> タグを使うと、上の Photoshop のスクリーンショットのように、横長の画像をスクロールバー付きで、横幅を抑えて表示できる。<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>
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)