読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

レスポンシブデザインサイトのCSSの読み込み設定

CSS

f:id:s_kadota:20161004131058p:plain

こんにちは、まちいろの門田です。

昨今ではスマートフォンを利用される方は当たり前のように世の中に溢れているわけですが
それに伴ってWEBサイトもスマホユーザー向けのサイト、
むしろ閲覧されるデバイスがスマホが基本となっているサイトも多く見られるようになってきました。

今後もPC、スマホ両方での閲覧を考慮されたWEBサイト開発が主流となってきます。 そこで今回はそんな複数の画面サイズに対応した「レスポンシブデザイン」を作成する上で 知っておきたいCSSの読み込み設定を記したいと思います。
(自分用の備忘録でもあります。)

1 画面幅の違いで読み込むCSSを選り分ける。

f:id:s_kadota:20161004131048p:plain

一番簡単、というわけではないですがおそらく一番直感的に書ける手段かと思います。
また画面幅読み込みにも二通りございます。

  • css側で範囲を指定する。
  • html側で範囲を指定する。


CSS側で範囲を指定する。

css内で適用する画面幅の最大あるいは最小のサイズをメディアクエリで指定して(または同時)、 その範囲内で書かれたcssはその指定幅の時のみ有効となる方法です。
cssを分けずに管理したい場合などに有用です。




@media screen and (max-width: 768px) {
  h1{
    font-size:15px;
    color:#333333;
  }
}

上記のものは「画面幅最大768px」まで適用されるcssになります。 ですので769px以上の画面では適用されません。


@media screen and (min-width: 768px) {
  h1{
    font-size:20px;
    color:#000000;
  }
}

逆に上記のものは「画面幅最小768px」まで適用されるcssになります。 767px以下の画面では適用されません。


@media screen and (min-width: 768px) and (max-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

そして上記のものは最小値と最大値の同時指定になり、「画面幅768px〜1000px」のみ適用されるcssとなります。
タブレット用のサイト構成、あるいは500px〜800pxなどのPCとスマホの中間にあたる 画面幅内でのデザインを設計する際には利用されるシーンが多いかもしれません。
また、逆の指定方法は

@media screen and (max-width: 768px),screen and (min-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

上記のようにカンマ区切りで指定すると「画面幅768px以下、あるいは画面幅1000px以上」 というように指定することができます。 あまり使うケースはないかもしれませんが、特定の範囲内のみcssを適用させたくない際などに 有用かと思われます。





HTML側で範囲を指定する。

html側でcssを読み込む際linkタグでcssを読み込みますがその際に画面幅で読み込むcssファイルを指定します。
cssファイル自体を画面幅ごとに管理している場合はこちらが有用です。
ファイル内でのメディアクエリ内への入れ忘れや、その範囲を探しに行くことなどを考えるとこちらの方が私的には好きな管理方法です。


<link rel="stylesheet" href="style_pc.css" type="text/css" media="screen and (min-width: 768px)">

上記の様にlinkタグ内でメディア属性を指定し、範囲を記述してあげれば完了です。
画面幅768px以上」の時のみ、style_pc.cssが読み込まれるようになります。


<link rel="stylesheet" href="style_tab_sp.css" type="text/css" media="screen and (max-width: 767px)">

上記のものは「画面幅767px以下」の時に、style_tab_sp.cssが読み込まれるようになります。
また、こちらもandやカンマを使えばcss側同様に同時指定ができます。





2、デバイスの違いで、読み込むCSSを選り分ける。

f:id:s_kadota:20161004131052p:plain

画面幅ではなく、閲覧している端末をjavascriptで判定して読み込むcssを切り替える方法になります。
スマートフォンと一括りに言っても、多種多様な画面幅があるため最新機種が出るたびに画面幅調整に 走るよりかは端末を判定してしまったほうが容易かもしれません。

もちろん、先ほども言ったように画面幅が多くあるためその分スマホ全てが同一のデザインでは一部機種では 見難い形になってしまうケースもあると思われますので画面幅で選り分けるか、デバイスで選り分けるかは 作成されるレスポンシブデザインを鑑みて実装されるのが一番でしょう。


バイス情報の取得

javascriptでデバイス情報は

navigator.userAgent

で取得することができます。

navigator.userAgent.indexOf('iPhone')

この様に指定すると、navigator.userAgentで取得した情報内に
iPhoneがあった場合その「発見位置」を返してくれます。(1以上)
逆にiPhoneがnavigator.userAgentにはない場合は「-1」が返ってきます。
ですのであとはif文を用いて条件分岐を作成すればデバイスごとのcss読み込みを記述することができます。
iPhone同様にiPadiPodAndroidを指定できます。





var iphone_flag = navigator.userAgent.indexOf('iPhone');
var ipad_flag = navigator.userAgent.indexOf('iPad');
var ipod_flag = navigator.userAgent.indexOf('iPod');
var android_flag = navigator.userAgent.indexOf('Android');

if(iphone_flag > 0){  //発見されない場合-1が返ってくるので0以上で指定する。
  <link rel="stylesheet" href="style_iphone.css" type="text/css"> //iphone用のcss
}else if(ipad_flag > 0){
  <link rel="stylesheet" href="style_ipad.css" type="text/css"> //ipad用のcss
}else if(ipod_flag > 0){
  <link rel="stylesheet" href="style_ipod.css" type="text/css"> //ipod用のcss
}else if(android_flag > 0){
  <link rel="stylesheet" href="style_android.css" type="text/css"> //android用のcss
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css"> //それ以外の際に読み込むcss
}


また条件分岐の中でも

f(iphone_flag > 0){
  <link rel="stylesheet" href="style_iphone_min.css" type="text/css" media="screen and (min-width: 320px) and  (max-width: 400px)">
  <link rel="stylesheet" href="style_iphone_max.css" type="text/css" media="screen and (min-width: 401px)">
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css">
}

を用いて画面幅指定をすればより詳細なcssの設定をすることができます。




HTML側でのviewport指定

レスポンシブデザインにおいて上記の画面幅やデバイス読み取り設定の他に、
忘れてはいけないことがmetaタグでのviewport指定になります。

これを指定しないで実装すると、画面幅を指定しているにも関わらずスマホで表示した際などに
こちらが想定したデザインとは違うサイズなどで表示されてしまったりします。(画像サイズやフォントサイズなど)
それらはサイト自体の表示幅の設定を施していないために起きてしまう現象です。



<meta name="viewport" content="width=device-width,initial-scale=1">

上記のmetaタグをhtmlのhead内に記述すれば画面幅に準じて、サイズなどが調整されるようになります。


content内のwidthで表示幅を指定します。
device-widthを指定してあげることで表示しているウインドウ幅がデバイスのサイズに基づきます。


<meta name="viewport" content="width=320px,initial-scale=1">

数値を指定してあげればどのデバイスでアクセスしてもそのサイズ幅を基準として表示されます。

しかしメディアクエリを使用している場合はviewportでのwidth指定で特定の数値を設定すると
スマホ側での表示がおかしくなってしまう場合があります。
(サイト表示時、やたらと大きくズームされて表示されたり)

ですのでメディアクエリ使用時には「width=device-width」を指定してあげるのがベストです。

initial-scaleは拡大率となります。基本的に1を指定するのが無難です。
他にもあまり使用されるケースはないかもしれませんが拡大の最大最小率や拡大の許可なども合わせて指定できます。

より掘り下げて調べてていただければもっと詳細な設定がいくつも出てきますが
「とにかくレスポンシブデザインを作ったので、読み込ませたい」という方は下記metaタグをheadに貼りましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">




他の実装方法など


これらを用いないでもWordPressであればデバイス切り替えのプラグインなどもありますし、
Rubyで構成されたサイトでもデバイス切り替えのgem(便利機能のライブラリ)などがあり
cssに限らずコードの出し分けをする手段は様々です。

案件の仕様によって、後々の編集が容易な柔軟性の高い形で実装するのが一番望ましいでしょう。

Atom(テキストエディタ)で初めに設定しておくと便利な機能

Atom

こんにちは、まちいろの井上です。

HTMLやCSSをコーディングする際には、テキストエディタが必要になってきますよね。

私はこれまでSublime Text3を利用していたのですが、まちいろではAtomを利用しているメンバーも多く、社内でのCSS勉強会の際もAtomの機能の説明が登場したので、これを機に私もAtomを使ってみようと思い、初めてインストールしてみました。

そこで今日は、AtomのHTML・CSSコーディングを行う際に初めに設定しておくと便利な機能をご紹介したいと思います。

インストール

Atomのページからソフトをダウンロードし、exeを実行しインストールを行います。

f:id:yu_inoue:20160913201406p:plain

設定しておくと便利な機能

半角スペース、タブの可視化

デフォルト設定では、半角スペースなのか、タブが挿入されているかを見た目だけでは判断することができません。そこで、半角スペースなのか、タブなのかがわかるように設定していきたいと思います。

Fileメニューの「Settings」を選択し、「Setting」タブを表示します。 f:id:yu_inoue:20160913193611p:plain

「Setting」タブの左メニューの項目から「Editor」を選択し、下にスクロールしていくと「Show Invisible」という項目があるのでチェックを入れます。 f:id:yu_inoue:20160913193921p:plain

すると、以下の図のように半角スペース( )、タブ( )、改行( ¬)を可視化することができます。 f:id:yu_inoue:20160913194348p:plain

インデントに縦線を表示する

先程と同じように「Setting」タブの左メニューから「Editor」を選択し、「Show indent Guide」にチェックを入れます。

すると以下のようにインデントに縦線が表示され、HTMLのタグの構造がわかりやすくなります。 f:id:yu_inoue:20160913195434p:plain

Tabの設定(タブ表示、半角スペース表示の切り替え)

Tabキーを押下した際に、通常のタブ入力(ハードタブ)にするのか、あるいは半角スペースを複数個使用することでタブの代わり(ソフトタブ)にするのかを設定することができます。

①「Setting」タブの「Editor」の中の「Tab Type」がデフォルトではautoになっているので、これをhardまたはsoftに切り替えることで設定が可能となります。

②タブのインデント幅はデフォルトで半角スペース2つ分になっていますが、「Tab Length」から半角スペースの数をお好みのサイズに変更することが可能です。 f:id:yu_inoue:20160913195730p:plain

共同で開発をしている場合は、ハードタブにするのか、ソフトタブにするのか、また半角スペースは何個にするかなどルールがあると思うので、開発前に設定しておきましょう。

HTMLタグを自動で閉じる

HTMLを書いていると、自動でタグを閉じてほしいなと思ってしまいます。

そこで開始タグの>を入力すると、自動で閉じタグを入力してくれるパッケージautoclose-htmlをインストールしたいと思います。

①「Setting」タブの左メニューから「Install」を選択し、Install Packagesの検索欄にautoclose-htmlを入力して検索します。

②検索するとパッケージの候補が表示されるので、対象のパッケージをインストールします。

f:id:yu_inoue:20160913195910p:plain

インストールが完了すると、開始タグを閉じたタイミングで自動で閉じタグを入力してくれるようになります。

全角スペースを表示する

HTMLタグの中や、CSSの中に全角スペースが入っていしまい、レイアウトが思うように表示されないという経験はありませんか?

そんな時に役に立つのが、全角スペースを表示してくれるパッケージshow-ideographic-spaceです。

インストールすると以下のように、全角スペースを表示してくれるようになります。

f:id:yu_inoue:20160913200139p:plain

最後に

今日ご紹介したのは本当にごく一部の設定で、Atomにはたくさんのパッケージが準備されています。

ぜひ色々なパッケージを試して、ご自身の開発しやすい環境にカスタマイズしてみてください。

まちいろ第3期の取り組みを振り返る

まちいろの文化

こんにちは、まちいろの工藤です。

株式会社まちいろは2016年7月で第4期目を迎えました。
そして私事で恐縮ですが、まちいろに CTO としてジョインして10月で丸1年が経ちました。

まちいろは現在クライアントワークをメインとする会社ではありますが、
自社サービスをメインとした事業構成にシフトさせる、というミッションを掲げており、
3期から現在にかけて、この自社サービスの仕込みのための取り組みを行ってきています。

そこで今回は、主に技術面でこの1年取り組んできたことを紹介したいと思います。

開発環境・フローの整備

魅力的なサービスを作るためには、自分たちが使うツールやサービス、開発フローも洗練されるべきです。

これから自社サービスを作るにあたって、またこれから直面するであろう組織課題に向けて、開発環境やフロー周りの整備を行っています。

メイン開発言語の選定

これまでまちいろでは Java + Play Framework か WordPress + PHP の開発が多かったのですが、新しいプロジェクトからは Ruby を採用しています。

主な理由は

  • スクリプト言語 (PHP) に慣れているメンバーが多い
  • 書いてて楽しい
  • 一つの言語を深掘りしてもらうために、カバーできる範囲が広い言語が良い

といったところです。

オブジェクト指向スクリプト言語 Ruby

コミュニケーションツール

これまでサイボウズ Live の掲示板機能を使って、メンバー同士のコミュニケーションを行っていましたが、 仕様のような蓄積すべき情報と、勤怠連絡のような時系列情報がごちゃごちゃになっていました。

そこで社内のコミュニケーション向けには Slack を、ドキュメント管理用には esa.io + Google Drive を使う方針としました。

クライアントワークでのお客様とのやり取りについては、ご要望に合わせて サイボウズ Live、ChatWork、Slack を利用しています。

slack.com

cybozulive.com

ドキュメント管理

前述の通り esa.io + Google Drive で管理するようにしました。esa.io かわいいので個人的に気に入ってます。

Google Drive はこれまでも利用していましたが、置かれているファイルを見ても何の意味を持つ資料か理解できないので、あくまでドキュメントの窓口は esa.io とする、という方針としました。

またこの機会に、メンバーには暗黙知・属人化といった組織課題を認識してもらい、情報の共有の徹底をお願いしていきました。

esa.io

GitHub の導入

社内 GitLab から GitHub へ随時移行を行っています。

弊社の場合、社員数に対してクライアントワークのためにプライベートリポジトリの数が増える傾向にあるので、現在の GitHub のプランは大歓迎です :)

github.com

コードレビュー

弊社の規模では、複数人で開発しているプロジェクトが少なかったりするのですが、新規プロジェクトから私も入ってコードレビューを実施しています。
またコードレビューの指針となるよう、コーディングガイドラインの整理も行っています。

他の人にコードを見てもらうとなると、今まで意識していなかったことも意識するようになって良い傾向です。

単体テスト、CI

これまではほぼ単体テストコードが無い (!?) という状態でしたが、新規プロジェクトから単体テストコードを書くようにしています。
自社サービスの開発に向けて、当たり前の文化としていきたいと思います。

CI は CircleCI で回しています。

circleci.com

サーバープロビジョニング

インフラは基本 AWS 上に構築していますが、これまでは手動で構築・セットアップを行っていました。

もちろん手順書を作ってはいたのですが、流石に辛いので Terraform で VPC 〜 EC2 まで構築して、Ansible で EC2 上のミドルウェア・ソフトウェアのセットアップをするようにしました。

Terraform by HashiCorp

Ansible is Simple IT Automation

監視

これまで独自に開発した監視システムを利用していましたが、外形監視しかできていませんでした。

弊社の場合はクライアントワーク中心のため、監視したいサーバー台数が結構多く、コスト的にクラウドサービスは利用し辛い状況でした。 ここは悩んだのですが、結局今は Zabbix に落ち着いています。

フロント側の監視も含めて、もう少し考えたいところです。

www.zabbix.com

会議体の整理

随時開催していた会議体を以下のように整理しました。
スタンドアップミーティングを行うことで、今日行うべき業務を事前に整理する習慣が付くようになったと思います。

  • 朝のスタンドアップミーティング
  • 週一のプロジェクト進捗共有・売上共有ミーティング
  • 月一の施策MTG
  • 月一の経営会議

人材育成への取り組み

評価面談の体系化

半期毎に目標設定を行い、その結果と評価を正しくメンバーにフィードバックするよう体系化しました。
半期の途中にも面談を行い、目標と実務のズレを調整していくようにしています。

また、会社で注力すべき技術の明確化した「スキルシート」を作成して、メンバーとの認識を合わせると共に、各自の目標設定の際の参考にしてもらうようにしました。

f:id:mkudo-machiiro:20161019121311p:plain:w400

勉強会の実施

以前本ブログでも紹介しましたが、社内研修としてブートキャンプというものを実施してきました。

tech.machiiro.jp

ブートキャンプでやりたかったことは一通り終えてきたので、最近は次のステップとして、特定の技術書籍で輪読会したり、動画サイトを見ながらハンズオンで勉強したりしています。

まとめ

当たり前と思えることも多いかもしれませんが、まちいろも少しずつ進化しています。
4期を終えて、また沢山の取り組みが紹介できるように今期もメンバー一丸となって頑張ります!