キーボードアプリ作りとデザインツールとしてのSketchについて．

1. Sketch! Sketch! Sketch!
Design&Tools
Yuichi Yoshida
Chief engineer, DENSO IT Laboratory, Inc.
#yidev
@sonson_twit
© 2014YuichiYoshida, All rights reserved. Redistribution or public display not permitted without written permission from YuichiYoshida.
Sketchでデザインしたキーボードアプリを作ってみた

2. 自己紹介
2tchの中の人
• iOS好きです
• 2tch(２ちゃんねるビューア)
• iOS SDK Hacksなど
• 研究・開発
• コンピュータビジョン
• 機械学習
• 画像検索サービスとか
• 車向けサービスやハードウェアとか

3. 今日のお話
• キーボードアプリ
• App Groups - CoreData - iCloud
• カスタムフォント
• その他
• Sketch
• 何がいいのか
• 何が悪いのか
• 非デザイナにとってのSketch

4. AAKeyboard

5. Demo
AAKeyboard

6. メイン機能
• AAキーボード
• Safariからの登録機能
• アプリからAAを編集
• iOS8の新機能を色々組み込んで作ってみた

7. データの共有方法
• App Groups
• App, Keyboard, Actions - 同一グループを指定
• キーボードはフルアクセスが必要
• CoreData via App Groups
• App Groupsを使って共有可能
• 同期は完璧っぽい
• CoreData on iCloud via App Groups
• 更新が遅い・・・？

8. フルアクセス？ーApp Groupsを使う場合
NSError *error = nil;
NSFileManager *fm = [NSFileManager defaultManager];
NSString *containerPath= [[fm
containerURLForSecurityApplicationGroupIdentifier:@"group.com.sonso
n.AAKeyboardApp"] path];
[fm contentsOfDirectoryAtPath:containerPath error:&error];
if (error != nil) {
return NO;
}
return YES;

9. カスタムフォント
• Keyboard, Actionともに普通に使える

10. 作った人に聞きたい！
• キーボードのAutolayoutの挙動が全体的に変
• なんか，ヘンなんです
• Action Extensionのときのキーボードの処理
• UIApplicationを使えない→keyWindowがとれない
• キーボードに数字キーは必要なの？
• fuckin’review and guidelines
• キーボード・フルアクセスかをバンドル元のアプリか
ら調べる方法

11. Sketch

12. 唐突ですが
• デザインしてますか？
• 画面設計，アイコン，アプリアイコン・・・
• どんなツールで？
• 人に依頼してる？
• 自力で？

13. Sketchって何？
• 最近流行ってきたドローツール？
• Apple Watchのテンプレートの形式に採用された
• ベクトルグラフィクス
• UIデザインをメイン作業として設計されている
• AAKeyboardのUI, アイコンのデザインに利用
• 今日は，それに当たってのよかったところを紹介

14. デザインの雄
• 機能大杉
• 高杉
• 汎用
よくも悪くもプロの汎用ソフトウェア．

15. 新参者ですが
• 機能がそこまでない
• 9800円安い
• UI設計用
• ピクセルベースで合わせやすい
ある程度目的特化型の方がいい面もある

17. デザインの方法
• 用意された部品で画面を構成していく

18. デザインの方法
• 用意された部品で画面を構成していく

19. 位置測るのも楽

20. ピクセルベースの確認も一発

21. ピクセルベースの確認も一発
ベクトルグラフィクスでありがちな中途半端な位置に置いて
アンチエイリアスのせいでぐちゃぐちゃ不祥事案件回避

22. 確認は実機で
Sketch Mirror

23. 右上のボタンを押すだけで・・・・

24. もちろん，書き出しも一括

25. 倍率と名前を設定できる

26. まとめ
• キーボードアプリでできること
• App Groups
• CoreData共有
• カスタムフォント
• Sketch.app
• デモ
• デベロッパにお勧め
• 色々機能