Web Archive

floatを使っているときにきっちりdivタグの幅に合わせて表示させていると結構スクロールバーの幅って重要だったのでまとめてみました。
2列で表示させたいのに1列になってしまったりと。

またWindowsのスクロールバーの幅設定はデフォルトのままにしています。

IE6.0

17px

IE7.0

17px

Firefox1.5

17px

Firefox2

17px

Firefox3rc

17px

Netscape7.1

15px

WinSafari

多分16px 一番右端の枠も入れると17px

Opera9.25

18px

Operaさんが18pxだったのがビックリ。
これに合わせないとピッタリといかないところですね。

毎回楽しみに拝見しているWeb担当者ForumのSEOコーナーで、新しく連載がスタートしたようなので勉強させてもらいました。

キーワード使用の要因 - グーグル&ヤフーのSEO 57要因 日米プロの重要度&コメント付きではSEOに関する内容をいろんな方の意見を取り入れ公開されているので、検索エンジンでちょっぴり上位に表示したい～という人にはうってつけかと。

上記記事の内容から抜粋し、自分用のメモにしてみました。

titleタグ内でのキーワード使用

サイトにただ1つSEOを施すとすると、良いtitleを考えるために時間をとることだ。

本文でのキーワード使用

ページの始めのほうであるほど評価は高い。また豊富なテキスト量の中で使われるほうが効果が高い。

h1タグ内でのキーワードの使用

重視されるポイントであることに変わりはありませんが、絶対必要項目ではありません。

えっ、そなの？ｗ

キーワードの見出しタグでの使用

ページのタイトルやアンカーテキストとあまりにも揃いすぎていると順位を損なうかもしれない。テンプレートによってウェブサイトの大部分が同じ内容の複製になりすぎる場合、クロール頻度の減少を引き起こすかもしれない。

気をつけたいところです。

ドメイン名でのキーワードの使用

キーワードが英文の場合に限る。たとえば、キーワードが「旅行」でドメイン名がtravel.comでは意味ない。キーワードも「travel」である必要がある。

ドメイン名にキーワードが含まれていて役に立つのは、ハイフンで区切られている場合だけだ。一般的な推測では、ドメイン名に多くのハイフンが含まれすぎていると信頼性に問題が生じる場合があるため、1つか2つ以上のハイフンはお勧めできない。良いブランド名は、キーワードが詰め込まれたドメイン名よりも常に良いのだ。

これに関してもボクも実証済み。ボクがひそかにやっているTumblrではその特定のキーワードをサブドメインに含めて、且つh1タグもそのキーワードにしたら、そのキーワードでGoogleで1位になった。
しかもTumblrを作った当初から約半年ほどもである。これ最強！

ページURLでのキーワードの使用

日本語をエンコードしたURLの場合は、検索結果でもボールドになっているためいくぶんかの影響を持つと考えられる。

あっ、意味があったんだ。わざわざWordPressでURLをそれっぽく作っていたけど、エンコードされて日本語でも意味があるみたい。
でも分かりやすいって言ったら、きちんと英語に直されたURLだろうな

このタイトルの場合に
XML or SQL - Geekなバースデーケーキ
こんな感じのURL
http://hisasann.com/digital/2008/05/xml_sql_geek_cake.html

画像のaltやtitleでのキーワードの使用

画像をリンクに使うなら、alt属性はアンカーテキストと同じぐらい重要だ。また、画像検索はそれなりにトラフィックを生み出すので、alt属性は付けておくべきだ。

昔からの王道ですね。でもボクのブログでは画像をリンクにしていないのであんまり意味がないのかも・・・

meta descriptinタグでのキーワードの使用

meta descriptionでは、キーワードを使うよりも、各ページで異なったものにするほうが重要だと思う。多くの人は汎用のmeta descriptionを使うか、全然入れないのを好むように思える。

重要なのは分かっているのですが、各ページで異なったものを入れるのはこれまた大変。
MTではこういったテキストボックスがあるが、今まで1度も使ったことがない。

boldやstrongタグでのキーワードの使用

strongの使いすぎに注意。boldは影響力なし。

どうりでブログツールの「b」で太字にしても「bold」にならないわけだ。

Macユーザーにはお好みのSafaliだが、Windows版のSafariはまだそこまでシェアが高くなく、そのあたりがちょっと寂しいですが、Safari3.1から開発というメニューが追加されたので今後に期待です。

たいていの人がWeb開発ではFirefox + Firebugだとは思いますが、今度のSafari3.1もかなりそれ相当の機能を備えている。

ページをこのアプリケーションで開く

ローカル内にあるブラウザを自動で検出してくれるのか、Sleipnirまでも開けた。
あとはIE、Firefox、Netscape、Operaも入っていればここに出てくるみたい。

クロスブラウザ対応のときなんかに役に立ちそうです。

ユーザーエージェントの切り替え

これもずら～～と選べるユーザーエージェントが並んでくれているので一発で切り替えができる。

Webインスペクタを表示

おお、いつもFirebugで見ているのがSafariでも見れる。

手っ取り早くキャッシュをクリアできる

ありがたいお話です。
毎回「設定」→「キャッシュのクリア」に行かなくて済むんですから。

などなど・・・

Mac版のSafariはどうなんだろう。

以下からダウンロードできます。
アップル - Safari - ダウンロード

ちょっと前までTwitterがofflineになっていました。
こういった絵もゆる～くてなんかかわいいですね。

単純に「今メンテしてますっ！」的な画面より何倍もユーザーにやさしい。

仕事でWebブラウザで開いた画面をキャプチャすることが多々あるのですが、今まで海外の画面キャプチャ用のソフトを使っていて、いつのまにかシェアウェアになっていたり、試用期間が設けてあったりと意外と使いづらいのが多かったです。

単純に「Alt + PrintScreen」で取るのもいいのですが、スクロールする必要があるWebサイトの場合にちょっと厳しいです。

そんなこんなしていたら会社の人にSleipnirのプラグインでいいのがあるよと教えてもらったのでメモメモ。

窓の杜 - 【NEWS】フェンリル、Webページを画像キャプチャーできる「Sleipnir」プラグインを公開

これはかなりいい感じです。
PNG形式で圧縮してくれるので画質もいいので、お客さんに渡すような画面のキャプチャとしても大変機能します。

まぁSleipnirを主要ブラウザにしていない方は面倒かもしれませんが、画面キャプチャするためだけに入れてもおつりが来るぐらい良質なプラグインでした。

■Sleipnir
カスタマイズに特化したブラウザ Sleipnir。上級者のために。

■SnapCrabプラグイン
Sleipnir | プラグイン | SnapCrab

最近話題になっているIETesterを使ってクロスブラウザチェックを行う場合に、IETesterではうまく動作しないことがあるので、補足としてIE6.0スタンドアローン版を用意すると良いかもしれません。

例えばJavaScriptから新しいウィンドウを開きOpenerを参照するといったことが現バージョンでは出来ていません。
画面連携をする場合にはやっぱりまだスタンドアローン版が必要そうですね。

evolt.org - Browser Archive

上記サイトで「ie6eolas_nt.zip」をダウンロードすればすぐに使うことが出来ます。
IE6.0、IE7.0の両方で確認する場合にオススメです。

まさかこんなサイトがあるとは思わなかったがインパクトとしてはめちゃめちゃ面白い。

その名も「Is Twitter Down?」

上にサイトの画像を載せましたが、単純に「No」と書いてあるだけ、これもWebサービスなんでしょうね。
わざわざドメインまで取得しているところがGeek！

Is Twitter Down?

web製作は求められるスキルが多すぎ！:アルファルファモザイクより。

HTMLを筆頭にCSSや、JAVASCRIPT、
DTPデザイナー並のデザイン能力や色彩能力、
そして、フォトショップ、イラレータ等の
ソフトを使いこなすスキル、
それだけでは、飽き足らず、
昨今のweb2.0の流れから、動的なページが流行。
parlや、phpによるCGIアプリケーション開発
それと連動した、SQL等のデータベース言語のスキル。
欲を言えば、FLASHによるアニメーション作成や
アクションスクリプトによるプログラミングスキルも求められる。

最近では、サーバーを直接いじる機会も多く
単にFTPによるファイルのアップロードだけでなく
アパッチを操作した、フレンドリーURL操作等のスキルもいる。
またUNIXやLINUX等のOSの知識もある程度求められる。

さらにはさらに欲を言ってしまえば
SEO、ハック、SSLのセキュリティ、マッシュアップ等
こまかーーい、いろんな技術も必要になり
ITの職種の中でも、これほどいろんな技術を求められる
仕事はないのではとさえ思う。

via: web製作は求められるスキルが多すぎ！:アルファルファモザイク

確かにWeb屋さんの仕事はやる範囲が結構多い気がする。
ボクはどちらかというと画面デザインよりは裏方の人だから、JavaでどのFramework使って実装しようかな～なんてことを考えたり。
難しい処理をラッピングするプログラムなんて書いたりするんですけど、それでもHTMLやCSSは触るわけで・・・
しかもSEOやWeb2.0デザインも把握して、ユーザビリティを考えると読まなきゃいけない本は山積みですｗ

最近Ajaxで実装するサイトもちらほや出てきてるから、JavaScriptもしっかりと理解していないといけない。
それ以外にもSQLや各種ツールの使い方などなど。

ここまではやっててあたりまえなレベルな雰囲気があるから少々きついのだが、さらに言うとプログラマーは常に新しいものにアンテナ貼る必要があって、Webサービスや新しい技術も最低限「Hello World!!」くらいは試しておかないと、上司に使ってみたい技術の提案すらできない。

こう考えるといったいどれくらい技術に時間を費やせばいいの？となってしまう。
（つまり時間費やしたもん勝ち？ｗ）

とはいっても以下のように検索するスキルが実際に物言うのは否めないですな。

大枠覚えたら、細かいところはググりながらやればいい。
解決方法を見つける手段をマスターすればいいのだ。

via: web製作は求められるスキルが多すぎ！:アルファルファモザイク

上記は単に技術スキルだけだけど、実際にはコミュニケーションノウハウもしっかりと学習する必要がある。
提案力、協調力、コーチングといった人と話す能力がとっても重要である。
これができないと技術スキルがあっても全然相手にしてもらえない。
特にフリーエンジニアの業界だと、このへんが顕著に現れる。

はぅ・・・こんなに列挙したら一体どこから手をつければいいの？と考えてしまうが、実際には日々の積み重ねで磨く以外に方法はない。

さらに言うとプライベートで調べたい趣味のことや、家庭のこと、子供のことも学ばなくていけない状態ですからね。

う～ん、いつ寝ればいいのでしょうｗ

でもITやコミュニケーションが好きで好きで仕方がないので、ボクの性には合っているんでしょう。

今の時代2.0という言葉がつくと、新しいとかかっこいいとかのイメージがだいぶ定着してきたけど、その2.0をいろんなアイテムとかにも当てはめて投票形式で、2.0ランキングを行っているのがこのサイト。

確かにiPod TouchはDesign2.0部門だなわ。

Is it 2.0 ? - www.isit20.com

[via]
100SHIKI.COM

10月19日、Microsoftから提供されたマッシュアップツールを試しに使ってみた。
ブラウザ上で様々なWebサービスAPIをマッシュアップし、簡単にWebサイトを作れるという。
なおWindows Live IDが必要になるので、始めにアカウントを取る必要があります。
Microsoft Popflyでサインアップをすればもうそこにはマウスでグリグリなツール郡とのご対面。

サインアップをするときにMicrosoft Silverlightが入っていないと動作しないので、そちらも合わせてインストールする必要がある。

というかなぜアヒルなんだ。かわいいけどね。

左側にあるツールボックスで使いたいWebサービスを選んで画面中央にドラッグするだけ。
今回はお試しでFlickrとTwitterをドラッグしてみた。そしてTwitterの赤い箱の青い●から矢印をFlickrの赤い箱へ。

これでマッシュアップは完成みたい。

プレビューを押せばFlickrとTwitterがマッシュアップした画面に遷移する。

設定を変更したいときは、赤い箱の脇にあるドライバーのようなアイコンをクリックすればTwitterの何とFlickrをマッシュアップするかが選べる。
Flickrを使うときにはFlickr API Keyを設定してみた。なくても動くのかは試していません。

これがプレビュー。
自分のTwitterの記事と一致するような画像が出てきた。
これは楽しいかもしれない。

他にもAPIはかなりあり400種類ほどあるそう。カチャカチャいじって遊んでみるのもWeb2.0体験としては面白いかもしれない。

■関連サイト
・素人さん歓迎のブロック感覚マッシュアップツール「Popfly」

アンカータグを使いたいがhref属性は特に使わずonclickイベントで処理を実行させたい場合は、以下のようにシャープを使うことによってアンカータグのリンクをクリックしても特にページには遷移しないように出来る。

これをすればリンクとしての機能を使うが処理はonclickイベントで実装することが可能になる。

<a href="#">test</a>

他に何か良い方法があるだろうか。

ティム・オライリー氏のインタビューがあったのでメモ。
ティム・オライリー：ＷＥＢ２．０提唱者に聞く----独占インタビュー - 毎日ｊｐ(毎日新聞)

　オライリー氏　ウェブ２．０は「モノ」ではなく、市場の段階を表す概念だ。パソコン（の基本ソフト＝ＯＳ）にたとえるなら、ウェブ２．０は、まだ（９２年に発売された）ウィンドウズ３．１の時代にあるといえるだろう。まだ先は長く、数多くの発展や革新、市場の大転換が待ち構えている。マイクロソフトが今日のような勝者になれたかどうかは、発足時には誰も分からなかった。産業が成熟期を迎えれば、今後５年以内にはウェブの世界の風景は大きく変わるだろう。

via: ティム・オライリー：ＷＥＢ２．０提唱者に聞く----独占インタビュー - 毎日ｊｐ(毎日新聞)

確かに前と比べてネットに対しての見方は大きく変わったような気がする。
今はBlogやったりSNS覗いたり買い物してみたり。何年か前には考えられない状況なのは確か。
これを利用している人と利用していない人の格差（デジタルデバイド）はどんどん進んでいくんでしょう。
うちの嫁なんて、一応タッチタイプは出来るみたいなんだけどインターネットに対しての恐怖心がすごいのでIEの立ち上げ方すら知らない・・・（笑）

なおティム・オライリーの独占インタビューを読んで。 こちらのブログを読んでたら、Web2.0 EXPOなるものが11月に開催されるよう。
でもなぜ平日～～～。仕事じゃい。

■関連本

bizmemoさんがご自分のPing先を公開してたので便乗

http://api.my.yahoo.co.jp/rss/ping?u=[BlogのRSSアドレス]
http://api.my.yahoo.com/rss/ping?u=[BlogのRSSアドレス]
http://rpc.reader.livedoor.com/ping
http://ping.fc2.com
http://r.hatena.ne.jp/rpc
http://ping.myblog.jp
http://bulkfeeds.net/rpc
http://ping.blog360.jp/rpc
http://www.tagclick.net/ping
http://pingoo.jp/ping/

ちなみにGoogleとかテクノラティとかはPingooで一括送信してるので、このブログのPing先には指定してません。
Movable TypeだとあんまりPing先増やすとタイムアウトでエラーになっちゃうので、こうゆうサービスは便利。
でもYahooのPingがいっつもエラーになっちゃうのはなんでだろう・・・

Ping一括配信サービス Pingoo!

20人の芸術家による作品が、クールなインターフェースナビゲーションでお出迎え。

Flashは作ったことがないけど、こうゆうのを見ると需要がどんどん増えているのかな～と感じてしまう。

PENTAX Photo Gallery

やっぱりはてブが一番のようです。
以外にもYahooブックマークが2位なのにビックリ。
Yahoo利用者が多い証拠なんですね。

FC2ブクマ・・・
これからか？ｗ

Web2.0ナビ: ソーシャルブックマークサービス別の利用率を出してみた

なんと言うか衝撃的だった。
実際まだ梅田望夫氏のWeb進化論は読めていないのだが、まずはフューチャリスト宣言から読んでみた。

この本の楽しいところは梅田望夫氏と茂木健一郎氏の対談が一冊の本になった感じでとっても読み易い。
そしてこのお二人のお話はついつい朝方までかかっても読んでしまいたいほど、魅力のある話をされていて本当にバイブルになった。恐らくWeb進化論もそうなるだろうが。

お二人ともGeekなネットヘビーユーザーだからこその意見。Googleに対しての意見、はてなからのメッセージなど、本当にこっちが好きな人には堪らないないようになっている。
いつまでも応援していたいお二人です。プロフェッショナル今日も見ましたよ。茂木さん！笑

【関連リンク】
・茂木健一郎　クオリア日記
・My Life Between Silicon Valley and Japan

【関連の本】

Web2.0系のブログでよく見るBeta版のバナーをかっちょいい感じで作れるジェレネータをご紹介。
PCにインストールするアプリでBeta版だと、ちょっとインストールにためらっちゃいますが、Webの世界でBeta版が基本。
これは常にGUIやサービスを追加していきますよ～という意味でBetaなのです。

かっこいいロゴでブログのタイトルを彩ってみてはいかがだろうか。

以下に簡単な操作方法を。

表示させたい文字をText欄に入力し、右側にあるイメージのどれかを選択。
たったこれだけ。
後は、出来上がったイメージを右クリックから画像を保存しちゃえばいつでも使えるロゴの作成完了。

細かい部分の微調整は、各テキストボックスに値を入力すればOK。

APPLYを押しても設定を反映できます。

こんな感じで作ってみた。

これからブログのタイトル横くらいに表示してみようと思います。

以下のURLからどうぞ。
Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator.

Top 10 Twitter AppsこちらにTwitterアプリのTop10があったので紹介いたします。

ボクはまだTwitter歴は浅いほうだけど、毎日チェックせずにはいられない依存状態に陥っています。
Mixiとはまた違って楽しい。というかMixiはあんまりやっていないけど。

以下Top10

• 1位：Atlas - powered by Fresh Logic Studios


• 2位：Squawk: Connects Second Life up with Twitter and Jaiku.


• 3位：Twitticious


• 4位：Remember The Milk for Twitter


• 5位：Twitter Comic Book - TimWintle - SocialComicBook.com


• 6位：Mashing 30Boxes and Twitter


• 7位：Twit Bin


• 8位：TwittyTunes


• 9位：Twitterment


• 10位：Flotzam

英語圏用のアプリもあるので、日本だときついのもありますが、やっぱり英語だろうとTwitterをカリカリいじれるのが楽しい。
みなさんもいじってみてはいかがだろうか。

以下がボクのTwitter。もしよければ…
Twitter / hisasann

ブログのアクセス数を増やす21の戦略このエントリーがあまりにすばらしいのでちょっと言及。

ただし、SEOmozという海外ブログで書かれている内容なので、もちろんこのSEOも海外向け。

この中ですばらしいと感じた内容は、

1.適切なブログソフトを選ぶ（または自作する）
ぶっちゃけこれが一番難しいと思うが、自分がどのブログサービスを使うかが重要になってくる。
既存のブログサービスを使えばURLもそのブログサービスのドメインになってしまう。
それだと独自っぽさがなくなってしまうので、ブログ自体を愛するなら独自ドメインを作ったほうがいいのだろう。
それならMovable Typeを使ったブログ作成が望ましい。
ただし、この場合レンタルサーバ代とドメイン代が掛かってしまうが年間にして両方合わせて1万円もいかないだろう。

7.流行に飛びつかない
意外と飛びついちゃう。笑
つまり流行を追っても、そのネタに対して言及しているブログなんて腐るほどあるし、他のブログより面白い言及を続けていき、完全にブランド化しないとユーザは来てくれない。
そうではなく、ニッチに分野でもロングテールは意識されるので、ちょっと面白分野を突き詰めて評価されるのが重要ということである。

14.人間味を出す
これもすごく重要だと思う。
ボクは他にもニュース系のブログをやっているが、単純に画像や動画をペタペタ貼ったブログより、その画像を見てどう感じたとか、この動画のここがすばらしいとかのコメントを入れてエントリーを作成したほうが見ている人を飽きさせないと思う。

SEOという言葉が出てきて、ブログのHTMLを準拠させるとかに必死になっていたときがあるが、今はその中身がまさにSEO効果大な時代なんであろう。
SEOとSMOを駆使すれば、それなりのトラフィックを稼げるということである。

でもそう簡単にはいかないけどね。笑

*LOVE IS DESIGN*さんのところで今まであんまり見たことがない、検索サイトまとめをしてくれました。

らぶさんのページは相変わらず「無駄にエロい」し、いっつもホッテントリだし、見ててこっちが楽しくなってくるよん。ｗ

それにしても検索サイトってこんなにあったんだ。
普段Googleしか使わないから知らなかった…

ナウなヤングにバカウケな「検索サイト」まとめ | *LOVE IS DESIGN*