プロフェッショナルプログラマー

React + Redux 非同期処理を導入

2017-05-28T22:01:00.001+09:00

前回に引き続き, React + Redux です。今回は前回のサンプルにajax 非同期処理を導入します。簡単な例として実装するため今回は, ページロードの際にjsonデータを取ってきてそれをリストで描画する例にしました。前回のエントリーはこちら React + Redux React Router その前 React + Redux とりあえず簡単な例からサンプルは, Reddit(Redux公式より) を参考にしています。このサンプルとの違いはデータ取得をイベントフックにしているかロード時に取得しているかの違いです。

データの準備

データはjsonファイルとして準備します。前回のプロジェクトのルートにフォルダを作成し, データを置いておきます。このデータをwebpack-dev-serverがなんとかしてくれます。

first (プロジェクト名)
|- data
     |- data.json

data.json

{
  "data" : [
    {
      "index" : 1,
      "name" : "Taro"
    },
    {
      "index" : 2,
      "name" : "Jiro"
    }
  ]
}

これで, localhost:8080/data/data.json でデータを取得できるようになりました。

HttpClientはどうする？

React そのものには, HttpClientは含まれていません。ですので何かしらのライブラリの導入をするか, pure Javascript で頑張るかのどちらかになります。選択肢としてはいくつかあります。

jQuery
Angular
SuperAgent
Axios
Request
Fetch

せっかく, Reactを使っているのに jQueryとか, Angularはないよな。と思いつつ。 SuperAgent, Axios などは割と使われているみたいです。今回は, Fetchを使ってみます。

npm insatll whatwg-fetch --save

React-ThunkとMiddleware

今回のサンプルを実装するに当たって重要なのが React-Thunkと Middlewareです。 Redux Thunk (Thunk middleware for Redux.) これを使うことでAction CreatorがAction objectを返す代わりにfunctionを返すことができます。

npm install redux-thunk --save

非同期データとアクション

ここで非同期でデータを取ってくるところとアクションの関係を説明します。データを取ってくる = データを取りに行く + データを受信した or データ取得に失敗したという形に分離できます。これでアクションは3種類? 実装する必要がありますね。 (結局このあたりの細かいところをどう設計するかが鍵になるのかと思います。最初のうちはさっぱりわからないですよね。)

サンプル

構成は前回のエントリーの続きになります。 webpackの設定などの変更はしていないです。

first
|-data
|  |- data.json
|-.babelrc
|-index.html
|-package.json
|-webpack.config.js
|-src
   |-actions
   |    |- index.jsx
   |-components
   |    |- FormDisplay.jsx
   |    |- FormInput.jsx
   |-containers
   |    |- AppContainer.jsx
   |    |- FormApp.jsx
   |    |- Page2.jsx
   |    |- Page2Container.jsx
   |-reducers
        |- fetchReducer.jsx
        |- formreducer.jsx
        |- index.jsx

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { reducers } from './reducers/index.jsx';
import thunkMiddleware from 'redux-thunk';

import AppContainer from './containers/AppContainer.jsx';
import Page2Container from './containers/Page2Container.jsx';

const initialState = {
    formReducer: {
        value : null
    },
    fetchReducer: {
        items: []
    }
};

const store = createStore(reducers,
    initialState,
    applyMiddleware(thunkMiddleware)); // reducer, initial state

// Rendering
ReactDOM.render(
  
      
          
            
            
          
      
  ,
    document.querySelector('.content')
);

変更したのは, redux-thunk をmiddlewareの設定にしたことこれで ActionCreatorでfunctionが返せます。

reducers/fetchReducer.jsx

export function fetchReducer(state = {}, action) {
    switch(action.type) {
        case 'REQUEST_DATA_SUCCESS':
            return Object.assign({}, state, {
                items: action.data,
                lastUpdated: action.receivedAt
            });
        case 'REQUEST_DATA_FAIL': {
            return Object.assign({}, state, {
                items: action.data
            });
        }
        default:
            return state;
    }
}

items というデータのArrayを返します。これはデータのリクエストが成功した時(その時はデータ) 、失敗した時に返します(その時は空[])

reducers/index.jsx

import { combineReducers } from 'redux';
import { formReducer } from './formreducer.jsx';
import { fetchReducer} from './fetchReducer.jsx';

export const reducers = combineReducers({
    formReducer,
    fetchReducer
});

前回作成した、reducerと共に利用するので2つのReducerをcombineReducersで繋げます。

actions/index.jsx

const SEND = 'SEND';

/* Action Creator */
// Return Object
export function send(value) {
    // Action
    return {
        type: SEND,
        value,
    };
}

/* Action2 */

const REQUEST_DATA = 'REQUEST_DATA';
const REQUEST_DATA_SUCCESS = 'REQUEST_DATA_SUCCESS';
const REQUEST_DATA_FAIL = 'REQUEST_DATA_FAIL';

function invalidateData() {
    return {
        type: REQUEST_DATA_FAIL,
        data: []
    }
}

function requestData() {
    return {
        type: REQUEST_DATA
    }
}

function receiveData(json) {
    return {
        type: REQUEST_DATA_SUCCESS,
        data : json,
        receivedAt: Date.now()
    }
}

export function fetchData() {
    return function (dispatch) {
        dispatch(requestData());
        return fetch('/data/data.json')
            .then(response => response.json())
            .then(json => dispatch(receiveData(json.data)))
            .catch(e =>
                dispatch(invalidateData()));
    }
}

前回作成したActionCreatorに3つのActionを追加しました。データ取得できなかった場合のAction, リクエスト開始時のAction, データが取得できた場合のActionです。これらのアクションをまとめた fetchデータというfunctionをexportしています。

containers/Page2.jsx

import React from 'react';
import PropTypes from 'prop-types';
import {fetchData} from '../actions/index.jsx';

class Page2 extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
       const { dispatch } = this.props;
    //    console.log(dispatch);
       dispatch(fetchData());
    }

    render() {
        const { items } = this.props;

        var list = [];
        for(var index in items){
            list.push({items[index].name});
        }

        return (
            
                
                    {list}
                
            
        );
    }
}

Page2.propTypes = {
    items: PropTypes.array
};

export { Page2 as default };

componentDidMountの所でデータを非同期に取得しています。renderの部分データを取り出しリストを作成して描画します。
最後は Containerですね。 containers/Page2Container.jsx

// Connect to Redux
function mapStateToProps(state) {
    return {
        items: state.fetchReducer.items
    }
}

const Page2Container = connect(
    mapStateToProps
)(Page2)

export { Page2Container as default };

この部分でPropertyとComponentを繋ぎます。

テスト

動作確認

webpack-dev-server

localhost:8080/member にアクセス。2つのアイテムのあるリストが見えるはずです。

React + Redux React Router

2017-05-28T15:20:00.002+09:00

前回に引き続き, React + Reduxを見ていきます。今回は前回のサンプルにReact Routerを導入します。前回のサンプルはこちらをご覧ください。 (React + Redux とりあえず簡単な例から)

React Routerを導入

npm install --save react-router-dom

Versionは, 4.1.1 を使用。このバージョンが曲者っぽい。 4以下の書き方などは違う模様。また, react-router というパッケージと react-router-dom は違うみたい。前はreact-routerを使っていた気がするんだけどなぁ。今回は, react-router-domを使います。

Container の作成

今回はもう1ページ用にもう一つContainerを作成します。Reduxの流れを作るのが面倒なので簡単なComponentにしておきます。
containers/Page2.jsx

class Page2 extends React.Component {
   render() {
        return (
            
                Hello!
            
        );
    }
}

export { Page2 as default };

ただのSimpleなdivです。

React-Routerを入れる

前回作った部分を/appとして今回の部分を/memberと二つにします。 (コードは一部のみ)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import AppContainer from './containers/AppContainer.jsx';
import Page2 from './containers/Page2.jsx';


ReactDOM.render(
  
      
          
            
            
          
      
  ,
    document.querySelector('.content')
);

前回と違うところは Prividerのしたのところに, RouterというタグとSwitchというタグ, その中に各ページの定義 Routeが入っています。これで localhost:8080/app, localhost:8080/member で各ページが確認できます。

React + Redux とりあえず簡単な例から

2017-05-28T15:04:00.002+09:00

久々の投稿。ここしばらくは, モバイル, フロントがメインでたまにバックエンドの開発をする日が続いています。

仕事では, Angular 1 がメインでしたそろそろReact + webpackでいこうと模索しています。

React をしばらく触って, それからReact + Redux の学習を初めています。

React は本読んだりしてなんとかしましたが, redux にはかなり苦労しています。

参考にしたもの

一番上の解説はわかりやすかったです。今回のサンプルもここで取り上げていたサンプルをベースに作っています。下2つはReduxの公式のサンプルです。フォルダの構成とか結構参考になると思います。

最終的なゴール

(今回)webpackでビルドする
(今回)webpack-dev-server で動作確認
(今回)reduxの導入
(今回)es6でかけるようにする
(今回)action, container, component, reducerの構成を作る
react-routerを使う
ajaxでデータを取ってくる

react-routerと, ajaxに関しては次回以降取り上げたいと思います。

バージョンなど

作成日 : 2017/05/28 webpack : 2.5.1

プロジェクトの作成, react, webapack, redux の導入

mkdir first     
cd first
npm init -y
npm install --save webpack webpack-dev-server
npm install --save-dev babel babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install --save react react-dom react-redux redux
npm install --save prop-types

firstはプロジェクト名です。なんでも良いです。今回は, webpack, webpack-dev-server, react, react-redux, reactのプロパティを使うとWarningが出るので prop-typesを使います。

フォルダ構成

first
|- dist
|- src
|   |- actions
|   |- components
|   |- containers
|   |- reducers
|   |- index.jsx
|- .babelrc
|- index.html
|- package.json
|- wbpack.config.js

.babelrc

ここで, es6を使うための設定をします。

{
  "presets": [
    "es2015", "react"
  ]
}

webpack.config.js

webpack の設定です。今回は jsx　を動作させるための設定だけを記載しました。

const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'src/index.jsx'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: '.',
        port: 8080,
        inline: true,
        historyApiFallback: true
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
};

webpackでビルドした結果を distフォルダへ, babel-loaderを使って, jsxを処理します。 webpack-dev-server はポート8080で動作させます。

Redux

Redux に関しては他のブログなどのエントリーを参考にしてさらっとまとめます。 Redux : Redux 細かい話は公式などを確認した方が良さそう。状態管理をアプリ全体で行う, 状態管理するStoreはアプリ全体で1つ。ユーザのActionがコールされると, Recuderを使って, Storeの状態を更新する。ここで登場人物が3つ出てきました。(Action, Reducer, Store) Reduxではデータフローが重要で, データフローのルールに従います。以下各要素の説明とプログラム上での登場人物の整理です。

Action

typeをキーとしてStateを更新するための定義を書く。状態更新はdispatch関数を実行して行う (ajaxの通信はここで行う) ActionはAction名(Reducerで処理を判別するため)と状態の値を持った単なるオブジェクト Storeのdispatch() メソッドの引数にAction Creatorを渡すことでActionがReducerに送られる

ActionCreator

最終的には, Actionと同じファイルに書いている functionで Action = object を返す Actionで書いていない更新したい状態の定義を書く。 Stateの更新自体は, Reducerがするので更新したい部分を引数などから生成する

Reducer

Reducerは、現在の状態（state）と受け取ったActionを引数に取り、新しい状態を返す関数 typeをキーにして処理を分ける, Switch 文中に Action で定義した State の type で分岐しロジックを書く stateの更新には, ES2015 Object.assign()を使おう!! Object.assign() はmergeオブジェクトのマージを行います。 ※Reducerは複数作ることができます。(ページごとに作るイメージかなぁ) (storeは一つしか引数に取れないので combineReducersで combine)

Store

状態管理のオブジェクト初期データと, ReducerからcreateStoreメソッドで作成します。これをProvider渡します。 Reduxのmiddlewareを渡す場合はそれも引数に加えます。

Container Components

親コンポーネント。ここでReactとReduxのつなぎ込みを行います。 Container ComponentsはPresentational Componentを持ちます。

Presentational Component

子コンポーネント。最小単位のコンポーネント親からプロパティを受け取り描画します。イベントなども親から受け取ります。

サンプル

今回のサンプルは参考の一番上のエントリーを参考にreact + reduxをwebpackで動作させる, フォルダ構成をReactの公式サンプルを元に作り変えたものです。 index.jsx エントリー部分。

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducers } from './reducers/index.jsx';

import AppContainer from './containers/AppContainer.jsx';

const initialState = {
    formReducer: {
        value : null
    }
};

const store = createStore(reducers,
    initialState); // reducer, initial state

// Rendering
ReactDOM.render(
  
      
  ,
    document.querySelector('.content')
);

とりあえず必要なComponentなどを全部importしています。ここに直接書くのは, 初期状態の設定と(この部分もファイル分離できる) store の作成と, レンダリングの部分ですね。 Reactに連携させるReduxのStoreを渡しています。Providerという部分でReactとReduxのStoreの連携をしていますね。

index.html 元になるView,ただし動作関係は全部上のindex.jsxに任せる




    
    Redux Sample

ビルドした後のjsを取り込んでいるだけです。この部分はもう基本的には変更しません。

actions/index.jsx アクションの実装です。Actionと,ActionCreatorの実装をしています。

const SEND = 'SEND';

/* Action Creator */
// Return Object
export function send(value) {
    // Action
    return {
        type: SEND,
        value,
    };
}

Actionは, objectを返します。ここでは, Actionタイプ(アクションの名前みたいなもの)とアクションを発行した部分から valueという値を受け取ってそれを返しています。

recucers/formreducer.jsx Reducerの実装です。

export function formReducer(state = {}, action) {
    switch(action.type) {
        case 'SEND':
            return Object.assign({}, state, {
                value: action.value,
            });
        default:
            return state;
    }
}

containers/FormApp.jsx

import React from 'react';
import PropTypes from 'prop-types';

import FormInput from '../components/FormInput.jsx';
import FormDisplay from '../components/FormDisplay.jsx';

class FormApp extends React.Component {
    render() {
        return (
            
                
                
            
        );
    }
}

FormApp.propTypes = {
    onClick: PropTypes.func.isRequired,
    value: PropTypes.string
};

export { FormApp as default };

containers/AppContainer.jsx

import { connect } from 'react-redux';
import { send } from '../actions/index.jsx';
import FormApp from './FormApp.jsx';

// Connect to Redux
function mapStateToProps(state) {
    return {
        //value: state.value
        value: state.formReducer.value    //http://qiita.com/usagi-f/items/ae568fb64c2eac882d05
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onClick(value) {
            dispatch(send(value));
        }
    };
}

const AppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(FormApp)

export { AppContainer as default };

ここで Redux のプロパティとComponentを繋ぐ作業をしています。 storeからデータをひっぱてくるところ, メソッドを渡すとこですね。

components/FormDisplay.jsx

class FormDisplay extends React.Component {
    render() {
        return (
            {this.props.data}
        );
    }
};

FormDisplay.propTypes = {
    data: PropTypes.string
};

export { FormDisplay as default };

components/FormInput.jsx

class FormInput extends React.Component {
    send(e) {
        e.preventDefault();
        this.props.handleClick(this.myInput.value.trim());
        this.myInput.value = '';
        return;
    }
    render() {
        return(
            
                 (this.myInput = ref)} defaultValue="" />
                
            
        );
    }
};

FormInput.propTypes = {
    handleClick: PropTypes.func.isRequired
};

export { FormInput as default };

動作確認

webpackでビルド, webpack-dev-serverで簡易サーバーを動かします。ビルド

webpack

サーバーを動かす

webpack-dev-server

localhost:8080/index.html　へアクセス

Swift UICollectionViewをコードでつくる

2015-01-17T10:30:00.001+09:00

UICollectionViewをコードでつくります

UICollectionViewDelegate, UICollectionViewDataSource UICollectionViewDelegateFlowLayout　をUIViewController 内で実装します UIは, xibや, storyboardを使わずすべてコードで実装しますセルやフッターなどのUIコードは省略します.

class ViewController : UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    private let barSize : CGFloat = 44.0
    private let kCellReuse : String = "PackCell"
    private let kCellheaderReuse : String = "PackHeader"
    private var collectionView : UICollectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: UICollectionViewFlowLayout())   // Initialization
 
    override func viewDidLoad() {
        super.viewDidLoad()
 
        // Collection
        self.collectionView.delegate = self     // delegate  :  UICollectionViewDelegate
        self.collectionView.dataSource = self   // datasource  : UICollectionViewDataSource
        self.collectionView.backgroundColor = UIColor.clearColor()
 
        // Register parts(header and cell
        self.collectionView.registerClass(PackViewCell.self, forCellWithReuseIdentifier: kCellReuse) // UICollectionViewCell
        self.collectionView.registerClass(PackCollectionSectionView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: kCellheaderReuse)  // UICollectionReusableView
         
        self.view.addSubview(self.collectionView)
    }
 
    override func viewWillLayoutSubviews() {
        let frame = self.view.frame
        self.collectionView.frame = CGRectMake(frame.origin.x, frame.origin.y + barSize, frame.size.width, frame.size.height - barSize)
    }
 
    // MARK: UICollectionViewDelegate, UICollectionViewDataSource
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        var cell : PackViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(kCellReuse, forIndexPath: indexPath) as PackViewCell
        return cell    // Create UICollectionViewCell
    }
 
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1  // Number of section
    }
 
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        var res = 0
        switch(section) {
        case 0:
            res = 4  // Number of cell per section(section 0)
            break
        default:
            res = 0
            break
        }
        return res
    }
 
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        collectionView.deselectItemAtIndexPath(indexPath, animated: false) 
        // Select operation
    }
 
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        var reusableView : UICollectionReusableView? = nil
         
        // Create header
        if (kind == UICollectionElementKindSectionHeader) {
            // Create Header
            var headerView : PackCollectionSectionView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: kCellheaderReuse, forIndexPath: indexPath) as PackCollectionSectionView
             
            reusableView = headerView
        }
        return reusableView!
    }
 
    // MARK: UICollectionViewDelegateFlowLayout
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: 90, height: 90) // The size of one cell
    }
 
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSizeMake(self.view.frame.width, 90)  // Header size
    }
 
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        let frame : CGRect = self.view.frame
        let margin  = (frame.width - 90 * 3) / 6.0
        return UIEdgeInsetsMake(10, margin, 10, margin) // margin between cells
    }
}

UICollectionViewDelegateFlowLayout の実装でセルのサイズや, ヘッダーのサイズ, セル間のマージンなどを決めています UICollectionViewDelegate, 実装していれば読み込まれるはずですコードそのものは, UITableViewの実装によく似ています. 行やセクションのナンバーから, セルを引っ張りだすことなど違いは , レイアウトが柔軟なこと, サイズを返すところで行ごとにサイズを変更できます

WKWebView アラート(alert)を表示させる

2014-12-20T10:56:00.000+09:00

省メモリや高機能が売りの, WKWebViewですが, いろいろ問題があるようです
alertの表示もその一つです
Webページ上で, JavaScriptでalert(); などのメソッドでダイアログを表示させようとすると, WKWebViewでは無反応になります
表示させる場合,タイプに応じて自前でコントロールを実装してあげる必要があります
カスタマイズができるので, 「いい」とも思われますが, 面倒ですよね
オリジナルはこちら(English), WkWebView Prompt 英語版の方には, 検索で見つけたテスト用のページのリンクを貼っておきました

WKUIDelegateを実装する

個人的な推奨ですが, これらのメソッドをUIViewControllerに実装して, WKWebViewを利用するUIViewControllerに
継承させれば, 楽かなと思っています

UIViewController.h

@interface ViewController : UIViewController

@end

UIViewController.m

@implementation ViewController

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)())completionHandler {
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:webView.URL.host message:message preferredStyle:UIAlertControllerStyleAlert];
     
    [alertController addAction:[UIAlertAction actionWithTitle:NSLocalizedString(@"Close", nil) style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
        completionHandler();
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
}
 
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler {
     
    // TODO We have to think message to confirm "YES"
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:webView.URL.host message:message preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
        completionHandler(YES);
    }]];
    [alertController addAction:[UIAlertAction actionWithTitle:NSLocalizedString(@"Cancel", nil) style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
        completionHandler(NO);
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
}
 
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *))completionHandler {
     
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:webView.URL.host preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
        textField.text = defaultText;
    }];
     
    [alertController addAction:[UIAlertAction actionWithTitle:NSLocalizedString(@"OK", nil) style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
        NSString *input = ((UITextField *)alertController.textFields.firstObject).text;
        completionHandler(input);
    }]];
     
    [alertController addAction:[UIAlertAction actionWithTitle:NSLocalizedString(@"Cancel", nil) style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {
        completionHandler(nil);
    }]];
    [self presentViewController:alertController animated:YES completion:nil];
}


@end

この3つのメソッドの実装で, アラート, 選択式アラート, 入力ボックス付きアラートはカバーできます
ローカライズ言語部分は省略しています.
適宜置き換えてください

WKWebView スクリーンショット

2014-12-20T10:12:00.003+09:00

UIWebViewで簡単に取得できたスクリーンショットも, WKWebViewでは同じ方法ではできません.

オリジナルはこちら (English),WKWebView Screenshots

UIViewのみを取得したい場合

snapshotViewAfterScreenUpdates を利用します。これだけで, UIViewまではO.K.です Objective-C

UIView *capturedView = [self snapshotViewAfterScreenUpdates:NO];

swift

var capturedView : UIView? = self.snapshotViewAfterScreenUpdates(false)

このUIViewは, 通常の方法でUIImageに変換できません。 drawViewHierarchyInRectを使うと, 常に NO, false が返ってきます UIViewを, Contextに描画できないようですシミュレータを使うと, drawViewHierarchyInRectでも描画できますが, 実機だと上記のようなことが起こります(iPhone5s, iPhone4s)

UIImageにしたい場合

上の方法だと実機で, UIView, UIImageのコンバートに失敗します ScrollViewの内容をそのまま描画してImageにしてしまえば, 実機でもうまくいきます

- (UIImage *)screenCapture {
    CGSize size = self.scrollView.contentSize;
    UIGraphicsBeginImageContextWithOptions(size, YES, 0);
    [self drawViewHierarchyInRect:CGRectMake(self.bounds.origin.x, self.bounds.origin.y, size.width, size.height) afterScreenUpdates:YES];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
 
- (UIImage *)screenCapture:(CGSize)size {
    UIGraphicsBeginImageContext(size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGFloat scale = size.width / self.layer.bounds.size.width;
    CGAffineTransform transform = CGAffineTransformMakeScale(scale, scale);
    CGContextConcatCTM(ctx, transform);
    [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:NO];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

iOS WebView(UIWebView, WKWebView)をバージョンで分けて利用する

2014-11-22T16:41:00.004+09:00

WebView

iOSでWebページを表示させる場合, UIWebViewを利用します. しかし, iOS8から, WKWebViewが登場しました.
WKWebViewは, Safariに搭載されている機能と同様の機能を含んでおり, Safariに似た,機能を利用できます.
またパフォーマンス面でも, WKWebViewは, UIWebViewを上回っています.
ですが, この機能は, WebKit というFrameworkを利用しており, これは, iOS8より利用できるので, iOS7以下ではりようできませんそこで, OSのバージョンによりUIWebView, WKWebViewを分ければ, iOS8によりよい機能を提供できるのでは.

サンプル

UIWebView, WKWebViewをハンドルクラスでラップして, iOS7,8で使い分けられるようにする
UIWebViewの機能をベースにする
Delegateは, 外で実装, delegateのセットは内部で行う(WKWebViewは, Navigationのみ)
storyboardを使わずコードのみで実装

サンプルの構成

WebHandler : iOS7, iOS8で, UIWebView, WKWebViewを分ける, 機能もそれぞれ分ける
そのほかのView
カテゴリ : UIWebView+Info.m : UIWebViewで, タイトルや, URLを取得するための拡張機能コードは, 一部省略しています(AppDelegate.mなど)

UIWebView+Info.h

#import 

@interface UIWebView (Info)

- (NSString *)title;
- (NSString *)URLString;
- (NSURL *)URL;

@end

UIWebView+Info.m

#import "UIWebView+Info.h"

@implementation UIWebView (Info)

- (NSString *)title {
    return [self stringByEvaluatingJavaScriptFromString:@"document.title"];
}

- (NSString *)URLString {
    return [self stringByEvaluatingJavaScriptFromString:@"document.URL"];
}

- (NSURL *)URL {
    return [NSURL URLWithString:self.URLString];
}

@end

WebHandler.h

#import 
#import 

typedef void (^CompletionBlock)(id, NSError*);

@interface WebHandler : NSObject

- (id)webView;
- (void)layout:(CGRect)frame;
- (void)setDelegate:(id)delegate;
- (void)clean;

// Load
- (void)loadRequest:(NSURLRequest *)request;
- (void)loadURL:(NSString *)url;
- (void)stopLoading;

// Web history
- (void)goBack;
- (void)goForward;
- (BOOL)canGoBack;
- (BOOL)canGoForward;
- (BOOL)isLoading;

// JavaScript
- (void)stringByEvaluatingJavaScriptFromString:(NSString *)javascript completion:(CompletionBlock)completion;

// Info
- (NSString *)title;
- (NSURL *)URL;

@end

WebHandler.m

#import "WebHandler.h"
#import 
#import "UIWebView+Info.h"

@interface WebHandler()

@property (nonatomic) UIWebView *uiwebView;
@property (nonatomic) WKWebView *wkwebView;
@property (nonatomic) BOOL ios8;

@end

@implementation WebHandler

- (id)init {
    if (self = [super init]) {
        self.ios8 = [WKWebView class] != nil;
        if (self.ios8) {
            self.wkwebView = [[WKWebView alloc] init];
        }
        else {
            self.uiwebView = [[UIWebView alloc] init];
        }
    }
    return self;
}

- (id)webView {
    if (self.ios8) {
        return self.wkwebView;
    }
    return self.uiwebView;
}

- (void)layout:(CGRect)frame {
    if (self.ios8) {
        self.wkwebView.frame = frame;

    }
    else {
        self.uiwebView.frame = frame;
    }
}

- (void)setDelegate:(id)delegate {  // This is for Navigation Delegate
    if (self.ios8) {
        self.wkwebView.navigationDelegate = delegate;
    }
    else {
        self.uiwebView.delegate = delegate;
    }
}

- (void)setUIDelegate:(id)delegate {  // This is for only ios8
    if (self.ios8) {
        self.wkwebView.UIDelegate = delegate;
    }
}

- (void)clean {
    if (self.ios8) {
        self.wkwebView.navigationDelegate = nil;
    }
    else {
        self.uiwebView.delegate = nil;
    }
    
    if ([self isLoading]) {
        [self stopLoading];
    }
}


#pragma mark - Common Features

/*
 * Load
 */
- (void)loadRequest:(NSURLRequest *)request {
    if (self.ios8) {
        [self.wkwebView loadRequest:request];
    }
    else {
        [self.uiwebView loadRequest:request];
    }
}

- (void)loadURL:(NSString *)url {
    [self loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
}

- (void)stopLoading {
    if (self.ios8) {
        [self.wkwebView stopLoading];
    }
    else {
        [self.uiwebView stopLoading];
    }
}

/*
 *  History
 */
- (void)goBack {
    if (self.ios8) {
        [self.wkwebView goBack];
    }
    else {
        [self.uiwebView goBack];
    }
}

- (void)goForward {
    if (self.ios8) {
        [self.wkwebView goForward];
    }
    else {
        [self.uiwebView goForward];
    }
}

- (BOOL)canGoBack {
    if (self.ios8) {
        return [self.wkwebView canGoBack];
    }
    else {
        return [self.uiwebView canGoBack];
    }
}

- (BOOL)canGoForward {
    if (self.ios8) {
        return [self.wkwebView canGoForward];
    }
    else {
        return [self.uiwebView canGoForward];
    }
}

- (BOOL)isLoading {
    if (self.ios8) {
        return [self.wkwebView isLoading];
    }
    else {
        return [self.uiwebView isLoading];
    }
}

// goToBackForwardListItem is only for iOS8 WKWebView

#pragma mark - JavaScript
- (void)stringByEvaluatingJavaScriptFromString:(NSString *)javascript completion:(CompletionBlock)completion {
    if (self.ios8) {
        [self.wkwebView evaluateJavaScript:javascript completionHandler:completion];
    }
    else {
        [self.uiwebView stringByEvaluatingJavaScriptFromString:javascript];
    }
}


#pragma mark - Info
/*
 * Info
 */
- (NSString *)title {
    if (self.ios8) {
        return [self.wkwebView title];
    }
    else {
        return [self.webView title];
    }
}

- (NSURL *)URL {
    if (self.ios8) {
        return [self.wkwebView URL];
    }
    else {
        return [self.webView URL];
    }
}
@end

UIHeaderView.h

#import 

@interface UIHeaderView : UIView

@property (nonatomic) UILabel *titleLabel;

@end

UIHeaderView.m

#import "UIHeaderView.h"

@implementation UIHeaderView

- (id)init {
    if(self = [super init]) {
        [self setBackgroundColor:[UIColor grayColor]];
        
        self.titleLabel = [[UILabel alloc] init];
        [self.titleLabel setTextColor:[UIColor whiteColor]];
        [self.titleLabel setTextAlignment:NSTextAlignmentCenter];
        [self addSubview:self.titleLabel];
    }
    return self;
}

- (void)layoutSubviews {
    self.titleLabel.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
}

@end

UIFooterView.h

import 

@interface UIFooterView : UIView

@property (nonatomic) UIButton *backButton;
@property (nonatomic) UIButton *forwardButton;

@end

UIFooterView.m

#import "UIFooterView.h"

#define kBUTTONSIZE 80

@implementation UIFooterView

- (id)init {
    if(self = [super init]) {
        [self setBackgroundColor:[UIColor grayColor]];
        self.backButton = [[UIButton alloc] init];
        [self.backButton setTitle:@"Back" forState:UIControlStateNormal];
        [self.backButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
        
        self.forwardButton = [[UIButton alloc] init];
        [self.forwardButton setTitle:@"Forward" forState:UIControlStateNormal];
        [self.forwardButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
        
        [self addSubview:self.backButton];
        [self addSubview:self.forwardButton];
    }
    return self;
}

- (void)layoutSubviews {
    CGRect viewRect = self.frame;
    self.backButton.frame = CGRectMake(0, 0, kBUTTONSIZE, viewRect.size.height);
    self.forwardButton.frame = CGRectMake(0 + kBUTTONSIZE + 10, 0, kBUTTONSIZE, viewRect.size.height);
}
@end

ViewController.h

#import 
#import 

@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"
#import "WebHandler.h"
#import "UIHeaderView.h"
#import "UIFooterView.h"

#define kHEADERHEIGHT 44
#define kFOOTERHEIGHT 44

@interface ViewController ()

@property (nonatomic) WebHandler *webhandler;
@property (nonatomic) UIHeaderView *header;
@property (nonatomic) UIFooterView *footer;
@property (nonatomic) int webCount;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    // Web
    self.webhandler = [[WebHandler alloc] init];
    [self.webhandler setDelegate:self];
    
    self.webCount = 0;
    
    // Header
    self.header = [[UIHeaderView alloc] init];
    
    // Footer
    self.footer = [[UIFooterView alloc] init];
    [self.footer.backButton addTarget:self action:@selector(backClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.footer.forwardButton addTarget:self action:@selector(forwardClick:) forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:self.header];
    [self.view addSubview:self.webhandler.webView];
    [self.view addSubview:self.footer];
    
    [self.webhandler loadURL:@"http://google.com.sg"];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
   
    if (self.isViewLoaded && [self.view window] == nil) {
        [self dispose];
        self.view = nil;
    }
}

- (void)dealloc {
    [self dispose];
}

- (void)dispose {
    if (self.webhandler != nil) {
        [self.webhandler clean];
    }
}

- (void) viewWillLayoutSubviews {
    
    // Calculate layout
    CGRect viewRect = self.view.frame;
    self.header.frame = CGRectMake(viewRect.origin.x,
                                   viewRect.origin.y,
                                   viewRect.size.width,
                                   kHEADERHEIGHT);
    [self.webhandler layout:CGRectMake(viewRect.origin.x,
                                      viewRect.origin.y + kHEADERHEIGHT,
                                      viewRect.size.width,
                                      viewRect.size.height - kHEADERHEIGHT - kFOOTERHEIGHT)];
    
    self.footer.frame = CGRectMake(viewRect.origin.x,
                                   viewRect.origin.y + viewRect.size.height - kFOOTERHEIGHT,
                                   viewRect.size.width,
                                   kFOOTERHEIGHT);
    
}

#pragma mark - UIWebViewDelegate(iOS7)
- (void)webViewDidStartLoad:(UIWebView *)webView {
    // Start Loading
    NSLog(@"Start iOS7");
    self.webCount++;
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.webCount--;
    if (self.webCount == 0) {
        NSLog(@"Finish iOS7");
        [self.header.titleLabel setText:[self.webhandler title]];
    }
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSLog(@"Erorr iOS7");
}

#pragma mark - WKWebViewDelegate(iOS8)
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@"Start iOS8");
}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    [self.header.titleLabel setText:[self.webhandler title]];
    NSLog(@"title %@", [self.webhandler title]);
    NSLog(@"Finish iOS8");
}

- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {
    NSLog(@"Error iOS8");
}

#pragma mark - Button Click
- (void)backClick:(id)sender {
    if ([self.webhandler canGoBack]) {
        [self.webhandler goBack];
    }
}

- (void)forwardClick:(id)sender {
    if ([self.webhandler canGoForward]) {
        [self.webhandler goForward];
    }
}
@end

実行結果

iOS7, iOS8 ともに, 同じ結果が得られます

リファレンス

NS(WKWebView)
Professional Programmer

iOS8 ステータスバー対策

2014-10-18T11:24:00.000+09:00

どうやらiOS8 SDKから, landscape時にステータスバーなくなりました. WWDCでのデモどおり, そして, beta, GMとそのままでXCode6.0.1と最終的にステータスバーはやっぱりなくなるっぽいです.
SDKを8に変更してコンパイルすると, iphoneのlandscape時にステータスバーが自動で消えます, ipadはそのまま残ります XCode5のままだとステータスバーは残ります
landscape時に, より画面のスペースを確保するのが狙いらしいですが, アプリの作りによっては大問題です.

アプリの作り方における問題

UIを作る方法は,

storyboard
xib
コード

この場合, 問題になるのは, コードですべて開発している場合です. storyboardや, xibの場合はよしなにやってくれるはずです.

対策

ステータスバーの高さを動的に計算します. UIViewControllerのviewWillLayoutSubviews, UIViewのlayoutSubviewsメソッド内で, レイアウト(frame)の計算をおこないます. これらのメソッドは回転時にも呼ばれるので, そこで修正が可能です. ステータスバーの計算は以下で行います

 
CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
CGFloat statusBarHeight = statusBarSize.height

サンプル

headerとその下にborderを入れたものです. もちろんstoryboardは使用していません.

 
#import "ViewController.h"

#define kHEADERHEIGHT 44

@interface ViewController ()

@property (nonatomic) UIView *headerView;
@property (nonatomic) UIView *borderView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    
    // Add Header
    self.headerView = [[UIView alloc] init];
    [self.headerView setBackgroundColor:[UIColor cyanColor]];
    
    self.borderView = [[UIView alloc] init];
    [self.borderView setBackgroundColor:[UIColor grayColor]];
    
    [self.view addSubview:self.headerView];
    [self.view addSubview:self.borderView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewWillLayoutSubviews {
    CGFloat statusBarHeight = [[UIApplication sharedApplication] statusBarFrame].size.height;
    
    self.headerView.frame = CGRectMake(0, statusBarHeight, self.view.frame.size.width, kHEADERHEIGHT);
    self.borderView.frame = CGRectMake(0, statusBarHeight + kHEADERHEIGHT, self.view.frame.size.width, 0.5);
}
@end

Swift

import UIKit

let kHEADERHEIGHT : CGFloat = 44.0

class ViewController: UIViewController {
    
    var headerView : UIView
    var borderView : UIView
    
    override init() {
        self.headerView = UIView()
        self.borderView = UIView()
        super.init()
    }
    
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?) {
        self.headerView = UIView()
        self.borderView = UIView()
        super.init(nibName: nibName, bundle: nibBundle)
    }

    required init(coder aDecoder: NSCoder) {
        self.headerView = UIView()
        self.borderView = UIView()
        super.init(coder: aDecoder)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.whiteColor()
       
        self.headerView.backgroundColor = UIColor.cyanColor()
        
        self.borderView.backgroundColor = UIColor.grayColor()
        
        self.view.addSubview(self.headerView)
        self.view.addSubview(self.borderView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func viewWillLayoutSubviews() {
        
        let statusBarHeight = UIApplication.sharedApplication().statusBarFrame.height
        self.headerView.frame = CGRectMake(0, statusBarHeight, self.view.frame.size.width, kHEADERHEIGHT)
        self.borderView.frame = CGRectMake(0, statusBarHeight + kHEADERHEIGHT, self.view.frame.size.width, 0.5)
    }
}

結果

iOS Simulator iOS8.0 iPhone4sでの結果です

portrait時です

landscape時です
ステータスバーがなくなりました.

これをiOS7.1のsimulatorでやると, ステータスバーは残ったままになります

UIIVewに穴をあける

2014-08-09T19:37:00.003+09:00

ひさびさの投稿になりました最近は, iOSとサーバーサイドの仕事にほぼ集中するような状態です今回はUIViewに穴をつくり, 下のViewを表示するというViewをつくります Original English version is here.

早速ですが例です

結果から先に表示すると,
このような形になります. "Touch me!"というのは, UIButtonで, UIViewControllerの上に乗っていますその上に, 青い薄い色のUIViewを重ねています. 通常ですと, この薄い色がボタンに重なるはずですが, ホールを作っているので下がくっきり見えています.

このUIの実現方法

上に重ねるViewに対して, UIRectFillを使って描画します. 色は, 透明を使います.

HoleView.h

#import 
@interface HoleInViewController : UIViewController
@end

HoleView.m

#import "HoleView.h"
 
@implementation HoleView
 
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
 
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGRect hole = CGRectMake(100, 100, 100, 40);
    [[UIColor clearColor] setFill];
    UIRectFill(hole);
}

このViewの使い方

ヘッダーは省略します

#import "HoleInViewController.h"
#import "HoleView.h"
 
@interface HoleInViewController ()
 
@property (nonatomic)UIButton *button;
@property (nonatomic)HoleView *holeView;
 
@end
 
@implementation HoleInViewController
 
- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
     
    self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.button setTitle:@"Touch me!" forState:UIControlStateNormal];
    [self.button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
     
    self.view.backgroundColor = [UIColor whiteColor];
     
    self.holeView = [[HoleView alloc] init];
    self.holeView.backgroundColor = [UIColor colorWithRed:0.0 green:0.1 blue:1.0 alpha:0.3];
     
    [self.view addSubview:self.button];
    [self.view addSubview:self.holeView];
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
-(void)viewWillLayoutSubviews {
     
    self.button.frame = CGRectMake(100, 100, 100, 40);
    self.holeView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
}
@end

これで先ほど見せた例は完成です. さて次回は円のホールの作り方です

Magical Record DAO

2014-05-17T11:31:00.002+09:00

前回に続いて, Magical Recordに関する話題です.
前回は, セットアップの方法と, 利用するための初期化のコードまで書きました
今回は実際の操作(DAO)をつくります
こちらが前回の分
Magical Record 最初のステップ

データ構造

今回使用するデータはこんな感じです
Country

code Integer32
key String

Countryという名前のNSManagedObjectで, Integerと, Stringの2つのデータを持つ場合です
uniqueなキーの用なものが必要であれば, もう少し工夫が必要です
さて次はこれらのCRUD処理を書いていきます

Create 作成

-(Country *)createCountry:(int)code key:(NSString *)key {
    Country *country = [Country MR_createEntity];
    country.code = [NSNumber numberWithInt:code];
    country.key = key;
    return country;
}

利用方法

CountryDAO *cdao = [[CountryDAO alloc] init];
[cdao createCountry:1 key:@"goodtimebiz.us"];
[[NSManagedObjectContext MR_defaultContext] MR_saveToPersistentStoreAndWait];

最後にcommitにあたるコードをいれます

Read データをとってくる

Find All と, 属性での検索の例をのせます

-(NSArray *)findAll {
    return [Country MR_findAll];
}

-(Country *)findByCode:(int)code {
    return [Country MR_findFirstByAttribute:@"code" withValue:[NSNumber numberWithInt:code]];
}

codeで検索します

Delete

データが多い場合は, 一気に消すために truncateを使いましょう
1件ずつ消す場合は, MR_deleteAllMatchingPredicateを使います

-(void)deleteAll {
    [Country MR_truncateAll];
}

Update

Updateは特に解説するまでもないです
findなどでデータをとってきて, データを直接更新最後に

[[NSManagedObjectContext MR_defaultContext] MR_saveToPersistentStoreAndWait];

を忘れずに

NSPredicate

少し, 条件を複雑にしたい場合, SQLのWHERE部分に相当する部分は, CoreData同様, Magical RecordでもNSPredicateを利用します
少し例をかえます. Itemという新たなデータを作りました Item

from Date
name String
to Date
uid String

少し複雑になりました
Deleteの例

-(void)deleteByUid:(NSString *)uid {
     
    NSPredicate *predicate = [NSPredicate predicateWithFormat:@"uid == %@", uid];
    [Item MR_deleteAllMatchingPredicate:predicate];
}

NSPredicateを使って, uidという値で検索して, deleteします.検索にかかったものをdeleteします
さらに複雑な例ですfromという時間を利用します

-(NSArray *)findBetweenFromTo:(NSDate *)from to:(NSDate *)to {
    NSPredicate *predicate = [NSPredicate predicateWithFormat:@"(from >= %@) AND (to <= %@)", from, to];
    return [Item MR_findAllSortedBy:@"from" ascending:YES withPredicate:predicate];
}

ユニークなキー

CoreDataは自動的にprimary key的なものが追加されますが,　開発者側ではアクセスできません
自分自身で primary key 的なものを管理したい場合新たに, ユニークなキーを要素として追加する必要があります
個人的にはこんな感じに作っています

Item *item = [Item MR_createEntity];
NSString *uid = [[[item objectID] URIRepresentation] lastPathComponent];

Magical Record 最初のステップ

2014-05-11T12:06:00.001+09:00

iOSでSQLiteを使用していればおそらくCore Dataを使っているかと思います。
Core Dataの登場で, DBの操作はずいぶん楽になりました. ORMapperがあると楽ですよね.
Core Dataを普通に使う場合, コネクションの部分や, Contextの処理は自身で書きます
これが意外に面倒だったりします.
Core Dataを普通に利用する場合はこちらでどうぞ.(English)

Core Data

Magical Record

このCoreDataをさらにwrapするライブラリ, Magical Recordがあります.
Rubyの, Active Recordの操作感で実装できるwrapperです.
上で書いたような処理を内部でやってくれるのでデータ処理の部分のみに集中できるという利点があります
今回は導入部分のみで, 次回データ操作(DAO)の部分を扱います
DAOはこちら

ステップ

導入におけるステップです

CoreData.frameworkをリンク
Magical Recordのソースをgithubから持ってきて, プロジェクトにそのまま入れる
xcdatamodeldファイルを準備(ここは普通のCoreDataと同じでよい)
ModelファイルをXCodeから作成
AppDelegateにコードを書く

1, 3はCoreDataと同じです. Core Data関連は筆者の別ブログ(English)上で確認してください

AppDelegate

AppDelegateにコードを書き足します. ピュアCoreDataと比べるとずいぶんシンプルです

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    [MagicalRecord setupCoreDataStackWithStoreNamed:@"Model"];
     
    return YES;
}

一行です. Modelのところはファイル名です. 適宜かえてください. さてこれで使用する準備は整いました. 次回は実際の操作です

Core Data テーブルの追加

2014-05-11T10:09:00.000+09:00

iOSでCore Data利用時に, テーブル(スキーマ)を追加する方法です。
サーバーサイドでは, スキーマの変更などはよくあります. テーブルの追加,カラムの追加削除, などなどです.
スキーマの変更コードをさらっと書いておしまい. というわけですが... iOSでももちろんそういったケースは考えられます.
Core Dataではどのようにするのでしょうか？ English

今回取り扱うケース

すでにリリース済み xcdatamodelがすでに存在する
新しいデータを追加(テーブルの追加にあたる)

How to?

新しいバージョンの .xcdatamodelを追加

まず, xcdatamodelはバージョンで管理していることを押さえましょう.
XCodeでは, rootのxcdatamodelが表示されています. 追加すると, モデル一覧が出てきます

さて, バージョンを追加しましょう
rootのxcdatamodelをポイントします
次に, "New File" -> "Core Data" -> "Data Model" と選択します
新しい xcdatamodelを追加できます. ここで, 名前を決めて終了です.

名前ですが, モデルの番号かもしくはソフトウェアのバージョンをつけておくとわかりやすいです

新しいバージョンにスイッチ

次に先ほど作成したバージョンにファイルを切り替える操作をします.
xcdatamodelは選択できます. つまり戻したりできます.
もういちど, rootのxcdatamodelをポイントします. File Inspector を観ましょう.
下の方に, "Model Version" というのがあります.
ここのドロップダウンで選択できます

新しいバージョンのファイルにデータを追加

先ほどの新しいファイルにデータを追加します
CustomHolidayというのを追加しました
基本的に, スキーマ変更のためのコードは,自動的にやってくれます. カラムの追加時, データ構造の変更時であれば, overrideして操作コードを書かないといけませんが

UIDatePickerをしまっておくUIをつくった

2014-04-07T21:08:00.003+09:00

こんにちは, 今回は, UIDatePickerに関する話題です。
UIDatePickerは, 日時を選択するためのUIで配置するだけでりようできるので便利ですが, サイズが大きいので場所をとりますよね.
なので, 見た目しまっておけるようなUIを作ってみました

TextDatePickerという名前でGithubで公開しています.
UITextFieldのようなところにボタンをつけました. このボタンを押すと, UIDatePickerが登場します.
もう一度タップすると, UIDatePickerをしまうことができます
UIPickerで変更した結果はその段階で文字列の時間に反映されます

使い方はGithubに書いてある通りです
ソースおよびリソースをコピーして, 数行書くだけで利用できます

このままでは使いづらいところもあるでしょうから, コードなどをいじってみてもよいかもしれません
UIViewを重ねたViewになっています.
一部iOS7のアニメーションを使っています

Java(Android)時間操作ライブラリ

2014-03-29T10:18:00.002+09:00

iOS に続いて, Java(Android)用に, 時間まわりのラリブラリを書きました GitHubで公開しています JavaDatekit build.xmlを準備しておきましたので, ant をお持ちの方は,

ant

で, dst/datekit.jar が作成されますので PureJavaでコーディングしていますので, Androidでも動きます

概要

時間操作に関わる操作を, Builderでまとめてみました. 基本的な操作はCalendarクラスを使って, Date, Calendarの相互の変換などを入れました Builderになっている部分で操作を行い, getのメソッドでデータを操作もしくは取得, format系のメソッドでString形式のデータを取得します

使い方

ソースコードをまるごとコピーするもしくは, antを使って, datekit.jar を作成してそれをライブラリとしてプロジェクトにコピーします(BuildPathを通します)

メソッド

コンストラクタ

public DateBuilder()
public DateBuilder( TimeZone zone )
public DateBuilder( Date date )

builder系

public DateBuilder on( Date date )
public DateBuilder addDay( int day )
public DateBuilder subDay( int day )
public DateBuilder begin()
public DateBuilder end()
public DateBuilder firstDateOfMonth()
public DateBuilder lastDayOfMonth()
public DateBuilder nextMonthFirst()
public DateBuilder getFromYMD( int year, int month, int day )
public DateBuilder getDayofDay( int day )
public DateBuilder getGMT()

get系

public int getYear()
public int getMonth()
public int getHour()
public int getSecond()
public Date getTime()
public Calendar getCal()
public boolean isWeekDay()
public boolean isWeekEnd()
public boolean before ( Calendar calendar )
public boolean before ( Date date )
public boolean after ( Calendar calendar )
public boolean after ( Date date )
public DateBuilder copy()

format系 Builderで持っている情報をStringで返します

public String formatYear()
public String formatMonth()
public String formatDay()
public String formatA()
public String formatB()
public String formatFull()

サンプル

テストより 年, 月, 日をセットします

DateBuilder builder = new DateBuilder();
builder.getFromYMD(2014, 3, 11);　　
System.out.println(builder.formatA());  // 2014/03/11

2014/03/11の00:00:00をCalendarインスタンスで取得します

Calendar cal = builder.getFromYMD(2014, 3, 11).begin().getCal();

GMT

DateBuilder builder = new DateBuilder(TimeZone.getTimeZone("GMT"));

iOS時間操作ライブラリ(DateKit)

2014-03-01T12:31:00.001+09:00

ちょっとしたアプリを開発しようかと思い立って, つらつらとコードを書いていたところ,さくっと機能的なところがまとまったので公開できそうな部分を切り離して, GitHubで公開いたしました, かなり久々の公開です iOSで時間などを操作するためのライブラリです, "DateKit"と名付けました URLはこちら中身はきわめてシンプルな, NSDateとNSStringのCategoryとして実装してありますので, 特に何か依存するライブラリなどはなく NSDateと, NSStringに機能が追加されたなあという程度のものですタイムゾーン的なところは意識していないです,(このあたりもやりたいなあ) GitHubでは英語の解説が中心ですので, 日本語の解説をこちらでエントリーしておきました

使い方

プロジェクトそのものは, staticライブラリになっているので, ビルドしてヘッダーをコピーしていただければ外部ライブラリとして活用できるはずです. その辺りが面倒であれば,

UnitTest

UnitTestを準備しておきました. DateKitTests.mというソースがありましてその中にざっくりとしたUnitテストが入っています実行のさせ方は, 通常のテストと同じで, XCodeでスキームを切り替えてTestで実行させればできます詳しくは, iOS UnitTest(XCTest) English でUnitTestの走らせ方は解説しています

メソッド

現在公開しているメソッドは以下のとおりです(後でかわるかも)

NSDate

-(NSDate *)getAdd:(int)days
-(NSDate *)getSub:(int)days
-(NSDate *)getFirstDateOfMonth
-(NSDate *)getLastMonthLast
-(NSDate *)getNextMonthFirst
-(int)getWeekDay
-(BOOL)isWeekEnd
-(BOOL)isWeekDay
-(int)getDay
-(int)getMonth
-(int)getYear
-(int)getHour
-(int)getMinutes
-(int)getSeconds
-(NSDate *)begin
-(NSDate *)end
+(NSDate *)getFromYMD:(int)year month:(int)month day:(int)day
-(NSDate *)getFromTime:(int)hour minute:(int)minute second:(int)second
-(NSString *)formatYear
-(NSString *)formatMonth
-(NSString *)formatDay
-(NSString *)formatA
-(NSString *)formatB
-(NSString *)formatFull
-(BOOL)before:(NSDate *)target
-(BOOL)after:(NSDate *)target

NSString

-(NSDate *)parseYYYYMMddD
-(NSDate *)parseYYYYMMddS
-(NSDate *)parseH
-(NSDate *)parseFull

例をいくつか

1日先のNSDateをとってくる

NSDate *today = [NSDate date];
NSDate *tomorrow = [today getAdd:1];

1日前のNSDateをとってくる

NSDate *today = [NSDate date];
NSDate *yesterday = [today getSub:1];

YYYY/MM/ddのフォーマットのNSStringをパースする(失敗するとnilがかえります)

NSString *str = @"2014/03/01";
NSDate *format = [str parseYYYYMMddS];

例を増やしていければなと思います(編集中)

gitでorigin/origin/masterをつくってしまったのでなんとかする

2014-02-15T09:34:00.001+09:00

こんにちは, 今回はgitでミスってしまったときの話です. 先日, jenkinsの設定をミスりまして, うっかりremoteに, origin/origin/masterを作ってしまいました origin/masterにプッシュするつもりが, jenkinsのタグうちの設定をミスったようですこれをなんとかしたかった訳ですが, 微妙に面倒な事になったのでメモ

いつも通りcheckout

このブランチを別へへマージしたかったのでチェックアウト

git checkout origin/master

すると, derived from origin/master となり, masterがチェックアウトされるこうなったら

git checkout origin/origin/master

derived from origin/origin/master となりますが, 一時チェック的になり操作が面倒おいおい！

名前を指定してcheckout

きちんと名前を指定すればちゃんと来ます

git checkout remote/origin/origin/master  origin/master

これで, 思い通りの, origin/origin/master が origin/master という名前で, ローカルにチェックアウトされました

リモートを消去する

さて, ここが怖いところです

git push --delete origin origin/master

これで消去できました

iOS7 レビューサイトへ飛ばす

2014-02-13T22:44:00.000+09:00

English is here アプリをリリースしたら, やはりレビューをかいてもらいたいのでなんとかして書いてもらえるように, レビューサイトへ誘導したい iOS6までは,

iOS7は？

iOSでレビューサイトへ行くというのは, App Storeのレビューの部分へ行くということですどうやらiOS7から, レビューの部分に誘導するURIがなくなったようですですので明確な回答を得られていません.

それでもなんとかしたい

明確な回答ではありませんが, アプリのページまでは誘導できるようです. ここからユーザにレビューまで行っていただかなければなりません App StoreアプリをHackできればよいのですが...

ライブラリを利用

Appiraterというライブラリがあります. GitHub このライブラリを組み込めば簡単にレビューサイトへの誘導を実装できます

どのように実現するか?

アイディアとしては以下のとおりです

SKStoreProductViewControllerでアプリ内にApp Store的な機能を入れる
UIApplication openURLでApp Storeアプリを起動する

SKStoreProductViewControllerを使うやり方には罠がありますこれは, アプリ内で, App Storeめいたことをするわけですが, レビュー機能がOffになっていますオプションで変更できると思いきやできません

Appiraterの使い方

SDKをダウンロードしてきて解凍します. 中にある, Appirater.h, Appirater.m, AppiraterDelegate.hと,必要な言語ファイル xxx.lproj をプロジェクトにコピーしますコードはGitHubを見た方が簡単です. デバッグモードの設定などパラメータに気をつける必要があります

[Appirater setAppId:@"YOUR_ITUNES_APP_ID"];
[Appirater setDaysUntilPrompt:7];
[Appirater setUsesUntilPrompt:5];
[Appirater setSignificantEventsUntilPrompt:-1];
[Appirater setTimeBeforeReminding:2];    // Days after selecting later
[Appirater setDebug:NO];                // Debug mode production should be NO
[Appirater appLaunched:YES];            // Launch when starting application

コードサンプル SKStoreProductViewController

SKStoreProductViewControllerを使ってよりシンプルに実装する場合

NSNumber *appId = [NSNumber numberWithInteger:YOUR_ITUNES_APP_ID]
SKStoreProductViewController *storeViewController = [[SKStoreProductViewController alloc] init];
[storeViewController loadProductWithParameters:@{SKStoreProductParameterITunesItemIdentifier:appId} completionBlock:nil];
storeViewController.delegate = self;  // SKStoreProductViewControllerDelegate
[self presentViewController:storeViewController animated:YES completion:^{
    // Open store view controller complete event  
}];

UIApplicationを利用した場合

NSString *templateReviewURLiOS7 = @"itms-apps://itunes.apple.com/app/idAPP_ID";
NSString *reviewURL = [templateReviewURLiOS7 stringByReplacingOccurrencesOfString:@"APP_ID" withString:[NSString stringWithFormat:@"%@", @"YOUR_APP_ID"]];
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:reviewURL]];

YOUR_ITUNES_APP_ID は, iTunes 上でのアプリのIDです

UINavigationControllerとUIViewControllerで画面固定

2014-01-26T11:00:00.001+09:00

こんにちは, 今回は最近はまったUINavigationControllerとUIViewController, English UIViewControllerのOrientationの固定方法はいろいろなところで述べられていますが, ここにUINavigationControllerをはさむといろいろおこります. Storyboardやxibを使っている場合は特に問題ないはずですが, コードでガリガリUIを書いている場合は,　こういった問題がありますオリジナルはこちら(English) 早速いきましょう

ViewController画面固定

この例では, portraitにしています

@interface FixOrientationViewController ()
 
@end
 
@implementation FixOrientationViewController
 
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self.view setBackgroundColor:[UIColor whiteColor]];
}
 
#pragma mark - Orientation
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  // iOS5
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
 
-(BOOL) shouldAutorotate {
    return YES;
}
 
- (UIInterfaceOrientation) preferredInterfaceOrientationForPresentation {
    return UIInterfaceOrientationPortrait;
}
 
-(NSUInteger)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskPortrait;
}
@end

#pragma mark 以下の部分がキーです. その部分からが, portraitのfixコードですこれを通常のコードで呼び出すと, 特に問題なく画面が固定されます

問題のあるコード

UINavigationContrllerを入れます

FixOrientationViewController *controller = [[FixOrientationViewController alloc] init];
[controller setTitle:@"Bee"];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:controller];
[self presentViewController:nav animated:YES completion:nil];  // FixOrientationViewController setting doesn't work

そうすると, UINavigationContrllerが加わるのと同時に, 中に存在するはずのFixOrientationViewControllerが画面固定されなくなります

対処法

UINavigationControllerをextendsしてportrait固定のUINavigationControllerをつくってしまおうというのがアイディアです

@interface FixNavViewController ()
@end
 
@implementation FixNavViewController
 
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}
 
#pragma mark - Orientation
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { // iOS5
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
 
-(BOOL) shouldAutorotate {
    return YES;
}
 
- (UIInterfaceOrientation) preferredInterfaceOrientationForPresentation {
    return UIInterfaceOrientationPortrait;
}
 
-(NSUInteger)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskPortrait;
}

あらためてこれを使ってコードを書きます

FixOrientationViewController *controller = [[FixOrientationViewController alloc] init];
[controller setTitle:@"Bee"];
FixNavViewController *nav = [[FixNavViewController alloc] initWithRootViewController:controller];
[self presentViewController:nav animated:YES completion:nil];

Git for Mac

2014-01-11T21:58:00.000+09:00

オリジナルはもうひとつのプロフェッショナルプログラマー(English)です MacでGitを使いたい。どうやってインストールするの？　です。EclipseのEgitを使うのも一つの手です。個人的には, SourceTreeなんかもいいかなと思います。通常のコマンドGitをインストールするにはちょっとしたことが必要です。いくつか方法があると思いますが, 個人的には, homebrewを使った方法が簡単だと思っています。 Marveriks, Mounttain Lionで実行済

手順

homebrewをインストールしていない場合は最初からですRubyはデフォルトであるはずです。

homebrewをインストール
homebrewを使って, git をインストールする

インストールhomebrew

homebrewは, MacPortsと同じようなものです。 Rubyがあれば簡単にインストールできます。詳しくは, こちらインストールは以下のコマンドで行きます。

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

gitをhomebrewでインストール

homebrewがインストールできれば次はgitです。

brew doctor  # check brew
brew update  # this is update(not required)
brew install git

本当に必要なのは最後のコマンドです。他はbrewのチェックと言ったところでしょうか

確認

gitが正しくインストールされてかを確認(ターミナル)

git --version

iOSとAndroidでjson

2013-12-30T22:14:00.002+09:00

もうひとつのプロフェッショナルプログラマーからの転載まとめ版です。こちらがオリジナル iOS版(日本語) Android版(English) ネットワーク関係のプログラミングをしていると, json形式のデータを扱うことがあります。サーバ側, クライアント側両方です。筆者の場合, iOS, Android, Amazon KindleのIn app purchase(billing)なんかの, レシートを扱うときに,使用しました。

iOS

iOSには, 5以降で NSJSONSerialization クラスというが登場しました。 JSONObjectWithData というメソッドで, NSDataをNSArrayや, NSDictionaryなどに変換できます返り値はidで, NSArray, NSDictionaryもしくはMutable系となります。 NSDataを引数として取るので, NSString の場合は変換の必要があります。オプションとして, NSJSONReadingMutableContainers, NSJSONReadingMutableLeaves, NSJSONReadingAllowFragments 後ろの二つがどのような場面で利用できるかいまいちわかっていないです。 iOS Developer Libraryに説明がでています。

NSString -> json -> NSArray, NSDictionary

NSString *str = @"[{\"key\":\"value\"}]";
NSError *error = nil;
NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
NSMutableArray *array = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
NSLog(@"%@", array);
NSLog(@"%@", [array objectAtIndex:0]);

この場合, NSDictonaryとしてデータを扱えます。このように, NSArray, NSMutableArray, NSDictionary, NSMutableDictionary として扱えるので, 大変便利です。

NSDictionary -> json -> NSData

// dict to json(NSData)
NSMutableDictionary *mdic = [[NSMutableDictionary alloc] init];
[mdic setObject:@"madoka" forKey:@"name"];
[mdic setObject:[NSNumber numberWithInt:14] forKey:@"age"];
     
if([NSJSONSerialization isValidJSONObject:mdic]){
    NSData *json = [NSJSONSerialization dataWithJSONObject:mdic    options:NSJSONWritingPrettyPrinted error:&error];        
    NSLog(@"json %@", [[NSString alloc] initWithData:json encoding:NSUTF8StringEncoding] );
        
}
// Result
// json {
//  "age" : 14,
//  "name" : "madoka"
//}

NSJSONSerializationのdataWithJSONObjectを使って, NSMutableDictionaryを jsonにそして, NSDataにしてNSStringで表示させています。isValidJSONObjectを使うと, 正しい形式かどうかをチェックできます。

Android

さて, こちらは外部ライブラリの力を借ります。 JSON-javaというのがあります。以前, サーバ側で利用していたのですが, Androidでも利用できそうなので, Android仕様でコンパイルしてみましたがうまくいきましたので, そのまま利用してみました。

サンプル

文字列をJSONObjectに変換, キーを使って取り出したり, 文字列型に変換したりします。

String str = "{\"key\":\"value\"}";
JSONObject jobj = new JSONObject(str);
String value = jobj.getString("key");
// Long, Boolean, Object, JSONArray, JSONOject
System.out.println(value); // "value"
         
String str2 = "{\"name\":\"Homuhomu\", \"age\":14}";
JSONObject jobj2 = new JSONObject(str2);
Integer age = jobj2.getInt("age");
System.out.println(age);   // 14
System.out.println(jobj2.toString());  // String style

Android Chromeからアプリを起動する

2013-12-03T23:09:00.002+09:00

もうひとつのProfessional Programmerと同じ内容です。 English is here iOSとSafariの組み合わせと同様に, AndroidのChromeアプリから, AndroidのIntentが呼び出せます。つまりアプリが起動できます。アプリに対してパラメータを入れたりすることができます。

ステップ

Androidアプリケーションの準備
URLの準備
Chromeを開いて, リンクを表示し, 実行

Androidアプリケーションの準備

例として, 起動するためのActivity, MainActivityに設定は, AndroidManifest.xml に書きます。

<activity android:label="@string/app_name" android:name="com.atmarkplant.webapp.MainActivity" android:screenOrientation="portrait" android:theme="@android:style/Theme.Holo.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
 
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
            <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:scheme="key" android:host="application" android:path="/"/>
            </intent-filter>
 </activity>

ポイントは, 2段目のintentfilterです。 action, category のところはコピペでO.K. 最後のdataのandroid:schme, android:host, android:pathは, Chromeのリンクのパラメータとして利用するので, ここをカスタマイズしていきます。

URLの準備

リンクを作ります。筆者は, これ用のサーバを用意し, HTMLファイルを用意してリンクを作りました。

<a href="intent://application/#Intent;scheme=key;package=com.atmarkplant.webapp;end"> Start Web App </a>

書式は, このようになります。Google Developer参照

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 
   end;

上でいう例は, hostに, application, path は, /, schemeには, key というのをそれぞれ入れました。 package は, アプリのパッケージのことです。

Chromeを開いて, リンクを表示し, 実行

早速実行してみましょう。実行方法は, Chrome を開いて, このリンクを表示させます。そしてリンクをたたきます。リンクを開くと, Androidアプリケーションが起動します。

パラメータの渡し方・受け取り方

まずは, 渡し方です。これはリンクの中に埋め込みます。

<a href="intent://application/#Intent;scheme=key;package=com.atmarkplant.webapp;S.key1=value1;S.key2=value2;end"> Start Web App </a>

S. をつけて, key = value という形で表現します。ここでいう例は, key1, value1, key2, value2 になります。

続いて受け取り方です。結構迷いましたが, 単純に考えればわかります。intent で受け取っているので, Activity からgetIntent()で Intentを取得して, そこから値を取り出します。通常の起動方法の場合は, 値はnullになります。

Intent intent = getIntent();
String value1 = intent.getStringExtra("key1");
String value2 = intent.getStringExtra("key2");

このコードを, Activityのどっかに埋め込みます。それにより挙動が返られますね。先ほど申しましたとおり, パラメータを渡さない通常のアプリとして起動すると, value1, value2は, nullになります。

APKとjarを解体する

2013-11-09T09:42:00.000+09:00

こんにちは, 最近iOSとAndroidとJava Server系を行ったり来たりする日々が続いている開発者です。今回筆者がはまった問題は以下の2つです

3rdパーティー提供のライブラリ(.jar)の中身が知りたい
自分で作成したapkが正しく作成されているかを確認

1は, まああまりよろしくないリバースエンジニアリングなわけですが... Bugなのか, 自分が悪いのかどうしてもわからなかったので少し見させていただきました, それ以外の用途はないですよ。 2は, Androidのproguardをかけたときにまったく動かなくなってこちらが元記事(APK Analysis(English)) 筆者の別ブログです APK Anaysis is English post. If you want to read in English, please access this. さて本題です。

内容

APKの中身を見る(構成)
jarを解体そしてコードを見る
APKの中身をみる(コードも)

APKの中身を見る(構成)

apk というのは, 実はただのzipです。.zipに拡張子を変更して, 解凍すると構成するファイルはだいたい見えますこれだけではよくわからないので, 解析ツールを使います apktoolというのがあります。 Windows, Linux, Mac バージョンそれぞれあります。私は, Macバージョンで試してみました。ダウンロードして解凍すると, それぞれ, スクリプトがありますのでそれを利用します

./apktool decode xxx.apk

Macの場合これで, フォルダに展開されます, 中身はこんな感じです

xxx
| - AndroidManifest.xml
| - apktoolyml
| - assets
| - lib
| - res
| - smali

jarを解体そしてコードを見る

.jar というのはただのzipであるのは, よく知られています。 jarが構成するクラスファイルを閲覧するには, javaのコマンドを使います。

jar -tf xxx.jar

xxx.jar が jarファイルしかしこれではソースの中身は見れません。そこでデコンパイルします Java Decompilerというツールがありまして, jarを取り込んで解析してくれます。 JD-GUIなど, GUIツールもあります。 JD-GUIの使い方は非常に簡単なので, 特にここでは触れません。

JD-GUIを使用した例です(Mac OS X) これでjarファイルのソースはばっちり見えます。

APKの中身をみる(コードも)

さて, はじめの方法ではファイル構成は見えても肝心のコードは見えません。 apktoolを使ってもコードは無理です。そこで, apk内にあるdexをjarに変換して, JD-GUIでjarを展開することで, ソースをみます

Steps

dex2jar を使ってclass.dexをjarに変換
Java Decompileを利用してjarを読み込む

dexをjarに変換

先ほど, apk をzip にして解凍しました。その時に, class.dexというファイルが生成されています dexの詳しい説明は省きます, Dalvikが読み込むための形式とでもいいましょうか dex2jarは, dexをjarに変換するツールです, ダウンロードして解凍するとスクリプトとjarがあります。Windows, Linux, Macで動作します

./dex2jar.sh classes.dex

これで, カレントディレクトリに, jarファイルが生成されますので, あとはJava Decompileで閲覧できます ※それにしてもproguardはやっかいなやつです(ぼやき)

iOS7 対応アプリにする(マイクとUI)

2013-09-23T23:04:00.003+09:00

iOS7が解禁です。 UIが大幅にアップデートするなど, いろいろあるみたいですが, そのおかげで以前に作っていたアプリに変更を入れないといけないことが判明。SDKの変更をしたら色々出てきたそのレポートです。変更が必要になってしまった部分

マイクの使用にパーミッションが必要になったこと

SDKのアップデータの為に変更を余儀なくされた部分。

storyboard がiOS6, iOS7用のviewに分かれ, iOS7用のviewで不具合が

内容

マイクのパーミッション
バージョンの取得と動作
Navigationbarの処理

マイクのパーミッション

GPSのデータを使用する際やプッシュ通信の許可と同様に, ダイアログが出てきます(iOS7)。その許可なくマイクロを使用すると, Applicationが落ちるそうです。以下のコードを追加します。

if([[AVAudioSession sharedInstance] respondsToSelector:@selector(requestRecordPermission:)])
{
        [[AVAudioSession sharedInstance] requestRecordPermission:^(BOOL allowed){
            NSLog(@"Allow microphone use? %d", allowed);
            if ( !allowed ) {
                 // If not enabled microphone, here is
            }
        }];
}

iOS6ではこのコードは無視されます。当然iOS7 SDKでコンパイルしないといけません。requestRecordPermission というメソッドが存在しないからです。一度許可すると, allowed の部分が常に, trueになります。ダイアログは出ません。ですので, マイクを使用する部分にこのコードを入れておくとよいでしょう。ブロックコードでないバージョンもあります。

バージョンの取得と動作

いろいろ7のおかげで動かなくなったUIのために, バージョン別コードを挿入する必要があったので作っておく

+(BOOL)isOver7 {
    const float version = [[[UIDevice currentDevice] systemVersion] floatValue];
    return version >= 7.0;
}

iOS7の場合, trueが返ります。 UIDevice の systemVersionを使います。

Navigationbarの処理

ここからはUIの管理です。 UIに関しては, Guideが詳しい。いろいろ対処法を伝授してくれるはず。端的に問題をいいますと, Navigationbar が透明になって, 座標の位置が変わった。今まで viewがbar の下から始まっていましたが透明になって, barの位置からになりました。ので, UIがずれます。

不透明にしてiOS6と同じ座標位置にする

これは簡単な対処です。

self.navigationController.navigationBar.translucent = NO;

UINavigationBar の translucent を使います。これで不透明になります。

地道にデルタを使ってUIの位置を直す

※AutoLayoutのプロパティをチェックしてればこの設定はありません。そして必要ありません。(デルタの部分は出てきません) iOS6の位置と, iOS7の位置をInterfaceBuider のデルタを使って変更することができます。つまり, 透明になった部分だけずらすということです。さて, storyboardがどう変わったのか見てみましょう。

storyboardのviewという欄でiOS6, iOS7のViewが登場します。選択すると, 見た目の違いがここで確認できます。

UITabbar

Navigationbarと同じでありまた, カスタムで画像や色を変更している場合は, 結構引っ掛かります。 tabbaritem の画像を変更している場合 setFinishedSelectedImage を使いますが, なぜかいうことを聞きません。 selectedImage というプロパティを直接操作します。

item.selectedImage = [UIImage imageNamed:@"filename"];

同様に, 不透明にできます。(ただしiOS7しか使えないので, 6では実行されないように処理する必要があります)

 self.tabBarController.tabBar.translucent = NO;

※UIに関しては, AutoLayout機能でなんとかしてくれたりします。ですので一概に問題が発生するとは言い難いです。 AutoLayoutはiOS6以降ですけども。

iOS Admob 簡単導入

2013-09-22T14:17:00.004+09:00

iOSでAdmobを導入する方法です。

こちらのアプリ(Colomemo) で実際に試している方法です。
無料ですので, 是非試してみてくださいな。
Admobはバージョンによって結構違ってくるので, その都度調べなおすのがまあまあ面倒です。

Versionは, 6.5.1です。このエントリーは, 筆者の別のブログ, iOS Admob(導入編), iOS Admob(表示されなかった場合の処理) の合併号のようなものです。今回の目的は, 表示すること, ネットに接続されていない場合にスペースが余るのを回避することです

ステップ

GoogleAdMobAdsSdkiOSをダウンロード
依存関係ライブラリ(Framework)を追加
Liner flagを追加
AdmobのWebサイトでIDを発行してもらう
GADBannarViewの設置
GADBannerViewDelegateの実装

GoogleAdMobAdsSdkiOSをダウンロード

GoogleAdMobAdsSdkiOS.zipをGoogleよりダウンロードして解凍します。libGoogleAdMOobAds.aおよび, .h ヘッダー達を使いたいプロジェクトにコピーして.a はリンクします。

解凍すると, thirdparty がどうとかいうディレクトリがありますが今回は使いません。

依存関係ライブラリ(Framework)を追加

必要なFrameworkを追加します。ドキュメントによると以下のFrameworkが必要です

AudioToolbox
MessageUI
SystemConfiguration
CoreGraphics

実際にリンクしてみて追加しなくてはならなかったもの(使ってないと思うんだけど)

AdSupport
StoreKit

Liner flagを追加

これをやらないとコンパイルが通りません。 Targetの”Other Liner Flags“に, -ObjCを追加します。

AdmobのWebサイトでIDを発行してもらう

必要なものは, パブリッシャー IDです。アプリケーションを追加してこれを入手してください。サイトURLなどは必要ないので空欄でいいのです。(登録に関しては省略) (Googleアカウントもしくはadmobアカウントが必要です)

GADBannarViewの設置

さて今回は, サンプルに従ってボトムにバナーを表示させてみましょう。

必要なヘッダ

#import "GADBannerView.h"

本体

@interface ViewController ()
@property(nonatomic, readwrite)GADBannerView *bannerView;
@end
 
@implementation ViewController
 
- (void)viewDidLoad
{
   [super viewDidLoad];
   [self initAd];
}
 
-(void)initAd {
    self.bannerView = [[GADBannerView alloc]
                   initWithFrame:CGRectMake(0.0,
                                            self.view.frame.size.height -
                                            GAD_SIZE_320x50.height,
                                            GAD_SIZE_320x50.width,
                                            GAD_SIZE_320x50.height)];
    self.bannerView.adUnitID = kADUNITID;
    self.bannerView.rootViewController = self;
    [self.view addSubview:self.bannerView];
}

kADUNITIDというのがパブリッシャーID(文字列です)です。これだけで表示されます。

GADBannerViewDelegateの実装

Admobは, web広告ですので, もちろんネットにつながっていないと,当然表示されません。デザインなどで,　広告が表示されない場合にぽっかりスペースが空くのはなんかしのびありません。そこで, 表示される場合と, 表示されない場合の挙動を変更するように直します。 GADBannerViewDelegate というのがこの機能を提供しています。広告を表示するUIを使うクラスにGADBannerViewDelegateをimplementsします。

ViewController

@interface ViewController : UIViewController
 
@end

GADBannerView にdelegateをset

[self.bannerView setDelegate:self];

self.bannerViewは,GADBannerViewです。

実装

- (void)adViewDidReceiveAd:(GADBannerView *)bannerView {
    // Success
}
 
 
- (void)adView:(GADBannerView *)view didFailToReceiveAdWithError:(GADRequestError *)error {
    // Fail
}

成功した場合がadViewDidReceiveAd, 失敗したときがdidFailToReceiveAdWithErrorです。筆者はここで, UIのサイズなどを調整したりしています。

iOS 下へ引っ張って更新(UIRefreshControlを使う)

2013-09-02T08:54:00.000+09:00

Twitterなどでよく見られるUIで、新しいアイテムを手動で更新する場合にスクロールして一番上の位置より下へ引っ張り新しいアイテムを上位にのせるというようなUIのことです。 iOS６より UIRefreshControlというのが登場した模様で簡単に実装できそうです。

特徴

storyboardなどUI側の操作は必要ない
下に引っ張って更新するタイプのみ, Gmailみたいに上に引っ張って古いアイテムを取得するタイプのものはサポートしていない

スクリーンショットがうまくとれませんでした。他にもいろいろな方がのせているので参考に。

Sample

UIはテーブルをひとつ用意したものだけです。それ以外は何もありません。

Header

@interface ViewController : UIViewController
@property(nonatomic, strong)NSArray *items;
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property(nonatomic) UIRefreshControl *refreshControl;
@end&nbsp

UIRefreshControlが入りました。

Code

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
 self.items = [[NSMutableArray alloc] init];
    [self addData:30];
    
   self.refreshControl = [[UIRefreshControl alloc] init];
   [self.refreshControl addTarget:self action:@selector(controlRefresh:) forControlEvents:UIControlEventValueChanged];
    
    [self.tableView addSubview:self.refreshControl];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    [self loadItem];
}

-(void)addData:(int)number
{
    NSMutableArray *tmps = [[NSMutableArray alloc] initWithArray:self.items];
    NSUInteger current = [self.items count];
    
    for ( int i=0; i < number; i++ )
    {
        [tmps addObject:[NSNumber numberWithInt:current+i]];
    }
    self.items =[NSArray arrayWithArray:tmps];
}

-(void)loadItem
{
    self.items = [self.items sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) {
        return [obj2 intValue] - [obj1 intValue];
    }];
    [self.tableView reloadData];
}


- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark -
#pragma mark UIRefreshControl
-(void)controlRefresh:(UIRefreshControl *)sender
{
    [self addData:20];
    [self loadItem];
    // Update
    [self.refreshControl endRefreshing];
}

#pragma mark -
#pragma mark UITableViewDataSource, UITableViewDelegate
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.items count];
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell"];
    if ( cell == nil )
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%d", [[self.items objectAtIndex:indexPath.row] intValue]];
    return cell;
}
@end

テーブルに数字を突っ込んでいます。逆順に並べ替えるコードを入れています。 -(void)controlRefresh:(UIRefreshControl *)senderというのが特徴です。これを実装しますselectorで指定したメソッドなので名前はどうとでもなります。ここで更新が発生した場合の処理を書きます。更新終了後endRefreshing を呼び出します。それで終了です。