#4 IDE(統合開発環境)のインストール

IDEとは

プログラムに必要ないろんな機能が搭載されているテキストエディタのことです。便利なアプリなので今後Webサイトを作る際に積極的に活用していきましょう。
いろんな機能:デバッガ、コンパイラ、Git、FTP、Sassコンパイル、エディタなど。
まだテキストエディタでも十分作れる規模ですが、この段階でIDEを使い慣れておきましょう。 IDEはいくつかありますが、ここではNetBeansネット ビーンズで説明していきます。 他にもEclipseイクリプスVisual Studioビジュアルスタジオ
phpだけであればPhpStormピーエイチピー ストームなどがあります。

NetBeansの最新版をダウンロード

NetBeansダウンロードサイトへ
最新版のダウンロードボタンをクリック
ダウンロードをクリック
Installers:のなかにある自分のPCのOSにあったファイルを選んでダウンロードしましょう。
※インストール中にエラーが出る方は、 こちら から各OSにあったJava SE Development Kitを先にインストールしましょう。

メニューを日本語にしたい方へ。素晴らしい方が日本語化していただいています。
日本語化
メニュー「tools」からPluginを選択し、downloadタブの追加でダウンロードしたファイルをインストールしましょう。感謝。

開発環境用のプロジェクトフォルダを作る

まずは開発用のフォルダをまとめるためのプロジェクト用フォルダを作成します。
ホーム(ユーザ名)フォルダの中に job フォルダを作り、これまで作ってきた作業フォルダを入れていきましょう。
また、この次に紹介するSCSSや、PHPを実行する際に使うフォルダとして stg というフォルダを作りましょう。
Users/ユーザ名/job/stg/

※この部分は応用1 #1 ローカルにWeb開発環境を作る(LAMP)で詳しく説明いたします。
今回はstgフォルダの中に「8001-scss」という名前のフォルダを作って、下のような構成にしてください。

データをダウンロード

NetBeansにプロジェクトを追加する


新規プロジェクト追加ボタンをクリック

カテゴリを「PHP」。プロジェクトは「PHPアプリケーション」を選択。次 > をクリック
すでに開発中のソースや、wordpressなどのCMSを使う場合は「既存のソースを使用するPHPアプリケーション」を選択

ソースフォルダの「参照」をクリックし、job/stg/8001-scssを選択

プロジェクト名を「8001-scss」。PHPのバージョンはPHP7以上にします。
次 > をクリック

実行方法は「ローカルWebサイト」を選択。※「リモートWebサイト」を選択するとレンタルサーバなどとファイルの同期ができます。
終了 をクリック

プロジェクトウィンドウに追加されていることが確認できます。

このような状態になります。nbprojectフォルダが生成されますが、このフォルダは触ることはありません。
フォントのカスタマイズ
windowsの方はフォントを変えてみましょう。
CamingoCodeダウンロードサイトへ
Myricaダウンロードサイトへ
Ricty Diminishedダウンロードサイトへ
Macの方はMenloがおすすめです。

テーマの変更
外観を変更する方法
ダウンロードしたら、メニューのツール > プラグイン > ダウンロード済み[タブ] > プラグインの追加でファイルを選んでインストールします。
Atomのテーマの場合。
Atom Pluginダウンロードサイトへ

Darcula Look and Feelの場合
Darcula Look and Feelダウンロードサイトへ

#5 Sassを使ってCSSを効率的に記述する

Sassは複数あるCSSのメタ言語の一つ

Sassを使うとCSSを記述する際に変数や関数が使えるようになり、シンプルで効率的に記述することが可能になります。 Sassには「SASS(.sass)」と「SCSS(.scss)」の2種類の記法があります。 ここではSCSSサースを使って説明いたします。
また、SCSS記法で記述したとしても最終的にCSSファイルとして書き出すために「コンパイル(変換)」という作業が必要となります。 コンパイルする方法はアプリを使ったりターミナルからコマンド入力してコンパイルしますが、NetBeansでも簡単にできるので説明いたします。

例)scssでの記述の仕方

.main{
  width:90vw;
  &__text{
    text-align:center;
    &--sub{
      font-size:0.8em;
    }
  }
  &__image{
    margin:0 auto;
  }
}
↓ cssとしてコンパイルしたとき

.main{
  width:90vw; }
.main__text{
    text-align:center; }
.main__text--sub{
    font-size:0.8em; }
.main__image{
    margin:0 auto; }

Nodebrewノード ブリューとNode.jsのインストール

MacでSassを使うにはNode.jsノード ジェイエスnode-sassノード サスというモジュールを使います。これらはターミナルを使ってインストールします。
Node.jsをインストールするにはNodebrewノード ブリューというnode.jsに関するパッケージ管理システムでインストールします。 さらにNodebrewを使うためにHomebrewホーム ブリューというパッケージ管理システムのインストールが必要です。
※Homebrewの詳しい説明は実践 #2 パッケージマネージャーHomebrewを使う にて詳しく説明しています。今は読まなくてもよいです。
※npmコマンドはnode package modulesの頭文字でNode.jsのライブラリを管理するパッケージマネージャーです。

インストールの手順

  1. Homebrewをインストール
  2. Homebrewからnodebrewをインストール&セットアップ
  3. Nodebrewのパスを.bash_profileに指定する
  4. NodebrewからNode.jsをインストール
  5. Node.jsを入れるとnpm、node-sassもインストールされる

1. Homebrewをインストールする

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

//バージョンの確認
$ brew -v
//アップデート
$ brew update

2. Node.jsの管理アプリ、Nodebrewをインストール&セットアップする

$ brew install nodebrew  /* usr/local/Cellar/ にインストールされる */
$ nodebrew setup         /* ~/.nodebrew/ にインストールされる */

//バージョン確認
$ nodebrew -v

3. ファイルの場所を指示する(パスを通す)。.bash_profileファイルに以下が追記される。

//追記内容
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
//追記した内容を反映させる
$ source .bash_profile

//※ファイルがない場合は作成する
$ touch .bash_profile

ユーザ名のフォルダを選び「⌘ + Shift + .」をクリックすると不可視ファイルが表示されます。
実際ファイルが書き換わっているか見てみましょう。

4. Nodebrewを使ってNode.jsのインストール

$ nodebrew install-binary stable  /*stable:安定版、latest:最新版*/

/* 複数入れている場合のバージョン選択 */
$ nodebrew list  /*リストが出ます。currentは現在使用しているバージョン*/
v10.14.2
v12.15.0

$ nodebrew use v12.15.0 /*バージョン指定する*/
use v12.15.0

5. node, node-sassのバージョン選択

$ node -v    /*nodeのバージョン*/
v12.15.0

$ npm node-sass -v      /*node-sassのバージョン*/
6.13.4
バージョン確認するとインストールされていることが確認できる

Sassのインストール

1. 自分の開発用フォルダへのパスを入れ、プロジェクトフォルダに移動します

$ cd ~/job/stg/8001-scss
2. 開発フォルダ内にpackage.jsonファイルを作成する

$ npm init -y

3. 開発フォルダ内にnode_modulesフォルダを作成する

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

$ npm node-sass -v /*バージョン確認*/

4. package.jsonに追記

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",  ←この行削除
  "build": "node-sass ./scss --output ./css",             ←追加
  "watch": "node-sass ./scss --output ./css --watch"      ←追加
},

NetBeansの設定

オプションウィンドウのHTML/JS → Node.jsタブをクリック
Nodeパス
~/.nodebrew/current/bin/node

npmパス
~/.nodebrew/current/bin/npm

HTML/JS → CSSプリプロセッサタブをクリック
~/job/stg/8001-***/node_modules/.bin/node-sass

NetBeansのプロジェクトタブを右クリックし「npmスクリプト」「watch」をクリックするとnode-sassのスクリプトが起動します。 (buildやwatchはpackage.jsonのscriptsに記述したものです)

watchを起動しておくと、scssファイルを保存と同時にcssフォルダに同名のcssファイルが生成されます。 別のプロジェクトフォルダに「Sassのインストール」の1〜4を行うことで、オプションを変更せずに使用できます。

#6 SCSSの使い方

SCSSにより変数と関数を使えるようになり非常に便利です。

変数を使う

変数という箱に色や数値を入れておき、各プロパティの値に変数名で指定することで、変数に代入している値を変えるだけで変数を使っているすべての箇所変わります。

$colorA:#f3bebe; /* 文字列の頭に$をつけて変数の扱いになる */
$sizeB:12px;

.bg{
  background-color:$colorA;
}
.area{
  font-size:$sizeB;
  background-color:$colorA;
}
.navi{
  font-size:$sizeB;
}

.bg {
  background-color: #f3bebe; }
.area {
  font-size:12px;
  background-color: #f3bebe; }
.navi {
  font-size:12px; }

関数を使う

関数は自分で作る独自関数と、あらかじめ作られているネイティブな(ビルトインされた)関数の2種類があります。 Sassのネイティブ関数
@function 関数名($引数) {
  @return 戻り値;
 }


/*独自関数を作る*/
@function Round-pixel($i) {
  @return round($i)+px;  /*ネイティブのround関数 = 小数点の四捨五入*/
}

/*使い方*/
.selector{
  width: Round-pixel(123.656);
}
↓出力結果

.selector {
  width: 124px; }

変数とメディアクエリの初期設定

SCSSでメディアクエリを使うときに便利になる書き方の初期設定です。
今度コーディングするときにこちらを使ってみましょう。コピーして使ってみてください。

/* マップ $map:(key: value)  各幅の値を登録しておく */
$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1230,
  'xxl': 2000,
) !default; /*変数定義前に自動で値を代入させるため*/

@mixin mq($mq, $bp1:lg, $bp2:lg){        /* @mixin = 引数によってスタイルの設定を細かく指示 */
  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);  /* $breakpoints = マップ、から値を取得(map関数) */
  $min1  : 'min-width: #{($w1+1)}px';    /* xxx-width: と1px調整 */
  $max1  : 'max-width: #{($w1)}px';
  $min2  : 'min-width: #{($w1+1)}px';
  $max2  : 'max-width: #{($w2)}px';

  @if $mq == min {
    @media screen and ($min1) {
      @content;  /* @includeしたとき「プロパティ:値」をココに挿入させる */
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}
以下のように使います

#contents_wrap{
  margin: 0 auto;
  padding:5px;
  @include mq('max','md'){ /*769pxまで*/
    width:800px;
    padding:8px;
    position:relative;
    border: 1px solid #F00;
  }
  @include mq('min-max','md','xl'){ /*770px以上、1230pxまで*/
    width:95vw;
    border: 1px solid #00F;
  }
  @include mq('min','xl'){ /*1231px以上*/
    width:1200px;
    padding:10px;
    position:relative;
    border: 1px solid #FF0;
  }
}
↓出力結果

#contents_wrap {
  margin: 0 auto;
  padding: 5px; }
  @media screen and (max-width: 768px) {
    #contents_wrap {
      width: 800px;
      padding: 8px;
      position: relative;
      border: 1px solid #F00; } }
  @media screen and (min-width: 769px) and (max-width: 1230px) {
    #contents_wrap {
      width: 95vw;
      border: 1px solid #00F; } }
  @media screen and (min-width: 1231px) {
    #contents_wrap {
      width: 1200px;
      padding: 10px;
      position: relative;
      border: 1px solid #FF0; } }
powerd by