MacOS 10.12 SierraにしてからGitでPermission denied (publickey).

以前、GitのSSH接続ができなくなったときの対応として
ssh秘密鍵id_rsaのパーミッションは600という記事を書いたのですが
それを以ってしても Permission denied (publickey). エラーが出続ける事態が。

結論

ssh-addコマンドで、SSHエージェントに秘密鍵を登録すると、解消されました。

$ ssh-add -K ~/.ssh/【Github用の秘密鍵】

“MacOS 10.12 SierraにしてからGitでPermission denied (publickey).” の続きを読む

package.jsonのscriptsでローカルインストールしたgulpでtaskを実行

執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。

gulp4をローカルインストールすると、package.jsonの記述はこのようになります。

    "gulp": "github:gulpjs/gulp#4.0",

ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。

“package.jsonのscriptsでローカルインストールしたgulpでtaskを実行” の続きを読む

gulp4でTypeErrorがでるときはgulp-cliが原因

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'...

Internet Explorer 11の開発者ツールでウィンドウサイズ指定

InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。

意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。

調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。

前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。

“Internet Explorer 11の開発者ツールでウィンドウサイズ指定” の続きを読む

gulpでshift_jisとCR+LFの開発環境を構築

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

  1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
  2. Browsersyncはshift_jisが文字化けする
  3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
  4. 画像までshift_jis変換すると化ける

まずは

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

“gulpでshift_jisとCR+LFの開発環境を構築” の続きを読む

XcodeのライセンスらしきメッセージでGitのcloneが実行できない

Gitのクローンを実行しようとすると、このようなメッセージで止まってしまい実行できない事が。


Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

この場合、Xcodeを起動してライセンスに同意するとOKです。
「Agree」ボタンを押すとインストールが始まります。

Gitのcloneが行えるようになりました。

Macの「写真」でシステムフォトライブラリを選べないとき

複数台あるMacで写真を共有したかったので
「写真」アプリの保存データであるフォトライブラリを共有ディスクに設置してみました。

がしかし。
公式のガイドでは、Optionキーを押しながら「写真」を起動すれば
「ライブラリ選択」というメニューが立ち上がるとあるのですが
これが何度やっても普通にしか立ち上がらない。

参考:
「写真」でシステムフォトライブラリを指定する

その時のシステム構成はこちら

  • MacOS Sierra 10.12
  • 写真 2.0

フォトライブラリから「写真」を起動

Optionキー押下で「写真」起動でフォトライブラリを切り替えることはできませんでしたが
フォトライブラリデータから、開くアプリケーションで「写真」を選ぶと成功しました。

ファインダーで、「写真」のデータ元としたいフォトライブラリデータがあるディレクトリまで移動し
フォトライブラリデータの「このアプリケーションで開く」から「写真」を選択。

「このアプリケーションで開く」を選択

すると、写真アプリが起動し
選択していた新しいフォトライブラリの内容が表示されました。

あとは、公式ガイドにある手順で
環境設定からシステムフォトライブラリを切り替えれば操作完了です。

ssh秘密鍵id_rsaのパーミッションは600

パソコンを初期化するなどの機会で、外部メディアへ秘密鍵のバックアップをとることがあるのですが
こうして保存してあった鍵を、外部メディアからコピー&ペーストで復元すると、鍵を認識してくれなくなることがあります。

この場合、permissionが不正で秘密鍵へのアクセスができないパターンが濃厚なので
まずは、秘密鍵id_rsaのpermissionを600に指定してみると良いです。

$ chmod 600 ~/.ssh/authorized_keys

webpackでSassのコンパイル

webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略!

  • 環境構築がシンプル
  • WebAppを作るのに向いているらしい
  • モジュールごとに分かれているJavascriptを1このファイルにまとめられる

webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。

現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。

過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。

参考記事:
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう!

なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。

“webpackでSassのコンパイル” の続きを読む

カラーコードの色を表示してくれるAtomのpigmentsが便利

2016年から、エディターをSublimeTextからAtomへ変えているのですが
その中でもすばらしいのが、プラグインのpigmentsです。

pigments

Atomで初期インストールするプラグインの記事をみても、軒並みエントリーされているプラグインなので
今更私がここで言うのもおこがましいのですが
とりあえず入れてみたら、これが便利でびっくり!

インストール方法や、機能説明については
既存ですばらしい紹介がたくさんあるので、割愛させていただき
クライアントワークで活用してみて、具体的にどんな場面で素晴らしいと感じたか簡単にまとめてみました。

そう、便利なんだけど、実際には全部の機能は使いこなしていないです。
Show Paletteも良さそうだけど、最初に「おー!」と開いたきりでした。

“カラーコードの色を表示してくれるAtomのpigmentsが便利” の続きを読む