お久しぶりです。自分に甘いエンジニア、黒砂糖です。

さて、もうだいぶ前になってしまうのですが弊社でワークショップ形式の勉強会が催されました。Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミングというテーマでstoryboardの有用性を説かせていただきました。
しかし記事化が遅いですね。ほんと自分に甘くてごめんなさい^^;

iPhoneアプリを作るのにあたっていろいろ調べながらやってるんですが、どうにもネット上だとXcodeやstoryboardへの風当たりが強い。その一方でstoryboardってすごく便利だと思うし、入門書系では間違いなくこれを活用してやってる。storyboardから入門させるくせに、ネット上では「使わない方がいい」なんてそんなの間違ってる!ってことで、storyboardの良さを伝えるべくまず社内から布教をというわけです。

Storyboardを使うべき理由

storyboardを使うべき理由ですが、私は以下のような点があげられると思います。

  • iPhoneで使える標準的なパーツのほとんどをstoryboard上でレイアウトできる
  • パーツだけでなく画面遷移の実装といった動きの部分まで指定が可能
  • 実際の表示を確認しながら作ることができる

特に画面遷移なんかは「このボタンを押したらA画面にうつる」みたいな動きがマウス操作で嘘みたいに簡単に設定できます。簡単に作れる、という程度ではエンジニア的にはそこまで響かないんですが、これってつまりプログラミングの知識が無くとも作れてしまうんです。例えばデザイナーに直接触ってもらったりする事も可能なのです。実際自分のプロジェクトでは配置の調整や色指定なんかはデザイナーに直接storyboardを触りながら調整してもらっています。

もちろんstoryboardでできる範囲にも限界がありますが、可能な限りこれを活用するという方針で進める事で自然と見た目とロジックを分離したコードを書く事ができます。これにより大胆なUI変更にも柔軟に対応できるようになった他、そもそもUI変更ですら程度によってはデザイナーのみで完結させることが可能となりました。
これはstoryboardがiPhoneの画面でどう配置されるかを見ながらパーツを配置したり、画面遷移をマウスで設定できちゃったりもする便利な物だからこそです。冒頭で説明した通り、不当に風当たりが強いと思います。

ちなみに、現在も開発・機能追加をどんどん進めているApplivアプリでももちろん使用しています。こんな感じになっています。

Applivアプリのstoryboard

ワークショップの内容

実際のところ社内のエンジニアでも個人でiPhoneアプリ作成に挑戦した人もいたり、諸先輩方のようにそもそもエンジニアリングスキルがある人もいるわけです。彼らにとってObjective-Cを覚える事はそれほど難しい事では無いでしょうが、できてしまうからこそ「それコード書けば一発じゃん?」とstoryboardを使わない事になんら疑問を持たない事でしょう。それじゃ、もったいないんですよ。そんな思いであえてソースコードを記述する事を禁止してワークショップしてみました。
(たとえばHTMLは手書き派なんですが、これももしかしたら知らないだけで強烈なGUIなツールがあるのかもしれないですし。)

ソースコードの書き方に触れたかどうかも思い出せない程度に、ソースコードを書く機会は与えませんでした。言っておきますが、マジで1行も書きません。storyboradのすごさを味わってもらいました。

前半:iPhoneアプリの基本的なパーツを実際に配置してみる

冒頭で紹介したスライドを使ったのは、実はこの前半部分だけです。

まずはXcodeの使い方を学習してもらう狙いで、なにもしない真っ白のアプリを作ってシミュレータで起動してもらうところまでをやって貰いました。実機を持っている人でも実は実機デバッグするのにはAppleへの申請と登録(そう、お金がかかります)が必要になってしまうので、その辺を無視できるシミュレータでやってもらう事にしました。

ひたすらこのstoryboardの使い方を覚えつつ、基本的なパーツの紹介をしていきました。
実際に例として紹介したのはラベルやボタン、入力ボックスの他、一つの画面を構成するための器のような存在ViewControllerやiPhoneアプリで最も良く目にするであろうTableViewについてサラッとためしてもらいました。

後半:覚えた作り方とパーツだけで好き放題作ってみる

結果はなかなか面白かったです。今までまったくiPhoneアプリ開発をしてなかったであろう新人エンジニアが、自由な発想でザクザクアプリを作ってくれました。経験豊富な諸先輩エンジニアが詰まっている様は失礼ながらもなかなかに面白い光景でした。

ソースコードを書かない分細かいところに手が届かなかったり、うまく動かない原因を探しづらかったり相応の苦労はします。しかしこういった体験を通してどこまでstoryboardで表現できるかを理解することで、デザインと実装を奇麗に分割したり、ザクザク作れるところはザクザク作ってしまう事で開発の効率化がはかれます。ソースコードを書かない事で改めてソースコードで表現する事の楽さも再認識することができたと思います。

勉強会を終えて

純粋な勉強会、これもなかなかに良い機会だと思います。自分ではわかっているつもりでも実はきちんと理解できてない事、そんな事を再確認できたりする良い機会です。人に教える事でも多くの発見がありますし、こんな機会を定期的に経験できるというのは本当に良い事だと思います。
記事書くのが遅い人間が言えたセリフじゃないですけれど、こうやって定期的に情報発信して行く事がむしろ本人の成長に不可欠なのかもしれませんね。

じつはこのワークショップ形式の勉強会、べつに突発的にやったものではありません。二週間に一度のペースで持ち回りで講師をつとめ、エンジニア内で順番にいろんなテーマで取り組んでいます。
私のあとは今年入社したばかりのエンジニアJ.S.が早くもインフラ構築の自動化ツールについて素晴らしいワークショップを開いてくれました。追って記事化されると思うのでよければこちらも楽しみにお待ちください。