Keynoteにソースコードを貼る
小ネタ。毎回調べてる気がするので書いておく。
Code highlighting for Keynote presentations
# 1. brewでhighlightをインストール $ brew install highlight # 2. 貼り付けたいソースコードをクリップボードにコピーしhighlight実行 $ pbpaste| highlight --syntax=js -O rtf | pbcopy # ファイルの場合はcat $ cat file.js | highlight --syntax=js -O rtf | pbcopy # 3. クリップボードにコピーされているので、Keynoteに貼り付け
オプションがいろいろあるので各自好みで調整する。
# デフォルトだと白系のテーマなので、--styleで変更する # styleの一覧は highlight -w で表示できる $ pbpaste| highlight --style=molokai --syntax=js -O rtf | pbcopy # デフォルトのフォントサイズはかなり小さいので、--font-sizeで指定 $ pbpaste| highlight --font-size 24 --style=molokai --syntax=js -O rtf | pbcopy # keynoteに合わせてフォントをRictyに変更 $ pbpaste| highlight --font=Ricty --font-size 24 --style=molokai --syntax=js -O rtf | pbcopy
こんな長いの覚えられないし面倒なので、上のGistのコメントに書いている関数を.zshrcに定義して楽をする。
# たぶんbashでも動く function light() { if [ -z "$2" ]; then src="pbpaste" else src="cat $2" fi $src | highlight -O rtf --syntax $1 --font=Ricty --style=molokai --font-size 24 | pbcopy }
# こういう感じで実行する
$ light js
$ light html index.html
オプションいっぱいあるのでhighlight -hで見ましょう。
東京Node学園 14限目行ったメモ
申し込みの時にIsomorphic JavaScriptっていう言葉を初めて知った。辞書で調べると「同形の」って意味らしくて、Isomorphic JavaScriptなるページには"Isomorphic JavaScript apps are JavaScript applications that can run both client-side and server-side."って書いてあるので「クライアント・サーバサイド両方で動くJavaScript」っていうことらしい。サイトにもロゴがあるがMeteorとかRendrとか。
おお！これは楽しそうだー！と思って申し込んで、いつのまにか「Isomorphic大会にする予定だったけどSynthとmilkcocoaの話に方向転換」ってなっててわらったｗ
- Synth - The back-end web framework designed to make (Angular|Ember|Backbone)JS web apps easy to create and manage.
- rendrjs/rendr · GitHub
シングルページアプリケーションで初期ロード時に画面が真っ白になる問題とかSEOどうするのがクールなんだろうかと思っていたのだが、紹介されてたSynthとRendrが良さ気。
Synthはpreloadっていう機能があって、なんかいい感じに初期ロード時にデータが入ったHTMLを返す仕組みがあるらしい。Rendrもそういう感じの仕組みがあるとのこと。
Milkcocoa - JavaScript一行に詰め込まれたバックエンド
milkcocoaというBaaSのバックエンドでDocker使ってる話も結構面白かった。
初めて東京Node学園行ったけど、内容濃くて面白かったのでまた行ってみたいなー
以下、メモです
Synthについて @pchw
- Tokyo Otaku Modeの人
- http://www.synthjs.com/
- InfoQの記事以降、あんまり盛り上がってはない
- synth is an api-first web app framework
- introduction
- まとめ
- シングルページアプリケーションの弱点である「ロード時に画面が真っ白になる」をpreloadで解決してるフレームワーク
- Promise使ってる
- Q&A
- Tokyo Otaku Modeで使ってますか？
- Tokyo OtakuModeでは使ってないｗ普通にexpress使ってるｗｗｗ
- synthはまだまだβで安定してない
- Angularを使ってるケースが多かったけどVue.jsはどう？
- synthがAngularに頼ってる感ある。
- Tokyo Otaku Modeで使ってますか？
milkcocoaとそれを支える技術（Docker + socket.ioの話） @_sgtn
- テクニカルロックスターズ.incの人
- milkcocoa
- BaaS
- プロダクションでDocker使ってる
- 認証・DB・ソケット通信をフロントでできるでよ
- インフラ抽象化→バックエンド抽象化へ
- milkcocoa→ユーザ一人ひとりにAPIとDBを
- ここでDockerやで
- AWSのラージインスタンスにDockerでインスタンスいっぱい立ててる
- 人が少なかったのでCI環境整備した
- Haxe使ってるらしい
- Q&A
LT * 4
Rendrの話 @hika69
- http://www.storyboards.jp/viewer/wo41ho
- @hika69
- 土谷光さん
- GMOペパボ
- FEっぽい開発者
- Casto
- ライブコーディングできるサービス
- それでRendr使ってる
- Airbnbが開発してる
- なんでつこてんねん
- Rendrはどこまで面倒みんの？
- SEO的にもええやん、これ
- まとめ
- SPAの利点を取りつつ、弱点を克服できるRendrすばらしい、合理的
- ネイティブアプリ用のAPIサーバを利用しつつ、Web作る場合にいい
- 学ぶならrendr-examplesがオヌヌメ
- スライドに解説してるGist貼っといたで
NodeConf探訪記 @bad_at_math
- @bad_at_math
- ハンドルネームがひどい。海外に行くとそっぽ向かれる。失敗した。
- なぜ行くねん
- 自分の感覚を海外にアジャスト
- 人脈を作る
- 行かなくてもセッション内容・最新動向はわかるけど
- 行くと海外の考え方、人々の関心、人的ネットワークの構築などええねん
- 海外のカンファレンス
- いかに出席者に楽しんでもらえるかを考えてる
- SO Track(Significant Others)
- 出席者の家族用のプログラム
- NodeConf?
- USとEU（アイルランド）
- 来月インドであるらしいがバタバタしとる
- チケットは$1k以下
- コミュニティ育成を重視
- US
- Portland 2012
- 劇場でカンファレンス
- Walker Creek Ranch 2013, 2014
- 無限の酒
- ひたすら飲んでる
- Workshop中心
- nodeschool.io
- Portland 2012
- EU
- チケットは1000ユーロ、渡航費考えると30万円くらい飛ぶ
- 社会や文化ひっくるめた感じ
- 音楽イベントとか、政治家のスピーチとか
- 2012
- アイリッシュ・ウィスキー飲み放題
- 2013
- お城
- 島がNodelandに改名される
- まとめ
- 参加するならセッションより会話
- geekfeminismに注意
ES6でよく使いそうなもの @omatoro
- @omotoro
- TEST CORDINGっていうブログやってる
- いい感じのやつ
Node.jsでQueueを実現するkueの話 @muddydixon
Speeding up AngularJS apps with simple optimizations
Speeding up AngularJS apps with simple optimizations
ng-newsletterで流れてきて結構いい記事だったのでメモ。
基本的には、$$watchersを減らして、$digestの負荷を下げましょうとのこと。
One Time Binding Syntax {{ ::value }}
1.3.0からの機能。
{{ ::value }}と書くと最初の1度だけバインディングされ、後は$scope.valueが更新されても{{ ::value }}は更新されない。バインディングされた後は監視から外れるので、$digest時の負荷が下がる。
<!DOCTYPE html> <html ng-app="app"> <body> <div ng-controller="MainCtrl"> <h1>{{ title }}</h1><!-- ボタンを押すとどんどん増えていく --> <h1>{{ ::title }}</h1><!-- ボタンを押しても更新されない --> <button ng-click="plusTitle()">plus</button> </div> <script src="bower_components/angular/angular.min.js"></script> <script> angular.module('app', []) .controller('MainCtrl', function MainCtrl ($scope) { $scope.title = 'Hello!'; $scope.plusTitle = function () { $scope.title = $scope.title + ' ' + $scope.title; } }); </script> </body> </html>
$scope.$apply vs $scope.$digest
$scope.$applyと$scope.$digestは、Angularじゃないライブラリのイベント内でDOMを更新したりする場合に、その更新をAngular側にも通知するために使う。
$applyの中で$digestが呼ばれるからどっちも一緒だろと思ってたけど、違うらしい。
$scope.$applyは$rootScope.$digestを実行するので全ての$scopeで$digestが実行されてしまい影響範囲が大きい。
$scope.$digestはその$scopeと子孫の$scopeに$digestが実行されるので、$scope.$applyに比べると効率がよい。
<!DOCTYPE html> <body ng-app="app"> <div ng-controller="ParentScopeCtrl"> <h1>{{ parentObject.value }}</h1> <div ng-controller="ChildScopeCtrl1"> <h2>{{ parentObject.value }}</h2> <div ng-controller="ChildScopeCtrl2"> <h3>{{ parentObject.value }}</h3> </div> </div> <button id="call-apply-button">call $scope.$apply()</button> <button id="call-digest-button-1">call $scope.$digest() in ChildScopeCtrl1</button> <button id="call-digest-button-2">call $scope.$digest() in ChildScopeCtrl2</button> </div> <script src="bower_components/angular/angular.min.js"></script> <script> var $scopeOfChildScopeCtrl1, $scopeOfChildScopeCtrl2; angular.module('app', []) .controller('ParentScopeCtrl', function ($scope) { $scope.parentObject = { value: 'parent' }; }) .controller('ChildScopeCtrl1', function ($scope) { // angularの外で$scopeの中身を変更するために、変数に保持 $scopeOfChildScopeCtrl1 = $scope; }) .controller('ChildScopeCtrl2', function ($scope) { // angularの外で$scopeの中身を変更するために、変数に保持 $scopeOfChildScopeCtrl2 = $scope; }); // Angularの監視外でデータを変更し、$apply, $digestの違いを見る、 var callApplyButton = document.getElementById('call-apply-button'); var callDigestButton1 = document.getElementById('call-digest-button-1'); var callDigestButton2 = document.getElementById('call-digest-button-2'); callApplyButton.addEventListener('click', function (e) { // $apply => h1, h2, h3、全て更新される $scopeOfChildScopeCtrl1.parentObject.value = 'call $scope.$apply().'; $scopeOfChildScopeCtrl1.$apply(); }, false); callDigestButton1.addEventListener('click', function (e) { // $digest => h2, h3だけ更新される $scopeOfChildScopeCtrl1.parentObject.value = 'call $scope.$digest() in ChildScopeCtrl1.'; $scopeOfChildScopeCtrl1.$digest(); }, false); callDigestButton2.addEventListener('click', function (e) { // $digest => h3だけ更新される $scopeOfChildScopeCtrl2.parentObject.value = 'call $scope.$digest() in ChildScopeCtrl2.'; $scopeOfChildScopeCtrl2.$digest(); }, false); </script> </body>
ng-repeatは重い
ng-repeatは使うとすごく気持ちいいし、ulとか繰り返しのDOMを見つけるとついついng-repeatを使ってしまう。
が、やっぱり処理的には重いので、静的にHTML書いて済むところはそうするとよし。
directiveの中ではなるべくDOM操作する
<div ng-show=”something”></div> $scope.something = false; $scope.someMethod = function () { $scope.something = true; };
↑みたいにng-show使うために$scopeに変数持つくらいなら、下記のようにDOM操作で解決する。
var menu = $element.find(‘ul’); menu.hide(); $scope.someMethod = function () { menu.show(); };
自作Directiveの場合は、コンストラクタの引数に$elementが渡されるのでそれを使えよとのこと。
たかがng-showでもng-repeatと併用で使われた時に爆発的に監視対象が増える可能性があるので要注意。
まとめ
- 双方向データバインディング系フレームワークは便利だけど内部の動作をある程度知ってないと気付かぬうちにひどいパフォーマンスになりそう。 このあたりの動作の詳しいところはオライリーの本に書いてあるのだろうか。
- 確かEmber.jsは、「この関数はこの値とこの値を更新しますー」みたいなのが定義できて、監視を効率的にできる機能があった気がする。
早くオライリーの本読まないとー
buttonでファイルを開く
小ネタ。
<input type="file"/>はスタイルが扱いづらい。<button>クリック時に動的に生成してしまえばいいんじゃないか（というかdepth.meがそういう実装だった）
<!DOCTYPE html> <body> <button>Open File</button> <script> var button = document.querySelector('button'); // ボタンクリック button.addEventListener('click', function onClickOpenFileButton () { // 前に突っ込んだ<input type="file" />の削除 // 変数もつのだるいのでListenerに突っ込んでみる if (onClickOpenFileButton.inputElement) { // 削除 document.body.removeChild(onClickOpenFileButton.inputElement); } var inputElement = onClickOpenFileButton.inputElement = document.createElement('input'); inputElement.type = 'file'; // 非表示 inputElement.style.visibility = 'hidden'; inputElement.style.position = 'absolute'; inputElement.style.left = '-9999px'; document.body.appendChild(inputElement); inputElement.addEventListener('change', function (e) { // 選択されたファイル郡 console.log(e.target.files); }, false); // このタイミングでファイル選択ダイアログが開く inputElement.click(); }, false); </script> </body>
これなら二度同じファイルを選択してもchangeイベントが発生するし、いいんじゃなかろうか。
うごイラTech Talks行ってきた #pixiv_engineering_talks
http://pixiv.doorkeeper.jp/events/13008
会社から近かったので余裕ぶっこいてたら15分ほど遅刻してしまい、最初の方のLT聞き逃したorz
zip_playerの実装の話と、BEの構成の話と、なぜgifやmp4を選択肢なかったのかの話、node .jsでターミナル上で再生する話はとても面白かった。 企画の話は途中からだったけど、あくまでイラストの延長線上であるっていう話がすごい興味深かったので、遅刻したのが本当に悔やまれる。 楽しく仕事しているのがすごく伝わってきて、すごく楽しい＆内容の濃いLTばかりで参加してよかったなーと思った。
以下メモ。最初のほうはメモ取れなかった。途中も難しかったり英語聞き取れなかったりでメモ不十分なとこ有り。
うごイラと画像変換
- @totoshi
- 資料
- 画像周り
- アップロード、変換
- うごいらとは？
- →pixiv百科事典みろ
- zip煮詰めて配信してJSで怪盗、canvasで再生
- なぜGIFアニメじゃないのか？
- 画質悪い、文化が違う→お絵かきじゃない
- お絵かきの延長線上で、敷居を下げたかった。
- Twiiter Gifアニメの特徴
- GIF→mp4変換。ファイルサイズを圧縮できる。
- でも画質劣化大きい
- 一方うごイラは
- ファイル重いけど、高画質
- うごイラに適した良いフォーマットが見つからなかった。
- 動画より画像にしたかった → 画質重視
- ImageMagikもつらいのにffmpegと戦うのも嫌だった
- 今後
- 軽くする
- 差分だけ送るとか
- .ugoフォーマット作りたい
- 軽くする
- まとめ
- うごイラはGIFあにめ、動画じゃない
- 技術的には挑戦というよりは悪乗り
UGOKU PLAYER
- ugoira html5 zip player
- @marcan42
- （※英語でトークだったのでほとんどわからなかったです。ごめんなさい。）
- APNG、MNGなどあるが誰も対応してねえ
- ArrayBufferとか使ってJSでzip展開や
- Chunkで送ってるから全部揃わなくても再生可能
- この辺り、詳しくわからんかった。
- https://github.com/pixiv/zip_player
Ugoku backend
- @harukasan
- Apache Traffic Server, nginx, Fulentdとか
- バックエンドの話
- うごイラについてはそんなに気を遣ってない。
- 7K req/s(dynamic), 30K req/s(image), 400 servers
- upload system
- 最大150枚の画像の変換処理
- ユーザを苛つかせないために非同期アップロードしてる
- 画像ファイルアップロード → 詳細情報入力
- Redisでキューイングして、サムネイル作成、変換
- gif画像分割→gifsplits
- 動的サムネイル生成
- Contents Delivery Cluster
- CDNみたいなもの
- ヒット率90%くらい
- nginx(60%)→ATS(90%)→nginx→1Gbpsの回線→ストレージ
- SSDが載ったサーバ
- CORS対応
- preflight requestでRangeヘッダーの許可
- まとめ
- 割と普通
- 綺麗よりうごく
ugoku php deployment
- @notonau
- 俺はうごイラをスクリーンセイバーにしとるで
- https://github.com/notona/ugoira-screen-saver
- 今までのpixivのデプロイはrsync
- うごイラはcomposer
- デプロイ時のエラー
- rsync中にリクエストされると困る
- ソリューション
- Q.他の方法はなかったのか？
- 物理サーバなので、Green-Blue deploymentはできない
- ロードバランサから落として1台づつは、新旧交わる時間が長すぎるので採用してない
うごかなイラ
- @shobyshoby
- iOSアプリ作ってる
- 評判良かったが、アプリから見れないっていう問い合わせが多かったｗ
- Webと同時にリリースする必要があった。
- 審査があるのでアプリを先に開発する必要があった。
- APIができてない状態で開発してた、モックで
- OHHTTP
- モック化するとキャッシュのバグに気づきづらい
- 実装
- zipをcahceディレクトリに展開
- CADisplayLink
- drawRectでの描画領域を最小限に。デバイスに合わせてスケーリングする。
- 教訓
- APIのURLとレスポンスをDB設計と同時期に決める
- 同時期だと実データでテストできない
- Web側にiOSの審査を待ってもらう→非現実
- 諦める
- Web→Android→iOSの順でリリースがいいと思う
- まとめ
- iOSとWebの同時期リリースはかなりハードル高い
うごイラ in Android
- @RooandQoo
- FragmentとDownloader
動いてるコードレビュー
ugocat
BrowserSync
livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。
使い方
npmでインストール
$ npm install -g browser-sync
手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、
$ browser-sync start --server --files "*.html, css/*css"
で、ポート3000番で起動しブラウザ開く。地味に嬉しかったのは3000番が既に使用済みの場合は3001番で起動する（確認してないが多分その後もカウントアップしていき空いてるポート番号で起動するはず）
プロキシも--proxyオプションでプロキシしたいホスト名指定するだけなのですごい楽
$ browser-sync start --proxy "プロキシしたいホスト名" --files "css/*.css"
オプションが増えてきたらbrowser-sync initでbs-config.jsが生成されるのでそれに書けばOK。
Action Sync
ブラウザ間で動作を同期する機能。
<body> <a href="http://www.yahoo.co.jp">ヤフートップ</a> </body>
↑のhtmlをindex.htmlの名前で保存して、
$ browser-sync start --server --files "*.html"
でbrowser-syncを起動して、「localhost:3000」を複数のブラウザで開き、どれか1つのブラウザで「ヤフートップ」のリンクをクリックすると全部のブラウザがヤフートップに遷移する。
感想
シンプルで良さ気。
Away3D勉強会に行ってきた
銀座で勉強会初めてだなーと思いつつ地図の指す場所に向かったら会場がすごい派手な場所でわらった。
Three.jsしか使ったこと無いけど、「あーこれTypeScriptで書きたいなー」って思うことが多々あって、いちおthree.jsもd.tsはあるんだけど、「もうちょっと名前空間分けてほしいなーTypeScriptなら簡単にできるのになー」とか思ってた。
Away3DについてはTypeScriptで書かれているということしか知らなかったので、利点・欠点、ルーツ、WebGL以外のAway3Dについてなど、幅広く聞けたので参加してよかった。
今日聞いて良さそうだったところ
- TypeScriptで書かれているので、ビルドされたjsに対応したd.tsが確実にある
- d.tsがあることで、IDEの補完が楽。
- WebStormとかVBとか
- 名前空間が深め
- カメラを操作するcontrollerっていう概念が良さげ。HoverControllerだけかもしれないけど。
- WebGLが使えないブラウザの時にFlashにフォールバックする機能がある。swfも用意されている
- インポーターの種類が結構あった。
悪そうなところ
- APIドキュメントが無いらしい。
- JSDoc形式でコメントは書いているらしいので自分で生成すれば見れる
- WebGL版は開発が活発で進化が速い
- 低レベルな部分がかなり隠蔽されていて扱いづらいらしい
- three.jsでMeshを拡張してuvsとかいじったりしていたので、
- どれくらいできないのか知りたいところ
開発が活発で安定してないってことで、総括して商用ではまだ厳しいとのことだった。
以下、メモ。
Away3D TypeScriptで立方体を回してみる
- 野中文雄さん
- 今日やるやつ
- 舞台、照明、役者が必要
- (基本はThree.jsと同じっぽいな)
- (カメラは無いのかな)→あった！
- ViewのコンストラクタにRederer渡す
- away.entities.DirectionalLight
- 環境光
- 強さと向き
- Prefab
- オブジェクトのひな形
- Three.jsでいうところのTHREE.Mesh
- マテリアルに対してライトを追加
mesh.material = material; material.lightPicker = new away.materials.StaticLightPicker([light]);
- ループしてない時は、なぜかview.render()は2回呼ばないとrenderされない
- away.utils.RequestAnimationFrameでwindow.requestAnimationFrame
- 返り値でtimer返ってくる
- timer.start()で実行開始
- 回転
mesh.rotateX = 角度; // Degree, 0 ~ 359 mesh.rotateX = 角度; // Degree, 0 ~ 359
- マウスドラッグでカメラを動かす
- HoverControllerを使う
new away.controllers.HoverController(カメラ)- パンやチルトができる
- 見栄えがいいからサンプルでよく使われる
- distance, maxTiltAngle, minTiltAngle, panAngle, tiltAngle
- HoverControllerは勝手にトゥイーンしてくれる
- 初期化時に設定したcameraの視点基準でpanAngleとtiltAngleでアニメーション
- ドラッグ時にpanAngle, tiltAngleを変える
- ドキュメント更新が多いのは、2ヶ月くらい経つと前に書いたコードが動かなくなる
- Away3D.tsは更新が激しいっぽい
- ライブラリが別れたり、クラスが増えたり、変わったり
- 今日のサンプルは6/24のビルドで作ってる
WebGLで作成するHTML5コンテンツ
- 池田泰延さん
- @clockmaker
- ICS代表
- ゲーム開発、広告
- インタラクティブ
WebGLの現状
- サポート状況→IE11, Chrome, Safari, FF,
- WebGL vs Context2D（CreateJSで比較）
- パフォーマンスは圧倒的やで
- オブジェクト数を増やすた時のFPS
- でも、用途が違うので機能面では比較できない
- Away3Dの技術展開
WebGL版Away3D
- http://typescript.away3d.com/
- TypeScriptで開発されている
- Flashの機能に相当するAPIが用意されてる
- BitmapData, URLRequest, ByteArray, BlendMode etc
- RGBを分けるとかBitmapData使うと超楽やで
- 事例：World Cup Visualization 2014(まだ公開してない）
- 一部文字の部分とかはContext2D(createjs)で作った
- 3Dの上に2DのUIを乗せるのがユーザビリティ的にいい
- WebGLでUI作るのはかなり厳しい
- UIはContext2DやDOMでやればいい
- Flashでモック作って、TypeScriptで再実装した
- TypeScriptのメリデメ
- Three.jsとAway3Dの比較
- 所感
- icsのブログにチュートリアルあるのでどうぞ
- Q&A
