dragable-boxes.js を使ってみた
iGoogle みたいな動かし放題、作りたい放題のRssフィード表示画面を
簡単に実装できるライブラリです。prototype.js 非依存。
ダウンロードはここから
http://www.dhtmlgoodies.com/index.html?whichScript=dragable-boxes
インストール
フォルダを解凍してアップするだけ。
アップしたら
インストールルート/dragable-boxes/dragable-boxes
をひっぱたいてみましょう。
いきなり変なのがでるはず。
これ良く見るといきなり動かせるんですよね。
はいインストール完了！
まあ実際に必要なのはこれだけです
おきまりのインクルード
<script type=”text/javascript” src=”js/ajax.js”></script>
<script type=”text/javascript” src=”js/dragable-boxes.js”></script>表示させる div の配置
<div id=”floatingBoxParentContainer”></div>
おまけでデフォルトに戻すボタン
<a href=”#” onclick=”resetDragableBoxes();return false”>Reset back to default </a>
カスタマイズ
カスタマイズポイントは結構分かれています。
まず表示数とかのパラメータ
dragable-boxes.js の 21行目～の部分
/* USER VARIABLES */
var numberOfColumns = 3; //横に何分割するか
var columnParentBoxId = ‘floatingBoxParentContainer’; // 表示DIVのID名
var src_rightImage = ‘images/arrow_right.gif’; //右矢印画像
var src_downImage = ‘images/arrow_down.gif’; //下矢印画像
var src_refreshSource = ‘images/refresh.gif’; //更新ボタン画像
var src_smallRightArrow = ‘images/small_arrow.gif’; //小右矢印画像var transparencyWhenDragging = false; //ドラッグして重ねたときの動き true なら場所を入れ替える
var txt_editLink = ‘Edit’; //エディット画面へのリンク文字
var txt_editLink_stop = ‘End edit’; //エディット画面から抜けるときのリンク文字
var autoScrollSpeed = 4; //自動スクロール速度
var dragObjectBorderWidth = 1; //ドラッグした時の枠線の表示の大きさ（１は等倍）var useCookiesToRememberRSSSources = true; //クッキー使用可否
var nameOfCookie = ‘dragable_rss_boxes’; // クッキーを使うときのクッキー名
/* END USER VARIABLES */
デフォルト表示とRSS以外の表示系
dragable-boxes.js の 966行目～の部分
/* You customize this function */
function createDefaultBoxes()
{
if(cookieCounter==0){//ここにデフォルト表示させるBOXを書いていく
//設定は 名前,表示番号,BOXの高さ,RSSの内容の表示数,リロードまでの時間
//高さは指定すると固定になる、falseにしておけばグリグリ動かせる
//Js良くわからん人は1行コピーしてURLかえるだけでいいかな。createARSSBox(’http://rss.cnn.com/rss/cnn_topstories.rss’,2,false,5,1);
}
/* Create static boxes */
//RSSじゃなくてHTMLとかの表示部分（これはJSに決めうちしないとだめみたい）
//とりあえず上の2行だけ変えたセットをコピーすれば作れるはず。
//ここから！
var htmlContentOfNewBox = ‘‘; //BOXの中身（HTML) Ajaxでとって来て表示するには処理かかないとだめかな。
var titleOfNewBox = ‘This is a static box’; //BOXのタイトル
if(!staticObjectArray['staticObject1']){
var newIndex = createABox(1,100,false,’staticObject1′);
document.getElementById(’dragableBoxContent’ + newIndex).innerHTML = htmlContentOfNewBox;
document.getElementById(’dragableBoxHeader_txt’ + newIndex).innerHTML = titleOfNewBox;
}else{ // Box is stored in cookie - all we have to do is to move content into it.
document.getElementById(’dragableBoxContent’ + staticObjectArray['staticObject1']).innerHTML = htmlContentOfNewBox;
document.getElementById(’dragableBoxHeader_txt’ + staticObjectArray['staticObject1']).innerHTML = titleOfNewBox;}
hideHeaderOptionsForStaticBoxes(staticObjectArray['staticObject1']);
//ここまで！setTimeout(’saveCookies()’,100);
}
おしいなー RSSだけじゃなくてhtmlもURL指定で書き込めたら最高だったのに。
まあちょっといじるだけでできそうだけど。
にしてもこんなものがフリーではいるなんて凄い時代だ。
4 月 1st, 2008 at 4:25 PM
はじめまして。エンジニアではない人間なのですがこの「iGoogle」みたいなのがフリーでできるのを見つけて感激したまではいいですが使い方がわかりませんでした。
これはPHPをインストールしておかないと動かないのでしょうか？
「magpierss」ってフォルダが気になったので、、、
実際、「loading RSS data」のままで読みこまないです。
環境として何が必要でしょうか？
小会社なのですが、企業ポータルまがいをこれを応用して作ってみたいと思ってまして。
それとも、企業ポータルならXoops(まだ触れてませんが）とかでやる方がお勧めですか？
申し訳ありません私事な相談まで書き込んで。
4 月 2nd, 2008 at 10:07 AM
コメントありがとうございます。
dragable-boxes.jsですが、
RSSを読み込む部分をPHPで処理しているため、
igoogleのようにRSSを読み込んでサイトを作るのであれば必須になってしまいます。
（XoopsもPHPで作られているので、サーバ（レンタルでも）PHPが必要になります。
逆に言えばRSSを使用しない（HTMLだけで構成する）
のであれば使えるのですが、
それはおそらく企業ポータルのニーズにはマッチしないとおもいますね。。
いずれにせよ ポータルとしての機能を充実させるのであれば
Xoopsなどを使うほうがよいかとおもいます。
答えになってるといいですが。。
4 月 3rd, 2008 at 12:04 PM
さっそくのご返答ありがとうございます。
さっそくPHP5インストールしてみました。
長い道のりですががんばって行こうと思います。
PHPもApacheも初めてです(汗)
IISを停止したらローカル上の開発中のものが閲覧できなくなりました(涙)
IISにはWeb共有ありました。なくなりました??
あほらしかもしれませんが暇があればちょこっとだけ
教えてください。
なかなかよそ様のイントラネットってどんな感じ作られているか
見る機会がありません、いくつかアップされている画像を見ての
意見ですが。最近の企業ポータルは「igoogle」「Netvibes」みたいな
パーソナライズドポータルみたいに設計されてるみたいですね。
やはり私もこれをやってみたい！！
Xoopsを使ってウィジェットを並べる様なサイト制作は可能なのでしょうか？
後。Xoops×2と言ってきましたがＪａＫＫさんのオススメのCMS管理できる
フリー(or 低価格)なツールは何ですか？
4 月 4th, 2008 at 10:57 PM
Windowsサーバはあんまりくわしくないんですが
Windowsのファイル共有はIISは介さないとおもうので
（たぶんです。。）
別件なきがします。
->閲覧できないのがPHPファイルというのであれば
IISで動いていたPHPが見れなくなったということかとおもいますが。
画面ありきで話を進めるとたいへんなことになりそうですが、
機能だけでいったらXoopsでほとんどカバーできるとおもいます。
・ログイン、カレンダー、その他
開発者向けでいけば Tracとかもありなんですが。
これはちょっと企業ポータルとは違いますね。
ほかのCMSっっていうのはあまりつかったことがなく
たとえば有料系のやつとかはサポートもあるとおもうので
あまり自信がないのであれば、Xoopsよりそっちのほうがいいかもしれません。
Xoopsもソースにくせがあるので
PHPがある程度わかってこないと、コードをカスタマイズとかは難しいと思います。
逆に言えばがっつりカスタマイズしないのであれば、
実装予定の機能が全部Xoopsのモジュールとしてあるかを確認して
それでことたりそうならXoopsで十分ともいえます。
いずれにせよPHPは覚えればじゃんじゃんいじれるようになるとおもいますので
ぜひがんばってください。
4 月 7th, 2008 at 9:46 AM
ご返答ありがとうございます。
>画面ありきで話を進めるとたいへんなことになりそうですが
Jakkさんこれよくわかります。(反省)
どうしてもクリエイター思考になっちゃって(汗)
エンジニアの方に何度か言われたこともあります。
でも、ここのデザインは譲れない、とかいろいろあります。
デザイナーとエンジニアの連携も課題です。難しいですね。
Xoopsいろいろいじって体験してみますね。
「dragable-boxes」以外でRSSのポートレット作成例みたい
なのって他にご存知ないですか？
後、企業ポータルを調べてたらLiferay Portalというのに
たどり着いたのですがご存知ですか？
暇な時にでもご返事ください。
4 月 7th, 2008 at 11:24 AM
LiferayはたしかJavaでかかれていたと思います。
自分の範疇外だったのでインストまではしたことあるんですが、
運用したことはないですねー
印象としてはローカル化が進んでないかんじでした。
（去年初頭にいじってたので今はわかりません。）
RSSのガジェットをがしがし動かせるのって
しらないんですよねー
お役に立てず申し訳ありません。
4 月 14th, 2008 at 9:55 AM
Jakkさん
あれからXoops導入して試験的にページ作成しております。
PHP頑張ってます。Jakkさんのサイト参考にさせていただいてます。
会社で使用しているもう1台のPCを仮サーバーにして課内にて
試験運用しようと思うのですが。
Root Pathが現在インストールしたApacheのhtdocs/xoopsに
なっていて。
アクセスするURLがhttp://仮サーバー(社内ドメイン参加)/xoops
というURLになってるのですがこの、xoopsというのを消して
サイト名とすることはできますか？
Xoopsに関する質問なのでそちらのコミュに質問すればいいのですが
何度かやりとりしたご縁で、Jakkさんを頼らせてもらいます。
4 月 14th, 2008 at 11:15 AM
私なら ということで
やり方が２個
１：たぶんXoopsを解凍して フォルダごと上げてるとおもうので、
それを フォルダの中身だけにする（ようはちゃんと構造をURLとあわせるということです）
⇒お勧めしときます。運用管理の上でも最初からごちゃごちゃしてるのはよくないきがしますしｗ
参考URL：http://xoops.sourceforge.jp/wiki/xoops2/index?cmd=read&page=HOWTO%2F%A5%B5%A1%BC%A5%D0%A1%BC%B0%DC%C0%DF#v4db278f
２：.htaccess でドキュメントルートを設定する
⇒わかってる人はこっちでもいいとおもいますが、URLと実ディレクトリがずれるので
ごちゃごちゃするかもです。