小林賢太郎演劇作品『うるう』を観に行ってきました。
小林賢太郎プロデュース公演、通称「K.K.P」の8作目になる今作品。

もともと「ラーメンズ」というお笑いコンビを知ったのをきっかけに小林賢太郎さんを知り、2010年ソロコントプロジェクトである「POTSUNEN -ポツネン-」を初めて観に行ったのです。それから彼の笑いのセンスや面白さに惹かれて、尊敬する人物の一人になりました。

ということで小林賢太郎の公演は必ず観に行きたいと思うようになり、今回観に行ってきました。

今年がうるう年ということにちなんだ今作品『うるう』。
世界でたったひとりの余った人間「うるうびと」の物語。

お芝居、言葉遊び、演出、歌（?）。どれをとっても素敵でした。とっても面白かったです。POTSUNENとはまた違った面白さでしたね。

やはり生で観ると素の演技がたまに観れるのが良いですね。緊張感というのもありますが。
この日は名古屋公演の千秋楽だったせいか、かなりはしゃいでいました。

小林賢太郎さん、素敵なパフォーマーです。
また公演があるときは必ず観に行きます。

NHK Eテレで今年の4月から「デザインあ」という番組が放送されています。その中で出てくる『「あ」のテーマ』がWebコンテンツとして登場しました。

「あ」のテーマ

画面に「あ」と書くと、その「あ」が動き出すというコンテンツになっています。
テレビで見ていただけだったものがWeb上で体験できます。

面白くてすごいです。
自分の書いた文字が動き出すというのは楽しいですね。

他にも「あ」以外に書いてみました。画数が3であれば大丈夫です。

みなさんもぜひ体験してみてください。

『「あ」のテーマ』
http://www.nhk.or.jp/design-ah/ah-song/

Twitterのツイートを自分のブログやサイトに表示させるために便利なTwitter ウィジェットというものが公式から出ています。

その公式のウィジェットは、ある程度カスタマイズができるようになっていますが、できるものはどれも同じような見た目になってしまって、何だか物足りません。それに自分のブログやサイトに合ったデザインになりません。

そんな人のためにとっておきの方法を紹介します。
実は、このウィジェットはCSSによってカスタマイズすることができるんです。

今回、紹介するのは一番使われることが多いと思われる「プロフィールウィジェット」をカスタマイズする方法です。

1．プロフィールウィジェットをカスタマイズするページにアクセスする。

Twitterのホーム画面です。上の画像の赤く囲ってある部分に「素材」という項目があるのでクリックします。

「素材」ページにアクセスすると、「フォローボタン」、「ツイートボタン」、「Twitterロゴとアイコン」といったものがありますが、その中にある「ウィジェット」を選択します。

「自分のサイト」を選択します。

「検索ウィジェット」、「お気に入りウィジェット」、「リストウィジェット」といったものがありますが、今回は「プロフィールウィジェット」を選択します。

2．プロフィールウィジェットをカスタマイズする。

＜設定＞

■ Twitterのユーザー名

＜カスタマイズ＞

■ 最新データを取得するか
■ スクロールバーを表示するか
■ ツイートの表示方法（一定間隔で更新するか、全ツイートを取得するか）
■ 表示するツイート数（1~30）
■ プロフィール画像を表示するか
■ 投稿時刻を表示するか
■ ハッシュタグを表示するか

＜デザイン＞

■ ウィジェットの色（外枠の背景、外枠の文字、ツイート投稿欄の背景、ツイートの文字、リンク）

＜サイズ＞

■ ウィジェットのサイズ（横幅、高さ）

初期のままだと下記のようなコードになっています。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
　　version: 2,
　　type: 'profile',
　　rpp: 4,
　　interval: 6000,
　　width: 250,
　　height: 300,
　　theme: {
　　　　shell: {
　　　　background: '#333333',
　　　　color: '#ffffff'
　　　　},
　　　　tweets: {
　　　　background: '#000000',
　　　　color: '#ffffff',
　　　　links: '#4aed05'
　　　　}
　　},
　　features: {
　　　　scrollbar: false,
　　　　loop: false,
　　　　live: false,
　　　　hashtags: true,
　　　　timestamp: true,
　　　　avatars: false,
　　　　behavior: 'all'
　　}
}).render().setUser('Twitterのユーザー名').start();
</script>

上記のコードをちょっと変更したものが下記のコードです。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
　　version: 2,
　　type: 'profile',
　　rpp: 5,
　　interval: 6000,
　　width: 200,
　　height: 300,
　　theme: {
　　　　shell: {
　　　　background: 'transparent',　<!-- 背景透明 -->
　　　　color: '#222222'
　　　　},
　　　　tweets: {
　　　　background: 'transparent',　<!-- 背景透明 -->
　　　　color: '#222222',
　　　　links: '#0066cc'
　　　　}
　　},
　　features: {
　　　　scrollbar: false,
　　　　loop: false,
　　　　live: false,
　　　　hashtags: true,
　　　　timestamp: true,
　　　　avatars: false,
　　　　behavior: 'all'
　　}
}).render().setUser('Twitterのユーザー名').start();
</script>

ここで重要なことは、backgroundプロパティにtransparentを指定することです。
これによって背景が透明になるので、どのような背景にも合わせることができます。

3．プロフィールウィジェットをCSSでカスタマイズする。

JavaScriptの読み込みやパーマリンクの記述などがありましたが、コードが長くなってしまうので一部を省略して、CSSに関わる部分だけを残しました。

<div class="textwidget">
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div style="width: 200px;" class="twtr-doc">
<div class="twtr-hd">
　<a class="twtr-profile-img-anchor" href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" class="twtr-profile-img" alt="profile"></a>
　<h3>Twitterの名前</h3>
　<h4><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank">Twitterのユーザー名</a></h4>
</div>
<div class="twtr-bd">
<div style="height: auto;" class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-reference-tweet"></div>
<div id="tweet-id-5" class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img"><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" alt="Twitterのユーザー名 profile"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
　<a class="twtr-user" href="#" target="_blank">Twitterのユーザー名</a>
　ツイート部分
<em>
　<a href="#" time="時刻" class="twtr-timestamp" target="_blank">0 hours ago</a> · <a href="http://twitter.com/intent/tweet?in_reply_to=78808835170643968" class="twtr-reply" target="_blank">reply</a> · <a href="#" class="twtr-rt" target="_blank">retweet</a> · <a href="#" class="twtr-fav" target="_blank">favorite</a>
</em>
</p>
</div>
</div>
</div>
<!-- <div id="tweet-id-4"></div>~<div id="tweet-id-1"></div> 省略 -->
<!-- tweets show here -->

</div>
</div>
</div>
<div class="twtr-ft">
<div>
　<a href="http://twitter.com" target="_blank">
　<img src="http://widgets.twimg.com/i/widget-logo.png" alt="">
　</a>
　<span>
　<a href="http://twitter.com/dakkie10" style="color:#222222" class="twtr-join-conv" target="_blank">Join the conversation</a>
　</span>
</div>
</div>
</div></div></div>

上のソースを簡単にまとめると下の画像みたいな感じです。

ウィジェットにはTwitter独自のwidget.cssというCSSが読み込まれているので、これを上書きするかたちでカスタマイズしていきます。CSSを読み込む位置はwidget.cssを上書きするので、</body>タグの直前が良いかと思います。

＜外枠を消す＞

外枠というのは、上の画像でいうと1と3の部分です。外枠を消す、つまりツイート部分のみを表示させます。

.twtr-hd {
　　display: none;
}
.twtr-ft {
　　display: none;
}

＜フォントを変更する＞

自分のブログやサイトと同じフォントにするにはウィジェットに対して新たに指定してあげる必要があります。
widget.cssでフォントの指定に「!important」が使われているために「!important」を付け加えないと上書きができないので、必ず付け加えてください。

.twtr-widget {
　　font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", Verdana, Helvetica, sans-serif !important;
　　font-size: 93% !important;
　　line-height: 1.7 !important;
}

＜リンクスタイルを変更する＞

widget.cssでマウスオーバー時にテキストにアンダーラインが表示されるようになっているので、これをなくします。

.twtr-doc a:hover {
　　text-decoration: none !important;
}

今回、このブログで使用しているものを紹介しましたが、それ以外にもTwitter独自のwidget.cssを上書きすることによって、簡単にウィジェットをカスタマイズすることができます。

ただどのCSSがどこに使われているのかがわかりづらいので、Firefoxを使っている人であればFirebugというアドオンをおすすめします。どのCSSがどこに使われているのかを簡単に見つけることができます。

ぜひみなさんも試してみてください。

でも、「English（US）」にキーボードを切り替えるときに地球みたいなマークを3回もタップしなければいけません。

何か良い方法はないのだろうかと思っていたところ、地球みたいなマークを長押しすることによって下の画像のように表示されることがわかりました。これによってすばやくキーボードを切り替えることができます。

実はこの方法はMobile Safariのブックマークにデフォルトである『iPhoneユーザガイド』の「各国キーボード」から「キーボードを切り替える」という項目に載っています。

説明書は一通り読んでおいたほうが良いと思った出来事でした。

「www」って何？

そもそも「www」とは、World Wide Webの略称でサーバーのホスト名を示しています。またサブドメインと呼ばれているものです。

「www」をホスト名に設定しなければならないという決まりはないので、WebサイトのURLに「www」が付いていたり、付いていなかったりということが起きます。

でも、両方が混在すると検索エンジンやソーシャルブックマークなどで別々のWebサイトとして認識されてしまいます。これは何とかしないといけません。

URLを統一させる。

URLに「www」を付けるのか、付けないのかを設定する方法があります。
Webサーバーの動作を制御する.htaccessファイルに下記のコードを記入することによってできます。

「www」を付ける

RewriteEngine on
RewriteCond %{HTTP_HOST} ^dakkie\.com
RewriteRule (.*) http://www.dakkie.com/$1 [R=301,L]

「www」を付けない

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.dakkie\.com
RewriteRule (.*) http://dakkie.com/$1 [R=301,L]

「dakkie.com」の部分は自分のドメインに変更してください。

「www」を付けても付けなくてもSEO的に違いはありませんが、どちらかに統一させるのはしておいたほうが良いと思います。

「WordPressにソーシャルネットワークボタンを追加する。」で紹介したソーシャルネットワークボタン、ソーシャルブックマークボタンをWordPressに追加するプラグイン『WP Social Bookmarking Light』の「ツイートする」ボタンはデフォルトでは記事タイトル、短縮URL、viaをツイートするようになっていますが、記事タイトルの後ろにブログタイトルを追加したいと思ってちょっとプラグインの中身を変えてみました。

services.phpの中に下記のような「ツイートする」ボタンについての記述があります。

/**
* @brief twitter
*/
function twitter()
{
　　$options = wp_social_bookmarking_light_options();
　　$twitter = $options['twitter'];
　　$width = $twitter['width'] != '' ? $twitter['width'] : '120';
　　$height = $twitter['height'] != '' ? $twitter['height'] : '20';
　　return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
　　　　.' src="http://platform.twitter.com/widgets/tweet_button.html'
　　　　.'?url='.$this->encode_url
　　　　.'&amp;text='.$this->encode_title
　　　　.($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
　　　　.'&amp;lang='.$twitter['lang']
　　　　.'&amp;count='.$twitter['count']
　　　　.'"'
　　　　.' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
　　　　.'</iframe>');
}

これを解読してみると、「.’&amp;text=’.$this->encode_title」のあとに入れればいいことがわかったので、下記のようにブログタイトルを加えました。わかりにくいですが、太字で「.’ – dakkie blog’」って書いてあります。

/**
* @brief twitter
*/
function twitter()
{
　　$options = wp_social_bookmarking_light_options();
　　$twitter = $options['twitter'];
　　$width = $twitter['width'] != '' ? $twitter['width'] : '120';
　　$height = $twitter['height'] != '' ? $twitter['height'] : '20';
　　return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
　　　　.' src="http://platform.twitter.com/widgets/tweet_button.html'
　　　　.'?url='.$this->encode_url
　　　　.'&amp;text='.$this->encode_title
　　　　.' - dakkie blog'
　　　　.($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
　　　　.'&amp;lang='.$twitter['lang']
　　　　.'&amp;count='.$twitter['count']
　　　　.'"'
　　　　.' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
　　　　.'</iframe>');
}

これで記事タイトルの後ろにブログタイトルが追加されました。
ただこの方法はプラグインの中身を直接変えてるので、プラグインを更新してしまうと元に戻ってしまいます。何か別の方法はないですかね。

ついにスッキリ！JAPANが公開されました。
ソースコードにアスキーアートで描かれていた謎の人物は松木安太郎さんでしたね。

ティザーサイトとはかなりギャップがあるデザインですが、このサイトはサンスタートニックシャンプーのキャンペーンサイトでスッキリしないモヤモヤした気分を入力すると、松木さんがそのモヤモヤを吹き飛ばすようなシュートを決めてくれます。そして松木さんがコメントをくれるというものです。

マウスの位置によって松木さんやキャッチフレーズが移動するので少し奥行き感があったり、松木さんがシュートを決めるまでの映像が流れたり、さらには松木さんがシュートを決めるときに画面のデザインが勢いよく壊れたりとダイナミックな演出が半端ないです。とてもユニークなサイトになっています。

PC向けサイトだけでなくスマートフォン向けサイトも用意されています。

完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。

1．HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>

2．<body>内に下記を追加します。

<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
　　so.addParam("wmode", "transparent");
　　so.addParam("menu", "false");
　　so.addParam("scale", "noscale");
　　if(so.write("flashcontent")){
　　　　var forcesize = new SWFForceSize(so, 900, 700);
　　}
</script>
<div id="footer_wrap">
　　<div id="footer"></div>
</div>

今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。

3．下記のようにCSSを記述します。

html, body, #flashcontent {
　　height: 100%;
}
body > #flashcontent {
　　min-width: 900px;
　　width: 100%;
　　min-height: 700px;
　　height: 100%;
　　background: #ffcccc;
}#footer_wrap {
　　width: 100%;
　　height: 105px;
　　margin: -105px 0 0;
　　position: absolute;
　　left: 0;
　　background: #ccffcc;
}#footer {
　　width: 900px;
　　height: 105px;
　　margin: 0 auto;
　　background: #ccffcc;
}

幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。

このプラグインをインストールして、WordPressの管理画面にある「設定」から「WP Social Bookmarking Light」をクリックすると、上の画像のような設定画面があらわれます。

位置
ソーシャルネットワークボタンを追加する位置がWordPressで記事の内容を表示するテンプレートタグである<?php the_content(); ?>の「Top」なのか「Bottom」なのかを選択します。

個別ページのみ
個別ページ、つまりsingle.phpのみにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、トップページやカテゴリーページ、アーカイブページにも追加する場合は「Disabled」を選択します。

ページ
固定ページにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、追加しない場合は「Disabled」を選択します。

サービス
WordPressに追加するSNSやSBMを選択してドラッグ&ドロップします。

ソーシャルネットワークボタンのレイアウトに関してはCSSで調整してください。

このプラグインを使えば簡単にソーシャルネットワークボタンをWordPressに追加することができます。

『WP Social Bookmarking Light』
http://wordpress.org/extend/plugins/wp-social-bookmarking-light/