Flexでサイトを作成してみました。
後輩に土台を作ってもらい、そこから微調整を行いました。
実際のページはこちら
http://moeten.info/flex/20080323_mmrHomePage2/bin-release/
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:reflector="com.rictus.reflector.*" xmlns:local="*" viewSourceURL="srcview/index.html"> <mx:Style> Application { backgroundColor: #ff0000; backgroundGradientColors: #330000 , #000000 ; backgroundGradientAlphas: 1, 1; themeColor: #990000; color: #990000; } VScrollBar { cornerRadius: 16; highlightAlphas: 1, 0.47; fillAlphas: 0.58, 0.91, 1, 1; fillColors: #990000, #000000, #990000, #000000; trackColors: #000000, #990000; themeColor: #000000; borderColor: #000000; } DateChooser { cornerRadius: 11; borderThickness: 4; headerColors: #990000, #000000; highlightAlphas: 0.73, 0.81; fillAlphas: 0.97, 0.85, 0.75, 0.65; fillColors: #ffffff, #990000, #ffffff, #eeeeee; todayColor: #990000; rollOverColor: #993366; color: #ffffff; borderColor: #450000; backgroundColor: #000000; backgroundAlpha: 0; fontFamily: Georgia; } .styleBtn { highlightAlphas: 0.94, 0.73; fillAlphas: 0.82, 0.12, 1, 1; fillColors: #990000, #990000, #ffffff, #eeeeee; color: #990000; } TileList{ themeColor:#4F4F4F; backgroundColor:#292929; backgroundAlpha:0; color:#FFFFFF; borderColor:#6D6D6D; borderStyle:none; rollOverColor:#222222; selectionColor:#242424; } TabNavigator { tabHeight: 34; tabWidth: 98; cornerRadius: 18; horizontalGap: -1; horizontalAlign: center; paddingLeft: 0; textIndent: 0; backgroundAlpha: 0.16; backgroundColor: #990000; borderStyle: none; borderColor: #990000; borderThickness: 20; color: #ffffff; dropShadowEnabled: true; shadowDistance: 9; tabStyleName: "myTabs"; firstTabStyleName: "myTabs"; lastTabStyleName: "myTabs"; selectedTabTextStyleName: "mySelectedTabs"; } .myTabs { cornerRadius: 0; highlightAlphas: 0.65, 0.73; letterSpacing: 2; fillAlphas: 0.77, 0.73; fillColors: #990000, #990000; backgroundAlpha: 1; backgroundColor: #990000; borderColor: #990000; themeColor: #993300; fontFamily: Monaco; fontSize: 16; } .mySelectedTabs { } </mx:Style> <mx:Script> <![CDATA[ import mx.effects.easing.*; private var bodyHeight:int = 450; //初期化関数 private function init():void{ showEffect.play([header,body,footer]); } //ビューチェンジ private var bodyHeight2:Array = new Array(); private function onChange():void{ bodyHeight2[0] = 450;//top bodyHeight2[1] = 510;//liveinfo bodyHeight2[2] = 540;//member bodyHeight2[3] = 510;//profile bodyHeight2[4] = 420;//photo bodyHeight2[5] = 450;//contact bodyHeight2[6] = 350;//link myResize.target = body; myResize.heightTo = bodyHeight2[body.selectedIndex]; myResize.play(); } ]]> </mx:Script> <!-- ############ エフェクト ########### --> <mx:Resize id="myResize"/> <mx:Sequence id="showEffect"> <mx:Zoom zoomHeightFrom="0.8" zoomHeightTo="1.0" zoomWidthFrom="0.8" zoomWidthTo="1.0" easingFunction="Back.easeOut" duration="800" /> </mx:Sequence> <!-- ############ Httpサービス ########### --> <!--<mx:HTTPService id="getRSS" url="" useProxy="false" resultFormat="e4x" fault="" result="" />--> <!-- ############ コンポーネント ########### --> <!-- ヘッダー --> <mx:Canvas id="header" x="10" y="10" width="681" height="63" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="2" y="2" width="162" height="87" source="img/mmr-logo.png" id="imgTitle" click="{body.selectedIndex=0}" buttonMode="true"/> <mx:Image x="170" y="10" width="296" height="25" source="img/moemeta.png"/> <mx:Image x="170" y="43" width="501" height="22" source="img/top-explain.png"/> </mx:Canvas> <reflector:Reflector target="{header}" alpha="0.5" /> <!-- メインボディ --> <mx:TabNavigator id="body" x="10" y="98" width="681" height="458" change="onChange()"> <!-- トップページ --> <mx:Canvas label="top" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="10" width="434" height="248" source="img/top-img.png"/> <mx:Image x="10" y="248" width="434" height="77" source="img/20080329_banner.gif" click="{body.selectedIndex=1}" buttonMode="true"/> <mx:Image x="10" y="300" width="473" height="107" source="img/live-info.png" click="{body.selectedIndex=1}" buttonMode="true"/> <mx:Image x="452" y="302" source="img/blog-explain.png" width="219" height="72"/> <mx:Button x="474" y="185" label="go to Blog" width="200" height="83" styleName="styleBtn" fontSize="17" color="#FFFFFF" icon="@Embed(source='img/blogImg.png')" fillAlphas="[0.15, 0.15, 0.15, 0.15]" alpha="1.0" cornerRadius="20" borderColor="#494949" click="{navigateToURL( new URLRequest('http://yaplog.jp/keinyan_st/') , '_blank') } "/> <mx:Image x="452" y="368" source="img/blog-reco.png" width="249" height="100"/> <mx:DateChooser x="474" y="5" width="200" height="162"/> </mx:Canvas> <!-- ライブ情報 --> <mx:Canvas label="live" width="100%" height="100%" horizontalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="440" direction="vertical" columnCount="1" rowCount="3" > <mx:itemRenderer> <mx:Component> <mx:HBox verticalAlign="top"> <mx:Label text="{data.date}" fontSize="18" width="120"/> <mx:TextArea text="{data.comment}" editable="false" fontSize="13" width="100%" height="200" backgroundAlpha="0" color="#FFFFFF" textAlign="left" borderStyle="none"/> <mx:Image source="{data.img}" width="150" height="200" /> </mx:HBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object date="3/29(Sat)" comment="イベント情報 場所 日本橋 platz主催 おたまっぷ 出演 まーめいど系列メイド♪ 開場 15:00 開演 16:00（だいたいの時間です） ★ トップに出演します！！ MM-Rが見たい方は、 一番早い時間に会場に入って下さいね★ チケット 前売り 2500円 当日 3000円 （１drink別） *開場収容人数は２００人位迄となります* 頑張って演奏しますので 是非遊びに来て下さい(´∀｀*) MM−Rの初ライヴです！！ みんながくれる勇気は・・・ おっくせんまん！！ " img="img/live1.png" /> <mx:Object date="4/5(Sat)" comment="場所 三宮 BREATH バントバトル準決勝！！MM−Rに皆さんの勝利の投票をお願いします！ ＊チケット １枚 １５００円 出演バンド８組中、３組が決勝ライヴに進出 もしお客さんの投票で選ばれたら、決勝ライヴに出れます。 お客さんが自分が選んだバンドが決勝に行くことになると、 投票した人の中から1名〜5名にニンテンドーＤＳ、WIIなどの 豪華賞品が当たります♪(・∀・)ｲｲ 勝てば、決勝ライヴ４/２０（日） 決勝ライヴで選ばれたら・・・なんと！ 5月4日（日）、難波ハッチで DJオズマ他メジャーアーティスト、 麒麟、シャンプーハットなどのお笑い、 その他ファッション関係、スポーツ関係の一流有名人を 呼んでの様々なジャンルを融合した イベントの前座バンドとして出演できます━ヽ(´∀｀ヽ)━ （avex、MBS協賛" img="img/live2.png" /> <mx:Object date="6/8(Sat)" comment="場所 住之江 オスカーホール TEL 06-6684-2300 チケット １枚1500円、他、詳細未定 大阪市住之江区新北島１-２-１ オスカードリーム３Ｆ 地下鉄四つ橋線住之江公園駅下車５番出口すぐ オスカードリームは住ノ江公園駅改札口から２分５番出口から目と鼻の先にある巨大なビルで歩く距離は、ほんの少しで非常に便利です。 オスカードリームにあるオスカーホールは ３Ｆです オスカーホールでのイベントに車でお越しの方へ当日、受付にて駐車割引券を販売します。２時間毎２１０円となっております。車でお越しの方は是非、お買い求め下さい。 " img="img/live3.png" /> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> <!-- メンバー紹介 --> <mx:Canvas label="member" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="100%" direction="horizontal" columnCount="5" > <mx:itemRenderer> <mx:Component> <mx:VBox horizontalAlign="center" verticalAlign="top"> <mx:Label y="0" text="{data.category}" fontSize="18" /> <mx:Canvas y="18" id="memberImg"> <mx:Image source="{data.img}" width="80" height="120"/> </mx:Canvas> <!--<reflector:Reflector target="{memberImg}" alpha="0.3"/>--> <mx:Text y="150" width="120" fontSize="12" height="400" id="t1" text="{data.comment}" color="#FFFFFF"/> </mx:VBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object category="ヴォーカル" img="img/m1.png" comment="・・・ブランク有りですが 一応タレントでございます。現在はあまりの寒さにバンド活動以外冬眠気味Σ(´д`；*) サンTV【夜美女】のビデオ紹介コーナーでチェリーという名前で１年間レギュラー出演してました。 ミナミの帝王にちょこっと出演したりラジオ大阪・AM神戸でDJもやってました。などCM出演 色々と・・・ ＊現在は 毎週水曜サンTV【チャレンジカラオケステーション】って番組で、ナレーションの声がオンエアーされています＊ 自分が萌え系であることを自覚したのは、2005年のライヴでマスターに言われてからです(・∀・) (・∀・)好きな食べ物(・∀・) チーズケーキ"/> <mx:Object category="ギター" img="img/m2.png" comment="江坂ミューズ・服部緑地公園・THホール・Fanｊ Twice・ホリデー大阪など多数のライヴハウスで出演。 様々なオーディションで近畿代表まで勝ち抜いた。 更なる飛躍を目指し、tonakai sound worksのギターで頑張っています！ 過去、TVCMで、演奏している所を１年半位オンエアーされていた事もアリ。 他ゲームソングの作曲等も行っていて、CD販売されてます (・∀・)好きな食べ物 バナナロール(・∀・)"/> <mx:Object category="ベース" img="img/m3.png" comment="本職ギタリスト。出演したライヴハウス ・池袋サイバー ・目黒鹿鳴館 ・目黒ライヴステーション ・新楽坂デイメンション ・横浜セブンスアベニュー ・横浜クラブ24 ・浦和ナルシス・市川 CLUB GIO ・クラブチッタ川崎 ・ホリデー大阪 ・西九条ブランニュー 等多数(・∀・)好きな食べ物 チョコレートパフェ(・∀・)"/> <mx:Object category="ドラム" img="img/m4.png" comment="・関東・関西の色々なライヴハウス・ホールに出演（多いので割愛（;´Д｀） メディア fanJのイベントでラジオ公開ライブ、CATV出演 等 (・∀・)好きな食べ物 焼きそば定食、卵焼き (・∀・)"/> <mx:Object category="ギター" img="img/m5.png" comment="日本橋とかで？彼女の事を知らない人は居ない？？ 位の勢いで有名なアイドルさんです。 小柄で可愛らしいケイちゃんとスタジオ入ると萌え死にします(・∀・)ﾓｴｯ でも、そんな容姿で、毎日の様に仕事頑張っていて、バンド活動も一杯やっていて非常にアグレッシブ！！"/> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> <!-- プロフィール --> <mx:Canvas label="profile" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image source="img/bandProfileImg.png" x="10" y="10"/> <mx:Image x="424" y="38" source="img/prfsub5.jpg" width="360" height="349" alpha="0.5" rotation="10"/> <mx:Text x="10" y="46" text="とある 大手ソーシャルネットワーキングサービスで、友人の友人とか、見ず知らずで ご縁があり集まって、２００７年の末に バンド活動を開始。" width="563" height="46" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="117" text="一番バンド経験の浅い さくら夕紀（歴３年）が リーダー業務を務める（;´Д｀）" width="391" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="151" text="私ゆっきーの容姿・声が 萌え系だそうなので、アニソン・ゲーソン・電波系 等の曲を生バンドでやってみようかと試みる。" width="563" height="69" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="188" text="自身メタルが好き（聖飢魔?は永遠のバイブル）なので、メタルやハードな演奏が出来るメンバーを集めてみた。" width="606" height="42" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="207" text="スタジオセッションをしたら、バッキングが激しくメタルになった( ; ﾟДﾟ)ZZ メタルなバッキングに萌え曲萌えVoiceのギャップのあるバンドとなり、ネーミングをMM−R ｢萌えメタレボリューション｣として活動を開始。" width="455" height="63" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="95" text="基本的には" width="75" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="440" y="95" text="です（今の所）" width="75" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="93" y="92" text="萌え系・ダメ系・ネタ系・電波系・ｵﾀ系 バンド" color="#FF00F0" fontSize="16" fontWeight="bold"/> <mx:Text x="10" y="258" text="それぞれジャンルが違うメンバーが、これからどのような展開になっていくのか・・・・" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="275" text="リーダー自身も 把握していないバンド" color="#FF0303" fontSize="28" fontWeight="bold"/> <mx:Text x="12" y="314" text="まぁ、気楽に、ゅるく、音楽・コスプレを楽しめたらな〜という ゅるいノリです。" fontSize="12" color="#FFFFFF"/> <mx:Text x="12" y="332" text="｢バンドの方針・ジャンルは？｣ と聞かれたら、分かりません 状態。プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・)" color="#FFFFFF" width="358" height="27" fontSize="12" /> <mx:Text x="12" y="348" text="プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・)" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="367" text="とりあえず今の目標は イベントライブに出てお客さんを萌え（燃え）死させること！！" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="386" text="その内、色んな系統のライヴに出て、たくさんの人に楽しんでもらえるようなバンドに出来たらと。" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="405" text="今後は、オリジナル曲も作っていきたいです。 " color="#FFFFFF" fontSize="12"/> </mx:Canvas> <!-- 写真 --> <mx:Canvas label="photo" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="10" source="img/photos.png"/> <local:DisplayShelf id="shelf" x="0" y="0" width="100%"> <local:dataProvider> <mx:ArrayCollection> <mx:String>img/photo/studio1.jpg</mx:String> <mx:String>img/photo/studio2.jpg</mx:String> <mx:String>img/photo/studio3.jpg</mx:String> <mx:String>img/photo/studio4.jpg</mx:String> <mx:String>img/photo/studio5.jpg</mx:String> <mx:String>img/photo/studio6.jpg</mx:String> <mx:String>img/photo/studio7.jpg</mx:String> <mx:String>img/photo/studio8.jpg</mx:String> <mx:String>img/photo/studio9.jpg</mx:String> </mx:ArrayCollection> </local:dataProvider> </local:DisplayShelf> <mx:Button x="286.5" y="280" label="More..." width="108" height="32" color="#FFEDFB" fontSize="16" styleName="styleBtn" click="{navigateToURL( new URLRequest( 'http://photo.ameba.jp/user/mm-r/' ) , '_blank')} " /> </mx:Canvas> <!-- コンタクト --> <mx:Canvas label="contact" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="47" source="img/contactImg.png" width="255"/> <mx:Label x="273" y="40" text="お問い合わせ リーダー さくら 夕紀 まで" color="#FFFFFF" fontFamily="Arial" fontSize="18" width="398" height="26"/> <mx:Button x="273" y="86" label="メール" width="87" height="20" styleName="styleBtn"/> <mx:Button x="273" y="121" label="URL" width="87" height="20" styleName="styleBtn"/> <mx:Label x="368" y="87" text="mmr_band@yahoo.co.jp" color="#FFFFFF" fontSize="16"/> <mx:Label x="368" y="117" text="http://mixi.jp/show_friend.pl?id=13310554" color="#FFFFFF"/> <mx:Label x="273" y="143" text=" *オファー大歓迎(ﾉ´∀｀*)♪＊ ★応援してくれる方・音楽仲間 ミク大歓迎です" color="#FFFFFF"/> <mx:Label x="273" y="190" text="メンバー募集" color="#FFFFFF" fontFamily="Arial" fontSize="18"/> <mx:Text x="273" y="225" text="★key１名（出来れば♀求むっ！コスプレ・メイクに抵抗の無い方） ★
大阪の梅田で、２週に一回位のペースで平日の夜だいたい２０〜２２時で活動しています
スタジオ代は一人２H 300円です 
そして、サポートメンバーBass・Drums（♀限定）随時募集！(ハードに演奏出来る方）" width="398" height="157" color="#FFFFFF" fontSize="15"/> <mx:Image x="10" y="10" source="img/contact.png"/> </mx:Canvas> <!-- リンク --> <mx:Canvas label="link" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="100%" direction="vertical" columnCount="1"> <mx:itemRenderer> <mx:Component> <mx:HBox verticalAlign="top"> <mx:Image buttonMode="true" source="{data.img}" width="200" height="40" click="{navigateToURL( new URLRequest( data.url ) , '_blank')} " /> <mx:TextArea text="{data.comment}" editable="false" fontSize="12" height="90" width="100%" backgroundAlpha="0" color="#FFFFFF" textAlign="left" borderStyle="none"/> </mx:HBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object img="img/minianibanner.gif" url="http://www.moebar.com/" comment="梅田・心斎橋に萌えメイドカフェ＆メイドBARが新規OPEN！ 昼間はメイドカフェ、夜間はメイドＢＡＲスタイルの新しいお店となっています。"/> <mx:Object img="img/ramudande.gif" url="http://www.larmedange.com/" comment="天使の涙をコンセプトに、２００７年結成したヴィジュアル系バンド「Ｌarme d'ange」ラムス・ダンジュの公式サイト。総合的に演奏レベル・ヴジュアル、ステージングのクオリティーが高いです！！是非ライヴ行ってみて下さい！感動します！Ｇｕｉｔａｒ担当の柊木さんは、さくら夕紀・リエ・かおるの音楽仲間（大先輩）であり、友達としても仲良くしてもらっています(ﾉ´∀｀*)偶然・・・柊木さんが経営しているＢａｒの目の前に↑まーめいど梅田店が有ります(・∀・＊)"/> <mx:Object img="img/keisub7.JPG" url="http://yaplog.jp/keinyan_st/" comment="フロンティアコーポレーション所属（実は さくら夕紀も所属）の石原啓子こと、サポートメンバーケイちゃんの ブログです。 一杯お仕事頑張ってる姿に 同業者として見習うことが一杯だなーー（；^ω^） バンドは現在主に いちごのつぶ ユニットとして活動中★とにかく萌え"/> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> </mx:TabNavigator> <!-- フッター --> <mx:Canvas id="footer" x="10" y="{body.height + 90}" width="681" height="64" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="0" y="0" width="693" source="img/footer.png"/> </mx:Canvas> </mx:Application>
Flexですとサイトがまるまる１ページで完結してかけるのでいいですね。
ヘッダとフッタを作ってメイン部分はTabNavigatorでキャンバスを切り替えるだけでいいので。
加えて、リンクページのように、データを同じ形式で書き出すときに、TileList ⇒ itemRenderer ⇒ dataProviderの連携がいい感じです。
これで長くなりそうな文章も簡略できますし、管理者もデーターのArrayCollectionさえ追加すればＯＫ。
