- 2010-01-25 (月) 19:57
- Javascript
Next: 1 2
JavaScript版 （上級者向け）
ソースを見られてもネタバレしないJavaScript版です。
MooToolsを使用し、JSON化したキャラクターデータを表示させるものです。
ページ構成と概要
- index.html
小説のトップページ（つまり1ページ目 or 第一章） - 2.html
2ページ目 or 第二章（以降、ページまたは章と同じファイル名で連番にする） - cast.html
キャラクター紹介ページ - mychar.js
クッキー発行スクリプトファイル。PHP版と同じ。 - mootools.js
MooToolsのコア。ここでダウンロードしてくる - moo-myChar.js
キャラクターデータ表示クラスファイル - char.json
キャラクターデータファイル。UTF-8で作成する
jsファイルが増えたぐらいで構成はPHP版・初心者向け版と変わりません。小説ページの作り方も同じです。
キャラクターデータファイルの作成
JSONデータファイル char.json を作ります。
基本構文:
JavaScript:
-
{
-
"キャラクター名":{
-
"id":最初に表示するページ番号,
-
"text":{
-
"ページ番号":"対応する説明文"
-
}
-
}
-
}
このデータ構造でキャラクター紹介を作ると、読んだページによって説明文を変更させることが出来るようになります。
デモページのキャラクター紹介を上記構文に沿ってJSON化すると以下のようになります。
JavaScript:
-
{
-
"吾輩（主人公の猫）":{
-
"id":1,
-
"text":{
-
"1":"珍野家で飼われている猫。本編の語り手で、名前は未だない。人間の生態を鋭く観察したり、猫ながら古今東西の文芸に通じており哲学的な思索にふけったりする。人間の内心を読むこともできる。自分のことを吾輩といっている。",
-
"2":"三毛子に恋心を抱いている。"
-
}
-
},
-
"珍野苦沙弥（ちんの くしゃみ）":{
-
"id":1,
-
"text":{
-
"1":"猫の飼い主で中学の英語教師。妻と3人の娘がいる。偏屈な性格で胃が弱くノイローゼ気味である（漱石自身がモデルとされる）。"
-
}
-
},
-
"おさん":{
-
"id":1,
-
"text":{
-
"1":"珍野家の下女。名は清という。主人公の猫を好いていない。"
-
}
-
},
-
"三毛子":{
-
"id":2,
-
"text":{
-
"2":"隣宅に住む二絃琴の御師匠さんの家の雌猫。主人公の事を「先生」と呼ぶ。",
-
"3":"主人公に好かれていることに気付いていない。"
-
}
-
-
},
-
"車屋の黒":{
-
"id":2,
-
"text":{
-
"2":"大柄な雄の黒猫。べらんめい調で教養がなく、大変な乱暴者なので主人公は恐れている。"
-
}
-
},
-
"迷亭（めいてい）":{
-
"id":2,
-
"text":{
-
"2":"苦沙弥の友人の美学者。ホラ話で人をかついで楽しむのが趣味の粋人。",
-
"3":"（美学者大塚保治がモデルともいわれるが漱石は否定したという。また、漱石の妻鏡子の著書『漱石の思ひ出』には、漱石自身が自らの洒落好きな性格を一人歩きさせたのではないかとする内容の記述がある）"
-
}
-
},
-
"水島寒月（みずしま かんげつ）":{
-
"id":3,
-
"text":{
-
"3":"理学者で、苦沙弥の元教え子。なかなかの好男子（寺田寅彦がモデルといわれる）。",
-
"4":"富子に演奏会で一目惚れする。バイオリンをたしなむ。"
-
}
-
},
-
"越智東風（おち とうふう）":{
-
"id":3,
-
"text":{
-
"3":"詩人で、寒月の友人。「おちこち」と自称している。"
-
}
-
},
-
"八木独仙（やぎ どくせん）":{
-
"id":3,
-
"text":{
-
"3":"哲学者。ヤギのような髭を生やし意味不明な警句を吐くが、誰も分からない。"
-
}
-
}
-
}
紹介ページの作成とクラスの実行
紹介ページに必ず必要なのはキャラクター紹介を挿入する要素です。
デフォルトIDがcharactersなので、id="characters"のdiv要素などを用意してください。
HTML:
クラスファイルダウンロード：myCharctor Profiles (v1.0)
上記リンクからmoo-myChar.jsをダウンロードし、
紹介ページのヘッダでmootools.jsとmoo-myChar.jsを読み込みます。
下記のようにhead内で実行させると
JavaScript:
-
<script type="text/javascript">
-
//<![CDATA[
-
window.addEvent("domready",function(){
-
new myCharctors("wagahai");
-
});
-
//]]>
-
</script>
IDで指定した要素の中へ自動的にJSONファイルから読み込んだキャラクター紹介が表示されます。
指定可能なオプションは次の通り（オプション名：デフォルト値）
- url:"char.json"
jsonファイルまでのパス - method:"get"
JSONリクエストのメソッド - id:"characters"
キャラクター紹介を入れる要素のID - sectionElement:"div"
キャクター毎の親要素のタグ名 - nameElement:"h4"
キャラクター名を入れる要素のタグ名 - textElement:"p"
キャラクター紹介文を入れる要素のタグ名 - className:"group-"
sectionElementにつけるクラス名。ページ番号が付与される
オプション指定サンプル：
JavaScript:
-
<script type="text/javascript">
-
//<![CDATA[
-
window.addEvent("domready",function(){
-
new myCharctors("wagahai", { url:"wagahai.json"});
-
});
-
//]]>
-
</script>
適当に作ったのでぶっちゃけFirefoxでしかチェックしてませんｗ
この記事は複数のページに分かれています ： 1 2
関連記事
- Newer: [MooTools] テキストや画像のコピー禁止処理
- Older: [Ajax + PHP] Web2.0的にHTMLソースを隠す方法
