サーバーサイドの設計をしよう

- 広告 -

サーバーの設計をする前に知っておくこと

前回のブログをアップしてから2ヶ月弱、何をしていたかというと、サーバーのお勉強をしていました。
なんせ、最近はアプリの開発しかしてないのでサーバーサイドの設計については詳しくないのですよ。
ただ、アプリとの連携でAPI設計なんかはしていたし、サーバーの担当者と話はしていたのでなんとなくはわかるんです。ただ、自分でやることは今まであまりなかったのでちょっと困ってました。

サーバーをAzureにすると決めたのは良いですが、そもそもWebアプリ開発とか初めてだし、Pythonとかやったこともないし、そもそもクラウドサービスって機能が複雑!
てな感じで初めてみたものの、Azureの情報があまり多くなくて右往左往。しかも、C#じゃなくPythonを使おうとしていたので、余計に情報が少なかったのも問題でした。
そんな苦労の末、やっとAzure上でWebアプリを動かすことができました!その苦労の内容についてはQiitaに記載しています。
AzureのApp ServiceにDjango@Python3.6.4で作ったWebアプリをデプロイする

Python自体も初めてで悪戦苦闘だったのですが、以前からPythonに興味があったのとWeb用のフレームワークがあるということで今回採用してみました。
PythonのWebフレームワークは色々あるのですが、一番メジャーなのはDjangoでしょうか。あとは最近人気のFlaskやBottleなどもあります。
今回は無難(?)にDjangoを使ってみました。
DBの接続がModelを通してやるので、SQLを書かなくていいのが最大のメリットかもしれません。。。SQL苦手。。。
また、Webページを作るのにTemplateが使えるのも魅力です。どうやらBootstrapも使えるみたいなのですが、まだよくわかりません。今回は特に必要なさそうなのであとで勉強します。

- 広告 -

サーバー設計をするよ

今回、試行錯誤している間に、webのアレコレを知ることができたので、いよいよサーバーの開発に取りかかります。
まずは全体の構成を考えてみます。なんとなーくわかるように図にしてみました。

アプリでデータを取得して来るためには、サーバーにデータがないといけません。サーバーにデータを登録するのにWebAppを使います。
そして、データはデータベース(DB)に登録されます。今回はデータの他に絵本の元画像があります。元画像はストレージに保存します。
アプリはAPIを通してDBからデータを取得します。データの型はJSONを使います。
画像はURLからダウンロードします。画像のURLはAPIのデータに入れておきます。
これで、今回作るアプリの登場人物は全てです。(のはず)

実際に作るときに必要になるのは、DB仕様、API仕様、画面仕様のあたりでしょうか。
アプリの画面仕様とAPI仕様は以前に作ってあったので、今回はWebの画面仕様とDB仕様を作りました。
前回作った仕様書に追記しています。

仕様書

やっぱり実際に触ってみないと設計はできないですね〜。今回は良い勉強になりました。
DB設計とかは奥が深すぎて、ちゃんとやろうとするともっと勉強が必要になりますが、最低限の知識で頑張ってみました。

なんとなく全体像が見えてきたので、ようやく実装に入りますよ!
はー。。。長い道のりでした。。。

- 広告 -

アプリの実装をしつつサーバーについて考えていきます

- 広告 -

サーバーを選定しますよ

以前も一度やりましたが、あれから時が経って状況も変わってきたのでもう一度見直します。
とりあえず、勉強も兼ねて今回はクラウド一択です。
モバイルアプリ向けのサーバーシステムはmBaaS(mobile backend as a Service)とも言います。
クラウドのモバイル向けバックエンドサービスを比較検討して見ることにします。

候補はクラウドサーバーの先駆者[AWS]、Xamarinとの愛称はいいはず[Azure]、Googleもあるよ[GCP]。
今回はこの3つを比較検討していきたいと思います!

機能比較表とか作ってみようと思ったのですが、対応するサービスがよくわかんなかったので、やりたいことに対するハードルで比較することにしました。
そして、アプリのバックエンドとして使うならGCPではなくFirebaseの方が妥当だとわかったので、Firebaseで比較します。

2018.6.1現在

AWS Azure GCP
APIをPython+サーバレスで実装
簡単にDBを実装
アカウント管理ができる(認証)
PUSH通知の実装
アプリ内課金できるか

[APIをPython+サーバレスで実装]
AWS – Lambda
Lambdaを作成するときにpython 2.7と3.6のどちらかを選択する。

Azure – Azure Functions
デフォルトのバージョンは2.7.8だけど3にアップデート可能
*Experimentalサポートと言うところが要注意だけど、今後に期待?

Firebase – Cloud Functions for Firebase
基本的にnode.jsのみ。

[簡単にDBを実装]
AWS – dynamoDB
Azure – Cosmos DB
Firebase – Realtime Database

[アカウント管理ができる]
AWS – Amazon Cognito
Azure – バックエンド サーバー SDK
Firebase – FirebaseAuth

[PUSH通知の実装]
AWS – AWS Mobile SDK
Azure – Azure Notification Hubs
Firebase – Firebase Cloud Messaging

[アプリ内課金できるか]
AWS – サービスのメソッドがあるっぽい

Azure – 自分で実装(サンプルコードあり)
ただしpythonではない。
IAPを検証するAzure関数と言うのがあるらしい。ここだけC#で実装しても問題ないかな。

GCP – 自分で実装?
資料あんまり見当たらない?見つけれませんでした。。。

- 広告 -

初めからAzureに決めてました。(実は出来レースでした)

上の表を見た限りではAWSが最強な気がしますが、アプリをXamarinで作る都合上、Azureの方が相性がいいんじゃないかな?と言うことで、 Azureを使おうかと思います。
では、なんでわざわざ比較検討したの?って話ですが、いざ使い始めて「必要な機能が使えなかった」とか、「別のサービスの方が使いやすかった」とかってなると残念な結果になってしまうからです。
なので、使い始める前に必要な機能が使えるのが、他にもっと良いツールがないかを検討して見ました。

今回の結果を見た感じ、情報の量や機能の充実感だとAWSはダントツ良さげです。Azureはアプリ内課金などの機能は自分で実装する必要がありますが、サンプルコードもあるしネックにはならなさそうです。

そうなると、Xamarinと相性の良いAzureを選ぶのが良さそう。

Zaureを使うとしたらどんな構成になるのでしょう

と思って考えて見たのですが、作ってみないことにはさっぱりわかんないですね。
ということで、実際に試行錯誤しながら作っていこうと思います。

今回はAzureを使うことを前提に機能比較してることもあって、大事なことをやってません。
それは、価格比較。どっちにしろ従量課金なんで正確な料金はわからないですが、なんとなくこんくらいかな〜みたいな感じで算出して見ました。

料金計算ツール

最初の一年はほぼ無料で使えるのでそんなにビビることもないのかもしれませんが。

そもそも、これで全てのリソースなのかも定かではなかったりします。あやふやで申し訳ない。
この辺は実装しながら見つけていこうかなーって感じです。
だれか詳しい人教えて欲しい。。。

- 広告 -

画面遷移とか変えたので設計書も作り直しましょう

- 広告 -

作り直したら名前が設計書から仕様書になってました

設計書なのか仕様書なのか。。。今回作ったのは前半は仕様書、後半は設計書といった感じでしょうか。
前回と同じく、「概要」、「画面遷移図」、「画面仕様」、「ファイル構成」、「データ構成」、「通信仕様」といった構成になっています。
相変わらず、サーバー側の設計がぼんやりしてます(苦笑)。

と言うことで、今回作った仕様書はこんな感じ。
仕様書

画面を減らして機能も削ったので、以前作った仕様書よりはかなりシンプルになったはず。
そして、前回の失敗を踏まえ普通のWordで作りました!なので、ちゃんと目次も作れましたよ。
これだと履歴管理機能も使えるし、いいかなと。

- 広告 -

仕様書を作るために必要なことって何だろう

作りながら思ったのですが、これってある程度アプリとかサーバーとかの仕組みがわかってないと書けないですね。
初めてアプリを作ったりする場合は、もっと試行錯誤的に作ると思うので、今回の手法は使えない気がします。
私自身もサーバーは作りながら考えるスタイルなので、仕様がぼんやりしてますからね。

大切なのは、何をやりたいのかを明確にしておくことかな?
実現方法は実装するときに決まると思うので、ここで無理に決める必要もないかも。

アプリの場合は、どんな機能をつけるのか、それはどんな動作をするものなのか。
サーバーの場合はどのリクエストに何を返すのか、データをどうやって保管するのか。
そういったことを決めるのが仕様書であり設計書なのかなと思うのです。

今回はWordで作ったのですが、もっと簡単にWikiとかで仕様の管理ができたらいいのになと思うのです。
色々調べてたんですが、どれにするか決めかねたので結局今回はWordにしてしまいました。
Wikiでやるメリットはぼっち開発よりもチームで開発する方があるように思います。BacklogとかにもWiki機能あるので、それを仕様書として使うのも良さそう。
まあ、今回のプロジェクトはBacklog使ってないですけどね。。。

実は前回の時もアプリを途中まで作ってたんです

仕様も決まったことだし早速アプリを作っていきましょうかね。
そう、前回も仕様書を作った後、アプリを作っていたのでした。あの時はXamarin ネイティブで作ろうとしていたので、まずはiOSから。
ストーリーボードとか使ってほとんどの機能を作りこんでました。

そして、SNS連携が面倒になって。。。その後Androidでも同じように作らなくてはならないのかと思った時の絶望感。。。
「そうだ、Xamarin.Formsにしよう!」とこのとき思ったのでした。

塗り絵の部分はPCLで作っていたのでその部分はほとんどそのまま今回も使いまわせるはず。
そうと決まれば、早速作っていくぞー。
と言いつつ、次回は多分サーバーのお話になるかと思います。

- 広告 -

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

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

もくもく会とは、カフェやコワーキングスペースなどで集まって、各自目的の事をもくもくする会のことだそうです。
「よるXama!」は本町にあるコワーキングスペースの一角でもくもくしますよ。

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

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

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

開催詳細

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

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

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

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

先着6名まで。

申し込みはこちら


主催者について

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

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

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

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

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

- 広告 -

ペーパープロトタイプからUIを作りますよ

- 広告 -

UIを作るというかデジタルで清書

前回はAdobeの”Experience Design CC”を使いましたが、今回は”Illustrator”を使いました。
“Experience Design CC”は使い勝手があまり慣れていないので、結構苦労しました。もっと手慣れたツールないかなと思っていたところIllustratorがモバイル対応してて意外と使えるのではないかと思い試してみたところ、割と使えたのでこちらで行くことにしました。
やはり使い慣れたツールが一番ですね!
デザイナーさんの間では”Sketch”というソフトを使ってる人も多いみたいです。

“Illustrator”で作るときは、1つの画面を1アートボードに作っていきます。
pixelで作れるのでサイズ感なんかがわかりやすいです。アイコンなどもここで作りこんでおくと後で楽。
聞いた話によると、プロトタイプの段階では白黒で作った方が良いんだそうです。なので、これも白黒。
確かに色を入れてしまうと、色に引っ張られてしまうところがあるかも。

最後にスクリーン用に書き出しすれば、1画面づつの画像ファイルが出力されます。便利!




アートボートを複数作れば、画面ごとにファイルを変えたり、レイヤで分けたりする必要がなくて便利なのも良いですねー。画像を書き出してそのまま仕様書にもできますね。

- 広告 -

清書もプロトタイプにしたよ

これをいつものPOPアプリでプロトタイプにしました。

イラストレーターで作ったプロトタイプ

プロトタイプ見て気づいた方もいるかもしれませんが、トップ画面の仕様を変えました(誰も気づいてないかも?)
Xamarinで開発する予定なのですが、Xamarinで横スクロールのテーブルを実装するのはちょっとめんどくさそう(基本機能にはない)ので、ポップアップから選択させるようにしました。この方がユーザーにもわかりやすいような気がします。

この後はようやく仕様書です。やっと、前回やってたところまでたどり着きます!

時間が経つと、色々考え方とかが変わってくるので、早く作るのがやっぱり大事だなーと思います。
仕事の合間にちまちま進めているので、仕方がないことですが。。。今回はちゃんとリリースまで持っていきたい!いや、持って行く!!

と決意を固めた所で、続きは次回〜

- 広告 -

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

第4回 よるXama!は5月16日水曜日に開催します!

もくもく会とは、カフェやコワーキングスペースなどで集まって、各自目的の事をもくもくする会のことだそうです。
「よるXama!」は本町にあるコワーキングスペースの一角でもくもくしますよ。

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

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

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

開催詳細

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

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

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

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

先着6名まで。

申し込みはこちら


主催者について

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

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

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

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

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

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

- 広告 -

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

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

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

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

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

開催詳細

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

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

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

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

先着6名まで。

申し込みはこちら


主催者について

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

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

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

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

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

- 広告 -

【アプリニュース】アプリをリリースしました

- 広告 -

去年からずっと作っていたアプリをやっとリリースいたしました!

お医者さんが考えた、「糖質制限」を正しく行うためのアプリです。その名も「糖質制限」!
まんまですね〜。

これは、個人で作ったアプリではなく、受託で請け負ったアプリなんですが許可をいただいて掲載しております。
受託ではあるものの、最初のヒアリングから設計、デザイン、実装、一部他の方に手伝っていただいていますが、ほぼすべて自分で行ったので、感慨もひとしおです。担当医のイラストも描きましたよ。
Xamarinアプリの第1号となりました。

最近流行りの糖質制限ですが、むやみに糖質を制限して逆に体調を崩したりお肌がかさかさになったりと言う話をよく耳にします。
このアプリは、そんな状況を打破すべく、糖質を排除するのではなく適切に取りつつ、栄養バランスを整え理想的な食生活を送ることを目的としています。
ユーザーのことを考えて、糖質制限にまつわる豆知識を載せたり、栄養バランスが一目でわかるようにグラフを表示したりと、細かい工夫をたくさんしています。
糖質制限に失敗した人、興味はあるけど怖いと思っていた人、このアプリでチャレンジして見ては?

iPhoneアプリはこちら

Androidアプリはこちら

- 広告 -

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

第3回 よるXama!は3月23日金曜日に開催します!

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

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

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

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

開催詳細

日時 2018年3月23日(金)19:00〜2時間くらい?

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

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

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

先着6名まで。

申し込みはこちら


主催者について

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

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

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

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

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

- 広告 -

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

- 広告 -

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

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

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

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

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

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

- 広告 -

まずはプロトタイプ!

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

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

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

プロトタイプ

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

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

- 広告 -