Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード Twitter

2016-04-20

海外のカンファレンスに登壇する - 応募編 #potatotips

本日、potatotips #28(iOS/Androidの開発Tips共有会)にて標題の発表をさせていただきました。



iOSのカンファレンスに自分で応募して、採択されるまでの話です。


以下、スライド内容の抜粋。


はじめに

iOSのカンファレンス、UIKonf 2016(ベルリン), iOSCon 2016(ロンドン) に登壇させていただくことになりました!

  • どちらも国内外からスピーカーが来る国際カンファレンス
  • チケット代
    • UIKonf:€450+VAT19%(約66,000円)
    • iOSCon:£650(約101,500円)
  • どちらも登壇者は計18人

f:id:shu223:20160420232101j:image:w600


・・・と言っても

  • 招待されたわけではない
  • 自分で応募して、投票・審査の上で採択された

アジェンダ

1. なぜ応募したか

2. CFPをどう見つけたか

3. Proposalをどう書いたか

4. 審査過程はどうだったか

1. なぜ応募したか?

国際カンファレンスに登壇する(僕にとっての)メリット

  • ログに残る
    • 英語でググッて見つかる「入り口」になる
  • 著名な常連スピーカーの方々に自分の話が届く
    • 海外から仕事がくるきっかけになるかもしれない
    • 別のカンファレンスにも呼ばれるかもしれない
  • 海外に行けるのが嬉しい/楽しい
    • 旅行もいいけど個人的には本業と絡んだほうが楽しい
    • 航空券代・ホテル代は出る(カンファレンスによるかもしれない)
  • 英語を「必死で」練習する機会になる
    • 30分ぶんの、自分の得意な分野について話す英語表現の「引き出し」 をつくる機会にもなる
  • 経歴に書ける

メリットだらけ


2. CFPをどう見つけたか

CFPとは
  • Call for Proposal (Papers / Participation)
  • 登壇者を募集してます、の意味
カンファレンスの探し方
CFPを見つける
  • カンファレンス開催予定はわかっても、CFPは見つけづらい
  • 招待講演だけ(CFPなし)のカンファレンスも多い

探し方

  • ググる
    • "ios conference 2016 "cfp""
    • "ios conference 2016 "call for""
  • Calls for participation | Lanyrd
  • カンファレンス常連の方々のTwitterアカウントをフォローしておく
    • 中の人とつながってたり、中の人だったりするので、たまにCFPのツイートが流れてくる


3. Proposalをどう書いたか

当初案

「いつもの勉強会」と同じように話したいネタを棚卸し

  • iOS×機械学習
  • OpenCV 3
  • iOS×BLE
過去のカンファレンスの登壇内容を見てみた
  • [altconf.com/schedule/:title=AltConf 2015 Schedule]
    • タイトルと概要が一覧で見れて参考にしやすい
  • WWDC
    • iOSエンジニアには馴染み深い
  • その他諸々
  • (※応募当時は try! Swift 開催前)
歓迎されるっぽいTALK
  • スピーカーがその分野で十分な経験がある
    • 「このライブラリをちょっと触ってみました」的な話はさすが にない(そのライブラリの作者で、設計思想等も含めて話せる場合は別)
    • 「その人ならでは」の話(バックグラウンドが活きる話)
  • 体系立てて話せる
    • ↔ 雑多な、箇条書き的な話

これと自分のネタを照らしあわせてみると・・・

  • iOS×機械学習
  • OpenCV 3

→ 専門家でもなければ、 がっつりやった経験もない。発表のプレッシャードリブンで 「これから」勉強したいだけ

  • iOS×BLE

→ (BLE自体にめちゃめちゃ詳しいわけじゃないが、)iOSエンジニアとしてハードウェアプロジェクトに関わった経験数としては多い方だと思う。書籍も書いたので多少は体系立てて話せそう。

完成品

f:id:shu223:20160420203729p:image:w500


4. 審査過程はどうだったか

UIKonf
  • 匿名フィードバックがあり、Proposalをアップデートできる
  • 匿名投票(GitHubアカウントでログイン/8つ選択)
  • 運営によってさらに絞り込まれる
  • 採択率 8 / 60ぐらい?(スピーカー全18人中8人がCFP枠?)
iOSCon
  • 運営による審査
  • 応募数不明
  • 登壇者計18人、うち招待講演は6人(スケジュールが単独で組まれている)

まとめ

  • なぜ応募したか
    • フリーランスとしての海外進出の足がかり
    • 英語の練習
    • 海外に行きたい
  • CFPをどう見つけたか
    • ググる/常連スピーカーをウォッチする
  • Proposalをどう書いたか
    • 過去のカンファレンスを参考にしつつ持ちネタを絞り込んだ
  • 審査過程はどうだったか
    • カンファレンスによって色々(投票/運営による審査)

おわりに

準備と練習をしっかりして臨みます!



以上、スライドより。


主催/会場提供のエウレカさん(広くて天井高くてものすごい良かった)、登壇者のみなさま、参加者のみなさま、ありがとうございました!


2016-04-16

GLKView の描画内容を AVAssetWriter を用いて動画としてエクスポートする

すごい雑なメモですが、ちゃんと書くにはまだ理解が足りてなくて、かといってローカルに放置するとまた同じことを一から自分で調べそうな気がするので、とりあえずアップ。


※古いコードを流用している部分もあるため、一部ObjC、一部Swiftです。


やりたかったこと

標題の通り、「GLKView の描画内容を AVAssetWriter に渡して動画として書き出す」ということがやりたかった。リアルタイムに処理する必要があって、要件としては20fps。


AVAssetWriterInputPixelBufferAdaptor オブジェクトがあって、

@property (nonatomic, strong) AVAssetWriterInputPixelBufferAdaptor *pixelBufferAdaptor;

こう生成した CVPixelBufferRef があって、

CVPixelBufferRef pixelBuffer = NULL;
CVPixelBufferPoolCreatePixelBuffer(nil, self.pixelBufferAdaptor.pixelBufferPool, &pixelBuffer);

ここに GLKView への描画内容を反映すれば、

[self.pixelBufferAdaptor appendPixelBuffer:pixelBuffer withPresentationTime:timestamp];

こんな感じで AVAssetWriter で動画エクスポートできる。


・・・ということはわかっていたけど、CVPixelBuffer に GLKView の描画内容をどうやったら渡せるのかがわからなかった。


試した方法1: テクスチャキャッシュを利用して OpenGL の FBO を書き出す

ググッてこちらで見つけた方法。以下にコードがある。

`CVOpenGLESTextureCacheCreate` と `CVOpenGLESTextureCacheCreateTextureFromImage` なるメソッドを使用してテクスチャキャッシュなるものを生成して Frame Buffer Object (FBO) を云々する(処理内容を理解できていないので適切な説明ができない)。GPUImage と同様の方法らしい。


自分のプロジェクトに移植してみたがうまく動かず、上のコードと何が違うのかにらめっこしていたが、READMEをよく読むと 元コードもちゃんと動作してない と書いてあり、リファレンスコードなしであれこれ試行錯誤する時間もないので、いったん別の方法を考えることに。


試した方法2: GLKView のスナップショットを取得する

UIView のスナップショット取得はそれなりに重い印象があったのと、リアルタイム処理(20fps)の必要がありなるべくUIKitのレイヤーで処理したくなかったので当初は思いついても頭から除外していた選択肢。


ただ方法1が頓挫して、今日中に落とし所を見つけたかったので、少々フレームレートが落ちてもいいので試してみよう、ということでこっちでやることに。


下記によると、GLKView の描画内容は `renderInContext:` ではスナップショットとれないらしい。Core Graphics だからそりゃそうか。

You need to grab the view's framebuffer pixel data using OpenGL ES. You can't do it with renderInContext:.


で、同回答にリンクがあったのが下記。

GPUImage の作者 Brad Larson さんの回答。`glReadPixels()` でピクセルデータを取り出す方法と、テクスチャキャッシュを利用する方法が提示されている。後者は方法1で断念した方向なので厳しい・・・


前者の `glReadPixels()` を利用する方法は、下記に UIImage に変換するまでのコードがあった。

- (UIImage*)snapshotRenderBuffer {

    // Bind the color renderbuffer used to render the OpenGL ES view
    // If your application only creates a single color renderbuffer which is already bound at this point, 
    // this call is redundant, but it is needed if you're dealing with multiple renderbuffers.
    // Note, replace "_colorRenderbuffer" with the actual name of the renderbuffer object defined in your class.
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);

    NSInteger dataLength = backingWidth * backingHeight * 4;
    GLubyte *data = (GLubyte*)malloc(dataLength * sizeof(GLubyte));

    // Read pixel data from the framebuffer
    glPixelStorei(GL_PACK_ALIGNMENT, 4);
    glReadPixels(0.0f, 0.0f, backingWidth, backingHeight, GL_RGBA, GL_UNSIGNED_BYTE, data);

    // Create a CGImage with the pixel data
    // If your OpenGL ES content is opaque, use kCGImageAlphaNoneSkipLast to ignore the alpha channel
    // otherwise, use kCGImageAlphaPremultipliedLast
    CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, dataLength, NULL);
    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
    CGImageRef iref = CGImageCreate(
                                    backingWidth, backingHeight, 8, 32, backingWidth * 4, colorspace, 
                                    kCGBitmapByteOrder32Big | kCGImageAlphaNoneSkipLast,
                                    ref, NULL, true, kCGRenderingIntentDefault);

    // (sayeth abd)
    // This creates a context with the device pixel dimensions -- not points. 
    // To be compatible with all devices, you're meant to keep everything as points and a scale factor;  but,
    // this gives us a scaled down image for purposes of saving.  So, keep everything in device resolution,
    // and worry about it later...
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(backingWidth, backingHeight), NO, 0.0f);
    CGContextRef cgcontext = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
    CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, backingWidth, backingHeight), iref);

    // Retrieve the UIImage from the current context
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    // Clean up
    free(data);

    return image;
}

(結局 Core Graphics を経由するのか。。)


で、最終的に以下の回答に行きつく。


あれ、`snapshot` なんてメソッドあったっけ?と思って調べてみたら、GLKView に元から用意されていた・・・!

@property (readonly, strong) UIImage *snapshot;

最終的にうまくいった方法

guard let cisnapshot = CIImage(image: snapshot) else { fatalError() }
drawImage = cisnapshot.imageByCompositingOverImage(drawImage)

glView.ciContext.render(
    drawImage,
    toCVPixelBuffer: pixelBuffer,
    bounds: drawImage.extent,
    colorSpace: CGColorSpaceCreateDeviceRGB())

上記コードの前提

  • GLKView の `snapshot` メソッドで取得した UIImage が `snapshot` に入っている
  • `drawImage` は諸々の処理を経由した CIImage オブジェクト

2016-03-20

「本気ではじめるiPhoneアプリ作り」の紹介/iOSアプリ開発の勉強法について

Yahoo!のiOS黒帯エンジニア、西さん(および SB Creative さま)よりご献本いただきました。


f:id:shu223:20160320105728j:image:w400


『本気ではじめるiPhoneアプリ作り 黒帯エンジニアがしっかり教える基本テクニック』というタイトルで、環境構築からアプリのリリースまでをカバーした実践的入門書です。まだ発売されたばかりで、Xcode 7、Swift 2 の最新開発環境に対応 しているのもポイントです。



書籍の特長

冒頭にも書きましたが、著者の西さんは ヤフーで「黒帯」として認定 されている方で、つまり現場でバリバリのエキスパートとして認められている方です。


というわけで本書は入門書でありつつ、AutoLayout、データの永続化、サウンド、アニメーション、通信処理といった 昨今のアプリ開発には不可欠な要素 を、ToDoリストアプリや商品検索アプリといった 具体的なサンプルをつくりながら学べる「実践的」な内容となっています。

(目次より一部抜粋)

  • Chapter4 アプリの基本をマスターしよう
    • 割引計算アプリで学ぶ画面レイアウトとボタン操作
  • Chapter5 永続的なデータを扱う
    • ToDoリストアプリで学ぶデータ操作
  • Chapter6 サウンドとアニメーションの処理
    • クイズアプリで学ぶサウンド・バイブレーション・グラフィックス操作
  • Chapter7 通信できるアプリを作ろう
    • 商品検索アプリで学ぶ通信の方法

ちなみに通信処理が入るアプリにはAPIを提供するサーバー側も必要ですが、そこはYahoo!のWeb APIを利用し、サーバーサイドの実装なしで実現できるように配慮されていました。

let entryUrl: String = "https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch"

下記は、著者自身による紹介記事です。

アプリを作り上げていくにはさまざまな基礎知識が必要になるわけですが、本書ではiOSアプリ開発において重点的に押さえておくべき基本をまとめつつ、実際にApp Storeへリリースできるアプリを開発できるようになるまでを爆速で支援するように書いています。


また、koogawaさんのブログでも各章ごとの詳しい書評が書かれています。


おまけ:iOSアプリ開発の勉強法について

こういう話もあって、「iOSアプリ開発はどう勉強したらいいか?」「おすすめの入門書は?」みたいな質問をされることがよくあります。なかなかそういう話をブログに書く機会もないので、今回の入門書の紹介に乗じて書かせていただこうかと。


とはいえ普遍的な話はできないし、正解もないので、あくまで「僕の場合はこうでした」という話として、参考程度にお読みいただければと。


入門書購入

iOSアプリ開発を始めたとき、まず入門書を数冊買いました。はじめてのMacbookを買った帰り、有楽町のビックカメラの技術書コーナーでパラパラめくって、「話が理解できそうなもの」を選んだ記憶があります。


当時のブログに書いた記事がこちら。

この本に載ってたサンプルアプリを、

内容を理解することなく手順をなぞって実装し、

とりあえず動かしてみました。


意味を理解しないまま手順通りにXcodeでプロジェクトをつくって、3行ぐらい、意味を理解しないまま本に書かれている文字列(プログラム)を打ち込んで、本に書いてある通りにビルドのボタンを押すと・・・シミュレータで「ブラウザアプリ」が動作したのです。ブラウザってめっちゃ難しそうって思ってたので、これはちょっとした感動でした。


第一作目のアプリ

その後「ビルドして実機で動作させる」手順まで覚えた僕が次にやったのは、本の通読ではなく、本質を理解しようとすることでもなく、

  • 手元にある書籍のサンプルコードを一通りビルドして試してみる
  • そのサンプルコードからの改変でつくれそうなアプリを考えてみる

ということでした。


で、つくってストアでのリリースまで漕ぎ着けたのが、「余命電卓」というアプリです。


『iPhone SDKの教科書』という書籍に収録されていた、年齢を計算する『Age』というサンプルが元になっています。

  • ピッカーで誕生日を設定できる
  • 設定した誕生日から算出した「現在の年齢」が表示される

というサンプルで、僕のつくった余命電卓は、単にその「現在の年齢」の代わりに「余命」(78 - 現在の年齢)を表示するようにしただけでした *1


f:id:shu223:20160320231930p:image:w280:left

f:id:shu223:20160320231928p:image:w280:left



このサンプルコードの改変に必要だった知識は、

  • アイコンなどの画像リソースの入れ替え
  • ボタンを押したら設定画面に遷移するようにする
  • 年齢の代わりに「平均寿命 - 年齢」で計算した余命を表示する
  • 余命を時間・分・秒等に換算する
  • タイマーで秒数カウントダウン

これぐらいです。画面遷移やタイマー等は、同様の機能を実現している他のサンプルをあたって、該当するコードを持ってきました。


挫折しないコツ1:わからないことには目を瞑る

Xcodeプロジェクトを新規作成するだけで、わらわらとわけのわからないファイルがたくさん生成され、実際にプログラムを書くファイルである 〜.h や 〜.m (今だと 〜.swift)にも最初からわけのわからないことが色々と書かれています。


そういうのを 全部理解しようとしなかった、のが途中で挫折しなかった秘訣かなと。


Objective-Cでいうと、@interface, @implementation って何なのかとか。assign だとか nonatomic とか。


もちろん大事ではあるのですが、プログラミングを始めたばかりの人がそういうのをひとつひとつしっかり理解してから前に進もうとすると、動くものをつくれるようになるまでが遠すぎて、挫折してしまうのかなと。


挫折しないコツ2:できないことはあきらめる

余命電卓の最初のバージョンでは、日本男性の平均寿命78歳から誕生日を引く、という超シンプルなロジックだったのですが、次に僕がやろうとしたのは、「性別を選ぶと男女それぞれの平均寿命から引き算する」というものでした。


・・・が、なぜかクラッシュする・・・


当時の僕は解決方法がわからなくて、その機能をあきらめました


プログラミングにおいて、的確にトラブルシューティングを行うことは、(ものにもよりますが)しっかりした理解と経験を必要とするわりと高等な技術だと思っています。ここで挫折して二度とプログラムをやらないよりは、あきらめて別のできそうなことを探す、というのもひとつの手かと。


サンプルドリブン勉強法

そんなわけで、僕が「Age」から「余命電卓」をつくったように、最初からある程度機能があって、動くコード、つまりサンプルコードから始めて、そこに書いてある色んなわけのわからないことには目を瞑りつつ、画像を入れ替えてみるとか、計算の足し算してるところを引き算にしてみるとか、そういう わかること/できることだけでまずはやってみる、というのも、挫折せずにプログラミングの楽しさを知る=入門するためのひとつの方法かなと、僕の経験から思います。


入門書の選び方

上記の経験をふまえつつ、個人的に入門書を選ぶ際の観点としては以下をオススメしています。

  • 自分がつくりたいアプリに近いサンプルが載っている
  • 出版年月が新しい
    • 古いと、サンプルが動かない可能性がある
    • 動かないサンプルを動くようにするのは入門者には厳しいかも
  • パラパラとめくって、自分にとって説明がわかりやすそうか?をみる
    • 人によって前提知識は全然違うし、文章の好みとかもあるので

まとめ

最新の開発環境に対応した実践的入門書「本気ではじめるiPhoneアプリ作り」を紹介しつつ、僕がアプリ開発を始めたころの勉強法についても書かせていただきました。どなたかの参考になれば幸いです!


*1:今は広告とかツイート機能とか入ってますが、リリース当初はもちろんそんな機能はありません。

2016-03-07

try! Swift振り返り/英語/国際カンファレンス #tryswiftconf

国内初のiOSの国際カンファレンス「try! Swift」に全日程(3日間)参加してきました。技術的な振り返り(復習)は別記事でやるとして、ここでは感想的なものを。


f:id:shu223:20160307104442j:image:w400

(今回の主催者であり、Natasha The Robot / This Week in Swift の中の人、ナターシャさんと)


参加してよかったこと

自分のヤバさが認識できた

昨年まではほとんどの場合でObjective-Cを書き、たまーに見栄をはりたいとき(発表スライドに載せるちょっとしたコードとか、書籍のサンプルとか)にちょろっと付け焼き刃のSwiftを書いていた程度でした。


が、このカンファレンスのチケットを買ってからは意識してSwiftを書くようになり、最近やっと ObjC より Swift が気持ちよく書けるようになってきたところです *1


で、本カンファレンスに参加して、言語的な話にはほとんどついていけず、iOSしかやってない自分がiOSの話についていけないなんて、どんだけおれしょぼいんだ、と。そういう自分の置かれている状況を自覚して悔い改める機会になってよかったです。


目線が上がった

最近、所用(後述)で他のさまざまなiOS関連カンファレンスとそのプレゼン内容を調べてたのですが、今回登壇されたスピーカー陣の多くは国際カンファレンスの常連です。


で、ああいうすごい人達に混じれるように勉強がんばるぞーという面もあるのですが、いくつかの自分の得意な分野の話(Core Animation、HomeKit、Core Image等)を聞くにつけ、今の僕でも国際的な舞台で提供できる価値というのはあるんじゃないかと。





もちろん僕の知識はまだまだ浅いところがあるので、もっと深掘りしないといけないし、英語力的にはカタコトレベルなので登壇するならめちゃめちゃ練習しないといけないだろうし、プロフィールがもっと国際的に通用するものになるように意識して行動していかないといけない。


そういう努力をしていこう、と今回参加したことでより強く思えるようになりました。


人間模様に感動した

人間模様というか、それぞれの生き様というか、多くの方から刺激を受けまくった3日間でした。一例を挙げると、

  • 岸川さん・・・これだけの規模のイベントを主催するというのはどれほど大変なことか想像もつきません。iOSエンジニアコミュニティへの貢献度が本当に素晴らしすぎる。
  • 日本人スピーカーの方々・・・よく練られた構成と鮮やかでインパクトのあるライブコーディングで国内外の人達にawesomeと言わしめた石川さん、ハイレベルな話を堂々とした英語で話す稲見さん等々、みなさんかっこよかったです。
  • niwatakoさん・・・クオリティの高い全文聞き起こし記事がリアルタイムに(たった5分の休憩の間に)上がってくるのには誰もが度肝を抜かれてました(日本語読めない海外の人達の間でも話題になってました)。こういうそれぞれの得意なところでポジションをとっていく(貢献する)姿勢はぜひ見習いたいところ。

  • 同時通訳の方々・・・日本語と英語両方できますとかってレベルじゃなくて、感動を覚えるレベルでした。これがプロか、と。


英語

参加者の多くが触れている英語の話。会期中はセッションについていくのに必死であんまり海外の方としゃべってないのですが、ベルリンから来られた CocoaPods コミッタの Boris さん(初日にtvOSの話をされていた)や、



アフターパーティでは冒頭写真にあったように主催者の Natasha さん、Core Image の話をされていた Simon さん、Core Animation の話をされていた Tim さん(この方は日本語ペラペラだけど。。)、UIKonf/objc.io主催の Chris さん、Tokyo iOS Meetup の Matthew さん等々とお話させていただきました。


で、僕は昨年までマジで英語に苦手意識があり *2、WWDCでSFにいってもミートアップにも出ず、英語コミュニケーションには恐怖すら覚えていたわけですが、ここ最近の「英語を使わざるを得ない環境に飛び込んで場数を踏む」作戦が功を奏し、コミュニケーション力に関してはずいぶん改善したなと。


もちろんヒアリング力は一朝一夕では伸びないし、スピーキングも表現力がなさすぎる(Nice とか Good とか Wow ばっかり言ってる)のですが、質問するとか、自己アピールするとか、とにかく「自分から話しかけて何らかのことを伝えてこれるようになった」(雑談/フリートークはまだできない)というのは大きな進歩だなと。


英語力の本質的な向上には量をこなすしかないと思うのですが、僕の場合はいくつかのことを「あきらめる」ことでブレークスルーがあったと思っていて、このへんのことはいつか整理して書いてみたいと思います。(もうちょいマシになってからの方が説得力あるかな・・・?)


国際カンファレンス

try! Swift きっかけというわけではないのですが、この記事の末尾に以下のように書きました。

ベルリンだけでなくシリコンバレー等に行っても毎回感じることですが、無力感が半端ないです。仕事をやってみたりハッカソンに出てみたりして、技術的に通用しないということはないと思ってますが、誰も僕のことを知らないし(知名度以前に知り合いがいないという意味で)、そういう僕がベルリンに行ったところで、現地の他のスタートアップの方から「会いたい」とか言われることはありません。


(中略)


僕がニュースとかで海外のそういう系の魅力的なプロダクトを見るタイミングではもう遅くて(メディアに出て話題になっているということはある程度開発が進んでいるか完了しているケースが多い)ファウンダーが資金調達して本格的に開発をしようとするタイミングであちらから見つけてもらえるようにならないといけない。


で、LinkedIn や AngelList で人を探す場合は大抵「住んでいる場所」でフィルタされてしまうので、英語ブログという「海外スタートアップに自分を見つけてもらうためのチャネル」を用意する必要があるなと。


僕のGitHubアカウントは今でも多少そういう感じの機能をしてくれてますが、(後略)


で、この「自分を見つけてもらうためのチャネル」として、「国際カンファレンスで話す」というのは

  • 著名な常連スピーカーの方々に自分の話が届く
  • ログに残る(→ 英語でググッて見つかる「入り口」になる)

という理由から効果大かも、と思いまして、UIKonf というヨーロッパのiOSカンファレンス *3CFPに応募してみました。



運営による Pre-Selection は通過(!)しまして、現在最終投票フェーズです *4。もし採択されたら必死で準備して臨みたいと思っております。


お知らせ

今週末、ひさびさに登壇させていただきます。

パネルディスカッションを通じて『エンジニアの最初の一歩』について、 これからプログラミングをはじめてみようかな〜と考えている方 にも一緒に考えていただき、

とのことで、try! Swift 参加者のみなさまはちょっと違うのかもしれませんが、無料とのことですのでご興味があればぜひ!


try! Swift復習記事

書いたら追記していきます。


*1:以前はObjCなら5秒で書けるところを、Swiftの場合はググラないといけなかったりしてそれがストレスだった

*22013年にアメリカに行ってからこの苦手意識がますます強くなった

*3:今回 try! Swift に登壇された Chris さんは主催の一人

*4:審査や投票は匿名で進めるとのことで、僕のProposalがどれというのは採択されるまでは書けないっぽいです

2016-03-04

Sketch買ったばかりのプログラマがアイコンデザインに挑戦してみたメモ #tryswiftconf

「try! Swift」2日目のセッション "Live Design:🎙🎨" (日本語タイトル:ライブデザイニング)で、Sketchを使ってサクサクとアイコンをつくっていく過程を見て、



と思い *1、さっそくダウンロードして同じ手順をなぞってみることにしました。


f:id:shu223:20160303231308p:image

Sketch - Professional Digital Design for Mac


ちなみに購入する気満々だったのでこういうタイトルにしたものの、Free Trialで30日間は無料で使えるようです。


@niwatako さんの聞き起こし記事を参考に手順をなぞっていきます。

(※杞憂だとは思いますが、「こんなのは単なるツールのオペレーションであってデザインとは言わない!」みたいな話はご容赦ください。。)


新規プロジェクト(?)作成

iOS App Iconというテンプレートがあるが、使わない。普通に [File] > [New] する。


アイコン外枠の矩形をつくる

  • 左上の+ボタン(Insert) > [Shape] > [Rectangle]、もしくはRボタン押下で矩形描画。
    • Shift押しながらドラッグすると正方形になる。
  • 1024x1024にする(iOSのアイコンサイズ)
  • 色をつける

f:id:shu223:20160303230052p:image:w600


角丸の線を引く

  • 白い矩形の背景をつくる
  • 細長い矩形の線(LineではなくあくまでRectangle)を引く
  • 線を角丸にする
  • 線をコピペする

f:id:shu223:20160303230143p:image:w600


青空をつくる

  • 矩形を作成
  • Fill の欄でグラデーションのアイコンを選択
  • 薄い方の色、濃い方の色を選ぶ

f:id:shu223:20160303230322p:image:w600


ビルをつくる

  • 矩形をたくさんつくる

f:id:shu223:20160303230403p:image:w600


  • 左ペインからビル矩形のレイヤーを全部選択する
  • 右クリック > [Group Selection] (グループ化)
  • 全部選択した状態で、いっぺんにプロパティ(ここでは色)を変えられる

f:id:shu223:20160303230522p:image:w600


雲をつくる

  • たくさん楕円を書く
    • 楕円は +ボタン(Insert)> [Shape] > [Oval] か oボタン

f:id:shu223:20160303230627p:image:w600


  • Shiftを押しながら複数の楕円を選択して [Union] (結合)
  • グラデーションさせる(アルファの値を変える)
  • レイヤーをビルより後ろに持っていく

f:id:shu223:20160303230651p:image:w600


地球とか

(ちょっと飽きてきたので)巻きでいきます。。


f:id:shu223:20160303230743p:image:w600


下の何か

  • これまでつくってきたものを全部グループ化しておく
  • 下に長方形を作成
  • 横方向にグラデーション(グラデーションの◯をドラッグすると向きを変えられる)

f:id:shu223:20160303230848p:image:w600


(セッションのときから思ってたけど、これは何なんだろう・・・?)


エクスポート

  • 全レイヤー(グループ)をグループにまとめてiconと命名する
  • [File] > [New from Template] > [iOS App Icon] でテンプレート作成
  • 先ほどのiconグループを貼り付ける
  • 大きさ、位置を調整

f:id:shu223:20160303230921p:image:w600


  • 左ペインの下の方に "Mask" というレイヤー(?)があるので削除する(角丸不要なので)

f:id:shu223:20160303231018p:image:w600


  • 選択して、右下の Export ボタンを押す

出来上がり

f:id:shu223:20160303231111p:image:w256


所感

イラレが食わず嫌いだったのかはわかりませんが、ものすごく簡単でした。アプリのアイコンデザインを自分でやることはあんまりないかもしれないとは思うのですが(重要すぎるのでやはりここはプロに任せたい)、プレゼン資料等の図を作成するのに良さそう、と思いました。


とりあえず30日はタダですし、本日のセッションみてやってみようかなと思った方、ぜひお試しください!


使った操作リスト

  • 矩形(角丸)作成・・・R
  • 楕円作成・・・O
  • 線・・・L
  • 曲線・・・V
  • 塗りつぶし
  • グラデーション
  • グループ化
  • 一括色変更
  • 結合

*1:かつて Adobe の Illustlator を買ったものの、何となく難しそうで結局使ったことがない

2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 12 |
2016 | 01 | 02 | 03 | 04 |