タグ

ブックマーク / qiita.com/laco0416 (11)

  • Angular 2でCSSアニメーションを書く - Qiita

    どうも、らこです。 Angular 2の勉強会で出た質問でアニメーションのことがあったので、試してみたら問題なく動いたので使い方を紹介します。 はじめに Angular 2のメインパッケージに含まれているのはangular2/animateモジュールです。これはもう実用段階のAPIです。 それとは別に、ngAnimateというプロジェクトも動いており、これはアノテーションベースでアニメーションを宣言的に記述できるようにしようというものです。まだ全然出来てないのでいまは使えませんがデザインドキュメントはみることができます。 Animations for Angular 2 Beta - Google ドキュメント 今回紹介するのは前者の今使える方です。 完成形 マウスオーバーで背景を指定された色に変更するアニメーションが動くディレクティブを書きました。 いろいろごちゃ混ぜですが動くサンプルは

    Angular 2でCSSアニメーションを書く - Qiita
  • 日本語訳:Angular 2 Change Detection Explained - Qiita

    こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど

    日本語訳:Angular 2 Change Detection Explained - Qiita
  • その使い方はもう古いかも?AngularJS老化チェック(ディレクティブ篇) - Qiita

    こんにちは、らこです。AngularJSのバージョン1.5.0がリリースされましたね! コードネームは ennoblement-facilitation、ざっくり訳すなら「高尚化促進」でしょうか。コンポーネント志向の「高尚」なアプリケーション設計への移行をサポートするバージョンだということでしょう。 1.5.0ではcomponentの追加をメインに、Angular2へのスムーズな移行を行うための足がかりとなるアップデートです。いい機会なので、 今の自分のAngularJSの使い方がどれくらい古いのか をチェックし、どのようにモダンにしていけばいいのかを知っておきましょう。 ちなみに、1.4までに関しては AngularJSモダンプラクティス - Qiita を参考にするとよいでしょう。 このモダンプラクティスに従ったコードになっていればcomponent()対応はあっという間のはずです。

    その使い方はもう古いかも?AngularJS老化チェック(ディレクティブ篇) - Qiita
  • Angular2はいかにしてオブジェクトの変更を監視しているのか - Qiita

    こんにちは、laco0416です。 今回はAngular2がいかにしてオブジェクトの変更を監視し、データバインディングを解決しているのかを解き明かします。 結論 この部分でループとtick処理を実装していた。 ObservableWrapper.subscribe(this._zone.onTurnDone, (_) => { this._zone.run(() => { this.tick(); }); }); 調査開始 Angular2は$applyがないのにどうやってオブジェクトの変更をビューに反映しているんだろう?という疑問から調査を開始。 そもそも、Componentのプロパティに変更を加えたときに何かイベントが発生しているわけではない(object.ObserveもProxiesも使っていない)ので、何かしらのタイミングで別のメソッドから変更があるかどうかをチェックしているはず

    Angular2はいかにしてオブジェクトの変更を監視しているのか - Qiita
  • Polymerプロジェクトのこれからについて - Qiita

    laco0416です。10/16にPolymerチームから今後のロードマップが発表されましたので、雑に日語訳します。 すごく雑なまとめ Polymerプロジェクト自体のことはPolymer/projectリポジトリを作ったからそこで話すようになる めっちゃコミュニティ大きくしたいからいろいろやる APIにはあんまり変更なさそう 周辺ツールをかなり強化する Carbonエレメントが爆誕する router やるよ Polymerプロジェクトのロードマップとリポジトリの紹介 Polymer 1.0の公開とPolymer Summitの開催から、Polymerの採用事例は指数関数的に増えています。しかし、我々はPolymerプロジェクトの向かう先について十分に盛り上げることができていませんでした。 我々はチームのゴールとロードマップについて熱心にコミュニケーションし、そして今日新たなリポジトリ

    Polymerプロジェクトのこれからについて - Qiita
  • kuromoji.js使って構文解析した - Qiita

    こんにちは、らこです。先日から話題になってるJavaScript形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを

    kuromoji.js使って構文解析した - Qiita
  • WebStorm9の新機能(Deep Dive into WebStorm 9's New Features) - Qiita

    先日9.0.0にアップデートされたWebStormの新機能についてJetBrainsの中の人が生放送で解説するウェビナー、「Deep Dive into WebStorm 9's New Features」が、10月30日17:00-18:00(日時間10月31日2:00-3:00)に開催されました。その中で紹介された新機能・Tipsと質疑応答の中から興味深いものをまとめます。 ウェビナーの様子は近日中に動画がアップされます。 [追記] 公式ブログに動画と記事が投稿されました http://blog.jetbrains.com/webstorm/2014/10/webinar-recording-a-deep-dive-into-webstorm-9s-new-features/ React and JSX 最初に紹介された新機能はReactとJSXについてです。 ReactUI構築の

    WebStorm9の新機能(Deep Dive into WebStorm 9's New Features) - Qiita
  • WebStorm+Spy-jsの使い方 - Qiita

    WebStorm9のEAPが始まり、目玉機能の一つに「Spy-jsのNode.jsトレース」が掲げられていますが「そもそもSpy-jsって何なの?」っていう方も多いと思いますので、今更ですがWebStorm8のSpy-jsと使い方をおさらいしておこうと思います。 なお、この記事の内容はWebStorm公式ブログを参考にしました。動画もあるのでぜひご一読ください。 Spy-jsとは? Spy-jsはJavaScriptの トレース、デバッグ、 プロファイリングの3つの機能から構成されるツールです。Spy-jsはWebStorm, PhpStorm, RubyMine, PyCharm(Professional), IntelliJ IDEA(Ultimate)にバンドルされていますが、スタンドアロンで動くものも配布されています。WebStorm8ではWebアプリケーションだけですが、WebS

    WebStorm+Spy-jsの使い方 - Qiita
  • WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る - Qiita

    npmでパッケージを揃える グローバル npm install -g grunt-cli bower プロジェクト環境 npm プロジェクトルートに以下のpackage.jsonを置いてnpm installするとパッケージが揃います { "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "karma-mocha": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "grunt-espower": "^0.6.0", "grunt-karma": "^0.8.2" } } bower bower install power-assertでpower-assertと依存パッケージがインストールされます。 Grunt設定 プロジェクトルートにGr

    WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る - Qiita
  • WebStorm AngularJS Webinar (April 24th, 2014) 補足メモ - Qiita

    [追記]公式ブログの方で録画映像と記事が公開されました。 http://blog.jetbrains.com/webstorm/2014/04/webstorm-8-webinar-recording/ 日時間で25日の夜中に、JetBrainsエンジニアであるJohn Lindquist氏によるWebStorm8の新機能についてのWebinarが開催されました。 来週にはJetBrainsのブログのほうに内容のおさらいが動画で公開されると思いますが待ち切れないので自分が把握できた分だけ書き下しておきます。 ちなみに話された内容はこちらにリストアップされています。 https://gist.github.com/brockangelo/11260515 リストが細かく書かれてるので実際はそんなに書き下すことないんですが、ところどころ補足したいところもあるので↑のリストと並べて読んでもら

    WebStorm AngularJS Webinar (April 24th, 2014) 補足メモ - Qiita
  • Volleyを使うときに気をつけることメモ - Qiita

    開発中のアプリに「ネット上からの画像の取得とキャッシュをする」処理があったので、不安定なオレオレ実装からGoogle謹製のVolleyに乗り換えてみました。 Volleyの導入やスタートアップはこちらなんかを参考にするといいと思います。 今回はVolleyを使う上での実用的なメモを備忘録代わりに書いておきます(@mhidakaさんに助けてもらいました) 1. 一度にRequestを投げすぎるな! Volleyがレスポンスを返すおおまかな流れは Requestを生成 RequestQueueに投げる ディスクキャッシュを探して見つかれば返す インターネットから拾ってきて返す という感じです。RequestQueueに投げてからレスポンスを返すまでは別スレッドで動いてくれるので、UIスレッドを停止させることはありません。 ところで、このDispatcherがVolleyでは1つしかなくて並列化

    Volleyを使うときに気をつけることメモ - Qiita
  • 1