ポップアップさせるページのアドレスバーを外したいとか、ブックマークバーを非表示にしたいとか、サイズを指定したいという時にhtmlソースに直接書くjavascriptは以下のような感じで。
<a href="http://www.spiral-records.com/psts/" onClick="window.open('http://www.spiral-records.com/psts/','win','width=400,height=300,menubar=no,status=no,scrollbars=no') ; return false ;">＊＊＊＊＊＊</a>
ご覧の通りバー関係はyes / no で指定。
上記例にあるバー以外にlocation、directories、toolbarがあります。
サイズは普通に width height で指定。
また、「resizable」のyes / no でリサイズの可否も決められます。
というサイトがあります。
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にし、続いて(スピード)でスライドさせる。。。
すごく、直感的に書けて便利だと思います。
なお、日本語リファレンス内にセレクターをしらべるためのブックマークが用意されています。
ブックマークに追加して、クリックするとセレクタを入力するフォームが立ち上がります。
入力しOKすると、そのセレクタがどこにあるか調べることができます。
//4件に変更する場合は以下を記述。
setResultSetSize(GSearch.SMALL_RESULTSET);
//8件に変更する場合は以下を記述。
setResultSetSize(GSearch.LARGE_RESULTSET);
ウェブサイト・ブログに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！
立て続けに見かけたのでブックマーク的なエントリー
http://www.masukoisamu.com
http://kobayashisatomi.jp
あまりに連続して２つのサイトに到達したので、え、はやってるの？と思いましたが。。。
どうでしょ？
はじめてみたときのインパクトはGoodです。
Formのselect optionで入力項目を変更するjavascriptです。
別にselect optionでなくてもいくらでも応用できますし、innerHTMLで内容の入れ替えを行っているだけなので入力フォームじゃなくても別にいけます。
一部ソースにスマートじゃない部分ありますが、まあご愛嬌。
参加人数によって氏名、アドレス記入欄を変更します。
サンプルページの場合は、select optionのvalueがonChangeする際にfunction.ninzuChangeが動き、フォーム内容が切り替わるというようになっています。
function.ninzuChange内は、単純にvalueがninzu1ならこうする、ninzu2ならこうする。。。と記述してあります。
以下詳細（サンプルページのソースです）
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>
最近ブログパーツの制作を依頼されることがちょいちょいあるので、メモ。
まずはじめに、
フローティングブログパーツの作り方、こっそり教えます（前編）
がとても親切な解説をしています。ありがとうございます。
で上記ページをもとにブログパーツの制作方法について簡単にいうと、
①FLASHを作る
②FLASHを埋め込ませるためのスクリプトとソースを書く
の2点です。
また注意点として
があげられます。flashのセキュリティの関係ですね。
仕組みは想像より簡単なので、FLASHの制作にたけた人であれば
ブラウザ間の互換性
プロモーションであれば効果測定の施策をきちんとする
この点に労力を割くことになるのでは。
一時期はjavascriptは敬遠されcssによるロールオーバーが多かったと思うけど、ここんとこAjaxの攻勢によりjavascriptが見直されているなか、ページ内に色々な動きをつけるために複数のjavascriptファイルをかませることって非常に多い。
javascriptをいちから簡単にすらすっらとかけるヒトはいいけど、javascriptはソースをひっぱってきて使うっていうことが多々ある。
そんなときにこまるのが、それぞれのjavascriptファイルがお互いに干渉して一方が動かなくなったりしてげんなりすることってありません？
そんなわけで、同じ動きを実現するにもいくつかの違うjavascriptがあると便利。
さしかえて検討できます。
ということで、画像のロールオーバーを実現するjavascriptをまとめました。
といっても今回は２こだけだけど。
タブ切り替えのjavascriptで今制作中のサイトで利用するのに完璧なものがなかったので、
moo.fxを利用したタブのソース（http://www.nyokiglitter.com/tutorials/tabs.html）を改良して作った。
1. 動きがあること
2. 最初は用意されたタブが開いていない
3. タブを閉じることができる
以上が必須要件。
1は今回の元ソースが個人的には最適な動作をしてくれていたのでほとんどいじっていない。
2と3は探したけれども、これがない。
moo.fxのスクリプトとcssおよびhtmlの関係を見ていると2と3を実装できそうな気配があったのでチャレンジしたところ、完成！
以下が今回作成したデモです。
http://www.spiral-records.com/psts-lib/tabaccordion081027/tabbed.html
詳細は下記の通り。
プログラム周りは後追いのため弱い自分ですが、日々努力中といった感じです。
Google AJAX Feed APIを用いて外部サイトやブログの一覧を表示すべくGoogle AJAX Feed APIのデフォルトソースをいじくっていましたが、その途中で使いやすいやつ発見。
Google AJAX Feed API でブログの人気エントリーを表示するサンプル - F.Ko-Jiの「一秒後は未来」
素敵なソースありがとうございます↑↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API でブログの人気エントリーを表示するサンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("読み込むｒｓｓのurl");
feed.setNumEntries(15);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var a = document.createElement("a");
a.href = entry.link;
a.appendChild(document.createTextNode(entry.title));
div.appendChild(a);
var img = document.createElement("img");
img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
with(img.style) {
verticalAlign = "middle";
marginLeft = "4px";
}
div.appendChild(img);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head><body>
<div id="feed"></div>
</body>
</html>
さらに、
Google Maps API。
企業ウェブサイトでももう普通に取り入れられていますよね。
簡略化しわかりやすくしたオリジナルな地図もいいし、ユーザーが普段使い慣れた地図（Google Maps）を使うのも良い。
ターゲットユーザーや、状況に応じて、上手に使っていきたいです。
で、使い方。
まずは貼付けるウェブサイトのアドレスをGoogle マップ API への登録 - Google マップ API - Google Codeで打ち込み、「APIキーを生成」します。
MooToolsライブラリのFancy menuです。
現在制作のクライアントサイトでmenuの見せ方を検討していましたが、flashではなくても動きのある感じをだしたい。
ということで、web creaters9月号に載っているMooToolsライブラリのFancy menuをベースに制作することにしました。
例：↓
