ホームへ戻る
      
     
      
 
記事一覧
TUBEFIRE【インターネット】
2011.01.07】
背景色【CSS】
【2011.01.14】
背景画像1【CSS】
【2011.01.21】
背景画像2【CSS】
【2011.01.28】
 
カレンダー&アーカイブズ

   

2011年1月
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
 
カレンダーの上にあるセレクトボックスを用いてアーカイブ(過去のデータ)を表示。
赤字
の日はクラスやイベントのある日。
その中で下線のあるものは記事があり、それへのリンク。
同日に複数の記事がある場合は先頭の記事に飛ぶ。
祝祭日はその日の背景に日の丸が表示されるがクラスやイベントがない場合、数字は黒字。

 
Record
 
 
 2011.01.07 ()
Personalクラス
    19:30-21:30
   於
:生涯学習センター
    
控室 
 
・2011.01.14(金)
Personalクラス
    19:30-21:30
  於:生涯学習センター
    
第二研修室 
 
・2011.01.21(金)
Personalクラス
    19:30-21:30
  於:生涯学習センター
    第二研修室 
 
・2011.01.28(金)
Personalクラス
    19:30-21:30
  於:生涯学習センター
    
第一研修室 
 
 


RecommendationLinks

 
【緑のスタジアム】
須藤薫さんのアルバムAMAZING TOYSより
当時、好きな音楽を自ら探すのが趣味だった私だが、彼女の曲と名前は友人女性からテープをもらって初めて知った。
最初は彼女の声がそう好きではなかったので聞き流していたのだが、ある日、このアルバムを流したまま昼寝をしてしまい、起きたときに丁度流れていたのがこの曲で、突然、何かに打たれたように、彼女の曲すべてが好きになった。それから数ヶ月間は、車通勤の往復でこのアルバムをずっと聴き続けていた。

結局、彼女の曲としてはこのアルバムと「
PLANETARIUM」というアルバムの2枚のアルバム収録曲しか聴いてはいないのだが、どちらも私にとっては当時を懐かしめる貴重なアルバムとなっている。
ただ、それ以前の曲もなぜか知っている曲が結構、あるのだが、なぜだろうか...?
ところで、この曲の「そして愛さえも...♪」のところのメロディが、当時から以前に別の曲として聴いたことがあった懐かしさがあったのだが、いまだに何の曲だったのかわからない。
(Yukio)
 
 
    
 
 
 
 
 
 
 
  アーカイブ [2011年1月分]
 
2011年1月7日(金)

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

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

http://www.youtube.com/

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

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


【YOUTUBEの使い方】


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



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

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

この検索結果はこの記事を作っている日現在(23年1月初旬)のものです。時期が異なれば検索結果や映像そのものが異なる恐れがあります。ご了承ください。


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




ここまでは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です。)

MP4はISO/IEC JTC 1の動画像圧縮符号化の標準規格であるMPEG-4のPart14で規定されているファイルフォーマットで、MP4ファイル、MP4コンテナなどと呼ばれています。

 


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



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

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


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



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


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

私の聞いた限りではTUBEFIRE.COMはGOOGLEの非公式サイトのようです。それが確かなら、YOUTUBEとTUBEFIREは姉妹サイトということになります。

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

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


Posted by Yukio 記事 No.0000078 
  
2011年1月14日(金)

背景色【CSS】
 
久々にCSSの記事に戻ります。(ここしばらく忙しいこともあり、ページ消費の記事になりますが、ご了承ください。)
 
さて、今回の記事は背景色ですが、この背景色についてはHTMLにも機能が具わっているので、特にCSSの記述である必要はないのですが、外部CSSとして使うときには必要な知識なので覚えておいてください。

HTMLでは背景色を指定する場合に<BODY>タグにBGCOLORプロパティを加え、次のように記述します。(下の記述で背景色は赤となります。)

<BODY BGCOLOR="#FF0000">
 
CSSでは、BODY以外の要素にも背景色を設定できるので、BODY要素である必要はありませんが、上記のHTMLとの比較のためにあえてBODY要素に設定した記述を紹介しておきます。BODYの部分を別の要素に書き換えれば、その要素だけに適用させる記述となります。
 
BODY { BACKGROUND-COLOR : #FF0000; }
  
なお、背景色の指定では基本的にはHTML同様の色名「RED」などと指定するか、あるいは#と6桁の数字もしくは記号(A〜F)によって指定しますが、CSS独特の指定(記述)もあります。(ここでは説明は省略しますが、色指定の数値部分は次のような記述ができます。)

記述例1 BODY { BACKGROUND-COLOR : #F00; }
記述例2 BODY { BACKGROUND-COLOR : RGB(255,0,0); }
記述例3 BODY { BACKGROUND-COLOR : RGB(100%,0%,0%); }

 
上の3つのいずれの例も赤、つまり「RED」もしくは#FF0000を指定したのと同じことになります。
  

RGBでの色指定の詳細は2009年11月14日の記事で。

さて、このような記述につき、内部CSSとしての記述であれば、HTMLのヘッダーを表すタグ<HEAD>〜</HEAD>の間に組み込みます。

【記述例】 関係のないタグは省略しています。
 

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


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

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


Posted by Yukio 記事 No.0000079 
  
2011年1月21日(金)

背景画像1【CSS】
 
今回の記事は背景画像です。
今回も背景色同様、HTMLに機能が具わっていますが、外部CSSとして使うときには必要な知識なので合わせて覚えておいてください。

前回、背景色を指定する方法を説明しましたが、今回は背景画像を設定する方法を説明しましょう。ちなみにHTMLでは次のように記述します。

<BODY BACKGROUND="./image.jpg">
 

./image.jpgは画像へのパスです。画像へのパスとは当該ページから呼び出す画像までの道筋、あるいはルートからの道筋のことです。詳細は2009年9月23日の記事を参照。
 
BODY { BACKGROUND-IMAGE : URL(./image.jpg); }
  
上の例では同じディレクトリ(Windowsでいうフォルダ)内にあるImage.jpgという名のファイルを背景画像として設定しています。ファイル名前にある「./」が同じディレクトリであることを示しています。

【記述例】 関係のないタグは省略しています。
 

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


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

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


Posted by Yukio 記事 No.0000080 
  
2011年1月28日(金)

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

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

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

右図また下図において、黒の縁取りは、画像の1枚ずつをわかりやすくするためのもので、元の画像に縁がなければ、実際には表示されません。また、下図は全体を表示するため、右図の画像を縮小して表示させています。
 
当然、ブラウザ大の画像であればタイルパターンで敷き詰められてもその画像しか表示されないのでタイルパターンにはなりませんが...。
 

今回の記事である「縦方向のみのタイルパターン」は、上のような画像の敷き詰め方ではなく、縦方向のみに並べられることになります。
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での表現では、このような画像による背景よりは、下図のような背景色へのグラデーション画像を使うとより洗練された背景を実現できます。(例の桜の図では白色へのグラデーションで表現しています。)

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


 



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

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


Posted by Yukio 記事 No.0000081 
 
過去のデータを読むときにはサイドバーのカレンダー&アーカイブ」より。
 
 
   
   
 
サークルについて 初級者用テキスト 会場案内 著作権・個人情報の扱い メール/FAQ/コメント ホームへ