タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
ときどき「Ionicでつくったモバイルアプリ（Web技術/HTML5でつくったiOS・Androidアプリ）で出来ないことって何ですか？」と質問を受けるので簡単にまとめようと思います。 （カバー画像に意味はないです。何使おうかと思って探したところめちゃくちゃ可愛かったからこれにしました） パフォーマンスが低いという誤解とりあえず、「Web技術でアプリつくるとパフォーマンス低くて使い物にならないって聞くんだけど」というのはもうとっくに通り過ぎた昔の話です。以下の2つのレンダリングを比較してみてください。 圧倒的に後者のほうがなめらかでスムーズですよね。これはReactの過去の実装（Stack）と、4年前に刷新された「Fiberアーキテクチャ」との比較なのですが、JavaScriptのレンダリングの実装はここまで進化しています。 こちらはつい最近実装されたIonicでユーザがアニメーションを実
OutSystems、Ionicを買収
アプリケーション開発のリーダー企業2社の統合により、開発チームのパフォーマンス向上と優れたアプリケーション構築を支援 高性能アプリケーション開発のグローバルリーダーであるOutSystems（本社：ポルトガル・リスボン、CEO：Paulo Rosado）は本日、Webテクノロジーを使用したモバイル/デスクトップアプリケーションの構築プラットフォームとして広く採用されているIonicの買収を発表しました。これにより両社は今後、品質、パフォーマンス、セキュリティ、拡張性を重視したビジネスクリティカルなアプリケーションの構築、提供、継続的なアップデートにおいて変革を目指すITリーダーを支援していきます。 OutSystemsとIonicは、セキュリティと拡張性が組み込まれたエンタープライズレベルのアプリケーションに注力しており、オープンソースから高性能ローコードまで、幅広い開発アプローチを提供し
Web技術でモバイルネイティブなユーザインタフェースデザインを提供するIonic Frameworkですが、Webで配信するとユーザのデバイスはモバイルだけということはなく、ユーザはデスクトップで閲覧する可能性もあります。そこで、デスクトップに対応させるいくつかのレイアウトのヒントをご紹介します。 1. SideMenuレイアウト まず一番ベーシックなデスクトップ対応はSideMenuを利用することです。TechFeed Proなど広く採用されています。 ポイントとしてはモバイルレイアウトではハンバーガーメニューをSideMenuをあくまでメニューの配置だけに利用することが多いですが、デスクトップではSideMenu上部（左上）にロゴを配置することが重要です。 デスクトップレイアウトでは左上もしくは上部中央にロゴがあることが多く、ロゴさえあればそれっぽく見えます。（暴論 もっとシンプルに配
7月26日に、Ionicは最新バージョンであるIonic 7.2のリリースを発表しました。 このリリースでは、Button、Searchbar、およびAngularの統合が更新されます。 以下では、主な変更点について詳しく説明します。 7月26日に、Ionicは最新バージョンであるIonic 7.2のリリースを発表しました。 このリリースでは、Button、Searchbar、およびAngularの統合が更新されます。 以下では、主な変更点について詳しく説明します。 Buttonのテキストの折り返し機能の追加 Buttonのテキストが折り返されるようになり、読みやすさが向上しました。 これにより、ユーザーは長いテキストを持つボタンでもテキストが切れることなく次の行に折り返されるため、より読みやすいボタンを使用することができます。 Buttonのテキストの折り返しは、次のバージョンであるIo
何について書いた本？Ionic Frameworkという、Web技術でアプリをつくるためのフレームワークについて書いています。これを使うとHTML/CSSの豊かな表現力をそのまま使って、Webアプリはもちろんのこと、ストアから配信するiOS、Androidモバイルアプリを制作することができます。 海外だと、アメリカのゼネラル・エレクトリック（日本でいうSonyのような総合電機メーカー）やイギリスのNational Health Service（国民保険サービス）、国内だと、先日1億円調達したTechFeedが採用しているので耳にしたことがある人も少なくないと思います。 何をつくれるようになるの？書籍的には「どういうものをつくれるようになるの？」というところが重要かなと思っているので、本書でチュートリアル形式で制作していくアプリについてご紹介します。 タスクリストアプリを作ろう〜チュートリア
January 16, 2020 Announcements Engineering Animations Ionic Open Source performance UX Building efficient animations has traditionally been hard. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many of these animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of
かんたん構築！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
Today, I’m thrilled to announce Ionic Framework 5 (Magnesium)! 🎉 This release includes iOS 13 design updates, a brand new API for creating your own custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization, and more! All of these changes are made in the core of Ionic Framework, which also applies to our Angular, React, and Vue (beta)
April 15, 2024 All Announcements Product Capacitor
Watch Ionic Portals in ActionA new era of scaling mobile app development is here. See how Portals breaks down barriers and increases development velocity. Allow multiple teams to contribute to large scale mobile projects.The easy way for web teams to add new features and screens to native apps in a safe, controlled way. Each Portal is a focused experience that delivers specific features and functi
はじめに Ionic を使い Elm でもモバイルアプリっぽい UI を作りたいと思って試してみました！どのように動くか気になる方はこちらのデモを見てください。この記事では Elm 上で Ionic を使う方法、その上でできること、できないことをまとめます。 Ionic とは Ionic は、iOS や Android、Web などクロスプラットフォームでアプリを開発するための UI フレームワークです。以前は Angular でしか使うことができませんでしたが Stencil という Ionic チームが開発したフレームワークを使うことで React や Angular、Vue などでも使うことができるようになりました。どのようなコンポーネントが用意されているのか、また使い方などは UI Components - Ionic Documentation を見るとおおよそわかると思います。
#444444:root { --ion-color-primary: #0054e9; --ion-color-primary-rgb: 0,84,233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0163aa; --ion-color-secondary-rgb: 1,99,170; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; --io
この記事は、 Ionic Framework / Capacitor / Stencil Advent Calendar 2022 の2日目の記事です。 この記事は、Ionic Blogで公開された Ionic vs. React Native: Performance Comparison の翻訳記事です。記事の翻訳を快諾してくれたIonic Teamと著者のConnerに感謝します。 なお、記事内の動画はアニメーションGifとなっており、元記事のvideoと比べて画質が落ちます。きれいな映像でみたい人は、アニメーションGif下にあるリンクから元動画を閲覧ください。 IonicとReact Nativeがクロスプラットフォームアプリケーション開発のエコシステムで競合していることは周知の事実です。 ネットで検索すれば、この2つのクロスプラットフォームソリューションを比較する記事が無数にヒッ
![[翻訳] Ionic vs React Nativeでパフォーマンス比較。実際どれだけ違う？！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e1f8ac9fcd372541069b03279170080d87c6a5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwSW9uaWMlMjB2cyUyMFJlYWN0JTIwTmF0aXZlJUUzJTgxJUE3JUUzJTgzJTkxJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJTlFJUUzJTgzJUIzJUUzJTgyJUI5JUU2JUFGJTk0JUU4JUJDJTgzJUUzJTgwJTgyJUU1JUFFJTlGJUU5JTlBJTlCJUUzJTgxJUE5JUUzJTgyJThDJUUzJTgxJUEwJUUzJTgxJTkxJUU5JTgxJTk1JUUzJTgxJTg2JUVGJUJDJTlGJUVGJUJDJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wYzgwYzJhZGQ1ZmFjMjNiOWUyNmQ4MTEwZWU4MDA3OA%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDByZGxhYm8mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWUwZGY2NmFmMDJmZTQxMjhmNWJiYWQ0MTdjYmMxMzk5%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Dfab9f03f0e05f68ac96236025a2ec3a3)
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
IonicがShadow Partsでカスタマイズを改善
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
この記事は、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で表示されませんでした。どうやらし
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
Web技術/Ionic Frameworkでつくったモバイルアプリにできないたったひとつのこと。｜榊原昌彦
Ionic Frameworkを用いたデスクトップレイアウトを考える - Qiita
Ionic 7.2リリース！Buttonのテキストが折り返される新機能が追加
チュートリアルでこんなアプリがつくれるように！｜WebでモバイルアプリつくるIonic本を出版します｜榊原昌彦
Introducing Ionic Animations
Announcing Ionic 5!
Capacitor Archives - Ionic Blog
Micro Frontend Architecture for Mobile Web Apps - Ionic Portals
Elm と Ionic でモバイルアプリっぽい UI を作る - Qiita
カラージェネレーター | Ionic日本語ドキュメンテーション
[翻訳] Ionic vs React Nativeでパフォーマンス比較。実際どれだけ違う？！ - Qiita
Ionic PortalsでWebアプリのiOS/Androidネイティブコードへの統合が容易に
Ionic4でPWA対応してみたので、注意点を２つ述べる - Qiita
www.pixiv.net
trenddisneyfreedom.com
anond.hatelabo.jp
ameblo.jp/makoatu-kateisaien-2022
dswiipspwikips3.jp
matomedane.jp