http://blog.dokugumo13.info Ｗｅｂの様々な技術を実験してみるブログ Thu, 04 Mar 2010 16:23:11 +0000 http://backend.userland.com/rss092 ja webサイトを作る際、さまざまなブラウザで問題なく閲覧できるように作らなくてはいけないので、作りながらレイアウト崩れが無いか等のチェックをします。 特にIE6.0がやはり曲者なので念入りにチェックしなければいけません。一番ダメすぎるブラウザのくせに利用者が未だ多いという状況ですからね…。 そんな中、私がブラウザチェックに使っているのがAdobe　BrowserLabです。 もちろん無料のツールですが、予めAdobeIDを取得しておく必要があります（もちろん無料です）。 [caption id="attachment_115" align="alignnone" width="300" caption="adobe browserLabログイン画面"][/caption] メールアドレスとPassを入力してログインします。 ログインができたらチェックしたいサイトのURLを入力して、URL入力欄の右のボタンを押すだけです。 読み込みにちょっと時間がかかりますが、焦らず待ちましょう。 [caption id="attachment_117" align="alignnone" width="300" caption="IE6.0でのチェック"][/caption] こんな感じに表示されます。 [caption id="attachment_118" align="alignnone" width="300" caption="入力項目"][/caption] 赤い枠で囲んでいるところを設定すれば良いだけです。 Delayは低すぎると読み込みきらないまま表示するようです。例えばbackgroundで指定している画像が表示されたりされなかったりします。 ここの数値を上げればちゃんと読みこんで表示するみたいです。 また、一番左の部分でどのブラウザでの表示にするかを選びます。ちなみにその上のviewという項目で画面表示方法を切り替える事が出来ます。 私は基本的にデフォルトのままですが。 [caption id="attachment_119" align="alignnone" width="300" caption="Mac safari3.0での表示"][/caption] safariは文字にアンチエイリアスがかかって非常にキレイに表示されます。 とまぁ、非常に便利なツールですので、ご存じでなかった方はぜひこの機会に使ってみてください。 ただし、ローカルにあるファイルのチェックができないようです。 それが唯一の欠点かも。 http://blog.dokugumo13.info/archives/116 いつも仕事に取りかかる前に管理サイトの検索順位をチェックします。 1つのサイトだけだったらまだしも、いくつかのサイトを管理しているとイチイチ検索エンジンで検索して調べてられない訳で、ましてやキーワードの組み合わせのパターンがいくつかあったりすると順位チェックだけで相当な時間を消費してしまいますよね。 そこで、無料で使える良いツールがあるのでいつもそれ使ってます。 SEOピッシュさんというSEO対策会社さんのHP上で公開されているツールなのです。 [caption id="attachment_107" align="alignnone" width="300" caption="seoピッシュのトップページ"][/caption] SEOピッシュ：http://siterepair.ddo.jp/ FireFoxだとレイアウト崩れが激しいのですが…。 ツールの位置が解りやすいように赤い枠線で囲んでみました。 [caption id="attachment_108" align="alignnone" width="300" caption="入力画面"][/caption] 調べたいサイトのURLと、検索したいキーワードを入力します。例として、このブログのURLとキーワードに「毒蜘蛛　web」と入力してみました。 そして「調査する」ボタンをクリックすると… [caption id="attachment_113" align="alignnone" width="300" caption="検索結果"][/caption] このようにYahoo!とGoogleでの結果が出てくるわけですね。 ちなみにキャッシュを読み込んでいるのか、毎回入力する必要はないです。入力画面もタブで5つまで入力できるので非常に使いやすいのではないかなぁと。 もちろんもっといいツールがあるかもしれないですが、とりあえず無料でここまでできれば十分かな、と思いますがどうでしょうか。 http://blog.dokugumo13.info/archives/106 非常に使えるツールwebpadを紹介してみたいと思います。 ＳＹＮＣＫ　ＧＲＡＰＨＩＣＡさんというweｂ制作会社がフリーで提供されているツールなんですが、自分のサーバーにインストールしておけば気になった事なんかをメモしといて、どこからでも見る事が出来る非常に便利なツールです。 はっきり言ってめっちゃ使えます。なので、個人でサーバーを持っている・借りている人はぜひインストールすることをオススメしたいです。 自分の場合、自宅で思いついた事なんかをメモしといて会社のｐｃから見たりします。いちいち会社のアドレス宛にメールを送ったりする必要なんか無いワケですね。 [caption id="attachment_94" align="alignnone" width="300" caption="webpadログイン画面"][/caption] 色んなサービスのURLやアカウントのメモにも使ったりしますね。 [caption id="attachment_95" align="alignnone" width="300" caption="webpadの管理画面"][/caption] その他、メールフォームなんかもフリーで公開されているので是非使ってみてほしいです。めちゃめちゃ使えます。 というか会社で管理してるサイトのメールフォームに何気に使ったりしてます。郵便番号の入力に応じて自動で住所の入力がされるのは非常に便利です。 様々なツールをフリーで公開されているので、信用し過ぎて「携帯ＣＭＳ使うならこの会社のヤツだな」とか思ってしまうくらいです。 やっぱりフリーでツールなんかを配布して集客するというのも一つの上手いやり方だと思います。 ツールを使ってみて「この会社の技術は素晴らしい」と思えば有料サービスなんかも使ってみたくなったりするワケですし。 特にこのSYNCKGRAPHICAさんは良い例ですね。 今後もよりよいツールを公開していただければと思います。 http://blog.dokugumo13.info/archives/93 web上で使えるドローツールcacooをちょっといじってみました。 [caption id="attachment_82" align="aligncenter" width="300" caption="cacooのサンプル"][/caption] チャット機能なんかもあるみたいなので、チームで共同作業に使ってもよし、 お絵描き掲示板みたいに使ってもよし、な感じですかね。 作成したものは画像データとしてpng形式で出力できます。 AdobeのIllustratorなんかを使える環境ならあんまり必要ないかもしれませんが、使い方次第では非常に強力なツールとなりそうですね。 http://blog.dokugumo13.info/archives/83 Yahoo!検索ブログにて、12/7付でYahoo!検索のアルゴリズムのアップデートが公開されました。 大幅な順位変動によってseo担当者も気が気ではないのではないでしょうか。 Yahoo!検索ブログでは12/7となっていますが、実際にはどうも12/6辺りでアップデートが行われたっぽいです。 普段、自分が検索するときはgoogleばっかり使ってるのでYahoo!検索の対策をおろそかにしがちですが、商業サイトなどではエンドユーザーがYahoo!検索の利用が一番多かったりするので、Yahoo!検索のseoもおろそかにはできないのです。 実際僕の仕事で管理しているサイトも商業サイトなのでYahoo!検索の順位にはちょっとピリピリなりますね。 アップデートから1週間～10日ぐらいは様子を見ないと一体アップデートによって順位決定の基準が解らないので現状はなんとも言えないところです。 以前のアップデートでYahoo!カテゴリに登録していないのに順位が1位になったり謎な感じだったんですが、今回はどうなるんでしょうか。 やっぱ被リンクの質が最も重要視されるんですかね。 現状、順位が下がっても何も手が打てないのは歯がゆいです。 http://blog.dokugumo13.info/archives/78 僕は普段ブラウザはFireFoxを使ってます。会社のPCはMacなのでSafariを使うこともありますが。ちなみに家のPCはvistaのノートPCです。 世の中的にはInternetExplorer（以下IE）のユーザーが圧倒的に多いみたいですが、多分その理由が「PCに最初から入ってるから。」という場合がほとんどなんじゃあないかなぁ？と思うんですが実際のとこどうなんでしょう。 オンラインゲームにはIEが必要だったりするのでオンラインゲームのユーザーには必須なのかもしれませんが、このIEは非常に曲者なのです。 webサイトを作った事がある人はご存じだと思いますが、バグが非常に多い為に思い通りのデザインになかなかならなかったりします。 で、利用率の低い他のブラウザだとちゃんと上手くいくわけですね。 webサイトを作る身としてはＩＥを作った人に対して殺意すら湧きそうです（笑）。 FireFoxはアドオンをインストールすることで拡張できたりするし、割と頻繁にバージョンアップしてるので、新しいCSSの機能も使えます。 会社で管理しているサイトのアクセス解析を調べると総アクセスの8割ほどがIEで、そのうちIE6とIE7とIE8が大体3：4：3ぐらいの割合ですかね。 特にIE6はバグだらけのロクでもないブラウザです。サイトを作るとき毎回いちいちIE6で巧く表示できてるかチェックしなければいけないくらいです。 IEを使う特別な理由がなければ、ぜひFireFoxをみんなに使ってほしいなぁと思うのでした。 できるポケット+ Firefox Mozilla Firefox 3対応 http://blog.dokugumo13.info/archives/74 実はこのブログ以外にも二つほどブログをやってたりします。 1つはアメーバブログで、もう一つは最近始めたFC2ブログです。 Wordpressの機能をテキトーにいじってたんですが、ウィジェットのRSSの意味が良く分からなかったんですが、前回の記事で紹介した本を読んでたらRSSの事について書かれてたので設定してみました。 単純にウィジェットの設置画面で別のブログのRSSのURLを張り付けただけなんですけどね。そうするとこのブログの右側わかります？二つのブログの最新記事のタイトルが表示されてるんですよ～。 まぁ「だから何だ？」って話なんですけど。 アメーバブログのRSSのURLは　http://rssblog.ameba.jp/ｱﾒｰﾊﾞID/rss.html FC2ブログのRSSのURLは　ブログURL/?xml（最新のエントリの場合） となりますので、このURLをウィジェットの設定画面で張り付ければいいだけです。 ちなみに投稿した日付が表示されてるんですけど、表示したくなければウィジェットの設定でチェックボックスにチェック入れなければ良いです。 また、僕はあえてやりませんでしたが記事自体の表示もさせる事が出来ます。 今回は自分の所有する二つのブログでやりましたが、お気に入りのサイトやブログのRSSを張り付けても便利かもしれませんね！ アメーバブログではじめるこだわりブログ (Ameba公式ガイド) FC2ブログではじめるこだわりブログ 第2版 FC2ブログ公式ガイド http://blog.dokugumo13.info/archives/63 さて、これまでは記事にＧｏｏｇｌｅＡｄｓｅｎｓｅをもってくる実験をしましたが、今回はＡｍａｚｏｎの商品を紹介できないものかと思い色々調べてみたところAmazon Reloaded for WordPressというプラグインが使えそうなのでダウンロードし、いつものごとくサーバーのプラグインが入ったフォルダにアップロード。 で、設定なんですが予めアマゾンでアソシエイトＩＤってのを取得しとく必要があります。もちろんプラグインをインストールしてからでかまいませんが。 またそれとは別にＡｍａｚｏｎＳｅｃｒｅｔＫｅｙとＡｍａｚｏｎＡＰＩＫｅｙを取得する必要がありまして、こっちが英語サイトで手続きをしないといけないので非常に面倒。 こちらの記事を見ながらやればまぁできるかな、と。 でＷｏｒｄＰｒｅｓｓの設定画面でそれらを入力したらＯＫ。 新規投稿画面の下部で商品を検索することができるようになるわけです。 僕がＷｏｒｄＰｒｅｓｓをなんとなく始めてみようかと思った時に手にとって、非常に参考になった本でも紹介してみましょうかね。 本の対応しているバージョンが2.6までなので（今現在の最新は2.8.5）若干設定画面の写真が違ったりましたが、微妙な差ぐらしかないので特に問題ないかと。 「○○をする」っていう項目別に構成されてて非常に解り易いです。何気に専門用語の解説もあったりするのでより理解が深まるかと。 まだ全ページしっかり読んだわけではありませんが、初期テンプレートのソースの解説が非常に解りやすいのでデザインを自分でカスタムしたいという人は特に重宝するのではないでしょうか。 「右も左もわからないけどこれからＷｏｒｄＰｒｅｓｓを始めたい」という人に是非読んでほしい一冊です。 WordPress逆引きデザイン事典[2.X対応] http://blog.dokugumo13.info/archives/52 adsense表示のテストです。 前回の記事で書いた「AdSense-Deluxe」についてですが、ソースを若干いじらないとダメだったみたいです。 とある記事を参考にソースをいじってみたらできたっぽいです。 http://blog.dokugumo13.info/archives/49 このWordPressにGoogleAdsenseを張り付けてみようと、Adsenseのアカウントを取ってみました。 アフィリエイトには対して興味は無いんですけど、設置とか設定とかちゃんとできるようにはなっときたいので。 ちなみに別でやってる無料ブログへの楽天やAmazonの広告の貼り付けは滅茶苦茶カンタンだったんですが今回は苦戦。 「AdSense-Deluxe」というプラグインが良さげだったので導入して設定したものの、どうもうまく表示ができない。 サイドバーに表示させようとテンプレートのサイドバーのphpファイル内にソースを入れてみたんですが一向に表示せず…。 もう少し格闘してみます。 http://blog.dokugumo13.info/archives/43