Xamarinに振り回される日々を送っていました
お久しぶりです。。。実は。。。
ペーパープロトタイプを作って、次のUIデザインに移る前に、初挑戦になるXamarinがどんなものなのか、試していました。
前回作ったような色ぬりツールをiPhone用、Android用で作ってみようと思ったのですが、これが大変でした。
Xamarin自体はそれなりに使える環境だとは思うのですが、突然フリーズしたり、エミュレーターが動かなくなったりと、やや動作が不安定。さらに、まだ日本語のドキュメントは少ないため、何かを調べるにも英語のドキュメントを読まねばならないのですよ。
Xamarinでお絵かきする時の悪戦苦闘記はQiitaに書きためておきました。
ここまで時間が経っている自覚がなかったので、ほぼ２ヶ月ぶりのブログに正直ビックリです。
Xamarinの感想としては、多少動作に不安があるもののの、アプリを開発したことのある人にとっては、あまり違和感なく使えるのではないでしょうか。Xamarin.Formsと言う、iPhone,Android同時にUIが作れるフレームワークもあるのですが、UIはネイティブで開発した方が自由度が上がると思ったので、別々に開発する方を選択しました。
Androidも開発経験あれば違和感なく開発できたと想像できるのですが、なんせほとんど経験なかったのでiPhoneとの違いに翻弄されっぱなしでした。ライフサイクルとか考え方が全く違うので、その違いを頭に叩き込んでおく必要があります。
どちらも開発経験があれば、Xamarinはとっても便利な開発ツールになるんだろうなーと思いました。
手書きのプロトタイプをデジタルで描き起こしてUIデザインにしてしまいます
前回作った手書きのペーパープロトタイプを、プロトタイプツールを使って清書しました。ここでUIデザインを決めてしまいましょう。
デジタルでプロトタイプを作るツールはいくつかありますが、今回はAdobeのExperience Design CCを使いました。
せっかくクラウドに入っているので、使わないのはもったいないですからね！
このツールも微妙に使えるのか使えないのか。。。これでデザインを作り上げるには、少し力不足な感じです。
UIキットもあるにはあるのですが、キーボードも縦はあるけど横がなかったりともう一声！って感じかな。
ただ、イラレやフォトショで作ったデータをコピペで貼り付けれるのは、流石Adobe製品なだけありますね。
パーツはイラレやフォトショで作成して、Xdで形成しました。
プロトタイプを作るには、上の図のようにパーツから紐付けするだけで画面遷移を作ることができるので、楽チンです。通常のpush動作のみでなく、上下スライドやディゾルブなんかも選べるので、動作感を見るのはいい感じです。
ただ、フリック動作などは取れないので、フリックでページ遷移みたいな動作は作れませんでした。(0.6.8.6Beta)
スクロールはできますが、１部分だけスクロールさせる、といった複雑な動きはできないようです。
こんな感じで、四苦八苦しながら作ったプロトタイプを、第３者に触ってもらいました。
そこでまた、新たな改善点を見つけたので、それをここでフィードバックします。
そうして出来上がったのがこちら。
我ながら所々雑ですが、ご了承あれ。
これってクライアントさんとかに見せるには最適ですよねー。iPhoneで見たらフル画面で見れるのも良いですね。
今回はiPhoneでデザインしましたが、デバイスは選べるので、AndroidやiPadでデザインすることもできます。
Xdを使う場合でも、いきなりこのツールで描き始めるのではなく、一度は手書きで紙に書いてみる方がスムーズにアイデアが出ると思います。
本棚に戻るアイコンが気に入らないんだけど、何かいい感じのアイコンないでしょうか。
もう少しブラッシュアップが必要ではありますが、こんな感じでプロトタイプ＆UIデザインができたところで、次は設計書を作りますよ！
ようやく開発らしくなってきました。コーディングはいつ始めるんだ！？って感じですyoね。。。
コメント