ES2015+Flowなlambda関数をApexで管理する

ES2015 + 型チェッカー flow で書かれた AWS Lambda 関数を Apex で管理する方法について、つらつらとメモ。この記事は @nagisio 先生のご指導のおかげで成立しています(謝辞)。

  • キーワード
    • AWS Lambda
    • yarn
    • ES2015
    • flow
    • Apex

記事読むの面倒くさいので、動くリポジトリよこせという方はここをcloneすべし(動かしてから理解する方が楽なのですよねー :wakaru:)

ES2015 + flow + Apex の環境構築

yarn の導入

導入はかんたん。

  1. npm initpackage.json を作る
  2. npm install yarn --dev で yarn を導入する
    • global に入れたい方はどうぞ

package.json はきっとこんな感じになっているのではなかろうか

ESS2015 + flow の環境構築

まずは必要なものを片っ端からいれていく

次に .babelrc を次のようにする

node_modules/flow-bin/cli.js init でflow の設定ファイル .flowconfig を作り、以下のような感じにする

もう多分この時点で ES2015 + flow のコードが書けるので適当に src/hello/index.js に適当なコードを書いてみよう

続いてトランスパイルして functions 下に成果物を出力してみよう

成果物は次のようになっているだろう

良い感じにハローワークに行きたいくなる良いラムダ関数ですね。さて、ここまできたらあとは Apex を導入して AWS にデプロイするだけです。

ちょっとその前に、トランスパイルするコマンドが長ったらしくてだるいのでエイリアスを張っておきましょう。package.json の script の部分をちょちょいといじるといい感じに npm run build で諸々実行できます。

Apex の導入

今回 AWS Lambda 関数の管理には Apex をつかいます。Apexの挙動は非常に単純で project.json に指定されたリソースやタイムアウト時間、IAMロールの設定で、functions直下にある各ディレクトリをそれぞれラムダ関数とみなし、デプロイしてくれます。

導入はかんたん

project.json をイカのよう設定すればよいでゲソ(各自IAMロールは適切なものを指定してください)

apex deploy でデプロイできます。apex invoke hello で実行できます。

良い

ESLint の導入(お好みで)

ESLintを入れたい方は適当に必要そうなやつをどうぞ(適当)

.eslint を適当に書く

deploy 前に uglify の処理を入れる

lambda の起動時間は多分デプロイされる成果物のサイズが小さい方がはやいので、uglifyをかけたほうがよさそう。packaage.jsonを書き換えればいい感じに実現可。

npm run build:prod で functions 下にできる成果物を確認してみるとちゃんとできてるか確認出来る。

ステージ管理

このあたりの対応が一番筋がよさそう👉 Lambda with Apex: 環境変数で環境別にLambda環境を整える

おわりに

ES2015 + flow + Apex で快適な AWS Lambda ライフを!

きららMAX 2017年4月号の感想

久々のKoi先生絵表紙とても良い。やっぱり、もうこの形容詞を使わざるえないのですが、かわいいの一言に尽きる。ポップコーンを入れているティッピー型の容器とか、ココアさんのしているマフラーとか特にグッときます。

1本目4コマのココアさん、はぁ…ココアさんという感じでとてもよかった。きぐみんの立ち位置自分の認識とずれてたので時系列を少し遡って確認しよう。2本目3コマ目できぐみん貯金箱の中に入ってた金額が52円だったのは、シャロのセリフにあったものを彷彿させてくれます。シャロのほうが10円多かったので、「私の所持金62円…!」になっててよかった。3本目2コマのココアさんの表情ほんとすき。フルールから追い出された青山さん…。

4本目4コマでは固有名詞「CREPE BOUQUET」が登場したので調べたい。クレープブーケ、ブーケは花束という意味。フランス語、英語。5本目4コマでも青山先生の作品「うさぎになったバリスタ」「怪盗ラパン」「ベーカリークイーン」という固有名詞が登場。シャロが書店でバイトしている情報ってここが初でしたっけ? クレープ屋は以前にも登場していた。背景描写としては4本目3コマ目、5本目3コマ目に注目したい。どちらもコルマール・ストラスブールにありそうな雰囲気を感じるので頑張れば特定できるのではなかろうか。6本目は、以前ココアさんにお店任せるの不安って言っていたリゼチノがポンコツなところが見られてよかった。ここでツッコミとしてマヤメグが登場してよかった。

で、問題の8本目1コマなんですが、ここは早く背景となっている場所を特定したい。鉄細工がストリートを横切る形で設置されている点は非常に特徴的で、普通飾り看板は店の横にちょこっと出ているだけで、こういう形のものはめずらしい。すくなくとも自分が訪問した事があるヨーロッパの街ではあまりみかけないタイプの鉄細工でした。それにしても美しいフォルムの鉄細工ですね。早く場所を特定したい。この柱の4コマ目のココアさん尊すぎるんだよなぁ…。9本目2コマ目はシャロさんがリゼさんのわかり手であることが伝わる良いコマ。さすがです。4コマ目では流行に実は興味があるリゼさんの様子が垣間見える。10本目とかでちゃんとチマメが1コマに収まっているのは本当に感謝の気持ちが湧いてくる。

アニメ1期11話「少女は赤い外套を纏いウサギを駆りて聖夜の空を行く」は本当に何度見ても心が満たされる素晴らしいテンポ感とストーリー構成だったのですが、12本目からはまた、あの季節が来たのだなぁとしみじみさせられます。シークレットサンタという面白い仕掛けも仕込まれていて、これからまたクリスマスに向かって温かい日々が続いていくのだなぁと思うと続きがとても楽しみです。マヤメグにたかられるココアさん、好き。メグさん、ココアさんに対してはさりげなくそして珍しく悪意があると思うのですよね。良いですね。くじ引きしたあとのキャラクター同士の絡みになにかヒントがあるのかと思わせる感じになっていて、答え合わせが楽しみです。15本目でココアのサンタはシャロだということはわかりますが、それぞれ皆さんどうなんでしょうか。ちょっとした予想を書いておこう。

  • 確定
    • シャロ => ココア
  • 未確定
    • チノ => シャロ
    • メグ => 千夜
    • 千夜 => リゼ
    • ココア => チノ
    • マヤ => メグ
    • リゼ => マヤ

とても良いきららMAXでした。今月から気が向いたときにきららMAXの感想を書いていこうかなぁと思います。

RxJava本がなかなかよさそうな内容だった件について

おととい発売された RxJava リアクティブプログラミング、 Amazon から背表紙が裂けた悲しい状態で到着し商品交換依頼を Amazon に出しつつ、本をナナメ読みしてたら休日が終わってしまった今日この頃、みなさまいかがお過ごしでしょうか。

 さて、本の内容がなかなか良い内容な雰囲気だったので軽く感想とともにアフィリエイトリンクを貼ってみんなにふんでもらって金儲けがしたいなぁとか思ったので、感想文を書きました。

 あ、あと私そんなに Rx サイコーみたいな人間ではないので… 念のため。(とはいえ iOS アプリ開発では RxSwift が一番よさそうっぽい気がする)

第1章の素晴らしいボリューム感

 Rx 系のライブラリというと、まずリアクティブプログラミングとは何かについて、オタクは嬉しそうに早口で語り始めます。だいたい領域外の人間の理解なんて御構い無しの言説を垂れ流してくる方が多いですよね。この本の第1章では、初見の方に必要のない部分についてはどんどん後回しにして、押さえるべきキーワードをピンポイントで押さえてあり、かつ実際に動くコードを提示した簡潔で適切な例示により基本的なライブラリのふるまいなどがわかりやすくまとまっています。RxJava 1系と2系の根本的な違いについては、普段 RxJava を使ってない(RxSwiftを使ってます)自分にはなるほどなぁと思わせてくれる内容でした。Reactive StreamsやRxJavaの基本的な仕組みについてもわかりやすいシーケンス図とコード、解説があってよかった。その後は実際に RxJava を使ったコードとそのふるまいの解説が載っていて、基本的にRx系ライブラリは「まず使ってみてふるまいを見てから理解したほうが学習しやすい」と思っている自分の考え方にマッチしていてよかった。1章読んで、写経すればだいたいみんなライブラリ使えるようになるのでは…?(ホントか?) Rx系の経験がないかたでも 3時間あれば読んでコード動かせるボリューム感だと思いますのでトライしてみてください。

Observable についてきちんと説明がある

Rx の柱の一つである Observable の背後に潜む、push 型 Observer パターンについてしっかりと解説されていて、とてもわかりやすい。私もむかしこのあたりのことについて記事にまとめたり、発表したりしました(唐突なリンク)。

また非同期処理の部分のスケジューラまわりについては Java でどうなっているのか気になっていたので、簡潔にまとまってて、とてもありがたかった。

第4章オペレーターまわりはだいたい知ってるのでまあ読まなくていっかみたいな雰囲気でいま5章を読んでる。Rx系のライブラリをこれから使おうという方は公式のチュートリアルとか見つつ、Qiitaの適当な記事みるくらいならこの本が良いのではとか思ってたりします。

現場からは以上です。


ちなみに自分は基本的に RxJava は触ったことありませんが、悲しいことに Swift という大変すぐれている言語を書いている今日この頃ですので RxSwift はそこそこ触っているほうだし、ソースコードも8割くらい読んだりしてます。なので、ライブラリ自体はほぼ触っていない RxJava 本とはいえ、スラスラ読めました(だいたい知ってる内容だった)。

serf を試す

  • serf で /etc/hosts とか config の更新とかをクラスタ全台にサクッと反映させたい
  • でも serf そのものがよくわからんのでまずは hello, world から
  • 資料は https://www.serf.io/intro/getting-started/install.html

  • ご覧のように、全台に簡単に通知を飛ばせる
  • この通知をフックして、更新をするシェルスクリプトを仕込めば /etc/hosts の更新や config の更新がお手軽にできる気がする

そこで以下のような簡単なスクリプトを用意(node01, node02に配置)

一旦各マシンで serf を落とし、イベントハンドラを指定して再起動

これは良さそうだ。実践編として /etc/hosts や config 系の反映についてどうすれば良いか気が向いたら書きます。

iOSアプリ開発基礎ハンズオン

この資料はラビットハウス社内で開催される、iOSアプリ開発未経験者向けのハンズオン会向けに作成されたものです。このハンズオンを一通り行うことにより、iOS開発において以下のことができるようになります。

  • 基本的なUIKitコンポーネントの利用
    • UILabel: テキストの表示
    • UIButton: ボタンの表示
    • UIBarButtonItem: バーボタンの表示
    • UITextField: テキストフィールドの表示
    • UITableView: テーブルの表示
    • UITableViewCell: テーブルセルのカスタマイズ
    • StoryboardとAuto Layoutの利用: UIをデザインベースで構成する仕組み
    • プッシュ遷移とモーダル遷移: iOSの大きな2つの画面遷移パターンへの理解

お品書き

0. はじめに

 iOSアプリ開発自体は技術的にはそれほど難しくないため、他の分野のエンジニアに開発に関わってもらえるようにハンズオン会を開催しました。また、場合によっては、簡単なプログラミングができるアプリディレクターやデザイナーにも理解出来るようになるべく平易な内容とするように心がけました。 if, else などのキーワードや変数、関数などについてざっくりと理解していて、簡単な関数を実装できれば、この資料を見ながらきっと誰でもアプリ開発ができると思います。

 2時間でTODOアプリを作るところをゴールとして進めていきますが、プログラミングに慣れている方であれば1時間で終わってしまう内容かもしれません。しかしながら、iOSアプリ開発のフローは一通り体験でき、Googleで検索をしながらアプリ開発を進めていけるレベルには達するのではないかと思います。また、このハンズオンで実装を進めていくアプリのソースコードは https://github.com/53ningen/iOSHandsOn に置いてありますので、困ったときは参照してみると良いかもしれません。

それでは、iOSアプリ開発の世界に飛び込んでいきましょう。

1. 環境構築

このハンズオンを進める上で必要な Xcode 8.2 の実行環境を構築します

1.1 Xcode 8.2 の導入

 Xcode 8.2 を含めた過去のバージョンの Xcode は以下の URL からダウンロードすることができます。ダウンロード、およびインストールにはかなりの時間がかかりますので、時間に余裕のあるときにやることを強くお勧めします。

https://developer.apple.com/download/more/

1.2 .gitignore

自分がよくつかってる .gitignore は以下のような感じです

2. プロジェクトの作成、 Hello, world とその周辺

 ここでは実際に開発を進めるためのプロジェクトを作成し、簡単な文字を表示させるところまでを行います。

2.1 プロジェクトの作成

Xcode を起動し、 Create a new Xcode project を選択してください。

xcode

続いて Single View Application を選択してください。

ChooseATemplateForYourNewProject

 ProductName として、とりあえず今回のハンズオンでは iOSHandsOn を指定しておきましょう。また、Organization Name は適当に、Organization Id についてはサービスのドメイン名や、github の id を指定することが多いかもしれません。

 このあたりの指定については実際にプロダクトを AppStore へリリースするなどの際に重要になってきますが、今回のハンズオンアプリではとりあえずの値を指定しておけば良いでしょう。また、後から変更することも可能ですので、必要であればそのときに直せば良いと思います。

ChooseOptionsForYourNewProject

 以上をすすめると最後にプロジェクトを保存するパスを指定するダイアログが出てきますので、お好きな場所に保存すると良いでしょう。これでひとまず iOS アプリ開発のためのひな形を作成することができました。この状態で Command + R (アプリ実行へのショートカットキー) を押すと、iOSシミュレーターが立ち上がり、真っ白な画面が表示されると思います。

2.2 Hello, world

続いて簡単なサンプルとして画面に文字を表示させてみましょう。目標とするイメージは下図のようなものです。

 早速 Main.storyboard を選択し、右下にあるパネルからラベル(UILabel)を選択して上図のような画面を作ってみてください。ラベルに表示される文字はラベルをダブルクリックすると編集できるようになります。作業が終わったら再びシミュレーターで実行してみてください。きっとストーリーボードに入力した文字どおりの表示が出ているかと思います。しかしながら、このままでは画面回転をするときっとレイアウトが崩れてしまうでしょう。試しに Command + → キーを押して画面を回転させてみてください。

 画面が回転した場合でも上下中央位置に表示させたい場合にはConstraints(制約)を指定してあげる必要があります。ラベルを選択したあと、ストーリーボード編集画面右下のボタンを押し、下図のような設定にチェックを入れ Add 2 Constraints ボタンを押してください。それぞれ Horizontally in Container は水平方向中央揃え、Vertically in Container は上下方向中央揃えの意味となります。最後に右下5つアイコンがならんでいる部分の一番左、更新マークのボタンを押すと、追加された制約がストーリーボードに反映されます。

 この状態で再びシミュレーターを立ち上げ画面を回転させてみてください。きっと画面がどのような方向を向いていてもラベルは画面上下中央位置に表示されたのではないでしょうか。もしストーリーボードを使わずコードでUIを構成する際も同じような形で Constrain を指示してあげないと、画面回転時や異なる縦横比のデバイスでの表示がおかしくなることがありますので、デバッグ時に画面を回転させながらデザインが崩れないかをチェックしてみてください。

まとめ
* 開発中はこまめに画面回転を試し、制約のつけ忘れなどミスがないかを確認しながらすすめる

2.3 ボタンを押したら文字がかわる機能をつける

 画面にただ単に Hello, world と表示されているだけではつまらないので、ボタンを設置して、押したときの時刻が表示される機能を搭載してみましょう。まずはストーリーボードに対して下図のようにボタンを追加してください。

 続いてXcodeの右上にある ボタン(真ん中)を押してみてください。ストーリーボードとソースコードの2画面表示になったかと思います。この状態でラベルを選択したのち control キーを押しながらソースコードの適当な位置にドラッグすると下図のようなダイアログが出てくるでしょう。

 Name に label と入力し Enter を押すと @IBOutlet weak var label: UILabel! というコードが追加されると思います。これはストーリーボード上にあるラベルをコードから操作できるようにリンクしてあげたと思っていただければ大体良いと思います。ボタンに関しても同様に操作を行うと @IBOutlet weak var button: UIButton! というコードが追加されるでしょう。

 続いて、ボタンを押したときのイベント処理を書いてみましょう。 ViewController.swift を開いて、次のようなメソッドを追加してください。

 最後にボタンのタップイベント発生時にこのメソッドを呼び出すように設定するコードを追加します。

 これでボタンが .touchUpInside、つまりタップして指を離した瞬間に、先ほど定義したメソッドを呼び出すという紐付けができました。早速シミュレーターで動かして試してみてください。おそらく、ボタンを押すと現在時刻が表示されるようになったのではないでしょうか?

 ついでに、同じ仕組みを異なる方法で実装しておきましょう。一旦ストーリーボードのボタンを control キーを押しながらクリックして、New Referencing Outlet に紐付いているものを削除し、もう一度 control キーを押しながらソースコードへドラッグします。その際に下記のように ConnectionAction に変更します。この場合 Name の欄にはボタンの名前ではなく action の名前を指定することになるので buttonOnTouchUpInside など適当な名前を指定してあげてください。すると今度はメソッド定義が生成されたのではないでしょうか。この手法ではこうして生成されたメソッド内に、ボタンが押されたときの挙動を定義していくことになります。

さきほどと同じ内容を実現しようとすると最終的にコードは次のようになるかと思います。

 実装が終わったらシミュレーターで実行してちゃんと動作するかを確認してください。これで iOS で UI を構成する最も基本的なUI部品である UILabelUIButton の使い方の雰囲気は理解できたのではないでしょうか。

まとめ
* ボタンのイベント処理には @IBOutlet を使う方法と UIButton.addTarget を使う方法がある

2.4 トラブルシューティング

 この先ますます複雑なことをやるとしばしば謎のエラーがでて、うまくシミュレーターで実行できない場合がでてくるかと思います。そんな際は command + shift + alt + K キーを押して、ビルドした成果物をディレクトリごと消すということを試してみてください(mvn clean的なものになります)。また Xcode がおかしな挙動を見せてくることがしばしばありますが、たいてい再起動すれば治るかと思います。

 何か問題が生じた場合は無理に頑張ろうとせず、まず上記の2点を試してみるということを忘れずに、寛容な心で開発を進める必要があります。

3. 2種類の画面遷移

 1画面だけで構成されるアプリはほとんどなく、プロダクトとして出すものは、ほとんどの場合画面遷移が発生します。iOSの画面遷移には主に次の2つのパターンが存在します。

  1. モーダル遷移(下からビューが飛び出してくる、閉じるボタンでビューを閉じる)
  2. プッシュ遷移(右方向にビューがスタックする、スワイプで戻れる)

 iOSヒューマンインターフェースガイドラインにこの2つの遷移の使い分けの思想について書かれているので、Apple 信者の方々は是非そちらをごらんください。そうでない場合には普段のiOSアプリの利用の仕方に照らし合わせて適切な方を選んでいくと良いでしょう。例えばコンテンツの構造として 「漫画アプリ」 ⊃ 「漫画作品」 ⊃ 「漫画エピソード」 という図式が成り立つのであれば、きっと漫画アプリトップから作品への遷移と作品からエピソードへの遷移はプッシュ遷移が適しているはずです。また、この間の任意の場所でログインさせるというアクションをユーザーにさせたい場合はモーダル遷移でログイン画面をユーザーに提示し、ログインが完了したらその画面を閉じてあげると良いでしょう。

 余談になりますが、近年はデバイス自体が大型化してきており、モーダル遷移時の「閉じる」ボタンの位置が左上にあると手の大きさ的に届きにくい位置になるため、モーダルで出すビューの画面デザインをする際にこのあたりのことを気をつけると良いと思います(※ 個人の感想です)。前話が長くなってきたのでこのあたりにして、早速それぞれの遷移を実装してみましょう。

3.1 プッシュ遷移の実装

 プッシュ遷移をするためには現在の ViewControllerUINavigationController に属している必要があります(正確にいうと UINavigationControllerchildViewControllers の要素である必要ということ)。こんなこと言葉で言われてもわからないと思うので、早速作業をしながら理解していきましょう。

 ここではボタンを押すとプッシュ遷移をする仕組みを実装していきたいので、その準備段階として Main.storyboard でいままで「時刻を表示」となっていた部分を「遷移する」というテキストに変えてみましょう。続いて、ViewControllerを選択し、右カラムのメニュー Identity -> Storyboard ID の部分に Main というテキストを入力しましょう。

 そして「上部メニュー:Editor」→「Embed in」→「Navigation Controller」を選択してください。すると Navigation Controller とかかれたよく分からない画面が出現したと思います。と、同時にさきほどまでのビューの上部にも謎の灰色のスペースが生じてしまいました。とりあえず起動して動作確認してみましょう。

 上図のような状態になっているのではないでしょうか。さて、ここからプッシュ遷移を実装をしていきます。新しい画面を作るのは一旦後回しにして、まずは同じ画面に遷移するコードを書き足してみましょう。そのためにボタンのタップイベント処理のメソッド内を次のように書き換えます。

 この状態でシミュレーターで実行すると、ボタンを押したときにきちんとプッシュ遷移できるようになっているのではないでしょうか? またスワイプや左上の < ボタンで前の画面に戻れるようになっていると思います。

まとめ
* プッシュ遷移には navigationController?.pushViewController を使う

3.1.1 (プログラマ向けトピック) UINavigationController のふるまい

 UINavigationController の振る舞いについてちょっとだけ見ておきましょう。冒頭で UINavigationController は UIViewController をスタックしていくことが役割だと言いました。その様子を実際に見るためにページ遷移が終わった瞬間(viewDidAppear)に navigationControllerchildViewControllers をログ出力するコードを ViewController に仕込みます。

この状態でシミュレーター実行をし、遷移をしたり戻りながら、ログ出力を観察してみましょう。

きちんとスタック構造になっていることがわかるかと思います。

3.1.2 (プログラマ向けトピック) Storyboard と 型

 静的型付け言語になれたプログラマであれば、ViewController を取得するときのコードについて文字列で指定しているあたりに恐怖心を覚える方もいるのではないでしょうか? 実際この部分の指定を間違えると、静的チェックが走らず実行時にアプリがクラッシュします。

 この部分に対する対応策は各自で取らざるを得ないのが現状で、例えば次のようなやり方をしている人が多いです。

  1. 動作確認を徹底することによる対応(筋肉系)
  2. ViewController を生成するファクトリを作り、そのファクトリのすべてのメソッドについてテストを書き、確実にインスタンスが得られることを保証する
  3. ViewControllerStoryboard ID(または Storyboard のファイル名) の命名規則を定める、ViewController の型を受け取り、そのインスタンスを生成するファクトリメソッドを用意し、アプリ内ではそれを通してインスタンスを得る

 3. については具体的には、MainViewController に対する Storyboard の名前は必ず MainViewController にするという規則を設け、次のように ViewController の型名を取得して上記のようなことを実現するという手法になります。命名をミスれば安全でもなんでもない手法ですが、StoryboardやViewControllerの名前を変更することはまれであるため、手軽な方法ではないかと考えています。

3.1.3 (プログラマ向けトピック) Storyboard ID を使わず Storyboard に紐づくViewController を取得する

以下のようなコードで可能です。口頭で説明いたします。

3.1.4 プッシュ遷移画面から戻るボタンの実装

 プッシュ遷移をしたあとにスワイプで前の画面に戻れますが、ある条件のときに強制的に前の画面に戻したいことがあるかと思います。ここでは、ボタンを押すと前の画面に戻る機能を実装してみましょう。まずはおなじみ Main.storyboard を次のような状態に改変しましょう。またトラブル防止のため、各UIButton を control + クリックし Outlet を一旦クリアにしましょう。

 続いて、ストーリーボード上のボタンとコードを結びつける作業をもう一度やりましょう。その作業が終わったら、まず「プッシュ遷移する」ボタンについて以前やったとおりに addTarget を利用してプッシュ遷移の実装を行ってください。これがおわるとコードは以下のような状態になっているかと思います。

 つづいてポップボタンについてですが、こちらについては最初の画面では戻り先が存在しないのでボタンを無効化しておくのが親切だと思います。そのためにビューが読み込みされた時点(viewDidLoad)で navigationController!.childViewControllers.count (スタックされているViewControllerの数) が 1 より大きかったら有効にしてあげる処理を記述します。

 また、プッシュ遷移から戻る処理は navigationController?.popViewController(animated: true) という命令を呼び出してあげれば実現できるため、この処理とボタンのタップイベントを addTarget で紐付けましょう。

 シミュレーターで実行すれば期待したとおりの動作になっているのではないでしょうか。

まとめ
* プッシュ遷移からもどるときには navigationController?.popViewController を使う

3.2 モーダル遷移

 同様のノリでモーダル遷移についても実装していきましょう。モーダル遷移については UINavigationController うんぬんは一切関係なく、どのビューからもこの遷移が使えます。いつもどおり Main.storyboard に「モーダル遷移する」ボタンを、これまでの流れと同じ手順で一つ増やし、右上にモーダル画面を閉じるボタンを設置しましょう。イメージは下図のとおりです。

 例によって最初の画面では戻り先の画面が存在しないので、右上の × ボタンを無効化したくなります。モーダル遷移からの戻り先があるかどうかの判定には presentingViewController が使えます。これの中身が空っぽだった場合、戻り先がないということになります。諸々の実装は以下の通りになります。

まとめ
* モーダル遷移には present を使う
* モーダル遷移後の画面から元の画面に戻るには dismiss を使う
* モーダル遷移の戻り先の VC は presentingViewController に格納されている

4 TODO管理アプリの作成

 UITableView(テーブルビュー)はiOSアプリでしばしば見かけるUIコンポーネントのひとつです。たとえば標準のメールアプリや設定画面などに使われています。さて、ここからは簡単なTODOリスト管理アプリを作っていきましょう。TODOリストの表示にはテーブルビューが適していると思いますので、さっそく実装方法を見ていきましょう。

4.1 新しい画面の作成

 Storyboard に新たな ViewController を追加するほうほうもありますが、ここでは新しいストーリーボードと新しいViewControllerファイルを追加しましょう。TODOMainViewController.storyboardTODOMainViewController.swift を作成して以下のように画面を構成して、遷移できる状態まで持って行ってください。

 TODOMainViewController.swift のソースコードは以下のような状態になっていると良いかと思います。

これでTODO機能を実装する下地が整いました。

4.2 テーブルビューを組み込んでみる

 テーブルビューを組み込んでみましょう。TODOMainViewController.storyboardTableViewを追加して適切な constrain を設定しましょう。左・右・下方向への制約は constrain to margins のチェックボックスを外す必要がある点に注意してください。またViewController自体について Under Top Bars のチェックボックスをオフにしてください。TableViewのStyleは Grouped を選択します。

 つづいて TableView をコードに紐付ける作業を行ったあと、以下のようにコードを記述してください。tableView.dataSource はテーブルのデータを供給するための設定でここには、UITableViewDataSource プロトコルを満たす全てのインスタンスを指定することができます。また、tableView.delegate はテーブルのふるまいを指定するための設定でここには UITableViewDelegate プロトコルを満たす全てのインスタンスを指定することができます。

 
 ここで罠になるのが tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) です。ここに 0 を指定するとなぜかテーブルビュー上部に大きな余白ができます。なので、雑に対応したければ、0.1などの小さな値を指定するとよいでしょう。厳密にやりたければここに任意の数字を指定して、tableView自体を上方向にその任意の数字分ずらしてあげれば良いと思います(ホントか)。

4.3 テーブルビューのセルをスワイプできるアレ

テーブルビューのセルをスワイプできるアレを実現したいときには以下のようなコードを extension TODOMainViewController: UITableViewDelegate に追加します。

4.4 テーブルビューセルの表示を作る

 画面を構成する部品を作るには Storyboard ではなく、 xib というファイルを作ったほうが良いことが多いです(※あまりこだわりはないし、宗教的な問題だと思うので思想の強い方はブコメとかで暴れていただければ)。さっそくタスク名を表示するだけのセルを作ってみましょう。iOSHandsOn 直下に TODOMainViewTableCell.xibTODOMainViewTableCell.swift というファイルを作り、xibにViewを紐付けてください。このあとの作業はストーリーボードでやったときと一緒なので、同じノリでやって下図のような状態にしてみてください(だんだん説明が雑になってきた)。

4.5 「タスクを追加するテキストフィールド」を上部に適当に作る

もうだいたい絵を見れば実装する方法わかってきましたよね? TODOMainViewController.storyboard を以下の状態に変更して、コードベースとの紐付けもよしなにやってください(雑)。

4.6 TODOデータの入力・保存・削除の仕組みをひと通り実装する

 TODOデータを保存する仕組みとしてとりあえず、文字列のリスト([String], Array<String>) を使いましょう。注意して欲しいのは、この実装ではTODO管理機能のモーダルを dismiss するとすべてのデータが水の泡になるという点です。ちゃんとデータを保持するためのほうほうは後ほどご紹介しますが、基本的にはここで完成させたものに少し手をいれて、iOSデバイス内のファイルに保存するという形になりますので大筋の流れは同じです。というわけで、まず TODOMainViewController に以下のコードを追加しましょう。

 また、表示させるセルの数はタスクの数と同じにしたいので tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) を変更する必要があります。セルにはタスク名を表示させたいので tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) にも手を入れます

4.6.1 タスクの削除

 削除については対象のセルのインデックスと変数 tasks のインデックスが一致しているので、変数からタスクを削除してテーブルの再描画命令を呼び出してあげればよいので簡単です。削除はセルをスワイプすると出てくるボタンで実現するので、tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) に手を入れます。

シミュレータで実行すると、もうタスク削除機能がうまく動作していることがわかるのではないでしょうか?

4.6.2 タスクの追加

 テキストフィールドに文字を入力して、エンターを押した瞬間にタスクが追加されるという仕様を実装に落とし込みましょう。テキストフィールドの振る舞いは UITextFieldDelegate プロトコルを実装したクラスのインスタンスを指定することができます。

また普通のアプリだとキーボードで文字入力中にテキストフィールド以外の適当な部分をタップすると、キーボードを閉じて入力を中断することができます。その振る舞いを実装するには次のようなコードを追記すればよいと思います。

 まあこのままじゃテーブルビュー領域をタップした時にキーボードを閉じないんですけどね…。

4.6.3 ローカルへのデータ保存

あとで書く

4.7 テーブルビューのよくある実装

 テーブルビューを実装するときによく使われるのが「引っ張って更新」と「セルの逐次読み込み」なので、それぞれどのように実装されているのかを軽くおさらいしておきます。

4.7.1 引っ張って更新の実装

説明あとで書く

さりげなく非同期処理の導入をしてしまった

4.7.2 ページネーションの実装

あとで書く

5. CocoaPods の導入

 iOS開発にはしばしば依存ライブラリ管理ツールとして CocoaPods が利用されています。これは node における npm や Java における maven などのようなものです。CocoaPods は Ruby で作られていて、Mac には標準で Ruby の実行環境が入っていますが CocoaPods の最新バージョンは古い Mac に標準で入っている Ruby では動作しない可能性があります。

 そこでまず Ruby のバージョン管理ツール rbenv を導入しましょう。続いて Ruby のライブラリ管理ツールである bundler を導入し、それを利用して CocoaPods を導入します。よく分からないと思った方は、とりあえずおまじないだと思って以下のコマンドを実行していってみてください。余談ですがチーム開発においては、手元の環境で CocoaPods が正常に動くとしても新しいメンバーが開発に加わりやすいように rbenv を導入しておくと何かとスムーズで良いと思います。1

5.1 rbenv を使った Ruby 2.3.3 の導入

 rbenv とは、複数のRubyバージョンを切り替えることができるツールになります。マシンによっては OS X 標準で入っている Ruby のバージョンが古く、iOSアプリ開発によく使われる Ruby のライブラリ(gem)がうまく利用できない場合があるため、rbenv を利用して特定環境かにおけるつまづきどころをなくす意図があります。

5.2 bundler と CocoaPods の導入

プロジェクトルートに Gemfile を以下のように追加して rbenv exec bundle install を実行してください

続いて rbenv exec bundle exec pod initPodfile が生成されるので、いい感じに依存を指定して、 rbenv exec bundle exec pod install すれば良いと思います。

6. 追加課題

  • データ構造の定義(リスト/遅延リスト/スタック/キュー)
    • ユニットテストを書く
  • 電卓アプリの作成
    • その1: ボタンベースのiOS標準の電卓を目標に進める
    • その2: テキストフィールドベースでユーザーに数式を入力させ、計算結果を表示するアプリ
  • 本格的な TODO アプリを作成してください
    • タスクをどういった形で持てば拡張性を維持できる?
    • タスクがマイルストンやタグといったものに紐づくときにはどうすればよい?
    • データやロジックと UI がなるべくひっつかないようにするためにはどうしたらよい?
  • 株価/天気アプリの作成

時間が余ったら

  • URLSession を使った HTTP 通信
  • DispatchQueue を使った非同期処理
  • RxSwift を用いた非同期処理

などを試してみてください。


  1. rbenv を利用した開発フローに載せてくださった @koki_cheese さん、ありがとうございます 

UnicodeScalar とは?

docs: https://developer.apple.com/reference/swift/unicodescalar

The UnicodeScalar type, representing a single Unicode scalar value, is the element type of a string’s unicodeScalars collection.

UnicodeScalar は Unicodeスカラ値を表す値

UnicodeScalar から String への変換

C91活動報告

サークルきらきらアラモードとしてC91 2日目のスペースをいただき、ごちうさの舞台探訪本を頒布しましたので一応活動をまとめておきます。

当日のブースの様子

2日目 東2ホール Q54aに配置されました。お誕生日席でした。

おかげさまで1時間半ほどで完売してしまいました。その後スペースまでいらっしゃった方には大変申し訳ないのですが、2日目開始直後にうちのスペースに来ていただいた方がかなり多くてびっくりしました。本当にありがとうございました。

COMIC ZIN 様での委託も完売してしまったようで、現在改訂第2版の印刷手配を準備してますので、もうしばらくお待ちいただければ…。本当にすみません。

あと差し入れをくださった @karno さん、 @noradium さん本当にありがとうございました🙏
無事完売したということで、当日お手伝いをいただいたメンバーとともにしゃぶしゃぶをいただきました🍖

次回のイベント参加のご案内

次回は、2017/03/19に開催されるごちうさオンリー@ポートメッセなごやに参加します。増刷したC91既刊と、間に合えば新規企画物のなにかを頒布できればと思いますので是非よろしくお願いします。

その他、技術書展@超会議2017とC92、C93 への参加を検討していますので、詳しいことが決まり次第、またご報告いたします。

逝く年、くる年(2016-17)

去年のやつ → http://53ningen.com/2015-no-owari/

2016年の技術的な話

  • 今年もSwift系が多かったがもうあんまり技術的興味の伸びしろない
  • AWSまわり触れてよかった
  • protobuf良い
  • 言語処理系の勉強はマジで進まなかった
  • 読書量もかつてないほど少なかったが、意外にアウトプット量は多め
  • 発表も一番多い年になった(負担も大きかったけど)

2016年はなんだかもう、完全に業務こなすマンだったので、その分自分のやりたい方向とはかなりズレてきた…。軌道を修正するよりも、なんとかがんばって自分のキャパを広げてズレたことやりつつ、やりたいことをしっかりやっていきたいなぁ…。でも体が微妙に軋み始めているので、なんとも…。

2017年にこうなったらいいな(技術編)

  • インフラ・ネットワークまわりの実践的な活動をしていきたい
    • ネットワーク設計・ミドルウェア層・サーバ構築(ansible, serverspec)まわりなど
    • シェルスクリプト
  • フロントエンドはそつなくこなす程度で、あまり興味もないし深入りはしないけど、まあ自分のやりたいことだけやる
  • iOSに関しては教育的資料を作って外向けに講座を開きたい(そして金とりたいなぁ…)
  • 設計まわりのプリミティブな本をきちんと読み返したい
    • 適当なこと言ってる人を批判できるくらいの足元は固めたい
    • あと有名な本にかいてあるけど机上の空論じゃね、実践では無理でしょとか思ってることに白黒をつけたい
    • なんだかんだで自分の書いたコードで絶望的にメンテナビリティが低いコード少なそうなので、ちょっとだけ自分の考えを信じることがでそう
  • もう分野おかまいなしにやっていきたい
    • むちゃくちゃごちゃまぜな分野のお仕事なので特定の分野のエキスパートとか目指そうにも無理そう…
    • とはいえ一般的なまともなサーバーアプリケーションのコードやっぱり書きたいなぁ…
    • もう今の感じだと半分諦めに近い気持ちがあるけど、どうしてもやりたい気持ちを抑えられなくなったら関係各位よろしくお願いします
  • 1ヶ月に1冊のペースで読書量を取り戻したい
  • 発表機会増やしていきたい
    • Qiita の仕組み変わってなんかクソになったし、もう投稿やめようかな…

その他

  • DTP熱が復活してきたので印刷物をコンスタントに出したい
    • CC維持できるくらいの収入を得たい
    • フォントワークス契約したい…
    • オリジナルなレイアウトデザインで版面を構成できるようになりたい
  • 引き続きドイツ語圏でのお仕事を探す(心当たりのあるかたはお声がけを…)
  • 引っ越し

少女は赤い外套を纏いウサギを駆りて聖夜の空を行く

この記事は 「ごちうさ Advent Calendar 2016」 24日目の記事です。

クリスマスなので、秋葉原UDX広場に展示されている「ご注文はうさぎですか?」のクリスマスツリーをご紹介します。

2015年のクリスマスツリー

まずは、2期放送中の2015年のクリスマスに展示されたものをご紹介します。秋葉原の街中がごちうさでジャックされている感動的なクリスマスでした。

2016年のクリスマスツリー

来春にOVAとその劇場公開を控えている2016年版のクリスマスツリーです。強風でクリスマスツリーが若干傾いているのが特徴的です。UDX広場横ではBD-BOXやキャラソンアルバムの購入特典お渡し会が行われており、急遽モリナガのミルクココアも配布されていました。

唐突な宣伝

コミックマーケット91 2日目 (金曜日)東Q54a にて、「ご注文はうさぎですか?」の舞台「木組みの家と石畳の街」を探してフランスのコルマール、ストラスブール、リクヴィール、そしてハンガリーのブダペストを旅した記録をまとめた本を頒布いたします。

仕様は、A5変形版(135×210)、本文マットコート70kg、表紙マットコート130kg+PP加工、無線綴じ、表紙裏表紙込みカラー原稿30ページ(本文28ページ)となっております。ごちうさのモデル地についてかなりまとまった本になっているのではないかなと思いますので是非!

サンプルはこちらになります!

おわりに

 今年はラビットハウスをさがしにフランスに行ったり、ハンガリーに行ったり、別府に行ったりしたのですが、まだまだ行こうとして行けていない場所がたくさんあるので、来年もごちうさとともに生きていきたいと思います。新作エピソード制作、そしてたねちゃんが無事復帰して、3期へとアニメの方の展開が広がっていくとともに、原作のほうは Koi 先生しか生み出すことのできないミルク色の異次元の世界を突き進んでいくのが楽しみです。今年も一年間ごちうさに支えられて生きてきました。ほんとうにありがとうございました!

※ 写真の無断転載はご遠慮ください。特にキュレーションサイトへの許可なき転載はお断りします。事前にご連絡ください。