[iOS] Auto Layout について

2012/09/20

こんにちは。きんくまです。

Xcode4.5が出ました。
Auto Layoutを使えばiPhone5の画面サイズにも対応することが可能です。

Auto LayoutはInterface Builderを使ったり、コードを直接書いたりすることで適用することができます。

詳しくはAppleのドキュメント

>> About Cocoa Auto Layout

WWDCのビデオ,ドキュメントを見ればわかります。

WWDC 2012: Introduction to Auto Layout for iOS and OS X

、、見ればわかるはずなんですが、今日やってみたところ、ちょっとひっかかってしまいました。
IBは基本使ってないので、コードでやりました。

それでUIViewのsetTranslatesAutoresizingMaskIntoConstraintsをNOをすればうまくいったのですが、わかるまでハマりました、、。

取り急ぎ、わかったところまで断片書いておきます。
AutoLayoutができるかどうかのif文の条件はあやしいかも。

autolayout_test

ARC使用

- (void)loadView
{
    UIView *myview = [[UIView alloc] init];
    myview.backgroundColor = [UIColor greenColor];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    
    [myview addSubview:redView];
    [myview addSubview:blueView];
    
//Auto layoutに対応する場合==iOS6以上
    if([myview respondsToSelector:@selector(addConstraints:)]){
        [myview setTranslatesAutoresizingMaskIntoConstraints:NO];
        [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];

        NSMutableArray *tmpConstraints = [NSMutableArray array];
        [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[redView(==100)]-30-[blueView(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]];
        [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
        [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView(==redView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView,redView)]];

        [myview addConstraints:tmpConstraints];
//iOS5以下
    }else{
        redView.frame = CGRectMake(50, 80, 100, 30);
        blueView.frame = CGRectMake(180, 80, 100, 30);
    }

    self.view = myview;
}

あとVisual Format Languageがうまく適用できない場合は、constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:も併用してちょーだいって書いてあった。

LINEで送る
Pocket

[iOS] アプリ制作日記 デザイン編

2012/09/15

こんにちは。きんくまです。

自分のオリジナルのアプリの制作の方をぼちぼちとすすめております。

企画
設計
画面デザイン
モック作成←いまココ
本番用データ作成
アプリ申請
プロモーション&リリース
サポート&アップデート

アプリのできることはかなり絞って、設計しました。だいぶすっきりしたと思います。
今の進行状況としては、モックに向けて各部品を作ってる感じです。
それで、実装するのに調べることが意外にあって、なかなか進みませんが気長にやってみようと思います。

それで、画面をデザインしたときに便利だった情報などを書いておこうかと思います。
デザイナーさんは知ってることかもしれないので、普段開発をやってる方向けかも。

今回、デザインはIllustratorでやりました。
Photoshopでも良いんだけど、どうも位置を移動するのがうまくいかなくて、イラレでやることにしました。

Illustratorでピクセルのぼやけるのをなくす

それで、気になるのがピクセルのぶれ。1pxの線がぼやけるやつです。

>> How to Get Pixel-Perfect Designs in Adobe Illustrator
72dpiでRGBにするのは知ってたけど、Align to Pixel Gridのチェックボックスは今回初めて知りましたです。
これをやっておけば、自分でアンカーの位置の数値を補正(小数点きりつめ)しなくてもうまいことやってくれマス。

イラレ用デザインテンプレート

各パーツはUIKitのもとの大きさでだいたいやったので、こういうときはテンプレートが活躍します。

>> Illustrator Template Toolbox for Web, Mobile and App Developers

参考デザイン

どんな感じのアプリのデザインがあるのか? 

ios design showcaseとかキーワードにいれて検索するといろいろと出てきます。

イラレの使い方

パスやその他の基本的なツールは知ってても、最近の機能とか知らなかったので、
このサイトでよさげな記事をチラ見してたら、発見があったです。

>> VectorTuts+

LINEで送る
Pocket

[AS3] Flash Builder でシンタックスカラーを読み込み

2012/08/29

こんにちは。きんくまです。

Flash Builderでシンタックスカラーを変えているとき、別の環境にもっていきたいと思いました。

プラグインのはなし

それで調べてたらこんなプラグインを発見。

>> Eclipse Color Theme

※注)使い方の説明の前に。これをするとデフォルトの背景と文字色がリセットされます。
この画面のやつ
fb_reset_color

まあ、あとでそこだけ戻してあげれば大丈夫です。
自分で作ったカラーリングは保存されてます。

使い方を書いておくと、

Help > Install New Software
右上のAddボタンを押してLocationに以下のURLを入れる
http://eclipse-color-theme.github.com/update
Nameは適当でいいと思う。EclipseColorThemePluginとか。
それでOKおして、ダイアログが出るけどOKで良かったはず。

インストール終了後に、

Flash Builder > Preferences > General > Appearance > Color Theme
とかやるとこんな感じにテーマが選べるようになります。

アンチエイリアス切れて見えるのは、私の設定なので、通常は入ってるので気にしないでください。

fb_color_theme_plugin

プラグインの話ここまで。

カラーリングの設定ファイルの場所

ここから本題。さっきのプラグインを使っても良いのだけど、せっかく自分でカスタマイズしたカラーリングを使いたい。
さっきのプラグインのページでヒントになる部分があったので、そこから探してみたところ
Workspaceフォルダ以下のこのフォルダがそうだった。

.metadata/.plugins/org.eclipse.core.runtime/.settings

もしWorkspaceフォルダがわかんないときは、
File > Switch Workspaceとかやるとパスがわかります。

で、その中でカラーリングに必要なのがこのファイルたちだ!

com.adobe.flexide.as.core.prefs		
com.adobe.flexide.mxml.core.prefs	
org.eclipse.ui.editors.prefs
com.adobe.flexide.css.core.prefs	
org.eclipse.jdt.ui.prefs		
org.eclipse.ui.workbench.prefs

これを別の環境のWorkspaceの該当部分に上書きしてあげればOK。

おまけ 「ある文字列を特定のフォルダ内のファイル全ての中から検索する」コマンド

今回のファイルを調べてるときに、ファイル内に書いてある文字列を検索する必要がでてきた。

「ある文字列を特定のフォルダ内のファイル全ての中から検索する」
というやつ。UNIXのコマンドっぽいから調べてみると

>> UNIX、Linuxのgrepコマンドで、あるディレクトリ配下の全てのファイルからgrepするにはどの様に… – Yahoo!知恵袋

find . -type f -print | xargs grep hoge /dev/null

これは便利だとおもってたら、これのもっと簡単なバージョンもあるみたい。

特定の文字列が含まれているものを探す方法 | ウェブル

egrep -r 'hoge' .
LINEで送る
Pocket

[日記] Mountain LionのApache, PHP, MySQL, phpmyadminの設定したときのメモ

2012/08/25

こんにちは。きんくまです。

WordPressをローカルでも動かせるようにしたいなと思いまして。
そんで、今はApacheはOSXにもとから入っているものを使っていたので、PHP & MySQLをインストールする必要があります。
XAMPPかMAMPでも使えばよいんですが、試しに自分でインストールしてみたかったのです。

基本的には下記の記事の通りにしていけば大丈夫です。どうもです。

>> OS X 10.8 Mountain LionにLAMP環境とWordpressを構築したときのメモ | Macとかの雑記帳
>> Installing Rails on OS X Lion with HomeBrew, RVM and Mysql » Ruby, Rails, OSX and Linux fun | Ruby, Rails, OSX and Linux fun
>> Turn Mac OS X Lion Into a LAMP Web Server (Without MAMP) ⊆ David Xia

MySQLのインストール時に下記コマンドがうまく通りませんでした。

$ mysqladmin -u root -h kk13.local password 'new-password'

kk13.localのところをlocalhostとかやってみたんだけどうまくいかなかったので、以下のコマンドを実行してみました。
これが必要だったのかどうかはわかりません、、。全てのオプションをnにしちゃってたし、、。

mysql_secure_installation

OS起動時にmysqlを立ち上げるのはやめときました。

自分はバーチャルホストはportで切り替えるので、httpd-vhosts.confはこんな感じにいれてあります。
オプションは適当すぎるので、きちんと調べてやった方が良いとおもわれ。

これでlocalhost:9000 にアクセスすると、任意のフォルダがサイトルートになりますです。

Listen 9000
<VirtualHost *:9000>
    DocumentRoot /ドキュメントルートにしたいフォルダパス
    ServerName localhost:9000
</VirtualHost>
<Directory "/ドキュメントルートにしたいフォルダパス">
    Options Indexes FollowSymLinks MultiViews Includes ExecCGI
    AddType text/html .shtml .html
    AddHandler server-parsed .shtml .html
    AddHandler cgi-script .cgi .pl
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
LINEで送る
Pocket

[iOS] (本)iPhoneアプリ設計の極意はツール系アプリに良い本

2012/08/24

こんにちは。きんくまです。

仕事で、iOSというかiPadアプリを数本作りました。
で、最近自分でもちゃんとしたアプリを作ってAppStoreに出したいなと思っています。

以前にも2本ほど作ったことがあってAppStoreに出ていたのだけれど、
はじめのやつは出すのが目的になっちゃったり(自分でも使い道がイマイチわからないものw)、
勉強会のソースコードのサンプル用に出したやつでした。

今回は自分でも日常的に使いたいなと思っているツール系のものを考えています。
先月くらいから、紙に構成書いたり、この部分って実装できるの?と思い部分的にコード書いて試してみたりしてる段階です。

ただ、デザインも少しすすめてたところで、どうも使い勝手がよくないなと思いました。
詰まってしまったというか、もう少しうまくまとめられないかなと思っていまして。

それで、ふと書店でこの本を見つけまして、パラパラめくってみると「おー、これが欲しかったんだよ」という内容の本でした。

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

ちなみにfladdictの深津さんが監訳してる本です。最後の章に深津さんのモックづくりの方法が載ってます。

本の内容は、マーケティング系や実装(プログラム)系ではなく、アプリの設計に焦点を当てた本です。

最終的なビジュアルについても書いてあるのですが、どちらかというとユーザビリティというかUXというか
「ユーザーの限られた短い時間でもアプリをより使いやすくする」といったことが書かれています。

アプリの目的を最小限にする話や、画面の構成や遷移、ボタンの大きさ等々、とても勉強になります。
自分でもApple製のiOSアプリを研究したり、競合のアプリを見たりしていたのですが、漠然とした理解といった感じでしたので、本で体系的に眺められるのはよいと思いました。

いま半分くらい読んだところですので、この本とiOS ヒューマンインターフェイス ガイドラインを読んでみようと思ってます。

LINEで送る
Pocket

[iOS] Adhocでエラーしたときのメモ

2012/08/24

こんにちは。きんくまです。

Adhocでエラーをしまして、その解決策のメモです。

エラーの状況

1) アプリのバージョンを上げようとした。
2) Adhoc版とリリース版では違うプロビジョニングファイルで行っている。
3) OTAでAdhoc版をインストールしようとしたら途中でアラートが出てインストールが完了しない。

解決策

こういう場合って、やろうとしていた部分のどの部分でエラーかがすぐにわからず困ってしまった。
アプリのバージョンの文字列が駄目?とか、いろいろとやってみた。

それで調べてみたり、試してみたりすると、どうやらバージョンの文字列ではなさそうで、
プロビジョニング関連のエラーかもしれない。
よく考えてみると、最近OSをLionからMountain Lionにアップグレードしたり、Xcodeのバージョンがあがったせいかもしれない。
と思い、一度Certificationを削除。再度iTunes Connectからダウンロードしてインストール。

(ひょっとしたらここで解決していたのかもしれない、、?)

XcodeのCode Signingの項目の
ReleaseをDon’t Code Signから自分のプロファイルに選択しなおし。
Any iOS SDKも同じ。

エラーが起きたとき、Any iOS SDKを何回も選びなおしたりしたのだけれど、
上の行のReleaseの項目はDon’t Code Signのままだった。
なので、そこを選びなおした。

一応OSを再起動

そしたら、無事に解決しました。

code_signing_error

LINEで送る
Pocket

[JavaScript] 子供のタグの名前判定のスニペット

2012/08/21

こんにちは。きんくまです。

あるノードの子供のノードの名前の判定をしたいとき用です。

        var ele = document.getElementById('foo');
        for(var i = 0, len = ele.childNodes.length; i < len; i++){
            var childNode = ele.childNodes[i];
            if(childNode.tagName){
                switch(childNode.tagName.toLowerCase()){
                    case 'li':
                        console.log('li です');
                    break;
                    case 'a':
                        console.log('a だよ');
                    break;
                    default:
                    break;
                }
            }
        }
LINEで送る
Pocket

ページトップへ戻る