先日、ProttのNative appエンジニアとFrontendエンジニアで構成されている社内ユニットでiOSアプリを作ってみるワークショップを開催しました。

同ユニットでは以前Androidアプリを作ってみるワークショップも開催したのですが、Androidアプリ開発だけでなくiOSアプリ開発にも興味があるという声がユニット定例内であったことと、仕事上、他プラットフォームの実装を確認したいこともあるので、iOSエンジニアでなくてもコードが見れると仕事が進みやすそう、というの目的のもと「iOSアプリを作ってみよう」ワークショップを開催しました。

ワークショップの課題は「へぇボタン」

ワークショップ開催前にiOSエンジニアがXcodeのインストール方法から基本的なテンプレートを使った雛形アプリの作成までの手順と、課題アプリの概要をまとめた資料を社内esaにまとめて事前に共有しました。
この資料は以下のようなアウトラインとなっています:

  • 事前準備（当日までにお願いしました）
  • 用意するもの(Xcodeのインストール)
  • シミュレーターの動作確認
  • Xcodeを起動
  • プロジェクトのテンプレート選択
  • プロジェクト名を入力
  • ビルド
  • 作ってみよう
  • 作るものの説明（5分）
  • Xcodeの説明（5分）
  • Storyboardを作ってみよう（10分）
  • AutoLayoutについて
  • Storyboardとコードをつなげてみよう（10分）
  • アラートを表示してみよう（10分）
  • 補習(T.B.D.)

で、今回作ってみるものは「へぇボタン」です。10年くらい前に流行ったアレです。

「へぇボタン」アプリを題材に選んだ理由

  • 学習する上で基本的な要素が入っていて、それほど難しい要素が無い
  • iOSのUIの基本的なことを学べる
  • 30分くらいでできそうなもの
  • 題材が固くないので親しみやすそう

比較的若いメンバーに「へぇボタン」が通じるか不安でしたが、ネタが通じて安心しました。そのメンバーは当時小学生だったようです。
Frontendアプリケーション開発だと最初はTODOアプリを作るケースが多いと思いますが、iOSだとTableViewやCollectionViewの概念を学習するのに時間がかかりそうな気がしたので今回は諦めました。
へぇボタンに必要な素材はこちらで用意しました。iOSアプリ開発習得の本質的な部分に集中できるようするためです。

「へぇボタン」アプリの仕様

みんな「へぇボタン」を知っていたのでまとめなくてもわかってくれてそうですが、一応作ってみるアプリの仕様を簡単にまとめてみました。

  • へぇボタンをタップすると
  • へぇボタンの画像がタップされた状態に変化する
  • (option) へぇ音声を再生する
  • へぇカウントがカウントアップされる
  • へぇカウントが20に到達すると
  • 満点アラートを表示
  • 満点アラートのリセットボタンを押すと
  • へぇカウントをリセットする
  • 満点アラートを非表示にする

そんなに難しい要素は無いですね。音声再生はUI的な要素から外れるのでオプション課題としました。

ワークショップの様子

まずはXcode・Storyboardの基本的な使い方を学習します。

同ユニットメンバーはAndroidのConstraintLayoutでUIをレイアウトする方法は知っているので、AutoLayoutを使ってレイアウトすること自体はすんなり出来ているようでした。

基本的なUIレイアウトの方法とUIとコードの接続方法を覚えたら、本題の「へぇボタン」らしくしていく作業です。

Storyboard上のUIとコードをつなげる操作は苦戦してるようでした。ぼくも最初の頃はわからなかったなぁ。
コードと接続が終わったら、あとは表示ロジックとアラート表示です。このあたりはあまりiOS固有の話ではないし皆エンジニアなので割りとスムーズに進めていたように感じました。
途中でちょっとしたトラブルもありましたが、無事「へぇボタン」アプリを作ることができました！

まとめ

参加者からは次のような感想をもらいました:
思ったより簡単だった！
Xcodeの線が大変だった
Xcode上で何が何を指してるのかわかりにくい

まず開催者側としては、皆が「へぇボタン」アプリを作れたようで安心しました。
反省としてはもう少しXcodeとStoryboardに慣れる時間を設けたほうがよかったなぁと感じました。
でも、これで本人のやる気次第でiOSアプリ開発を進めやすい状態になってよかったと思います。将来iOSエンジニア以外からも実装に関するツッコミが来る時が来ることを期待しています！

We are hiring. 採用情報を詳しくみる

Share on

Goodpatch
Goodpatch公式アカウントです。