【前編】Swiftで「iPhoneアプリ作り体験」ハンズオン!

イベント
2019年12月7日から8日の二日間にわたり、仙台市で「SwiftでiPhoneアプリ作り体験ハンズオン!」が開催されました。仙台市をフィールドに先端技術と様々な産業を掛け合わせ、新事業の創出や先端IT人材の育成・交流によりイノベーションを生み出し、都市体験のアップデートを目指すプロジェクト「SENDAI X-TECH Innovation Project」の一環として開催された同イベントの様子をご紹介します。
【前編】Swiftで「iPhoneアプリ作り体験」ハンズオン!

オープニングは参加者同士で自己紹介

最初にTECH PLAY運営事務局から、二日間のスケジュールや注意事項が説明された後、参加者同士で、「名前・普段何をしている人なのか・ハンズオンで学びたいこと」について、各テーブルごとに自己紹介が行われました。

Alt text

続いて、主催の仙台市産業振興課・荒木田理さんから、『SENDAI X-TECH Innovation Project』について、これまでの取り組みが紹介されました。

「仙台市にはIT企業がたくさんありますが、最新技術などを学ぶ場が少なかったことから、本プロジェクトを昨年度から立ち上げました。さらにエンジニアがチャレンジできる機会創出も行っており、楽天野球団の新サービスを提案するオープンイノベーションプロジェクトなども実施しています。ぜひ、一緒に仙台市でもコミュニティや勉強会を盛り上げていきましょう」

Alt text
▲仙台市 経済局 産業振興課 荒木田理さん

「SwiftでiPhoneアプリ作り体験ハンズオン」スタート!

今回のハンズオンで学ぶ「SwiftUI」は、2019年6月の「WWDC19」で発表された、Swift言語を用いて効率的にユーザーインターフェイスを定義できるUIフレームワーク。SwiftUIを用いると、UI開発が簡単にできるようになります。ただし、SwiftUIで作ったアプリはiOS 13以降でしか動きません。

ハンズオンの講師は、「風呂グラマー」などの相性でお馴染みの増井雄一郎さん。広部一弥さん、高允澈さんにチューターを務めていただきました。

Alt text
▲左から、広部一弥さん、増井雄一郎さん、高允澈さん

まずは、講師の増井さんからSwiftUIに関する基礎知識と注意事項が説明されました。 iPhoneのアプリケーションは、Xcodeという統合開発環境で開発を行いますが、SwiftUIはXcode11からアプリが書けるようになります。OSも最新のCatalinaでないと、全部の機能が使えません。

また、Live Previewという実際にコードを書くと、リアルタイムにパソコン(Mac)の上で どんな画面になるか、確認ができる機能を使うために、最新OSに上げる必要があります。 まだできることは少なく、UIKit(iOSのUIコンポーネント)でできることがすべてできるわけではないのですが、「今から慣れておけば1年後には必ず役に立つはず」と、増井さんは言います。

Alt text

iOSの新たなユーザーインターフェースについて

iOS(iPhone, iPad, AppleWatch, macOSなど)はフラットデザインという白が基調であまり素材感がないユーザーインターフェースを使っています。2013年にiOS7で装飾を排したフラットデザインになったのですが、「これが今までで一番大きなデザイン変更のルールだった」と、増井さん。

それまでのスキューモーフィズムでリッチなグラフィックから、意味や構造をシンプルに表すデザインにしましょうというフラットデザインに移行。SwiftUIもシンプルな部品を集めて構造を作るUIになっています。iPhone, iPad, AppleWatch, macOSなど、デバイスの画面サイズが違っても同じことができるように、ユーザーインターフェースが統一化されているのです。

iOS 13からサポートされたのが、背景色を暗くする「Dark mode」と、iPadで複数のアプリを画面上に同時に起動・操作できる「Split screen」。これまでアプリによって色が決まっていた背景色をアプリの利用シーンによって、色を変えられるようになった。増井さんは、「デザイナーには、色を決めるといった見た目やグラフィカルなデザインではなく、機能を意味としてデザインしてほしい」という意図からではないかと推測しています。

Alt text

増井さんは家の間取り図がSwiftUI、家具はComponentと、家のデザインにこれを例え、「今までは絵を描くようにデザインしていたものが、既製品を合わせてレイアウトすることでデザインする。同じブランドの家具を使っても部屋のレイアウトは人によって全然違うように、同じパーツを使っても、全然受ける印象が違う。足りないものに関しては作るけど、既製品がある場合はなるべく使うというデザインの方向性になる」といいます。

SwiftUIは標準部品だけを使うので、ユーザーにとっていいことは、ボタンが同じデザインなので迷わなくなること。デザイナーは標準部品の中で作ることができるので楽になる。理解していないと実装が大変ですが、理解していればとても楽になるというのが特徴。

一方、Androidはスキューモーフィズムとフラットデザインの間を狙ったマテリアルデザイン。入力欄に影や枠を入れたりなど、セミフラットデザインとも言われています。

UI定義をコードで書く宣言的UI

SwiftUIは、HTMLのように、テンプレートエンジンのようなコードを書いていくとそのままUIになり、定義することができるようになります。

「今までUIを作るときは、Interface Builderというツールを使い、Xcodeではお絵描きソフトのようにパーツを載せて、線を引いてプログラムを追加していくUIを作っていた。だが、SwiftUIはそういったGUI機能がなくなった代わりに、Swiftを使って画面UIを作ることができるようになった。非常にシンプルなソースコードだけでUIが作れるようになったことが今回の大きな特徴です」(増井さん)

Alt text

宣言型UIと言われるコードを使ってUIを構築していく手法は、ここ最近(2013年くらいから)の流行で、React.jsやVue.jsのようにJavaScriptを使って画面を構築していくことが増えてきたのだそう。

「他のプログミング言語を使ったことがある人は、Swiftでそんなに悩むことはないと思います。良くも悪くもあまり特徴のない言語。Xcodeがよくできているので、触ってみるのが一番。まずはXcodeを起動してみてください」(増井さん)

Swiftは型付けが強いオブジェクト言語

さらに講義は技術的な内容に進み、コードを書きながらの説明が続きます。Version11.2.1になっているか、XcodeのSwiftの動きを試してみる機能「playground」が使えることや、実行結果が右側に表示されることなどを確認します。

Alt text

Swiftは型をしっかりもったオブジェクト指向言語で、型推論という機能がついています。この型推論はコンピュータが推測してくれる便利な機能があり、よく使うキーワードが画面上に出るので、プログラミングがすっきりしているように見えます。一方で、コンパイルが遅くなってしまうというデメリットも。良くも悪くも型が強い言語の特徴を備えています。

型の基本や、変数のvarと定数のletの違いなどについても説明されました。言語によって意味が違うので混乱することもありますが、varが変数定義、letが定数定義と覚えるとよいというアドバイスも。メモリ管理については、ガベージコレクションで行います。Swiftは特循環参照が起こるときに、自分でメモリを解放しなければならないなど、注意点も伝えられました。

For文、Dictionary、Class / Structなど、増井さんのライブコーディングとともに他言語との違いやSwiftの特徴などが解説され、参加者も手を動かし、コード入力を実践します。

Alt text

公式チュートリアルに従い、SwiftUIでアプリを作成してみよう

昼食後は、いよいよSwiftUIの公式チュートリアルをもとにアプリを作成するハンズオンへ。チュートリアルのファイルをダウンロードし、Xcodeの環境設定を行い、SwiftUIを選択。プロジェクトの保存先を選択してCreateボタンをクリック。プロジェクトを作成すると、ContentView.swiftが開きます。

Alt text

iPhoneの画面ビューに表示される「Hello World」のテキストをカスタマイズしたり、文字位置の調整やレイアウトの変更など、実際にコードを触るワークに挑んでいきます。

Alt text

SwiftUIでは、縦積み、横積みするというように部品を追加して、レイアウトを行っていきます。その組み合わせデザインに欠かせない水平方向に配置するHStack、垂直方向に配置するVStackについて、ライブコーディングをしながら解説。その後、参加者がそれぞれコードを書くワークを行います。

Alt text

Alt text

続いては、画像と地図を追加して、簡単な観光案内マップのアプリを作成。画像を丸形に切り取るCircleImage機能やエフェクト機能などを作成。マップ部分(MapView)は、MapKitというツールを使い、緯度と経度からMapViewに地図を表示するコードを書きます。

Alt text

チュートリアルのアメリカ・カリフォルニアの地図を東京の地図に変えたり、画像と地図を追加していく応用課題にもチャレンジしました。

Alt text

次のセクションでは、Landmarkのリスト(場所・画像・名前)が出てくる観光地案内アプリを作ります。縦に長いリストを作るLandmarkRowや、Groupにして大きさを固定してリストをコピーするLandmarkDetailなどをコーディングするところまでで、一日目のワークは終了となりました。

Alt text

一日目のハンズオン終了後は懇親会で交流を深める

ハンズオン終了後は、講師の増井雄一郎さん、チューターの広部一弥さん、高允澈さん、仙台市役所の荒木田さん・佐藤さん、TECH PLAY 運営事務局・スタッフを交えての懇親会を開催。参加者同士の交流も積極的に行われ、技術やコミュニティなどの話題で盛り上がりました。

Alt text



▶︎イベントレポートの後編はこちら!【後編】Swiftで「iPhoneアプリ作り体験」ハンズオン!

▶︎仙台市主催のイベント
【2019年11月7日(土)~11月8日(日)】KotlinでWebアプリケーションを開発してみようハンズオン
【2019年12月7日(土)~12月8日(日)】SwiftでiPhoneアプリ作り体験!
【2020年1月18日(土)~1月19日(日)】アプリUIデザイン実践ハンズオン
【2020年2月7日(土)~2月8日(日)】デザインシンキング体験講座
【2020年2月29日(土)~3月1日(日)】ビジネスプラン構築ワークショップ

関連するイベント

おすすめのイベント

タグからイベントをさがす

おすすめのコラム

ReactNativeでスマホ向けのアプリを作る ──仙台市主催の「ReactNative初心者向けハンズオン」レポート

イベント

仙台市をフィールドに先端技術と様々な産業を掛け合わせ、新事業の創出や先端IT人材の育成・交流によりイノベーション...

ReactNativeでスマホ向けのアプリを作る ──仙台市主催の「ReactNative初心者向けハンズオン」レポート