これで大丈夫なのか?
『Justin.tvの画面+Ustream(IRC)のチャット』という配信ページを昨日から試作中です。
とりあえずFC2 でスペースを借りて作ってみました。⇒配信ページ(仮) (麻雀ラジオHP 完成しました。)
-----------------------------------
<html>
<head>
<title>配信ページ(仮)</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body>
<p><nobr><object type="application/x-shockwave-flash" height="390" width="520" id="live_embed_player_flash" data="http://www.justin.tv/widgets/live_embed_player.swf?channel=dotopper
" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.justin.tv/widgets/live_embed_player.swf
" /><param name="flashvars" value="channel=dotopper&auto_play=false&start_volume=25" /></object><embed allowfullscreen="true" src="http://www.ustream.tv/flash/irc.swf
" pluginspage="http://www.adobe.com/go/getflashplayer
" flashvars="channelId=3129430&brandId=1&channel=#risoujansi&server=chat1.ustream.tv" type="application/x-shockwave-flash" height="390" width="460"></embed></nobr></p>
<p>ただいま試作中</p>
</body>
</html>
-----------------------------------
画面とチャットを横に並べて表示したいんですけど、(ブラウザの横幅がせまくなると)勝手に改行されて画面とチャットが縦に並んでしまう現象をどうにかしたくて、『<nobr>~</nobr>』で囲ってみました。
それから、Justin.tvの画面のタグは『<object>~</object>』の部分だけを使わないと、画面とチャットが横に並べられないので注意です。(画面とチャットの大きさはそれぞれの「height」と「width」の数値で調節する。)
やたらとシンプルな方法ですけど、このやり方で合ってるんだろうか?
【追記】
タグの超簡単な説明です。(初心者ですので間違えてたらゴメン)(参考:とほほのWWW入門 )
<html>~</html>:「HTMLを書くよ」という宣言
<head>~</head>:ヘッダ部分(そのページの情報について)
<title>~</title>:そのページのタイトル
<meta>:メタ情報?(今回は「Shift_JISという文字コードで書いてるよ」という宣言に使用)
<body>~</body>:本文部分
<p>~</p>:段落
<nobr>~</nobr>:改行禁止
<object>~</object>:貼り付けタグ(今回は画面のタグ)
<embed>~</embed>:埋め込みタグ(↑と意味は大体同じ)(今回はチャットのタグ)
※今回は1つの段落に画面とチャットのタグを貼り付け、それを改行禁止にしました。
上のソースコードで画面とチャットのタグを入れ替えれば、(あまりにもシンプル過ぎますけど)誰でも配信ページを作ることができると思います。
【追記2】
HTMLで正式な横への並べ方がわかりました。⇒配信ページ2(仮)
↓ソースコード
-----------------------------------
<html>
<head>
<title>配信ページ2(仮)</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body>
<table>
<tr>
<td>
<object type="application/x-shockwave-flash" height="390" width="520" id="live_embed_player_flash" data="http://www.justin.tv/widgets/live_embed_player.swf?channel=dotopper
" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.justin.tv/widgets/live_embed_player.swf
" /><param name="flashvars" value="channel=dotopper&auto_play=false&start_volume=25" /></object>
</td>
<td>
<embed allowfullscreen="true" src="http://www.ustream.tv/flash/irc.swf
" pluginspage="http://www.adobe.com/go/getflashplayer
" flashvars="channelId=3129430&brandId=1&channel=#risoujansi&server=chat1.ustream.tv" type="application/x-shockwave-flash" height="390" width="460"></embed>
</td>
</tr>
</table>
<p>ただいま試作中</p>
</body>
</html>
-----------------------------------
タグの簡単な説明
<table>~</table>:表の作成
<tr>~</tr>:横の1行を定義
<td>~</td>:データを定義
意味がよくわからなくても、紫色のところに画面のタグ、緑色のところにチャットのタグを入れれば作成可能です。
⇒Justin.tv(Ustream)関係まとめに戻る