AngularJSでローディングバーやインジケータを出す方法

AngularJSでローディングバーやインジケータを出す方法

インストール

bowerでライブラリ管理している前提です。

$ bower install angular-loading-bar --save

自分の環境ではangular-animateがなかったので、
angular-animateもインストールしました。

$ bower install angular-animate --save

使い方

app.jsなどで読み込むモジュールを宣言すればOK

angular.module('myApp', ['chieffancypants.loadingBar', 'ngAnimate'])

非表示設定

インジケータやローディングバーなど非表示にしたい場合。
Safariだとオリジナルのローディンブバーとかぶってちょっとださなかったので、
ローディングバーを非表示にしました。

インジケータ非表示

angular.module('myApp', ['chieffancypants.loadingBar'])
  .config(function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = false;
  })

ローディングバーの非表示

angular.module('myApp', ['chieffancypants.loadingBar'])
  .config(function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeBar = false;
  })

すごく簡単にライブラリの追加が簡単になってます。

このライブラリを使ったアプリはこちら

http://app.owatter.hrk-ys.net/

時刻: 1 件のコメント:

iOS FAQサポートツール Helpshiftを使ってみた


リンク集

アカウント作成

本家ページからアカウント作成を行う。
既にアプリを公開している場合は、App StoreのURLを入れるとアプリ情報を参照してくれる

インストール

pod 'Helpshift', '4.2.0'

導入

初期処理

他のサービス同様にアプリ起動時にAPI Key、APP IDを指定する
Push通知は使わなければ設定しなくても良い
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ... 省略

    [Helpshift installForApiKey:@"<YOUR_API_KEY>"  domainName:@"<YOUR_COMPANY>.helpshift.com" appID:@"<YOUR_APP_ID>"];


    if (launchOptions != nil) //handle when app is not in background and opened for push notification.
    {
        NSDictionary* userInfo = [launchOptions objectForKey:UIApplicationLaunchOptionsRemoteNotificationKey];
        if (userInfo != nil && [[userInfo objectForKey:@"origin"] isEqualToString:@"helpshift"])
        {
            [[Helpshift sharedInstance] handleRemoteNotification:userInfo withController:self.window.rootViewController];
        }
    }
}

- (void)application:(UIApplication *)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
    if (!deviceToken) return;

    [[Helpshift sharedInstance] registerDeviceToken:deviceToken];
}



- (void) application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
{
    //Helpshift::handle notification from APN
    if ([[userInfo objectForKey:@"origin"] isEqualToString:@"helpshift"]) {
        [[Helpshift sharedInstance] handleRemoteNotification:userInfo withController:self.window.rootViewController];
    }
}

問い合わせ機能

お問い合わせ機能では、基本的にユーザとのメッセージのやり取りの他に、スナップショットを添付させたり、レビュー依頼を出せたりする。
[[Helpshift sharedInstance] showConversation:self withOptions:nil];
メッセージ投稿フォームが起動する

どうやらNameの所は数字とか入力できないもよう。
設定で名前やメールアドレスの入力フォームを非表示にできる
SETTINGS > Allow anonymous issues

OPE

ISSUES
問い合わせされた内容が表示される
  • ステータス管理
  • タグ機能
  • メモ
  • 問い合わせをベースにFAQを作成する事も可能
  • キャプチャーを撮ってもらうように促して、キャプチャーを添付してもらう事も可能
  • Push通知
  • アプリ内通知（アプリを開いてるとき）
  • レビュー依頼
ステータス
ユーザの問い合わせでステータスがオープンになり、その後メッセージのやり取りが行われる。 最後はユーザ側のアクションでCloseとなる
  1. open
  2. メッセージをやり取り
  3. オーペレータがResolvedに変更
  4. ユーザがCloseする

FAQ

[[Helpshift sharedInstance] showFAQs:self withOptions:nil];

OPE

特に困る事はないけど、新規作成したときは「非公開」になってるので、公開にする

国際化

HSLocalizationフォルダを追加する
Pods/Helpshift/helpshift-ios-4.2.0/HSLocalization
10種類の言語ファイルがあるので、必要なやつだけ追加する。
自分の場合はEnglishだけで、日本語を表示してるので、英語意外は全部削除。
そして、日本語の内容をコピペする。（やはり日本語辺なので修正した方が良さそう）

デザイン

HelpshiftConfig.plist もしくは　HelpshiftConfigDark.plist　を追加する
HelpshiftConfigDark.plistを追加する場合は、ファイル名を’HelpshiftConfig.plist'に変更する
Pods/Helpshift/helpshift-ios-4.2.0/HSThemes
全体的なデザインはデフォルトのままなので、あまり気にならないが、フォントだけどうしてもきになったので、 すべてヒラギノに変更
  • ヒラギノ角ゴ ProN W3
  • ヒラギノ角ゴ ProN W6

アプリの評価

OPEのSETTINGSからアプリの評価を促すダイアログの表示条件を指定できる
  • 5, 10, 15, 20, 30回目の起動
  • 3, 7, 10, 15, 20, 30日後の起動
実際に導入したアプリはこちら

DeskSlide

スマホとPC間のデータ転送が簡単に行えます。
URLなどのテキストや、画像ファイルなどが転送できるアプリです。
時刻: 0 件のコメント:
ラベル: ,

iOS7 画面遷移のカスタマイズ 初級

登場人物

  • UIViewControllerAnimatedTransitioning (アニメーションコントローラ)
  • UIViewControllerContextTransitioning (画面遷移コンテキスト)
  • UIViewControllerTransitioningDelegate (画面遷移デリゲート)

実装

1.どのようなアニメーションを行うかを定義したクラスを作成

UIViewControllerAnimatedTransitioningを継承したクラス

@interface HYFadeAnimationController : NSObject <UIViewControllerAnimatedTransitioning>
@end

実装はheaderファイル通り

アニメーション時間を指定

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext;

実際のアニメーションを指定

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{

    // 遷移元と遷移先のViewControllerを取得

    UIViewController* fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
   UIViewController* toVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];


    // 遷移先のViewを追加
    UIView* containerView = [transitionContext containerView];
    [containerView insertSubview:toVC.view belowSubview:fromVC.view];

    // アニメーションを指定

    [UIView animateWithDuration:[self transitionDuration:transitionContext]
                 animations:^{
                     fromVC.view.alpha = 0.0;
                 } completion:^(BOOL finished) {
                     [transitionContext completeTransition:YES];
                     fromVC.view.alpha = 1.0;
                 }];
}

2.遷移先のViewControllerのTransitioningDelegateにUIViewControllerTransitioningDelegateを指定

どの遷移で、どのアニメーションコントローラを利用するか指定する(今回は遷移元に実装)

@interface HYViewController () <UIViewControllerTransitioningDelegate>
@end

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([[segue identifier] isEqualToString:@"showModalView"]) {
        [[segue destinationViewController] setTransitioningDelegate:self];
    }
}


- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:    (UIViewController *)dismissed
{
    return [[HYFadeAnimationController alloc] init];
}
時刻: 0 件のコメント:
ラベル: ,

ステータスバーの表示/非表示の挙動 iOS6

たまにレイアウトがくずれたり、ナビゲーションバーがステータスバーの下に潜り込んだりするため、 いろいろなパターンで動作確認してみる

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

//    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}
- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

//    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];

//    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];

}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];    
//    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];

}
no viewWillAppear viewDidAppear viewWillDisappear viewDidDisappear 呼びもと モーダル
1 ○ ● × ×
2 ○ ● × ×
3 ○ ● × ○
4 ○ ● × ○

1

他のViewControllerに迷惑をかけないように、viewDidAppearと、viewWillDisappearで行う

×モーダルビューのレイアウトもstatus barの領域が残ったまま

×モーダルの場合、呼びもとのviewWillAppearではstatus barが隠れた状態のサイズとなる。

2

×モーダルビューはレイアウトがstatus barの領域が残ったまま

×呼び出しもとは全画面レイアウトした後にstatus barが表示されるためヘッダーが刺さる

3

○モーダルビュー側は問題なし

×モーダルの場合、呼びもとのviewWillAppearではstatus barが隠れた状態のサイズとなる。

4

○モーダルビュー側は問題なし

×呼び出しもとは全画面レイアウトした後にstatus barが表示されるためヘッダーが刺さる

考察

viewのライフサイクル中にやるのは良くないのかな。

viewWillAppearで自分の領域は全画面と宣言をし、離れる場合（閉じるボタン謳歌など）はそのタイミングで、 もとに戻してあげるのが正しいのかな。

ただし、もともと全画面状態から遷移だったり、次の画面が全画面かどうかわからないため、ポリシーの問題でもあるきがする。

今回は、モーダルビューだったので、閉じる用のdelegateを呼ぶ箇所で、setStatusBarHidden:NOをしていすると想定通りの挙動となった。

- (void)closeView
{
    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];
    [self.delegate viewControllerDidClosed:self];
}

- (IBAction)tappedCloseButton:(id)sender
{
    [self closeView];
}
時刻: 0 件のコメント:
ラベル: , , ,

WebDBプレスにはじめて記事をかきました

時刻: 0 件のコメント:

UIButtonのイメージとテキストを両方表示する

時刻: 0 件のコメント:
ラベル: , , , ,

Xcode5+Jenkins+CocoaPodsのビルド

時刻: 0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)

ReactNativeでAndroid対応する話

前提 ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話 トラブルシューティング Build.VERSION_CODES.Q が存在しないエラー compileSdkVersionを29以上にすると解決 メモリー足りないエラー Execu...

  • ReactNativeでAndroid対応する話
    前提 ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話 トラブルシューティング Build.VERSION_CODES.Q が存在しないエラー compileSdkVersionを29以上にすると解決 メモリー足りないエラー Execu...
  • iOS コピー&ペースト UIPasteboard と UIMenuControllerの拡張
    切り取り(cat)やコピー(copy)した内容を置き換える  クリップボード(iOSではペーストボードというらしい）に追加や削除したタイミングでnotificationが発行される   - 追加 : UIPasteboardChangedNotification ...
  • Swift、UILabelで表示する文字列の高さを取得する
    UILabelの高さ取得に気をつけること 1. xibやstoryboradの指定したFontと、プログラムで指定しているフォントは同じかどうか 2. viewDidLoad時ではまだviewのサイズが決まっていない ロジック NSString func...