Traffic optimization

タカハシシステム(旧技術関係ブログ) : 3月 2012

Archive for 3月, 2012

MaltineRecordが風林会館でイベントやるという噂があったので調べてみた。キャバレーが借りられるんすね。これだけの広さでこの値段 … そしてこの雰囲気。これは素敵!

僕はテクノポップユニット三鷹という音楽ユニットとしても活動しています。音楽活動をしていると「メジャーデビュー」を目指して頑張ってると誤解されることがあります。もしくは「しょせん趣味なんでしょ?」と冷ややかな視線を向けられることも。

僕が音楽活動する理由

僕は音楽(テクノ)が好きなんです。その「現場にいたい」という気持ちが活動を続けさせています。続けていると、現場にいると、大好きな音楽の素晴らしさに触れる機会も増えます。

自分が楽しみたいから活動している…という自分勝手な理由です。

興味あるものを作る

曲を作ってるのは相方なのですが「自分の興味あるもの」を作ることは心がけてます。というよりも、自然とそうなってます。興味あることだから全力で面白がることができます。

誰かが作らないと生まれない

音楽だけでなく、この世にある創作物は誰かが作らないと生まれません。プロじゃないし多くの人に聴いてもらえないかもしれないけれど、聴いてくれた方にとって「楽しめる時間、楽しめる場所」を作りたいなと。

もっと増えればいい

働きながら音楽活動を続ける人が増えているように感じます。もっともっと、そんな人が増えればいいな。辞める必要がなければ続けてしまえばいいんです。そんな中から魅力的な音楽を奏でる人たちが出てくるかもしれないんですから。

音楽は無くならない

ただ自分のために音楽を作る人がいてもいい。多くの人に訴えかけるような音楽を作る人がいてもいい。富と名声が欲しくて音楽を作る人がいてもいい。アイドルとして誰かの生活を楽しくするために音楽を作る人もいい。仕事としてキッチリ音楽を作る人だって必要だ。

音楽で食べられる人が減ったとしても、音楽はなくなってほしくない。むしろなくなる未来は想像できません。

今後も続けます

とても当たり前のことを書き綴ってしまいましたが、10年近く音楽活動を続けてると、たまに考えを整理したくなるんです。我々の裏テーマは70歳になっても音楽を続けていること。まだ道は半ばですが、10年も続けてきたことだから出来ちゃうかもしれませんね。

そんなわけで今後ともよろしくお願いいたします!

デザインを変更してから、ブログに愛着が湧いてきました。それまでは既存のテンプレートを修正して使っていたのですが、今回は大きく変更。おかげで毎日更新する癖がついてきました。

オレのものだ感

もともと独自ドメインを取って運営していたので「オレのものだ感」は充分あったのですが、デザインを(ほぼ)オリジナルに変更したことで、より一層「オレのものだ感」が強まりました。

不特定多数の方に向けて

TwitterなどのSNSでは、フォローしてくださってる方の顔も浮かぶので、「外の世界に向けて発信している」ことを忘れがちなんです。それが原因で「高校生が飲酒ツイートして炎上」みたいなことがおきたり。

ブログは完全に「誰だかわからない不特定多数の人」に向けて書いています。この感覚がいいですね。誰が読んでくれてるんだろう。

こんな内容でも書いちゃう

不特定多数の人に向けて書いてるなら「役立つような記事」を書かなきゃと意気込むところなんですが、こんな内容でも書いちゃいます。もしかしたら1人くらいは「役に立たないブログでもOKなんだな」など感じていただけるかもしれませんし。

そもそも役に立つ記事ばかりを書くのは至難の業です。まずはブログを書く習慣を取り戻すのを優先しています。

もっとオレのものにする

このブログも書きはじめて4年を迎えようとしています。記事を積み重ねて「もっとオレのもの」にしていきたいです。

(脱線)気付けば140文字で書いてる

最近のブログを読みなおしてみると140文字1ブロックで書いています。それぐらいの量が読みやすいということもありますが、これは完全にTwitterの影響ですね。こういう方多いのでは?

ブログなどにソーシャルボタンを配置すると、右側の余白が気になることありませんか?こんな感じで。

結構有名な会社とかメディアでもズレたままになってたりします。

なんとかしたい

なんとか揃えたいなーと思って考えてみました。

ボタンのカウントを取得できれば、その桁数に応じて幅を調整してやれば(環境によって異なるので厳密にはアレですが)ざっくり大丈夫かなと。

とはいえ … 細かいところはサンデープログラマなのでご容赦ください。

TwitterやFacebookボタンのカウントを取得する

こちらの記事「ソーシャルボタン系のカウント数をPHPで取得して表示する」を参考に(ありがとうございます!)カウントを取得してみます。

/*
 * Get Social Button Count
 * facebook twitter hatena
 */
function get_social_counts($url){
    $counts = array();

    //encode url
    $encode_url = urlencode($url);

    //facebook likecount
    $likecount          = file_get_contents('http://graph.facebook.com/' . $encode_url, true);
    $decode_likecount   = json_decode($likecount, true);
    $facebook_likecount = ($decode_likecount[shares])? $decode_likecount[shares] : 0;

    //twitter tweetcount
    $tweetcount         = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $encode_url, true);
    $decode_tweetcount  = json_decode($tweetcount, true);
    $twitter_tweetcount = $decode_tweetcount['count'];

    //hatena bookmarkcount
    $bookmarkcount        = file_get_contents('http://api.b.st-hatena.com/entry.count?url=' . $encode_url, true);
    if(empty($bookmarkcount)){ $bookmarkcount = "0"; }
    $hatena_bookmarkcount = $bookmarkcount;

    //set array
    $count['facebook'] = $facebook_likecount;
    $count['twitter']  = $twitter_tweetcount;
    $count['hatena']   = $hatena_bookmarkcount;

    return $count;
}

引用:ソーシャルボタン系のカウント数をPHPで取得して表示する

カウントに応じて幅を決める

で取得したカウントを元に幅を決めていきます。

Facebookボタンが「0桁 = 70px、1桁 = 100px、 10桁 = 100px、 1,000桁 = 105px」ぐらい。

Twitterボタンが「0桁 = 88px、1桁 = 93px、 10桁 = 98px、 1,000桁 = 108px」ぐらいなので、ざっくりと設定。

function get_social_width($count){

	$width = array();

	if ($count['facebook'] == 0) {
		$facebook_width = 70;
	} elseif ($count['facebook'] > 0) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 99) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 999) {
		$facebook_width = 115;
	}

	if ($count['twitter'] == 0) {
		$twitter_width = 88;
	} elseif ($count['twitter'] > 0) {
		$twitter_width = 93;
	} elseif ($count['twitter'] > 99) {
		$twitter_width = 98;
	} elseif ($count['twitter'] > 999) {
		$twitter_width = 108;
	}

    //set array
    $width['facebook'] = $facebook_width;
    $width['twitter']  = $twitter_width;

    return $width;

}

これらの幅を各ボタンに指定してやればOKです。

でも問題がある

これだとブラウザの更新ボタン押さないと反映されないんですよね。課題が残りました。

このブログにアクセスすると右側に「Follow me」バッヂが表示されるのですが、スマートフォンでアクセスしたとき少し邪魔だなと気になっていました。

ということで、こちらの記事「Web サイトのスマートフォン最適化: UA 判別篇」を参考に function.php に関数を用意して判定することにしました。とても参考になりました!

参考記事でも触れられてますがUA判別のために文字列でリストを作るのは、なんだかスマートじゃないですよね。やはりメディアクエリで振り分けたほうがいいのか…。