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が便利”の続きを読む

HomebrewでインストールしたnodebrewではNode.jsやnpmが使えない

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

“HomebrewでインストールしたnodebrewではNode.jsやnpmが使えない”の続きを読む

ターミナルの設定ファイル.bash_profileを設置する

.bash_profileは、Macのコマンドラインツール、ターミナルの設定ファイルで
ユーザがログインした時に一度だけ読み込まれます。

ここにコマンドを入力しておくと、ターミナルを立ち上げた時点で初期設定として実行してくれているイメージでしょうか。

.bash_profileは最初はないので、自分で設置しなければいけません。

“ターミナルの設定ファイル.bash_profileを設置する”の続きを読む

バージョンの違うMySQLでmysqldumpエラーを防ぐ

mysqldumpでバックアップしたデータベースを、バージョンの違うMySQLサーバでリストアしようとしたら
シンタックスエラーで停止してしまうことがあります。

mysqldumpは、MySQLのバージョンが変わるとバージョンによっては互換性が失われることがあリます。
その場合は、古い環境に互換性のある形式でdumpし直すと解決できます。

“バージョンの違うMySQLでmysqldumpエラーを防ぐ”の続きを読む