http://mobile-gb.com/wordpress Just another WordPress weblog Thu, 17 Jul 2008 16:34:48 +0000 http://backend.userland.com/rss092 ja Wii Motion Plus なんぞこれ？ http://mobile-gb.com/wordpress/archives/964 さて、管理人は無論ニート……ではなく、働いているわけであるが、 月の初旬と中旬はアホみたいに忙しくなるのだ…… 更に、今月は来期の予算作成もこの時期に入り、半端なく忙しいのだ＞＜ ちなみに、 4月時点の人数：6人 7月時点の人数：3人 ちょｗ　おまっｗｗｗ しかも一人倒れたとか、マジ半端ねぇ！！ 追記： カウンターをSQLiteのデータベースに移行しました。 そろそろマジメに変えないとなあ、IPとって比較して、カウントアップしないように http://mobile-gb.com/wordpress/archives/963 JavaScriptのライブラリであるjQueryを用いたタブメニューを作ろうと思うが、 何故かどこを回ってもtab.UIと言う外部プラグインを使ったものしかない…… 画像を使うとか、そんな重そうな物ばかり…… 無いのなら、作ってしまえホトトギスと言うことで、簡易タブメニューを作成した。 サンプル 使用しているのはインラインのjquery命令と、外部CSSである。 ちなみに対象部のHTMLはこれ <ul id="tab_list"> 　<li id="p_tab">personal</li> 　<li id="d_tab">diary</li> 　<li id="b_tab">bookmark</li> </ul> <div id="personal" class="tab_body">中身1</div> <div id="rss" class="tab_body">中身2</div> <div id="bookmark" class="tab_body">中身3</div> ulの中のliがタブのメニューになる。 その下のdivタグで囲まれた3つがタブの中身である。 それをCSSでこう味付けする（firefoxとsafariで角丸に見える部分は排除）。 #tab_list{ 　line-height:1em; 　margin:0; 　margin-left:1em; 　margin-bottom:1px; 　position:relative; 　z-index:0; } タブの縦の長さを1文字分にして左と下を少し開け位置を相対位置にする。 下を1pxあけないとタブが本文部分に食い込んでしまうので要注意。 Firefox3.xのみ1pxあけてもまだ食い込んでいるので、位置表示を相対化する。 #tab_list li{ 　display:inline; 　background-color:white; 　padding:0 4px; 　margin:0 0.1em; } リスト要素をインライン化し、背景を白塗りにした後、要素の左右を4pxずつ空ける 左右をあけない場合はpaddingを指定しないこと。 また、要素内が一杯に見えないよう左右を0.1文字ずつ広げておく。 この辺は好みで行ってください。 ul li#d_tab{background-color:#aabbff;} ul li#b_tab{background-color:#aabbff;} 選択されていない2つのタブの色を変え、選択されていないことが分かるようにする この辺の色もタブの色に合わせて適宜変更してください。 .tab_body{ 　background-color:white; 　padding:10px; 　position:relative; 　z-index:1; } タブ本体の背景色を設定して相対表示にした後、 タブ自身より前に表示されるようにZ軸の指定を行う （Firefox3.xでの食い込み対策） #rss{display:none;} #bookmark{display:none;} 選択されていないブロック要素を非表示にする。 ここまでで選択できないタブメニューと一つの要素の表示は完成です。 外見だけならタブメニューっぽく見えるようになりました。 後は、jQueryを使って料理していきます。 <script type="text/javascript"> $(function(){ 　$("#p_tab").click(function (){ 　　$("#p_tab").css("background-color","white"); 　　$("#d_tab").css("background-color","#aabbff"); 　　$("#b_tab").css("background-color","#aabbff"); 　　$("#personal").css("display","block"); 　　$("#rss").css("display","none"); 　　$("#bookmark").css("display","none"); 　}); }); </script> タブ一つ分の命令です。 $("#p_tab").click(function ()で idがp_tabの要素がクリックされた場合に動くようになっています。 $("#p_tab").css("background-color","white");でp_tabの背景を白に $("#d_tab").css("background-color","#aabbff");と $("#b_tab").css("background-color","#aabbff");で 残りのタブの背景を非選択色に変更しています。 $("#personal").css("display","block");でidがpersonal要素を表示 $("#rss").css("display","none");と $("#bookmark").css("display","none");は その他の要素を非表示にしています。 これを残りのタブ要素にも適用することで完成です。 <script type="text/javascript"> $(function(){ 　$("#p_tab").click(function (){ 　　$("#p_tab").css("background-color","white"); 　　$("#d_tab").css("background-color","#aabbff"); 　　$("#b_tab").css("background-color","#aabbff"); 　　$("#personal").css("display","block"); 　　$("#rss").css("display","none"); 　　$("#bookmark").css("display","none"); 　}); 　$("#d_tab").click(function (){ 　　$("#p_tab").css("background-color","#aabbff"); 　　$("#d_tab").css("background-color","white"); 　　$("#b_tab").css("background-color","#aabbff"); 　　$("#personal").css("display","none"); 　　$("#rss").css("display","block"); 　　$("#bookmark").css("display","none"); 　}); 　$("#b_tab").click(function (){ 　　$("#p_tab").css("background-color","#aabbff"); 　　$("#d_tab").css("background-color","#aabbff"); 　　$("#b_tab").css("background-color","white"); 　　$("#personal").css("display","none"); 　　$("#rss").css("display","none"); 　　$("#bookmark").css("display","block"); 　}); }); </script> タブメニューと言っていますが、実質は最初に全ての要素を読み込んで、 選択していない物を非表示にしてタブの色を変更しています。 タブが選択されることでタブの色の変更を行い、 同時に選択された要素のブロックを表示、 選択されていない要素を非表示にしています。 一番苦労したのはFirefoxの挙動が変なことでCSSでの対策…… なんで2.xできつちり動いていたのを3.xで変にするかなあ 下記環境で確認しました WinXP + IE7.0・WinXP+Firefox3.0・MacOSX + Safari ちなみに、Firefox2.xでは1px離れて見えますが、古いブラウザなので無視＞＜ http://mobile-gb.com/wordpress/archives/962 諸君、私はapple使いだ！ コンピュータはiMacだし、音楽プレイヤーはipod touchだ。 しかし、今度のiphoneの熱狂演出はどーかと思う。 考えても見て欲しい。まず携帯電話として…… ipod touchを耳元に当てて電話しているとか、どんなギャグかｗｗｗ 写メ機能、絵文字機能など全て壊滅的、しかも独自料金プラン ああ、あと、コンピュータがないと機能をフルに使いこなせないとか…… で、ゲームプラットフォームとして 携帯電話とは全く違う仕様で出来ており、パイが小さすぎる（DSが2000万台） ソフトのコントロールはappleに握られ（と言うことは多分ロイヤリティがある） 更にipod touchは「ソフトウェアバージョン2.0以降じゃなきゃ使えない」 どうみてもそんな盛り上がるもんじゃないだろう、常識的に考えて。 http://mobile-gb.com/wordpress/archives/960 魍魎の筺アニメ化 きたわぁ*･゜ﾟ･*:.｡..｡.:*･゜(n‘∀‘)ηﾟ･*:.｡. .｡.:*･゜ﾟ･* 我がもっとも好きな本であるところの魍魎の筺のアニメ化 アニメなのであれを普通に映像化できるだろう…… 筺＆筺！！ しかし、キャラデザ、クランプ作画って聞いたとき脳裏をよぎった通り… 京極堂が百目鬼、関口がわたぬききみひろ……本気で奴ら腐女子やなぁ 関口君は無精髭を生やした30がらみの冴えないおっさんなのに…… 礼次郎はちょーイケメンの天才御曹司だから良いけど しかしこれって多分xxxhoricからの繋がりだよな…… http://mobile-gb.com/wordpress/archives/959 そんなタイトルのスレッドを見かける…… えーと、マクロスって全長1kmあるあれですか！？　ガンダムじゃ落とせません＞＜ と言うジョークはさておき、ヴァルキリーvsガンダムだと仮定すると…… 世界観に因るだろうと。ガンダムの世界観（ミノフスキー粒子あり）だと マクロス名物うねうねミサイルは全く意味がないです＞＜ 逆にマクロスの世界観だと遠距離からのうねうねミサイルにガンダムは手も足も出ない そもそもVFマシンは「対巨人用兵器として戦闘機から進化した」もので MSは「宇宙戦艦を高軌道力で潰す」と言う全く方向性が違う兵器だからなあ…… まぁ、最強はファイヤーバルキリー＞＜ http://mobile-gb.com/wordpress/archives/958 魔界戦記ディスガイアＤＳを買う。何度もリメイクされるぐらいだから、まぁ、面白いのだろうと思って… 先生！　チュートリアルからシナリオが先に進みません＞＜ 延々アイテムに潜っては議会レベルアップを繰り返してます…プレイ時間は既に20時間ぐらいになりました＞＜ これは私のような人間にはやばいですよ＞＜ http://mobile-gb.com/wordpress/archives/957 日記をさぼってました！ その間にボーナスが出たらしいよ＞＜ そして最近忙しくて精神的に参ってるらしいよ＞＜　シェリル様聞いて落ち着こう http://mobile-gb.com/wordpress/archives/956 何故か昨日はmixiもうちのさいともはてなにも繋がらなかった   いったい何だったんだろう http://mobile-gb.com/wordpress/archives/955 山村美沙DSをクリアした。 美沙ちゃんマジぱねぇ… 取りあえず話に関連のない3つのアドベンチャーって感じ。 もうちょっと何かあれば良かったかもしれない。 何らかのクロスオーバーとか… ちなみに1話2時間ぐらいなのでちょーサスペンスを見てる感じ。 あと、違う回答を選ぶのは基本ですよねー 「あなたが関わっていた事件は石原葬儀社脱税事件です！」 「おたくの会社はそんなことをしているの！？」 「え？　あ、いや…そんなことはないです」 的な…何考えて居るんだ、この選択肢。 http://mobile-gb.com/wordpress/archives/954