水無月の余韻 開発Sc.

プログラミング関連の雑記

iOS版の加賀ゆびぬきシミュレータを書き換えているはなし (自分メモ)

(今日は自分メモなので、文章は素です。)

いろいろ集ってきた要望を取り入れて、機能を増やすために、ひさしぶりに加賀ゆびぬきシミュレータをがりがりと書いている。 今回、大きく書き換えをしているので、その経過を残したい。

課題

このアプリのアーキテクチャはほぼMVCである。 そして一番重いのが、いい感じにシミュレート結果を描画する機能である。

もともとEntityとModelがべったりくっついていて、配列の二重管理が発生していたために問題が多かった。 まずは、そこを解消した。

次に、Modelに描画のためのプロパティと処理がかなり含まれていて見通しが悪いのが問題になっていた。 ここはテストが書きにくく、複数の責任を持っていると感じていたところである。

はやりのクリーンアーキテクチャの勉強をしていたのもあり、全面的に書き換えるという妄想も持ったが、問題になっているところだけエッセンスをもらうことにした。 クリーンアーキテクチャでは、ModelをViewのためのViewModelへ変換する層がある。 描画のために必要な情報だけを含むViewModelを作れば、Modelのごちゃごちゃを減らせそうであると考えた。

したがって、今回は、Modelの見通しの悪さを解消するために、描画のためのModelを新たに作ることにした。 データ編集のためのModelと、描画のためのModelを分けるのである。 描画のためのModelはViewModelと呼ぶことにした。

実装

これまでの構造では、データの流れは以下のようになっていて、ViewControllerはModelを書き換えながら描画をしていた。 描画のためのプロパティを Model が持っていたのである。

ValueObject -> Model <--> ViewController

新しい構造では、データの流れが一方通行になって、ViewControllerはViewModelを参照するが、書き換えをしないで描画できるようになった。 描画のための一時的な状態は、ViewController内で完結した。

ValueObject -> Model -> (translater) -> ViewModel -> ViewController

ModelからViewModelへの変換は、translaterで行うことにした。 ViewModelは、状態が変わらないオブジェクトになり、ViewControlelr内の描画処理も複雑さが減った。 ViewController内の処理が簡潔になったことで、描画の不具合は、ほぼModelからViewModelへの変換部分の問題であると限定できるようになった。 ModelからViewModelへの変換のテストを書けるようになったので、問題の検証が容易になった。

その後

現在は、既存機能の書き換えが終わって、予定していた機能追加ができる状態に辿りついたところである。 リリースまではまだ少し時間がかかる。

手続き構造が変わったこと

(ここはコードなしで伝えるのがむつかしかったので、自分向けです。)

今回の書き換えで、手作業をそのままコードにしたような手続きそのままの実装が消えた。

これまでは、手作業に準じていたので、割と条件判断が複雑だった。 人間の作業は、意外に複雑なようだ。

// 描画の疑似コード
- 手順があるだけ繰り返す
   - 糸の色を選択
   - 一段終わるまで繰り返す
      - 一針分すすめる(描画) → 段を変えるべきか?

描画の部分だけで言えば、条件判断が減った。

// 描画の疑似コード
- 描画設定があるだけ繰り返す
   - 一段分の設定を取り出す (色、方向、位置を持つ)
   - 設定に従って描画する

複雑な分岐は、ModelからViewModelへの変換部分へ移動したが、考え方自体が大きくかわった。 行ってみないとわからない、という状態から、未来が予測可能になったような大きな変化だと思った。

// 変換の疑似コード
- 手順があるだけ繰り返す
   - その手順で刺す回数を計算する
   - 糸の色の段数を決める
   - 刺す回数分くりかえす
      - 描画設定をつくる (決めた段数に応じて色を変える)

加賀ゆびぬきシミュレータ Android版をリリースしました

こんにちは。ひさびさにブログを書きます。

Androidユーザーの方々、お待たせしました! mm 加賀ゆびぬき刺し模様シミュレータのAndroid版をリリースしました。

結果的に、開発に一年以上かけてしまいました。 おとなとRubyで、「そろそろ1年経ってしまうので、年内にリリースしたい」と言いながら、1月末になりました。

iOSアプリの開発に比べると、いろいろと戸惑うことが多かった印象です。

  • そもそもちゃんと開発をしたことがなく、iOSアプリ以上に経験値がなかった
  • Theme, Styleの適用ルールを理解するまで時間がかかった
    • 特定にSupport Library から提供されるような、pre-set なThemeの使い方
  • Material Designは理解していないと、使いづらい
  • API versionごとに見た目が変わってしまうのが、どこに境界線があるのかわるまで時間がかかった

Material Design

特にMaterial Designにするのに苦労しました。

はじめはiOSアプリの見た目に揃えるつもりで、色を指定し、各所への適用を地道にやっておりました。 その結果、Material Designとはちょっと違う雰囲気の見た目にしあがっており、やぼったさが拭えません。

今年にはいってから、ちゃんとMaterial Designに乗るために、カラーパレットを設定しなおして、 Theme/Styleを再構築して、どうにからしいところまで持っていきました。

CI

開発を手伝ってくれた @slightair が、deploygateの配信まで繋げてくれるレーンを用意してくれました。ありがとう (-人-) それをベースに、テストやLicense Checkを追加したりして、いい感じに改造しています。

iOS版も簡単にCI配信するようにしたいと強く思いました。

リリース時期の計画

この週末まで、結の会 加賀ゆびぬき作品展が開催されていたので、それまでに出せているとベストだったのですが、 計画が足りていませんでした。

今後

Android版はiOS版に比べると、未実装の機能があるので、順次対応していきたいです。 ただ、iOS版でもあまり利用されていない機能などは対応しなくなるかもしれません。 アプリに対する要望などは、アプリ内から送れるようにしてあるので、遠慮なく送ってくださいね。

iOS版は、Android版の開発中に見つかったバグ修正を予定しつつ、ブラウザ版をどうしようかと悩み中です。

個人アプリで起動できない不具合を出した話

加賀ゆびぬき刺し模様シミュレータv1.2.2でアプリを起動できない不具合を出した。 反省として記録する。

経緯

リリース直後から、Crashlyticsの通知が来はじめて、悪い予感はしていた。 クラッシュ原因は、おそまつなぬるぽで、コードの修正はすぐにできるものの、ユーザー体験のなかでどのタイミングで発生するかはなかなかわからなかった。 実家に行く用事があって、母が「こうするとだめなんだけど」と教えてくれて、ようやくはっきりした。

この時点で、アプリを起動できない不具合であることがわかり、急いでツイッターへお知らせを投稿した。

不具合を修正して、特急審査を要請したところで、これを書いている。

不具合の原因

今回まずかった点は大きく3つある。

  • nullチェックが抜けた
    • APIの理解不足
  • データ読み込み処理が、フェールセーフでない
    • 意図していないデータが入ってきた場合を考慮していなかった
    • オートセーブデータのロードに失敗するのが今回の現象だが、ユーザーが意識しないものなので、なにかマズいときでもクラッシュしてはいけない
    • force castを使用している箇所があり、想定外の状態に弱い実装だった
      • 対策: swiftlintでまずそうな箇所を検出して対応した
  • 後方互換性のテストを欠いていた
    • 開発バージョンを間にインストールしていたため、リリース版v1.2.1 -> v1.2.2の状況を再現できていなかった
      • 対策: deploygate で各リリースバージョンを保持し、後方互換テストをできる環境を用意した

課題:「ここは何かおきても、例外を握りつぶしておきたい」という仕様に対する実装方法

今回の問題の箇所は、Objective-Cで実装していたため、汎用的な例外キャッチを局所的に適用することで、 「なにがあってもクラッシュしない」を実現した。

Swift実装の場合、Swiftの例外処理が、「例外を投げてくる処理」に対してのみ有効なので、 「なにがあってもクラッシュしない」を実現できないような気がしている。

加賀ゆびぬき 刺し模様シミュレータを更新しました。(v1.2.1 バグフィクス)

こんにちは。

iOSアプリ「加賀ゆびぬき 刺し模様シミュレータ」を更新しました。

このアプリは、加賀ゆびぬきの刺し模様をデザインするツールです。

どんなアプリかについては、加賀ゆびぬき 刺し模様シミュレータをリリースしましたをご覧ください。

アプリをダウンロード

リリースノート

今回は、アプリがクラッシュする問題に対応しました。

ご迷惑をおかけして申しわけありません。

アプリをアップデートしてご利用ください。

加賀ゆびぬき 刺し模様シミュレータを更新しました。(v1.2)

こんにちは。

iOSアプリ「加賀ゆびぬき 刺し模様シミュレータ」を更新しました。

このアプリは、加賀ゆびぬきの刺し模様をデザインするツールです。

どんなアプリかについては、加賀ゆびぬき 刺し模様シミュレータをリリースしましたをご覧ください。

アプリをダウンロード

リリースノート

今回は、ひとつ機能追加を行いました。

これまで、16コマ4トビのゆびぬきをシミュレートするときに、手順は以下のバリエーショがありました。

(手順[1]〜[4]は手順の何番目かを意味する)

  1. 手順[1]〜[4]を交互に刺す
  2. ひとコマ分をまとめ刺しに設定する
    1. 手順[1]をまとめ刺しにする:手順[1]をまとめ刺しし、手順[2]〜[4]を交互に刺す
    2. 手順[2]をまとめ刺しにする:手順[1]、手順[2]をそれぞれまとめ刺しし、手順[3]〜[4]を交互に刺す
    3. 手順[3]をまとめ刺しにする:手順[1]〜[2]を交互に刺し、手順[3]、手順[4]をそれぞれまとめ刺しする
    4. 手順[4]をまとめ刺しにする:手順[1]〜[3]を交互に刺し、手順[4]をまとめ刺しする
  3. ふたコマ分をまとめ刺しに設定する
    1. 手順[1]、手順[2]をまとめ刺しにする:b-2に同じ
    2. 手順[1]、手順[3]をまとめ刺しにする:手順[1]、手順[2]、手順[3]、手順[4]をそれぞれまとめ刺しする
    3. 手順[1]、手順[4]をまとめ刺しにする:手順[1]をまとめ刺しし、手順[2]〜[3]を交互に刺し、手順[4]をまとめ刺しする
    4. 手順[2]、手順[3]をまとめ刺しにする:c-2に同じ
    5. 手順[2]、手順[4]をまとめ刺しにする:c-2に同じ
    6. 手順[3]、手順[4]をまとめ刺しにする:b-3に同じ
  4. さんコマ分をまとめ刺しに設定する:c-2に同じ

今回の機能追加で、以下のバリエーショが追加されました。

  1. 手順[1]〜[2]を交互に刺し、手順[3]〜[4]を交互に刺す

この新しいバリエーションを活用すると、下の図のようなパターンが可能になります。

f:id:ichiko_revjune:20151010142616j:plain

新しいバージョンをぜひ試してみてください。

既知の問題

リリース当日からクラッシュレポートがきております。(;_;)

できるだけ早く修正版を出します。m(_ _)m

  • 手順の設定画面を開けないことがある

もし、クラッシュするぞ、ということがあれば、状況などを「ご意見」からお寄せいただけると、 早い対応が可能になりますので、みなさまのご協力をよろしくおねがいいたします。

加賀ゆびぬき 刺し模様シミュレータをアップデートしました (v1.1)

リリースからひと月。

iPhoneアプリ「加賀ゆびぬき 刺し模様シミュレータ」をアップデートしました。

このアプリは、加賀ゆびぬきの刺し模様をデザインするツールです。

どんなアプリかについては、(加賀ゆびぬき 刺し模様シミュレータをリリースしました)http://ichiko-revjune.hatenablog.com/entry/2015/06/11/125034をご覧ください。

アプリをダウンロード

リリースノート

今回は、少しの機能追加とバグ修正です。

機能追加

  • ログイン不要のご意見機能を追加しました。

    • こんな機能ほしいとか、ここは使いにくいとか、なんでもいいので反応が得られるといいなという思いです。
  • パレットにオレンジ系の色がなかったので追加しました。

バグ修正

  • 入力チェック系のダイアログがキーボードに隠れるという、なかなかに困る問題があったので修正しました。
  • パレットを表示したときに、選択中の色を正しく選択表示されるように修正しました。

加賀ゆびぬき 刺し模様シミュレータをリリースしました

以前のエントリー 加賀ゆびぬき模様シミュレータを作ったで、Webアプリについて書きました。

使い勝手を考えると、iOSアプリだったらいいなと思ったので、iOSアプリにしました。

ダウンロード

どんなアプリなの?

加賀ゆびぬきについては、上述の以前のエントリーを見てもらうとして。

加賀ゆびぬきは、とても美しい模様を作り出すことができますが、その模様を決めるのはおよそ以下の4つの要素です。

  • 土台の割り方(コマ割り)
  • 針の刺し方(トビ)
  • 糸の色
  • 刺す順序

これらの組合せの結果、どのような模様ができあがるかをシミュレートして表示するのが、今回のアプリです。

なにができるの?

簡単に操作方法を知るための動画をつくったので、ご覧いただくといいと思います。

加賀ゆびぬき 刺し模様シミュレータ 基本的な使い方 v1.0 (Youtube)

アプリで作った刺し模様は、iOS標準アプリの写真に出力可能です。 以下の画像は、すべてアプリから出力したものです。

動画内で作成した刺し模様はこちら。

初期設定(新規作成の状態)から、色を少し増やすだけでも雰囲気がかわります。

f:id:ichiko_revjune:20150611124649j:plain

土台を変えると、がらりと雰囲気が変わりますよ。(ヒント: 8コマ3トビ)

f:id:ichiko_revjune:20150611124655j:plain

所感

はじめてのアプリ公開なのでいろいろとドキドキしています。

サポートサイトを作ったり、この記事を書いたりと、リリース準備が暗中模索で大変です。

加賀ゆびぬきを知っている人には、ぜひアプリをさわっていただいて、どこが使えないとか、もっとこうしたらいいとかご意見いただけると助かります。

知らない人もアプリをさわって、加賀ゆびぬきの魅力を知っていただけるとうれしいなぁと思うしだいです。

なにかありましたら、コメント欄でも私のTwitter @ichiko_revjune へのメッセージでも、ご意見いただけると幸いです。

加賀ゆびぬき 刺し模様シミュレータ サポートサイト