2018-03-30

フロントエンド環境構築（Gulp v4の導入からBrowsersyncの導入まで / ES6風味）

Gulpをインストールする。 Gulp公式サイトではグローバルに gulp-cli を、ローカルに gulp をインストールするよう書かれているが、本記事では過去に書いたように、

基本的にグローバルインストール（yarn global add [package]）は行わない方針

という感じにする。以下の記事を参考にした。

Contents
Install Gulp
Install Babel to write gulpfile.babel.js
- Install Babel
- Add .babelrc
Project structure
Install Browsersync
References
Related

Install Gulp

という訳で、ローカルごとにgulpをインストールするようにしていく。前記事でYarnをインストールしたため、これからはYarnでパッケージのインストールを行う。

なお、Gulp v4が正式にローンチされたとのことなので、思い切ってv4をインストールする。

$ yarn add --dev gulp@next
# gulpでv3が、gulp@nextでv4がインストールされる。

yarn add v1.5.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 285 new dependencies.
info Direct dependencies
└─ gulp@4.0.0
info All dependencies
├─ abbrev@1.1.1
# （中略）
└─ yargs@7.1.0
✨  Done in 23.22s.

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^4.0.0"
  }
}

gulpのバージョンを確認してみる。 yarn run で、ローカルインストールされたパッケージを動かすことが出来る（npmで言う npx）なお、runを省略して yarn でも動作可能。

$ yarn gulp -v
yarn run v1.5.1
$ /Users/[account]/your/project/path/node_modules/.bin/gulp -v
[12:34:56] CLI version 2.0.1
[12:34:56] Local version 4.0.0
✨  Done in 2.61s.

Install Babel to write gulpfile.babel.js

Gulpでタスクを動かせるためにgulpfileを用意する。

通常であればES5で書いていくのだが、2018年にもなったので思い切ってES6で書いていこうと思う。

基本的にリンク先のやつを見つつ、適宜書き換えておくつもりで。

GitHub - gulpjs/gulp: The streaming build system

Install Babel

ES6をES5に変換させるために、まずはbabelをインストールする。

$ yarn add --dev babel-register babel-preset-es2015

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "gulp": "^4.0.0"
  }
}

Add .babelrc

babelrcを用意して、プロジェクトのルートフォルダに配置する。

{
  "presets": [ "es2015" ]
}

ここの記述はpackage.jsonに書いてもいいらしい（今回は見送る）

.babelrcと.eslintはpackage.jsonに - Qiita

gulpfile.js ではES6で書いても動作しないため、 gulpfile.babel.js にリネームして記述していく（記述内容は後述）。

Project structure

ここで、これまでのファイル構成を確認しつつ、htmlファイル等の基本的なプロジェクト用ファイルの配置先も決めておく。

.
├── .babelrc
├── .gitignore
├── gulpfile.babel.js
├── package.json
├── yarn.lock
├── node_modules
│   ├── abbrev
│  (中略)
│   └── yeast
└── public       <- ここに配信するファイルを配置
     ├── assets  <- html以外のファイルをassetsに格納
     │   ├── images
     │   │   ├── Sample-image.png
     │   │   └── Sample-image.svg
     │   ├── scripts
     │   │   ├── script.js
     │   │   └── vender
     │   │       └── jquery-3.3.1.min.js
     │   ├── styles
     │   │   ├── css
     │   │   │   └── style.css
     │   │   ├── scss
     │   │   │   └── style.scss
     │   │   └── webfonts
     │   └── templates
     │       └── index.pug
     └── index.html

改めてファイル構成について真面目に考え始めたら中々決まらず迷った。

同じような悩みを抱えている人がいるのを知り、少しホッとした（よくねえ）

Webサイトのディレクトリ構造とその命名規則に悩む - Qiita

いずれPugというテンプレートエンジンを用いたコーディング環境を整えたいと思っているが、そのファイルを配置するディレクトリ名で一頻り悩んだ。苦し紛れに templates ディレクトリを用意したが、納得はしてない…。

Install Browsersync

これからいよいよ、具体的なパッケージを動かそうと思う。

最初に、BrowsersyncをGulpで動かせるようにしたいと思う。

まずは以下のコマンドを叩く。

$ yarn add --dev browser-sync

package.jsonの中身はこうなった。

{
  "name": "gulp_test",
  "version": "1.0.1",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "browser-sync": "^2.23.6",
    "gulp": "^4.0.0"
  }
}

ここで gulpfile.babel.js を用意する。

構成は下記ページからコピペ。

gulp/minimal-browsersync-setup-with-gulp4.md at 4.0 · gulpjs/gulp · GitHub

適宜ES6の文法に置き換えつつ記述していく。テンプレート文字列やアロー関数を用いてみたが、シンプルに記述できていい感じ。

import gulp from 'gulp';
import browserSync from 'browser-sync';


// Settings    <- ディレクトリ構造に応じて適宜いい感じに
const rootDir = `./public/`;
const assets  = `${rootDir}assets/`;
const paths   = {
  html: `${rootDir}**/*.html`,
  css : `${assets}styles/css/**/*.css`,
  scss: `${assets}styles/scss/**/*.scss`
};


// Browsersync <- Browsersyncによる再表示とローカルサーバー起動の設定
const server = browserSync.create();
const reload = (done) => {
  server.reload();
  done();
};
const serve = (done) => {
  server.init({
    server: {
      baseDir: rootDir  // rootDir = `./public/`;
    }
  });
  done();
};


// Watch       <- どのファイルの変更を監視し、それに応じてどのメソッドを発動させるのかを記述
const watch = () => {
  gulp.watch([paths.html,paths.css],reload) // htmlとcssが更新されたらreloadメソッド発動
};


// ローカルサーバーと監視を直列処理する
const dev = gulp.series(serve, watch);
export default dev;

以下のコマンドでGulpを実行！

$ yarn gulp

yarn run v1.5.1
$ /Users/[account]/your/project/path/node_modules/.bin/gulp
[12:34:56] Failed to load external module @babel/register # Babel関連でエラーが出てるけど無視
[12:34:56] Requiring external module babel-register       # 上記エラーはここで解決されている模様
[12:34:56] Using gulpfile ~/your/project/path/gulpfile.babel.js
[12:34:56] Starting 'default'...
[12:34:56] Starting 'serve'...
[12:34:56] Finished 'serve' after 19 ms
[12:34:56] Starting 'watch'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000     # 自動的にこれがブラウザで表示される
    External: http://192.168.11.6:3000  # 同じネットワーク上の機器であればこのURLから確認できる（スマホとかで開くと便利）
 -------------------------------------
          UI: http://localhost:3001     # Browsersyncの設定画面
 UI External: http://192.168.11.6:3001  #          〃
 -------------------------------------
[Browsersync] Serving files from: ./public/

http://localhost:3000 にアクセスすると、./public/index.html の内容がブラウザで開かれている。この状態で、テキストエディタで index.html を編集・保存をすると、自動でブラウザも更新される。また、ターミナル内の表示も更新（追加）される。

# （略）
 UI External: http://192.168.11.6:3001
 -------------------------------------
[Browsersync] Serving files from: ./public/
[12:34:56] Starting 'reload'...
[12:34:56] Finished 'reload' after 1.17 ms
[Browsersync] Reloading Browsers...

ここまでで、HTMLやCSSを更新する度に、自動で複数の端末で自動リロードするという環境が整った。

次はSCSSファイルをCSSにコンパイル *1する方法を実装したい。

References

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

作者: 中村勇希
出版社/メーカー: シーアンドアール研究所
発売日: 2018/05/29
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

*1:トランスパイルと言うべき？

2018-03-12

フロントエンド環境構築（Node.jsの導入からYarnの導入まで）

Node.js Gulp Frontend Yarn

フロントエンドの環境構築を行う。

以下、自分の環境がmacOS Sierraであるため、導入方法はMacで行われることが前提の記事になっている。なお、過去にも似たような記事を書いていた記憶があるが、一旦忘れることにする。

本記事以降もフロントエンドの環境構築について書いていく予定であるが、当面の目標は以下の感じに。

Node.jsの導入
Yarnの導入
Gulpの導入
BrowserSyncの導入
SASSコンパイル環境の構築
Pugコンパイル環境の構築

ひとまず1.から2.までを本記事で言及していく。

Contents
Install nvm
Install node.js
Install npm
Install yarn
Create project files
Create package.json
References
Related

Install nvm

Node.jsをインストールするが、公式サイトからインストールするとバージョンの切り替えが発生した時に面倒なことになる。バージョンの切り替えを行うために、nvmをインストールする。

GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

$ nvm --version
0.33.0

Install node.js

Node.jsをインストールする。ひとまず最新版（執筆当時、推奨版が8.10.0 LTS）をインストールする。

$ nvm install 8.10.0

なんでもいい！適当に最新のLTS入れちゃえ！って人は以下でも可。

$ nvm install --lts

インストールしたら以下で確認。

$ node -v
v8.10.0

Install npm

Node.jsインストール時に自動でnpmもインストールされる。

$ npm -v
5.6.0

┌────────────────────────────────────────────────────────────┐
│                  npm update check failed                   │
│            Try running with sudo or get access             │
│           to the local update config store via             │
│ sudo chown -R $USER:$(id -gn $USER) /Users/[account]/.config │
└────────────────────────────────────────────────────────────┘

npm update check failed とあるように、アップデートに失敗している様子。大人しく上記のようにコマンドを叩く（[account]の部分は要書き換え）。 sudoがあるので、パスワードが求められる。

$ sudo chown -R account /Users/[account]/.config

これを叩いてから、もう一度 npm -v を叩く。

$ npm -v
5.6.0

   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.3.0 → 5.7.1    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯

npmのバージョンが古いようなので、上記のコマンドを叩いてアップデートする（古い方のバージョンが合ってない原因は分からん）。

$ npm i -g npm to update

もう一度バージョンを確認。

$ npm -v
5.7.1

Install yarn

npmよりも高速なパッケージマネージャーであるYarnを入れてみる。 Installation | Yarn{:target="_blank"} 上記リンク先（Alternativesタブ内）にも書かれているが、実はYarnを $ npm --global install yarn というようにnpmでインストールするのは非推奨となっている。

Note: Installation of Yarn via npm is generally not recommended. When installing Yarn with Node-based package managers, the package is not signed, and the only integrity check performed is a basic SHA1 hash, which is a security risk when installing system-wide apps. For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

という訳で、各OSに合った方法でインストールするのが良いと思われる。自分の環境がMacであるため、 Homebrew{:target="_blank"} を用いてインストールしておく。既にNode.jsやnpmをインストールしているので、 --without-node オプションを付けておく。

$ brew install yarn --without-node

これだけだと yarn -v しても怒られが発生するだけなので、Pathを通してやる必要がある。

Note: your profile may be in your .profile, .bash_profile, .bashrc, .zshrc, etc. 1. Add this to your profile: export PATH="$PATH:/opt/yarn-[version]/bin" (the path may vary depending on where you extracted Yarn to) 2. In the terminal, log in and log out for the changes to take effect

自分の場合、ホームディレクトに内にある .bash_profile に export PATH="$PATH:/opt/yarn-1.5.1/bin" を追記した（1.5.1のバージョン部分は適宜書き換える）。ターミナルを再起動して、バージョン確認してみる。

$ yarn -v
1.5.1

以下、npmコマンドの代わりにyarnコマンドでパッケージのインストールを行っていく。

Create project files

適当にプロジェクトファイルを作成する。例として、以下のようにディレクトリを作成してみた。

$ mkdir ~/your/project/path

適当に index.html のようなファイルを上記ディレクトリ内に作成。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Gulp Test</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <p>Gulp Test</p>
    </main>
</body>
</html>

ついでにSCSSファイル style.scss も作成

$fontColor: #f00;

main {
    p{
        color: $fontColor;
        font-size: 2em;
    }
}

以下、 ~/your/project/path 内にGulp等のパッケージをローカルインストールしていく。なお、基本的にグローバルインストール（yarn global add [package]）は行わない方針とする。

Create package.json

プロジェクトフォルダごとにインストールするパッケージ群やその依存関係をまとめて記載しておけるjsonファイル（という雑な認識）を作成する。

デフォルト（空の内容）でいいという人は以下を。

$ yarn init --yes

対話的に何か入力しておきたい人は以下を。

$ yarn init

前者のコマンドを叩くと以下のような表示に。セキュリティ的にアレと言われているが無視する。

$ yarn init --yes
yarn init v1.5.1
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

package.jsonの中身は以下。（nameをgulp_testに変更した）

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

今回はここまで。次回はGulpのインストールから。

References

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

作者: 中村勇希
出版社/メーカー: シーアンドアール研究所
発売日: 2018/04/27
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2016-05-15

MacBook Air (13-inch, Early 2015) でJanetter（メニュー左配置）を全画面表示にすると4列にしかならないので、どうにかして5列表示にしてみた件

タイトルが長い（-10点）

Twitterクライアントとして有名なJanetterを何年も前から愛用している。Janetterには様々なテーマが用意されているのだけれど、自分は「Crow」という黒背景&左メニューのテーマをずっと使っている。

半年前にLenovoのノーパソからMacBook Airに乗り換えてからもJanetterを使い続けていた。普段使うOSが変わったとはいえ、やはりアプリケーションは使い慣れたものが使えるに越したことはないからだ。

ただ、ディスプレイの解像度が1440x900に変わったせいで、全画面*1にした時に表示される列数が減ってしまった。Lenovoの時は全画面にすると5列表示になっていたのだが、MacBook Airに乗り換えてからは全画面にすると4列しか表示されないという状況に。手動でウインドウサイズをさらに大きくすれば5列表示もできるのだけど、流石に面倒くさい。

この状況がもどかしいので、Janetterのテーマを編集することにした。

テーマが保存されている場所。

こちらの記事を参考に、Janetterの設定場所を開く。

Mac OS X

~/Library/Containers/net.janesoft.janetter/Data/Library/Application Support/Janetter/Theme

ファイル構造

こちらを参照

Janetter wiki - カスタムテーマ/CSS

ui.jsを編集する

UIを編集する箇所はいろいろとあるのだろうけど、今回はui.jsに手を加えてみる。

パス

今回は「Crow」というテーマの編集を行う。ui.jsのパスは以下の通り。

/Theme/Items/Crow/js/ui.js

編集箇所

7行目から14行目にかけてメニュー幅を調整する箇所があるため、8行目の(50+rem)+'px'を(30+rem)+'px'にする。

jn.adjustTimelineViewWrapperWidth = function(rem, deckWidth){
    var w = (50+rem)+'px'; //ここの50を30にする
    $('#menu').css('width', w);
    $('#header').css('padding-left', w);
    $('#main, #footer').css('left', w);
    $('#timeline-deck').data('offset', rem);
    return deckWidth - rem;
};

おしまい。

before after

before ((50+rem)+'px')

f:id:klim0824:20160515034258j:plain

after ((50+rem)+'px')

f:id:klim0824:20160515034308j:plain

きちんとメニュー幅が狭くなって、4列表示だったTwitterのTLが5列表示になってるのが分かる。

*1:MacOSでアプリケーションを全画面表示にする際、自分はSplit Screenというアプリケーションを利用している。画面分割用するためのものなのだけれど、全画面表示にも対応している。MacOSの全画面表示とは違ってWindowsのように今現在作業しているデスクトップ上でアプリケーションがフルスクリーンになるという仕様なので、全画面のアプリケーションの上に他のアプリケーションが表示できるのが嬉しい。ちなみにお値段はMac一台あたり$6.99也。なお自分は期間限定の無料セール時にDLできたのだった。がはは

2016-01-08

iOSのPodcastアプリで音声データが保存されない

という不具合に遭遇。

Podcast

Apple
エンターテインメント
無料

症状等

音声データをダウンロードしようとすると、プログレスバーは進むがデータが100%ダウンロードした表示になったところで端末にデータが残っていない
iOSのバージョンは9.2、Podcastアプリのバージョンは2.2
ストリーミングで聴取することはできる（オフライン用に保存ができない）
「エピソードをダウンロード」「エピソードを保存」のどちらでも症状は同じ
端末の空き容量は十分にある
携帯キャリアによるパケット制限とかではない
複数の番組で同じ不具合が発生したので番組側のサーバーの問題でもない
Podcastアプリのプロセスを殺しても症状が変わらない

解決方法

iOSを再起動する

　おわり。

おまけ

　Podcastの中でも定期的に聞いているのはコレ

Rebuild

Tatsuhiko Miyagawa
ソフトウェアハウトゥ
¥0

2015-12-13

MacBook Air (13-inch, Early 2015)を買った

買いました。やったこと暫定まとめ。

開封の儀（画像は撮ってない）
初期設定をする（Wifiやら言語設定やらタイムゾーンやらなんやら）
- バックアップ関連の設定はスキップした気がする。あとでやっとこう。
OSを最新に。
セキュリティソフトを入れる。
ブラウザ（Chrome,Firefox）をインストール。
- ブラウザをWindowsの時と同じ状態に。
Xcodeをインストール。
- インストールする時間長ええええ

作業しながら新海誠を見た。死ぬかと思った。言の葉の庭｜無料動画 GYAO!｜アニメ秒速5センチメートル｜無料動画 GYAO!｜アニメ死にそうになったので、艦これやりながら見た。

移行すべきデータはUSBメモリに事前に移行済み。
Firefox Sync、ブックマークやPWは同期されたっぽいけど、アドオンが同期されてないっぽい。
- その点、Chromeは素直でいいですね。 _ トラッックパッドに慣れるまで少し時間がかかりそう。

すぐに全部やらないで、少しずつ進めていこう。「一つづつ、出来ることからやっていこう」

klim.log()

フロントエンドエンジニア見習いによる学習記録

フロントエンド環境構築（Gulp v4の導入からBrowsersyncの導入まで / ES6風味）

Contents

Install Gulp

Install Babel to write gulpfile.babel.js

Install Babel

Add .babelrc

Project structure

Install Browsersync

References

フロントエンド環境構築（Node.jsの導入からYarnの導入まで）

Contents

Install nvm

Install node.js

Install npm

Install yarn

Create project files

Create package.json

References

MacBook Air (13-inch, Early 2015) でJanetter（メニュー左配置）を全画面表示にすると4列にしかならないので、どうにかして5列表示にしてみた件

テーマが保存されている場所。

Mac OS X

Windows

ファイル構造

ui.jsを編集する

パス

編集箇所

before after

before ((50+rem)+'px')

after ((50+rem)+'px')

iOSのPodcastアプリで音声データが保存されない

症状等

解決方法

おまけ

MacBook Air (13-inch, Early 2015)を買った

Contents

Install Gulp

Install Babel to write gulpfile.babel.js

Install Babel

Add .babelrc

Project structure

Install Browsersync

References

Related

Contents

Install nvm

Install node.js

Install npm

Install yarn

Create project files

Create package.json

References

Related

テーマが保存されている場所。

ファイル構造

ui.jsを編集する

パス

編集箇所

before after

before ((50+rem)+'px')

after ((50+rem)+'px')

症状等

解決方法

おまけ