cordova

【ionic2】無限スクロールの使い方

なかなか手をだせにずにいたionic2を次の案件では使えるように準備中。とりあえずionic1でできてたことをionic2でもできるようになることが当面の目標。今回はapiから取得したjsonからリスト表示で、無限スクロールを実装してみる。blankでプロジェクト作成 …

ionic(cordova)でdatepickerを使う

日付入力のUIを当初は「input type="date"」で実装していたのだが、「消去」ボタンを消したかったのだがこれのやりかたがわからず。。素直にDatepicker使うことにした。プラグインインストール $ ionic plugin add cordova-plugin-datepickerテンプレート <ion-view ng-controller="SampleCtrl"> <input type="date" readonly ng-click="openDatepicker()" ng-model="date" /> </ion-view>…

【cordova】Androidプラグイン開発でgradleに設定を追加する

こんな感じでいけるみたい。plugin.xml <platform name="android"> ・・・ <framework src="src/android/sample.gradle" custom="true" type="gradleReference" /> </platform>sample.gradle allprojects { repositories { maven { url "https://maven.google.com" } } } dependencies { compile "com.android.support:appcompat-v7:25.4.0"…

ionic(cordova) 開発で使ったcordovaプラグインやライブラリまとめ

最近、ionicを使ってハイブリッドアプリをいくつか作ったのでそのときに使ったcordovaプラグインとionic・angular関連のJSライブラリを忘れる前にまとめておく。 ionic系 ion-slides-tabs タブの画面遷移をスワイプでも実装するのに使用。アプリぽいUIが実現…

ionic(cordova)にてLineログインを実装する

ionicでのアプリ開発でLineログインを実装したかったのだが、当初はWeb版で実装すれば良いかと思っていた。が、試したところSafariでないと自動ログインが有効にならずに毎回メールとパスワードを入力させる必要があり不便だった。少し調べるとこの記事が丁…

ionic(cordova)にてion-nav-viewで$ionicHistory.goBackで2つ以上前に戻る

今回たまたまやる機会があったのでメモしておく。 $ionicHistory.goBack(-2);これだけ。以上です

ionic(cordova)にてinstagram でのログインを実装

やりたいことは、instagramアカウントでのログインの実装。調べたところではSDKがなさそうで、webと同じような実装になりそう。また、投稿したりシェアしたり?のプラグインはあるみたいだけどログインはできなそうなので今回は自前で作る。やることは以下。 …

ionic(cordova)にてtwitterログインを実装

やりたいことは、Twitterアカウントでのログインの実装。 前提としては、fabricへは登録済みであること。やることは以下 ・fabricからorganizationsを作成 ・twitterアプリを作成 ・twitter-connect-pluginプラグインの導入 ・プログラム実装 fabricからorga…

ionic(cordova)にてGoogle+ログインを実装

簡単なものかと思ったらけっこう時間かかった。。手順はざっくり以下 ・ionicプロジェクトを作成 ・Googleコンソールからプロジェクトを作成 ・作ったプロジェクトに認証情報を作成 ・cordova-plugin-googleplusプラグインを導入 ・プログラム実装 ionicプロ…

ionic(cordova)でiOSでのキーボード入力で完了ボタンを表示する

inputタグでキーボード表示したあとに何かたりないと思ったら、完了ボタンがなかった。 ionic startで作ったプロジェクトだとデフォルトで非表示に設定されてるぽい。app.js angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPl…

【ionic】collection-repeatで行の高さを動的にする

まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。…

ionic(cordova)にて$ionicPopupをカスタマイズしてモーダルを作る

今回やりたかったのはこんな感じの画面。 初めはionicModalのサイズを変えてやろうとしていたのだが、モーダルのサイズを中のテキストとかにあわせてリサイズするのを自前で実装するのが手間でした。 で、少し調べたらionicPopupをカスタマイズしたら簡単に…

ionic(cordova)にてアプリをリロードする

今回やりたかったことは、アプリでログアウトしたときなどにアプリをはじめから実行しなおしたい。ということ。いくつか試してみてうまくいくパターンとうまくいかなかったパターンをメモしておく。・うまくいかなかったパターン $state.go('path/to'); $win…

ionic(cordova)にて無限スクロールが途中で止まった時の対応

なんのこっちゃというタイトルですが。無限スクロール実装して、実機で検証していると意図せず途中で止まってしまうことがあった。不定期なので気づきずらかった。ちなみに無限スクロールに実装サンプルはこちらに書いて見た。で、以下のコードを無限スクロ…

ionic(cordova)にて無限スクロールを実装する

今回やりたいこととしては以下 ・サーバーからデータを取得してレスポンスがなくなるまで無限スクロール ・エラーがあったら再読み込みボタンを表示普通の無限スクロールです。ひな形としてメモしておく。想定するJSON [{id: 1, name: "Tom"}, {id: 2, name:…

ionic(cordova)にてAndroidでもタブバー(ion-tabs)を画面下にする方法

Androidでion-tabsをデフォルトのまま使うとこんな感じで、画面上に設置され選択中のタブの下にラインが表示される。Android的にはこのUIが推奨されるのでしょうが、実案件ではiOSと合わせるということも多いはず・・・ angular.module('starter', ['ionic',…

ionic(cordova)の開発環境構築で最低限必要そうなプロジェクト開始手順をまとめておく

はじめに いまさらバージョン1系かよ。 という内容だが個人的にはまだまだ使う機会ありそうなのでプロジェクトを作成してから開発に入るまでの最低限必要そうな手順をメモしておく。バージョン2は勉強中。 各ツールバージョン バージョンによって動いたり動…

ionic(cordova)にて screen-orientationプラグイン を使って画面ごとに回転時の表示を切り替える

はじめに 今回やりたかったことは 端末を回転したときに画面Aでは縦固定、画面Bでは縦横どちらにも対応みたいなこと。プロジェクトを作成 $ ionic start sample tabs今回は複数画面必要だったのでtabsを使った。プラグインをインストール $ ionic plugin add…

ionic(cordova)でsqliteを使う - ngCordova

はじめに 今回やりたかったのはsqliteを使う際に共通の処理とかはどこかにまとめておきたかった。接続とSELECT、INSERT、UPDATE、DELETEあたりをまとめられればよいかなという方針で。次回簡単に使えるようにメモしておく。インストール $ bower install ngC…

ionic(cordova)にてngStorageでlocalstorageを使う

bowerでインストール $ bower install ngstorage --saveindex.htmlで読み込む ・・・ <script src="lib/ngstorage/ngStorage.min.js"></script> ・・・今回はserviceで使った。 angular.module('myApp', ['ngStorage']) .service('myService', function($localStorage) { this.getByStorage = function() { return $…

ionic(cordova)で複数人でチーム開発するときのながれメモ

1人でやってるときは問題なかったけど、複数人でやってるときに最初うまくいかずにハマったのでメモしておく。 新規プロジェクト作成の場合 新規にプロジェクトを作成してandroid を追加(iosはデフォルトで登録済み) $ ionic start sampleApp blank -a "アプ…

ionic(cordova)で本番環境、開発環境を切り替える

ionicに限った話じゃないかもしれないけど。 今回やりたかったのは、本番と開発でつなぎこむAPIのURL等を切り替えたりしたかった。今回は少し調べて、node-env-fileというのを使った。 また、gulp-concatも使ってる。今回は以下のようなファイル構成を想定。…

ionic(cordova)で横スクロールするメニューを実装するときのメモ

cssでの実装でこちらを参考にそのままいけました。 Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita Horizontal Scrollable Navigation Sampleが、ionic serveでブラウザで確認したところ問題なかったのだがビルドしてアプリとして確認したところ動…

ionic(corodva)info.plistに追記して日本語化対応する - ios

アプリ内から別アプリを開いたら起動したアプリが全て英語だったのでその対応。というかionicで作ったアプリ自体が日本語化されてなかった。xcodeでの開発の場合は、info.plistを直接いじればよいけどcorodva使ってる場合はxcode上で直接編集したものはbuild…

ionic(corodva)でplugin rmで「Path must be a string. Received undefined」の対応

自作したプラグインを削除しようとしたら以下のようなエラーが発生。rmしてaddし直したかったのだがハマった。。。 Error during processing of action! Attempting to revert... Error: Uh oh! Path must be a string. Received undefined色々試してたらplu…

ionic(cordova)のion-footer-barの高さを変える

やりたいことは画面の下に固定の領域を設けたかった。で、ionicにはというのがあって、これ使えばできた。cssでheight指定すればいいだけだった。。 <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">フッターの高さをかえる</h1> </ion-header-bar> <ion-content> ・・・ </ion-content> <ion-footer-bar style="height:200px;"> <div class="row responsive-lg"> </div></ion-footer-bar></ion-pane>

ionic(cordova)でion-tabsで画面ごとに各タブの表示・非表示を切り替える

やりたかったのはページによってタブの中身を動的に変更したり、タブの数自体を変更したり、タブ自体を非表示にしたり。そんな感じです。ionicというよりはangular-ui-routerの使い方になるのかな。いちおうメモしておきます。$stateChangeStartでページが変…

ionic(cordova)でAndroidManifest.xmlへ追加する方法

config.xml <platform name="android"> <config-file target="AndroidManifest.xml" parent="/*"> <uses-permission android:name="android.permission.INTERNET" /> </config-file> <config-file target="AndroidManifest.xml" parent="/manifest/application"> </config-file></platform>

ionic(cordova)でサードパーティSDKのプラグインの実装手順 - Android

先にiOSの内容を書いたのでAndroidも引き続き。ながれは以下のような形。1. SDKを入手 2. SDKのパスとパーミション等をplugin.xmlへ追加 3. プラグインをプロジェクトへ追加(というか更新) 4. プログラムからSDK呼び出せるようになったらひたすら実装 実装 …

ionic(cordova)でサードパーティSDKのプラグインの実装手順 - iOS

はじめに 今回やりたかったことは、ネイティブのSDKが公開されているけどcordova用のプラグインは公開されていないようなケースでそれ用のプラグインの実装手順をメモしておく。プラグインの基本的な作成手順はコチラに書いたのでこれの後にやることを書く。…