日付入力の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>…

こんな感じでいけるみたい。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プラグインとionic・angular関連のJSライブラリを忘れる前にまとめておく。 ionic系 ion-slides-tabs タブの画面遷移をスワイプでも実装するのに使用。アプリぽいUIが実現…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 $…

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

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

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

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

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

やりたいことは画面の下に固定の領域を設けたかった。で、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というよりはangular-ui-routerの使い方になるのかな。いちおうメモしておきます。$stateChangeStartでページが変…

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>

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

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

イマイチ開発の流れがわかってないときにつまづいたのでメモ。 開発中のプラグイン(swift、java、javascriptのいずれでも)をいじったら、プラグインを更新してプロジェクトへ反映させなくてはならない。(たぶん) $ ionic plugin rm plugin-sample # 1回削除…

開発のながれ 1. 新規プロジェクト作成(既存のプロジェクトに追加する場合は不要) 2. プラグインの開発 必要なディレクトリとファイルを作成 $ tree plugins-dev/ plugins-dev/ └── plugin-sample ├── plugin.xml ├── src │ ├── android │ │ └── Sample.java…