SEO対策やページ表示速度アップに有効！「Angular」のサーバーサイドレンダリング
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、2018年10月にリリースされたAngular 7の新機能を紹介しました。今回は、サーバー側でAngularのWebページを生成するサーバーサイドレンダリングについて、利点や実装方法、機能制限などを紹介していきます。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 Angularでは、サーバーからダウンロードされたJavaScriptをWebブラウザー（クライアントサイド）で実行して、Webページを描画します。この仕組みは、動的なW
Angular CDKのPortalを使ったローディングラッパーの実装 - 余白
今回はAngular CDK(Component Dev Kit)の Portal 機能を使って、ローディングラッパーコンポーネントを実装する例の紹介です。 Angularの基本的な書き方はわかっている前提の内容になります。 ローディングラッパーとは次のようなテンプレートで、ローディング中はローディング表示を、ローディングが終わったら子要素を表示するようなコンポーネントを指しています。 たとえばこのようなテンプレートです。 <mat-card> <loading-wrapper [loading]="isLoading$ | async"> <div>Done!</div> </loading-wrapper> </mat-card> このように、ローディング状態によってビューが差し替わります。 CdkPortalの使い方 @angular/cdk/portalからインポートできるPort
Angularで巨大なライブラリを動的に読み込む - 余白
オリジナルはこちら medium.com 基本的にコードサンプルなどはオリジナルを参照してください。この記事では込み入った事情の部分だけを日本語で補足します。 tsconfig.jsonの準備 tsconfig.jsonの module 設定は、TypeScript内で記述したモジュールのimport/exportをどのように解決するかを指定します。 Angular CLIのデフォルトでは module: es2015 を指定しているので、静的な import ... from はそのまま残しますが、import() はサポートしていません。 tsconfig.jsonで module: esnext を指定すると、import() をJavaScriptにそのまま残すようになります。 import() がサポートされたブラウザ上であれば、webpackを通さなくてもそのままブラウザ上でモ
README.mdに動的コンテンツを埋め込む、あるいはImage via Functionというアプローチ - 余白
突然ですが、 README.md に動的なコンテンツを埋め込みたいと思ったことはないですか？僕はあります。 具体的には、リポジトリのコントリビューターをREADME.mdに埋め込みたいという願望がありました。 つまりこういうことです。 しかし毎回CIなどでREADME.mdを編集するのはセットアップが面倒です。 <contributors-list> みたいなCustom Elementsが使えたらきれいな世界だなあと思ったのですが、肝心のscriptタグが動かないのでそれは無理です。 ということで、頼れるのは 画像 ということになりました。 Image via Function README.mdに埋め込めて、なおかつ動的なコンテンツを扱えるのは画像のURL展開だけなので、つまりコントリビューターリストを画像化するHTTPエンドポイントを用意し、そのURLをREADME.mdに埋め込めば
Angularで文字列によって表示を切り替えるには？（i18nSelect）
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
Angular6 で scss を有効にする方法 - Qiita
はじめに つい先日、ついに Angular6 正式版がリリースされました 🎉 ただ、Angular-CLI の設定ファイルである .angular-cli.json が angular.json へと変更され、それに伴い大幅な仕様変更が入りました。 本記事では、angular.json のざっくりとした使い方を、最もポピュラーである 「scss を有効化する」 というケースを想定して紹介してみます。 angular.json で scss を有効にする angular.json の仕様 を見てみると、angular.json では projects プロパティにプロジェクトを設定し、そのプロジェクトの schematics プロパティに @schematics/angular:component や @schematics/angular:directive というキー名で設定したい項目
AngularでビューにHTML文書を「バインド」するには？（Property Binding）
※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。
AngularElementsでAMP htmlを動的にロードする - Qiita
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。 ユースケースは1年前の記事でごちゃごちゃ書きましたが、相変わらず2つパラレルに走っています。 Angularアプリ内でElementsを使う方法 公式ドキュメントのサンプルが現在このユースケースです。Angularアプリ内で動的コンポーネントをどうやって実現するかという方向です。サンプルでは、AngularComponentでそのままやる方法と、customElementを用いる方法の2つが併記されています。 「サンプル: ポップアップサービス」 単発のcustomElements
angular.jsonの中身 - Qiita
angular-cli 7.1.2で確認しました。 ng newで生成されるプロジェクトのangular.jsonの中身について、よく使う項目の調査です。 ルートオブジェクト $schema このファイルに関するJSON Schemaの定義ファイル "./node_modules/@angular/cli/lib/config/schema.json" 固定 https://github.com/angular/angular-cli/blob/master/packages/angular/cli/lib/config/schema.json version "1" 固定 cli 生成時にはない。 ngコマンド全般に対するデフォルトオプションを設定できる。 schematics 生成時にはない。 generate系のコマンドライン引数のデフォルトを設定できる。 また、ngコマンドで生成す
AngularのPWA（Progressive Web Apps）機能でWebプッシュ通知を実装
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はネイティブアプリのような使い勝手のWebページを実現するPWA（Progressive Web Apps）の利用法を紹介しましたが、今回はPWAならではの機能と言える、Webプッシュ通知をAngularで実装する方法を説明します。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 PWA（Progressive Web Apps）は、まるでネイティブアプリのような使い勝手を提供するWebページです。前回記事では、「Web App Man
NgRx MockStoreについて - Qiita
この記事は Angular Advent Calendar 2018 の 18日目の記事です。 今回は最近NgRxの新機能として追加されたMockStoreについて書きたいと思います。 NgRxの基本的な使い方については14日目でkiita312さんが書かれていますので、ぜひそちらをご参考ください。 Ngrxをこれから始める人への入門ガイド MockStoreとは MockStoreとは、Storeを使ったComponentでのテストを簡単に行えるようにする為のモジュールです。 10月末にmasterにマージされ、v7.0.0でリリース予定となりました。 まだドキュメントが作成されておらずngrx.ioにも記載がないのですが、機能自体はstableとなっています。 非常に便利なので、v7(beta)を使用している方はこの記事を参考にぜひ使い始めてみてください。 残念ながらv7は現在(201
Angularで同じ絵文字をクリックするだけのクソゲーを作りました - Qiita
この記事は Angular Advent Calendar 2018 の 9 日目の記事です。 クソアプリ Advent Calendarでやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。 作ったもの Firebase Hostingにデプロイしてあるので、「 same-emoji 」から遊べます。 (PCのブラウザから遊ぶ際はビューポートをSPサイズにすることを推奨です...) 2つ1組でランダムに表示される絵文字をタップして消し続け、タイムを競うという単純なゲーム(クソゲー)です。 画面構成もシンプルで、次の画面で構成されています。 スタート画面 レベル選択画面 ゲームプレイ画面 ゲーム結果画面 リポジトリ https://github.com/daikiojm/same-emoji モチベーション Angular MokuMoku Ni
ComponentDevKit(DragAndDrop)を使ってみる - Qiita
はじめに この記事はAngular Advent Calendar 2018の8日目の記事です Angular7がリリースされてComponentDevKitにDragAndDropが入ってきました ということで簡単なTODOアプリを作ってみます CDKとは 簡単に言うと一般的なWebアプリケーションで使うUIを提供してくれるライブラリ群です 少ないコード記述量・短時間で必要な機能を構築できます Angular公式が作っているので安心感がありますね 動作環境 $ npx ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | |
データ可視化への一歩目 〜Angular + Chart.js〜 - Qiita
この記事は Angular Advent Calendar 2018 の 5 日目の記事です。 はじめに IoT や機械学習などデータに触れる機会が多くなったいま、データ収集が積極的に行われています。 当然データを収集するだけでは宝の持ち腐れになってしまいます。 そのデータから どの部分を抽出して どのように加工して どこをどう利用するのか どんな知見を得るのか それによって、持っているデータの価値は大きく変わります。 さらに、得られたデータや知見をどう見せるかという伝え方にも価値があります。 ここではデータをうまく表現する助けとなるように、Angular と Chart.js を使ってデータを可視化する方法を紹介します。 こんな方へ 全体のフレームワークは Angular で、データの可視化ツールを使いたい Angular はチュートリアル程度はわかる なにかしらのデータを試しに可視化し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular Materialでローディング（処理中）を実装する - Qiita
インターセプターによる介入 - Angular After Tutorial
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
WINDIIテック
GitHub - froala/angular-froala-wysiwyg: Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Angular Material And Angular 6 — Material Design For Angular