はてなブックマークβ版

はてなブックマーク新バージョンのβ版を試用してみました。
http://bbeta.hatena.ne.jp/

β番公開の目的のひとつは意見・感想募集とのことなので感想を書いてみます（試用時間20分・試用日2008-11-07）。


その前に自分のはてぶスペック（？）を。
見る（読む）はしていても、ブックマークする方の機能は使っていない（使ったことがない）ので、ライトユーザーです。
主にWEB周辺の技術情報の収集のため、１日１回はチェックしています。はてぶ以外にはnewsingを併用。


【デザイン】

従来バージョンと全く違和感なく使用できて良い感じだと思いました。
昨年のYahoo!さんのリニューアル以来、3カラムレイアウトが主流になったので、（実質１カラムですが）2カラム維持できたかぁと。

ただ、見やすくなったとは言え、エンジニア向けのようなデザインのままなので、新規ユーザー層の獲得に（デザインが直接的に）貢献できるかというと、どうなんだろう？？と首をかしげたくなります。



【機能】

従来バージョンにあった「過去の人気エントリー」というリンクがなくなったみたいで、それがちょっと不便かなと。
newsingのようにカレンダーがあれば便利だと思います。



以上、パッと使ってみての個人的な感想です。

    • -


少人数だと実際上はソースコードのリファクタリングだけで精いっぱいなんですよねぇ。表には見えないけど裏の努力は凄いんだろうなぁ。


さてさて、次のバージョンが楽しみですw



【PR】

弱輩ながらも会社を作りました。
お店を調べたいだけでなく、お店を出したいという方向けのコンテンツも始めました。

・真夜中ナビ 深夜営業のお店探し
・厳選!! 店舗デザイン/設計・店舗リフォーム | Crane & to.

IPアドレスで携帯を振り分ける方法

携帯とPCの振り分けや携帯各社の振り分けとして、広く使われているのがユーザーエージェント（UA）。UAによる振り分け方法は検索すればいくらでも情報が出てくるので省略。

    • -

ご存知の通りUAはブラウザ側で自由に変更（偽装？）できるので、厳密に携帯電話からのアクセスに限定したい場合などには、十分ではありません。そこで、より高精度で携帯電話からのアクセスかを判定するには、IPアドレスで振り分けなければなりません。


完全に携帯IPアドレスに制限したい場合にはサーバー側で設定するのが正しい選択ですが、このページ/コンテンツだけはIPアドレスで振り分けたい、というスクリプト側でのちょこっと対応に関するtipsです。


さて、論よりソース。

<?php
if (isDoCoMoIP()) {
    //ドコモだけの処理

}

/**
 * DoCoMoケータイからのアクセスかをIPアドレスをもとにチェックする関数
 */
function isDoCoMoIP()
{
    require_once 'Net/IPv4.php';// PEAR Net_IPv4
    // DoCoMo のIP帯域をセット
    $ip_list = array(
        '210.153.84.0/24',
        '210.136.161.0/24',
        '210.153.86.0/24',
        '124.146.174.0/24',
        '124.146.175.0/24'
    );
    foreach ($ip_list as $ip) {
        if (Net_IPv4::ipInNetwork($_SERVER['REMOTE_ADDR'], $ip)) {
            return true;
        }
    }
    return false;
}

// au, softbank 同様につき省略

?>


PEARライブラリのNet_IPv4を使えば処理はこれだけです。
http://pear.php.net/package/Net_IPv4


IPアドレス帯域は携帯各社のサイトに載っているので、追加更新するだけです。
・DoCoMoのIPアドレス帯域
・auのIPアドレス帯域
・SoftbankのIPアドレス帯域

      • -

[ 追記 ]

.htaccess で制限する場合には以下のサイトがとっても便利です。
携帯端末以外のIPを制限するhtaccessを簡単生成　『Mobile IP htaccess Maker』 - HTMLタグボード

      • -

[ PR ]

真夜中ナビ 深夜営業のお店モバイルでモバイル会員限定コンテンツを作りました。


お店の写真を写メールで投稿したり、深夜族ともだちにプチメを作ったりといった感じになっています。深夜営業のお店によく行かれる方は、写真や情報を投稿して頂けると幸いです。


なんだかWEB2.0というとダサいので、WEB1.5と言っておきます…。ネット業界以外の方とお話しすると、いまだに2.0と言われたようなことが（ビジネス的に）流行っていると思われていて、ツッコミたくなる今日この頃です。

Google Maps API でストリートビューを表示する方法

8月5日に公開されたGoogleマップ・ストリートビューですが、すでに Google Maps API にも実装されています。

ドキュメント：Services - Google Maps API - Google Code

上記のリンクにサンプル付きのドキュメントがあり、必要最低限のことはすべて説明されていますが、個人メモを兼ねて焼き直しします。

    • -

ストリートビューに関しても、APIプログラミングでは従来通り、緯度と経度の情報を基本とします。

/**
 * 渋谷ハチ公前のストリートビューを <div id="pano">〜</div> （id名pano）に表示する例
 * http://code.google.com/apis/maps/documentation/services.html#Streetview  の例と同等
 * ストリートビューは GStreetviewPanorama というオブジェクトを使用します。
 */
var streetViewId = "pano";// ストリートビューを表示するHTMLのid名
var targetPoint  = new GLatLng(35.65908, 139.700709);// 渋谷ハチ公前をターゲット地点に設定
panoramaOptions  = { latlng:targetPoint };
myPano = new GStreetviewPanorama(document.getElementById(streetViewId), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
    
function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    document.getElementById(streetViewId).innerHTML = '<p style="color:red;">お使いのブラウザがFlashに対応していないためGoogleマップ・ストリートビューを表示できません。</p>';
    return;
  }
}


公式ドキュメントなのでコピペで済むかと思いましたが、handleNoFlash 関数が不十分みたいです。handleNoFlash という関数名からわかるように、フラッシュをサポートしていないブラウザに対するエラー処理でしかありません。


（もっともよく発生する）ストリートビュー未対応地域のエラー処理がなされていません。そのため未対応地域では何も表示されなくなってしまい、コンテンツがあるのかないのかすら、ユーザーにはわらなくなってしまいます。そこで、以下の処理を加えます。


var streetViewId = "pano";// ストリートビューを表示するHTMLのid名
var targetPoint  = new GLatLng(35.65908, 139.700709);// 渋谷ハチ公前をターゲット地点に設定
panoramaOptions  = { latlng:targetPoint };
myPano = new GStreetviewPanorama(document.getElementById(streetViewId), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
    
function handleNoFlash(errorCode) {
  if (errorCode == 600) {// 未対応エリアのエラー処理
    document.getElementById(myStreetViewId).innerHTML = '<p style="color:red;">Googleマップ・ストリートビュー未対応地域です。</p>';
    return;
  }
  if (errorCode == FLASH_UNAVAILABLE) {
    document.getElementById(streetViewId).innerHTML = '<p style="color:red;">お使いのブラウザがFlashに対応していないためGoogleマップ・ストリートビューを表示できません。</p>';
    return;
  }
}

// --- 後書 --- //
// ※関数名が機能を正確に表現していないので、handlePanoramaError 等に変更した方がベター
// ※１関数１機能にした方が一般的には良いソースコードになるが、この程度の規模ならif文で・・・。（統一エラーハンドラーにテキトーに投げる実装の方が良いときも多いし・・・ケースバイケース ）
// --- 後書 --- //

600というマジックナンバーが気持ち悪いですが、一応、ユーザーに見せることができる、ということで（完）

  • -

※追記
調べたところ、以下の2種類のエラー定数（マジックナンバー）が定義されているようなので、追記します。
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewPanorama.ErrorValues

・NO_NEARBY_PANO (600) ：ストリートビューのデータがないとき
・FLASH_UNAVAILABLE (603) ：ブラウザのフラッシュ対応が不十分なとき
  • -


【ポイント】
・GStreetviewPanorama ：オブジェクト
・GStreetviewOverlay ：オブジェクト
・NO_NEARBY_PANO (600) ：エラー定数/マジックナンバー
・FLASH_UNAVAILABLE (603)：エラー定数/マジックナンバー
・Services - Google Maps API - Google Code：ドキュメント


【Google Maps API を使ったストリートビューの実例】

・カラオケの鉄人新宿コマ劇場前店 アクセス&地図
※ 2008-08-06日現在の実例です。真夜中ナビの本コンテンツなので、改変する可能性があります。


【PR】

2次会のため遅くまで営業しているお店を探したい、終電を逃してしまった！！というときにご活用頂ければ幸いです。
・真夜中ナビ 深夜営業・24時間営業のお店探し
・真夜中ナビ 深夜営業・24時間営業のお店探し モバイル

EZweb 絵文字を小さく表示する方法

モバゲータウンやmixiなど人気の携帯サイトでは、小さい文字（フォントサイズ）が主流になっています。

CSS または fontタグで通常の文字は簡単に小さくなるけど、EZwebでは絵文字だけが小さくならないことがあります。

原因は絵文字の表示方法です。


１．小さくならない表示方法

<img localsrc="818" />


２．小さくなる表示方法

以下のように10進数の絵文字（SJIS）を用いると、フォントサイズと同じ大きさに拡大縮小されます。もちろん16進数の絵文字でもよいです。

&#62601;


※10進数/16進数の絵文字がよくわからない方は、google先生に質問して自己解決してください。（能書きたれるほどわかっちゃいないので・・・汗）

    • -

[PR] 真夜中ナビ 深夜営業・24時間営業のお店探し モバイル
[PR] 真夜中ナビ 深夜営業・24時間営業のお店探し（ＰＣ）

    • -

CO2を正しく下付き文字で書く方法

二酸化炭素は減り、CO2（シーオーツー）が急増しているようです。

テレビをつけると連日、「CO2排出量」、「CO2削減」など、CO2と連呼している。

うん、たしかに増えている。

古館さんだけじゃない・・・

いつからメディアは、二酸化炭素からCO2に乗り換えたんだろう・・・。

二酸化炭素削減しました ＼(^▽^＠)ノ



さて、アナウンサーは良いけど、困るのはブロガーだと思う。

というのも、ネットで「 CO2 」と言う（書く）のは意外と難しい。

CO2になってしまう・・・。CO2じゃなく CO2と書きたいの・・・。



１．タグによる下付き文字


CO<sub>2</sub>


２．スタイルシートによる下付き文字

CO<span style="vertical-align:sub;">2</span>


タグの使用が一切できないBlogやSNS場合は、あきらめて画像でも作りましょう・・・。

携帯サイトのキャプチャー画像の作り方

携帯サイトの媒体資料を作るときや雑誌掲載依頼を頂いたときに、必ず必要になるのが携帯サイトのキャプチャー画像。

PCサイトなら「プリントスクリーン」で終了ですが、携帯サイトだと（PCブラウザでは）絵文字が反映されなかったり、（携帯サイトでよく使う） hrタグに余白が出来きてしまったりとなかなかうまくいきません。


しかし、ソフトバンクのウェブコンテンツヴューア（WCV）を使うと３秒で解決します。
http://developers.softbankmobile.co.jp/dp/tool_dl/web/wcv.php

1. WCV でキャプチャーしたいページを開く
2. エミュレータ上で右クリックして、「全画面表示」を選択
3. 左上メニュー「キャプチャー」を選択して、保存またはクリップボードにコピー


※iモード HTML シミュレータII にも同様の機能がありますが、iモードシミュレータの場合、絵文字が貧弱だったり、テーブルタグやCSSへの対応が不十分なため、外部資料としてはイマイチかなぁと思います。

iPhone独壇場の時代は終わったらしいけど・・・

「iPhone独壇場の時代は終わった」と千本氏　イー・モバイルがタッチパネル端末


タッチパネルだけじゃん！！


しかも本家よりカッコ悪い…。


先に手の内を明かしてしまったりと、孫氏の術中にハマってしまった気がするのぉ。


モミモミパネル搭載 DMMPhone なら“独壇場の時代”は終わったろうに…。