Macbook Pro Retina × LG UltraFine 5K Display

未だに Macbook Pro Retina (Mid 2014) を使っているが、
たまにオフィスにある LG UltraFine 5K Display を使いたい。
と思ったら実はできた。

3840 x 2160 (60 Hz)
以下のデバイスでは、LG UltraFine 5K Display を 3840 x 2160 (60 Hz) の解像度で使えます。

MacBook (2015 年以降に発売されたモデル)
Thunderbolt 2 ポートを搭載した Mac コンピュータ (Thunderbolt 3 – Thunderbolt 2 アダプタを使用)
USB-C を搭載した iPad Pro

Mac や iPad Pro で LG UltraFine 5K Display を使う – Apple サポート

初代モデルと2代目モデル、両方手元にあるけれど、

初代モデル (27MD5KA-B / JAN 4989027010635) だと、Appleの Thunderbold3 to Thunderbold2 変換コネクタThunderbolt2 to Thunderbolt2 ケーブル の接続で無事に映像出力できた。

けれど、2019年夏のアップデート後に出た2代目モデル (27MD5KL-B / JAN 4989027013995) だと、認識するものの映像が出ない。USB-C対応されたしちょっと違うのかもしれない。

参考: Pro Display XDRの「50万円」に引いちゃった人向け。LGの「UltraFine 5K Display」27インチモデルがアップデート | ギズモード・ジャパン

IE11 で querySelectorAll の forEach

IE11で querySelectorAll した NodeList を forEach するとエラーが出る。

webpackのentryのJSで

import "@babel/polyfill";

してもだめだったんだけど (ver 7.6.0)

import "core-js/stable";

したら大丈夫だった。 (ver 3.3.6)

webpack.config

参考: babel/babel-loader

module.exports = {
  mode: "development",
  entry: "./src/es2015/main.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env"
              ]
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: "./public/assets/js/app.js"
  }
}

babel.rc

browsersの書き方は babel/babel-preset-env 参照

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "since 2015",
            "IE 11"
          ]
        }
      }
    ]
  ]
}

package.json の一部

.
.
.
"devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    .
    .
    "core-js": "^3.3.6",
.
.
.

こちらも参考: IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita

packages.json の ^ について

^ はキャレット (caret) と読む。

プロジェクトのルートに、 .npmrc というファイルをつくって、

save-exact=true

と書くと、^が自動的につかなくなる。

npmの設定を一覧するには

$ npm config list

マシン全体で設定してしまいたいときは

$ npm config set save-exact=true

他に、

save-prefix='~'

というconfigの書き方もあるっぽい

参考: Change npm default caret(^) in package.json

DropboxのFinder統合

DropboxのFinder上での便利機能 (アイコン上の同期ステータス表示とか、ツールバー上のメニューとか、右クリックメニューとか) が消えてしまい、しばらく悩んで解決。
システム環境設定の「機能拡張」→「Finder機能拡張」のチェックが外れていた。 (macOS Mojave)

Missing finder icon integration on Mac.
に書かれてた。

AWS Setup 2017

works.td-inc.jp を半年くらい前に更新しました。その時の記録。

やりたかったこと 「HTTP2対応したい!」

Hetemlで借りていた td-inc.jp サーバーは仕事のテストアップなどで使っていたので、
会社サイトだけをサブドメインで切り出すことに。その時のメモです。
インターネットは素晴らしい場所でした。

 

▼ インスタンスの作成

t2.micro、t2.smallインスタンスについて  | ナレコムAWSレシピ
SSH を使用した Linux インスタンスへの接続 – Amazon Elastic Compute Cloud
サポートされているプラットフォーム – Amazon Elastic Compute Cloud

 

▼ nginxのインストール

sudo yum install nginx -y
sudo cp -r /usr/share/nginx/html /var/www/html
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bk
sudo vim /etc/nginx/nginx.conf

EC2にnginx+php(php-fpm socket)環境を最速で構築 – Qiita
CentOSにてnginxでPHPを動かす – Qiita

 

▼ PHPのインストール

AWS EC2 Amazon Linux 2016.09 + nginx + PHP7.0でサーバー構築 – Qiita

 

▼ PHPの設定

sudo cp /etc/php-fpm.d/www.conf /etc/php-fpm.d/www.conf.bk
sudo vim /etc/php-fpm.d/www.conf

※ /etc/php-fpm.d がない場合、/etc/php-fpm.d のシンボリックリンクを確認する

or

PHP5.6の場合
sudo cp /etc/php-fpm-5.6.d/www.conf /etc/php-fpm-5.6.d/www.conf.bk
sudo vim /etc/php-fpm-5.6.d/www.conf

PHP7の場合
sudo cp /etc/php-fpm-7.0.d/www.conf /etc/php-fpm-7.0.d/www.conf.bk
sudo vim /etc/php-fpm-7.0.d/www.conf

PHP FastCGI Example | NGINX
※ 調べなきゃ寝れない!と調べたら余計に寝れなくなったソケットの話 – Qiita

 

▼ サーバーの起動と自動起動設定

sudo service nginx start
sudo chkconfig nginx on
sudo chkconfig –list nginx

sudo service php-fpm start
sudo chkconfig php-fpm on
sudo chkconfig –list php-fpm

 

▼ /var/wwwのディレクトリ設定
▼ MySQLのインストール・設定
▼ WordPressのインストール・設定

Amazon EC2(Amazon Linux)でWordPressをインストールし、Nginxで表示させる手順2 – owani.net#markdown

 

▼ Elastic IPへのドメインの設定

sudo vim /etc/nginx/nginx.conf
あと色々書く

 

▼ 今まで使ってたCloudFlareからDNSレコード (ゾーンファイル?) のエクスポート

Advanced > Export DNS File

 

▼ Route 53に乗り換え

お名前.comでネームサーバーを変更

DNSとかネームサーバとかRoute53とかAレコードとかCNAMEとかがわからない人のためのまとめ – ふじいけ技術メモ

 

▼ Cloud Frontの設定

Amazon CloudFront編~動的コンテンツ配信~|php CFセットアップ ディストリビューション 方法  | ナレコムAWSレシピ

WordPressサイトをCloudFrontで配信する – Qiita

varnishとCloudfrontはどちらを採用すべきか? | AWS情報 | Webシステム開発・運用、サーバー・ネットワーク設計から保守まで 雲屋ネットワークにおまかせ

AWS再入門 Amazon CloudFront編 | Developers.IO

ウェブディストリビューションを作成または更新する場合に指定する値 – Amazon CloudFront

ドメイン名を使用したトラフィックの Amazon CloudFront ウェブディストリビューションへのルーティング – Amazon Route 53

 

▼ HTTP2化

AWS SSL Certificate setup for WordPress site hosted on Nginx + CloudFront – Clark CX

AWS EC2に設定してHTTP2の効果を実感した – Qiita

Amazon CloudFront + ACM 独自ドメインで HTTPS (SSL) 配信設定メモ | あぱーブログ

WordPressでAmazon CloudFrontを導入(CDN)する方法

[AWS Certificate Manager]東京でも無料でSSL証明書が使用可能になりました! | Developers.IO

[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた | Developers.IO

【新機能】 Amazon CloudFrontがHTTP/2に対応しました | Developers.IO

UVD | How to set up AWS Certificate Manager with NGINX

 

別のブログを立てるために、nginxで複数のバーチャルホストの設定

nginxでvirtualhostを設定する – Qiita

 

▼ FTPの設定

[AWS] EC2でFTPを使いたい – Qiita

道はなくても進むのだ。: Amazon EC2 (Amazon Linux) での vsftpd インストールと設定

 

▼ S3にメディアファイルを移動

AWS CloudFrontを使ってWordPressのメディアファイルだけS3に配置する | Developers.IO

 

▼ PHPのアップロード容量

# cp /etc/php.ini /etc/php.ini.org
# vim /etc/php.ini
upload_max_filesize = 20M

ニューヨーク 2年目

ビザを取ってニューヨークに引っ越すと決めて、最初に東京を離れたのが2014年1月末。

ESTAだから90日以内に帰らないといけない、フジロックと朝霧は欠かせない、
ビザは取れたのに東京で納品だ、と結局3ヶ月に一度は東京に戻っているけれど、
前回東京を出たのが今年の1月下旬、ちょうど1年の区切りでした。あっと言う間の1年。早かった。

4-5月のGW頃にまた一度東京に帰る予定です。

Sketch vs Photoshop

12/15時点で最新のver.3.2.1を使っています。
現時点で問題がありそうなのが、

・日本語の行間が正しく反映されない。

・Symbol (スマートオブジェクト的なもの) がネストできない

・レイヤーをレイヤーパレット内でドラッグして並び替えられない

・単位がpxのみで、dpi, pt という考えが無いので、フォントサイズなどが、CSS、Xcodeに記述したい値の2倍になってしまう。(RetinaオプションONで作業しているせい?)

・シンボルや定義したテキストフォーマットに対して、レイヤー効果的なものを重ねられない

・ショートカットキーを覚えるのが面倒 (末尾に自分で設定したものを載せてます)

 

唯一、Photoshopよりも優れているかもしれないのは、素材のエクスポート機能。
SVGの書き出しや、3x素材の書き出しは、Photoshop × Slicy でもまだ対応出来ていないので、Sketchの方が優れている。

Sketch Appが最高で、Photoshopはオワコンみたいな空気が気になっていたので、
1週間触って、1案件分のデザインデータを移植してみたけど、まだ全然実用レベルじゃなかった。
(※ PhotoshopはCC2014ではなく、CCを使っています)

Sketchを絶賛している人は、Photoshopの使い方が下手か、マシンスペックが足りてない。
または、来月日本に帰る時に、ぜひSketchマスターのレクチャーを受けたいです。(連絡先: @soohei, http://td-inc.jp/contact)

 

———

・Photoshopライクにするショートカットキー

拡大

Center Canvas
Cmd + 0

Actual Size
Cmd + 1

ガイドの表示非表示

Show Smart Guides
Cmd + ;

Hide Smart Guides
Cmd + ;

レイヤーの重ね順

Backward
Cmd + [

Move To Back
Shift + Cmd + [

Forward
Cmd + ]

Move To Front
Shift + Cmd + ]

フォントサイズ変更

Smaller
Shift +Cmd + ,

Bigger
Shift + Cmd + .

 

・Flashライクにするショートカットキー

同じ場所にペースト
Paste in Place
Shift + Cmd + V

オブジェクトを拡大・縮小
Scale…
Option + Cmd + S

 

・以下は、https://designcode.io/sketch を見ながら設定

Make Grid…
Shift + Cmd + M

Round to Nearest Pixel Edge
Shift + Cmd + R

Create Symbol
Shift + Cmd + J

Create Shared Style
Shift + Cmd + K

Paste and Match Style
Shift + Cmd + B

 

プラグインも、
http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
https://designcode.io/sketch
を参照して追加しました。

 

Yeoman + AngularJS + RequireJS (+ Ionic)

これまでに書いたリサーチ系ポスト

環境構築メモ (1) Gulp
環境構築メモ (2) Grunt
環境構築メモ (3) RequireJS
環境構築メモ (4) Bower
フレームワーク習得メモ (1) AngularJS
フレームワーク習得メモ (2完) Ionic
環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

 

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
wiredepを無効に
useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

 

RequireJSの処理としては、

・angularは、exportの記述が必要
domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) {  })」のように囲めば解決は出来る)

となりました。

 

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、


ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}


define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

 

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)

環境構築メモ (5完) Yeoman

Yeomanというのは、

・scaffoldingツールのyo
・buildツールのGrunt
・package managerのBower

を組み合わせて、プロジェクトのひな形を自動生成してくれるツール。

つまり、今までに習得した、GruntBower の思想や知識があれば、
yoが書き出すひな形を理解することが出来るし、
GruntとBowerの設定ファイルを読み書き出来れば、
RequireJS を導入したり、Ionic を導入することも出来る。

長いので、結論は一番下にあります。

 

まずは、yoが書き出す基本的なプロジェクト構造を理解するために、、

 

・YeomanでAngularJSのテンプレ作成

yo angular --minsafe MyApp

※ –minsafeはminify時のエラーを出なくするためのオプション

 

Gruntfile.js を見ているといくつか見たことのない記述と出会ったのでメモ。

<%= yeoman.app %>

<%= %> はGruntfile.js内で他のtaskで定義された値を変数として扱う時に使う

・test/spec/{,*/}*.js

通常は、test/spec/**/*.js と書いて無限に階層を掘るんだけれど、
1階層に限定したい時に使う

 

続いて初めて見るGruntのtaskを理解する。

・grunt-concurrent

https://github.com/sindresorhus/grunt-concurrent

タスクを並列処理する。

 

・grunt-wiredep

https://github.com/stephenplusplus/grunt-wiredep

bowerで管理しているJS, CSSファイルへの参照を、htmlファイル内の、

<!– bower:css –>
<!– endbower –>

<!– bower:js –>
<!– endbower –>

の間や、scssファイル内の

// bower:scss
// endbower

の間に挿入する。トリガーのタイミングは、 bower.json を watch している。

 

・grunt-usemin

https://github.com/yeoman/grunt-usemin

<!– build:css(.) styles/vendor.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:css(.tmp) styles/main.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:js(.) scripts/vendor.js –>
<script src=”~~~~.js”></script>
<script src=”~~~~.js”></script>
<!– endbuild –>

それぞれに挟まれた、CSSやJSファイルを1ファイルに結合して、
HTMLも書き換える。すごい。リリース用のビルド時に行う。

CSSが.tmp内に入っていたりするのは、Yeomanの設計思想だと思う。
また、.tmpに入ったものをそのままブラウザに読み込ませるために、
connect の livereload オプションで色々やっている。(次に説明)

 

 ・grunt-contrib-connect の  connect.static module

http://www.senchalabs.org/connect/static.html

connect.static(‘.tmp’) と書くと、
.tmp/styles の中身を /style にあるように振る舞わせたりできる。

 

・grunt-filerev

https://github.com/yeoman/grunt-filerev

ファイル名にリビジョン番号を追加

 

・grunt-cdnify

https://github.com/callumlocke/grunt-cdnify

ファイルの参照にCDNのURLを書き換えてくれる。
サンプルプロジェクトで必要とされているか不明。

 

・grunt-ng-annotate

https://github.com/mzgol/grunt-ng-annotate

AngularJS関連。まだありがたみがわからない。

 

 

このあと、

yo angular --minsafe --coffee MyApp

して、CoffeeScriptバージョンのプロジェクトと見比べてみると、
coffeeファイルもコンパイル後に、.tmp に書き出していて、
リリースビルド時に、concatしているみたい。

 

結論:

・grunt-wiredep で、Bower のコンポーネントを自動的にHTML内に引っ張ってきている。

・grunt-usemin によって、リリースビルド時に CSS, JS を concat して、
HTMLからの参照も書き直すということをやっている。

・connect.static module で、connect のサーバーの base の外のディレクトリも参照できる。
それによって、Compass、Coffeeともに、コンパイル後の css, js ファイルを、
不可視ディレクトリ (.tmp) に書き出したり、
bower_components を、appディレクトリの外に置いたりしても大丈夫。

・人間がエディタで編集すべきファイルのみを、appディレクトリに集めている。

・今後、Ionic や RequireJS と共存する場合は、適宜 task を切り捨てても良いと思う。

 

 

フレームワーク習得メモ (2完) Ionic

Ionic はHTMLベースで、スマホUIのベーシックなパターンを提供しているフレームワーク。

Cordova という、HTMLベースでのネイティブアプリ開発キットを経由して、
ネイティブの機能を叩いたり、アプリ形式でビルドして実機で実行したりすることも出来る。

チュートリアル通りにサンプルプロジェクトを作った場合、

ionic serve

と実行すれば、サーバーを立ち上げてブラウザで動作確認することができるので、
ブラウザ専用のコンテンツを作る時は、この利用法だけを考え、Cordovaのことは忘れて良い。
※ サンプルコードに含まれる <script src=”cordova.js”></script> という箇所も不要。

Ionic自体が、BowerAngularJSに依存した状態で初期化されるので、以降の勉強はYeomanの管轄内で行う。