Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

キーボードアプリとSketchのススメ

1,266 views

Published on

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

Published in: Technology
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

キーボードアプリとSketchのススメ

  1. 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. 2. 自己紹介 2tchの中の人 • iOS好きです • 2tch(2ちゃんねるビューア) • iOS SDK Hacksなど • 研究・開発 • コンピュータビジョン • 機械学習 • 画像検索サービスとか • 車向けサービスやハードウェアとか
  3. 3. 今日のお話 • キーボードアプリ • App Groups - CoreData - iCloud • カスタムフォント • その他 • Sketch • 何がいいのか • 何が悪いのか • 非デザイナにとってのSketch
  4. 4. AAKeyboard
  5. 5. Demo AAKeyboard
  6. 6. メイン機能 • AAキーボード • Safariからの登録機能 • アプリからAAを編集 • iOS8の新機能を色々組み込んで作ってみた
  7. 7. データの共有方法 • App Groups • App, Keyboard, Actions - 同一グループを指定 • キーボードはフルアクセスが必要 • CoreData via App Groups • App Groupsを使って共有可能 • 同期は完璧っぽい • CoreData on iCloud via App Groups • 更新が遅い・・・?
  8. 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. 9. カスタムフォント • Keyboard, Actionともに普通に使える
  10. 10. 作った人に聞きたい! • キーボードのAutolayoutの挙動が全体的に変 • なんか,ヘンなんです • Action Extensionのときのキーボードの処理 • UIApplicationを使えない→keyWindowがとれない • キーボードに数字キーは必要なの? • fuckin’review and guidelines • キーボード・フルアクセスかをバンドル元のアプリか ら調べる方法
  11. 11. Sketch
  12. 12. 唐突ですが • デザインしてますか? • 画面設計,アイコン,アプリアイコン・・・ • どんなツールで? • 人に依頼してる? • 自力で?
  13. 13. Sketchって何? • 最近流行ってきたドローツール? • Apple Watchのテンプレートの形式に採用された • ベクトルグラフィクス • UIデザインをメイン作業として設計されている • AAKeyboardのUI, アイコンのデザインに利用 • 今日は,それに当たってのよかったところを紹介
  14. 14. デザインの雄 • 機能大杉 • 高杉 • 汎用 よくも悪くもプロの汎用ソフトウェア.
  15. 15. 新参者ですが • 機能がそこまでない • 9800円安い • UI設計用 • ピクセルベースで合わせやすい ある程度目的特化型の方がいい面もある
  16. 16. デザインの方法 • 用意された部品で画面を構成していく
  17. 17. デザインの方法 • 用意された部品で画面を構成していく
  18. 18. 位置測るのも楽
  19. 19. ピクセルベースの確認も一発
  20. 20. ピクセルベースの確認も一発 ベクトルグラフィクスでありがちな中途半端な位置に置いて アンチエイリアスのせいでぐちゃぐちゃ不祥事案件回避
  21. 21. 確認は実機で Sketch Mirror
  22. 22. 右上のボタンを押すだけで・・・・
  23. 23. もちろん,書き出しも一括
  24. 24. 倍率と名前を設定できる
  25. 25. まとめ • キーボードアプリでできること • App Groups • CoreData共有 • カスタムフォント • Sketch.app • デモ • デベロッパにお勧め • 色々機能

×