Submit Search
Upload
キーボードアプリとSketchのススメ
•
3 likes
•
1,837 views
Yuichi Yoshida
Follow
キーボードアプリ作りとデザインツールとしてのSketchについて.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 26
Download now
Download to read offline
Recommended
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Naoki Masuda
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Yuichi Yoshida
Swift - Result<t>型で結果を返すのは邪道か,王道か
Swift - Result<t>型で結果を返すのは邪道か,王道か
Yuichi Yoshida
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
Jokerscriptを勝手に紹介
Jokerscriptを勝手に紹介
tuna cook
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuser5f0731
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuserf43cf0
Recommended
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Sketch 3 を使って、コンテンツの魅力を 最大限に活かしたUIを作ろう
Naoki Masuda
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Yuichi Yoshida
Swift - Result<t>型で結果を返すのは邪道か,王道か
Swift - Result<t>型で結果を返すのは邪道か,王道か
Yuichi Yoshida
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
Jokerscriptを勝手に紹介
Jokerscriptを勝手に紹介
tuna cook
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuser5f0731
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuserf43cf0
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuserf43cf0
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Yuichi Yoshida
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
Takahiro Hirata
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
プレゼン用の図を自動生成する話
プレゼン用の図を自動生成する話
furandon_pig
Beatroboでのハードウェアプロトタイピング
Beatroboでのハードウェアプロトタイピング
Hideyuki TAKEI
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
Akihiro Mukai
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
Hiroyuki Mori
How to make a cutting wiring board by desktop CNC
How to make a cutting wiring board by desktop CNC
Imaoka Micihihiro
Introduction of FPGA
Introduction of FPGA
Imaoka Micihihiro
Yidev201406.pub
Yidev201406.pub
itoz itoz
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
Tomohiro Oda
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
Kentaro Ohkouchi
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
雄大 廣瀬
ミルフィーユ 自動回路設計ツール
ミルフィーユ 自動回路設計ツール
Yoshinari Kou
Viewのキャプチャを撮ってみる
Viewのキャプチャを撮ってみる
Yoshihiro Wada
CSS1行で変わる世界
CSS1行で変わる世界
YukiSamuraki
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Takao Sumitomo
SIGGRAPH 2019レポート
SIGGRAPH 2019レポート
Kenichi Takahashi
Managing machine learning
Managing machine learning
David Murgatroyd
Lessons learned
Lessons learned
hexgnu
More Related Content
What's hot
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
ssuserf43cf0
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Yuichi Yoshida
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
Takahiro Hirata
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
プレゼン用の図を自動生成する話
プレゼン用の図を自動生成する話
furandon_pig
Beatroboでのハードウェアプロトタイピング
Beatroboでのハードウェアプロトタイピング
Hideyuki TAKEI
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
Akihiro Mukai
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
Hiroyuki Mori
How to make a cutting wiring board by desktop CNC
How to make a cutting wiring board by desktop CNC
Imaoka Micihihiro
Introduction of FPGA
Introduction of FPGA
Imaoka Micihihiro
Yidev201406.pub
Yidev201406.pub
itoz itoz
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
Tomohiro Oda
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
Kentaro Ohkouchi
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
雄大 廣瀬
ミルフィーユ 自動回路設計ツール
ミルフィーユ 自動回路設計ツール
Yoshinari Kou
Viewのキャプチャを撮ってみる
Viewのキャプチャを撮ってみる
Yoshihiro Wada
CSS1行で変わる世界
CSS1行で変わる世界
YukiSamuraki
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
Takao Sumitomo
SIGGRAPH 2019レポート
SIGGRAPH 2019レポート
Kenichi Takahashi
What's hot
(20)
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
2021年度進級制作展プレゼンスライド
2021年度進級制作展プレゼンスライド
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
ex-Workshop06『three.jsを使ってモデリングソフトを試作する』
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
プレゼン用の図を自動生成する話
プレゼン用の図を自動生成する話
Beatroboでのハードウェアプロトタイピング
Beatroboでのハードウェアプロトタイピング
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
How to make a cutting wiring board by desktop CNC
How to make a cutting wiring board by desktop CNC
Introduction of FPGA
Introduction of FPGA
Yidev201406.pub
Yidev201406.pub
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
約2ヶ月デザイナーとペアプログラミングを行なった話と僕が伝えたいこと
ミルフィーユ 自動回路設計ツール
ミルフィーユ 自動回路設計ツール
Viewのキャプチャを撮ってみる
Viewのキャプチャを撮ってみる
CSS1行で変わる世界
CSS1行で変わる世界
エンジニアがプロダクト育成を始めるまでにやったこと
エンジニアがプロダクト育成を始めるまでにやったこと
SIGGRAPH 2019レポート
SIGGRAPH 2019レポート
Viewers also liked
Managing machine learning
Managing machine learning
David Murgatroyd
Lessons learned
Lessons learned
hexgnu
BAHSICアルゴリズムによる非線形データからの特徴選択
BAHSICアルゴリズムによる非線形データからの特徴選択
Mika Yoshimura
Machine Learning : The high interest credit card of technical debt
Machine Learning : The high interest credit card of technical debt
Yuichi Yoshida
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
MITSUNARI Shigeo
汎用性と高速性を目指したペアリング暗号ライブラリ mcl
汎用性と高速性を目指したペアリング暗号ライブラリ mcl
MITSUNARI Shigeo
「機械学習:技術的負債の高利子クレジットカード」のまとめ
「機械学習:技術的負債の高利子クレジットカード」のまとめ
Recruit Technologies
Let's Make the PAIN Visible!
Let's Make the PAIN Visible!
Arty Starr
A Programmer's Guide to Humans
A Programmer's Guide to Humans
Arty Starr
GoogleのSHA-1のはなし
GoogleのSHA-1のはなし
MITSUNARI Shigeo
Viewers also liked
(10)
Managing machine learning
Managing machine learning
Lessons learned
Lessons learned
BAHSICアルゴリズムによる非線形データからの特徴選択
BAHSICアルゴリズムによる非線形データからの特徴選択
Machine Learning : The high interest credit card of technical debt
Machine Learning : The high interest credit card of technical debt
C/C++プログラマのための開発ツール
C/C++プログラマのための開発ツール
汎用性と高速性を目指したペアリング暗号ライブラリ mcl
汎用性と高速性を目指したペアリング暗号ライブラリ mcl
「機械学習:技術的負債の高利子クレジットカード」のまとめ
「機械学習:技術的負債の高利子クレジットカード」のまとめ
Let's Make the PAIN Visible!
Let's Make the PAIN Visible!
A Programmer's Guide to Humans
A Programmer's Guide to Humans
GoogleのSHA-1のはなし
GoogleのSHA-1のはなし
Similar to キーボードアプリとSketchのススメ
Handoff from Safari
Handoff from Safari
Yuichi Yoshida
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
Mori Shingo
20180621_Node学園LT
20180621_Node学園LT
Kahori Takeda
第1回 コデアルiOSアプリ勉強会
第1回 コデアルiOSアプリ勉強会
codeal
APICのREST API入門
APICのREST API入門
Takehiro Yokoishi
20131005 cocoa関西
20131005 cocoa関西
Yosuke Uno
【de:code 2020】 AI Builder による、ローコード AI アプリケーション
【de:code 2020】 AI Builder による、ローコード AI アプリケーション
日本マイクロソフト株式会社
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Tomoki Hasegawa
Handoffは動かない〜これから役立たないバッドノウハウ集
Handoffは動かない〜これから役立たないバッドノウハウ集
Yuichi Yoshida
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
CData Software Japan
テキスト書き起こし&読み上げLINEボットを作ってみた
テキスト書き起こし&読み上げLINEボットを作ってみた
典子 松本
【de:code 2020】 ハンズオンで学ぶ AI ~ Bot Framework Composer + QnA Maker / Custom Visi...
【de:code 2020】 ハンズオンで学ぶ AI ~ Bot Framework Composer + QnA Maker / Custom Visi...
日本マイクロソフト株式会社
devsami kansai 2012 #c2
devsami kansai 2012 #c2
Yushi_Takagi
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
情報理工Android勉強会第一回大将Part
情報理工Android勉強会第一回大将Part
Hiroki Sakamoto
Clean Architecture用の開発ツールを作ったお話
Clean Architecture用の開発ツールを作ったお話
雄大 廣瀬
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Yasuharu Seki
Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版
Akira Hayashi
高さ比べじゃない、キャリアは歩んできた道
高さ比べじゃない、キャリアは歩んできた道
Kazumi IWANAGA
Similar to キーボードアプリとSketchのススメ
(20)
Handoff from Safari
Handoff from Safari
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
20180621_Node学園LT
20180621_Node学園LT
第1回 コデアルiOSアプリ勉強会
第1回 コデアルiOSアプリ勉強会
APICのREST API入門
APICのREST API入門
20131005 cocoa関西
20131005 cocoa関西
【de:code 2020】 AI Builder による、ローコード AI アプリケーション
【de:code 2020】 AI Builder による、ローコード AI アプリケーション
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Handoffは動かない〜これから役立たないバッドノウハウ集
Handoffは動かない〜これから役立たないバッドノウハウ集
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
テキスト書き起こし&読み上げLINEボットを作ってみた
テキスト書き起こし&読み上げLINEボットを作ってみた
【de:code 2020】 ハンズオンで学ぶ AI ~ Bot Framework Composer + QnA Maker / Custom Visi...
【de:code 2020】 ハンズオンで学ぶ AI ~ Bot Framework Composer + QnA Maker / Custom Visi...
devsami kansai 2012 #c2
devsami kansai 2012 #c2
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
情報理工Android勉強会第一回大将Part
情報理工Android勉強会第一回大将Part
Clean Architecture用の開発ツールを作ったお話
Clean Architecture用の開発ツールを作ったお話
ソニーでElectronアプリをリリースしてみた
ソニーでElectronアプリをリリースしてみた
Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版
高さ比べじゃない、キャリアは歩んできた道
高さ比べじゃない、キャリアは歩んできた道
More from Yuichi Yoshida
Halide, Darkroom - 並列化のためのソフトウェア・研究
Halide, Darkroom - 並列化のためのソフトウェア・研究
Yuichi Yoshida
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Yuichi Yoshida
Swiftで多層型で戻り値を返すことの是非と雑談
Swiftで多層型で戻り値を返すことの是非と雑談
Yuichi Yoshida
Getting started with Handoff
Getting started with Handoff
Yuichi Yoshida
Getting started with CloudKit
Getting started with CloudKit
Yuichi Yoshida
UIToolbarの同時タッチを防ぐ
UIToolbarの同時タッチを防ぐ
Yuichi Yoshida
UZTextView, UZMultilayeredPopoverControllerの解説
UZTextView, UZMultilayeredPopoverControllerの解説
Yuichi Yoshida
64bit化してみた話
64bit化してみた話
Yuichi Yoshida
Gitのすすめ
Gitのすすめ
Yuichi Yoshida
More from Yuichi Yoshida
(9)
Halide, Darkroom - 並列化のためのソフトウェア・研究
Halide, Darkroom - 並列化のためのソフトウェア・研究
Swift 2 (& lldb) シンポジウム
Swift 2 (& lldb) シンポジウム
Swiftで多層型で戻り値を返すことの是非と雑談
Swiftで多層型で戻り値を返すことの是非と雑談
Getting started with Handoff
Getting started with Handoff
Getting started with CloudKit
Getting started with CloudKit
UIToolbarの同時タッチを防ぐ
UIToolbarの同時タッチを防ぐ
UZTextView, UZMultilayeredPopoverControllerの解説
UZTextView, UZMultilayeredPopoverControllerの解説
64bit化してみた話
64bit化してみた話
Gitのすすめ
Gitのすすめ
キーボードアプリと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(2ちゃんねるビューア) •
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設計用 • ピクセルベースで合わせやすい ある程度目的特化型の方がいい面もある
16.
17.
デザインの方法 • 用意された部品で画面を構成していく
18.
デザインの方法 • 用意された部品で画面を構成していく
19.
位置測るのも楽
20.
ピクセルベースの確認も一発
21.
ピクセルベースの確認も一発 ベクトルグラフィクスでありがちな中途半端な位置に置いて アンチエイリアスのせいでぐちゃぐちゃ不祥事案件回避
22.
確認は実機で Sketch Mirror
23.
右上のボタンを押すだけで・・・・
24.
もちろん,書き出しも一括
25.
倍率と名前を設定できる
26.
まとめ • キーボードアプリでできること • App
Groups • CoreData共有 • カスタムフォント • Sketch.app • デモ • デベロッパにお勧め • 色々機能
Download now