2009年8月アーカイブ

http://tweet.seaofclouds.com/

というサイトがあります。
twitterに関するjQuery.jsを用いた一覧表示を可能にするjavascriptです。

このjsに関する詳細は以下のブログに記載がありました。
丁寧な説明です。

http://web-marketing.zako.org/twitter/jquery-plugin-for-twitter.html

今回は、http://tweet.seaofclouds.com/の下段に例示されている、指定したキーワードを含むつぶやきの一覧をためしています。

日本語の方のブログの通り、
jquery.js　と　jquery.tweet.js
というjavascriptファイルを使います。

jquery.tweet.jsには表示したい件数や画像サイズの指定などを指定の箇所に記載します。

あとはhtml側のヘッダにjqueryの書き方にそって


$(function(){
$('.tweet').tweet({
query: "%e6%a5%bd%e5%99%a8"
});
});


とし、body内に


<div class="tweet"></div>


と反映する場所を書きます。

検索キーワードは英語ならいいんですが、日本語はエンコードする必要があります。

ので、http://www.tagindex.com/tool/url.htmlとかで、utf-8にエンコードして埋め込みます。

ちなみに下のサンプルは「楽器」なので「%e6%a5%bd%e5%99%a8」

どうでしょ？

まずは、日本語版リファレンスサイト：http://semooh.jp/jquery/

リファレンス等から引用しつつ、加筆修正をしたりして、自分なりに理解しやすいようにまとめています。

スピードに関する重要な関数ready(fn)

DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。

殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。
ということは、重い画像などがあると、それのロードを待つことになり、体感処理速度が重く感じてしまうことがるということです。
それを解決するために、readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

ready関数にコールバック関数を渡します。
コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。

この関数を使う場合、bodyのonloadイベントには何も書かないこと。readyイベントが実行されなくなってしまいます。

$(document).readyを用いてもかまいません。複数の関数を登録した場合、登録した順に実行されます。

jQueryはセレクターを操るのがすごく楽！

これが一番のjQueryのポイントでは。
h1とか、dic#naviとか、cssを書くときの感覚で操作したいセレクターを指定することができます。

書き方は

$('セレクタ')

超単純！
セレクタに続いてAPIを記載することで簡単に操作できるわけです。

例えばこのサイトのフッターですが、ブラウザのサイズが変更されるといったん消えて再登場しますが、これは


$(window).resize(function(){
$("#setting-footer").css("display", "none").slideDown("500");
});

のように書かれています。

$(window).resize(function()

windowがresizeされたときfunctionする。

functionの内容は

$("#setting-footer").css("display", "none").slideDown("500");

セレクタdiv idの#setting-footerのcssをdisplay:noneにし、続いて(スピード)でスライドさせる。。。

すごく、直感的に書けて便利だと思います。

なお、日本語リファレンス内にセレクターをしらべるためのブックマークが用意されています。

[jQuery Selectors Inspector]

ブックマークに追加して、クリックするとセレクタを入力するフォームが立ち上がります。
入力しOKすると、そのセレクタがどこにあるか調べることができます。

//4件に変更する場合は以下を記述。
setResultSetSize(GSearch.SMALL_RESULTSET);

//8件に変更する場合は以下を記述。
setResultSetSize(GSearch.LARGE_RESULTSET);

IE6 No More [http://www.ie6nomore.com/]です。

まあもう何年も言われ続けていることで、IE6がどれだけ多くのストレスかという。。。

正直このブログもそうですが、個人運営の小さいサイトは最近は意図的にIE6は未対応にしています。
だって時間もったいないし、対応すると認めたことになる（笑）　
ええ、反抗ですよ。IE6ユーザーなんてクソ食らえです、そんなやつ近づかないで結構！（笑）

断っておきますが、仕事はもちろん色々考慮しています（誤解ないように。。。）

ちなみに先月のIEバージョンシェアについて、某運営サイト（ユーザーは10代後半から30代までの男性がメイン、ウェブリテラシーはいたって普通の人たち）を調べたところ、

IE7
IE6
IE8

の順番でIE6は28％を占めていました。IE8が22％。

今年の2月の時点では同じ順位ながらIE6は36.5％、IE8は0.8％
IE8が一気に浸透し、徐々にIE6が駆逐されてきているのが目に見えて分かります。

まあそれでも、28%って。

大分いますね。。。

微力ながらIE6の駆逐にこれからも貢献したいと思います。


<!--[if lt IE 7]>
このコメント部分はバージョン7未満のIEしか解釈しません
<![endif]-->


パティ･スミス（Patti Smith）という素晴らしい女性アーティストがいる。

はじめて聞いた中学生の自分には、正直その素晴らしさがいまいち伝わってこなかった。。。というかさっぱり伝わってこなかった。
ピストルズのあからさまに挑発的なリリックやサウンドだとか、ダムドとかの方が分かりやすかったから。

でも何か気になってどうしても中古屋に売りに出すことはなかった。
学生時代金にこまって何度レコードの棚をひっくり返して中古屋にむかったことか。
それでも、パティ・スミスはレコードの棚から消えることはなかった。
売ってしまおうと手に取り、ジャケットに写るパティ・スミスをみると、いつも「ま、いいか。。。」と思い直したのだった。

パティ・スミスの素晴らしさに気づくのは、Joy Divisionにはまった頃よりもずっと後の社会人になってからだ。

彼女自身がアートだった。
全身全霊のアートとは、すなわちその人間、人間力にのみ見出せる。
人間（生物）そのものこそが、この世界が生み出す最上の芸術。

以前、このブログで岡本太郎について少し書いたが、それと同じような心境だ。

パティ・スミスまたは彼女の作品についてはいくつものレビューが書かれているし、今度日本でも公開される「Patti Smith:Dream of Life 」でも赤裸々に彼女を知ることができるだろう。もちろんレコードを聴けば一番よくわかることだ。

今もなおリアルな表現者であり続ける彼女が、夫である元MC5のフレッド・スミスの死について語った言葉がこのエントリーのタイトルである。

「彼は眠ったのではない、人生という夢から目覚めたのだ。」

なんか久々。

photoshop CS3でアニメーションgif作った。

twitterのローディング用。

photoshopCS3で完結できます。

今回は1レイヤーを一コマとして、「ウィンドウ　＞　アニメーション」でアニメーションフレームを表示。
右下にある

でタイムラインアニメーションとフレームアニメーションの切り替えができるので、フレームアニメーションにしてフレームの秒数設定。

gifで書き出しで終了。

ちょっと改良〜

今朝ほど某クライアントのウェブ担当者からMovable Type 4 で編集画面がグレーになってしまい編集できない！という連絡がありました。

windows XP　Firefox　です。

色々調べているとjavascriptが関係しているとの情報がいくつか見られます。

Movable Type 4 でテンプレート編集画面がグレーで編集できない場合の対処法

上記サイトに詳しく記載があり大変参考になります。
ちょっと自分でも検証してみますが、取り急ぎ。

ちなみにクライアントにjavascript無効にしてもらって、リロードしてもらったけどまだ、駄目で。
リロードではなく「デザイン　＞　テンプレート　＞　」とやり直してもらったら編集できるようになりました。

もうちょい調査後、追記したいと思います。

ウェブサイト・ブログにtwitterのつぶやきを表示させるためのjavascript。
以下のサイトで説明とjsファイルがダウンロードできます。

http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

ものすごく簡単。
上記サイトでtwitter.jsダウンロードしてアップ、htmlにソースと表示ブロックを記載するだけ。

デザインは各自いじってくださいという簡単なソースです。

html中表示したい場所に以下のようなソースを記載。
上記アドレスサンプルの日本語版的な。。。


<!--twitter用-->
<div id="tweet">
<p>Please wait while my tweets load <img src="http://www.spiral-records.com/psts/images/loading2.gif" /></p>
<p><a href="http://twitter.com/novolver">tweeterデータ取得中だけど、だめだったらクリックしてね</a></p>
<script src="http://www.spiral-records.com/psts/twitter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
id: '***ID***',
count: *表示コメント数*,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>
</div>
<!--twitter用　end-->


twitter APIを使っているので、

Twitter API Wiki
Twitter API Wiki　（日本語）

で勉強するとカスタマイズできます（ハズ（笑））。
Wiki（日本語）中に翻訳バージョンへのリンクもありますが、Twitter仕様書の日本語訳は
http://watcher.moe-nifty.com/memo/2007/04/twitter_api.htmlです。
こういう方はほんとありがたいです。

ちなみにAPI規制：60分間に70リクエスト。認証を伴うリクエストのみ。POSTは除外の一文あり。ほほう。

↓サンプルです。

なお、というか今気づいたけどMovable Typeを利用したサイトであればアクションストリームを利用する方法があったね！
shit！

締め切り前提出を急遽もとめられた案件発生のため、予定より１日遅れでVMware Fusionをインストール、MacでWindows XP動くようにしました。
VMware Fusionはネットでダウンロード版を購入、安い！

ちょっと画像小さいですが、dock真ん中ご覧の通りメモリは結構くいます。（4G積んでいます）

動きはまあサクサクという感じではないですが、今のところ申し分ないですね。

fusionのインストール、XPのインストールともにほぼ説明書いらず。結構カンタンです。

IEですが、

１.　IE8をダウンロード　：Internet Explorer 8　かつてない新機能
２. IE7のスタンドアローンをダウンロード　：Internet Explorer 7 running side by side with IE6. (standalone) | TredoSoft
３.　IE Multipleで残りのバージョンをダウンロード　：Install multiple versions of IE on your PC | TredoSoft

で設置可能です。

情報元：http://d.hatena.ne.jp/amachang/20080324/1206352854

http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

今は↑のような便利なものもあるようです。

、、、まあこれやっててMTのアップグレード遅れてこの時間ですが。

もう寝ます。

Good night...

2009/12/15
とても残念な追記ですが、やはり色々挙動が純粋なWindowsコンピュータと違いまして、結局普通にPC立ち上げて作業しています。（苦笑）
ちょっともったいない出費になったかな。。。

ということでMT4にアップグレードしました。MT5目前になにを。。。とか色々言わないでください。（なんかMT3の管理画面一つくらい残しておきたくて、MT3のままにしてたんです。）

MT4へのアップグレードはテンプレ修正が面倒ですが（終わってないし）、それ以外は結構楽です。config.cgiとDBを別でアップする程度で済んじゃいます。

実は、前回エントリー後に数件ですが、「俺のコメント無視されてたと思っていた」というような内容のメール・電話をもらいまして（苦笑）

あー意外とみんなコメントくれてたんだということにも気づかされ。。。

ほんとすみません。こうして深夜まで作業したので許してください。

http://spfdesign.com/blog/

↑まったく知らない方ですが、今回の件はこの方と同じ心境（たぶん）です、エヘ。

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

コメント機能が動いていない。。。

考えられるテンプレの初期化を行うも直らず。

「コメントは投稿されました、管理者の承認待ち」というメッセージはしっかり表示するもコメント一覧に一切登録されてこない。

んー・・・

スパムコメントもいっさい来なくなった理由がわかった（苦笑）

MT3はもうやめろとそういう神の声か。。。

とりあえずここ最近コメントくれていた方、申し訳ありません。

コメント機能不具合があり承認もへったくれもない状況です。

どうにかします・・・！

JET STREAMって今、大沢たかおなんだね。。。
しばらく聞いていないうちに。。。

伊武雅刀　最高だった！

http://www.tfm.co.jp/jetstream
伊武雅刀オフィシャルサイト

というか自分、Twitterやれって感じだよね、うん。

flashを背景にするためのCSSテクニックの一つ。


<div id="fla_css">
ここにswfファイルを配置
<div id="html-layer">
ここにコンテンツを配置
</div>
</div>


HTML上は上記の通り。

CSSは以下の通りです。

div#fla_css {
position:relative;
}

div#fla_css div#html-layer {
display:block;
position:absolute;
top:0px;
left:0px;
background:none;
}


マージンとか上記ソースの通りでなくても問題ありません。

http://www.adobe.com/jp/products/creativesuite/faq/

上記ページ文中にもあるとおり、adobeが次期バージョンからPowerPCのサポートをやめるようです。

Intelベースのがかなり成熟してきたんで仕方ないですね。

さて、手元にはリビング用の最下位ランクへと位置づけたibookG4と最新iMacによって完全にサブからもはずれ箱にしまわれたiMacG5があり、その処遇について今朝から検討を始めました（まあ、自分で物思いにふけるだけだけど）。

立て続けに見かけたのでブックマーク的なエントリー

http://www.masukoisamu.com
http://kobayashisatomi.jp

あまりに連続して２つのサイトに到達したので、え、はやってるの？と思いましたが。。。

どうでしょ？

はじめてみたときのインパクトはGoodです。

Movable Typeを使っているヒトではほぼ知らないヒトはいないのではというサイト「小粋空間」！ですが、またすごくよさげなプラグインを公開されています。

CommentCustomFieldプラグイン：http://www.koikikukan.com/archives/2009/08/14-025555.php

コメント投稿にて画像の投稿などを可能にしてくれるプラグインのようです。

さっそく使ってみますー。

Formのselect optionで入力項目を変更するjavascriptです。
別にselect optionでなくてもいくらでも応用できますし、innerHTMLで内容の入れ替えを行っているだけなので入力フォームじゃなくても別にいけます。

一部ソースにスマートじゃない部分ありますが、まあご愛嬌。

サンプルページ

参加人数によって氏名、アドレス記入欄を変更します。

サンプルページの場合は、select optionのvalueがonChangeする際にfunction.ninzuChangeが動き、フォーム内容が切り替わるというようになっています。

function.ninzuChange内は、単純にvalueがninzu1ならこうする、ninzu2ならこうする。。。と記述してあります。

以下詳細（サンプルページのソースです）

flv動画を手軽に再生するための方法のひとつ。

Perian をインストール。

http://perian.org/

そうするとQuickTime Playerで再生できるようになりまっす。

adobeのspryライブラリを用いたjavascriptによるxmlデータの読み込み表示方法について。

xmlデータは内部データのみで、外部データはこの方法では無理なのであしからず。

http://labs.adobe.com/technologies/spry/home.html

ライブラリのうちxpath.jsとSpryData.jsを使います。


<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>


という感じでxmlデータファイルのパスと、xmlデータファイル内の表示したい内容までのパス（今回はrss/channel/item）を記載。

body内に例えば


<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>


spry:regionで範囲指定とspry:repeatで繰り返しの指定。spry:repeatがないと最初のデータしか取得表示しません。表示したいデータの属性を{***}で指定すればOkです。

サンプルページ

上記サンプルの全ソースは以下の通り。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xmlデータ読み込みのためのjavascript</title>
<script src="../../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>
</head>
<body>
<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>
</body>
</html>


家庭の都合もありつつ、仕事も打ち合わせが重なりなんだかんだ外出しています。
太らないためにはいいので微妙に歓迎。

本日はパンフの修正打ち合わせ。違うセクションが入り込んでくるとこうも修正箇所が増えるかというくらいの修正量が。。。まあ、、、、ね。

今年はまだ家のクーラーつけていません。理由、嫌いだから。
暑くても、風の心地が一番です。

今日のハイライトは打ち合わせ後、スタバのアイス・スターバックス・ラテ。

夕方以降はjavascriptで悶絶。

そんな一日。まあ、いいんじゃない？

http://www.apple.com/jp/startpage/

軽くてすごい！（スクリーン上でマウスをぐりぐりと）