はじめてのapple watch開発体験
TRANSCRIPT
TECHNOMOBILEGROUP
HEAD OFFICETOKUSHIMA development section
| 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tokyo 107-0062,Japan| 3floor Tokushimakenkohkagaku-center,Hiraishisumiyoshi,Kawauchi-cho,Tokushima-shi Tokushima 771-0134,Japan
はしめての AppleWatch開発体験
自分の好きな写真で AppleWatchを飾ろう!
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.5
6
まずは、 AppleWatchの画面を飾りたいですよね。昔、待ち受け場面とかいろいろいしったしゃないですかぁ
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.6
6
でも、好きなキャラクター、ねずみーらんどとか。。のアプリはなかなか見つからないですよね。好きなアニメのキャラクターでも飾りたいし。。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.11
6
この勉強会では、もしかしたらプログラムに興味が出てくるかもしれないけど、 AppleWatchを飾りたいっていう微妙な人向けに作成しました。
1分おきに壁紙が変わる時計を作ります。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.12
6
この学びの対象者は?→AppleWatchを飾りたい人。Macを持っていて、操作ができれば OK!プログラムについても簡単に説明するけど、興味がある人だけ聞けばよい。AppleWatchを持っていなくてもMacで動作確認できます。
教えないことは?→ばりばりの Swiftプログラマーではないので、 AppleWatchに関して深い知識はありません。難しい質問はしないで。
※盤面(フェイスウォッチ)のカスタムは許されていないので、時計アプリとして開発します。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.13
講師Gashfara,Inc.代表 デジタルハリウッド大学院客員講師茂木健一[email protected] [email protected] http://facebook.com/mogikenhttp://www.slideshare.net/mogiken1
自己紹介[プロフィール /実績 ]もぎ・けんいち●青山学院大学大学院卒。 Gashfara,Inc.代表。本社はハワイですが出社したことなし。ホノルルマラソンには参加w青山学院大学大学院卒:エニックスでオリジナルゲーム制作 (Z80アセンブラ CP/M)、 SmallTalkで人工知能開発(企業買収)。
(株)東洋情報システム退社後、(株)エイチアイ、グランスフィア(株)、(株)ファッションウォーカー(えびもえの EC)など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファラ・インクを USで起業。システム開発ではゲーム、 TOL(ツタヤオンライン)の立ち上げ。動画配信システム (USENの Gate01: Gyaoの前進 )、電子マネーシステム( Bitcash)、 ECフルフィルメントシステムなど、多彩な分野を経験。 IT関連教育では 1998年ころからデジハリの2.5階に間借りしながら教育コンテンツ作成( JIB社)。 Brew、 Java、セキュリティーなどの講師として活躍。現在、(株) HUGGを設立し、スマホのカップル向け SNS サービス [HUGG]をグローバルに展開。㈱テクノモバイルにて技術サポート。
【著書】BREWプログラミング実践バイブル [ 共著 ] (インプレス)、 PHP 逆引き大全 516の極意 [ 共著 ](秀和システム)
14
成長を実現させるシステム”モバイルトータルソリューション”
Webシステム
1
スマホアプリ
2 ゲームアプリ
3
モバイルトータルソリューション
B2B2C
コンシューマ向けの大規模 Webシステムの開発からアプリ・ゲーム開発までをマルチデバイスで対応
Technology 高い技術力 Market 市場ニーズとマッチ
大規模Webシステムに強い
Java,PHP
Strong1最先端技術・独自フレームワークで
効率的な開発
Strong2高トラフィック、インフラネットワークに強い
Strong3 プライマリーベンダー、
ヒアリング・要件定義に強いStrongⅠ
情報資産の活用最先端と知見に強い
StrongⅡ
最先端のマルチデバイス
ウェアラブルに強い
StrongⅢ
Mashup Awards 5 年連続 受賞会社名 株式会社テクノモバイル
設 立 2008年
資本金 2,500 万円
代 表 播田 誠
従業員数 100 名(グループ合計)
本社所在地 〒 107-0062
東京都港区南青山 7-1-5 コラム南青山
5F
開発室 〒 771-0134
徳島県徳島市川内町平石住吉 209-5
徳島健康科学総合センター 3F
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.15
まずは Xcodeをインストールしましょう
6
Xcodeとは iPhone,AppleWatchなどの開発をするためのアプリです。無償で使えます。Macで動作します。Windowsでは使えません。ここを参考に Xcode6をインストールしてください。簡単です。http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.16
Xcodeを起動してプロジェクトを作成しましょう
6
アプリを作る1つの環境がプロジェクトです。1つのアプリごとに1つのプロジェクトが必要です。
①
②
④
③
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.17
①アプリの名前などを適当に設定します。正式にリリースする時はgashfara.comではなく自分管理のドメインにしてください。
②
④
③ 保存場所を指定します。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.18
AppleWatchの設定をしましょう
6
AppleWatchの追加設定が必要です。
①メニュー。 File->New->Targetを選択します。
②
④
③
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.20
プログラムをコピーしましょう
6
プログラミングはしないので、完成したプログラムテキストをコピーします。
①Xcodeにあるこのファイルを開きます。
②このファイルのプログラムの中身が表示されます。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.21
6
https://drive.google.com/file/d/0Bw5FRKM4Lv-SZWNYencyRWthSW8/view?usp=sharing
以下から完成済みのファイルをダウンロードしてテキストを差し替えます。
①プログラムの中身をまるごと差し替えます。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.22
画面を作りましょう
6
①ストーリーボードを開きます。これで画面をデザインします。
②こんな画面が表示されます。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.23
6
①Imageの部品を、上にある画面に Drag&Dropします。これがWatchの壁紙画像になります。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.24
画面とプログラムをつなぎましょう
6
①2つの輪になっているボタンを押すとこのように画面とプログラムが同時に表示されます。
この状態にしてください。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.25
②うまく接続できればこのように○が◎になります。これで画面とプログラムが連携します。
6
①プログラム IBOutletの行に○があるのでこれをクリックして Dragすると線が伸びます。これを先ほど貼り付けた Imageの部品まで伸ばして接続してください。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.26
使用する画像をプロジェクトにコピーしましょう
6
https://drive.google.com/file/d/0Bw5FRKM4Lv-SRG1FX0RiOGNSNzQ/view?usp=sharing
画像ファイルをダウンロードして解凍してください。これがWatchの壁紙です。
①画像ファイル 16 個をここにドラッグしてください。
②ドラッグするとこの画面が表示されるのでこのように設定します。
③
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.28
シミュレータで動かしましょう
6
①Xcodeの左上にある再生ボタンを押しましょう。うまくいけばシミュレータが起動してWatchの動作確認が出来ます。1分おきに壁紙が変わります。
※手順を間違えるとエラーになります。もう一度手順を見直しましょう。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.29
6
このような画面のまま画像が表示されない時は、シミュレータを終了して、メニュー Product->Cleanを実行して再度再生ボタンを押してください。それでもダメな時は Xcodeを再起動。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.31
AppleWatchにアプリを転送しましょう
6
シミュレータだけで動作確認するのは楽しくないですよね。
実機で動かしましょ!!!
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.32
iOS Developer Program への登録( 有料 )と実機での動作
6
http://goo.gl/f2dh3y
実機で動かすには費用が。。必要です。勉強代!!ここを参考に登録して実機で動かしましょう。 [実機でのアプリの実行 ]の節をまねすれば OK.
うまく行けば、シミュレータの代わりに自分の iPhoneが選択できるようになります。あとは再生ボタンを押せば実機にアプリが転送され、そのままWatchにもアプリが転送され実行できるようになります。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.33
好きな画像に差し替えましょう
6
好きな 320☓320のサイズの画像を用意してください。 20枚ていどまでなら OKです。 png 形式。
girl0.png girl1.png
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.34
6
①画像ファイルをここにドラッグしてください。
②ドラッグするとこの画面が表示されるのでこのように設定します。
③
以前と同しように画像をプロジェクトに追加します。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.36
6
["s01.png","s02.png","s03.png","s04.png","s05.png","s06.png","s07.png","s08.png","s09.png","s10.png","s11.png","s12.png","s13.png","s14.png","s15.png","s16.png"]
[”girl0.png",”girl1.png”]
変更
開いたプログラムの内容を下記のように書き換えてください。
・自分で追加した画像のファイル名をしてしましょう。・ファイル名は”で囲みましょう・ファイル名とファイル名の間は ,を入力します。・最初と最後は []で囲みますこれがプログラムの配列という複数のデータを扱う形式です。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.39
AppleWatchアプリで開発できること、できないこと
6
ここにまとまってます。
http://qiita.com/TECHFUND/items/3ebe4942923f77585afb
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.40
もっとプログラムを学ぶには?
6
http://goo.gl/y2aayf
初心者向けに Swiftを使った iPhone開発を説明