月別: 2017年4月

投稿日: 投稿者:

レスポンシブデザインのブレイクポイントを考える

昨今のHPデザインに置いて避けて通れぬ課題になりつつあるのが、スマホ・タブレット等でも、ストレスなく閲覧できるように可変レイアウトとするレスポンシブデザイン。
ひと昔前のように、「スマホ用サイト」を別に作る必要がないので、整備が楽（SEO的にも効果があるとか…）。

 

で、そのレスポンシブ機能でどうデスクトップだの、スマホだのを見分けているかというと、ズバリ、ブラウザの横幅である。
なので、デスクトップにてレスポンシブ機能を備えるサイトを表示して、ブラウザの横幅を縮めてみると、疑似的なスマホ閲覧ができるのである。（そんなことしてどうするのって話は置いといて）

 

さて、ここからが本題。

 

webページにレスポンシブ機能を持たせるにあたって、ブラウザの横幅のどの範囲をデスクトップ・タブレット・スマホと区切るかという話。
ちなみに、ブラウザを縮めていって、デザインが切り替わる起点となる横幅を「ブレイクポイント」と呼んでいたりする。

 

で、そのブレイクポイントの決め方、サイトによっても割といろいろあり、デスクトップorスマホの2択で区切っているところもある。
参考になりそうなのが、このサイト、StatCounter（http://gs.statcounter.com/）世界単位で使用ブラウザや使用端末の統計が見ることができる。もちろん、国ごとの絞り込みもできる。

 

例して、2017年1月～2017年3月の日本国内における、モバイル端末のメーカー統計がこれ。

Apple強すぎである。

 

与太話はさておき、下図が上から、2017年1月～2017年3月の日本国内における、デスクトップ・タブレット・スマホの横幅分布図である。

これを例としてブレイクポイントを決めていけばいいのである。

 

これを以て、今回自分は、ブレイクポイントを960px・600pxとしてみた。

 

ただ、スマホもタブレットも、大型化していく傾向にあるので、随時、ブレイクポイントの見直しは必要だと思われる。

 

書きながら、もしかしてこの数値はもう古いんじゃないのかと思いつつ、今日はここまで。

投稿日: 投稿者:

本日は曇天なり

前回の僕のブログが（フランス革命歴）時報だったから、電話番号似ているつながりと言うわけでもないですが、今回は天気予報を取ってくるという話があったので、そのときにやったことをメモしておきます。

天気予報情報はここ。OpenWeatherMap.orgを使いました。
https://openweathermap.org/

いろいろ英語で書いてあって苦手な人は大変ですが、とりあえず必要なことは

  • Sign Upから登録
  • API keysから文字列を持ってくる

だいたいこんなところです。Subscribeは今のところ必要ない感じです。（月額ですし）

こちら側でやる必要があることはだいたい、

  • 持ってきた文字列を含むHTTPリクエストをURLに投げる
  • JSONを受け取る

あとはお好きなように使う、といったところです。

/**
* 定数、配列定義
*/

//アクセス用APIキー
define('API_KEY','/*ここに取得したAPIキー*/');
//アクセス用URL
define('API_URL','http://api.openweathermap.org/data/2.5/forecast?units=metric&id=1853908&APPID='.API_KEY);//大阪のcity idを使用

/* HTTPリクエストを投げる感じのクラスHttpRequestも用意しておく */

/*ここから取得*/
$http = new HttpRequest(API_URL,HttpRequest::REQ_HTTP_GET);
$code = $http->sendRequest();

if($code!=200){
    echo 'Error:データの取得に失敗した';
    exit;
}

$rawWeather=$http->getResponseBody();

ここで、$rawWeatherの中身はこんな感じ

{
     "cod":"200",
     "message":0.021,
     "cnt":39,
     "list":[
         {
             "dt":1491793200,
             "main":{
                 "temp":12.43,
                 "temp_min":8.35,
                 "temp_max":12.43,
                 "pressure":892.44,
                 "sea_level":1032.22,
                 "grnd_level":892.44,
                 "humidity":78,
                 "temp_kf":4.08
             },
             "weather":[{
                 "id":500,
                 "main":"Rain",
                 "description":"light rain",
                 "icon":"10d"
             }],
             "clouds":{"all":68},
             "wind":{"speed":1.06,"deg":217.002},
             "rain":{"3h":0.155},
             "snow":{},
             "sys":{"pod":"d"},
             "dt_txt":"2017-04-10 03:00:00"
          },
          { ...以下、3時間ごと5日分の予報... }
     ]
     "city":{
         "id":1853908,
         "name":"Osaka",
         "coord":{"lat":35.95,"lon":137.2667},
         "country":"JP"
     }
 }

天気の内容はlist[n].weather.mainに、気温や気圧はlist[n].mainに出ています。list[n].dt_txtは世界標準時なので、日本時間では4月10日正午の天気ってことになります。URLにunits=metricをつけることで、気温の単位は摂氏として送られてきます。リクエスト文字列をいじると華氏にもできたりするそうです。
月額のないAPIだと1分間に60回までしか呼べないとかあったりしますけど、とりあえず試す分には十分でしょう。天気予報が必要になったら、こういう方法に頼れる、と言う話でした。