ばぐだし

gura7.com

gura7.comみたいなデスクトップっぽいページを作る方法。

まず、mb.ideas.repositoryにアクセス。gura7.comはこのページをベースに作る。mb.ideas.repositoryは様々なjQueryプラグインを公開してくれているところで、今回のデスクトップっぽいインターフェイスの他にも面白そうなプラグインがいっぱい。

このデスクトップっぽいインターフェイスを作っているプラグインはmbContainersPlusなので、これをダウンロードする。

ダウンロードしたものにサンプルが入っているので、これを元に作っていく。（今回はさらに楽をするため、mb.ideas.repositoryのファイルを元に作った）意外に難しくはなく、ウィンドウは実は移動可能なdivタグであることに気づく。ユーザはまとまったdivタグをhtmlに追加し、class属性でウィンドウのスタイルを指定するだけ。ウィンドウのスキン（色など）はcssで指定できる。

  <div class="containerPlus draggable resizable {buttons:'m,c,i', icon:'browser.png', skin:'white', width:'500',iconized:'true', dock:'dock', grid:100}" style="top:100px;left:400px">
    <div class="no"><div class="ne"><div class="n">preiconized container</div></div>
      <div class="o"><div class="e"><div class="c">
        <div class="mbcontainercontent">
          <div class="evidence">
            <h3>And this is a preiconized container!</h3>
            <p>to preiconize containers just add the param <span style="font-weight: bold;">iconized:'true'</span></p>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras metus. Maecenas justo elit, lacinia sit amet, cursus ut, sagittis sed, eros. Suspendisse potenti. Maecenas nec nisi. Donec vestibulum sollicitudin tellus. Sed consequat pellentesque ante. Vestibulum turpis quam, vulputate nec, nonummy convallis, ultrices congue, ligula. Ut rutrum leo et orci. Proin pharetra. Nam non sem ut eros fringilla ornare. In ullamcorper lorem eget ipsum. Suspendisse semper enim in arcu cursus consectetuer. Suspendisse potenti. Proin libero eros, adipiscing quis, volutpat in, ultrices ut, lacus.</p>
          <p>Nulla facilisi. Vestibulum vel magna in ante lobortis semper. Integer posuere justo et urna. Vestibulum sit amet sapien ut quam tempor fringilla. Fusce a neque a enim mattis dapibus. Ends with a paragraph element!</p>
        </div>
      </div></div></div>
      <div >
        <div class="so"><div class="se"><div class="s"> </div></div></div>
      </div>
    </div>
  </div>

これでデスクトップっぽいインターフェイスはできあがり。mb.ideas.repositoryみたいな派手なエフェクトは本家を参照。私もソースコードを頂いて真似しただけなので。

さらにブログのRSSを読み込んで、ウィンドウを生成するスクリプトも追加している。RSSの読み込みはjFeedプラグインを使用。

function makeContainersFromRSS(url){
	$.getFeed({
    url: './proxy.php?url=' + url, //proxy.phpはダウンロードしたファイルのもの
    success:
    function(feed){
			$.each(feed.items,
				function(i,item){
				  if(i < 5){
					  $("<div/>")
						  .attr({id:item.title, width:"400", height:"", buttons:"m,c", icon:"blog.png",skin:"white"})
						  .css({left:-2500})
						  .addClass("containerPlus")
						  .addClass("draggable resizable")
						  .addClass("blog")
						  .append(
						    $("<div/>").addClass("no").append(
							    $("<div/>").addClass("ne").append(
								    $("<div/>").addClass("n").html("<a href=\"#\" onclick=\"$(this).parents('.containerPlus').find('.minimizeContainer').click();\">"+item.title+"</a>")
							    )
						    ).append(
							  $("<div/>").addClass("o").append(
								  $("<div/>").addClass("e").append(
									  $("<div/>").addClass("c").append(
										  $("<div/>").addClass("content").html(
											  (item.image?"<img src=\""+item.image+"\" alt=\""+item.id+"\" />":"")+
											  "<p>" + item.description + "</p>" +
											  (item.link?"<p style=\"float:right;\"><a class=\"button special\" href=\""+item.link+"\"><span>"+ "続きを読む" +"</span></a></p>":"")
											  //(item.link?"<p style=\"float:right;\"><a class=\"button special\" href=\"#\" onclick=\"loadPage('"+item.link+"'"+(item.type=="develop"?",'"+"blog"+"'":"")+")\"><span>"+ "続きを読む" +"</span></a></p>":"")
											  )
										  )
									  )
								  )
						    ).append(
							  $("<div/>").append(
								  $("<div/>").addClass("so").append(
									  $("<div/>").addClass("se").append(
										  $("<div/>").addClass("s")
										  )
									  )
								  )
						    )
					    )
						  .appendTo("body")
						  .buildContainers({
						    containment:"document",
						    elementsPath:"elements/"
			        });
			    }
			  }
			);
		}
	});
}

Twitterからの読み込みも上記を流用すれば可能。RSSは便利だわほんと。

JavaScriptはずっと敬遠してきて（なんかソースが汚いから）触ったことがなかったけど、意外なほどあっさりできてしまった。jQueryのおかげなのか、プラグインが充実したせいなのか分からないが、すごく読みやすくなっている気もする。楽しいー。