ウェブの技術とか開発環境構築の覚書。
執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。
gulp4をローカルインストールすると、package.jsonの記述はこのようになります。
"gulp": "github:gulpjs/gulp#4.0",
ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。
gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると
このようなエラーがでました。
$ gulp
[xx:xx:24xx Using gulpfile /xxx/gulpfile.js
/Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129:19
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Function.Module.runMain (module.js:577:11)
at startup (node.js:160:18)
at node.js:445:3
調べてみると、gulp4とgulp-cliのバージョンが噛み合わないと出るエラーだと判明。
$ gulp -v [XX:XX:XX] CLI version 3.9.1 [XX:XX:XX] Local version 4.0.0-alpha.2
とりあえず、gulp-cliのバージョンを上げてみました。
$ sudo npm install -g gulp-cli
$ gulp -v [xx:xx:xx] CLI version 1.3.0 [xx:xx:xx] Local version 4.0.0-alpha.2
これで解決。
gulpのタスクも実行できるようになりました。
$ gulp [xx:xx:xx] Using gulpfile /xx/gulpfile.js [xx:xx:xx] Starting 'default'...
InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。
意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。
調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。
前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。
gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。
gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ
まずは
と対処した上で
ポイントには、このように対応してみました。
Gitのクローンを実行しようとすると、このようなメッセージで止まってしまい実行できない事が。
Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
この場合、Xcodeを起動してライセンスに同意するとOKです。
「Agree」ボタンを押すとインストールが始まります。
Gitのcloneが行えるようになりました。
複数台あるMacで写真を共有したかったので
「写真」アプリの保存データであるフォトライブラリを共有ディスクに設置してみました。
がしかし。
公式のガイドでは、Optionキーを押しながら「写真」を起動すれば
「ライブラリ選択」というメニューが立ち上がるとあるのですが
これが何度やっても普通にしか立ち上がらない。
その時のシステム構成はこちら
Optionキー押下で「写真」起動でフォトライブラリを切り替えることはできませんでしたが
フォトライブラリデータから、開くアプリケーションで「写真」を選ぶと成功しました。
ファインダーで、「写真」のデータ元としたいフォトライブラリデータがあるディレクトリまで移動し
フォトライブラリデータの「このアプリケーションで開く」から「写真」を選択。
すると、写真アプリが起動し
選択していた新しいフォトライブラリの内容が表示されました。
あとは、公式ガイドにある手順で
環境設定からシステムフォトライブラリを切り替えれば操作完了です。
パソコンを初期化するなどの機会で、外部メディアへ秘密鍵のバックアップをとることがあるのですが
こうして保存してあった鍵を、外部メディアからコピー＆ペーストで復元すると、鍵を認識してくれなくなることがあります。
この場合、permissionが不正で秘密鍵へのアクセスができないパターンが濃厚なので
まずは、秘密鍵id_rsaのpermissionを600に指定してみると良いです。
$ chmod 600 ~/.ssh/authorized_keys
webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略！
webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。
現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。
過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。
参考記事：
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう！
なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。
2016年から、エディターをSublimeTextからAtomへ変えているのですが
その中でもすばらしいのが、プラグインのpigmentsです。
Atomで初期インストールするプラグインの記事をみても、軒並みエントリーされているプラグインなので
今更私がここで言うのもおこがましいのですが
とりあえず入れてみたら、これが便利でびっくり！
インストール方法や、機能説明については
既存ですばらしい紹介がたくさんあるので、割愛させていただき
クライアントワークで活用してみて、具体的にどんな場面で素晴らしいと感じたか簡単にまとめてみました。
そう、便利なんだけど、実際には全部の機能は使いこなしていないです。
Show Paletteも良さそうだけど、最初に「おー！」と開いたきりでした。
HomeBrewでnodebrewをインストールし、そのnodebrewからNode.jsをインストールすると
nodebrew上ではインストールが成功しているのに、実際にはNode.jsとnpmがインストールされない不具合があります。
よし！インストールできた！
$ nodebrew list v6.1.0 current: v6.1.0
んん？！！
$ node -v -bash: node: command not found