ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

PSP動画変換- FFmpegのコマンド(構文)解説サイトをご紹介

今回は、携帯動画変換君などの影の立役者たるすばらしいフリーソフト「FFmpeg」のコマンドについて書きたいと思います。

PSP用の動画変換として私が使っているフリーソフト「さきゅばす
しかし、このソフト自体に動画変換機能はなく、その役目は「FFmpeg」が担っています。
「さきゅばす」で設定した命令は連携している「FFmpeg」に渡され、変換が行われるというわけです。

FFmpeg

出典: フリー百科事典『ウィキペディア(Wikipedia)』


FFmpegは動画と音声を変換することのできるフリーのソフトウェアであり、libavcodec (動画/音声のコーデックライブラリ)とlibavformat (動画/音声のコンテナライブラリ)を含む。

携帯動画変換君, WinFFなどのソフトウェア(GUIフロントエンド)や、WindowsやLinuxのコマンドラインから使用することができる。 対応コーデックが多く、多彩なオプションを使用可能なため、幅広く利用されている。


FFmpegは大変便利なソフトウェアです。しかもフリー。
しかし、コマンドラインから使うソフトのため、私のようにDOS窓を見ると尻込みしてしまうような素人には敷居が高い。
よってGUIを用いて視覚的に操作しやすくした「携帯動画変換君」や「さきゅばす」が多く用いられているわけですが(私もその一人)、それゆえにFFmpeg本来の幅広いオプションを使いこなせず、ソフト内臓の設定に頼っている人が多いようです。

よってFFmpegをより使いこなすために、FFmpegに送るコマンドを解説してくれているありがたいサイトをご紹介。

WikipediaのFFmpegページ
 FFmpegについて解説してあります。
 簡単なコマンドであれば紹介してあります。

FFmpeg Documentation
 英語ですが、その名の通りFFmpegのコマンドについて詳しく載っています。
 私もココで学びました。

FFmpeg Documentation 日本語版
 上記の日本語バージョンのページ。英語慣れしていない方はどうぞ。

FFMPEG USAGE
 携帯動画変換君のサイト"MobileHackerz"内にある解説ページ。
 もちろん日本語ですよ。


このページの関連記事
スポンサーサイト

テーマ : PSP
ジャンル : ゲーム

background-positionを使って、CSSのみで動的メニューを作る

 本日は、CSS(スタイルシート)のみで、動きのあるメニューの作り方を紹介したいと思います。
 特長はbackground-positionを利用することによって画像一枚でスムーズな動きを表現できるところです。

 今回は外部CSSで作ってます。

 まず、こちらの→ サンプルページをご覧ください。 使ったCSSはこちら
ページ上部のメニューにカーソルを合わせると、画像が変わります。
 ↑
 なんでFLASHの上に画像があるの?と思われた方は、前回の記事で紹介していますのでご参照ください。

 こういった仕掛けはメジャーなものとなりましたが、javascriptを使って表現しているサイトが多い気がします。
 しかし、私はjavascriptが好きではないので、この程度ならCSSだけで十分だと思います。

ポイント1: CSSの「:hover」を使って、リンクに動きをつける


 javascriptでは … 2枚の画像をonmouseover、onmouseoutを使って画像変更
 対して、
 CSSでは … リンク要素<a href="..."> に指定可能なクラスである「:link」「 :visited 」「:active」「:hover」を使って、画像変更
※ 「:link」=通常のリンク
  「:visited」=訪問済みのリンク
   「:active」=クリック時のリンク
   「:hover」=マウスが乗っている状態のリンク

ポイント2: background-positionを使って画像を切り替える


 サンプルのメニューに使っている画像の全体像は実はコレ→ top.png

 通常のリンク時とマウスを乗せたときのリンクを並べて一枚の画像にしてあります。

仕掛けは単純、
まず、メニュー画像を背景として表示させて、
 ①通常時は画像の上半分だけ表示させます。
  (↑ display: blockとwidth・heightを指定)
 ②リンクをクリックしたとき(:active)とマウスを乗せたとき(:hover)に画像の下半分を表示させます。
  (↑ background-positionで背景位置をずらして表示)


ソースとCSSは以下
 ※メニューの"HOME"に使う部分のみ太字で見やすくしてみました。一つの仕掛けにどの程度の文字数が必要か分かると思います。

HTML
<li><a href=" リンク先 " id="top" title="トップページ"><img src="menu_dummy.gif" width="110" height="27" alt="トップページ"></a></li>
<li><a href=" リンク先 " id="intro" title="紹介"><img src="menu_dummy.gif" width="110" height="27" alt="紹介"></a></li>
<li><a href=" リンク先 " id="joboffer" title="求人"><img src="menu_dummy.gif" width="110" height="27" alt="求人"></a></li>
<li><a href=" リンク先 " id="link" title="リンク"><img src="menu_dummy.gif" width="110" height="27" alt="リンク"></a></li>


CSS
/* ここからメニュー部分全体 */
ul {width: 450px; /* メニュー全体の幅 */
margin: 0;
padding: 0;}
ul li { float: left;
list-style: none;
list-style-type: none; /* リストマーク非表示 */}
/* 『 Top 』 の設定 */
ul li a#top {
display: block;
width: 110px; height: 27px;
margin-left: 0px;

background: transparent url(top.png) no-repeat 0px 0px; }
ul li a#top:hover,
ul li a#top:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}

/* 『 Introduction 』 の設定 */
ul li a#intro {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(intro.png) no-repeat 0px 0px; }
ul li a#intro:hover,
ul li a#intro:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Job Offer 』 の設定 */
ul li a#joboffer {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(job.png) no-repeat 0px 0px; }
ul li a#joboffer:hover,
ul li a#joboffer:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Link 』 の設定 */
ul li a#link {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(link.png) no-repeat 0px 0px; }
ul li a#link:hover,
ul li a#link:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* ここまで、メニュー部分全体 */



読んでもよく意味が分からない人はこちらのサイトをご利用ください。
 とほほのWWW入門
 TAG index - スタイルシート CSS[スタイルシートのカテゴリー一覧]

さて、このようなHTMLソース・CSSの解説を以下に↓

●なぜメニューをul、liで書いたのか?
 詳しくは知らないが、ソース中でメニューであることが分かりやすいため、SEO対策とかになるらしいです。

●"menu_dummy.gif" ってなに?
 画像読み込みOFFにしている人のための保険なので<img ~~~>は消してもOK。

●なぜメニュー画像を背景画像にしたのか?
 メニューはフレームでも使わない限りすべてのページに設けるものであり、ソースが長ったらしいとファイルサイズがでかくなるし、SEO対策的に邪魔になるので、CSSで外部ファイルとして指定できる「背景」にしました。

●なぜ1枚の画像にしたのか?
 javascriptの場合はページ読み込み時にscriptを使って、切り替えに使う画像をあらかじめユーザーにロードさせます。それによってストレスのないスムーズな画像変更を可能にします。
 しかし、CSSのみの場合はscriptであらかじめ画像を読み込ませておくことが出来ないため、はじめにカーソルを乗せたときに切り替え後の画像をロードする間、若干のタイムラグが生じてしまいます
 ページ読み込み時に切り替え前後の2つの画像を読ませることはscriptでないと難しいので、2つの画像を一つにまとめてしまえばいいと考えたわけです。

 といってもこれは私のオリジナルではなくて、昔どこかでこのようなメニューを見て感心した覚えがあるからですが…



このページの関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

z-indexを用いてFLASHオブジェクトの上にメニューなどを表示させる

メニューにFLASHを使わずに、FLASHメニューみたいにカッコイイメニューを作りたいということで、
FLASHの上に通常の画像で作ったメニューを乗っけてみました。
CSSの"z-index"がポイントです。

こちらがサンプルHTMLです↓
sample.html

IE6では透過PNGが透過されないため、↓下の画像をご覧ください。IE7やFirefoxなどではこのように見えます。
メニューサンプル
※サンプルページ内のメニューの作り方はこちらのページで紹介していますのでご覧ください。

仕掛けはいたってシンプル。

FLASHとメニュー部分をブロック要素<div>で囲って、それぞれにz-indexで番号をつけ、メニューをmarginで上にずらして表示させます。


※z-index… 重なりの順序を指定。値が大きいものほど上になる。
※margin-top… ブロック要素の上の隙間の幅。この場合マイナスにすることによって上にずらした。

ソースを単純に書くと、

<div style="position: relative; margin: 0px auto; z-index: 1; ">
object要素でフラッシュ貼り付け
</div>
   
<div style="position: relative; z-index: 2; margin-top: -60px; ">
メニュー部分
</div>


いかがでしょうか?
このメニューは単なる画像ですが、プルダウンにしたら、もう少しかっこよくなるかも。

------------
 無料のFLASH素材サイトがたくさんあるせいか、最近デザイン重視のサイトが多い気がします。

 はっきり言ってわたしはあまり好きではありません。
 FLASHのメニューって見づらくないですか?
 きれいだけど、リンク先を別窓で開けないし、接続状況によっては重い場合もあります。
 また、マウスオーバーしてもステータスバーにURLが出ないため、リンク先アドレスが信頼できない場合も。

 使い方を工夫すれば、CSSでも十分スタイリッシュにできるはず…



このページの関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ニコニコ動画 コメント技 05-改行方法の違いによる行間の差

今回は、タイトルにある通り、改行方法の違いによる行間隔・文字間隔の差と題してお送りします。

下の画像は以前の記事:コメント技01-縦文字 + 文字色変更でも使用したものですが、これには行間に関する表現方法の違いも見受けられます。

行間隔・文字間隔の比較画像
※文章右のカッコは私が勝手につけたものです。

よーく見てください。赤い文字の上下だけ文字間隔が広く設けられています。

ソースでは、
<chat date="1190876174" mail="ue" no="116652" thread="1176848399" user_id="d1aDvZt0TaD2-0CP-H6bHCx-kpA" vpos="2393">本

に</chat>
<chat date="1190876187" mail="red ue" no="116653" thread="1176848399" user_id="d1aDvZt0TaD2-0CP-H6bHCx-kpA" vpos="2393">素
敵</chat>
<chat date="1190876225" mail="ue" no="116654" thread="1176848399" user_id="d1aDvZt0TaD2-0CP-H6bHCx-kpA" vpos="2393">だ

|</chat>
となっており、コマンドが「本当に」「素敵」「だ--」の3ブロックに分離しているのが分かると思います。
そして、このブロックの間は、各ブロック内の改行を施した文章よりも間隔が開いています。

すなわち
通常のEnterによる改行に比べ、コマンド間のほうが間隔が広くなるということです。


それがどうした?と思われる方も多いと思いますが、精密さが要求されるAAを作る際などには考慮しなくてはならないことだと思います。

また、文章表現にも効果的で、たとえばこの文章の場合「素敵」という文字が赤くなっており目立ちますが、その上下に少し隙間が開いていることにより、より強調されているように見受けられます。
「素敵」は文字色が違うのだからコマンドも別だし、隙間が開いて当然だ!という意見はごもっともですが、「素敵」を強調する気がなければすべての文字を下のように等間隔に配置してしまえば良いはずです。
等間隔に配置するには一文字ずつコマンドを別にして
<chat date="xxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">本
</chat>
<chat date="xxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">当</chat>
<chat date="xxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">に</chat>
<chat date="xxxxxx" mail="red ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">素</chat>
<chat date="xxxxxx" mail="red ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">敵</chat>
<chat date="xxxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">だ</chat>
<chat date="xxxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">|</chat>
<chat date="xxxxxx" mail="ue" no="xxxxxx" thread="xxxxxx" user_id="xxxxxx" vpos="2393">|</chat>
としてしまえば、










と表現されます。

こうなるとなんだか味気なく感じます。

台詞や歌詞などを作成する際には、行間や文字間隔を意識すると表現の幅が豊かになると思います。

テーマ : ニコニコ動画
ジャンル : アニメ・コミック

ニコニコ動画 コメント技 04-コメントの流れる速さ

久しぶりのコメント関係更新です。
今回はコメントの流れる速さについて解説していきます。

皆さん、ニコ動を見ていて、コメントによって遅かったり速く流れるコメントがあるのにお気づきだと思います。
しかし、流れる速さはコマンドでは制御できません。
コメントの流れる速さは、コメント内容の長さによって変わっていきます。
短いコメントならゆっくりと、
長いコメントなら速く流れます。


これを弾幕に応用したのがコレ↓
映像ソースはつっこみなしで(^-^);
※色のついた枠は、コメントを見やすくするために、あえて書き加えたものです。

コメントスピード比較画像

ソースは某ゲームのOP。

左の画像は、弾幕部分だけキャプチャして時間軸で並べてあります。
時間は画面上から下に向かって流れています。

解説:
「駆け抜ける浣腸」という空耳歌詞を、
画面上を「浣腸♂♂」という文字がすばやく「駆け抜ける」ことで表現

コメント速度を上手く使った面白い弾幕です(個人的に



黄色い矢印を見ていただけると分かりやすいと思いますが、「駆け抜ける」というコメントが流れ終わる前に、その下方を「浣腸♂♂」がすばやいスピードで画面上を流れていきます。


このコメント(xml)をメモ帳で見てみると、

<chat anonymity="1" date="xxxxxxxxxxxx" mail="blue big 184" no="xxxxxx" premium="1" thread="xxxxxxxxxxxxxx" user_id="xxxxxxxxxxxxxxxxxxxx" vpos="20425">駆け抜ける</chat><chat anonymity="1" date="xxxxxxxxxxxx" mail="blue big 184" no="xxxxxx" premium="1" thread="xxxxxxxxxxxxxx" user_id="xxxxxxxxxxxxxxxxxxxx" vpos="20352">→                                                       浣腸♂♂</chat>

文字数は「浣腸♂♂」とほうが短いじゃないか!と思われるかもしれませんが、
コメント部分をよ~く見ると、
駆け抜ける
↑上の画像でいうと水色の枠

に対して、

→□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□浣腸♂♂
↑上の画像でいうと黄緑色の枠 (分かりやすいように、□は空白で表現)

このように、「浣腸♂♂」は実際には、「→」から始まるものすごーく長いコメントだったのです。
だから「浣腸♂♂」のほうが視覚的には短いコメントだったのに、表示時間が遅いはずの「駆け抜ける」よりも速いスピードで流れていったのです。


以上、「コメントの流れる速さ」と題して解説してみました。
いつもながら職人さん、ありがとうございます。

では、おそまつさまでしたー

テーマ : ニコニコ動画
ジャンル : アニメ・コミック

銀河英雄伝説-イゼルローン駐留艦隊章

かな~~り前の予告どおり、自由惑星同盟側のやつを作りました。

銀河英雄伝説に登場する、イゼルローン駐留艦隊の隊章です。
イゼルローン駐留艦隊といえば、云わずと知れたヤン艦隊ですよね。

ピンズを参考に作りましたが、銀河帝国紋章と同じく細部は想像で補完してます(汗
龍って難しい…
鱗よりも顔に時間がかかりました。
影などはつけてないため、立体感まるでナシですが、よろしければ見てやってください

イゼルローン駐留艦隊章-小

サイズは大小2つアップしてみました。背景透過PNGです。

イゼルローン駐留艦隊章-大 (647 x 928) (206KB)
イゼルローン駐留艦隊章-小 (319 x 450) (95KB)

次は第13艦隊にしよう


このページの関連記事

テーマ : 銀河英雄伝説
ジャンル : アニメ・コミック

I..O DATA 地デジチューナー HVT-T100 レビュー

本日、Amazonから、I..O DATA(アイ・オー データ)の地上デジタルハイビジョンチューナー HVT-T100が届きました。入金確認の次の日に到着したので早かった。
お値段は約1万円。安い
これ↓

I-O DATA 地上デジタルハイビジョンチューナー HVT-T100I-O DATA 地上デジタルハイビジョンチューナー HVT-T100
(2008/05/30)
不明

商品詳細を見る


アイ・オーの商品情報ト:http://www.iodata.jp/product/av/tuner/hvt-t100/

チューナー購入理由:
・国や大手家電メーカーの策略にのらずに、手持ちのテレビで地デジが見たい。
・本音としては、画質はアナログ並みで十分なんだ。砂嵐とノイズとゴーストさえなくなれば…。
・ウチにいちおうUHFアンテナ立ってるけど、高いテレビ買う前にソイツが使えるのか実験したい。(いつもVHSだったんで放置してたorz)

HVT-T100決定理由
・マスプロや八木より安い(NECとか有名メーカーモノは論外。あいつら高すぎ)
・小型、かつ、デザイン良し。 →持ち運びしやすい
・コード別売りだけどD端子やPC接続ができる →活用の幅が広がる

------------------------------
では、レビュー開始

外観~初期設定+感想



サイズは右写真の通り。

ビデオテープ(今さら)より若干大きい程度。厚みも同じくらいか、もう少し薄め。
縦置き、横置きができる。


早速取り付けて、UHFアンテナを電波送信局側に向けて調整していたら映りました。
すごく映りいいですよ。テレビが眩しいくらい映りよかったです。
眩しいというのは語弊がありますが、アナログ(白っちゃけてる感じ)に比べてコントラストがはっきりしている印象。
テレビの光度若干だけど下げちゃったよ(笑。
どんだけ映り悪いテレビで見てたんだ自分。


HVT-T100



【HVT-T100の利点】


・番組表や番組説明を見る。 LANやネットにつながなくてもOK。
視聴録画ができる。←見たい番組が始まったら本機の電源をONにして予約しておいた番組を視聴できる機能。撮り逃しでなくて見逃しを防ぐ機能。
・付属のリモコンで主要メーカーのテレビ操作に対応。←テレビの電源つける、チャンネル変える
・USBとPCつないでファームウェアの更新が出来る。もちろんPCに繋がなくてもNHKが受信できる環境であれば自動的に更新されるそうです。

【HVT-T100の欠点】


・データ放送受信
・双方向通信(視聴者参加型番組など)
・本機単体での録画(レコーダーではないので)

使用可能入力端子は
 RCA(赤白黄の端子)
 Sビデオ
 D端子(D4?)
 変換ケーブル使えばアナログRGB(D-sub15pin)

【録画やダブルチューナーもできそう…】


 説明書にもチラッと書いてありましたが、本機をビデオデッキや外部入力可能なテレビパソコンにつなげば録画やキャプチャができるはずです。
 HDMI端子接続ではないのでHDD内臓テレビやレコーダーやブルーレイ画質には劣るだろうけど、クリアな映像で録画できるはず。

以下はただの思いつきですが…↓
・本機で視聴予約して、繋いだ機器の方で録画予約しておけば、予約録画ができるんじゃないだろうか?
・しかも2台以上本機をつないで、リモコンで切り替えつつ操作可能なので、ダブルチューナー的なことができるかも?視聴しながら別番組を録画~~~



このページの関連記事




続きを読む

テーマ : AV機器
ジャンル : 趣味・実用

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="http://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > 月別アーカイブ [ 2009年01月 ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。