新年、明けましておめでとうございます。本年も昨年同様によろしくお願いします。
さて、前回まで2回ほど脱線が続きましたが、今回も引き続き脱線になります。
今回の記事は新年のお年玉企画（大袈裟）として、人によっては非常に有益な情報をお伝えします。

この記事を読んでいる人なら当然、多かれ少なかれインターネットを使っているはずですが、そのインターネットでも人気のサイトの一つにYOUTUBEがあります。
音声・音楽・映像を投稿動画で提供しているサイトで、PCを使ったことのない人でも名前くらいは聞いたことがあるはずです。
URLは次のとおりですので、まだ訪問したことのない人は一度ご覧ください。

ところで、このYOUTUBEというサイトはとても便利で、私も訪問しない日がないほどですが、その理由の一つに一般の投稿者が著作権を無視して投稿することがあり、普通では視聴できない映像が閲覧できるところにあります。
そのために、著作権におけるグレーゾーンはもちろん、レッドゾーンの投稿もあり、残念ながら頻繁に著作権者もしくは第三者からの申し立て、あるいは投稿者自身による削除が行われています。
せっかく、好きな音楽が投稿され、楽しんで聴いていたと思ったら、いつのまにか消されていたという経験はYOUTUBEファンなら誰もが一度くらいは味わっていることでしょう。
そこで、今回はその苦さを味わずに済むTUBEFIREというサイトをご紹介しましょう。
このサイトはYOUTUBEの投稿映像をMP4などさまざまなファイル形式に変換してパソコンへ保存できるサイトで、しかも便利なのはYOUTUBEの検索・視聴から簡単にそちらのサイトへ進むことができるという特長があります。
残念なことは、サイトが混んでいるときは、１本の映像に対してかなりの変換時間を要することです。（下手をすると３０分ほど待たされることがあります。もちろん、早ければ数分とかかりません。）
とにかく、便利なサイトですので一度ご利用ください。なお、著作権違反とならないよう、あくまで個人的に楽しむ範囲でお使いください。

それでは実際にこのサイトを利用する方法を説明しましょう。
まずはYOUTUBEそのものから説明していきます。


【YOUTUBEの使い方】

まずは、日常利用しているYOUTUBEをいつもどおりにお使いください。
例として今月の紹介映像である須藤薫さんの「緑のスタジアム」を使ってみます。
下のようにYOUTUBEの検索ボックスへ「緑のスタジアム」とタイプしENTERキーを押します。
 



「緑のスタジアム」という曲があれば、下の画像のように、その映像のサムネイルと紹介コメントが表示されるはずですので、その中から該当のものをクリックします。
　

様々な関連映像が検索結果に引っかかりますが、検索キーそのものずばりのものほど優先して表示されるはずです。ここでは2件の「緑のスタジアム」が検索されましたが、それ以外の関連映像も合わせて104件表示されました。
ここでは、紹介映像で使っている2番目の映像を選び、クリックしましょう。

選択した映像が表示され、映像とともに音楽が鳴り始めます。




ここまではYOUTUBEの使い方です。
なお、今回はそのものズバリの一つの検索キーワードで検索しましたが、検索結果が多すぎるときなど、検索の技を知っておけば、YOUTUBEのみならず、Google、Yahoo等主要サーチエンジンにおいても、様々な情報を速く、適切に取得できます。
いずれ機会があればこの方法だけを特化した記事を取り上げたいと思います。


【TUBEFIREの使い方】

それでは、今日の本題であるTUBEFIREに入ります。
前述のYOUTUBEの使い方により、特定の映像が表示されているはずです。
ここでは先の例に従い「緑のスタジアム」によって説明していきますが、もちろん、映像はなんでもかまいません。

YOUTUBEの映像が流れる画面が表示されると同時に、ブラウザのアドレスバーに、その映像固有の識別文字が表示されます。http://www.youtube.com/watch?v= の次の文字で、「緑のスタジアム」の場合、次のように-Ra0GsVSA2o が識別文字となります。

YOUTUBEでは、この識別文字により各映像が識別されストリーミングされますが、TUBEFIREにおいてもこの識別文字を利用して映像が変換されます。
もっとも、実際には、これから行う作業によればこの識別文字を特に意識する必要はありません。なぜなら、現在、アドレスバーに表示されているURLと識別文字をそのまま利用できるからです。

ここが今日の記事の肝ですので、よく理解してください。
ここでそのYOUTUBE映像のURLをTUBEFIRE向けに書き換えます。
書き換えるといっても難しいものではなく、http://..のYOUTUBE.comの文字の部分をYOUTUBEFIRE.COMに変更するだけです。
つまり、次のように「YOUTUBE」と「.COM」の文字の間に「FIRE」という文字を挿入すればそれで完了となります。（赤字部分が挿入する文字）

このように書き換えた後、ENTERキーを押せば、TUBEFIRE.COMのサイトに進みます。
次のようなページに移動しますので、一見、なんのサイトかわからないかもしれませんが、ページ中段付近に「TUBEFIRE変換ダウンロード」と書かれた部分がありますので、その中の項目からMP4を選びクリックします。（もちろん、音声や音楽だけでよければMP3でもかまいません。映像として残したい場合はMP4です。）

　


するとさらに次のようなページに移動します。広告に紛れてわかりにくいですが、「変換開始 クリック」をクリックします。



ここで、サーバーが混んでいなければ、すぐにダウンロードをうながすページに進めますが、混んでいると、待ち時間が発生し、「何件何分待ち」のメッセージが表示されます。そのメッセージに従って対処してください。
また、様々な例外処理の詳細は記事が長くなるので割愛しますが、各ページの「問題がおこりましたか」というコラムを読んで対処してください。

もし、サーバーが混んでいなければ、次のようなページに移りますので「ダウンロードへ進む」をクリックします。
　


下のようなページに移るので、さらに「契約に同意してダウンロードする」をクリックします。契約はTUBEFIREの免責事項と著作権侵害に対する注意事項などです。
皆さん方も個人で楽しむ以外は、著作権を侵害しないようにくれぐれもご注意ください。



最後に次のページが現われますのでデフォルト値である「PC」のまま「DownLoad（無料）」ボタンをクリックします。


　
あとはダウンロードされたMP4ファイルをファイル保存ボックスで適当な場所に保存します。
もちろん、保存ボックスにおいて、ファイルの種類はMPEG-4を選択しなければなりません。

詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
　

上の記述で背景色は赤で設定されます。


詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
　

上の記述で背景画像はimage.jpgが敷き詰められます。
次回は背景画像の配置について説明する予定です。


詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
　

前回に引き続き背景画像を説明します。
なお、今回のCSSの機能は前2回の記事と違い、HTMLでは実現できない機能ですので、是非、覚えておいてください。

さて、前回の記事において、背景画像を表示する記述を取り上げました。
この方法では、HTMLのBODYタグにおけるbackgroundプロパティでの指定同様、画像がブラウザのページ領域にタイルパターン状に敷き詰められることになります。
もちろん、この方法が最もよく使われる方法なので、この方法が駄目であるとはいいません。
しかし、デザイン上、ときには、特殊な背景を作りたいときもあります。
そんなときに、今回、紹介する方法を使っておくと役立つことがありますので、是非、覚えておいてください。基本的にはタイルパターンの敷き詰め方が縦方向のみ、あるいは横方向のみで指定できるというのが今回のCSSでの設定です。
　
　
【縦方向のみのタイルパターン】

通常、HTMLのbackgroundプロパティや前回説明のCSS（BACKGROUND-IMAGE）では、画像は下図のように縦横に繰り返し敷き詰められ、タイルパターン状になります。

右図また下図において、黒の縁取りは、画像の１枚ずつをわかりやすくするためのもので、元の画像に縁がなければ、実際には表示されません。また、下図は全体を表示するため、右図の画像を縮小して表示させています。
　

今回の記事である「縦方向のみのタイルパターン」は、上のような画像の敷き詰め方ではなく、縦方向のみに並べられることになります。
CSSでの記述は次のように、前回のbackground-imageに加えbackground-repeatを加えます。

なお、今後、紹介する「背景画像」の機能において共通なことは、まず、背景画像をBACKGROUND-IMAGE: URL（画像パス）; で読み込んでおいて、他の記述によって処理するという手順になります。

この場合、単一行でも記述できますが、次のように複数行にした方がわかりやすいと思います。

BODY {  
BACKGROUND-IMAGE : URL(./image.jpg);
BACKGROUND-REPEAT : repeat-y;
}

お勧めはできませんが、参考までに上の記述を単一行で記述すれば次のようになります。
　
BODY{ BACKGROUND-IMAGE: URL（./IMAGE.jpg）;BACKGROUND-REPEAT: repeat-y;}

これらの記述により、下のような表現が可能になります。




今回のCSSでの表現では、このような画像による背景よりは、下図のような背景色へのグラデーション画像を使うとより洗練された背景を実現できます。（例の桜の図では白色へのグラデーションで表現しています。）

次回は「横方向のみのタイルパターン」を説明します。

　



詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。