Angular2 + webpack でLazy Loading(AoTもあるよ!) - Qiita
先日公開されたAngular2 rc.6から、RouterのLazy Module Loading機能が強化されています。 AngularJS 1.xでは、oc-lazy-loadなどの3rd Party製の仕組みはあったものの、公式なLazy Load機能は用意されていなかったため、個人的には期待度の高い機能でした。 そこで今日はwebpack環境でのAngular2 のLazy Loadingについて書いてみようと思います。 ちまちま書いたので若干長くなってしまったので、先にレポジトリのURL貼っておきます。 Quramy/ng2-lazy-load-demo なお、上記のレポジトリではwebpackは1.xではなく、2.x(2016.09.03現在beta版)を利用しています。AoTを使わないのであれば、1.xでも問題ありません。 Lazy Loadingって？ webpackに限ら
iOSはoverflow:hidden;でスクロールを無効にできない - Qiita
// スクロールを無効にする $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); // スクロール無効を解除する $(window).off('.noScroll'); スマホの独自イベントのtouchmoveイベントを切ってスクロールを止める。 解除したい時はoffする。 イベント名に、.noScrollと名前を付けることで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができる。 参考 iphoneでスクロールをさせない処理をする。 特定のエリアのみスクロールを無効にする方法 ドロワーメニューを左側に表示するときにコンテンツ側を固定するときなど //
メールアドレスを表す現実的な正規表現 - Qiita
RFC5322で定義されているメールアドレスの書式を完全にサポートすることは簡単ではありませんが、適当な正規表現を紹介してOKとする記事があとを絶ちません。 HTML5には input[type=email] という要素があり、メールアドレスの書式チェックをクライアントサイドで行えるようになっています。このチェックでは、下記の(Perl5の記法にならった)正規表現を使っています。 /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ 注釈に この要件は電子メールの構文を定義するRFC5322に対して 意図的に違反 (willful violation) している。 とあるように、仕様を完全に満足する正規表現ではありませんので、電子メールヘッダを解析するような本格的な用途に対しては不十分ですが、WEBサ
Angular 2でCSSアニメーションを書く - Qiita
どうも、らこです。 Angular 2の勉強会で出た質問でアニメーションのことがあったので、試してみたら問題なく動いたので使い方を紹介します。 はじめに Angular 2のメインパッケージに含まれているのはangular2/animateモジュールです。これはもう実用段階のAPIです。 それとは別に、ngAnimateというプロジェクトも動いており、これはアノテーションベースでアニメーションを宣言的に記述できるようにしようというものです。まだ全然出来てないのでいまは使えませんがデザインドキュメントはみることができます。 Animations for Angular 2 Beta - Google ドキュメント 今回紹介するのは前者の今使える方です。 完成形 マウスオーバーで背景を指定された色に変更するアニメーションが動くディレクティブを書きました。 いろいろごちゃ混ぜですが動くサンプルは
Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 Angular2のDIの使い方 まずは一番単純なDIの使い方を解説します。そもそもDIとは…という話になると複雑になるので省きますが、Angular2においては「 Providerから提供されているインスタンスを特定の変数にInject（注入）する仕組み 」のことを指します。 Provider と Inject の2つの関係は重要なので頭に入れておきましょう。 Injectされる側 今回はFooServiceというクラスのインスタンスがDIで注入されるようにします。以下のコードではsay()メソッドを持つFooServiceクラスをexportしています。
Angular2のHttpモジュールを眺めてベストプラクティスを考える - Qiita
@laco0416 です。今回はHttpモジュールの機能を眺め、アプリケーション中で使う際のベストプラクティス案みたいなものを考えていこうと思います。 なお、本稿で扱うAngular2のバージョンはbeta.0です 基本的な使い方 まずはざっとAPIリファレンスを眺めます。 https://angular.io/docs/ts/latest/api/ 重要なのは以下のシンボルです。 HTTP_PROVIDERS Http Request Response HTTP_PROVIDERSはHttpクラスのインスタンスをDIで取得するために必要なプロバイダのセットです。テストでモックサーバーなどを差し込みたい場合はこのプロバイダをいじくります。 HttpはAjaxの主役、いわゆるクライアントです。このクラスのメソッドでリクエストを送り、レスポンスを受け取ります。 RequestはHttpクラスが
Electron + Express.js のミニマム構成の Web アプリを作る - Qiita
Electron ＋ Express.js を使ってローカルで HTTP サーバを動かして、.dmg ディスクイメージで配布可能な Mac 用の Web ベースのデスクトップアプリを、ミニマム構成で作成してみます。 こんな用途がターゲットです： Node.js / Express.js ベースの Web サーバアプリを作っている Browserify とかを使った Web クライアントアプリを作っている EC2 とかの外部サーバを使わずに、ローカルの Mac 上で動くデスクトップアプリとして配布してみたい こんな用途はターゲットではありません： Electron の詳しい仕組みを知りたい場合 Atom みたいな本格的なデスクトップアプリを作りたい場合 Windows でも動くマルチプラットフォームなアプリを作りたい場合 （１）フォルダを作る
2016年 独りで新規WEBサービスを開発・運用した際の知見 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 私が新規WEBサービス立ち上げ時に取り組んだ内容についてWEBエンジニア向けにまとめた記事です。 例えばNginxの設定でHTTPヘッダーが正しく設定されているかを確認できるGoogleDevelopers PageSpeed Insights を知っていると大変有利です。もちろんPageSpeed Insightsを知らなくてもWEBサービスを公開・運用可能ですがユーザに意図せず不利益を与えていたり、知らず知らずのうちにモバイルフレンドリーでないとGoogleから検索ペナルティを加えられている可能性があります。この記事は独りで新規WE
FluctとAPI Gateway+LambdaでWebアプリをつくる - Qiita
Fluctというツールを使いながら、Amazon API GatewayとAWS Lambdaを組み合わせてWebアプリをつくる方法について説明します。JavaScriptで実装でき、自動的にそこそこスケールし、Amazon EC2などで自前のWebサーバを常時稼働させておく必要なく、基本的にはリクエスト回数と転送量に応じてのみ課金されるようなWebアプリの環境を手に入れることが目的です。 Amazon API Gatewayとは Amazon API GatewayはWeb APIを簡単に作成・公開・管理するためのサービスです。2015年7月9日に新しく公開されました。Qiitaにも既にいくつかの記事が投稿されています。それ自身はプロキシとして振る舞い、バックエンドのサービスが提供するデータや機能にアクセスするための入口として振る舞います。 バックエンドのサービスには、AWS Lambd
今流行りの「MEANスタック」についてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) - Qiita
今はやりのMEANスタックについてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) 海外でじわじわ人気を獲得し始めている うわさの「MEANスタック」とはなにか？ まとめてみました。 MEANとは 合わせて読みたい M = MongoDB 従来のRDBMSとは異なる、NoSQLというデータベースシステムによる ドキュメント指向型データベース。 MongoDBについてまとめてみた E = Express Node.jsの軽量Webアプリケーションフレームワーク Expressについてまとめてみた Expressを学ぶチュートリアル形式の記事・コンテンツまとめ A = Angular オープンソース(MITライセンス)のJavaScript用 MVCフレームワーク。 Angularについてまとめてみた Angular JSの良質チュートリア
iOS safariで画面下部のメニューバーが消えないようにする - Qiita
iOSのsafariでは、画面下部に標準メニューバーが存在しています。 しかし、このメニューバーの挙動が厄介で、 webサイトを開いた状態ではメニューバーが表示されているものの、 少し画面をスクロールすると、このメニューバーがひょいっと下に隠れてしまいます。ついでに画面上部のアドレスバーも小さくなってしまいますね。 サイト上でスクロールに応じた演出や、 position: absolute; や position: fixed; を使って表示位置をシビアに調整しないといけない演出をやりたいとき、 この仕様がとても邪魔になってしまいます。 iOS7までは、viewportにminimal-uiなるものを指定することで、 このメニューバーを 一切表示しないという選択肢があったのですが、 iOS8からはこのminimal-uiが廃止されてしまいました。 そこで、cssを使って メニューバーが隠れ
Angular.jsで実践 アニメーション - Qiita
スライドの動きやフリック時の画面遷移、昔アニメーションといえばゲームなイメージでしたが、モバイル端末が登場して以来結構身近なものになりました。 ただ、身近だから簡単というわけでもなく、動作にアニメーションをつけるのは結構面倒。「これちょっとさ、下からひゅっと出てくる感じにしてよ」と言われてそんな簡単じゃないんだよとイラッとすることもあるだろう。 「アニメーションはもうデザインみたいなもんだし、CSSで書いてよろしくやってくれたらな・・・」とJQueryで実装しながら見るはかない夢・・・を現実にしてしまうのが、Angular.jsのng-Animateなのであります！ 準備 アニメーションを使用するには、angular.js本体意外にangular-animate.jsが必要となります。Googleがホスティングしてくださっているので、ありがたく使わせていただきましょう。 Google Ho
TypescriptでEventDispatcher作ってみた(javascript) - Qiita
module events { export class EventDispatcher { listeners:any = {}; dispatchEvent(event: any): void { var e:Event; var type: string; if (event instanceof Event) { type = event.type; e = event; } else { type = event; e = new Event(type); } if(this.listeners[type] != null){ e.currentTarget = this; for (var i:number = 0; i < this.listeners[type].length; i++){ var listener: EventListener = this.listene
AngularJS and scope.$apply（日本語訳） - Qiita
Jim Hoskins氏の AngularJS and scope.$apply を日本語訳しました。JavaScriptの仕組みから解説されていて、とても分かりやすいです。 AngularJS and scope.$apply もしあなたがAngularJSで多くの重要なコードを書いているなら、$scope.$apply()メソッドを見たことがあるだろう。一見すると、バインドした変数を更新するためのメソッドのように見える。しかし、何故これが存在しているのか？そしていつこれを使うのか？ いつ$applyを使うかを本気で理解するためには、 何故これを使う必要があるのかをきっちり知るのが良い。さあ、召し上がれ！ JavaScript is Turn Based 私たちが記述するJavaScriptのコードは一度に全て実行されるのではなく、ターンベースで実行される。各ターンは始めから終わりまで中
AngularJSモダンプラクティス - Qiita
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular 2 - Qiita Advent Calendar 2015 - Qiita
Node.js からDynamoDBを操作するサンプル - Qiita
[Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita![[Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd11ad1fa690ff13e101521121dc7cbec590ac1f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFdlYiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFRiVCQyU4QiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSU4QyVFOSU4MCU5RiVFMyU4MSU5OSVFMyU4MSU4RSVFMyU4MiU4QiVFNCVCQiVCNiUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTVkNmQxYjIyMDRhZmExZDA3M2I3MWJiODJhNmE3YmM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3Daa7660c34125930d588d328ff2512702)
https://qiita.com/ryot_a/items/2a8d8c0f71dcc657784c
[jQuery] click / touch / pointer イベントを完全に制御する - Qiita![[jQuery] click / touch / pointer イベントを完全に制御する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f40d5d01dfa5d8767ed88f3932b1985522d887f7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRjEuZ3JhdmF0YXIuY29tJTJGYXZhdGFyJTJGMWY3ZTRhZDIyMTFiNjI5NGU0OWMzZDAxOTkyYjM5NGQlM0ZkJTNEaHR0cHMlMjUzQSUyNTJGJTI1MkZpZGVudGljb25zLmdpdGh1Yi5jb20lMjUyRjE4YmI2OTQ1NTZmOTkxNjliMjk4ZTk5NjBiYWE0YTBkLnBuZyUyNnIlM0R4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTJhZjY5YzM0OTEyMDhjNzBmZGJjOGFkOTRjODVkMjlk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dee2f7fd4d751ac44194be284ac29b5a5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCalF1ZXJ5JTVEJTIwY2xpY2slMjAlMkYlMjB0b3VjaCUyMCUyRiUyMHBvaW50ZXIlMjAlRTMlODIlQTQlRTMlODMlOTklRTMlODMlQjMlRTMlODMlODglRTMlODIlOTIlRTUlQUUlOEMlRTUlODUlQTglRTMlODElQUIlRTUlODglQjYlRTUlQkUlQTElRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hYTE5MjRmNmE3YTg3NDlmYmE4MDNjNTA1MjYwNWJlNQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0b3NoaWhhcnUtaXJpZSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWU3MTE0MGIyNzdhZTY0ZjNkZTkwMzZhNmJlNzljNmJi%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D89408ebc673fc27e044fb448e6cb2514)
