ハイブリッドアプリ

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

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

【ionic】ion-side-menusを常に表示する

ionicの仕様?なのかナビゲーションの2階層目以降では消えてしまうようなのだが今回は全画面で表示したかった。よくわからなかったのでcssで無理やり実装。以下を追記したらいけました。 .bar .buttons .hide { display: block !important; }以上です

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】ionic buildでgulpを実行する

今回やりたかったのは、ionic buildでもgulpが動くようにしたかった。https://codepen.io/leob6/post/quick-tip-using-gulp-to-customize-the-serve-run-and-build-process-for-your-ionic-framework-apps こちらにやり方書いてあった。gulpfile.jsの例 gulp…

【ionic】タブの中に入れ子でタブをいれる方法メモ - ion-tabs

はじめに 今回やりたかったのはこんな画面。 イマイチできるのか不安だったけど無事できた。ionicは海外の情報が多くて「ionic tabs inside tabs」とか「ionic tab nested」ってみんな検索してるみたい。イメージはこんなかんじ アプリ特有?かわからないけど…

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用のプラグインは公開されていないようなケースでそれ用のプラグインの実装手順をメモしておく。プラグインの基本的な作成手順はコチラに書いたのでこれの後にやることを書く。…

ionic(cordova)でプラグインを更新(反映)する

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

ionic(cordova)でのプラグイン開発のながれメモ

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

ハイブリッドアプリ開発におけるプログラマーとデザイナーの分業について

はじめに 最近、ハイブリッドアプリで開発してって言うお客さんが増えてる。といっても自分は簡単なものなら作ったことはあるけど、きっちりデザインがあって画面数も多いようなものを作った経験がない。と言う状況で、今回ハイブリッドアプリを作ることにな…