Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
Ionic 2 から 4 への、この2年間の進化を振り返る｜リレーションデザイン研究所
「Angular 2から6までの主要な進化をまとめた記事を読みたい」とツイートしたら、Angularの強い人にIonic情報とのトレードを提案いただいたので、Ionic 2から4までのIonicとその周辺ライブラリの進化を時系列にまとめていきます。 Angular v2からv6までの変化をまとめてみた とあわせてご覧ください。 なお、Ionicって何よ？という方は少し古い記事となるのですが「Angular 2を使うならUIはコレで！Ionic 2ことはじめ」をご参考ください。 Ionic v2 2016年2月11日 私のIonicをプロダクト採用したレポジトリをみると、この日の angular2@2.0.0-beta.2 / ionic-framework@2.0.0-alpha.57 が最古のコミットになっておりました。技術調査はもうちょっと前からしていましたが、本記事のスタートラインは
WebはHTML/CSSから学びはじめるべきか｜HTMLも知らない人にIonic本をしてもらった知見 - Qiita
10年以上前からWebの勉強は「まずHTMLを覚えて、フォントサイズをかえて『すごーい』」という学習がメジャーですが、それって本当に正しいのかなという記事です。 前置き ー Ionic Frameworkとは 「Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉」が発売されます。 IonicはHTML5でモバイルアプリをつくるためのプラットフォームです。 1ソースでWeb/iOS/Androidアプリがつくれることから、ドワンゴ、pixiv、Exciteといった有名企業も採用しており、「Webアプリをつくって人気がでたら、そのままiOSアプリもリリース！」ができることから、Webの価値を押し上げると言われています。モバイルネイティブなUIデザインすてきですよ。 本題 で、本書を執筆した動機は「HTML書けたらアプリつくることができるのに、それを知らない方が
PWAに決済を入れてみた
PWA内でカード決済を行うと既存のApple PayやAndroid Payなどを通さないで決済できるので、アプリ内課金をしてもAppleに30%手数料を支払うことなく、決済会社への手数料だけで決済を行うことができるようになります。 PWAから決済できる方法をいくつか紹介します。 Payment Request API Googleが開発しているPayment Request APIを使うことでPWA内でもスムーズに決済を行うことが可能です。 Googleの詳細記事 https://developers.google.com/web/updates/2016/07/payment-request?hl=ja Payment Request APIはAndroid 向けChromeだけでしか利用することができなく、iOSのPWAではまだ対応していません。 Stripeを使った決済デモ Str
Ionic2 + FirebaseでTwitterログインの実装
開発準備 ※今回の開発には事前に以下のアカウントが必要になります。 GoogleアカウントTwitterアカウント Ionicプロジェクトの作成 まず初めにIonicプロジェクトを作成します。 $ ionic start SocialLogin –v2 今回はテンプレート指定なしなので、デフォルトでtabテンプレートが選ばれます。 プロジェクトの作成が終わったらIonicでFirebase使いやすくするangularfire2と言うプラグインを入れます。 $ npm install firebase angularfire2 –save ここまで終わったら一旦Ionic側の作業は終了です。 次はFirebaseプロジェクトを作成していきます。 Firebaseプロジェクトの作成 Firebaseコンソールを開きます。 プロジェクトの追加をクリックするとプロジェクト作成のダイアログが表示され
Ionic-WP.com
WordPressでSPAをつくるオープンソース Ionic-WP.comは、WordPressのREST APIを通してデータを取得してきて表示するSPA（Single Page Application）テーマです。 デモはこちらをご覧ください。 SPAはGoogleが推進している「ウェブのアプリ化」のための技術です。 SPAにすることでTwitter LightのようにWebページをアプリとして扱えたり、オフラインでも表示できるようになり 大きくUXを向上することができるといわれていますが、どこから手をつけたらいいかわからないとよく聞くので、 簡単にconfigファイルをいじるだけで自分のWordPressをSPAで表示することができるようにテーマをつくり、オープンソースとして公開しました。 WordPress.comだけではなく、自分でホスティングしているWordPress（org）
Ionic2クロスプラットフォーム開発 辛いところ良いところ - Qiita
Android/iOSアプリ開発でIonic2を3か月ほど使ってみました。 2.0.0 finalもリリースされたことですしその経験をもとに感じたところを書こうと思います。 そもそもIonic2とは IonicはWebの技術を用いたモバイルアプリの開発を可能にするフレームワークです。UIコンポーネントのライブラリとビルド等を行うためのCLIツールを含みます。2016年9月にRC.0がリリース。 2017年01月25日に2.0.0 finalがリリースされました。 以下のような特徴があります。 オープンソース Android/iOS両方に対応したクロスプラットフォーム開発 コーディングはHTML+CSS(Sass)+JavaScript(TypeScript)で行いWebView上で動作するハイブリッドアプリ Progressive Web Appsの開発にも （ここはあまりよくわかっていな
Simple Ionic Login With AngularJS
Many times you may want to have a login at the beginning of your app. Handling a login with Ionic and Angular is very straight forward. For the purpose of creating this Ionic Login Example, I will use a simple starting template from the Ionic guys und just add a login before the template app shows. Complete example: How To Handle User Authentication With AngularJS Inside Your Ionic App Setup the p
ハイブリッドアプリ入門 [cordova ionic] - Qiita
前提 2019/9/19追記：2016年09月28日投稿の記事なので結構古い情報です。ご注意ください。 社内の勉強会用に情報をまとめてみたのでせっかくなのでQiitaにも投稿 ハイブリッドアプリでも主にionic中心になります。 検討段階でMonacaも選択肢にあったためMonacaとの比較も記載。 ハイブリッドアプリを始める場合に困ったら以下も参考にしてみてください（自分の投稿のステマ） 【ハイブリッドアプリ】Monacaを利用してみてはじめに疑問に思ったこと一覧 http://qiita.com/hironaito/items/a33f71d72df4fd06b191 ハイブリッドアプリとは アプリをWeb技術を使って作成する技術 ネイティブアプリ Java Swift / ObjectiveC ハイブリッドアプリ HTML + CSS + JavaScript SPA（SINGLE
![ハイブリッドアプリ入門 [cordova ionic] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ac942a73040ab60a3c9983bc68db43ad5d4dc34/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJThGJUUzJTgyJUE0JUUzJTgzJTk2JUUzJTgzJUFBJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUU1JTg1JUE1JUU5JTk2JTgwJTIwJTVCY29yZG92YSUyMGlvbmljJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01NGE5YjlmYWIyNzQ3MzNlNWZiMjc5MDM3YTRjYzEwOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoaXJvbmFpdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWViZWY2OTFiNGYzY2QzNzEzMDljMGZmNWQ3NWYxMzBi%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Da301afbfaac96101606b343ecc317aed)
Ionic on iOS9.0 にて SSL error となる時の対処法 - Qiita
問題 私の開発するアプリがiOS8.xでは動いていたが，iOS9.0からApp Transport Securityが変更されたため通信が制限されています。 そのためAn SSL error has occurred and a secure connection to the server cannot be made.とemulator，実機にてエラーが発生し通信ができなくなっています。 やること 今回，このAn SSL error has occurred and a secure connection to the server cannot be made.エラーを回避するためにInfo.plistをxCodeにて直接編集する方法がありますが、buildするたびに記述しなければいけないため自動化します． 前提条件 一応，私の環境を記しておきます． $ ionic info Cor
cordova + ionicでプッシュ通知（iOS）の1から9！ - 鈴木商店ブログ
ホーム » JavaScript » Ionic » cordova + ionicでプッシュ通知（iOS）の1から9！
Ionic Frameworkの勉強の始め方（※あくまで個人的体験です） - memorandums
私は仕事で日常的に開発しているわけではありませんので、その程度の情報としてお読みください。 今年の夏休みはハイブリッドモバイルアプリ開発の勉強に時間を使いました。。。後悔はありませんが効率的ではなかったように思います。 そこでもし同じような状況の方がいれば参考になるかと思い、あまりカッコのいい話ではありませんが記しておきたいと思います。 まずいつもように背景を書きます。タイトルの情報を知りたい方は以下の本題へ進んでください。 ■背景 作りたいあるアプリがあり、ターゲットはiOSと決まっていたのですが、開発環境は決めていませんでした。 当初はSwiftでiOSアプリ開発とも思いましたが、研究でAndroidをターゲットとすることもあり、どうせ勉強するならハードウェアに依存しない開発方法がいいな。。。と思いました。 そこで目をつけたのがハイブリッド開発です。HTMLとJavascriptが書け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - doppelganger9/sample-qrcode-pwa-ionic: Trying to use a QR Code Scanner in an Ionic PWA App (without Cordova)
Unable to install cordova using npm · Issue #11265 · npm/npm
cordova-plugin-settings-hook
yo ionic の勉強 & cordova + ibeacon plugin で何か
Support iBeacons In Your Ionic Framework Mobile App
Infinite $digest Loop if we do preventDefault() in $stateChangeStart event · Issue #600 · angular-ui/ui-router
How to Deviceready in right way in Ionic application?
http://ngcordova.com/docs/plugins/clipboard/