SCSSってすごい。ついでにSCSS記述&練習に便利なサイトも紹介

自分はスマートフォンのネイティブアプリエンジニアを目指しているため、
Objective-C & Swift & android Java中心に学習を進めているのですが、
今日は会社でCSSの勉強会が開かれたので顔を出してみました。

実はCSSを書くのがめっちゃ大嫌いなんです、自分。
スコープが訳分からなくなる事多々あるし、いちいちきちんと
書かなきゃいけないのですごく面倒なんですよね。
「あー、ここ値変数にぶっこんで計算させてforループで書きてー」とか思ってもCSSだと無理。

なーんて思ってたんですができるようになってたんですねいつの間に。
ちゃんと他分野の流行も知っとくべきだなーと反省。
SASSには２種類の記法（SASS記法とSCSS記法）があるみたいなのですが、
自分はSCSSのほうがしっくりくるのでそっちで書いてみました。

SASSソース

$width: 600px;

#main{
margin:$width*0.1;
  li{
    margin:$width*0.15;
    a{
      color:#000
    }
  }
  
}

コンパイル結果

#main {
  margin: 60px;
}
#main li {
  margin: 90px;
}
#main li a {
  color: #000;
}

これは・・・すごいしっくりくる。C言語大好きな自分の場合、
本当にCSSが好きになれなかったのですが、これならやってもいいかなって思いました！

Sass学習の際にはいちいちコンパイルするのも面倒なので、
こんな便利なサイトがありました。
その名も「SassMeister」

SassMeister | The Sass Playground!

ブラウザ上でコンパイル結果を即見れるからすごく良い。
Sass勉強の時はこのサイト使いながら勉強していきます。
とはいえ自分の本分はiOS or Androidネイティブなので、
学習時間の比重はあまりかけれないですが。

それではまた。

Bootstrapのグリッドシステム実現をObjective-Cで頑張る

BootstrapのGridってすごく便利ですよね。

一方Objective-CはいちいちCGRectmakeでx,y,width,height指定しーので面倒です。
頼みのAutolayoutもユニバーサルアプリだと逆に実装に時間がかかったり、
制約も多くて面倒です。

Bootstrapくらい気軽にできたらなーっと思ったので先ほどさくっと
BootstrapGridSystem風UIViewのGridViewクラスを作ってみました。

クラス実装部

GirdView.h

#import <UIKit/UIKit.h>
typedef enum : NSInteger {
    COL_01 = 1,
    COL_02 = 2,
    COL_03 = 3,
    COL_04 = 4,
    COL_05 = 5,
    COL_06 = 6,
    COL_07 = 7,
    COL_08 = 8,
    COL_09 = 9,
    COL_10 = 10,
    COL_11 = 11,
    COL_12 = 12
} COL;

@interface GridView : UIView
-(void)addSubview:(UIView *)view viewHeight:(CGFloat)height usingGridNum:(COL)gridNum margin:(COL)margin;

@end

GirdView.m

#import "GridView.h"

@implementation GridView{

    NSInteger totalCol;
    CGFloat heightMax;
    CGFloat currentYposition;

}

- (id)init {
    self = [super init];
    if (!self){
        return nil;
    }
    
    totalCol = 0;
    heightMax = 0;
    currentYposition = 0;
    
    return self;
}

-(void)addSubview:(UIView*)view viewHeight:(CGFloat)height usingGridNum:(COL)gridNum margin:(COL)margin{
    
    //前処理
    if((totalCol+gridNum+margin) > 12){
        currentYposition += heightMax;
        totalCol = 0;
        heightMax = 0;
    }
    totalCol += margin;
    
    //リサイズ実行
    view.frame = CGRectMake(totalCol*(self.frame.size.width/12), currentYposition, (self.frame.size.width/12)*gridNum,height);
    
    //後処理
    totalCol += gridNum;
    if(heightMax <= height){
        heightMax = height;
    }
    
    //Viewに追加
    [self addSubview:view];
   
}

@end

使い方例

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    CGRect rect = CGRectMake(0, self.navigationController.navigationBar.frame.size.height+22, self.view.frame.size.width, self.view.frame.size.height);
    
    GridView*mainView = [[GridView alloc]initWithFrame:rect];
    [self.view addSubview:mainView];
    GridView*subView1 = [[GridView alloc]init];
    subView1.backgroundColor = [UIColor grayColor];
    GridView*subView2 = [[GridView alloc]init];
    subView2.backgroundColor = [UIColor yellowColor];
    GridView*subView3 = [[GridView alloc]init];
    subView3.backgroundColor = [UIColor redColor];
    GridView*subView4 = [[GridView alloc]init];
    subView4.backgroundColor = [UIColor blueColor];
    UILabel* label = [[UILabel alloc]init];
    label.text = @"test";
    
    [mainView addSubview:subView1 viewHeight:200 usingGridNum:COL_04 margin:COL_02];
    [subView1 addSubview:subView2 viewHeight:50 usingGridNum:COL_06 margin:COL_01];
    [mainView addSubview:subView3 viewHeight:30 usingGridNum:COL_11 margin:COL_01];
    [mainView addSubview:label viewHeight:50 usingGridNum:COL_12 margin:0];
    [mainView addSubview:subView4 viewHeight:200 usingGridNum:COL_12 margin:0];
    
}

こんな感じで書くと実際にはこんな画面になります。

GirdSystem風に配置できてます。入れ子もできてますね。
例ではLabelも入れてますが、実際にはAddsubViewできるものならUIbuttonでも何でも大丈夫です。
こいつらも入れ子にして入れてもオーケー。

ただし、今回の例の場合、子要素が親要素より大きい高さを指定された時は考慮してませんし、
マージンと使用グリッド数が12を超えた場合も考慮してません。
レスポンシティブ対応もしてません。
レスポンシティブ以外はすぐにでも書けそうですが、まとめて対応したいので
今度ゆっくり考えてみます。

とはいうものの、
静的な利用であれば今回のものでも十分使い物になるかと思います。
ちょっとしたもの書きたいだけなのに毎回CGRectMakeだのAutoLayout設定だのが面倒な方には
おすすめです。

Swiftでコールバックはどう書くか

業務ではObjective-C中心でソースを書いていますが、
いつか移行すべき日に備え、Swiftの学習も進めています。
今回はSwiftのお話。

Objective-CでBlockによるコールバックを書く事がありますが、
Swiftだとどんな感じで書くのか調べてみました。
Objective-Cだと自分はtypedefを使ってソースの整形をしてたので、
Swiftでも同様の事をします。

注意

swiftは不慣れなのでミスがあるかもしれません。何かございましたらご指摘して頂ければ幸いです。

import UIKit

typealias CompletionBlock = (result : NSString) -> ()

class ViewController: UIViewController {
    
    override func viewDidLoad() {
      
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        var name: NSString;
        name = "okogeki";
        
        callBackTest(name,
            success:{(str : NSString) in
                println(str);
            },
            fail: {(str : NSString) in
                println(str);
            },
            error: {(str : NSString) in
                println(str);
            }
        );
        
    }
    
    func callBackTest(var id:NSString,var success:CompletionBlock?,var fail:CompletionBlock?, var error:CompletionBlock?){
        
        var testStr: String;
        testStr = "one:"+id;

        if(success != nil){
            success!(result:testStr);
            success = nil;
        }
        
        if(fail != nil){
            testStr = "two:"+id;
            fail!(result: testStr);
            fail = nil;
        }
        
        if(error != nil){
            testStr = "three:"+id;
            error!(result: testStr);
            error = nil;
        }
        
    }


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

}

Optional 型とから非Optional 型へのアンラップに"!"を使うのがまだ慣れません。何となく気持ち悪い感じがします笑

P.S はてな記法でSwiftとObjective-Cを上手くみせるにはどうしたらいいんでしょうか・・・。rubyとかは用意されているのですが。

CATextLayerとUILabelの描写速度比較

CATextLayerの方が速いに決まってるんですけど、
どのくらい速いか気になったので簡単にテストコード書いて比較してみました。

・検証環境 　　
端末：iPhone5 　　
OS ： iOS 8.1.2(12B440)

・検証方法
書いて載せてを200回繰り返すのにかかった時間を計測。

    //UILabelの場合
    NSDate *startDate;
    NSDate *endDate;
    int roopNum = 200;
    
    startDate = [NSDate date];
    for (int i = 0; i < roopNum; i++) {
        UILabel* label = [[UILabel alloc]init];
        [label setFont:[UIFont fontWithName:@"Helvetica-Bold" size:20]];
        [label setFrame:CGRectMake(self.view.center.x, self.view.center.y, 200, 100)];
        [label setText:@"Hello World"];
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = [UIColor blackColor];
        [self.view addSubview:label];
    }
    //計測終了
    endDate = [NSDate date];
    NSTimeInterval interval = [endDate timeIntervalSinceDate:startDate];
    NSLog(@"UILabel処理時間 = %.3f秒",interval);

    //CATextLayerの場合
    NSDate *startDate;
    NSDate *endDate;
    int roopNum = 200;
    
    //計測開始
    startDate = [NSDate date];
    for (int i = 0; i < roopNum; i++) {
        CATextLayer *label = [[CATextLayer alloc] init];
        [label setFont:@"Helvetica-Bold"];
        [label setFontSize:20];
        [label setFrame:CGRectMake(self.view.center.x, self.view.center.y, 200, 100)];
        [label setString:@"Hello World"];
        [label setAlignmentMode:kCAAlignmentCenter];
        [label setForegroundColor:[[UIColor blackColor] CGColor]];
        [self.view.layer addSublayer:label];
    }
    //計測終了
    
    endDate = [NSDate date];
    NSTimeInterval interval = [endDate timeIntervalSinceDate:startDate];
    NSLog(@"layer処理時間 = %.3f秒",interval);

・結果
CATextLayer：0.094秒
UITextLabel ： 0.063秒

・感想
あんまり変わらない。
よほどシビアなパフォーマンスを求めない限り、使い勝手の良いUILabelで良さそうです。
パフォーマンスを求めて使い分けというよりは、
直接描写したい時はCATextLayerで、その他はUILabelという感じで
自分は使い分けたいと思います。

自分なりに考えた、エンジニアとしての3つのスタンス

お久しぶりです。

知識吸収欲>>記事を書く欲になっていて、しばらく更新が遅れてしまいました。

今回は技術共有ではなく、マネジメント職→エンジニアに転身して、

貫き通したい自分の考え、スタンスを共有したいと思います。

どちらかというと本記事は自分への戒めという意味合いが強いです。

1.20時までに終わらせるタスク量にする。

自分の場合、平日の基本ルーチンを下記のようにしています。

　9:30  : 出社

　20:00: 退社

　20:30: 帰宅

    21:00:自習（ プログラミング、最新技術の記事をひたすら読む、コーディング）

　23:00: 自由時間

　1:00  : 就寝

どんなに忙しくても自習時間は確保したいので、タスク量は20時で終わらせられるよう自分でマネジメントします。もちろん例外もありますが、なるべくこの基本ルーチンは崩しません。

納期から逆算で、１日のタスクを割り振るのではなく、１日のタスク量を20時までに終わらせられるタスク量にし、納期に間に合うか自分で判断します。やばそうなら上長に相談。ただし、単位時間あたりのパフォーマンスを最大にする工夫はやります。これをしないと意味無いです。具体的には、ついやりがちな無駄なネットサーフィンはしない、無駄な雑談はしない。食事後１０分程度の仮眠を取る、今後課題になりそうな技術課題をメモし、自習時に重点的に学習する、作業効率を上げるツールをどんどん導入するなど、挙げきれない程あります。常にもっと早くできないかを自分に問います。

2.分かったふりをしない

仕様について決める会議で、「今のはなんとなく理解できた」と思った時、そのまま流してしまいそうな自分が居るのですが、必ず質問するようにしています。

「今言ったのは○○○で合ってます？」といった感じで。

経験上、「なんとなく理解できた」と感じた時の大半はどこかに大小なり、誤認識があります。

3.「○○なら何でも聞いてくれ」というものを増やす。

言語単位でも、ライブラリ単位でも、ツールの使い方でも何でもOK。

とにかく「○○なら俺に聞いてくれ」というものを増やす。

エンジニアとして働いていると、他のベテランエンジニアに質問する事が多いです。

質問をたくさんして知識吸収効率を上げる事は非常に大事だと思っています。

それと同じくらい、質問をたくさん受けれるよう、自分をPRする事も、エンジニアとして大事だと自分は考えています。

悩んだ時はこの記事を見返して自分を戒めたいと思っています。

SingleViewからCoreDataを扱うための手順

Master-DetailApplicationからCoreDataを作成する記事は多く見ますが、

Xcode5.X系でSingleViewからCoreDataを扱う記事が少なかったため、

記事にしました。それでは早速手順を紹介します。

※ObjectiveC学習開始6ヶ月目のエンジニアが書いています。

　間違った内容、誤解を招く内容が含まれている可能性があります。

　何か間違い等発見されましたらご指摘頂けると幸いです。

1.　New ProjectからSingleViewを選択します。

2.　Product nameに任意の名前を入力し、プロジェクトを作成してください

ここで一旦、「CoreDataが難しい」と感じてしまう要因を一言でサクっと

言っちゃいます。それは。。。

登場人物が多すぎる！！！！

というわけでまずはいっぱい出てくる登場人物を、必要最低限

頭の中で整理しましょう。参考にオススメなのが下記ブログ記事です。

まずは本記事をじっくり読んでください。

【iOS/Mac開発】Core Data を使いはじめるのに最低限知っておけばいいこと (フェンリル | デベロッパーズブログ)

次に CoreDataを利用するまでの流れ。

とりあえずやらなきゃいけない事は、下記の通り。

モデルを準備する。

↓

永続化ストアを準備する。

↓

コンテキストを準備する。

説明ばかりも何なので、作っていきましょう。

3.　プロジェクトフォルダ右クリックし、をNew Fileを選択します。

 4.CoreDataからData Modelを選択し、作成します（ファイル名はデフォルトのままの、Model.xcdatamodeldにしておきます。）

ここで出ました。モデルさんです。データの構造を管理しているやつです。

例えば「個人情報」というモデルを作成した場合、データの構造は

・名前　　：　田中一郎 

・生年月日：　1900年12月31

・住所　　：　ほげほげ県まるまる市

といった感じで作っていくイメージです。

 今回は名前だけを管理するモデルを作っていきます。

 5.Model.xcdatamodeldを開き、下部のAdd Entityをクリックします。

 6.Entitiesに「Entity」という項目が追加されるので、そちらをクリックし、

　Attributesの＋ボタンを押し、Attribute名を「Name」に、Typeを「String」に変更しましょう。

これで「名前」を格納するモデルを作成できました。ただし、こいつを扱うためのファイルも作成しないといけないので、そちらも作成します。

7.XcodeメニューのEditorから「Create NSManagedObject Subclass...」を選択し、作成します。途中に出てくるチェックマークは全てチェックしてください。

Entity.m, Entity.hが自動的に作成されている事が確認できます。

これでようやくモデルの準備は終わり。

長くなってきたのでいったんここまでにします。

続きは後ほど。

30分でアプリ宣伝ページを作る方法

Appleさんのリジェクトにもめげずに無事審査の通過を祈る毎日ですが、

「自作アプリの宣伝ページが欲しいなー」と思いつつ、

「今更HTMLやらCMS入れつつ、ゴリゴリ書いていくのも面倒だな」

なんて思ってしまう筆者です。

宣伝ページ、あった方が良いに決まってるのですが、それに１、２週間も

かけれられないなーというのが現実でして。

サクっと作れてそれなりにおしゃれに作る方法が無いのかなーと

調べていました。

今回思いついた方法は

ずばり便利なWEBサービスを使い倒す。

いや、まぁ誰でも思いつきますが、意外と一度エンジニアになってしまうと、

「おっしゃゴリゴリ書いたるでー」なんて思ってしまう事も多々あります。

楽出来るとこは楽しましょう。

今回使ったサービスは以下の二つ。

１.スクリーンショットをiPhone画像テンプレに埋め込んでくれるサービス

http://iphone-screenshot.com

2.サクっと簡単にフライヤーを作れるサービス

https://www.smore.com/app

作成の流れとしては、

iphone screenshotで載せたい画像を作って、

smoreでさっくりと作る。以上。

私の場合、作業時間30分ほどで以下のサイトが完成しました。

私が作成したリリース予定アプリのフライヤーサイトです。

「BePost」

https://www.smore.com/7huw1-be-post

細かいデザインの変更は出来ませんが、30分でこれくらいのクオリティの

物が作れるなら、個人レベルではオールオッケーですね。

セブに来て以来、海外の便利なWEBサイトをちょくちょく

調べるようになり、アンテナ力をコツコツ磨いていたのですが、

最近ようやくその恩恵が出てきました。

便利なサイト等があればそちらも紹介したいと思います。

それではまた。