1月2012

Galaxy SIIでスクリーンショットを撮りたい!

がびょーん。

スマホ用コーディングどころか、いまだにスマホを使いこなせていない見習です。

自分のスマホでサイトを見ていたら、ニッチもサッチも行かない場面に出くわしました。「たすけてー」とヘルプを出そうにも、的を射ない説明ばかりで相手に苦境の様子が伝わりません。とりあえず、自分のスマホの画面を送って、様子を分かってもらおうと、スクリーンショットを撮ろうと思います。

GalaxySIIの外観とボタンの位置

GalaxySIIの外観とボタンの位置

しかぁし、スマホにはPrint Screenキーがない!

ということで、見習のスマホ、Galaxy SII(SC-02C)でスクリーンショットを撮り、パソコンに取り込む方法です。

作業内容は、

  1. スクリーンショットを撮影する
  2. 撮った画像をパソコンに転送する

のふたつに分かれます。

スクリーンショットを撮影する

まず、スクリーンショット、つまりスマホで表示されている画面そのものを画像ファイルとして保存します。

撮影したい画面を表示します。たとえば、特定のウェブページをブラウザで表示している様子を撮影するのなら、その画面を出します。

この状態で、下の中央にある「ホームボタン」と、右側側面にある「電源ボタン」を同時に押します。ちょっとボタンを押すタイミングが微妙で、難しいです。ホームボタンでホーム画面になってしまったり、タスクマネージャーが起動してしまったり、電源が切れてしまったり、とちょっと苦労です。

きちんとキャプチャがとれると「スクリーンをキャプチャして画像ファイルを保存しました」と画面に表示されます。サウンドがONになっていれば、同時に「パシャ」という音がなり、マナーモードになっていれば、ぷるぷるっとバイブレーションします。

保存したキャプチャ画像を見るには、「アプリケーション」→「ギャラリー」→「Screen Capture」と選んで行きます。

ここでうまく目的の画像が保存できていることを確認したら、次はパソコンへ転送です。

撮った画像をパソコンに転送する

今回は、Galaxy SIIをUSBケーブルを利用してパソコンに接続します。

まず、Galaxy SIIでの操作です。

メニューボタンを押し、「設定」→「無線とネットワーク」→「USBユーティリティ」→「USB大容量ストレージ」と進みます。

「PCに外部ストレージとして接続」と出るので、タップします。「USBユーティリティー」の画面が出るので、この画面の状態でUSBケーブルを使ってパソコンと接続します。「ユーザーメモリとして接続」と出るのでタップするとGalaxy SIIでの設定はいったん終わります。

ここからはパソコン上での操作になります。

Galaxy SIIの操作が終わると、パソコンでは、普通のUSBメモリなどを接続したときと同じように、リムーバブルディクスとして認識されます。
表示されるフォルダを開いてゆくと、Screen Captureというフォルダがあり、その中に先ほど撮影した画像ファイルが保存されています。ちなみにPNG形式で保存されています。

ドラッグアンドドロップなどでパソコンのハードディスクなどにコピーすればOKです。あとは画像編集ソフトを使って、ヒトサマにみせられない部分を消したり加工したり、なんでもござれです。

GalaxySIIをパソコンからはずす操作は、GalaxySIIで行います。「ストレージをPCからはずす」をタップしてから、USBケーブルをはずすだけです。

ほっ、できた。と一安心。あれ、よく考えると、トラブルシュートはこれからか・・・。先が思いやられる見習です。やれやれ。

サイトが更新されない!! IE8でキャッシュをクリア

「きゃー、見習さんに更新たのんだら、全部サイトがぐちゃぐちゃになっちゃったわー」
という事態がとってもこわい見習。できるだけHTMLを触らずに済ませたいと日々カクサク中です。

そんな時、思いついたのが、「そうだ、ちょっとした画像の変更なら、ファイル名を同じにして画像ファイルだけアップロードすれば、HTMLいじらないで済む!」ということです。サイトロゴとか、たくさんのページに貼り付けられている画像だったりすると、変更忘れとか、タイプミスとか、ワナがいっぱいあります。

全部同じファイル名で縦横サイズも同じ。

全部同じファイル名で縦横サイズも同じ。

たとえば、こんな感じです。

サイトロゴにちょっと飾りを付け替えたり、メッセージつけたり、そんな小変更だったら、widthとheightを変えずに、同名のファイルで作成しちゃいます。このファイル名は、どれもサイトにアップするときはminarailogo.gifです。それぞれminarailogo1week.gifとか、minarailogo1year.gifだったりすると、サイト全部のHTMLを直さなければなりません。一括置換とかを使えばOKですけど、一括置換でミスるとあとが大変だし、書き換えたHTMLファイルは全部アップロードしなおさなければなりません。でも、このように一定のファイル名にしておけば、いつもHTMLで記述するのはminarailogo.gifなので、書き換えの必要がないです。ロゴの画像ファイルのみ、FTPでアップロードすればOKです。前のファイルのほうは、FTPソフトで、サーバ上でファイル名を付け直すことができるので、たとえばlogo_back1week.gifとかに名前を変更しておいてから、新しいminarailogo.gifをFTPでアップロードして完了です。

ということで、HTMLを触らずにすんだ見習は、鼻歌交じりでいたのですが、あれっ、FTPで新しいロゴをアップロードしたのに、サイトが更新されてない!!

環境はWindows7 Internet Exploerer8です。

こんなときは、まず、F5を押します。これは更新のショートカット。リロードともいいます。

一度見たサイトの内容をインターネットにアクセスしないで見れるように、自分のパソコンのハードディスクに保存してあるデータのことをキャッシュといいます。この【キャッシュ】を使わないで、読み込みしなおすための操作が、このリロードです。キャッシュは、パソコンの通信速度が遅かった時代のなごりとかで、体感速度を早くしてサイトを見れるようにするしくみですが、これが見習のたくらみをじゃましました。前に自分がアクセスしたサイトの同じ名前のファイルなので、インターネットに読みに行かないで、自分のパソコンのそのファイルを参照してしまっていたみたいです。

更新をクリック

最新の情報に更新をクリック

このF5と同じことをマウスでするなら、IEのURLを打ち込むとこの横にある、矢印がぐるぐるっと回っている図のところ【最新の情報に更新】をクリックします。

だいたいはこれでOKですが、これでもダメなときがあります。F5でのリロード操作では、100%インターネットへ読み直しにいってくれるとは限らないそうです。で、「ぜーったい、ネットへ読みに行きなさい!」という操作があります。CTRLキーを押しながらF5キーを押すか、CTRLキーを押しながら、【最新の情報に更新】をクリックします。

と、これでOKかと思いきや、これでも不十分なときがあります。とほほ。

こうなると、一時ファイルを手動で消していきます。

IE8を開いて「インターネットオプション」

IE8を開いて「インターネットオプション」

IEを開いてから、「ツール」→「インターネットオプション」とクリックします。

インターネットオプション

インターネットオプション

インターネットオプション」の画面がでるので、ここで「全般」タブの「閲覧の履歴」にある「削除」をクリックします。「閲覧の履歴の削除」画面が出るので、ここで「お気に入りWebサイトデータを保持する」のチェックをはずし、「インターネット一時ファイル」にチェックを入れます。

履歴の削除

閲覧の履歴の削除

「お気に入りWebサイトデータを保持する」は、IEのお気に入りに登録されているサイトに関して、クッキーや一時ファイルを消すか消さないかを指定するところです。ここにチェックが入っていると、その下にある「インターネット一時ファイル」以下の設定にかかわらず、お気に入りに登録されているサイトでの一時ファイルを保持してしまいます。自分が管理しているサイトは、普通、お気に入りに登録してますよね。だから、ここのチェックははずしておかないと、自分のサイトのファイルを保持してしまいます…。これで「削除」をクリックすればOKです。

で、でも、これでも、不十分なときがあります。そんなときは、本当に手動です。

こんどは、インターネットオプションで「設定」

こんどは、インターネットオプションで「設定」

先ほどの「インターネットオプション」画面で、「閲覧の履歴」にある「設定」をクリックします。

ファイルの表示

ファイルの表示

インターネット一時ファイルと履歴の設定」画面がでるので、「ファイルの表示」をクリックします。

Temporary Internet Files

Temporary Internet Files

するとTemporary Internet Filesというフォルダが開くので、ここで自分が先ほどアップロードしたファイルと同じ名前のファイルを見つけて削除します。別に全部のファイルを消してしまっても、そんなに問題ないようです(あくまで、ようです、です)

ということで、もう一度、サイトをチェックしてみると・・・。やったー、サイトのファイルがきちっと更新されてる!

ちょっと胸をなでおろす見習です。

内容に応じて伸び縮みする見出し~内容の長さに応じた幅の算出

内容に応じて伸び縮みする見出し背景を作ろうと思います。

(X)HTML

<div id="wrapper">
<h1 class="header1"><span>のびーる、ながーい見出し</span></h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>
<h1 class="header1"><span>のびーる見出し</span></h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>
<h1 class="header1"><span>見出し</span></h1>
<p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>
</div>

CSS

* {
padding:0;
margin:0;
}
#wrapper {
width:900px;
margin:auto;
}
h1.header1 {
background:url(img/h1bgimg01.jpg) top right no-repeat;/*背景画像を右端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px/*背景画像の高さを指定*/;
float:left;/*内容に応じた幅を算出させる*/
}
h1.header1 span{
display:block;/*ブロック化*/
font-size:20px;
color:#000;
font-weight:600;
letter-spacing:5px;
/*margin-right:40px;親要素h1の背景の右端を見せるため*/
margin-right:20px;/*親要素h1の背景画像の右端を見せるため*/
padding-left:40px;/*背景画像の左端のマークの上にテキストを書かないため*/
background:url(img/h1bgimg01.jpg) top left no-repeat;/*背景画像を左端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px;/*背景画像の高さを指定*/
}
p {
clear:both;
}

▼サンプルはこちら


大体は、親要素いっぱいに広がる見出しのときと同じですが、ここでは、h1の幅が親要素の100%ではなく、内容に応じて伸び縮みします。
ポイントは、h1にfloatをかけるということです。widthを明示的に書かず、自動に算出してほしいわけですが、普通、widthをautoにした場合、親要素の100%を算出します。
そうではなく、内容に応じて伸び縮みさせるのですが、これはshrink-to-fitといいます。CSS2.1の仕様によると、floatがかかっている要素については、親要素の100%ではなく、shrink-to-fitさせるのです。

なんだか、よくわからないような気もするけど…。これって、応用利きそうな感じです。それにshrink-to-fitって、フィットさせるべく、縮めるっていみですよねぇ。と、shrinkの意味を辞書でひいてしまう見習です。