IonicとAngularの最新スタイルへの移行とPageSpeed Insightsによる測定 - Qiita
背景 私は現在、AAHubとというウェブサイトを運営しています。このサイトはIonicとAngularを用いて構築されています。 これまでAngularとIonicのフレームワークのバージョンアップには対応してきましたが、スタンドアロンコンポーネントや新しい制御フロー構文への対応は行っていませんでした。 そこで、これらの技術を取り入れることを計画しています。それに伴い、PageSpeed Insightsを使用してウェブサイトのスコアやバンドルサイズの変化を追跡し、パフォーマンスの改善を図りたいと考えています。 サイトの技術スタックについて @ionic/angular: v7.5 Angular 17.0.3 Firebase 10.7.0 @angular/fire: 17.0.0-next.0 Cloudflare Pages Before→After Before スコア：35点
[Amplify�, Angular ] 1時間でつくる認証付きチャットアプリ
最初に AWS Amplifyと Angular（今回はionic フレームワーク）を使用して、簡易的な認証付きチャットツールを作成します。 想定する読者層 フロントエンドエンジニア 今回の想定する要件 リアルタイムチャットツールの作成 ユーザーの作成 ログインしていないときはログイン画面に遷移させる 今回作成画面 画面遷移図 成果物 相互にチャットのやりとりが可能となる 作成したソース Amplifyとは Amplify とはサーバーレスなバックエンドをセットアップするための CLI、フロントエンドで利用できる UI コンポーネント、CI/CD やホスティングのためのコンソールを含む Web およびモバイルアプリ開発のためのフレームワーク 引用元：https://aws.amazon.com/jp/blogs/startup/techblog-3reasons-amplify/ ioni
![[Amplify�, Angular ] 1時間でつくる認証付きチャットアプリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a4531c10960c618a56ebaa979e3310d29cf7a4e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--yy5KH6FF--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAmplify%252508%25252C%252520%252520Angular%252520%25255D%2525201%2525E6%252599%252582%2525E9%252596%252593%2525E3%252581%2525A7%2525E3%252581%2525A4%2525E3%252581%25258F%2525E3%252582%25258B%2525E8%2525AA%25258D%2525E8%2525A8%2525BC%2525E4%2525BB%252598%2525E3%252581%25258D%2525E3%252583%252581%2525E3%252583%2525A3%2525E3%252583%252583%2525E3%252583%252588%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ATaku%252520Nakagawa%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzljZmFmOWVmNDIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
かんたん構築！Capacitor x Ionicで作るクロスプラットフォームWebアプリ | DevelopersIO
CapacitorははWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。本記事では、Ionic Frameworkを使って作成したWebアプリをCapacitorでクロスプラットフォーム化する手順を解説します。 Capacitorとは CapacitorはWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。 ネイティブアプリのようなUIが表現できるIonicフレームワークをベースとしたWebアプリをiOSアプリやAndroidアプリとしても利用できるようにするためにフレームワークです *1。Webアプリからネイティブの機能（API）を利用する（ブリッジさせる）ことができるため、Webアプリ、iOSアプリ、Androidアプリをワンソースにまとめることができます。 クロスプラットフォーム : iOS, Android, Electro
Ionic4でPWA対応してみたので、注意点を２つ述べる - Qiita
この記事は、Ionic Frameworkアドベントカレンダー3日目の記事です。 個人でIonicを使って開発している、Googleカレンダーと連携する日程調整アプリ「アイテマス」をPWA対応しました。その際に、はまったり忘れがちな設定が２つあるので、それらについてまとめます。 Ionicのバージョンは下記のとおりです。 Ionic CLI : 5.4.5 (***) Ionic Framework : @ionic/angular 4.11.2 基本的に公式のドキュメント通りに行えばとりあえずPWA化します。その他の細かい調整はGoogle Chromeの開発者ツールを使って行ったらOKです（Lighthouseというよさげなツールもあるみたいですね）。 スプラッシュスクリーン対応 こういうGeneratorを使っておけば問題なくいけると思いきや、iOSで表示されませんでした。どうやらし
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！｜リレーションデザイン研究所
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！ 「a spiritual successor to Apache Cordova and Adobe PhoneGap」を目指して、Ionic teamがCapacitorをリリースしました。Cordovaの後継としてクロスプラットフォーム開発が大きく変わるので、ぜひご利用ください！（本記事は2018年8月執筆記事ですので、一部情報が古い場合があります。ご了承ください）。 Capacitorとは HTMP5 APPSを、PWA、iOSアプリ／Androidアプリ（ハイブリッドアプリ）、Electron（デスクトップアプリ）に変換するためのツールです。厳密にいえば、適切にラップや分岐処理をしてるのですが、まぁそこらへんの「どう動いて
TechFeed 7.8.0リリース！パフォーマンスの大幅な向上とリファクタリング
こんにちは、TechFeedの白石です。 大変お待たせしました！前回の7.7リリースから実に2ヶ月が経過してしまいましたが、ようやく新バージョンのリリースにこぎつけました。 ・Web版 ・Android版 ・iOS版 今回のリリース7.8の目玉は、とにかくパフォーマンスです。起動速度、データ読み込み速度、スクロールの反応など、全般的な速度が改善しました。Androidユーザーの方は、起動速度が今までに比べて半分くらいになっていると思いますし、iOSユーザーの方は、データの初期表示がこれまでに比べて数秒早まりました。 ほか、細かいバグフィックスが（ほんとに）多数含まれているので、必ず早めのアップデートをお願いしますね。 技術者向けの話題TechFeedのユーザーはほとんどがエンジニアだと思うので、今回のリリースについて、技術的な側面も述べさせていただきます。今回のリリースでは、以下のようなこ
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） | HTML5Experts.jp
Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ
Web制作者が知っておいた方が良いと思う、HTML5ハイブリッドアプリのフレームワークについて | バンクーバーのうぇぶ屋
ここのところ、バンクーバーにある専門学校の方とお話することが多いのですが、WEBデザイナーの専門学校なんかの授業でもハイブリッドアプリの科目が取り扱われているみたいですね。最近はWEBデザイナーに必要なスキルの一つとしても、HTML5のハイブリッドアプリ開発は大事になってきてるんじゃないかなと思ったので、これから色々勉強してみようと思っている方向けに最初のとっかかり記事を情報共有として記事を書かせて頂ければと思います。 僕自身もアプリ制作専門で活動したことは無いのですが、最近は「WEBサイト作りましょう」で、モバイルの話が上がる事はほぼ絶対になってきていますよね。で、WEBという媒体を使って何かを提案する姿がWEBデザイナーである以上、そうやってフィールドがモバイルにも派生しているのであればアプリ面の知識も「全く知りませんでした」は正直避けたい所になっていくのではと思っています。 というわ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ionic PortalsでWebアプリのiOS/Androidネイティブコードへの統合が容易に
Qrunch（クランチ）
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門