はじめてのapple watch開発体験

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.2

AppleWatch

６

説明の必要はないですよね。手にいれましたか？


６

手に入れたらどんなアプリを使いたいですか？


６

どうやって使いこなすか悩みますよね。


６

まずは、 AppleWatchの画面を飾りたいですよね。昔、待ち受け場面とかいろいろいしったしゃないですかぁ


６

でも、好きなキャラクター、ねずみーらんどとか。。のアプリはなかなか見つからないですよね。好きなアニメのキャラクターでも飾りたいし。。


６

だったら、自分で作りましょう！


６

欲しい物を作る。それが人類の発展を進めるのです。


６

プログラムの勉強が必要なのでは？


６

まずは、手順で覚えちゃいましょう。興味が出てきたら、改めてプログラムを勉強すればよいのです。


６

この勉強会では、もしかしたらプログラムに興味が出てくるかもしれないけど、 AppleWatchを飾りたいっていう微妙な人向けに作成しました。

１分おきに壁紙が変わる時計を作ります。


６

この学びの対象者は？→AppleWatchを飾りたい人。Macを持っていて、操作ができれば OK！プログラムについても簡単に説明するけど、興味がある人だけ聞けばよい。AppleWatchを持っていなくてもMacで動作確認できます。

教えないことは？→ばりばりの Swiftプログラマーではないので、 AppleWatchに関して深い知識はありません。難しい質問はしないで。

※盤面（フェイスウォッチ）のカスタムは許されていないので、時計アプリとして開発します。


講師Gashfara,Inc.代表　　デジタルハリウッド大学院客員講師茂木健一[email protected]　[email protected]　http://facebook.com/mogikenhttp://www.slideshare.net/mogiken1

　

自己紹介[プロフィール /実績 ]もぎ・けんいち●青山学院大学大学院卒。 Gashfara,Inc.代表。本社はハワイですが出社したことなし。ホノルルマラソンには参加ｗ青山学院大学大学院卒：エニックスでオリジナルゲーム制作 (Z80アセンブラ　CP/M)、 SmallTalkで人工知能開発（企業買収）。

（株）東洋情報システム退社後、（株）エイチアイ、グランスフィア（株）、（株）ファッションウォーカー（えびもえの EC）など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファラ・インクを USで起業。システム開発ではゲーム、 TOL（ツタヤオンライン）の立ち上げ。動画配信システム (USENの Gate01： Gyaoの前進 )、電子マネーシステム（ Bitcash）、 ECフルフィルメントシステムなど、多彩な分野を経験。 IT関連教育では 1998年ころからデジハリの２．５階に間借りしながら教育コンテンツ作成（ JIB社）。 Brew、 Java、セキュリティーなどの講師として活躍。現在、（株） HUGGを設立し、スマホのカップル向け SNS サービス [HUGG]をグローバルに展開。㈱テクノモバイルにて技術サポート。

【著書】BREWプログラミング実践バイブル [ 共著 ] （インプレス）、 PHP 逆引き大全 516の極意 [ 共著 ]（秀和システム）

mailto:[email protected]



http://facebook.com/mogiken

http://www.slideshare.net/mogiken1



14

成長を実現させるシステム”モバイルトータルソリューション”

Webシステム

１

スマホアプリ

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


まずは Xcodeをインストールしましょう

６

Xcodeとは iPhone,AppleWatchなどの開発をするためのアプリです。無償で使えます。Macで動作します。Windowsでは使えません。ここを参考に Xcode６をインストールしてください。簡単です。http://www.atmarkit.co.jp/ait/articles/1410/02/news031_2.html


Xcodeを起動してプロジェクトを作成しましょう

６

アプリを作る１つの環境がプロジェクトです。１つのアプリごとに１つのプロジェクトが必要です。

①

②

④

③


①アプリの名前などを適当に設定します。正式にリリースする時はgashfara.comではなく自分管理のドメインにしてください。

②

④

③ 保存場所を指定します。


AppleWatchの設定をしましょう

６

AppleWatchの追加設定が必要です。

①メニュー。 File->New->Targetを選択します。

②

④

③


６

①Watchの追加設定をします。

②

③


プログラムをコピーしましょう

６

プログラミングはしないので、完成したプログラムテキストをコピーします。

①Xcodeにあるこのファイルを開きます。

②このファイルのプログラムの中身が表示されます。


６

https://drive.google.com/file/d/0Bw5FRKM4Lv-SZWNYencyRWthSW8/view?usp=sharing

以下から完成済みのファイルをダウンロードしてテキストを差し替えます。

①プログラムの中身をまるごと差し替えます。





画面を作りましょう

６

①ストーリーボードを開きます。これで画面をデザインします。

②こんな画面が表示されます。


６

①Imageの部品を、上にある画面に Drag&Dropします。これがWatchの壁紙画像になります。


画面とプログラムをつなぎましょう

６

①２つの輪になっているボタンを押すとこのように画面とプログラムが同時に表示されます。

この状態にしてください。


②うまく接続できればこのように○が◎になります。これで画面とプログラムが連携します。

６

①プログラム IBOutletの行に○があるのでこれをクリックして Dragすると線が伸びます。これを先ほど貼り付けた Imageの部品まで伸ばして接続してください。


使用する画像をプロジェクトにコピーしましょう

６

https://drive.google.com/file/d/0Bw5FRKM4Lv-SRG1FX0RiOGNSNzQ/view?usp=sharing

画像ファイルをダウンロードして解凍してください。これがWatchの壁紙です。

①画像ファイル 16 個をここにドラッグしてください。

②ドラッグするとこの画面が表示されるのでこのように設定します。

③




６

①うまくコピーできるとこのように画像の一覧が追加されます。


シミュレータで動かしましょう

６

①Xcodeの左上にある再生ボタンを押しましょう。うまくいけばシミュレータが起動してWatchの動作確認が出来ます。１分おきに壁紙が変わります。

※手順を間違えるとエラーになります。もう一度手順を見直しましょう。


６

このような画面のまま画像が表示されない時は、シミュレータを終了して、メニュー　 Product->Cleanを実行して再度再生ボタンを押してください。それでもダメな時は Xcodeを再起動。


AppleWatchのシミュレータが表示されない時

６


AppleWatchにアプリを転送しましょう

６

シミュレータだけで動作確認するのは楽しくないですよね。

実機で動かしましょ！！！


iOS Developer Program への登録( 有料 )と実機での動作

６

http://goo.gl/f2dh3y

実機で動かすには費用が。。必要です。勉強代！！ここを参考に登録して実機で動かしましょう。 [実機でのアプリの実行 ]の節をまねすれば OK.

うまく行けば、シミュレータの代わりに自分の iPhoneが選択できるようになります。あとは再生ボタンを押せば実機にアプリが転送され、そのままWatchにもアプリが転送され実行できるようになります。




好きな画像に差し替えましょう

６

好きな 320☓320のサイズの画像を用意してください。 20枚ていどまでなら OKです。 png 形式。

girl0.png girl1.png


６

①画像ファイルをここにドラッグしてください。

②ドラッグするとこの画面が表示されるのでこのように設定します。

③

以前と同しように画像をプロジェクトに追加します。


６

①Xcodeにあるこのファイルを開きます。

②このファイルのプログラムの中身が表示されます。


６

["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”]

変更

開いたプログラムの内容を下記のように書き換えてください。

・自分で追加した画像のファイル名をしてしましょう。・ファイル名は”で囲みましょう・ファイル名とファイル名の間は ,を入力します。・最初と最後は []で囲みますこれがプログラムの配列という複数のデータを扱う形式です。


６

再生ボタンを押してシミュレータで動作確認しましょう。


ざっくりとプログラムの解説

６

プログラム知識がある人だけ聞いて


AppleWatchアプリで開発できること、できないこと

６

ここにまとまってます。

http://qiita.com/TECHFUND/items/3ebe4942923f77585afb　

http://qiita.com/TECHFUND/items/3ebe4942923f77585afb

http://qiita.com/TECHFUND/items/3ebe4942923f77585afb


もっとプログラムを学ぶには？

６

http://goo.gl/y2aayf　

初心者向けに Swiftを使った iPhone開発を説明

http://goo.gl/y2aayf


