タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Ionic x Vueでモバイル向けWebアプリを開発！ Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 Ionicは主にモバイルアプリ向けのオープンソースのUIツールキットのことを指しますが、IonicにはIonic Native（Cordovaを利用したネイティブサポート）、Studio（GUIソフトウェア）、Mobile DevOps（CI/CD）も含まれており Webフロントの技術（HTML/JS/CSS）を活用したモバイルアプリ開発の統合フレームワーク と言えます。 UIツールキットとしては、非常に綺麗なコンポーネントが用意されており、Webアプリの中にシンプルかつ簡単に用いることができます。 Ionicは2013年の登場から徐々にバージョンアップされており、現
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうな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でユーザがアニメーションを実
はじめに Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 今回は無限スクロールの使い方を解説します。 事前準備 こちらのブログ を通して作成したプロジェクトをベースに進めます。 無限スクロールとは モバイルアプリでリスト表示を実装する際、差分読み込みを行うことで無限にスクロールできるような振る舞いを持たせることがよくあります。具体的には以下の順番で処理します。 まず20件読み込む（1画面に収まる程度） ユーザーがリストを一番下までスクロールする 一番下までスクロールしたことをハンドリングする 追加で10件読み込む（その際には一番下にローディングを表示する） 2-4 を繰り返す 全て読み込み終わったら完了 このような処理をiOSやAndroidで実現したい場合は、頑張って実
![[Ionic x Vue] リストを無限スクロールさせる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/39c353ad549a69af9884a2459946672b7f9dde43/height=288;version=1;width=512/https%3A%2F%2Fd1tlzifd8jdoy4.cloudfront.net%2Fwp-content%2Fuploads%2F2019%2F06%2Fionic-eyecatch.png)
October 14, 2019 Announcements Capacitor Ionic react Today we’re thrilled to announce the general availability of Ionic React, a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. All with one code base, standard React development patterns, and using the standard react-dom library and huge ecosystem around the w
OutSystems、Ionicを買収
アプリケーション開発のリーダー企業2社の統合により、開発チームのパフォーマンス向上と優れたアプリケーション構築を支援 高性能アプリケーション開発のグローバルリーダーであるOutSystems（本社：ポルトガル・リスボン、CEO：Paulo Rosado）は本日、Webテクノロジーを使用したモバイル/デスクトップアプリケーションの構築プラットフォームとして広く採用されているIonicの買収を発表しました。これにより両社は今後、品質、パフォーマンス、セキュリティ、拡張性を重視したビジネスクリティカルなアプリケーションの構築、提供、継続的なアップデートにおいて変革を目指すITリーダーを支援していきます。 OutSystemsとIonicは、セキュリティと拡張性が組み込まれたエンタープライズレベルのアプリケーションに注力しており、オープンソースから高性能ローコードまで、幅広い開発アプローチを提供し
Web技術でモバイルネイティブなユーザインタフェースデザインを提供するIonic Frameworkですが、Webで配信するとユーザのデバイスはモバイルだけということはなく、ユーザはデスクトップで閲覧する可能性もあります。そこで、デスクトップに対応させるいくつかのレイアウトのヒントをご紹介します。 1. SideMenuレイアウト まず一番ベーシックなデスクトップ対応はSideMenuを利用することです。TechFeed Proなど広く採用されています。 ポイントとしてはモバイルレイアウトではハンバーガーメニューをSideMenuをあくまでメニューの配置だけに利用することが多いですが、デスクトップではSideMenu上部（左上）にロゴを配置することが重要です。 デスクトップレイアウトでは左上もしくは上部中央にロゴがあることが多く、ロゴさえあればそれっぽく見えます。（暴論 もっとシンプルに配
はじめに Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 今回はナビゲーションの使い方を解説します。 事前準備 こちらのブログ を通して作成したプロジェクトをベースに進めます。 ナビゲーションとは ナビゲーションは、画面を積み重ねる（スタックする）ような遷移方法を指します。iOSアプリで言うところのNavigationControllerです。 ion-nav - Ionic Documentation 次のような画面遷移をします。 Ionicでは、このスタック型画面遷移に加えて、ルーティングも行われます。 ナビゲーションを実装する Home.vue に About.vue に遷移するボタンを置き、そのクリックイベントで画面遷移を行います。 Home.vue <templ
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
はじめに Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 今回はメニューの使い方を解説します。 事前準備 こちらのブログ を通して作成したプロジェクトをベースに進めます。 メニューとは メニューは、画面全体をスライドする形で表示する画面のことを指します。Androidでは「ドロワーメニュー」という名前で使われていることから、ドロワーメニューという名前で一般化してきています。ハンバーガーメニューとも言います。 ion-menu - Ionic Framework 日本語ドキュメンテーション 次のように表示されます。 メニューを実装する まずメニューは画面全体に関わるコンポーネントなので、画面コンポーネントより上の階層に配置する必要があります。ということで App.vue に
はじめに Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。 先日その紹介ブログを書きました。 Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう！ もっと触ってみたくなったので、色々と触っていきたいと思います。まずはよくある「アラートを表示する」をやってみました。 事前準備 こちらのブログ を通して作成したプロジェクトをベースに進めます。 アラートを表示する Home.vue にアラートを表示するボタンを置き、そのクリックイベントでアラートを実際に表示します。 Home.vue <template> <div class="ion-page"> <ion-header> <ion-toolbar> <ion-title>Hello World</ion-t
May 16, 2019 Announcements Engineering Stencil machine learning Open Source performance stencil web components July 2019 Update: Stencil One is here! Today, we’re thrilled to announce the release of Stencil 1.0 beta (what we’re calling Stencil One), featuring an all-new compiler architecture. It is not only able to better optimize your components, but is designed to be completely future-proof. Wha
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)
最小構成で始める@ionic/react - Qiita
はじめに 今年のはじめにIonic 4がリリースされました。 Ionic 4では、UIコンポーネントがWebComponentsで再実装されたことにより、ReactやVueでもIonicが利用できるようにななっています。 ということで、早速React版の @ionic/react を動かしてみたいと思います。 （バージョン4.8.0-rc.0で動作確認しました。） @ionic/react を利用するためにはWebpackでいくつかの設定が必要です。 Ionic CLIやcreate-react-appを利用することで、それらが設定済みの状態で@ionic/reactの利用ができます。 （どちらも内部的には react-scripts を使用しています。） しかし、それらの環境では不必要なパッケージもたくさん導入されてしまうでしょう。 ビルド環境を自分でカスタマイズしたい人や、既存のRea
フルスタック開発者のためのBallerina: バックエンドAPI開発ガイド この記事では、REST API開発のためのプログラミング言語"Ballerina"の直感的な構文について解説します。さらに、認証や承認、OpenAPIツール、可観測性、SQL/NoSQLクライアントライブラリなど、重要な言語機能についても論じます。記事を読み終えれば、Ballerinaが次のバックエンドAPI開発の有力な候補である理由がよく理解できるでしょう。
April 4, 2024 All Perspectives Capacitor native vite
Replacing 8 apps with 1 superappA major logistics company was dealing with multiple workforce applications and onboarding confusion. Learn how they decided to build a superapp, what was required to make this change happen, and how they partnered with Ionic for this solution. Allow multiple teams to contribute to large scale mobile projects.The easy way for web teams to add new features and screens
#f5f6f9:root { --ion-color-primary: #3880ff; --ion-color-primary-rgb: 56,128,255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #3171e0; --ion-color-primary-tint: #4c8dff; --ion-color-secondary: #5260ff; --ion-color-secondary-rgb: 82,96,255; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; -
はじめに Ionic を使い Elm でもモバイルアプリっぽい UI を作りたいと思って試してみました！どのように動くか気になる方はこちらのデモを見てください。この記事では Elm 上で Ionic を使う方法、その上でできること、できないことをまとめます。 Ionic とは Ionic は、iOS や Android、Web などクロスプラットフォームでアプリを開発するための UI フレームワークです。以前は Angular でしか使うことができませんでしたが Stencil という Ionic チームが開発したフレームワークを使うことで React や Angular、Vue などでも使うことができるようになりました。どのようなコンポーネントが用意されているのか、また使い方などは UI Components - Ionic Documentation を見るとおおよそわかると思います。
この記事は、 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/c3126b12a99fdc63a33afe906a0db871795f16d1/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-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwSW9uaWMlMjB2cyUyMFJlYWN0JTIwTmF0aXZlJUUzJTgxJUE3JUUzJTgzJTkxJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJTlFJUUzJTgzJUIzJUUzJTgyJUI5JUU2JUFGJTk0JUU4JUJDJTgzJUUzJTgwJTgyJUU1JUFFJTlGJUU5JTlBJTlCJUUzJTgxJUE5JUUzJTgyJThDJUUzJTgxJUEwJUUzJTgxJTkxJUU5JTgxJTk1JUUzJTgxJTg2JUVGJUJDJTlGJUVGJUJDJTgxJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1jYTY0YzI5NDg0YWJmY2JmZDVjOGEyYmIwNmM1Yjg2Yw%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwcmRsYWJvJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yZjFmYjhkMDE4YjU5MDUyZGI2ZDU0OGI3ODBjNDRkZQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2efcbd5393158123126a017fc681b687)
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でカスタマイズを改善
フルスタック開発者のためのBallerina: バックエンドAPI開発ガイド この記事では、REST API開発のためのプログラミング言語"Ballerina"の直感的な構文について解説します。さらに、認証や承認、OpenAPIツール、可観測性、SQL/NoSQLクライアントライブラリなど、重要な言語機能についても論じます。記事を読み終えれば、Ballerinaが次のバックエンドAPI開発の有力な候補である理由がよく理解できるでしょう。
この記事は、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 x Vueでモバイル向けWebアプリの爆速開発を始めよう！ | DevelopersIO
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
Web技術/Ionic Frameworkでつくったモバイルアプリにできないたったひとつのこと。｜榊原昌彦
[Ionic x Vue] リストを無限スクロールさせる | DevelopersIO
Announcing Ionic React - Ionic Blog
Ionic Frameworkを用いたデスクトップレイアウトを考える - Qiita
[Ionic x Vue] ナビゲーションによる画面遷移を作る | DevelopersIO
Ionic 7.2リリース！Buttonのテキストが折り返される新機能が追加
チュートリアルでこんなアプリがつくれるように！｜WebでモバイルアプリつくるIonic本を出版します｜榊原昌彦
Introducing Ionic Animations - Ionic Blog
[Ionic x Vue] メニュー（ドロワーメニュー）を表示する | DevelopersIO
[Ionic x VueでWebアプリ開発] アラートを表示する | DevelopersIO
Announcing Stencil One: Beta - Ionic Blog
Announcing Ionic 5! - Ionic Blog
Ionic Capacitor - JavaScriptによるネイティブアプリケーションの開発
Capacitor Archives - Ionic Blog
Superapp SDK - Ionic Portals
カラージェネレーター | Ionic日本語ドキュメンテーション
Elm と Ionic でモバイルアプリっぽい UI を作る - Qiita
[翻訳] Ionic vs React Nativeでパフォーマンス比較。実際どれだけ違う？！ - Qiita
Ionic PortalsでWebアプリのiOS/Androidネイティブコードへの統合が容易に
Ionic4でPWA対応してみたので、注意点を２つ述べる - Qiita
togetter.com
www.hanacame.com
www.youtube.com
frennn.hatenadiary.com
yayoi0.st.coresv.net
kaigai-fxtrading.com