マッシュアップの履歴
TwitterがそうやけどmindiaもAPI公開しまくってマッシュアップがたくさん生まれてほしい。
http://nishikokura.com/
↑これのPHPソースはこんな感じ
if(!isset($_GET["name"])){ $book_name = "nishiko"; }else{ $book_name = $_GET["name"]; } $keywords = file_get_contents("http://mindia.jp/?module=book_keyword_json&book=".$book_name); if(isset($keywords)){ }else{ $keywords = file_get_contents("http://mindia.jp/?module=book_keyword_json&book=nishiko"); }
<script src="./js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ var menu = '/<a href="http://mindia.jp/book/nishiko" class="ja">西小倉パンデイロ</a>/<a href="http://nishikokura.com/stock_family/" class="ja">株式家庭</a>/<a href="http://mindia.jp">mindia</a>/<a href="http://mixi.jp/view_appli.pl?id=9666">120pedia</a>/<a href="http://mixi.jp/show_profile.pl?id=272391">mixi</a>/<a href="http://twitter.com/pandeiro245">Twitter</a>/<a href="http://www.facebook.com/pandeiro">facebook</a>/<a href="http://www.lastfm.jp/listen/user/pandeiro245/personal">last.fm</a>/' var main = '<img src="./images/simple.jpg" />' $('#header').html(menu); $('#main').html(main); $('#footer').html(menu); }); var size = 10; var size_px = size + "px"; var keywords = <?php echo $keywords ?>; function start(){ for (var i = 0; i < 200; i = i +1){ var rand_class = Math.floor( Math.random() * 10 ); var rand_keywords = Math.floor( Math.random() * keywords.length ); $("#keywords").append('<a href="http://mindia.jp/book/<?php echo $book_name; ?>/keyword/' + encodeURI(keywords[rand_keywords]) + '" class="key_' + rand_class + '">' + keywords[rand_keywords] + '</a>'); } $("a").hover( function(){ this.style.backgroundColor = "orange"; }, function(){ this.style.backgroundColor = "#000"; } ); $("a").click( function(){ window.open(this.href,'_blank'); return false; } ); motion(); } function motion(){ var rand = ".key_" + Math.floor( Math.random() * 10 ); $(rand).css("padding",size_px); $(rand).css("font-size",size_px); $(rand).css("float","right"); if(size < 60){ size = size + 1; size_px = size + "px" setTimeout("motion()", 300); }else{ } } --> </script> </head> <body onload="start()"> <div id="header"></div> <div id="main"></div> <div id="keywords"></div> <div id="footer"></div> </body>