JFL DATA |
|||||||||||||||||||||
|
Lastest Version: v0.10 2010-05-04 |
|||||||||||||||||||||
JFL DATAとはJFL DATAは、Jリーグの下に位置するサッカーリーグであるJFLの順位表・ゴールランキング・試合日程／結果を見ることができるWebアプリです。JFL DATAは以下の用途で使用することができます。
大きさも、大(240x450)と、小(185x420)の２種類を用意してあります。 さらにブログパーツとして使用する際には、カスタマイズによって、表内の背景色を変更し、応援するチームカラーにぴったりの色に変更することもできます。 デフォルトでは初期表示は順位表になってますけど、カスタマイズすることで、得点ランクや日程・結果を初期表示にするように変更できます。 JFLサポーターのみなさん、JFL DATAを使って、JFLを盛り上げていきましょう！ 使用上の注意
ブログパーツとして使用する自分のブログやサイトのページにJFL DATAをブログパーツとして貼りつけることができます。JFL DATAはJavaScriptを使用していますので、JavaScriptの使用が許可されている必要があります。通常のページなら多分問題ありません。 「はてなダイアリー」をご利用の方は、はてなのブログパーツとして使用するをご参照ください。 また、通常版のブログパーツがうまく動かないサイトの場合にも、はてなのブログパーツとして使用するをお試しください。 一つのページに複数のJFL DATAを貼りたい場合には、カスタマイズするを合わせて御覧下さい。 青・緑・赤の３色と、大・小の２種類の組み合わせにより、６種類を用意しています。それぞれのサンプルの下にあるテキストエリアの中の文字列を、貼りつけたいページのHTMLの中に埋め込んでください。埋め込むのにはHTMLの知識がいると思いますけど、HTMLについてはここでは述べません。別のサイトをお探しください。
カスタマイズする「JFL DATA」は貼り付ける文字列を変更することで、以下のことができます。
<!-- JFL DATA ここから -->
<script type="text/javascript" src="http://s-jima.sakura.ne.jp/util.js"></script>
<script type="text/javascript" src="http://s-jima.sakura.ne.jp/data.js"></script>
<script type="text/javascript" src="http://s-jima.sakura.ne.jp/jfl_data.js"></script>
<div id="mainboard"
style="width:185px;max-width:185px;height:420px;max-height:420px;overflow:hidden;">
データを読み込み中です。
</div>
<script type="text/javascript">
var jfldata = new JflData("jfldata"); // 複数貼りたいときは、"jfldata"の部分をブロックごとに変更する。
jfldata.setUrl("http://s-jima.sakura.ne.jp"); // ここは変えちゃダメ。
jfldata.setupColor("#dd9999", "#884444", "#aa4444", "#ee5555", "board_R.png"); // 色を変えたいときはここを変える
jfldata.mainboardid = "mainboard"; // 複数貼りたいときは、divタグのidを変えて、ここも同じに変更する。
jfldata.dispMode = 0; // 初期表示を設定： 0-順位表、1-得点ランク、2-日程・結果
jfldata.load(); // ここもかえちゃダメ
</script>
<!-- JFL DATA ここまで -->
ケース１：初期表示を順位表ではなく、得点ランクや日程・結果に変更する以下の行を変更してください。
jfldata.dispMode = 0; // 初期表示を設定： 0-順位表、1-得点ランク、2-日程・結果
「jfldata.dispMode = 0;」を「jfldata.dispMode = 1;」に変更すると、得点ランクに変わります。「jfldata.dispMode = 0;」を「jfldata.dispMode = 2;」に変更すると、日程・結果に変わります。 ケース２：色を変更して、自分だけの「JFL DATA」に仕上げる。以下の行を変更してください。
jfldata.setupColor("#dd9999", "#884444", "#aa4444", "#ee5555", "board_R.png"); // 色を変えたいときはここを変える
１〜４番目の引数には、CSSのRGB形式の色コードを指定します。第１引数は表の枠線、第２引数は表のヘッダー、第３引数は奇数行の背景色、第４引数は偶数行の背景色を表します。５番目の引数は、背景の画像ファイル名を示します。"board.png"が青、"board_G.png"が緑、"board_R.png"が赤です。 ケース３：複数の「JFL DATA」を貼り付ける。一つのページに複数のJFL DATAを貼りつけたい場合、貼り付けるブロックごとに以下の２点を変更する必要があります。
このページには沢山のJFL DATAが貼られているため、このページでも上記の２点を実施しています。ですので、このページのHTMLソースを参考にしてください。 はてなのブログパーツとして使用するはてなダイアリーにJFL DATAのブログパーツを貼る方法ですが、以下の手順でうまくいきます。・管理 -> デザイン -> サイドバー とすすみ、「ブログパーツ」を選択 ・入力欄に以下の表にあるテキストエリアの文字列を貼りつけて、「決定」をクリック。 サンプルはこちらのサイトにあります。
Google Gadgetとして使用する「JFL DATA」はiGoogleのパーツの一つとしてページに追加することができます。追加の方法は簡単です。以下の表から好きなのを選んで、左下の「+Google」というアイコンをクリックしてください。そして次の画面で「iGoogleに追加」をクリックするだけで、iGoogleに追加できます。 iPhoneのWebアプリとして使用するJFL DATAはiPhone/iPod TouchのWebアプリとして使用することも考慮して、iPhoneの画面幅に合わせて表示するように作成してあります。iPhone/iPod Touchをご利用の方は、以下のリンクをクリックしてください。 iPhone/iPod Touchで、上記のサイトを開いてから、下のバーの「＋」ボタンを押して、「ホーム画面に追加」を選択すると、iPhone/iPod Touchのホーム画面にアイコンが登録され、次回から簡単に起動することができます。MacのDashboard Widgetとして使用するJFL DATAはMac OS X 10.4以降に搭載されている機能である、Dashboard Widgetとして、インストールして使用することができます。Dashboard Widgetとしてインストールしておけば、いつでも簡単にJFLのデータを見ることができます。Dashboard版は、デフォルトでは青で表示されますが、タイトルイメージをクリックして裏面に切り替え、青／緑／赤の中から好きな色に切り替えることができます。 Dashboard版はここをクリックしてダウンロードして下さい。 連絡先JFL DATAに関するご感想・ご要望・障害報告などは、以下の方法でご連絡ください。
|