このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

Angular2

2017.10.15

この記事は最終更新日から1年以上が経過しています。

どもです。

今回は、AngularやVueJSを使って、webサイトやwebサービスを作成していると「PC・スマートフォン」の表示も作って行かないといけなくて、「レスポンスシブ」に組んで行くのもちょっと無理がある。

って時は「component」と「CSS」を切り替えたくなってくるかと思います。

今回は、その「component」と「CSS」をそれぞれ、「PC用とスマートフォン用」にフレームワーク側で分岐してくれるように作っていきたいと思います。

方法に関してもググってみても余り出てこなかったので、せっかくなので書いておきます。

今回のを図で表すと、このような感じです。

Angularのcomponentに、cssファイルパスを指定して読み込んだStyleは、component単位で適応範囲を絞られますが、「PC、SP」それぞれ全体に適応するようにも設定していきます。

今回のフレームワークは「Angular」(v.4.2.4)を利用してやっていきたいと思います。(VueJSは次回にでも)

すぐに試したい方は、GitHubの方にも一式上げていますので、そちらを参照して頂ければと思います。

GitHub

https://github.com/webcyou/ang-sp-pc-template

ng CLIでテンプレート作成

では、早速作っていきます。

ngCLIを使ってAngularテンプレートを生成します。

インストールがまだの方はこちらの記事等を参考にインストールしましょう。

$ ng new ang-sp-pc-template

ディレクトリ移動

$ cd ang-sp-pc-template

「npm run start」でアプリケーションが立ち上がるのを確認。

$ npm run start

ブラウザで「http://localhost:4200/」で確認できれば成功です。

APB CLIで、SCSSディレクトリ作成

次にSCSSディレクトリを作って行きましょう。

Angularのcomponentに、cssファイルパスを指定して読み込んだStyleは、component単位で適応範囲を絞られますが、「PC、SP」それぞれ全体に適応するようにも設定していきます。

今の流れで「アトミックデザイン」のアーキテクチャを取り入れた「CSSアーキテクチャAPBCSSの構成で作っていきたいと思いますので、「APB CLI」を用いてテンプレートを生成していきます。

APB CLI」のインストールがまだの方は、こちらの記事等を参考にインストールしましょう。

まずは、ディレクトリを作成

$ mkdir src/assets/scss

APB CLI」のapb newでテンプレートを生成。

$ apb new sp
$ apb new pc

これだけで、この様にSCSSファイルが生成出来たかと思います。

node-sassとconcurrentlyのインストール

package.jsonのディレクトリに戻り、SCSSのコンパイルの為「node-sass」パッケージと、npm run scriptを同時に実行するために「concurrently」をインストールします。

$ npm install node-sass --save-dev
$ npm install concurrently --save-dev

package.jsonのrun scriptの追加と修正を行います。

“scripts”: { 内に以下を追加します。

package.json

"sass-pc":"node-sass --include-path scss src/assets/scss/pc/style.scss src/style.pc.css -w",
"sass-sp":"node-sass --include-path scss src/assets/scss/sp/style.scss src/style.sp.css -w”

“scripts”: { 内の「start」を修正します。

"start":"concurrent\"ng serve\" \"npm run sass-pc\" \"npm run sass-sp\””,

それでは、コンパイルとngサーバーが起動するか確認しましょう。

$ npm run start

scssのコンパイルが走り、cssファイルが生成されるとng サーバーが立ち上がり、ブラウザで「http://localhost:4200/」で確認できれば成功です。

PC SPのcomponentを作成

続いて、「component」の作成を行っていきます。

componentディレクトリを作成し、「pc」「sp」それぞれのディレクトリを用意します。

$ mkdir src/app/component/pc/
$ mkdir src/app/component/sp/

pc、spそれぞれ「app.xx.component.html」「app.xx.component.html」「app.xx.module.ts」「index.ts」を用意。

ページを想定した「top」ディレクトリとcomponentも用意。

準備が完了しましたら、それぞれ記述していきます。

まずは、「app.pc.component.ts」。

こちらは、pc側のcomponentのルートとなるファイルになります。

cssファイルをPC、SPそれぞれに適したパスの記述する以外は、以下の様に特に変わった記述は行いません。

app.pc.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-pc-root',
  templateUrl: './app.pc.component.html',
  styleUrls: ['../../../style.pc.css']
})
export class AppPcComponent {
}

次に「top.component.ts」を作成。

こちらは、ページ等、実際に利用するcomponentを想定に作成しております。

app-top セレクタで呼び出せるように記述。

top.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html'
})
export class TopComponent {
}

app.pc.component.htmlには、先程作成した「top.component.ts」 を読み込みます。

app.pc.component.html

<app-top></app-top>

これらのcomponentをまとめる「app.pc.module.ts」を作成します。

declarationsとexportsに、それぞれのcomponentを記述。

app.pc.module.ts

import { NgModule } from '@angular/core';

import {
  AppPcComponent,
  TopComponent
} from './index';

@NgModule({
  declarations: [
    AppPcComponent,
    TopComponent
  ],
  exports: [
    AppPcComponent,
    TopComponent
  ],
})
export class AppPCModule { }

index.tsは主に、componentをまとめるファイルですが、省略してapp.pc.module.ts
に記述しても問題ありません。

index.ts

export * from './app.pc.component';
export * from './top/top.component';

ここまでできれば、一通り完成。

PC側を作成したので、SP側も同じ様に記述していきます。

SP側は割愛させていただきます。

ルートの設定

それでは、切り替えを行うルートの設定をしていきます。

ユーザーエージェントを取得するため、「ua-parser-js」等を使用してもよいのですが、

GitHub
https://github.com/faisalman/ua-parser-js

「is.js」の方がシンプルに書けそうだったので、そちらを使用してみます。

「is.js」
GitHub
https://github.com/arasatasaygin/is.js

is.js environment-checks

npmでインストール。

$ npm install is_js --save

インストール出来たら、app.component.tsを修正していきます。

「’is_js’」をimportし、「is.mobile()」で、アクセスしてきたのは、PCかSPを判定します。

app.component.ts

import { Component } from '@angular/core';
import is from 'is_js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public isMobile: boolean = is.mobile();
}

アクセスしてきたのは、PCかSPで、呼び出すcomponentを切り替えます。

app.component.html

<app-pc-root *ngIf="!isMobile"></app-pc-root>
<app-sp-root *ngIf="isMobile"></app-sp-root>

app.module.ts」には、それぞれのmoduleである「AppPCModule」と、「AppSPModule」を、importsとexportsに記述すれば完成。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppPCModule } from './component/pc/app.pc.module';
import { AppSPModule } from './component/sp/app.sp.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppPCModule,
    AppSPModule
  ],
  exports: [
    AppPCModule,
    AppSPModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

と、ここまでで一旦完成!!

ブラウザで「http://localhost:4200/」で確認すると、PCでのアクセスと、SPでのアクセスで表示が切り替わっているのが確認出来るかと思います。

スマートフォン

PC

CSSを調整

最後に、CSSの設定を行います。

Angularのコンポーネントスタイルでは、componentに、cssファイルパスを指定して読み込んだStyleは、component単位で適応範囲を絞られますので、Shadow DOMに由来する特殊なセレクタを使用し、適応範囲を広げます。

PC,SPのstyle.scssそれぞれのファイルに「:host /deep/」を記述して、子コンポーネントに適応させます。

style.scss

:host /deep/ {
  @import "common_inc";
  @import "parts";
  @import "pages/pages_inc";
}

:host擬似クラスセレクタは、そのコンポーネント自身にマッチします。(コンポーネント内のすべての要素に適応されるわけではないです)

コンポーネントスタイルは基本的に、自身のテンプレート内にしか適用されないのですが、/deep/セレクタを使うと、強制的に子コンポーネントの内部にスタイルを適用することができます。

/deep/セレクタは「>>>」 に置き換えることができますが、SCSSのコンパイルだと、「> > >」とスペースが入ってしまい適応されなかったので「/deep/セレクタ」を使用しています。

その他にも「:host-contextセレクタ」などもありますが、説明は割愛させて頂きます。

PCだけfont-sizeを変更してみましたら、PCのみ適応されました。

と、言ったわけで簡単でしたが、PC、スマートフォンのアクセスによって「component」「SCSS」を切り替える方法でした。

今回のソースは、GitHubの方にも一式上げていますので、そちらを参照して頂ければと思います。

GitHub

https://github.com/webcyou/ang-sp-pc-template

次回は「VueJS」での方法を書いていきますー

ではぁではぁ。

Comment

Related Article

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

2017.10.15

Angular4 + SSR(サーバーサイドレンダリング)(Universal JavaScript)環境の最小最短 構築方法

2017.10.08

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。

2017.04.19

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。

2017.04.10

Angular CLIで、Angularアプリをかんたん楽々構築!

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – HTTP(簡単な和訳)

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – Routing(簡単な和訳)

2017.04.06

Angular2の始め方。Angular2 公式チュートリアル – Services(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Multiple Components(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail(簡単な和訳)

2017.01.20

CATEGORY LIST

LATEST NEWS

まだ間に合う!!「RSコンポーネンツ」で、ラズベリーパイが 配送料無料で購入できるキャンペーン中!

RaspberryPi

2018.12.07

IntelliJ + Spring Initializr + Gradleで、サクッとSpring Boot環境を構築

Java

2018.11.24

Mavenを用いたアプリケーション作成方法

Java

2018.11.24

Gradleを用いたアプリケーション作成方法

Java

2018.11.23

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US