Front-end beginner's luck

フロントエンドに関して学んだ知識をメモしておくブログです

ng-japanに参加してきました!

3/21(土)に開催されたAngularJSのカンファレンス、ng-japanに参加してきました!

ngjapan.org

AngularJSの中の人3名を招いてのセッションを含め、とてつもなく濃い内容で非常に楽しかったです。

間違いなくAngularJS初級者の私ですが、AngularJSの未来にワクワクしましたし、今後も使われ続けていくだろうという安心感を覚えました。

ただメインセッションに集中しすぎて尋常じゃなく疲れてしまったので、途中退出したのが心残りでした。。

多分いろいろ間違ってると思いますが、セッション中に色々メモを取ったので備忘として貼り付けます。

以下、メモです↓


Session1. Angular 1.4 and beyond(chirayuさん)

Angular1.4のリリースについて

  • 1週間後にリリース
  • これまでのangularの中で最も安定したリリース

Githubへのビジター数

  • 2週間で100万UU, 1600PR, 200 new contributor

Angular1.4とは

  • 35+ new features
  • 140+ bug fix

主な特徴

  • new Router
  • Pluralization and Gender suppoort
  • ng-animate update
  • ng-messages update
  • ng-cookies update

new Router

  • 別のセッションで紹介 

Pluralization and Gender support

  • Ability to set path and domain
  • cleans up cookie update process
  • Closes one of the oldest and most commented open issues
    • 2年以上あった

パフォーマンス改善

  • 30% faster digest times (vs Angular 1.3)
  • 2-4% memory footprint improvement
    • Less GC pressure
  • パフォーマンスの度合いは各アプリケーションやブラウザに依存するので必ずしも上記の結果とはならない
    • しかし、大きなデータ等を扱う場合はパフォーマンス

everyone should upgrade!

  • 後方互換性に注力したので大規模な改善の必要はないはず
  • 1.3でサポートしたブラウザは1.4でもサポートしている

Angular1.5について

  • 1.4のリリースしてから作業に入る
  • 議論はcommunity上で公開

Angular2について

  • 別のセッションで紹介

リリースサイクルが徐々に速くなっている

communityはとても重要で、多くの人の手伝いも必要としている

  • 手伝う方法
    • Add a Feature
      • まずはコミュニティーで追加したい機能を詳細に共有してね
      • PRはミニマムにして、コンポーザブルに
      • ユニットテストちゃんと書いてね
    • Work on Issues
      • うまく動かなかったりテストが落ちたりしたらissues上げてね
      • 言葉で説明するとあいまいなのでコードとか一緒にあげてくれるとわかりやすいよ
      • 本当にmasterでうまく動かないのかを確認してね
    • Help closing issues and PRs

Session2. AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ(アシアル株式会社 久保田さん)

Onsen UIとは

  • AngularJSの上に作られたライブラリ

HTML5ハイブリッドアプリとは

  • ネイティブアプリとはJavaとかで書かれた普通のアプリ
  • ハイブリッドアプリはネイティブアプリとして動作するが、内部をWebviewで表示
    • HTML5リソースをアプリの内部に持っている

何がいいのか

数年前はパフォーマンスが悪くて使い物にならなかった

  • Facebookも以前はHTML5を一部使っていたが、その後ネイティブに書き換えた

状況の好転

  • 端末のスペックが向上
  • AndroidのWebviewでCromiumが採用された
  • HTML5APIが増えた
  • Android2.3系のシェアが低下

チューニングすればハイブリッドアプリも通用する!

  • 多くの開発者はより素早く描画するためのチューニング方法を知らない

チューニングにはインスペクタを使う

  • AndroidならChromeIOSならSafariを使えば実機でも確認できる
  • 描画が始まって終わるまでが1frame
    • Loading->Scripting->Rendering->Painting
    • 1frameで16msに抑えられれば最高!
      • Loading
        • リソースがローカルにすでにあるのでボトルネックになる可能性は少ない
      • Scripting
        • JavaScriptの実行時間
        • 基本的には高速なのであまり問題にならないが、Canvasの操作やリフローが発生する処理は遅くなったりする
        • Scriptingがボトルネックだったら、インスペクタのプロファイルを取ればだいたい特定できる
      • Rendering
        • レイアウト処理
        • Reculculate Style
          • 個別のDOM要素に対して、当たるスタイルを計算する
          • CSS OMを参照して、DOM要素の数xCSSの数分マッチング処理が走る
          • 一番軽いのは単純なclassの指定
            • 使っていないCSSのルールは消す
        • Layout
          • すべてのDOMのレイアウト情報を計算
          • 計算された結果の視覚的なオブジェクトのツリーがRenderTree
      • Painting
        • 描画処理
          • Paint
            • Display Listへの命令の生成
          • Rasterize
            • Display Listを実行してピクセル化
          • Composite Layers
            • レイヤの合成

translate3d(0,0,0)が速いのはなぜ?

どのCSSプロパティを操作すると何が起こるのか

  • 不明瞭だがある程度法則はある
  • translateやopacityの操作だとComposite Layersのみが発生する
  • CSS triggersで検索!

DOMリークを防ぐ

  • DOM要素が誤って参照されたまま開放されない
  • IOS, Androidだとメモリスワッピングが弱く設計されている

reflowを起こさないようにする

  • 画像のサイズは必ず指定する
  • 一度DOMツリーから切り離して操作する

GPUバウンド

  • CPUよりもGPUのほうで時間がかかっている状態

チューニングの罠

  • チューニングのことばかりを考えながら開発はできない

ネイティブだとUIフレームワークがあるが、HTML5アプリにはない

Onsen UI

  • Angularをベースにして構築
  • CSSによるテーマはtopcoatをベースに構築
  • モバイルアプリでよく使われる機能やチューニングに必要な機能をコンポーネントとして提供

Onsen UIが目指すもの

  • 誰でも簡単に高速なアプリを作成できる
  • チューニングを気にせずに作れる

Session3. Routing your way in an Angular app(Brian Fordさん)

こちらのセッションはスライド内のソースコードが読みづらかったので細かい内容を把握できませんでした。。

こちらのページで復習します。

New Angular Router

以下、聞き取れた部分に関してのみのメモです。

AngularのRouterの基本的な考え方

History of Routing ins Angular

  • ngRoute
    • シンプルなユースケースのみサポート
    • ニーズに応えられていない
  • UI-Router
    • ニーズを満たす形で登場
    • 柔軟性に富んでおり、Angular1とマッチする
  • New Router
    • Angular1でもAngular2でもうまく機能する
    • migrationをより簡単に行うことができる

New Routerの特徴

  • Reusable and Composable
  • Familiar
    • APIはほかのルーティングシステムに影響を受けている
      • ngRoute, ExpressJS etc...

migrationの中で果たす仕事

  • new RouterにすればAngular1とAngular2で同じAPIを使える
  • Angular1とAngular2を並行して実行することができるので、Angular2を使ったほうがよい箇所でのみAngular2を使うということができる

現在の状態

  • カレントバージョンは0.5
  • 1.0リリースはAngular1.4と同時に行う
  • RouterのリリースはAngular1, Angular2とは独立して行う

Session4. TypeScript+Angular 1.3(わかめさん)

ECMAScript

  • JavaScriptの元となる使用
  • DOMの仕様とかは入ってない
  • 最近のブラウザはだいたいES5をサポートしている

AtScriptとは

  • ES6+Annotations(Decorators)
  • TypeScriptのSuperSet

TypeScriptとは

  • JSを拡張した言語
  • 静的型付け
  • ES6の文法を取り込み中
  • 読みやすい変換後javaScript
  • JavaとかC#とかに優しい言語仕様

静的型付け

  • 静的解析で多くの整合性検査が可能
  • 不整合があったらコンパイルエラー
  • 大規模・大人数になるほど利点が多い
  • JavaC#とかが有名

既存資産の活用

  • JSのライブラリ(jQuery等)に関しては、型情報を定義することで使えるようになる
  • Definitely Typed
    • 型定義を行うプロジェクト
    • 既存JSに型を後付する

AtScript to TypeScript

  • Angular2をTypeScriptで書くという方針に変更
    • TypeScriptに必要な要素が入る
    • 作りたいのはAngularJS本体のはず
    • TypeScriptのsupersetを作るのは難しい
    • TypeScriptの開発速度が速い!

TypeScript関連ツール

  • tslint
  • typedoc
    • JSDoc的なやつでTypeScript専用
  • dtsm
  • エディタ

AngularJS1.3との組み合わせ

  • TypeScriptはJSの延長線上にあるので、特別なことをする必要はない
  • JSのベストプラクティスを踏襲すればよい
  • 基礎知識
    • 型の名前を覚えよう!
    • 使いたいメソッド
    • 使いたいDIオブジェクト名
  • お作法
    • tsc --noImplicitAnyオプションを使う
    • 型注釈は全力で
  • プロジェクト厚生
    • 外部モジュールは使わない
    • コンパイルの始点を決める
  • 出力順制御問題
  • ツリー構造にする
  • protractor
    • 型定義ファイル干渉問題
      • $の定義がぶつかる
        • 全てが丸くおさまる解決策なし
        • 別々のファイルにしてコンパイルする必要あり

SourceMap

  • validationの仕様が入ってない!
    • 変換途中でぶっ壊れてもわからん!

Session5. Angular 2(Igor Minarさん)

Angular2を作った背景

  • Webアプリケーションの生産性を上げるためにAngular1を作った
  • 現在は多くの人に愛されるフレームワークになった
    • angularjs.orgには1月に100万人が訪れている
    • 現在Google内での2000のアプリがangularを使っている
  • 信頼されるということは責任が増すということでもある
  • 次の段階ではもっと画期的にしたいと思ってAngular2を作った

Angular2のテーマ

  • Simpler(シンプル)
  • Consistent(一貫性がある)
  • Flexible(柔軟性がある)
    • ここまで培われた柔軟性を今後も継続したい
  • Fast(パフォーマンス重視)
  • Productive(生産性)
    • こちらも継続的に持っていく必要がある

Angular1, 2は似ているのか全く異なるのか

  • APIに相違点はあるが、内部で持っている機能は非常に似ている
  • 非常に強力なFeatureも追加
    • Viewports
    • New languages
    • Web Components
    • New template syntax
    • パフォーマンス強化

Productivity

  • toolsの活用
  • typoを防ぐ
  • TypeScriptで書かれている
  • 以下の言語から好きなものを選んで書ける
    • ES5
    • ES6
    • TypeScript

Performance

  • ベンチマーク
    • ネストが非常に深いコンポーネントの操作
    • 生のJavaScriptで最大限速くしたものをベースラインとした
    • 1.3だと8.58倍
    • 2だと3.14倍
    • 2でView Cacheを加えると1.44倍
  • immutable data structure
    • 変化しないデータの検知を行わない

Angular2のステータス

  • 現時点ではα版
  • リリースの日付はまだ決まっていない
  • 2015年5月にgoogle内部のチームが使い始める

Angular1はどうなるの?

  • Angular1を使っているサイトのほとんどがAngular2にソースを置き換えるまでサポートし続けていく

以上、メモ。

ホスト名が原因でMacのMySQL起動に失敗した話と、その後の対応について

今日あったことをメモ。

MacBookAirにHomebrewで入れたMySQLが、起動済みだったはずなのに何故か落ちていました。

$ mysql.server status
 ERROR! MySQL is not running

仕方ないので再度起動をしようとしましたが、何故か起動できず。。

$ mysql.server start
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/hogehogenoair.pid).

訳が分からずpsコマンドで一応確認してみると、以下のような結果に。

$ ps aux | grep mysql
imamoto         2849   0.0  0.0  2432784    604 s002  S+   12:48AM   0:00.00 grep mysql
imamoto         2819   0.0 10.9  3118408 457736 s002  S    12:43AM   0:00.69 /usr/local/Cellar/mysql/5.6.22/bin/mysqld <以下略>
imamoto         2735   0.0  0.0  2444628   1116 s002  S    12:43AM   0:00.02 /bin/sh /usr/local/Cellar/mysql/5.6.22/bin/mysqld_safe <以下略>

※実行結果はイメージです

なんかいる!!!mysql起動してる!!

その後、一旦実行中のプロセスをkillして再びmysql.server startを試みるも先ほどと同じエラーでやはり失敗。

続いて、起動時のエラーメッセージに含まれていたpidファイル(/usr/local/var/mysql/hogehogenoair.pid)が存在するのか確認してみます。

$ ls -la /usr/local/var/mysql
-rw-r-----   1 hogehoge  admin     92775  3  3 10:26 hogehogenoair.err
-rw-r-----   1 hogehoge  admin     76509  3  4 00:43 hogehoge-no-MacBook-Air.local.err
-rw-rw----   1 hogehoge  admin         5  3  4 00:43 hogehoge-no-MacBook-Air.local.pid
<以下略>

すると、探していたpidファイルの代わりにhogehoge-no-MacBook-Air.local.pidが見つかりました。

pid拡張子の前についているhogehoge-no-MacBook-Air.localとは、普段自分のmacで使われているホスト名です。

ここで念のためホスト名を確認してみます。

$ uname -n
hogehogenoair

ホ、ホスト名が変わってる。。。

これを見て、おそらく原因はホスト名が変わってしまったことにあるのではないかと思い色々と調べてみると、こんな記事を見つけました。

Macのホスト名の設定

この記事によると、macでは接続するネットワークによってホスト名が変更されてしまうことがあるとのこと。

今日は普段と違って私物のスマホテザリングを使っていたので、ホスト名が変わってしまっていたようです。

ホスト名を固定にしたかったので、記事を参考に/etc/hostconfigに以下の一行を加えてmacを再起動しました。

HOSTNAME=hogehoge-no-MacBook-Air.local

これでテザリング中でもホスト名は固定されたので、mysql.server startで無事MySQLが起動できました。

ただ、、他にも良い方法がありそうな香りがプンプンします。

知っている方がいたら教えてください。。

Laravelのartisanでサーバを立ち上げた時にプライベートIPでアクセスできない問題と、その対処法

以前ハマったことを備忘を兼ねてメモです。

LaravelでPHPのビルトインサーバを立ち上げる

サーバサイドでLaravelを使っている場合、ローカルでWebサーバの設定をしなくても以下のコマンドでPHPのビルトインサーバを立ち上げてページを確認することができます。

$ php artisan serve

デフォルトだとlocalhost:8000でサーバが起動しますが、オプションを付けるとポートを変更することもできます。

以下のコマンドで起動すればポート8080を使用できます。

$ php artisan serve --port 8080

プライベートIPでのアクセスができない問題

基本はlocalhost:8000へのアクセスで一切問題ないのですが、自分のローカル環境の状態を他のデバイスから見たくなったりすることもあります。

例えば同じ現場での複数人の作業時や、スマホでの表示確認の場合などです。

そんな時はプライベートIP(例えば192.168.0.3:8000)へアクセスしたいのですが、デフォルトの設定で起動するとホスト名がlocalhostで固定されてしまうのでプライベートIPでアクセスすることができません。

プライベートIPでアクセスする方法

PHPビルトインウェブサーバーのドキュメントに以下の記述があります。

ウェブサーバーを、任意のインターフェイスからポート 8000 でアクセスできるようにするには、このようにします。

$ php -S 0.0.0.0:8000

これにならって、artisanコマンドのオプションでホスト名を以下のように0.0.0.0にしてあげると、プライベートIPでアクセスが可能な状態でサーバが起動します。

$ php artisan serve --host 0.0.0.0

この方法だと任意のインターフェイスからアクセス可能にしてくれるので、プライベートIPはもちろん、localhost:8000からでもアクセスすることができます。

これで無事解決できました。

LaravelのBladeテンプレートエンジンとAngularJSにおける二重の波括弧の競合と、その解決方法

サーバ側でLaravelフレームワーク、クライアント側でAngularJSを使う際に少しハマったのでメモです。

クライアント側でAngularJSを使用した時に以下のようにHTML内に二重波括弧を書くと
AngularJSのテンプレートエンジン機能によって囲まれた変数の値に置き換えてくれます。
(この表記法をエクスプレッションといいます)

<!-- {{ name }}の部分が置き換わります -->
<div ng-controller="NameController">
    <p class="name">私の名前は{{ name }}です。</p>
</div>

しかしLaravelのBladeテンプレートエンジンでも全く同じ記法でViewに渡された変数を参照して書き出すことになっている為、
レスポンスを返す前にBladeの記法として解釈&変換をしてしまいます。
なのでBladeを適用させるファイル(*.blade.php)にこのHTMLを記載すると「nameなんて変数知らないからエラーやで」とサーバ側から怒られてしまいます。

そんな時は以下のようにエクスプレッションの直前に"@"を付け加えれば良いみたいです。

<!-- name.blade.php -->
<div ng-controller="NameController">
    <p class="name">私の名前は@{{ name }}です。</p>
</div>

この書き方をすれば、LaravelはViewに渡された変数の値と置き換える代わりに"@"を消してレスポンスを返してくれます。

API Blueprintとgulp-aglioでいい感じのAPIドキュメントページを作成

きっかけ

  • 現在関わっているWebサービスの各種APIをまとめたドキュメントを作りたかった
  • いい感じのHTMLページにして、なるべく簡単に作りたかった
  • Web上のサービスではなくローカルで作りたかった

やったこと

APIドキュメントの作成は以下の手順で行いました。

1. gulp-aglioをインストール

gulp-aglioAPI Blueprint(後述)で書かれたMarkdownをHTMLにパースするgulpプラグインです。

自分がmacにインストールした手順は以下の通りです。

(1) nodeをインストール

Homebrewを使ってnodeをインストールします。

brew install node

(2) gulpをグローバルインストール

npmでgulpをグローバルインストールします。

npm install -g gulp

また、インストールは以下のコマンドで確認します。

gulp -v

コマンドが使えない場合は ~/.node/bin または ~/usr/local/bin のどちらにgulpコマンドのシンボリックリンクが張られているか確認してください。

そのディレクトリのパスを通せば使えると思います(自分はそれで少しハマりました)。

(3) 作業ディレクトリにpackage.json作成

作業ディレクトリ(~/apiblueprintとする)を作成・移動し、その直下にpackage.jsonを作成します。

mkdir ~/apiblueprint
cd ~/apiblueprint
npm init

(4) gulpとgulp-aglioをローカルインストール

gulpとgulp-aglioを作業ディレクトリにローカルインストールしてください。

npm install gulp gulp-aglio --save-dev

--save-devオプションを付けてインストールすると別の環境でも同じバージョンのgulpプラグインを簡単に入れられます。

その場合はpackage.json を共有してnpm init を実行するだけでインストールできます。

2. API Blueprint記法でAPIの一覧を書く

API Blueprintとは特定のルールでAPIの詳細を記述するMarkdown記法です。

また、公式ではSnow CrashというAPI Blueprint用のパーサーを使ってAPIの概要をJSON形式のデータで取得する方法が紹介されています。

しかしgulp-aglioを使う場合はSnow Crashを個別にインストールする必要はないので今回は省略します。

作業ディレクトリに _docs ディレクトリを作成し、API Blueprint記法で書いたMarkdownファイルを拡張子 .md で保存します。

また、パースされたHTMLの出力先として docs ディレクトリも作成しておきます。

3. gulpfile.jsを作成

作業ディレクトリ直下に gulpfile.js というファイルを作成し、以下のようにdocsという名前のタスクを記述します。

var gulp = require('gulp');
var aglio = require('gulp-aglio');
gulp.task('docs', function () {
    gulp.src('_docs/*.md')
        .pipe(aglio({ template: 'default' }))
        .pipe(gulp.dest('docs'));
});
4. docsタスクを実行してHTMLのAPIドキュメントを作成

docsタスクを実行します。

gulp docs

_docsディレクトリ配下の.mdファイルがパースされて、docsディレクトリにパース後のHTMLファイルが出力されれば成功です。

実際にやってみる

公式にあるサンプルをそのまま拝借して、_docs/sample.mdを作成します。

# Message [/messages/{id}]

## Retrieve Message [GET]
+ Response 200 (text/plain)

        Hello World!

## Delete Message [DELETE]
+ Response 204

docsタスクを実行すると、docs/sample.htmlが作成されました。 ブラウザで開くと以下のようないい感じのドキュメントになります。

f:id:imamoto:20150118032617p:plain

なお、API Blueprint記法の具体的な記述方法は公式ページGithub上の公式サンプルを参考にしてください。

かなり綺麗にカスタマイズできると思います!

それでは素敵なAPIドキュメントライフを!!