ラルクのニコニコ生放送がちゃんと繋がらないとイヤだなぁ…ってことでうっかり課金してしまったプレミアム。
で、せっかくプレミアムに入ったんだからプレミアムしかできないことやろうぜってことでニコニコ生放送してきました。

以前ネトゲで実況やった人のを見ていたことはあるんですが、自分ではやってみたことはないもので、顔出し声出し×でできるものでなにがいいかなぁと思っていたところ「描いてみた」がいいんじゃないの？ってことでそれに決定。

このサイト見ながらいろいろ設定してやってみた！
…が！
後で放送見返してみたら音出てない｡ﾟ(ﾟ^o^ﾟ)ﾟ｡
調べてみたらステレオミキサーになってないとかダメダメな感じ(´д｀;)

で、プレミアム解約前の6/29-30に2回やったんですが、それまでニコ生の何が楽しいのか、全然理解できなかったんですが、自分でやってみてニコ生にハマるひとの気持ちがちょっと分かった。
絵描いてリアルタイムで褒めてくれるしｗ
ブログのコメントとはまた違った反応だしね。
繰り返しやってると自分が神絵描きだと勘違いしちゃいそうだ（笑）

2回目の絵。テーマが思いつかなかったのでラルク絵お題ったーやったら出たのが「hydeとyukihiroを曲のイメージで」。
この2人で曲のイメージってとDIDかなーってことでこんな感じ。
3枠でやったけど最初の1枠がペンタブの筆圧＆カスタム設定読み込んでくれなくてあわあわしてるうちに時間が過ぎてくっていうｇｄｇｄっぷりｗ
あと声があった方がいいかなってことで導入した棒読み子さんの声が聞き取れないって言われて使うのやめたりとか。
実質1時間ぐらいかなぁ。
放送中に効果入れる時間が無くなってしまったのでちょっと付け足し。

しかし生放送やってみてわかったけど、私一発でばしっと決められるほどデッサン力がないので（いつも絵描く時3回ぐらい下書きしてる）「描いてみた」には向いてないなと(´∀｀;)

生放送お付き合いいただいた方、どうもありがとうございました！

狙いとしては前回と同じく

・グラフィカルなブログパーツをつかわずシンプルにtwitterを表示したい
・URLはリンク付きの状態で短く表示したい
・@から始まる返信は表示しない

なんですが、それに加え、

・twitpicのサムネイル表示/非表示
・カスタマイズ・CSSの簡単な解説つき

になってます。

<div class="twit"><div id="twitter"></div></div>

<script type="text/javascript">

//twitter表示ここから


function twitterCallback(result) {

//この下の行の数字で表示件数を変更（この設定では5件）

var item_max = 5;

var timeline_list = new Array();

var out = '<ul>\n';

var cnt = 1;

for (var i = 0; i < result.length; i++) {

var text  = result[i]['text'];

//※@で始まる発言だけでなく、@を含む発言すべて表示しない場合は、

//次の行を削除し、その下の行の先頭「//」を消す

if (text.match(/^@/)) {

//if (text.match(/T @/) || text.match(/^@/)) {

continue;

}

if (cnt > item_max){

break;

}

cnt++;

var created_at = result[i]['created_at'].split(" ");

var post_date = created_at[1] + " " + created_at[2] + ", "+ created_at[5] + " " + created_at[3];

var date = new Date(post_date);

date.setHours(date.getHours() + 9);

var mon  = '0' + (date.getMonth() + 1);

mon = mon.substr(mon.length - 2);

var day  = '0' + date.getDate();

day = day.substr(day.length - 2);

var hour  = '0' + date.getHours();

hour = hour.substr(hour.length - 2);

var minute  = '0' + date.getMinutes();

minute = minute.substr(minute.length - 2);

var out_date1 = mon + "/" + day + "  " + hour + ":" + minute;

var out_date2 = mon + "/" + day;

var out_date3 = hour + ":" + minute;

var out_date4 = "";

text = text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {

//twitpicのサムネイル表示がいらない場合は

//この下の10行を削除し、その下2行の先頭「//」を消す

if(url.match(/\/twitpic.com\/([0-9a-zA-Z])/)) {

var img_url = url.replace(/http\:\/\/twitpic\.com\//, function(img_url) {

return 'http://twitpic.com/show/mini/';

})

return '<br /><a href="'+url+'" target=_blank alt="twitpic"><img class="twitpic" src="'+img_url+'"></a><br />';

}

else {

return '<a href="'+url+'" target=_blank">[URL]</a>';

}

})

//return '<a href="'+url+'" target=_blank">[URL]</a>';

//})

hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);

if (!!hash_tags) {

for (var j = 0; j < hash_tags.length; j++) {

hash_tag = hash_tags[j];

hash_tag = hash_tag.replace(/^ /, "");

hash_tag = hash_tag.replace(/[\s\n]$/, "");

hash_tag_name = hash_tag.replace(/^#/, "");

hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';

text = text.replace(hash_tag, hash_url);

}

}

//日付表示形式を「out_date1」の部分で変更

//out_date1：月/日　時:分　

//out_date2：月/日

//out_date3：時:分

//out_date4：日時表示無し

out += '<li>' + text + ' <span class="twitdate">' + out_date1 + '</span></li>\n';

}

out += '</ul>\n';

document.getElementById('twitter').innerHTML = out;

}

//twitter表示ここまで

</script> 

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>

■CSS
CSSに貼る部分です。こちらで背景色や文字色などのデザインカスタマイズをしてください。
いらない要素は行を削除してください。

/* twitter用サイドバー表示用CSS　 ---------------------*/

.twit {

/* 背景色設定 */

background-color: #ffffff;

/* 横幅設定 */

width:150px;

/* 枠線設定　太さ・色・スタイル */

border: 2px #999999 solid;

/* 枠外隙間設定　上・右・下・左 */

margin: 10px 0px 10px 0px;

/* 枠内隙間設定　上・右・下・左 */

padding: 5px 10px 5px 10px;

}


.twit li {

/* フォント */

font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";

/* 文字大きさ */

font-size: 12px;

/* 文字色 */

color: #000000;

/* 行間 */

line-height: 150%;

/* ツイートのリストスタイル */

list-style:disc;

/* 文字揃え */

text-align: left;

/* ツイートとツイートの隙間*/

margin: 7px 0px 7px 10px;

}

.twitdate{

/* ツイート時刻の文字大きさ */

font-size: 10px;

/* ツイート時刻の文字色 */

color: #666666;

}

img.twitpic{

/* 画像の隙間 */

margin-bottom:5px;

padding:3px;

/* 画像の枠色 */

border: 1px #666666 solid;

/* 画像の背景色 */

background: #ffffff;

}

上記はレンタルブログへの設置を想定して書いてますが、別ファイルをサーバーにおける場合は
Javascriptコードの//ここから　//ここまで　の間の部分を別ファイル（twitter.jsとか）にしてサーバーに置いて

<div class="twit"><div id="twitter"></div></div>

<script type="text/javascript" src="外部JavaScriptファイルのURL"></script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback"></script>