ブログ

画面遷移が変わったのでプロトタイプも作り直すよ

- 広告 -

画面遷移図を見直してみた

前回作った画面遷移図も見直していたら、もっとスッキリできるんじゃ無いかと思い書き直しました。

これで、トップ画面からのリンクは「絵本」か「設定」の2つだけになりました。スッキリだね!!

この遷移図を元にプロトタイプも書き直そう

画面遷移が変わるということは画面構成も変わるということ。すなわち、UIも作り直しなのね。
前回のは若干もっさいなと思わなくもなかったので、今度はもっとスタイリッシュに作り直したいと思います!
私にスタイリッシュとかいうデザインセンスがあるのかは別問題として!

画面は全部で7画面!これはかなり少ない(当社比)画面構成です。じっくり作って行きましょう。

- 広告 -

まずはプロトタイプ!

軽くラフを描いて全体像を掴んで見ました。

こういう落書きって実は頭の中を整理するのに最適だったりします。気ままに鉛筆を動かしていたら、意外なアイデアが浮かんできたり。
思いついたらその場で描き起こせるのも良いですね。
今回も設定画面のレイアウトとか、落書きしながら思いついたんですよ。

それから、以前作ったテンプレートを使ってペーパープロトタイプを作成。
今回も”pop”というアプリを使ってプロトタイプを作ります。

プロトタイプ

実は前回、少しばかりアプリを作っていたので、その時のUIなんかも参考にして作ってみました。
ページ数が少ないと、それだけ一つのページに心を配れるので、機能を沢山盛り込んでここの機能がおろそかになるよりも一つ一つ丁寧に作れていいなと思いました。

さて、次回はこれをベースにUIを作りますよ。

- 広告 -

【よるXama!】第2回 よりあいXamarinもくもく会

第2回 よるXama!は2月21日水曜日に開催します!

もくもく会とは、カフェやコワーキングスペースなどで集まって、各自目的の事をもくもくする会のことだそうです。

XamarinはiOS、Androidなどのアプリ開発を同時にできてしまう優れものの開発環境です。
2016年にMicrosoftに買収されて以降、Visual Studioと統合され無料で提供されるようになり注目度もUP!今後伸びていくことが予想されます。
開発言語はC#、WindowsでもMacでもOK!(iPhoneを動作させるのにはMacが必要です)

個人的に一押しのXamarinなのですが、実際のところどうなの?と躊躇している方も多いと思います。また、興味はあるけど勉強する時間がない、きっかけが掴めないなどの理由で先延ばしになっていることもあるかも知れません。

みんなで集まって「もくもく」してみませんか?

開催詳細

日時 2018年2月21日(水)19:00〜2時間くらい?

場所:オオサカンスペース

〒541-0051
大阪市中央区備後町3-6-2 大雅ビル10F(auショップのあるビル)
アクセス

参加費:オオサカンメンバーは無料。非メンバーの方は500円になります。

先着6名まで。

申し込みはこちら


主催者について

初めまして。癒し系エンジニア 林 芳枝と申します。

2015年からフリーランスでスマホアプリの開発をしています。

最近はiOSだけでなく、Androidも同時開発して欲しいとの声が多いことから、クロスプラットフォーム開発を模索しているうちに、Xamarinに行き着きました。

現在すでにXamarinでアプリ開発を行なっていますが、壁も多く、もっとスキルアップするためにも切磋琢磨が必要と思い、もくもく会を開催することにしました。

一緒に学んでいける仲間を募集しています!

【よるXama!】第1回 終了しました〜

- 広告 -

2018年1月25日に、記念すべき第1回Xamarinのもくもく会、名付けて「よるXama!」を開催しました。
オオサカンの隅っこをお借りして、少人数でやっています。
今回のもくもく会は定員6人に対して参加者4人。第1回としてはまあまあの人数かな?
これから毎月開催して、参加者を増やしていくぞーっと意気込んでいます。

今回は各自、動画再生をやって見たり、環境構築やって見たり、iOSのコレクションビューのようなものを作って見たりと有意義な時間を取れたと思います。
私は結局、動画再生できなかったんですけどね。前半は別の仕事してたりしたので。。。(言い訳)

もくもく会の後は、お茶を飲みながら軽くお話をしたりして、和やかに過ごしました。
2月にも開催する予定ですので、興味を持たれた方は是非チェックしてください!!

オオサカンは大阪本町にあるコワーキングスペースで三年ほど前から利用させていただいています。今回は、大阪でXamarinの勉強会があまりないとぼやいていたら、オーナーの大崎さんに「なければ自分で作れば良い」とアドバイスいただいたのがきっかけで始まりました。
なんと、この言葉は友人の格言と同じで、「そうか、なければ作ればいいんだ」と納得しました。

とはいえ、勉強会を開催して教えるほどの知識量もないため、手始めに「もくもく会」にしました。
個人的には、一年近くXamarinを使ってきたので、それなりに使えているとは思うのですが、いかんせん正しく使えているかどうかは微妙。

- 広告 -

もっとミニマムにしなくては!

- 広告 -

今回は、前回の「仕切り直しをするよ!」で言っていた、まだまだ最小限になっていない問題。
どうやって見直そうかというお話です。

機能を見直すよ!

前に作った機能表から、いらないんじゃないかというものを消してみました。

解析ツールも特にいらないか。ということで付属機能としていたものはPush通知と絵本のダウンロードだけになりました。

細かい仕様を見直す

機能表を元に作った仕様を変えてみました。
機能表修正版

SNS連携をやめてカメラロールに保存できるようにしました。
もっと変わるかなと思ったのですが、意外と他は触る必要ないかな?って感じでした。やっぱり初めからかなり機能は削ってたんですね〜。
解析ツールを外したくらいですかね。
iOSもAndroidもインストール数やアクティブユーザー数くらいはわかるし、広告を打つわけでもないから、どこからインストールされたかとかを気にする必要もないですしね。

- 広告 -

画面遷移も作り直し!?

機能を削除したので画面遷移も変わりますよね。という事で作り直して見ました。

機能一つ削っただけで随分スッキリしました。これでかなり作りやすくなったように思います。
お知らせを見る機能も削っちゃいました。今の所お知らせすることも特にないですしね〜。新しい絵本を追加したとか、バージョンアップしたとかならわざわざ後から見る必要もないですしね。見ればわかる。

アプリをミニマムにするためには、機能の本質を見失わないようにしなくちゃいけないなぁと思いました。

- 広告 -

仕切り直しをするよ!

- 広告 -

長らく停滞しておりましたこのコーナー「アプリを作ろう」ですが、再スタートしますよ!

この一年何をしていたかというと、本業の方で違うアプリを作っていました。もちろんXamarinでです。
そこで新たに色々と考えるところがあって、以前作りかけていたアプリを作り直そうと思います!

以下のような感じで見直していきますよ〜。
(1)まだまだミニマムにはなっていなかった!
(2)Xamarin.Formsを使おう。
(3)本当にAWS一択なのか?

まだまだミニマムにはなっていなかった!

以前、ミニマムスタートが良いよというお話で、必要最小限の機能でスタートしようと言っていました。
しかし、作っている最中に「これは、最小限になっていないのでは?」と思い始めたのです。

ぶっちゃげSNS連携とかって必須じゃないですよね。もしSNSにアップしたければ画面キャプチャしてあげれば済む話ですしね。
別に連携部分を作るのが面倒だったとかじゃないんだからね!
という事で、機能をもう少しシェイプアップします。

- 広告 -

Xamarin.Formsを使おう。

Xamarin始めた頃はiOSとAndroidの画面を共通化とか無理じゃね?みたいなノリでやっぱネイティブだよね。と思っていたのですが、実際やってみると一度作った画面を別のプラットフォーム用にもう一度作るってかなりの苦行でした。
で、お仕事で受けたアプリはFormsを使ってみたのですが、意外と共通化できたので、こっちのアプリもそれでいこうと思います。
やっぱり、プラットフォームごとにカスタマイズが必要なところや、そもそもOSに依存する処理はネイティブ側で書く必要がありますが、体感で80〜90%くらいは共通化できる気がします。
2回も同じ画面作るならクロスプラットフォームにした意味ないですよね!(今更)

本当にAWS一択なのか?

そして、バックエンド用のサーバ。以前はAWS一択みたいな事言っていた気がしましたが、最近気になる存在が現れました。
その名もAzure。
ご存知マイクロソフトの運用するクラウドサービスです。もちろんXamarinとの親和性もバッチリ。しかも、こちらもAWSと同様に1年間無料で使えるようになりました。
これは使わない手はない。

てな感じで、なんとなく1から作り直しな気がしなくもないですが、次回からは使用設計からやり直しますよ!!

- 広告 -

【よるXama!】第1回 よりあいXamarinもくもく会

- 広告 -

2018年最初のXamarinもくもく会は1月25日木曜日に開催ですよ!

前回は「初めてのXamarinもくもく会」として試験的に開催して見ましたが、今回は名前を【よるXama!】に改めて、気持ち新たに第1回としてみました。

もくもく会とは、カフェやコワーキングスペースなどで集まって、各自目的の事をもくもくする会のことだそうです。

個人的に一押しのXamarinなのですが、実際のところどうなの?と躊躇している方も多いと思います。また、興味はあるけど勉強する時間がない、きっかけが掴めないなどの理由で先延ばしになっていることもあるかも知れません。

みんなで集まって「もくもく」してみませんか?

開催詳細

日時 2018年1月25日(月)19:00〜2時間くらい?

場所:オオサカンスペース

〒541-0051
大阪市中央区備後町3-6-2 大雅ビル10F(auショップのあるビル)
アクセス

参加費:オオサカンメンバーは無料。非メンバーの方は500円になります。

先着6名まで。

申し込みはこちら

- 広告 -

主催者について

初めまして。癒し系エンジニア 林 芳枝と申します。

2015年からフリーランスでスマホアプリの開発をしています。

最近はiOSだけでなく、Androidも同時開発して欲しいとの声が多いことから、クロスプラットフォーム開発を模索しているうちに、Xamarinに行き着きました。

現在すでにXamarinでアプリ開発を行なっていますが、壁も多く、もっとスキルアップするためにも切磋琢磨が必要と思い、もくもく会を開催することにしました。

一緒に学んでいける仲間を募集しています!

- 広告 -

初めてのXamarinもくもく会 開催します!

- 広告 -

年の瀬が迫ってまいりましたが、「Xamarinのもくもく会」を開催します!

もくもく会とは、カフェやコワーキングスペースなどで集まって、各自目的の事をもくもくする会のことだそうです。なんと主催の私ですが、もくもく会を開催するのも参加するのも初めてなんです。おてやわらかにお願いします。

最近人気上昇中だと思っているXamarinですが、実際のところどうなの?と躊躇している方も多いと思います。また、興味はあるけど勉強する時間がない、きっかけが掴めないなどの理由で先延ばしになっていることもあるかも知れません。

みんなで集まって「もくもく」してみませんか?

開催詳細

日時 2017年12月4日(月)19:00〜2時間くらい?

場所:オオサカンスペース

〒541-0051
大阪市中央区備後町3-6-2 大雅ビル10F(auショップのあるビル)
アクセス

参加費:オオサカンメンバーは無料。非メンバーの方は500円になります。

先着6名まで。

申し込みはこちら

- 広告 -

主催者について

初めまして。林 芳枝と申します。

三年ほど前からフリーランスでiOSのアプリ開発をしています。

最近はiOSだけでなく、Androidも同時開発して欲しいとの声が多いことから、クロスプラットフォーム開発を模索しているうちに、Xamarinに行き着きました。

現在すでにXamarinでアプリ開発を行なっていますが、壁も多く、もっとスキルアップするためにも切磋琢磨が必要と思い、もくもく会を開催することにしました。

一緒に学んでいける仲間を募集しています!

- 広告 -

LINE@で「うさぎバー」のボット始めました

- 広告 -

始めましたと言いつつ、かなり前の話なんですけどね。

作りかけの塗り絵本アプリが頓挫する中、密かにLINEBotを作っていました。

そう、LINE BOT AWARDSで賞金を稼ぎたい一心で。というのは冗談で、ずっと前から作りたかったサービスをLINE@を使えば作れるんじゃないかって気づいたので作ってみたのです。まあ、ちゃっかりAWARDSには出したんですけどね。(結果は聞かないでください。。。)

サーバーのサービスなので、いつものアプリ開発とは勝手が違いましたが、そこは色んな人の協力を得てなんとか作ることができました。

ちなみに環境はAWS+Lamda+DynamoDBです。

なんでそんなもの作ったのかって言うと、

うちのキャラクターに「うさぎバーのマスター」と言うのがいまして。このキャラは絵本から生まれたわけではなく、イラストでしか登場していない隠れキャラなので、何かお話と言うか背景をつけてあげたいなーって思ってたんです。

どの舞台がいいかなって考えてたんですが、ゲームが合うんじゃないかと。

で、色々考えた結果、なぜか愚痴を聞くサービスに!(^^;

自称「癒し系エンジニア」としましては、みなさんのストレス解消に役立てればいいなと、常々思ってるんです。

- 広告 -

バーのマスターって愚痴を上手に聞き流してくれるイメージがあるんですよね。で、日頃の鬱憤をマスターに聞いてもらおうかと。

ボット相手だから言いやすいこともあるんじゃないかと思うんですが、どうなんでしょう?

ちなみに私は、身近な人にも愚痴れずに溜め込んで、常にイライラしてたり、たまに大噴火してびっくりさせたりしてました。ボットだと相手の都合とか考えなくていいので、気楽に愚痴れたりするんじゃないかと。

そして、せっかく作ったからには、色んな人に使ってみてほしい!

イライラした時に吐き出し先があるのって、一人で溜め込んでるよりも精神衛生上かなり楽になった気がします。
始めは気軽な気持ちで、マスターとお話をしてストレス発散する感じで良いと思うんです。ストレスって小さな「イラッ」の積み重ねだと思うので、都度発散できたらそんなに溜め込んだりしないかなと。まあ、根本的な解決をしているわけではないので、「ムッカー!!」が「むかっ」くらいになるだけですが。

そのうち、もっと気の利いたことをマスターが言ってくれるようになるかもしれませんよ。AIとか搭載してみたりして。みたりして!!

今は小さな愚痴を聞き流すだけですが、最終的にはカウンセリングと連携したりとか、サービスの幅を広げていきたいんですよね。

そして、辛い気持ちを抱えて誰にも言えずに苦しんでいる人が、このサービスを利用することで少しでもストレスが軽くなることを願っています。

これを読みながら、イライラしてるあなた!ぜひ「うさぎバーのマスター」とお友達になってあげてください!

お友達になるのはこちらから

- 広告 -

設計書を作成するよ

- 広告 -

設計書を何で作るのかが問題だ

本来、開発時に作成する文書は、「仕様書」「設計書」「詳細設計書」などがあるんですが、今回は面倒なので「設計書」一つで済ましてしまいました。

もしも、複数人数で開発するのであれば、「仕様書」「詳細設計書」「API通信仕様書」など必要でしょうし、DB(データベース)を作るんだったら、ER図なんかも必要になってきます。

今回もER図は必要な筈なんですが、おいおい作っていきます。。。

大事なのは、開発するにあたって何が必要なのかを整理すること、どういった目的で処理をするのかを分かること、だと思っているので、作っている過程で矛盾や不都合があれば随時変更していけば良いんです。

会社なんかによって、仕様書・設計書の書き方って違ったりします。普段はその会社の書き方に合わせるんですが、自分で書く時は自由にできる反面、どうするか悩ましいですね。

WordかExcelが主流だと思うんですが、Excelで文書を作るのはなんとなく違う気がするので、Wordで作ってみました。

印刷するんであればWordが一番良いと思うんですが、文書をプリントアウトするのは自然にも優しく無いので、今時はあまり無いですよね。大量に紙を消費しますから。。。

今回、なんとなくデザインレイアウトで作ってみたら、見出しとか目次とかwordの便利機能が全然使えなくて、正直「しまった」と思いました。デザインレイアウトはどちらかというと、Power Pointに近い感じですね。普通にWord文書で作る方が良いと思います。

仕様書作る便利ツールがあれば、是非活用したいな。それがWordなのか。。。

- 広告 -

仕様書を作ってみました

スピード開発時代において、文書を書いてる時間が勿体無いと感じるかもしれませんが、備忘録替わりにも仕様書を作ることは必要じゃないかなと思います。

作っている最中はいいけど、しばらくして改修しようと思ったら、「どういう意図でコーディングしたか思い出せずに苦労した」って経験ある人、多いんでは無いでしょうか。

コードにコメントを残していくことである程度予防できますが、どうなってたっけ?てなった時にコードから拾うのも大変です。

かと言って、ここに時間をかけすぎるのも面倒なので、さらっと必要事項だけ入れてみました。それでも20P越えてしまいました。

出来上がった設計書はこちら

最低限必要だと思う項目をピックアップしてみました。

(1)画面遷移図

これは、設計初期段階(画面遷移図を作るよ)で作ったものがあるので、それをコピペで良いでしょう。ここまでの段階で仕様が変わっていったので、その部分だけは修正しました。このツールは本当に便利ですね!

(2)画面仕様

前回(プロトタイプを清書してUIデザインにしよう)で作ったUIを元に、その画面でどのような動作を行うかを決めます。

これで、全体の開発ボリュームが分かるんじゃ無いかな。受託の時も、この段階の仕様でお見積もりすることが多いように思います。

iPhone,iPad,Androidでレイアウト違ったりしますが、どうせ作るの自分なので不精してiPhone画面のみにしました。

(3)データ構成

サーバやアプリで取り扱うデータの内容を決めます。データ名と型、概要なんかを書いておけば良いと思います。表形式にすると上手くまとまります。制限なんかがあればそれも記載します。(例えば最大10文字までとか、数値なら0以上とか)

DBを作るのであればER図もあると良いですね。

(4)通信仕様

データ構成に似てますが、アプリからのリクエスト内容とそれに対するレスポンスを決めます。

多くの場合、アプリ作成者とAPI作成者は別の人なので、この取り決めはきちんとしておかないと、後で動かない原因になります。

今気づいたんですが、エラーコードの一覧なんかも作っておかなくてはいけませんね。エラーパターンなんかを考慮しなくてはいけないので、今後追加していくことにします。

こうやってみてみると、アプリの設計書は慣れているので良いのですが、サーバ側の設計書はやはり未知の部分が多いのでつい後回しになってしまいます。実装しながら不足分を追加していきます。

大事なのは、作りっぱなしにせずにメンテナンスを必ずすること。でないと意味のないゴミとなってしまいますからね。

個人的な考えとして、「資料は1つにまとめる」と言うのがあります。今回みたいに一つの文書にしてしまわなくても良いので、ここを見ればすべてわかる。と言うものにしておくことが大事だと思うのです。あの資料はあっち、この資料はこっち、と言う状態だと探すのも大変だし、見落としたりもします。

今後問題となるのは、履歴管理なのですがwordの機能を使うのも良いですが、今回はEvernoteに登録していこうと思います。なぜなら、デザインレイアウトだと履歴機能が使えなさそうなのと、webで公開するのに便利だから。gitで管理すると言う手もあると思います。

早く実装したくて、設計書を作るのが雑になった気がしますが、これから実装しながら手を加えていきますよ。

- 広告 -

プロトタイプを清書してUIデザインにしよう

- 広告 -

Xamarinに振り回される日々を送っていました

お久しぶりです。。。実は。。。

ペーパープロトタイプを作って、次のUIデザインに移る前に、初挑戦になるXamarinがどんなものなのか、試していました。

前回作ったような色ぬりツールをiPhone用、Android用で作ってみようと思ったのですが、これが大変でした。

Xamarin自体はそれなりに使える環境だとは思うのですが、突然フリーズしたり、エミュレーターが動かなくなったりと、やや動作が不安定。さらに、まだ日本語のドキュメントは少ないため、何かを調べるにも英語のドキュメントを読まねばならないのですよ。

Xamarinでお絵かきする時の悪戦苦闘記はQiitaに書きためておきました。

ここまで時間が経っている自覚がなかったので、ほぼ2ヶ月ぶりのブログに正直ビックリです。

Xamarinの感想としては、多少動作に不安があるもののの、アプリを開発したことのある人にとっては、あまり違和感なく使えるのではないでしょうか。Xamarin.Formsと言う、iPhone,Android同時にUIが作れるフレームワークもあるのですが、UIはネイティブで開発した方が自由度が上がると思ったので、別々に開発する方を選択しました。

Androidも開発経験あれば違和感なく開発できたと想像できるのですが、なんせほとんど経験なかったのでiPhoneとの違いに翻弄されっぱなしでした。ライフサイクルとか考え方が全く違うので、その違いを頭に叩き込んでおく必要があります。

どちらも開発経験があれば、Xamarinはとっても便利な開発ツールになるんだろうなーと思いました。

- 広告 -

手書きのプロトタイプをデジタルで描き起こしてUIデザインにしてしまいます

前回作った手書きのペーパープロトタイプを、プロトタイプツールを使って清書しました。ここでUIデザインを決めてしまいましょう。

デジタルでプロトタイプを作るツールはいくつかありますが、今回はAdobeのExperience Design CCを使いました。

せっかくクラウドに入っているので、使わないのはもったいないですからね!

このツールも微妙に使えるのか使えないのか。。。これでデザインを作り上げるには、少し力不足な感じです。

UIキットもあるにはあるのですが、キーボードも縦はあるけど横がなかったりともう一声!って感じかな。

ただ、イラレやフォトショで作ったデータをコピペで貼り付けれるのは、流石Adobe製品なだけありますね。

パーツはイラレやフォトショで作成して、Xdで形成しました。

プロトタイプを作るには、上の図のようにパーツから紐付けするだけで画面遷移を作ることができるので、楽チンです。通常のpush動作のみでなく、上下スライドやディゾルブなんかも選べるので、動作感を見るのはいい感じです。

ただ、フリック動作などは取れないので、フリックでページ遷移みたいな動作は作れませんでした。(0.6.8.6Beta)

スクロールはできますが、1部分だけスクロールさせる、といった複雑な動きはできないようです。

こんな感じで、四苦八苦しながら作ったプロトタイプを、第3者に触ってもらいました。

そこでまた、新たな改善点を見つけたので、それをここでフィードバックします。

そうして出来上がったのがこちら

我ながら所々雑ですが、ご了承あれ。

これってクライアントさんとかに見せるには最適ですよねー。iPhoneで見たらフル画面で見れるのも良いですね。

今回はiPhoneでデザインしましたが、デバイスは選べるので、AndroidやiPadでデザインすることもできます。

Xdを使う場合でも、いきなりこのツールで描き始めるのではなく、一度は手書きで紙に書いてみる方がスムーズにアイデアが出ると思います。

本棚に戻るアイコンが気に入らないんだけど、何かいい感じのアイコンないでしょうか。

もう少しブラッシュアップが必要ではありますが、こんな感じでプロトタイプ&UIデザインができたところで、次は設計書を作りますよ!

ようやく開発らしくなってきました。コーディングはいつ始めるんだ!?って感じですyoね。。。

- 広告 -