スマホ表示で右に空白ができる

スマホ表示で右に空白ができる

レスポンシブ対応したページをスマホで表示したところ、上記のように右に空白ができた。ググるとすべてのコンテンツを囲んだ<div>にoverflow: hidden;を適応させれば、空白が消えるそう。しかし、消えなかった。

HTMLを少しずつ削除していって、空白を生み出してる原因を探ったところ、<header>にある<h1>が悪さをしてた。@media screen で<header>に何も設定していなかったのが敗因。ここに<header>と<h1>のwidth設定を加えると空白がでなくなった。overflow: hidden;はいらないし、全体を<div>で囲む必要もなかった。

また、タイトル画像みたいなコンテンツの一部にある画像がウィンドウサイズによって自動縮小しなかったので修正する。

画像の自動縮小

以下が対応に成功したコード例。

<h1><img src=”logo.png”></h1>

h1 {
max-width: 100%;
height: auto;
}

h1 img {
max-width: 60%;
height: auto;
}

<h1>にmax-width:100%を指定して、その中の<img>にmax-width:60%を設定すると、実際の画面幅によって一定の割合で画像が自動縮小されるようになった。この場合<img>が常に画面幅の60%の長さになる。この縮小時の設定は@media screenの中に記載している。

レスポンシブ対応方法がなんとなくわかってきた。

瓦のふるさと公園

瓦のふるさと公園

E-PM1 + LUMIX G 14mm F2.5 菊間 瓦のふるさと公園

勢い+勉強で新しいコンテンツ「瓦のふるさと公園」を作ってみました。まだレスポンシブが上手くできてなく、スマホで見ると右側に謎の空白がある。調整したいところも細々あり。既存のコンテンツもこのレイアウトにしたいけど、取り急ぎここまでで公開する。

【2015年4月12日追記:レスポンシブ対応完了しました】

tweetable_write_widget

WordPressのテーマ「Mystique」をアップデートするとIE6だと表示が真っ白になり何も読めなくなった。“続きを読む”が動かない。デザインのコテコテっぷりにも飽きたのでTwenty Eleven 1.2に変更してみる。シンプルでなかなかよろしい。ヘッダー画像はアップロードした好きな画像をランダムで表示できるようになっていて、写真をアップしたい私の希望にぴったり。

デフォルトのウィジェットでTwitterがないのでプラグインのtweetableを設定したら下記のエラーが出た。

Warning: Missing argument 2 for tweetable_write_widget() in /home/xxx/tweetable.php on line 137

137行目にある関数で使われている2つ目の引数のエラーらしい。tweetable.phpの137行目にある関数の2つ目の引数は$paramsだった。検索してみると、どこにも使われていない模様。さっくり削除してアップロードし直すとエラー文が出なくなり、無事動いた。よしよし。

8mmフィルムをデジタルに

実家の畑でほころぶ梅。ちなみに台湾の国花は「梅」、中国の国花も梅っぽいぞと調べてみると「牡丹」でした。

実家で母から私が子供だったころや昔の街並みを映した8mmフィルムがたくさんあり、あれをDVDで見られないのかと聞かれたので調べてみる。現在、8mmフィルムをデジタル化するには(1)専門の業者にまかせる。(2)テレシネの機械を使う。(3)スクリーンや壁に映写した映像をビデオカメラで撮る。の3つのパターンがある。

(1)は業者にテープを送ってデジタル化してもらう。フィルムの量で価格が異なるため1本あたり1,500円から7,000円ぐらいの費用が必要である。(2)は8mmフィルムを取り込む専用の機械(テレシネ)を購入する。フィルムを再生しながら40万画素ぐらいのCCDカメラで撮影するもので、価格を調べてみると中古でも1台35万円ぐらいして非常に高価。(3)は映写機で壁やスクリーンに上映した映像をビデオカメラで撮影する。昔々、歌番組やアニメのオープニングをラジカセで録音していた光景が頭に浮かぶ。家族の声が入るんだなぁ。個人で手軽に試せそうなのは(3)で、映写機は公民館や市役所で借りられたような気がする。スクリーン付きの部屋と一緒に借りればできるのではないかと思われ。

つかフィルムなんだからスキャナで読み込んで1枚1枚切り抜いてPremiereに取り込んでfps調整すればよくね?フィルムを大きめに取り込めばフルハイビジョンでも再生できまっせと計算してみる。24fpsとするとフィルムの数は・・・5分間の映像で7,200枚になる。手作業では無理だわ。

森林公園でLittle Planet

HDR加工した森林公園の画像をPixcel BenderとPhotoshopで調整して作る。

遅れに遅れてXperia X10 Mini ProをAndroid2.1にアップデートする。なぜか電話帳のデータのみリストアできなくて手動で入れ直すハメになる。ちなみにガワは私が購入したんですが通話料は会社持ちなので、ネットワークに繋げていない。ネットワークに繋がっていないスマートフォンなんて、クリープのないコーヒーのようなのでどうにかしたい。

iPhoneアプリにISSや衛星の情報を知るアプリがあると知って、Androidにもないかと探してみると「Satellite AR」が見つかった。左上にひまわり7号がいるとか、11時間後に頭上をプログレス補給船が通過します、なんて表示されて超楽しい。

PhotoshopでPixel Benderのフィルタを使う

「auの庭で。」とか入れていいですか。

Pixel Benderのフィルタを使おうとしたら、準備手順が意外に多かったのでここにメモ。.pbkをプラグインのフィルタフォルダに入れただけでは動かないのだ。ウチの環境はWindows 7 Ultimate 64bitでPhotoshopはCS4(64bit)です。Pixel BenderのフィルタはPhotoshop CS4以上でないと使えないそうなのでご注意ください。

まず、ADOBE EXTENSION MANAGERでPixel Benderのプラグインをインストールする必要があります。Pixel Bender Technology Centerの下の方にある「Pixel Bender plug-in for Photoshop CS4」をクリックしてダウンロード。プログラムからADOBE EXTENSION MANAGERを起動して、「ファイル」→「拡張機能をインストール」でダウンロードした.mxpファイルを選択します。インストール途中で「この操作の実行に必要となる適切な権限がありません・・・」と出た場合は、一旦ADOBE EXTENSION MANAGERを閉じて、起動する際に右クリックで「管理者として実行」を選んで起動すればインストールできます。

インストール後に「ローカル ディスク(C:)」→「Adobe」→「Adobe Photoshop CS4 (64 Bit)」→「Pixel Bender Files」に.pbkファイルを入れればok。Photoshopを再起動すれば「フィルタ」に「Pixel Bender」が追加されて使用できます。Little PlanetsEscher’s Droste Effectが楽しそう。

ちなみに下の2枚の元写真は同じもの。おもしろい。

夜の散歩

以前から気になっていたことが手持ちの機材ですべて出来ることを確認できたのでテストを繰り返しながら制作中。1部分気になることがあるけど目処は立った感じ。

YouTubeに動画をアップロードするのに著作権フリーのBGMが欲しいな、と作曲ソフトを探してみた。探しながら音楽用語がさっぱりわからないので、知識ゼロの人が使える曲を作曲できるようになることを考えたら Creative Commons を使った方が早そうだと考えていると、手持ちの Adobe Production Premium CS4 の中に Soundbooth CS4 を発見。このソフトは作曲はできないけど既存の曲の編集ができて、元になる曲やSEはAdobeから無料でダウンロードできるのだ。キチンとした曲がダウンロードできてそのまま使えるので、BGM問題が解決してしまった。Adobeさんやりますな。超うれしい。

WordPressのテーマをMystiqueに変更する

気分転換にWordPressのテーマを「Mystique」へ変更してみる。

Twitterのアカウント設定ができずに苦労した。「ダッシュボード」→「外観」→「Mystique settings」→「Navigation」→「Twitter ID」があったので自分のIDを入れてみるも初期登録されているWordPressのTwitterが表示されるのみ。別の場所で設定するのだなと探してみると、「ダッシュボード」→「ウィジェット」→「Twitter」を右の「Default sidebar」にドラッグして「Twitter user name:」に自分のIDを入れると設定できた。よしよし。

夜明けをFullHDで

雲の動きが少なくて画面上に動きがないからイマイチ面白くない動画になってしまった。40倍速だけどもっと早くしても良かったか。

最近、パソコンがうるさいのはテーブルの下に置いてあるから熱がこもってるのでは?とテーブルの上に置き換える。うるさいのは2枚刺さっているビデオカードの片方だと判明する。ビデオカードを1枚にして空間を広げると静かになるかも。

ここからAVCHD編集記録用のメモ書きです。

上記動画の撮影機材はSONY HDR-CX520で1920×1080で撮影しています。1時間20分ぐらいの動画をPremiere CS4を使って40倍速に編集してYouTube(1280×720)用に書き出しました。パソコンはWindows 7 Ultimate 64bit版、Core i7 920、GeForce 9600GT、メモリ3GBでエンコードに5時間ぐらいかかった。

あまりにエンコードが遅いのでメモリ(2GBを3枚 or 1GBを3枚)を追加してビデオカード・CPUクーラーを交換してみようかと探してみると、ATIのビデオカードにはPremiere CS4でのエンコードが早くなる「ATI Stream」って機能があった。ATIでこの機能に対応したビデオカードと「AMD Encoder Plug-in for Adobe Premiere Pro Beta」で使用可能、って、CPUがintelだとATI Streamは使えないらしい(価格.comの書き込み)。危ない。よく気づいた。自分を褒めてあげたい。

NVIDIAも「ATI Stream」と同じ「CUDA」と呼ばれる機能があるのですがPremiere CS4とAfter Effects CS4はワークステーション用のQuadro CXしか対応していない。コイツは20万円ぐらいします。GeForceの「CUDA」はPremiereでは効果ないらしい。

エンコードに時間が必要なだけなのでメモリだけ足そうか。

WordPress 3.0

変な時間に目が覚めて、ついついWordPressのアップデートを始めてしまったのが運の尽き。.sqlのインポートが上手くいかずに文字化けの嵐になり途方に暮れる。検索しても同じ症状は出てこないので八方ふさがった。このBlogのデータは「はてなダイアリー」と「adiary」を経由しているので、どこかにイレギュラーな小石が混じっているのかもしれない。最後の手段で作っておいたWordPressからエクスポートしたデータを使って手動で修復して、なんとか元の状態に戻ったのだ。バックアップは大切だ。

WordPress 3.0 は動きがキビキビと早い気がする。パフォーマンスが目に見えてアップするのはうれしい。

やりたいことが多いんだけど割り込みが多くて片づかない。ToDoを書いて一つ一つ潰していこう。

「はやぶさ」カプセル、1mm以上の試料は無し”  残念だ。

Computer arts と logo lounge 5

computer-arts logo-rounge5

久々に誠品書店に行って気になる本をお買い上げ。洋書を買うなら誠品書店です。logo lounge 5はhttp://www.logolounge.com/の内容をまとめた本で、ロゴだけを羅列するのではなくて、実際に商品や売り場の写真なんかもあって良い。じっくり目を通そう。

いろいろやって何か一つモノにできれば上出来、でしたっけ?

This movie requires Flash Player 9


まだやってんのかい、って感じですが結婚式ビデオ編集の仕上げために After Effects 熱が高まって練習してました。flv で書き出して swf で掲載。

After Effects は今までタイトルに使うテキストのアニメーションをプリセットの動きで誤魔化しててきただけなので、基本ができてなく苦戦することこの上ない。操作性がPremiereやFlashとも違うので、あのソフトではこの辺にあるのに、ってのがイマイチ通じずに苦労した、というかまだ慣れてないです。この感覚は最初に Flash を触った時にもあったなぁ。