このサイト内の JavaScript利用説明

このサイト「もすけのアラド戦記」では、主に jQueryを主体とした JavaScriptを用いた機能を利用しています。もちろん JavaScript/ブラウザのプラグインを無効にした状態でも参照に支障の無いデザインを心がけておりますが(実は、私はブラウザ上で動作する JavaScriptはあまり好きじゃない)、JavaScriptを有効にしていただけると、以下の機能が実行されます。

拡大画像リンクをクリックした場合に、リンク先を開きません。

Thickbox

サイト内のサムネイル画像をクリックしていただくと、拡大画像を開く箇所があります。この部分を jQueryのThickBoxプラグインを利用して、ページ移動をしないで、そのページ内で拡大画像を表示するようになっています。

ThickBoxウインドウは、CSSを利用して表示されており、ブラウザの「新しいウインドウで開く」とは動作が異なります。ThickBoxを閉じる時は、ThickBox外のブラックアウトされた部分をクリックするか、ThickBox内の[close]リンクをクリックする。もしくは[ESC]キーを押してください。

thickbox例
クエスト完了

上のサムネイル画像をクリックしてください。

投票に参加できます

Vote

もすけのアラド戦記アンケートに参加できます。

この機能は@nifty投票を利用しています。JavaScriptとAdobe Flashプラグインで実装されています。

ページ毎に目次が表示されます

Contentmenu

ページ内のインデックス(<H3>or<H4>のヘッダ)に対応した目次を表示します。

Contentmenu01

さらに目次内リンクにマウスのポインタを乗せた時に、リンク先記事の概要を表示します。この機能は jQueryのclueTipプラグインを利用しています。

Goto_contentmenu

記事毎の末尾に「ページ目次へ戻る」リンクが表示されます。

人気記事ランキング/検索フレーズランキングが参照できます

このブログの「人気記事ランキング」「検索フレーズランキング」がサイドバーに表示されます。この部分はココログフリーの標準機能で実装されています。個人的には、これくらは JavaScript無効でも表示されるようになってほしいのですが、ココログフリーの機能に JavaScript版しかないのでどうにもなりません。

Google Custom Search Engineの検索結果をサイト内に表示します

「もすけのアラド戦記」では、検索機能にGoogle Custom Search Engineを利用しています。JavaScriptを有効にした状態で検索を行うと、検索結果がサイト内のページに表示されます。

JavaScript無効状態の検索結果画面
JavaScript無効状態での検索結果画面
JavaScript有効状態の検索結果画面
JavaScript有効状態での検索結果画面

サイト外部リンクへ外部リンクアイコンを表示します

「公式サイト」は外部リンクです

記事内のサイト外部に対するリンクに対し、外部リンクアイコンを表示します。

上記スクリーンショットの通り、「公式サイト」のリンク先である「http://arad.hangame.co.jp/」は、このサイト「http://arado.cocolog-nifty.com/」外のリンクであるため、リンクの右側に外部リンクアイコンを表示しています。

解析機能が有効になります

JavaScriptとCookieを有効にしていただけると、cocolog解析と、GoogleAnalyticsによるアクセス解析に、訪問者様のアクセス履歴が保存され、そのデータをサイト作成に対して役立たせていただけます。

アラド戦記パズルで遊べます

Pazzlethumb

アラド戦記パズルゲーム「セリアを救出せよ」をプレイできます。

このパズルも jQueryのプラグインjqPuzzleを利用させていただきました。


正常に動作しない場合

これらの機能が正常に動作しなかった場合は、この記事のコメント欄より連絡をいただければありがたく思います。

対応を行う予定のブラウザは下記の通りとなっております。

  • InternetExplorer6以上
  • Fifrefox3以上
  • Opera 9.5以上
  • Safari

このサイト内の jQueryファイルは、Googleから読み込んでいます

2008年 10月 24日。安全性の証明と、訪問者様のパソコンへの負荷の低減、インターネット上のトラフィックの低減を考えて、このサイトの jQueryは、http://arado.cocolog-nifty.com/blog/files/jquery-latest.pack.jsから、google.comのファイルを読み込む様に変更しました。


以上、このブログで利用中の JavaScript/プラグインの説明を終わります。ココログフリーの標準機能に対し、私が追加した JavaScriptコードに関しては、HTML内<H2>ブログのテスト</h2>ブロック内に全て記述しておりますので、気になる方はコードを確認してください。問題や、よりよいコードの連絡をいただくのも歓迎します。

参考リンク

jquery.com
jQueryは軽量なJavaScriptライブラリで、Google,DELL,BankOfAmerica等でも採用されています。
ThickBox
ThickBoxは、多くの jQueryユーザーに利用されている jQuery用の画像表示プラグインです。
clueTip
clueTipは、ツールチップ風のエレメント表示を行う jQuery用プラグインです。このサイトで利用している clueTipには、以下の変更を行いました。
  • 使わない機能の削除。(安定化と軽量化の為に変更しました。)
  • 参照元エレメントから、javascript/object/iframe要素を取り除く。(安定化の為に変更しました。)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/428677/24313367

この記事へのトラックバック一覧です: このサイト内の JavaScript利用説明:

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。