レスポンシブWEBデザインとパララックス

お久しぶりです。ヘッポコです。

2週間くらい間を空けてしまいました。。。その間、夏休みがあって実家に帰ったり、休み中にも少し仕事が入ったりと、何かとバタついてました。


さて、今回はつい最近レスポンシブWEBデザインに関わる事があったので、簡単にご紹介！
レスポンシブWEBデザインは、つまりはスマホやタブレットでWEBページを見た時にそのデバイスによって最適な表示をしてくれるデザインの事。

少し前はユーザーエージェントを判断して、携帯電話からのアクセスだったらページを分けて、CSSを分けて、なんてやってたような気がしますが、レスポンシブデザインは基本1ソースでマルチデバイスに対応するように作ります。

これによってどのデバイスからのアクセスでも同じページを見るので、URLが統一になりSEO対策にもなるという所。ではまずはソースを・・・。

まずはヘッドの部分から説明します。

metaタグにviewportというものがあります。これはiPhoneなどのスマホでWEBページを表示した時にものによっては表示が小さくなってしまったり、ページの右端、下に余白が大きく表示されてしまったりするのを防ぐものです。

そのviewportのcontentにプロパティを設定していきます。
"width=device-width"：横幅をデバイス毎に固定された値に設定する。
"initial-scale=1.0"：初期表示の拡大倍率を1.0倍にする。
"minimum-scale=1.0,maximum-scale=1.0"：拡大倍率の最大と最小を1.0倍にする。
"user-scalable=no"：ユーザー側の操作で、拡大／縮小を出来るように許可しない。

 こんな所ですね。metaタグのname="viewport"ではこのような設定が出来ます。

で、重要なのはここからで、4つのCSSをその後で読み込んでいます。
default、pc、tablet、smart。そのままですが、デフォルトで適用させたいもの、PCだったら適用させたいもの、タブレットだったら、スマホだったらという物です。

 default.cssはそのまま普通にCSSを記述してください。
ここに記述するのはPCでもタブレットでもスマホでも共通して適用させたい内容になります。


■pc.css

@charset "utf-8";

/*===============================================
●pc.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
  /* ～PC適用CSS～ */
}

先頭に書かれているのは「@media screen and (min-width: 769px)」。
コメントに記述したように、この記述の中に書くのは横幅が769px以上の場合です。
 768px以下の場合は、この中の記述は無視されます。CSS3のメディアクエリという技術ですね。
これがレスポンシブWEBデザインのメイン処理ではないかと思います。

■tablet.css、smart.cssも基本的に同様です。

@charset "utf-8";

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
  /* ～タブレット適用CSS～ */
}

@charset "utf-8";

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px){
  /* ～スマホ適用CSS～ */
}

こんなところですね。
結局横幅が小さくなるほど、後に読みこんだCSSが適用され、それまでのCSSを上書きしていくという事ですね。

それと注意ですが、このCSS3のメディアクエリはIEでは動作しません。
IE10だと動くみたいですねが、それまでのバージョンのIEでは普通にCSSを順番に適用させてしまいますのでご注意ください。
どうしても対応したい人のために、それ用のプラグインもあるみたいなので、探してみてください。


さて、ついでにもう一つ。
スマホ・タブレット対応するとどうしてもサイト全体が縦長になる。
スクロールさせるのもストレスなので、画面上部にページ内リンク用のメニューを常に表示させておきたい。
というケースに対応する方法です。


■HTML

aへ
bへ
cへ

■CSS

#menu{
  height: 100px;
  position: fixed;
  width: 100%;
  top: 0;
}

menuのidをメニューとすると、HTMLとCSSは上記のような形です。
重要なのは「position: fixed;」コレないとスクロールしても固定されないで流れていってしまうので。
次はJavaScriptでスクロールした時にこのmenuが画面の上部に常に居るように記述。
■JavaScript(jQuery使います)

$(function(){
  $(window).scroll(function(){
    $('#menu').css('top',0);
  });
});

これで、menuが上部に固定されます。後は、リンク先へジャンプした時に、多分menuのdivの高さ分ずれると思うので
飛び先の要素に対して以下のCSSを適用。これでぴったりした位置にジャンプするはずです。
今回のmenuは「height: 100px;」なので100px分の調整

.link_group {
  padding-top:100px;
  margin-top:-100px; 
}

以上です。長くなりました。

それではまた！

連休前の期待と、連休後の後悔

昨日から夏休みに入りました。
怒られるかもしれないですが、9連休です。

長い休みの序盤は期待で胸いっぱいですが、終盤になって結局何もしてないな・・・って後悔するのが毎回の事です。毎回の事なのに改善出来てないのは対策が下手ということですが。

休みと言うだけで気持ちが抜けて、たるんでしまうのは休みだからなんでしょうが。
そもそも休みってそういうもんでしょう？

多分、連休終わりに後悔しないためには、計画表でも作って1つ1つ計画と結果を残していけば、最後にそれを見返して自分はこれだけやったのだ！・・・と実感できて変な後悔もしない。

それに対する一番の障害が手間でしょう。いっその事、自動モードみたいな設定して、自分の行動と結果をログに残してレポーティングまでしてくれるツールなんてあったらすぐにでも使いたい所。

Googleカレンダーとか、スケジュール管理ツールに自動的に記録されるレベルでも十分。
でも、今の状態ではGoogleカレンダーですらやっぱり手間。予定を作って、結果を残して。

ただ、おそらく来年頃に一般販売されるGoogleグラスが出ると、このあたりも少しは変わる。
音声で予定を作り、音声で結果を残す。それだけでも随分と手間は減るが、グラスの場合カメラやGPSを使って現在地や、今視界にあるものすら検知できるのだから、「○時○分に■■に行った」という記録は自動的に出来るだろう。

人の感覚や感情とシステムとの距離がグッと近くなるのが、Googleグラスの一番の魅力だと思う。
「目で見て、手を動かす」　⇒　「目で見て、声を発する」　⇒　？
 Googleはたしか、恥ずかしがらずに人前で声を出そう！っていう事を言っていたと思うけど。

そのうち、目で見るだけ、もっと未来では、考えるだけで柔軟にシステムを操作する事が出来るかもしれない。・・・未来ですねぇ。

そう言えば、一昨年だったか、Androidのアプリで音声でボタンを押して、マイクで文字を読み取り、WEB検索、地図検索、電話発信、メール作成、スケジュール作成がすぐに出来るものを作りました。

・WEB検索ボタン　⇒　マイク　⇒　Google検索結果
・地図検索ボタン　⇒　マイク　⇒　GoogleMap検索結果
・電話発信ボタン　⇒　マイク　⇒　電話発信画面起動（音声で読み取った番号が入力済み）
・メール作成ボタン　⇒　マイク　⇒　メール画面起動（音声で読み取った文字が本文に入力済み）
・スケジュール作成ボタン　⇒　マイク　⇒　スケジュール画面起動（音声で読み取った文字からスケジュールの日時と内容を入力済み）

凄くシンプルなアプリですが、特に最後のスケジュール作成機能は、普段の生活で活用しまくってました。普通にスケジュール作成するよりずっと手間がかからないから。

・・・スマホ変えてから、移植してないのですが。そのうち。
こういうものって結局、手間がかかってめんどくさくなって、入力しなくなる。ってのが消滅の一番の原因なんでしょうね。いかに、入力漏れを無くさせるか。考えたい所です。

さて、だいぶ脱線してしまいましたが、この連休終わりに後悔しないように、今年こそは何かしら対策を取りたいと思います。

既に夏休みに入っている人には、同じく後悔しないように。
夏休みまでもう少しの人は、もうちょっとだけ頑張りましょう！
夏休みなんてねぇーよ！って人は、・・・お疲れ様です。きっとあなたが頑張ってくれているおかげで、助かっている人がたくさんいるでしょう。体を壊さないように気をつけて、この暑い夏を乗り切りましょう！

では。

オブジェクト指向JavaScript・・・を勉強してみる①

お久しぶりです。ヘッポコです。

8月に入ってしまい、夏なのか梅雨の再来なのかよくわからない気候が続きましたが、ここ最近は非常に・・・暑い。THE夏。
とりあえず元気にやれてます。


さて、今回は JavaScriptでオブジェクト指向を扱う場合の話。
実はヘッポコも勉強している身なので、少しずつ分けて書いていきます。

そもそもオブジェクト指向って？という状態の人は、説明を聞く前に何かしらの言語でオブジェクト指向にいきなり触れて実感した方がいいと思います。
オブジェクト指向を説明するのに、その概念が難しくとても話て伝わるものではないと思います。
逆に概念が全てと思ってもいいかもしれません。それさえ分かってしまえば言語別の実装も、あまり抵抗なく吸収できると思います。

ヘッポコは勉強中ですが、ヘッポコの会社の人達はJavaScriptなんて動けばいい程度に考えている人が多いです。WEB開発をゴリゴリやってない限りそれでいいのかもしれませんが。
基本的な所はおさえておくと何かあった時に役立つだろうと思います。

と言う事でまずはいきなりサンプルから。

  
// プロパティにセットx,yをセット
function Point(x, y){
    this.x = x;
    this.y = y;
  }
  // Pointのメソッド 
  // var Point = function(){ /*  */ };と書いてもよい
  Point.prototype.length = function(){
    return Math.sqrt(this.x * this.x + this.y * this.y);
  };
  // インスタンス化
  var point1 = new Point(3, 4);
  // lengthメソッド実行結果をログ出力
  console.log(point1.length()); // 5

単純なサンプルですが、複雑に作る場合も記述順序は同じだと思います。
最初にクラスなる部分の定義をして、各クラスのメソッドを定義して、最後にメイン処理に入ってオブジェクト生成などが流れていく。

ややこしくなってくるのが、サンプルの例でいうと、「Point.prototype = new 基底クラス」などprototypeに基底クラスを代入したりすると・・・まぁつまりはそういう使い方をしたい時が出てくる程構造化したい時はcallやapplyなども登場してきて難しくなってきます。 そのあたりを今後も勉強という形で残していきたいと思います。 しっかりと作れば、中身が複雑で理解できなくてもそれを使う側は、”なんとなく”という感覚的な所で上手く使えるようになってくるでしょう。これはjavascritpやプログラミングに関わらず、あらゆる事で言えると思いますが。 という事で、今日はここまで。