デザイナー・ノンプログラマーのためのXcode入門。(1)準備編

cocoa-touch ios-app objective-c xcode

Posted on 2012-11-11


今、iPhoneアプリのデザインをXibというXML形式のファイルに変換する仕事をしています。
iPhoneやiPadアプリのデザインを開発会社にどんな形式で納品すればいいのかって確かに問題になるんでしょう。
PSDで渡せばいいってことだといいんだろうけどXibかStorybordでください!なんて言われたらデザイナー困りますよね。
どうやって、そのXibってのを作ればいいのってなりますよね?
そのためのノンプログラマーのためのXcode入門です。

XibやStorybordを作るにはXcodeというのが必要です。
Xcodeって聞いたことあります?

スクリーンショットはこんな感じです。
iOSやMac OS Xのアプリを作るためのソフトウェアです。
残念ながら日本語化はされてません。

無料で入手できます。

iOSアプリを公開してみんなに使ってもらおうと思ったらiOSデベロッパプログラムに登録する必要がありますがXibやStorybordを作るのだけなら費用はかかりません。

最新版はXcode 4.5.2(2012年11月11日時点)となっています。
https://developer.apple.com/jp/technologies/tools/

App Storeからインストールできます。
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

Xcodeをインストールするには条件があります。
まずOS X 10.7.4以上(2012年11月11日時点)が必要です。LionかMountain Lionですね。
そうじゃない場合はOS Xをアップグレードしましょう。
モデルによってMountain Lionをインストールできるかどうかは以下を参考にしてくださいね。
https://www.apple.com/jp/osx/specs/

あとWindowsでは提供されていません。きっと提供されることもないでしょうね。。。

インストール後、起動してみてください。
アプリケーションフォルダの中にXcodeがあると思います。

こんなアイコンのあると思います。

これでひとまずはいつでもXibが作れるようになるわけです。

その前にXibとはなんぞや?と思いますよね。
レイアウトや各パーツの属性を定義しているファイルくらいに考えればよいかと思います。
何年か前まではXibではなくNibと呼ばれていました。今でもNibというのはあるらしくXibは最終的にはNibに変換されてるらしいです。で、そのNibは何の略かといいますと「NeXT Interface Builder」の略です。

スティーブ・ジョブスの作った会社のひとつですね、NeXTは。
iOSの開発をしてると時々NeXT時代からの名残りに出くわしてちょっと驚きます。
なんせWikipediaを見るとInterface Builderの元となるものソフトウェア1988年に作られたってなってますからね。

ところでアプリの画面デザインはどうしてます?
まだまだアプリの画面デザイン本って少ないように思ってますがどうなんでしょうね。
そこで困ってるという人はあまりいないんですかね?
そのうち専門誌もでるかもしれないですね。

デザイナーの人と話してるとひょっとして読んでないじゃないのって気がするのが「iOS ヒューマンインターフェイス ガイドライン」です。
必ず読んだほうがいいと思います。企画する人も読んだ方がいいです。
https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

各アプリに関わる人が読んだ方がよいガイドラインもありますので参考までに。
https://developer.apple.com/jp/devcenter/ios/library/japanese.html

次は、Xibに入る前にデザイナーが用意しないといけない素材とかをまとめてみます。

shigeki.takeguchi

渋谷の某ソーシャルゲームの会社でフロントエンドエンジニアとして働いてます。20世紀よりウェブ業界。気づいたらアラフィフ業界人。

By year

  1. 2017 (7)
  2. 2016 (23)
  3. 2015 (13)
  4. 2013 (15)
  5. 2012 (21)
  6. 2011 (34)

© 2012 shigeki.takeguchi