State of SEO for SPA 2019 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-ev
Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみる - Qiita
はじめに 以前からちょこちょこ新しいWEBサービスを作っているということをQiitaの記事に掲載していましたが、このたび[SCORERA（verβ）」を正式にリリースしました。（2019年3月にサービス終了） サービス構築、リリースにあたって色々と知見がたまったので、作成過程で詰まったことや、リリースにかかる作業のうち技術的な側面のものを中心に公開しておこうと思います。 目次 前提 どんなサービス？ 使用している技術 トピック SCORERAのディレクトリとモジュール構成 RxJSの状態管理 外部ライブラリの選定 FirebaseのRealtime DatabaseとFirestore クライアントサイドのエラー取得 AngularプロジェクトのSEO 技術面以外でやったこと、やること 前提 どんなサービス？ 「SCORERA（verβ）」はスポーツ競技や文化系競技（将棋、ゲームなど）とい
AngularでSVG使おうぜ！ - Qiita
本記事は Angular Advent Calendar 2017 の21日目の記事です。 みなさん、SVG使っていますか～！ HTMLと同じように文書構造を表現できるSVGですが、Angularで利用するにあたって、その利便性や注意点にはどのようなモノがあるのでしょうか？ Angularとの親和性 svgファイルをイメージタグで読み込んだりして利用する分には特に旨味はなく、「eventListnerでonclickを取得できるベクター画像」くらいの機能性しか持たず、特にAngularとのシナジーを感じるようないいことはないかもしれません。。。 しかし、SVGはHTMLテンプレート上にそのまま記述でき、描写されるという特徴を持っています。 このため、バインディングやディレクティブなど、Angularを象徴する機能のほとんどがHTMLのテンプレートと同じように、遜色なく利用することができます
Angularの外部でイベントが発生した時の変更検知の方法 - Qiita
2017年9月からGoogleのプレミアムパートナーでもある株式会社ゴーガでエンジニアをしており、Google Maps APIとAngularを使って地図関連のWebサービスを開発しています。 特にテーマが思いつかないので、直近でハマったことについて書きます。Google Mapのようなサードパーティーのライブラリを使用した際に注意しておきたいことです。 はじめに Google Mapのマーカー（地図に表示される指標）をクリックした時に、マーカーの情報を元にAngularのコンポーネントを更新する処理を書いていたところ、Angular Materialのダイアログがうまく開かないという問題が発生しました。なぜだろうと思っていろいろ調べていたら、マーカーをクリックした時にコンポーネントのngAfterViewCheckedが全く反応していない（ビューが更新されていない）ことに気付きました。
Angular2で動的コンポーネントを生成する - Qiita
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { Component, ComponentFactoryResolver, EventEmitter, NgModule, OnInit, OnDestroy, ViewContainerRef } from '@angular/core'; import { Observable } from 'rxjs/Rx'; // MEMO: plunkerの場合は'rxjs/Rx'、ローカルでangular-cliの場合は'rxjs' /** * 動的に生成するサンプルコンポーネント */ @Component({
AngularでJsonをClassに変換する - Qiita
Json to Class (Angular 4 on TypeScript) 先日、ようやくWeb apiと通信できるようになったのだが返却値をクラスにシリアライズする処理をべた書きしていたのでここをなんとかしたい。 最近はマイクロサービスが流行っているし、Web apiでのやりとりは今後少なくないはず。なので、こういった単純かつ繰り返し使う部分は自動化しておきたい。 /** * これを */ const charInfo = data.json()['character_list'][0] const char = new Character( charInfo['id'], charInfo['name'], charInfo['name_ruby'], charInfo['family_name'], charInfo['first_name'], charInfo['family
Angularでページ離脱確認を実装する - Qiita
りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 しかし、AngularではwindowのイベントだけでなくRouterによって画面遷移を制御します。そのため、beforeunloadイベントだけではページ離脱確認を実装しきれません。 今回はAngularでのページ離脱確認の実装方法を紹介します。 CanDeactivateを使う Angularでページ離脱確認を行うには、beforeunloadイベントを処理するだ
Angular ブラウザからiPhoneのカメラを起動して写真を撮る - Qiita
やったこと safariからiPhoneのカメラを起動する canvasで写真撮る box保存とサーバ送信する angularでやってるけど、ほとんど標準のJS使った処理なのでtypescriptをヴァニラJSに置き換えれば何でもいける気がします。 ただし、reactだと魂を震えさせるアイツが一転して抵抗勢力となりもろもろツライ感じになるのでご注意ください。 https://github.com/facebook/react/pull/9146#issuecomment-319629271 環境 カメラついてるマシン 筆者はMBP（mac book pro）のフロントカメラでざっと作りながら、iPhone7で実機確認する手順でやっています。 mediaStream API対応 ブラウザ 中核です。カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置を扱うAPIです。 s
Angular Component Dev Kit 入門
はじめに 何やかんやでAngularネタを書くのはわりと久しぶりです。 長らくbetaだったAngular MaterialもいよいよRCを迎えています。 今日は、Angular MaterialのサブプロジェクトであるAngular Component Dev Kit（以下CDK）について簡単に紹介していきます。 CDKを学ぶべき理由 Angular Materialのステータスアップデート にもあるとおり、 CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。 CDKはUIライブラリ開発にありがちな機能を、コンポーネント開発基盤としてまとめたパッケージです。 「CSSをデザイナが提供してくれる
Angular JSの良質チュートリアルまとめ - Qiita
随時更新中 日本語によるAngularのTips別チュートリアル AngularJS's tutorial ・とても丁寧に作りこまれていて、わかりやすい 公式チュートリアル AngularJS ・基本困ったらここ Yeomanのチュートリアル Step 10 ・かなり質が高い。 ・自分がチュートリ作る際にも参考になる。 angular-local-storage GitHub Demo ・上記のチュートリで使われるモジュール Further Reading THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONS ・これは英語だけどかなりおすすめ ・Local Storageの背景とかも理解できた MongoDBも接続したい YEOMANを使ってMEAN（MongoDB + Express.js + Angular.j
Angular+Cognitoのユーザー認証付きSPAのサンプル - Qiita
はじめに Angularで作るSPAにCognito認証を組み込むサンプルを作りました。 ログイン・ログアウトだけではつまらないので、ログイン時に使えるS3ファイルアップロード機能も追加しています。 awslabsから公開されているaws-cognito-angular2-quickstartというサンプルが大変参考になりました。 作っていく AWS側の準備 S3バケットの作成 Cognito Identity Pool に設定するロールの設定に、アクセス許可をするS3の情報を記載する必要があるので、事前にS3バケットを作成しておきます。 今回は、 angular-cognito-s3-file-uploader という名前のバケットを作成しました。 バケットポリシーと、CORSの設定は以下のとおりです。 { "Version": "2008-10-17", "Id": "PolicyFo
素朴な Angular 向けの type safe で immutable な Flux Store - Qiita
TL;DR タイトルまんまですが、TypeScript と RxJS だけで、type safe で immutable な Flux パターンが実現できるよ、って話です。Flux Store の実装はコメント入れても 40 行未満です。 PoC 的に作ってみましたが、Angular が適合するユースケースでは、あまり必要な場面はありません。 2018-10-06 この古い記事に「いいね」もらったので、現時点のオススメフレームワークを追記 2017-06-15 末尾にクライアント状態管理が必要になる場面についての考察を追記 動機 flux の考え方はいいけど、type safe で immutable, rxjs ベースの素朴な Store が欲しかった redux の switch 文は何が嬉しいの？ immutable.js も無駄に大きいし... Akita (2018-10-06
Vue.jsミニハンズオン（TODOリストにアニメーションをつける） - Qiita
Vue.jsミニハンズオン（TODOリストにアニメーションをつける） AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオン第２回目です。 第１回目は「Vue.jsミニハンズオン（TODOリスト作成）」をご覧ください。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標は第１回目で作ったシンプルなTODOリストにアニメーションをつけることです。 まずはシンプルなアニメーシ
Angular,Angular CLIメモ - Qiita
フロントエンド（HTML/CSS/JavaScript）さっぱりな人にはAngular CLIは救世主である。webpackの設定とか今のところ知らなくても良い。先ずはnpm, Angular, TypeScriptのみを気にするだけで良くなる。 Angular CLIをインストールすると、ngコマンドが使えるようになる。ngコマンドでプロジェクトのひな型作成や、component, service, pipe, etc.もngコマンドで追加していけるので一定の作法に沿って開発することができる。 Angular 公式ドキュメント https://angular.io/docs/ts/latest/ Start Angular 日本語。最初に読みたい。 ng-book 2 英語。有料。Angular 4対応 The Ultimate Angular CLI Reference Guide A
angular.io Guide: Dynamic Component Loader - Qiita
これは、Angular の公式ドキュメントの Dynamic Component Loader の章 を意訳したものです｡ 駆け足で翻訳したので至らない点もありますが、あしからずご了承を｡ バージョン 4.2.6 のドキュメントをベースにしています｡ Dynamic Component Loader コンポーネントテンプレートは常に固定されている訳ではありません。アプリケーションは、実行時に新しいコンポーネントをロードする必要があります｡ このクックブックでは、ComponentFactoryResolver を使用してコンポーネントを動的に追加する方法を説明します。 このクックブックのコードの ライブサンプル/サンプルをダウンロードで、確認できます｡ Dynamic component loading 次の例は、動的広告バナーを作成する方法を示しています。 ヒーローエージェンシーは、いく
@ngrx/storeと@ngrx/effectsの使い方 - Qiita
NgRx v9に対応しました NgRxはAngularアプリケーション用の状態管理ライブラリです。 本記事では、簡単なサンプルを通して@ngrx/storeと@ngrx/effectsの使い方を紹介します。 ※ サンプルはNgRx v9系で書かれています この記事の対象者 Angularを利用している方 Angular + RxJSで状態管理をしたい方 NgRxを触ってみたい方 TL;DR NgRxはいいぞ。 https://stackblitz.com/edit/ngrx-todo-v9 NgRxの概要 NgRxはAngular用の状態管理ライブラリです。NgRxを利用するとAngularを利用したアプリケーションでReduxのような状態管理ができます。 NgRxは下図のような構成になっており、Reduxと非常によく似ています。 https://ngrx.io/guide/store よ
Angular パフォーマンスアップ最短最速マニュアル - Qiita
動機 Angular(2 or 4)で開発中のプロダクト(SPA)が重い JS の肥大化 起動が遅い パフォーマンスチューンしたい で、みんないろいろ調べると思うけど… AOT コンパイルとか module の最適化とか手段はいろいろあるのはわかった が、ブログエントリを読んで今開発中のプロダクトに自分で解決策を注入するのが大変 サマリ 対工数効果が高い部分に絞ってパフォーマンスチューンできる、「これさえやればOK！」みたいな進研ゼミ的マニュアルを作った(半ば覚え書きだけど) 平均起動時間1は84%減 4000msec超 -> 640ms2 JS ファイルサイズ3は23%減 2770kb -> 2153kb (Parsed Size) 最適化後の Gziped Size は 393.47kb 前提 この記事は、AngularClass/angular-starter を使ったプロダクトで実
angular.io Guide: Reactive Forms - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、Angular の公式ドキュメントのReactive Formsの章を意訳したものです｡所々抜け落ち、翻訳モレがありますがあしからずご了承を｡ バージョン 4.3.2 のドキュメントをベースにしています｡ Reactive Forms リアクティブフォームは、Reactive スタイルでフォームを作成するためのAngularのテクニックです。 このガイドでは、リアクティブフォームを用いて「Heroの詳細編集」フォームを作る手順を説明していきます｡ Reactive Formsライブサンプル/ダウンロードサンプルを試してみてく
angular.io Guide: LifeCycle Hooks - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは、Angular の公式ドキュメントのライフサイクルフックの章を意訳したものです｡所々抜け落ち、翻訳モレがありますがあしからずご了承を｡ バージョン 4.2.6 のドキュメントをベースにしています｡ Lifecycle Hooks コンポーネントはAngularによって管理されたライフサイクルフックを持っています。 緑色のブロック ... Component, Directive どちらでも実行可能 青色のブロック ... Component だけでのみ実行可能なライフサイクルメソッド 薄い色のブロック ... 何度でも実行される
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular Materialのインストールから使い始めまで - Qiita
