Archive for 1月, 2011

スマートフォン用サイトのviewportについて

明けましておめでとうございます、そして初めまして

ソリューション事業部の内田です、新年から色々忙しいですが頑張っていきます!

さて、今回スマートフォン用サイトをいじる機会があったのでそこで知らなかった知識を

1つ紹介したいと思います。

スマートフォン用サイトを作る際のviewportの記述方法について。

機種ごとの横幅を検出し、自動的に横幅設定するには

<meta name="viewport" content="width=device-width" />

さらに拡大縮小禁止にするには

<meta name="viewport" content="width=device-width,user-scalable=no" />

拡大縮小禁止を違う方法で実現するには

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

各項目説明

・width=device-width・・・デバイス毎の横幅を指定してくれる

・user-scalable・・・noで拡大縮小禁止、yesで拡大縮小可能

・initial-scale・・・倍率の初期値(100%の場合は1.0,120%の場合は1,2等)

・maximum-scale・・・倍率の最大値

・minimum-scale・・・倍率の最小値

以上が今回使用したviewportの一覧です、今年はさらにスマートフォンが活性化してくるようなので

こういったことを学ぶ機会は多くなってきそうだなと思います。

No Comments

twitter公式ウィジェットのtweet検索時に日本語のつぶやきのみ検索させる方法

twitterのサイト上では詳細検索オプションを使用することによって検索対象の言語や地域などを指定することが出来ます。

twitterをつぶやいているもののうち地域:日本周辺のつぶやきを抽出

twitter near:JP

しかしこのキーワードを直接ウィジェットのsearchのパラメータとしてセットしても動作しません。

試行錯誤した結果、以下の方法で日本語tweetのみ抽出することが出来ました。

  • widget.jsをダウンロード
  • テキストエディタでwidget.jsを開き以下の部分を検索
    • ※可読性を上げるためにセミコロン; を ;n など改行コード付きに置換した場合、291行目あたりになります

this.url=this._base+this.format+”?q=”+this.search+”

  • 検索した部分に対して “&lang=ja” を追記

this.url=this._base+this.format+”?q=”+this.search+”&lang=ja

  • 編集したwidget.jsを自サイトにアップロード
  • jsファイルの読み込み先をhttp://widgets.twimg.com/j/2/widget.jsから先程アップロードしたURLに変更

ちなみに、lang=jaではなくlocale=jaとした場合は日本国内でのつぶやきが対象となります。

No Comments