文系プログラマの勉強ノート

スマホアプリ開発やデザインなどについて勉強したことをまとめています

「ShoppingPlan」リニューアル&紹介Webサイト完成

【Xcode】お買い物計画アプリ 完成しました - 文系プログラマの勉強ノートで一旦完成報告をした
iPhoneアプリ「ShoppingPlan」ですが、
その後もちょこちょこ機能追加やデザインの修正を行っていました。

そしてこの度、iOS8、iPhone6&6Plus対応を済ませ、
紹介Webサイトも完成しましたので、改めてご紹介いたします。

f:id:an3714106:20150111185338p:plain

「ShoppingPlan」紹介Webサイト

今回は以下の点に対応しました。

デザインをリニューアル

シンプルなガーリーさはそのままに、更にシンプルで落ち着いたデザインにし、
大人や男性でも使えるデザインを目指しました。
素材はすべて自分で作成しています。

写真メモ機能を追加

家族から頼まれたものとか、似たような商品がたくさんあるものとか、
間違えやすい時に写真を撮っておくと便利ですよね。
ということでアイテム毎に写真を登録できる機能を追加しました。
その場で撮影も、カメラロールからの選択もできます。
紹介Webサイトのスクリーンショットにはありませんが、
画像の拡大表示ももちろんできます。

iPhoneの全画面サイズに対応

私自身がiPhone5ユーザーのため、当初iPhone5専用に作成していましたが、
勉強したAutoLayoutを導入して全画面サイズにえいやっと対応させました。
AutoLayoutは覚えるのも設定するのも大変でしたが、
画面サイズの変化に応じて引き伸ばす場所、固定する場所を一度きちんと設定すれば
それだけで全ての画面サイズでいい感じに表示されたので、軽く感激。
上手く使えればとっても楽ちんですね。

ちなみに、UITableViewCellの高さを内容量に応じて可変にするのも
iOS8から楽にできるようになりましたね。
これもAutoLayoutを使う方法に修正しました。
以前の記事にやり方を追記しましたので、ご興味のある方はどうぞ。
【Xcode】文字数に応じてUITableViewの行の高さを変える - 文系プログラマの勉強ノート

ただし、UICollectionViewCellに関してはAutoLayoutでは対応できないようです。
なのでここだけはコードからサイズを指定しています。
以下の記事にやり方を載せましたので、ご興味のある方はどうぞ。
【Xcode】画面サイズに応じてUICollectionViewのセルのサイズを変更 - 文系プログラマの勉強ノート

紹介用Webサイトを作成

アプリの紹介サイトによくあるシングルカラムのWebサイトが一度作ってみたかったんです。
Bootstrapを利用しています。
こちらについてはとりあえず作ってみたところなので
環境によっては上手く表示されないかもしれません。
Safariで文字化けする場合はエンコードUTF-8にしてみてください。)

中学〜大学時代に個人のWebサイトを作って運営していましたが、
当時はきちんとした文法も知らず、また、当時使っていたやり方は今ではほとんど非推奨になっていました。
今回HTML5、CSS3の基礎をかじったので、
今後また勉強を進めてWebサイトを作ってみたいと思っています。

なお、本アプリは現時点では一般公開の予定はありません。
あくまで自分用、勉強用でございます。