AngularElementsでAMP htmlを動的にロードする - Qiita
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。 ユースケースは1年前の記事でごちゃごちゃ書きましたが、相変わらず2つパラレルに走っています。 Angularアプリ内でElementsを使う方法 公式ドキュメントのサンプルが現在このユースケースです。Angularアプリ内で動的コンポーネントをどうやって実現するかという方向です。サンプルでは、AngularComponentでそのままやる方法と、customElementを用いる方法の2つが併記されています。 「サンプル: ポップアップサービス」 単発のcustomElements
@angular/pwaとpush通知について - Qiita
はじめに 今だにAngularPWA関連でポチポチいいね貰うのでアップデート記事を書いておきます。 @angular/pwaについて push通知について @angular/pwaについて Angular6で投入されたng addの話 AngularCLIはschematicsというコード生成ツールを用いてcomponentやserviceの生成をしてくれます。ng generate component hogeとかですね。v6で追加されたng addでは、そのschematicsを用いてnpm packageのインストールからNgModuleなどへのコード追加をやってくれます。 @angular/pwaはng add専用のコード生成補助パッケージです 何をやってくれるのか npm i @angular/service-workerを肩代わりして、さらにconfigファイルやngModul
Material Iconに好きなフォントアイコンを追加する - Qiita
Material Iconにビッタリくるようなものがないならカスタムアイコンを追加しよう。 どこかのライブラリにいかしたものがあるならそれでいいし、自分で作ったものでもよい。 追加したいフォントファイルをどこかに置く 例えばこれを追加することにします。 https://materialdesignicons.com/ npm installしたらsvgファイルとかttfファイルとか手に入ります。npmインストールするんならnode_modules指定でいいと思うんだけど、容量削減のために加工入れるならassetフォルダに置けばいいし、CDNから引っ張りつつservice workerのキャッシュに載せるならngsw-config.jsonのurlsに記載すればよい。 Angularの中で追加する MatIconRegistryで追加登録できます。個人的にはMaterialインポート用のmo
AppShellモデルを適用してmain.bundleのサイズ削減する - Qiita
試したこと AppShellモデルでモジュール構成を組み直す。1 そのために共有リソースをCoreModuleとSharedModuleに分割する。2 main.bundleのファイルサイズ削減を計測する。 環境 Angular:5.2.6 Angular-CLI:1.7.1 モジュール構成の戦略 AppModuleをAppShellモデルにする AppShellモデルのために、AppModuleは以下の役目だけを持たせます。 application shell 各content（LazyLoadingModule）へのルーティング DIコンテナの最上位ルート これにより初回ロードに必要なmain.bundleは、AppShellだけになります。 アプリ全体だと次のようになります。 各contentはLazyLoadingModuleへ回して、できるだけ共有リソースもAppModuleから
AngularServiceWorkerでユーザーアップロード画像やXHRのキャッシュを行う - Qiita
この記事は、「3分クッキング ServiceWorkerで阿部寛さんを超える」の続きです。 ng buildでServiceWorkerのリソースキャッシュが簡単にできることを説明しましたが、実際のキャッシュ戦略を考えるといろいろ不足があります。 ユーザーアップロード画像 CDNに配置しているコンテンツ XHRのレスポンス内容 これらはng buildでは生成されないものです。そのための設定方法を紹介します。 ngsw-config.json @angular/service-workerでは、ServiceWorkerのスクリプト自体はngsw-worker.jsになります。Angularのアプリ開発者はjsonとして用意されているインターフェースng-config.jsonを設定する形になります。 ng-config.jsonの設定項目の詳細は、Angularドキュメント（日本語版）の
AngularアプリをPWAにする方法 - Qiita
Angularアプリで必要になる項目 個々のアプリ実装状況に依るところもありますが、Angular-CLIで作成している標準的なアプリなら、大きく3つの実装機能になるはずです。 ServiceWorkerを導入する "Register a service worker" "Respond with a 200 when offline" "User can be prompted to install the web app"（※serviceWorkerも必要になります。） WebManifestを作る "User can be prompted to install the web app" "Configured for a custom splash screen" "Address bar matches brand colors" NoScript環境でのviewを用意する "
3分クッキング ServiceWorkerで阿部寛さんを超える - Qiita
(この記事は3分で読めます) ServiceWorkerは、ブラウザネットワークのプロキシであり、ブラウザの通信をインターセプトすることが主な目的です。 ServiceWorkerは、Push通知のためだけではありません。昨年秋に日経新聞1やdev.toで話題になったServiceWorkerは、リソースキャッシュの用途です。 既存のAngularアプリケーションにこのリソースキャッシュを導入します。 TL;DL ServiceWorkerのリソースキャッシュにフォーカスする。 既存のAngularアプリケーションを4ステップで調理する。 阿部寛さんのホームページ2と実食勝負する。 味の秘訣を解説する レシピ Angular-CLIで作成されたプロジェクト ×1 Angular5.0.0~ ×1 Angular-CLI1.6.0~3 ×1 chrome49〜 ×1 (~00:30) Ser
AngularにWebComponentsがやって来るヤァ!ヤァ!ヤァ!〜@angular/elementsのファーストインプレッション〜 - Qiita
AngularにWebComponentsがやって来るヤァ!ヤァ!ヤァ!〜@angular/elementsのファーストインプレッション〜JavaScriptAngularWebComponents タイトルは「ビートルズがやって来るヤァ!ヤァ!ヤァ!」のパロディです。 @angular/elementsとは何か？ @angular/elementsは、AngularコンポーネントをWeb Componentsにするためのパッケージです。9/29にPullRequestが起こされ10/28にLGTMが出てlabsブランチに移されました。まだexperimental=実験ステータスのできたてほやほや新機能です。 これは言い訳なんですが、@angular/elementsの方向性もまだ流動的ですし、筆者もまだ全然知識が追いついてません。現状わかる範囲でまとめましたが、ツッコミや訂正ありましたら
HttpInterceptorのユースケース - Qiita
v4.3で追加されたHttpClientの中で、特にHttpInterceptorについて、ユースケースを挙げていきます。 対象はHttpClientの初級〜中級レベルの想定です。やるよねえからやるかもしれないなあくらいを取り上げたつもりです。また、できないよというのも拾ってみました。 HttpInterceptorについて HttpInterceptorは、appが発行する全てのhttpリクエストやレスポンスに処理を追加できる仕組みです。 angularJSでもあったようなので古参のかたはお馴染みのようです。自分のような2以降に入った人にとっての説明としては、概念では、javaで言うAOPや、railsのcallback、reduxのmiddlewareなどが近いです。仕組みはそれぞれ違いますが、フックでしょ、フック。 HttpInterceptor、およびHttpClientの基本につ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
