ついったーで色々やってみようテスト。@anywhereやらwidgetやら色々。。

まずはWidgetテスト。

これは以前色々やったやつですお。

なにこれ超簡単w

背景色とかも変えられるのか
件数も変更できるし。
あとlive(リアルタイム)で表示も可(setIntervalとかで動かしてるのかな?)。これによりロードしなくても常に最新のつぶやきが上に表示されつづける。

表示めっさ増やしてスクロールバーも可
孫さんのだってイケるぜ。
(各色は孫さんのじゃなくて自分のtwitterの設定になるのね、当然だけど)

JSいじらんでもCSSをいじれば結構自由♪
※ただしCSS3に限る。

次に本命の@anywhereテスト!

まずは「Linkify」から手始めに。

この中にある、「@」から始まるアンスコを含む20文字以内の英数字であれば、 自動的にテキストにtwitterへのリンクが付与されること。(DOMめっさ追うのかな・・)

オイラのtwitterアカウントは @pntswrks ですお。

これ、表示上じゃ分かりにくいけど、簡単に言うと、<a href="http://twitter.com/pntswrks">って書かなくても勝手にリンクにしてくれる、って事ね。

つぎに「Hovercard」ですお。

これは上のLinkifyと連携させてもいいんだけど、コンテンツ内で「@」から始まるアカウントをみっけて、マウスオーバーするとツールチップらしきものが出てきて、そこでフォローとかできるシロモノ。

オイラのtwitterアカウントは@pntswrksですお。
孫さんのアカウントは@masasonですお。

でもこれ、メアドとかひっからないのかな。

example@example.com

↑大丈夫そうね。(連続するなかに「.」とかあったらはじいてるのかな?)←未検証だお。

ち、な、み、に、「@」で始まるテキスト以外でも出来るらしいお!

pntswrks

ほらほらぁ、画像にマウスのっけると出てくるでしょ?

まさそん

マサソンだって出来るお!

classの「hovercards-target-image」をトリガーにして、title属性の中身からアカウントを取得してる的な?

さてお次は、「followButton」ですお。

これ、特定のアカウントをフォローさせるボタンらしいんだけど、jsの引数内に指定したアカウント名が、ボタンの表記にも入るっぽいね。

仕組みとしては指定したIDの要素の中にわざわざiframeを読み込んで、そん中にbuttonタグを入れてるみたいだお。
(デザインをCSSで勝手に変更させないため?)

ほてほてお次は、「Connect」ですお。

これちと使いみちがわからん。。

んで最後に本命(?)、「tweetBox」ですお。

↑これがデフォルトのスタイルね。

↑で、これがカスタマイズのスタイルね。

で、しかもつぶやいた後にそれを表示させたりする事も出来るらしいね。

一応、渡すパラメータでちょこちょこ変えられるらしい。

ぱらめーた デフォ 説明
文字カウント boolean true 入力文字数カウント
高さ integer 515 (px) ボックスの高さ
integer 65 (px) ボックスの幅
見出し string "What's happening?" 見出しテキスト
ボックス内テキスト string none 最初にボックスに入れておくテキスト。@アカウントや#ハッシュタグや短縮リンクとかね。
ツイート後 function none ちっとこれややこしいけど、簡単に言うとツイートした後にどうこうするものらしい。

↑超適当に言うと、こんな感じ。まぁアテにしないで。

以上っす。

というワケでまとめ

めんどくせーけど適当にまとめてみるお。

てなところかな。

あ、ひとつ忘れた。

かものはしプロジェクトIT事業部 平田 雄一郎 @pntswrks

http://www.kamonohashi-project.net/it/