投稿者「admin」のアーカイブ

2016年8月〜2016年12月で観た映画

前回の映画リストでは「年またいで」などと言っておきながら、今回は気がつけばシン・ゴジラから1年以上経っておりました。。。(- -;;;)

X-MEN:アポカリプス

プロフェッサーが見事な坊主頭になったのには、まさかこんな秘密があったなんて。。。!
真面目なシーンのはずだったのに思いっきり吹き出してしまった。。。
あとは、ストームが出てくるたびキューピーちゃんに見えて仕方がない病にかかったwww
どこでも無理くりローガンは健在
「フューチャー&パスト」で歴史が変わったらしいんで、このシリーズが最初の「X-MEN」(2000年公開)に繋がることはないらしい

◎観た日:2016年8月22日

キューピーちゃんに見えてたストーム

スーサイド・スクワッド

あいも変わらずDCは長い
これいる?ってシーンが多い
MARVELとは違う感じでハジけようとしてるのかもしれないけど、微妙。。。
ハーレイ・クインやジョーカーとかいいとは思うんだけど、次見たいかっていうと。。。
うむ

◎観た日:2016年9月12日

ファンタスティック・ビーストと魔法使いの旅

同じ魔法使いでもハリーポッターよりは大人の世界
トランクの中にビースト専用ムツゴロウ王国を持つニュート・スキャマンダーが主人公
パン屋を夢見るジェイコブさんがいい
いろんなビーストが出てくるのも楽しいけど、うーんってなるとこもあり

◎観た日:2016年11月28日

ローグ・ワン/スター・ウォーズ・ストーリー

レイア姫のキャリー・フィッシャーが亡くなった日に観るなんて、なんて偶然。。。
スター・ウォーズ エピソード4で、レイア姫がR2-D2に渡したデス・スターの設計図を反乱軍が手に入れるまでの物語
スター・ウォーズ外伝で、主要キャラがそんなに出てくるわけじゃないけど、個人的にはめっさ面白かったと思う
戦闘シーンが結構派手だし、チアルートのアクションがスゴい

◎観た日:2016年12月27日


Gulpを使って、Sassとブラウザの自動リロードなど

GulpとはSassを使ったり、ブラウザの自動リロードをしたり、画像を圧縮したりなどなど、コーディング作業効率化のための設定。
Dreamweaverでも出来ることはあるけれど、Gulpは特別なソフトを持っていなくても使用できる。
ただし、Gulpの場合、必要な機能を自分で選んで設定を追加しなくてはならない。
PhotoshopやIllustratorでブラシやテクスチャを自分で追加していくような感じでしょうかね。
GulpのインストはMacの場合ターミナルでごにょごにょやらないといけない。
数年前に一度いれてみたものの、よくわからないまま設定は消えてしまい、それまでの環境で十分作業ができていたのでほったらかしていた。
今回、PCが新しくなったので再チャレンジ。設定したことを忘れないよう、備忘録。

環境はMac
ローカルサーバーはMAMPの設定を使用
Gulpをインストールする大元のフォルダを「web_gulp」、案件フォルダを「g_test」として構築していく。
今回のやり方が正しいとは限らないし、人それぞれの設定方法がある。

今回行うこと

Gulpは案件ごとにインストールが必要?

一度Gulp一式をインストールした場合、そのフォルダをコピペして使用可能っぽい。そのつどインストールする必要はないらしい。
今回は大元の「web_gulp」フォルダにGulpの「package.json」と「node_modules」をインストール、「g_test」内に案件ごとの「gulpfile.js」を作成、「node_modules」は案件フォルダにエイリアス作って作業していく。

「node_modules」の容量が大きいという話を聞き、どうにか使い回しができないかと思って今回のやり方をやってみた。

Gulp用作業フォルダ構成
フォルダ構成図:「g_test」「g_test02」が案件フォルダ(index.htmlとindex.phpが混在しているのは、それぞれの動作確認のため)

Gulpのインストール

◎インストールする場所:「web_gulp」

◎インストールする手順:「Node.js」のインストール →「package.json」ファイルの作成 →「Gulp.js」のインストール

  1. Node.jsのインストール

    公式サイトから「Node.js」最新版をダウンロードして、手順にしたがってインストール。
    ◎ターミナルを起動 →「node -v」と入力。インストールした「Node.js」のver.が表示されればインストールOK。

  2. 「package.json」ファイルの作成

    ◎ターミナルに「cd」と入力 → 半角スペースを空けてFinderの「web_gulp」をドラッグ&ドロップ(フォルダのドラッグ&ドロップで、自動的にフォルダの場所をターミナルに入力してくれる)→「return(enter)」キーを押す → ターミナルで「npm init -y」と入力 →「return(enter)」キーを押す →「web_gulp」内に「package.json」が作成される

    ターミナルで「web_gulp」フォルダを指定したところ
    (薄いグレー部分は各PCの名前だのなんだの)

    「npm init」と入力→「return(enter)」キーを押す としている記事が多いけど、このやり方だと何度か「return(enter)」キーを押す作業がでてくるっぽい。
    「npm init -y」でやると、すぐに「package.json」が作成された。
    「package.json」にこれからインストールしていくプラグインの情報が記入されていく。

  3. Gulp.jsのインストール

    ◎ターミナルに「npm install -D gulp」と入力 →「return(enter)」キーを押す → ターミナルにうにょうにょ表示が出てきて、それが止まればインストールOK。

    「web_gulp」内に「node_modules」フォルダ、「package-lock.json」ファイルが出来る。

    Gulpをグローバル(PC全体)にインストール → ローカル(web_gulp)にもインストール という手順が多いけど、ローカルだけでいいらしい。
    「node_modules」フォルダ内にインストールしていくプラグインのファイル類が保存されていく。

gulpfile.js(各種設定が記入されているファイル)の作成

「gulpfile.js」はJavaScriptで記述するそうな。
人によってちょっとずつ書き方が違ってるので、どれが正しい書き方とかはよくわからない。

とりあえずjsファイルの1行目に、下記を記入して「gulpfile.js」の名前で「g_test」内に保存しておく。

const gulp = require('gulp'); // Gulp読み込み

「var gulp」と「const gulp」という書き方があるけど、どちらでも大丈夫みたい。
JavaScriptの変数宣言方法???(よくわからんwww)だそうな。
jsファイルはテキストエディターだの、Dreamweaverだの、何で作ってもOK。

Sassを使う

scssファイルはsassフォルダに、cssファイルはcssフォルダに保存。
「_xxx.scss」を@importで「style.scss」に読み込んで「style.css」として書き出した。
ファイル名に「_」が付いていると、cssとして書き出されない。

sassフォルダの中身。_common_layout.scss、_fontset.scss、_other_layout.scss、_variable.scss、style.scssの5ファイルが入っている。
  1. Sassをcssに変換するためのプラグイン「gulp-sass」を「web_gulp」にターミナルでインストールする。

    ◎ターミナルに「npm install -D gulp-sass」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く →「package.json」ファイルに「”gulp-sass”: “^3.1.0(インストールされたバージョン?)”」の記述が増えていればOK。

  2. 「gulpfile.js」にSassの設定を追加する。

    const sass = require('gulp-sass'); // Sassプラグイン読み込み

    // Sassの書き出し
    gulp.task('sass', function () {
     gulp.src('sass/**/*scss') //scssファイル取得
     (sassフォルダ内の全てのscssファイルが対象 ファイル指定したい場合は 'sass/style.scss' とか)
      .pipe(sass({
       outputStyle: 'expanded' // scss → cssのコンパイル(書き出し)方法
      }))
      .pipe(gulp.dest('css')); // cssファイル保存先
    });

  3. 「g_test」をターミナルで選択後、Sassの動作確認。

    ◎ターミナルに「cd」と入力後、「g_test」を指定 → scssファイルに入力 → ターミナルで「npx gulp sass」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く → cssファイルが作成されているor変更されていればOK

    ターミナルで「g_test」フォルダを指定した場合

    更新させたい案件フォルダをターミナルで確実に指定しておくこと。
    Node.jsのver.によっては「npx」が使えないらしい。その場合は「gulp sass」と入力。

watch機能を使う

watchとは、Sassなどのファイル更新時に、毎回ターミナルに実行コマンドを打ち込まず自動で更新してもらう機能。
更新したいファイル内容にエラーがあった場合、watchが止まってしまい再度実行コマンドを打ち込まないといけないので、エラーがあってもwatchを止めないようにする記述も入れておく。

  1. 「gulpfile.js」にwatchの設定を追加する

    Sassの設定下に下記を記入
    // watch機能
    gulp.task('default', function () {
     gulp.watch('sass/**/*.scss',['sass']); // Sassの自動コンパイル
    });

    watchの「task」を「default」として設定したので、ターミナルでの実行コマンドは「npx gulp」になる。

  2. watchを止めないでエラー表示する設定を「gulpfile.js」に追加

    Sassの書き出し内「.pipe(sass({ }))」にエラー用の設定を追加
    // Sassの書き出し
    gulp.task('sass', function () {
     gulp.src('sass/**/*scss') // scssファイル取得
     .pipe(sass({
      outputStyle: 'expanded' // scss → cssのコンパイル(書き出し)方法
      })
      .on('error', sass.logError)) // watch機能を止めずにエラーを表示する
     .pipe(gulp.dest('css')) // cssファイル保存先
    });

    エラーはターミナルに表示される。
    これ以外にもプラグインをインストールしてwatchを止めない・エラー表示の方法がある。

ベンダープレフィックスを使う

「gulp-postcss」を使用。ベンダープレフィックスだけではなく、なんか色々使えるっぽいので。
ターミナルで「web_gulp」にインストールしてから使用する。
「gulp-postcss」が元になっていて、ベンダープレフィックスを使うには「autoprefixer」をインストールとか、自分に必要な物を追加していく方法。

  1. 「gulp-postcss」を「web_gulp」にインストール

    ◎ターミナルに「npm install -D gulp-postcss」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く →「package.json」ファイルに「”gulp-postcss”: “^7.0.1(インストールされたバージョン?)”」の記述が増えていればOK。

  2. 「autoprefixer」を「web_gulp」にインストール

    ◎ターミナルに「npm install -D autoprefixer」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く
    →「package.json」ファイルに「”autoprefixer”: “^7.2.4(インストールされたバージョン?)”」の記述が増えていればOK。

  3. 「gulpfile.js」に設定を追加。

    const postcss = require('gulp-postcss'); // PostCSSプラグイン読み込み
    const autoprefixer = require('autoprefixer'); // ベンダープレフィックスプラグインの読み込み

    Sassの書き出しに設定を追加。
    // Sassの書き出し
    gulp.task('sass', function () {
     gulp.src('sass/**/*scss') // scssファイル取得
      .pipe(sass({
      outputStyle: 'expanded' // scss → cssのコンパイル(書き出し)方法
      })
      .on('error', sass.logError)) // watch機能を止めずにエラーを表示する
     .pipe(postcss([
      autoprefixer() // ベンダープレフィックス追加
     ]))
     .pipe(gulp.dest('css')) // cssファイル保存先
    });

ブラウザを自動リロードさせる

各種ファイルを変更後、「browser-sync」を使用して保存したタイミングでブラウザを自動リロードする設定を追加する。(html、scss、css、JavaScript、jpg、pngの変更が反映されたのを確認)

  1. 「browser-sync」を「web_gulp」にインストール

    ◎ターミナルに「npm install -D browser-sync」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く →「package.json」ファイルに「”browser-sync”: “^2.23.3(インストールされたバージョン?)”」の記述が増えていればOK。

  2. 「gulpfile.js」に設定を追加

    const browser = require("browser-sync"); // ブラウザの自動リロード用プラグインの読み込み

    ローカルサーバーを使用しない場合のブラウザ自動リロード設定。
    // ブラウザの自動リロード
    gulp.task('server', function() {
     browser({
      server: {
       baseDir: "./"
      }
     });
    });
    gulp.task('reload', function () {
     browser.reload();
    });

  3. 「gulpfile.js」のwatch機能設定に自動リロード用の設定を追加

    // watch機能
    gulp.task('default',['server'], function () {
      gulp.watch('sass/**/*.scss',['sass']); // Sassの自動コンパイル
      gulp.watch('./**',['reload']); // ブラウザの自動リロード
    })

「browser-sync」をインストール中に「ソフトウェアの入手がなんちゃら〜〜」的なお知らせが出て来たが(私は入手したばかりのMBPに設定してたので出て来た)、よくわからんのでそのままインストールした。
Chrome、Firefox、Safariを開いて動作確認したところ、全部同時に更新された。
保存した瞬間、多分サイト内で使用されているファイルを全て確認してるのではないかと。変更のあったファイルだけどーたらこーたらするやり方もあるのでは。。。

PHPを使うために、ローカルサーバーを設定する

phpファイルを扱うために「gulp-connect-php」を使用してローカルサーバーを設定する。(MAMPの設定を利用)
「browser-sync」も合わせた設定。

上記「// ブラウザの自動リロード」部分が変更になる。

  1. 「gulp-connect-php」を「web_gulp」にインストール

    ◎ターミナルに「npm install -D gulp-connect-php」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く →「package.json」ファイルに「”gulp-connect-php”: “^1.0.1(インストールされたバージョン?)”」の記述が増えていればOK。

  2. 「gulpfile.js」に設定を追加

    const connect = require('gulp-connect-php'); // PHP用ローカルサーバープラグインの読み込み

    「// ブラウザの自動リロード」部分を変更
    // PHP用ローカルサーバー(MAMP)・ブラウザの自動リロード
    gulp.task('server', function() {
     connect.server({
      port:8889,
      base:'./'
     }, function (){
      browser({
      proxy: 'localhost:8889'
      });
     });
    });
    gulp.task('reload', function () {
    browser.reload();
    });

    port番号は、MAMPを起動した時に表示されるMySQLのportを設定。
    MAMPを起動しなくてもphpファイルの表示OK。
    MAMP > htdocs に案件フォルダを設置しなくてもよい。

Gulpの開始・終了

  1. 開始

    ◎ターミナルで案件フォルダを指定(cd 案件フォルダ と入力)→「npx gulp」と入力 →「return(enter)」キーを押す → ターミナルがごにょごにょ動く → watch開始

  2. 終了

    ◎ターミナルでショートカットキー「control+c」入力 → watch終了 → ターミナルを終了させる

他人と共有するには

「gulpfile.js」を共有する。(だけでいいんかな?)
「package.json」も???

◎今回設定した「gulpfile.js」の最終形態
gulpfile.jsの中身。上部にプラグインの読み込み。中段にSassの書き出しと、PHP用ローカルサーバー・ブラウザの自動リロード用の設定。一番下にwatch機能の設定が記載してある。

画像圧縮のプラグインは入れていない。Photoshopなどから書き出す場合、ブラウザの表示と画像のファイルサイズを確認しながら圧縮度を設定して書き出すやり方をしているから。

cssやJavaScriptの圧縮も設定していない。
納品後、実際に更新作業をしていく方々がどういう状況で作業しているかわからないのが当たり前なので、一番ノーマルな状態にしている。

今回Gulpについて疑問点やなんやらかんやら、めっさ色々な記事を読みまくった。
最初全く頭の中で繋がらなかった事柄が、必要な部分をどんどん掘り下げて調べていくことで、最初読んでも理解できなかった事が再度読んだ時に微妙にわかるようになっていった。
一度読んで理解できないことがあったとしても、色々な方の記事を読んで見ることは大事なのかな。。。と。
しかし、まだまだわからないことは多いのだ。


Dreamweaverでリアルタイムプレビュー

リアルタイムプレビューもCC2017からの機能。ブラウザ表示を手動でリロードしなくても、自動的にリロードしてくれる。
(キャッシュが絡むんで、ちょっとだけブラウザ側の設定が必要)

これも設定を忘れないよう、備忘録。
ここに書いている内容は私の環境でやっていることなので、同じようにならなくても責任はとれない。

環境はMac・DreamweaverCC2018
ローカルサーバーはMAMPを使用
作業しているフォルダ(案件フォルダ)はSassの設定で使用した「test」をそのまま使用

リアルタイムプレビューの設定

リアルタイムプレビューは、作業しているフォルダの中身をMAMPのhtdocsにコピーして表示させる仕組みになっている。
サイトの管理で設定したものを削除してもhtdocs内にファイルが残ったままになるので、こまめに整理した方がよい。
MAMPを起動しておいてから、リアルタイムプレビューを使用。

  1. サイトメニュー > サイトの管理 > test(今回はSassの設定で登録したものを使用)を開く
  2. サイト設定の各項目を設定

    ◆サーバー
    ローカルサーバーのMAMPを設定しておくとPHPファイルも確認できるのでラク。
    「+」ボタンをクリックして、新規サーバーの追加設定画面を表示させる。

    【基本】
    ◎サーバー名:適当でOK 今回はMAMPを設定するので「MAMP」
    ◎使用する接続:ローカル/ネットワーク
    ◎サーバーフォルダー:/Applications/MAMP/htdocs/test/
    ◎Web URL:http://localhost:8888/test/
    「サーバーフォルダー」と「Web URL」は「test」というフォルダまで指定しておかないと、MAMPのhtdocs内に「test」内のファイルが直にコピーされてしまう。

    サイト設定、サーバーの基本設定画面

    【詳細設定】
    ◎リモートサーバー:同期情報の保持のチェックを外す
    (チェック外すと_notesが作られないって説明があるけど、作られまくってる。。。)
    ◎テストサーバー:テストサーバーにファイルを自動的にプッシュにチェック入れて「保存」をクリック。

    サイト設定、サーバー詳細設定画面

    「サーバー」画面に戻ったら、設定した「MAMP」の「テスト」にチェックを入れて「保存」をクリック。

    サイト設定、サーバーの設定画面
  3. htmlファイルに戻ったら「リアルタイムプレビュー」ボタンをクリックして、
    ブラウザでプレビュー > 任意のブラウザを選択 > サイトのプレビューが表示される

リアルタイムプレビュー表示の注意点
ブラウザ側でキャッシュを無効にしていないとうまく表示が変わらない。
(キャッシュを無効化してても、しばらく時間が経たないと変わらなかったりする)
各ブラウザのデベロッパーツールを表示して、ネットワークのキャッシュ無効にチェックを入れること。

◎Chrome:検証 > Network > Disable cache

Chromeのデベロッパーツール
◎Firefox:要素を調査 > ネットワーク > キャッシュを無効化

Firefoxのデベロッパーツール

◎Safari:開発メニューに「キャッシュを無効にする」というのがあるとappleサポートページに書いてあるけど見当たらず。。。
Safariだけ常時無効にする方法がわかりません。。。

リアルタイムプレビューは、ずーっと作業を続けてる時は比較的安定して動くけど、ちょっと開いたまま作業せずにほっておくと接続がきれて動かなくなったりする。
何度試しても無理なら起動しなおすとかした方が早いかも。
複数ページを確認する場合、ページごとにリアルタイムプレビューボタンをクリックしなくても、確認したいhtmlファイルをDreamweaverで選択すればブラウザで勝手に表示が切り替わってくれる。