2014-01-17

Xcode5で自分のコードをAPIリファレンス的にまとめていく話

iOS Objective-C Xcode

いつのまにかもう一年の25分の1が過ぎてしまいました。すっかり更新が途絶えてしまいましたが今年もよろしくお願い致します。今回の記事は普段からきっちりappledoc等で自分の書いたコードを整理している人にはほとんどお役にたちませんのでご了承いただくか読み飛ばして下さい。

なにをやるのか

去年やろうとしてやれなかったことを今年は地道に片付けていきたいと思います。まずは、APIリファレンスをなんとかしたいと思います。で何をやるかというと以下の通りです。

Xcode上でもクイックヘルプできるようにする
APIリファレンスのドキュメントをちゃんと更新する
普段からリファレンスを書くのを意識する

前提

以下のすばらしい記事を見て、先にappledocをインストールしておいてください。

appledocでドキュメント生成

Xcode上でもクイックヘルプできるようにする（Xcode5標準機能）

Xcode5より前のバージョンではappledocの--install-docsetを指定する必要などがありましたが、Xcode5からはappledocの書式にしたがって記述すれば何もしなくてもクイックヘルプとして表示されるようになります。

Documentation in Xcode 5

こんな感じです。(option+クリックで)

APIリファレンスのドキュメントをちゃんと更新する

appledocでプロジェクトをまるっとリファレンス化しようと思ったのですが、何故かコケてしまいました。（おそらくどこかのファイルに記述しかコードがappledocのパターンにそぐわなかったのかと…）

よくよく考えると全部のクラスファイルをドキュメントする必要も無いかなと思い、公開用のクラスファイルだけをリファレンスのドキュメントを作成するためのディレクトリにコピーするという運用にしました。

アーカイブした後にドキュメントも生成する

この記事が参考になりました。 appledocのドキュメント作成を自動で行うようにする

運用上、リファレンスドキュメントが必要になるクラスを$REFERENCE_DIRに自動的にコピーするようなshellを必要に応じて付け足しています。

これでアーカイブした後に指定したドキュメントのアウトプット先にHTMLで書き出すようになります。

普段からリファレンス書くのを意識する

これが一番大変なんだと思いますが、捗るXcodeのプラグインを教えていただいたのでこれを使ってみなさんもどんどんリファレンスを書きましょう。

onevcat / VVDocumenter-Xcode

プラグインのインストール

git clone git@github.com:onevcat/VVDocumenter-Xcode.git

でクローンしてきたプロジェクトのVVDocumenter-Xcode.xcodeprojを立ち上げて、VVDocumenter-Xcodeにビルドターゲットを設定し、ビルドするだけです。 Xcodeを再起動すると、以下のGifのように///と打つだけでappledocの書式にあわせて、ある程度のところまでリファレンスの記述を補完してくれます。

https://raw.github.com/onevcat/VVDocumenter-Xcode/master/ScreenShot.gif

これは捗りますね。諸岡さんありがとう！

まとめ

リファレンスを整備してappledocの書式になるだけで何故かコードを（見栄え的に）キレイに書こうという気になりますね。ヘッダーファイルにごちゃごちゃ書くのは好かん！という人にはオススメできませんが。今のところいい感じにできております。

2014-01-07

【今更】遅れてきたマイブーム。書籍の電子化はじめました。（お得情報アリ）

Books Objective-C

自分にもついに電子化ブームがやってきました。今更ですが、この年末年始に色々と試してみて気づいたことを。

PDFで読めるものを買う

と書くと語弊がありそうですが、要するにKindleだけでしか読めないものは買わないようにしているということです。特に技術書はMacの画面でも見れるようにしておきたいので。（早くKindleのビューアが日本でも使えるようにして欲しい）

まだ電子化されてない新しい本

どうしても早く読みたい！というやつだけ書籍を買ってそのまま自炊業者に直送しています。（これの通販直送便です。）月額プランだとかなり早く仕上げてくれるので納品してもらったものをダウンロードして読んでいます。

（仕上がりはキレイなんですが、スキャンものはデータが重たくなってしまうのがいかんともしがたいですね。）

ちょっとでも安く読むために

電子書籍自体、通常の印刷版よりも幾らか安く手に入れることができますが、英語版の技術書はさらに安いです。

英語、まだまだ全然スラスラ読めないですが、普段ドキュメントやStackOverFlowでお世話になったりしているのでこれを機にどっぷり読み込んでみようと思います。

以下、おトクな電子書籍情報です。

Maker Shed : Books & Magazines

Maker系、とくにオライリーの本が揃っています。現在セール期間中のようですが年始はさらにそこから50%OFFのセールをしていました。

informITの割引クーポン

ただでさえ英語の電子書籍は日本の翻訳版よりも1000〜2000円ほど安くなっていますが、さらにinformITのクーポンを使うと50％OFFになることもザラです。

こちらはinformITのクーポン紹介サイトですが、45%OFFとか50%OFFのクーポンがズラリと並んでいます。試しに私も１冊で45％OFFになるクーポンを使ってEffective Objective-C 2.0を買いました。（PDF版もmobi版もついてくるのでkindleでもPCでも読めます。）

でもiPad miniの容量が…

電子書籍を入れ始めるとやっぱり16GBだとこころもとないですね…32GBにしておけばよかった。

Effective Objective-C 2.0

作者: Matt Galloway,長尾高弘
出版社/メーカー: 翔泳社
発売日: 2013/11/02
メディア: 大型本
この商品を含むブログ (1件) を見る

2014-01-03

ハイ・コンセプト「新しいこと」を考え出す人の時代」を読んでみて。今日から実践できそうな３つのこと

Books 本

ハイ・コンセプト「新しいこと」を考え出す人の時代

作者: ダニエル・ピンク,大前研一
出版社/メーカー: 三笠書房
発売日: 2006/05/08
メディア: 単行本
購入: 26人クリック: 194回
この商品を含むブログ (298件) を見る

新年あけましたおめでとうございます。昨年の一人アドベントカレンダーがおさまっておりませんが、いずれ更新しますよ。いずれね。

年末年始にかけて積ん読本の消化に取り組んでおります。（電子化されていて）物理的に積んでないのであまり積ん読感ないですがこんどはiPad miniの容量が逼迫することによってプレッシャーを感じております。世知辛いです。

「ハイ・コンセプト「新しいこと」を考え出す人の時代」」をオススメされたので読んでみました。刊行されてからずいぶん経っているみたいですが、自分としては年始に読んでおいて良かったなと思っています。１年の目標というよりもう少し長めのスパンで、どういう風に働いていたいかということを考えさせられる本でした。

何が書いてある本なの

何が書いてある本なのかを１枚のスライドで表してくれているものがあったので、以下のブログから拝借しました。メタファー（比喩）の世界にようこそ/ビジネスとデザインの交差点〜D School留学記

これから求められる「六つの感性（センス）」

1「機能」だけでなく「デザイン」

2「議論」よりは「物語」

3「個別」よりも「全体の調和（シンフォニー）」

4「論理」ではなく「共感」

5「まじめ」だけでなく「遊び心」

6「モノ」よりも「生きがい」

概念的な部分についてはフムフムと読んでいて面白いです。この本はさらにでは具体的にどういうアクションをしていけばそういう思考や姿勢で物事に向かえるのか？が触れられています。

そこから自分なりに今日から 無理なく 普段から実践できそうなことを書き出してみました。

今日から実践できそうなこと１いいデザインはどんどんreblog

「気になったデザイン」は忘れずに記録

この本では「機能」だけでなく「デザイン」の行動をすすめる上で、小さなノートを用意して、良いデザインを見つけたら常にメモしておくようにと書かれていますが、これは既に実践している人も多いと思います。現在ではEvernote使ったり、Piterestを使ったり。tumblrなんかで気軽にポストできるのでこれはすぐにでも実践できそうです。

tumblr開いてポストするのは意外と億劫になったりするのでbookmarkletを使ってある程度ラクするのも続けるコツだと思います。

tumblrのbookmarklet

あとはTwitterでつぶやいた結果やfacebookでシェアした結果を自動的にストックしておくのもいい方法だと思います。

【今更】IFTTTでfacebookでシェアした投稿をtumblrにまとめる。

今日から実践できそうなこと２「言い得て妙」な比喩は村上春樹でストック

「いいたとえ話」は書き留めておく

「個別」よりも「全体の調和（シンフォニー）」の行動をすすめる上で、比喩的な思考の重要性が説かれています。 比喩は創造力の合理性なんだそうです。この本の主旨の一つとしてはコンピュータで置き換わらない部分を自分の仕事にしていく必要性が挙げられています。たしかに比喩表現は対象となる事象をきちんと理解していないと「言い得て妙」とはならないので、この部分を鍛えるために「いいたとえ話」のストックは非常に有効なんだそう。これも1と同様に情報を容易にストックできるようになっている環境ではすぐに実践できそうです。

でもなかなか良い比喩なんてものには出会えないわけで、「比喩といえば村上春樹かー」なんて思っていたらすでにまとまっているものが。こういう部分から比喩に触れて、自分で良い比喩と思うものをストックしていくのもアリかもしれません。

村上春樹のたまゆらなキレッキレの比喩表現まとめ

村上春樹さんの例え、比喩、メタファー、名言集

今日から実践できそうなこと3　boketeでユーモアと右脳を鍛える

マンガの「吹き出し」のセリフを考える

「まじめ」だけでなく「遊び心」の実践として、この本ではマンガ（ニューヨーカー誌のマンガ）の吹き出しを空白部分を当てるというものがあります。この訓練、boketeのサービスに非常に近いと思います。「リズムと簡潔さ、そして驚きが必要だ」という点もまさにbokete。

boketeにはお題が常に上がっているし、お題について必死に頭をひねる時間が産まれ、もしまれに面白い回答をつくりだすことができれば、いっぱい☆がもらえて承認欲求も満たされますしね。

まとめ　読書後に実践できることをメモるのは良い。

積ん読を消化していくのも大事ですが、中身も消化できるようにこうやってログつけていくのは、そのまま実践できることを確認できるので良いと思いました。読みっぱなしはやめよう。

2013-12-17

#15 パスで弦の動きをシミュレートするーC4のパスであそぶ(4)

C4 iOS Objective-C Advent Calendar

この記事は「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」の17日目の記事です。

前回はベジェ曲線をつかって波形アニメーションをつくってみました。今回はもう少し動きに自然な雰囲気を持たせてみようと弦の動きをシミュレートしてみようと思います。

二次曲線（quadratic curve）のつくりかた

今回は二次曲線（quadratic curve）を使って弦の動きを表現してみようと思います。

２点の座標情報と1点のコントロールポイントを与えることで二次曲線をつくり出すことができます。ベジェ曲線との違いはコントロールポイントが１つという点ですね。

    //create the end points for the quadratic curve
    CGPoint quadEndPoints[2] = {
        CGPointMake(0,self.canvas.height/2),
        CGPointMake(self.canvas.width,self.canvas.height/2)
    };
    
    //create the control points for the quadratic curve
    CGPoint quadControlPoint = CGPointMake(self.canvas.width/2,self.canvas.height);
    
    //create the quadratic curve
    quadraticCurve = [C4Shape quadCurve:quadEndPoints controlPoint:quadControlPoint];
    quadraticCurve.fillColor = [UIColor clearColor];
    [self.canvas addShape:quadraticCurve];

ベジェのときと同様に、塗りは透明にしておきます。

曲線の初期状態はこんな感じになります。

iOSシミュレータのスクリーンショット 2013.12.21 22.09.20.png

弦の動きをあらわす

引っ張られた弦がじょじょに減衰していって、最終的には直線になるような動きを表現したいと思いつくってみました。実際、あやしい感じは否めないですが、方向性は大体あっていると思っています。今後は最初に引っ張る弦の大きさを決めたりできるようにする予定です。

-(void)updateControl:(NSNumber *)currentHeight
{
    count = count*2;
//
    if([currentHeight floatValue] > self.canvas.height/2) {

        quadraticCurve.animationDuration = 0.2;
        quadraticCurve.controlPointA = CGPointMake(self.canvas.width/2, self.canvas.height/2 - [currentHeight floatValue]);
        float nextHeight = self.canvas.height - (self.canvas.height/2 + ((self.canvas.height/2)/count));
        [self runMethod:@"updateControl:" withObject:@(nextHeight) afterDelay:0.2];

    } else if ([currentHeight floatValue] < self.canvas.width/2) {

        quadraticCurve.animationDuration = 0.2;
        quadraticCurve.controlPointA = CGPointMake(self.canvas.width/2, [currentHeight floatValue]);
        float nextHeight = self.canvas.height/2 + ((self.canvas.height/2)/count);
        [self runMethod:@"updateControl:" withObject:@(nextHeight) afterDelay:0.2];

    } else {
        return;
    }
}

実際の動きはこんな感じになります。うーん…ちょっとまだ微妙ですね。

2013-12-16

#14 パスで波をつくるーC4のパスであそぶ(3)

C4 iOS Objective-C Advent Calendar

この記事は「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」の16日目の記事です。

前回は文字をパス化してモーフィングする例を試しました。今回はベジェ曲線をつかって波形アニメーションをつくってみようと思います。

ベジェ曲線のつくりかた

ベジェ曲線ももちろんC4Shapeクラスに属しています。２点の座標情報と２点のコントロールポイントを与えることでベジェ曲線をつくり出すことができます。

今回はこの２点のコントロールポイントの値にアニメーションを付けることで波形のアニメーションを作ります。

まずは線の終端を決めます。端っこと端っこの値を入れます。

    CGPoint bezierEndPoints[2] = {
        CGPointMake(0,self.canvas.height/2),
        CGPointMake(self.canvas.width,self.canvas.height/2)
    };

つづいてコントロールポイントを決めます。

    CGPoint bezierControlPoints[2] = {
        CGPointMake(self.canvas.width/2,0),
        CGPointMake(self.canvas.width/2,self.canvas.height)
    };

ここでは線分の真ん中の一番上と下に置いています。終端とコントロールポイントを作成したところでベジェ曲線を作ります。

    //create the bezier curve
    bezierCurve = [C4Shape curve:bezierEndPoints controlPoints:bezierControlPoints];
    bezierCurve.fillColor = [UIColor clearColor];
    [self.canvas addShape:bezierCurve];

fillcolorを透明にしておかないと塗りが発生してしまいます。

この時点で波形が出来上がっているはずです。

iOSシミュレータのスクリーンショット 2013.12.21 18.29.06.png

ベジェ曲線をアニメーションさせる

ではコントロールポイントを上下に動かすことで波形のアニメーションをつくってみます。コントロールポイントの２点をcontrolA、controlBとしてそれらを更新するアニメーション用のメソッドを作ります。 AUTOREVERSEとREPEATのオプションをつけているので同じタイミングと同じ幅で振幅するようなアニメーションになっているはずです。

-(void)updateControlA
{
    bezierCurve.animationDuration = 0.5;
    bezierCurve.animationOptions = AUTOREVERSE | REPEAT;
    bezierCurve.controlPointA = CGPointMake(self.canvas.width/2, self.canvas.height);
}

-(void)updateControlB
{
    bezierCurve.animationDuration = 0.5;
    bezierCurve.animationOptions = AUTOREVERSE | REPEAT;
    bezierCurve.controlPointB = CGPointMake(self.canvas.width/2, 0);
}

setupメソッドの中身はこんなかんじになります。

-(void)setup {
    
    //create the end points for the bezier curve
    CGPoint bezierEndPoints[2] = {
        CGPointMake(0,self.canvas.height/2),
        CGPointMake(self.canvas.width,self.canvas.height/2)
    };
    
    //create the control points for the bezier curve
    CGPoint bezierControlPoints[2] = {
        CGPointMake(self.canvas.width/2,0),
        CGPointMake(self.canvas.width/2,self.canvas.height)
    };
    
    //create the bezier curve
    bezierCurve = [C4Shape curve:bezierEndPoints controlPoints:bezierControlPoints];
    bezierCurve.fillColor = [UIColor clearColor];
    [self.canvas addShape:bezierCurve];
    
    [self runMethod:@"updateControlA" afterDelay:0.5];
    [self runMethod:@"updateControlB" afterDelay:0.5];
}

いい感じに波うってますね。この後、波形の動きにインタラクションを与えたいと思います。

2013-12-15

【番外編】iOS Second Stage Advent Calendar 2013に投稿しました。

C4 iOS Objective-C Advent Calendar

「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」が滞る中、iOS Second Stage Advent Calendar 2013にも投稿しました。

一人アドベントカレンダーで中心に扱っているC4の紹介記事を書きました。だれでもクリエイティブコーディング？ーC4を試してみたー

以下、投稿記事の一部ですが「C4をやる意味、メリットってなんだろうなー」というのを考えていたことをまとめています。いやまとまってないですが今後もその辺り色々思いついたことを書いていこうと思います。

C4を試してみて

教育・創作のはじめの一歩に

いままさにプログラムをはじめんとしている学生さん・もしくはもっと若い子どもたちが身近なデバイスで思考錯誤できることのメリットは計り知れないと思います。特にC4を使って写真、音楽、動画といったメディアを、様々なインタラクションによって操作するiPhone iPadアプリは、最初につくるクリエイティブな作品にもってこいでしょう。

フレームワークの中身にもぐって学ぶ

C4の説明をするときによくopenFrameworksのObjective-C版かなーみたいな話になるわけですが、ソースコードがオープンにされており、だれでも中身を見ることができるので、次にピュアなObjective-Cで実装するときの参考にしたり、ベストプラクティスな部分を学ぶこともできます。

これから貢献していける

先ほどのカメラアプリの例でも挙げましたが、C4のフレームワークはまだ実装段階である部分も多いです。しかしその分自分たちもこういう機能があったらという部分で貢献できる可能性があります。詳しくはGitHub[C4Framework / C4iOS]で！

2013-12-14

#13 文字をパス化してモーフィングしてみたーC4のパスであそぶ(2)

この記事は「一人アドベントカレンダー2013〜Lonely Advent Calender 2013〜」の14日目の記事です。

前回は矩形から楕円へのパスデータを使ったアニメーションを試してみました。今回はその流れで文字をパス化してモーフィングする例を見ていきます。

文字のパス化

C4にはすでに文字データをパス化するメソッドが用意されています。

setup内でC4Fontをつかって文字をC4Shapeオブジェクトとして初期化します。

-(void)setup {
    
    //setup up the initial shape
    C4Font *font = [C4Font fontWithName:@"ArialRoundedMTBold" size:90.0f];
    theShape = [C4Shape shapeFromString:@"C4" withFont:font];
    theShape.center = self.canvas.center;
    [self.canvas addShape:theShape];

アニメーションの設定は前回と同様に下記のように

    theShape.animationDuration = 1.0f;
 }

変化させる文字

「Hello」という文字と「World!」という文字を交互に変化させていくモーフィングアニメーションをつくるためにhelloとWorld!というメソッドを用意します。

-(void)hello
{
    C4Font *font = [C4Font fontWithName:@"ArialRoundedMTBold" size:90.0f];
    [theShape shapeFromString:@"Hello" withFont:font];
    theShape.center = self.canvas.center;
    [self runMethod:@"world" afterDelay:2.0f];
}

-(void)world
{
    C4Font *font = [C4Font fontWithName:@"ArialRoundedMTBold" size:90.0f];
    [theShape shapeFromString:@"World!" withFont:font];
    theShape.center = self.canvas.center;
    [self runMethod:@"hello" afterDelay:2.0f];
}

それぞれ、最初に作ったtheShapeというオブジェクトに指定した文字の形を当てはめています。

最後にsetup内でhelloメソッドを呼びます。

-(void)setup {

   (略)
   [self runMethod:@"hello" afterDelay:2.0f];
}

これで文字のモーフィングもできました。もうちょっとアニメーションがスムーズになるといいのですが… しかし簡単ですね。

なにをやるのか

前提

Xcode上でもクイックヘルプできるようにする（Xcode5標準機能）

APIリファレンスのドキュメントをちゃんと更新する

アーカイブした後にドキュメントも生成する

普段からリファレンス書くのを意識する

プラグインのインストール

まとめ

PDFで読めるものを買う

まだ電子化されてない新しい本

ちょっとでも安く読むために

でもiPad miniの容量が…

何が書いてある本なの

これから求められる「六つの感性（センス）」

今日から実践できそうなこと１ いいデザインはどんどんreblog

「気になったデザイン」は忘れずに記録

今日から実践できそうなこと２ 「言い得て妙」な比喩は村上春樹でストック

「いいたとえ話」は書き留めておく

今日から実践できそうなこと3 boketeでユーモアと右脳を鍛える

マンガの「吹き出し」のセリフを考える

まとめ 読書後に実践できることをメモるのは良い。

二次曲線（quadratic curve）のつくりかた

弦の動きをあらわす

ベジェ曲線のつくりかた

ベジェ曲線をアニメーションさせる

C4を試してみて

教育・創作のはじめの一歩に

フレームワークの中身にもぐって学ぶ

これから貢献していける

文字のパス化

変化させる文字

今日から実践できそうなこと１いいデザインはどんどんreblog

今日から実践できそうなこと２「言い得て妙」な比喩は村上春樹でストック

今日から実践できそうなこと3　boketeでユーモアと右脳を鍛える

まとめ　読書後に実践できることをメモるのは良い。