1. Home
  2. 8 月2007

8 月2007

jqueryでカテゴリごとにメニューの画像を切り替えるTips

全ページに共通のグローバルナビゲーションがある場合、私はphpのincludeを利用して、navi.txtとか作ってそれを全ページに使いまわすということを結構やります。
非常に便利というか、修正がある場合でも1つのファイルを修正するだけで済むという手間要らずな感じが大好きなのですが、カテゴリごとにメニューの画像を切り替えるのが面倒くさいんですよね。
例えば「about」のカテゴリーのページを開いた場合はグローバルメニューの「about」の画像のみがonになるとか。

で、それをjqueryを使って何とかならないかなと思ってやってみました。

例えばHTMLがこんな感じだったとします。メニューの画像はそれぞれ_off.gifと_on.gifの2つを用意。 

<div id="GlobalNavigation">
  <ul>
    <li class="about"><img src="images/about_off.gif" alt="about" /></li>
    <li class="gallery"><img src="images/gallery_off.gif" alt="gallery" /></li>
    <li class="link"><img src="images/link_off.gif" alt="link" /></li>
  </ul>
</div>

そして、javascriptの方が、こんな感じ。 

$(document).ready(function(){
　　//パス取得
　　path = location.pathname

　　if(path.match("/about/")){
　　　　$("#GlobalNavigation .about img").remove()
　　　　$(#GlobalNavigation .about").prepend('<img src="images/about_on.gif" alt="about" />')
　　}else if(path.match("/gallery/")){
　　　　$("#GlobalNavigation .gallery img").gallery()
　　　　$("#GlobalNavigation .gallery").prepend('<img src="images/gallery_on.gif" alt="gallery" />')
　　}else if(path.match("/link/")){
　　　　$("#GlobalNavigation .link img").remove()
　　　　$("#GlobalNavigation .link").prepend('<img src="images/link_on.gif" alt="link" />')
　　}
})

まず、path = location.pathnameで、現在開いているページのパスをpathという変数に代入します。
このとき取得できるパスは、ルート以下の部分となります。
http://2inc.org/about/index.htmlなら、/about/index.htmlという感じ。

そして、path.match(検索文字列）でpathの中に検索文字列が含まれるか調べます。
含まれていたらtrueを返すので、これをif文の条件としてそれぞれ分岐させます。

あとは、<li>のclassを目印として_off.gifの削除、そして_on.gifの挿入を行うという流れです。

ただ、このスクリプトだとメニュー項目が増えるたびにごちゃごちゃ書き加えないといけないので、手間です。
もっとオブジェクト化して引数渡すだけでチャチャッとできるようにすると使い勝手も良くなるんですが。
残念なことに私にはそこまでjavascriptの知識がありません…。

Apple Store Tenjin

Apple iMac 2.4GHz Intel Core 2 Duo/24＂/1GB PC2-5300/320GB/SD/ATI Radeon HD 2600 PRO 256MB MA878J/A

先週末に福岡にある「Apple Store Tenjin」に行ってきました。もちろん新iMacを観るため。てかApple Storeってはじめていきましたが、かなりシャレてますね。レジまでiMacですよ。イヤホンはBoseですよ。

まぁそれは良いとしてiMac。やっぱり良い。思っていたよりも断然良い。ネットでレビューなどみていると色ムラがひどいとか液晶の評判はあまり良くないようですが、実際実物を見た感じではそう悪くなかったです。というか、自宅の液晶も会社の液晶も残念な感じなので、私的にはiMacの液晶で大満足なのですが。

Apple Storeで買うよりネットで買ったほうが安いだろということでその場での購入は見送りましたが、ネットだと入荷待ちばかりで、やはりApple Storeぐらいでしかまともに購入できないっぽい。Apple Storeでも、ものによっては相当遅くなるみたいですし。

買うとした場合、スペックはどうすんだということになりますが、メモリはあとから簡単に追加できるようなので、とりあえずメモリは1GBのままでCPUを2.8Ghzに増強して購入しようかと考えています。それで重いようならメモリを増強という方向で。まぁ何にしろ、今一番の問題は金。

テンプレサイト

実は前々から「-es」というテンプレサイトを運営しておりまして、もう半年近く更新してないんじゃないかと思うのですが、久しぶりにリファラを調べてみると、結構使ってくださってる方がいてくれたり。ちょくちょくメールもいただいたりとか。しかもこの「2inc.org」よりはてブ数が多いっていう。

「-es」はもともと就活用に作ったサイトなので、今改めて見直してみると、満足できるものはほとんどないのが現状。まぁだから半年近くも更新してないわけですけどね。でも今でもテンプレつかってくださってる人たちを見つけたりすると、もっと良いものを提供したいと思ったりするわけです。もっと、「これ業務で使えんじゃね？」と思ってもらえるような質の良いものを作ってみたくなってきたりするわけです。はい。

新しいテンプレを配布するなら、ここで行おうかなと思ってるので興味のある方は見守ってください。できればこの盆休み中には1つくらいアップしようかと思ってますので。

でもこの過疎ブログで公開して、はたして需要があるのでしょうか。

新iMac発売！

新iMacが発売したようです！どうせまだ先だろと思って危うく1つ前のモデルに手を出すところでした。

iMac 20/2.4GHz Intel Core 2 Duo MA877J/A+4GBメモリ増設

以前iMacを格安で販売していた楽天のショップを覗いてみたところ、すでに格安で販売されていました。iMac20インチモデル、CPU2.4GHz、メモリ4GBで212,762円 (税込223,400円) 送料込。

ちなみに、同じスペックのものをAppleStoreで査定してみたろころ、306,900円でした。うーん、だいたい8万近く安いって…安すぎ。あまりに安すぎて品質に難があるんじゃないかとか少し心配になりますね…。でものたのたしてるとまた品切れとかなりそうですね。うーん。

ほかにもいろいろなモデルがあるので気になる方はチェックしてみると良いかと思います。

そういえば、Appleの日本語サイトもデザインが変更されていました。スッキリしていてかなり良い。Webデザインという点でもお手本になりますね。やっぱり欲しいな、iMac。。

６日間でGoogleにインデックスされる方法って。

はてぶで見つけた記事。

この記事で紹介されている方法は12個。

  • Googleのサイト登録フォームにURLを登録する。
  • Googleオフィシャルブログの記事へリンクを張る。
  • 同じように、Techcrunchの記事にもリンクを張る
  • スパムではなく、読んで面白いと思ったブログ記事には、コメントを残す。
  • このブログをBlogger Forumで宣伝する。
  • ２・３時間かけて、ソーシャルニュースサイトで人気が出るような記事を書く。
  • 自分のサイトにRSSフィードリンクを追加する。
  • Technoratiにブログを登録する。
  • 自分の投稿にTechnoratiタグを追加するプラグインをインストールする。
  • ウェブマスター ツールを利用する。（WordPressユーザーは、Google Sitemap　プラグインを導入する）
  • この他に、こちらのTipsを実践する。
  • 毎日、最新記事を投稿する。

上記の記事自体も海外からの引用のようですが、実際、googleにインデックスさせるだけならこんなにたくさんんのことをやらなくても良いような気がします。とうことで、私的googleにインデックスされる方法。

  1. サイト（ブログ）を作る。
  2. google analyticsを埋め込む。
  3. ウェブマスター ツールを利用する。

以上。3つ目は別になくても良いような気がする。ようは、私はサイトやブログを構築した際、すぐにgoogle analyticsを埋め込みます。そしたら、最低でも2日後くらいにはロボットが巡回してきています。経験上では。Googleの順位決定にGoogle Analyticsのデータが使われていたことが判明！なんて記事も書かれているわけですし、あながち間違いないんじゃないかなぁと。

「Googleのサイト登録フォームにURLを登録する。」なんてことをするより、google analyticsを埋め込んだほうがよほど早くインデックスされると感じています。検証したわけではないのでハッキリと断言はできませんが。個人的には早い段階でgoogleにインデックスされることより、早い段階でyahooにインデックスされるほうが難しいです…。

12>

このページの先頭へ