MUSHIKAGO CheerMeUp リニューアル&涙ぐましい開発話

スポンサーリンク

昨年の夏頃から長期間に渡り、裏で開発を繰り返していたCheerMeupをついに(ようやく)リニューアルリリースしました!(iOS版のみ)

縦長の画面になり、アイコンを押してパネルを開くタイプのユーザインターフェイスにしました。まだまだ不具合の修正や新機能開発を続けていく予定ですが、とりあえず現段階のものをリリースしておく事にしました。このアプリで出来る事は基本的に大きく変化していないのですが、「○○しました」という吹き出しのデザインを切り替えたりする機能(今後、新しいデザインを追加できるように)や、投稿時に公開範囲を「自分のみ」「友達まで」「一般公開」と選択できる機能を追加しています。

CheerMeUp 第4世代 ユーザーインターフェイス

今後更なる機能アップを予定しています。

CheerMeUpの細かな変更点は、CheerMeUpのサイトから「Mushikago CheerMeUp – Community」というFacebookページにアップデート情報を記載しておきますので、そちらもご確認ください。

以下、CheerMeUp:開発者向けMEMO(涙ぐましい開発話)

この半年間、籠って開発を続けていたCheerMeUpの涙ぐましい開発話を書いておきます。半年間何もしていなかったわけではないのです。ずっと作り続けていたんです、という話;;;;

CheerMeUp 第1世代:Adobe AIR
旧バージョン(店頭にリリースされていたのは第一世代)は、AIR for iOS(Flash Professionalで作成したFlexコンテナをFlash Builderで利用してアプリとしてビルド。つまりFlashProとFlashBuilderを連携させて使うマニアックな方法)で開発をしていたアプリだったのですが、AdobeさんにPhoneGap Tシャツをもらった「Adobe PhoneGap Build とりあえずどんなものか」というエントリーをきっかけに、PhoneGap Buildでラッピングする形にしようと試みました。
ちなみに、CheerMeUpのAndroid版は、まだこのAIRバージョンです。

FB+SWCアイコン

CheerMeUp 第2世代:PhoneGap Build+Dreamweaver+Sencha Touch(未公開)
当時、PhoneGap Buildには、Facebookに接続するプラグインの提供がなく(今はあります)、Facebookに接続する機能をつけるまでの前段階の開発にPhoneGap Build+Dreamweaverを使いました。

DW+BDアイコン

とは言ってもPhoneGapはHTMLを表示するブラウザがポンとフルスクリーンで置かれているだけのもの。APIを使ってのカメラロールへのアクセスとFBへの投稿以外は特に何もせず、アプリのほとんどのユーザーインターフェイスの構築は、結局HTML5+Javascriptです。そうなると便利なライブラリを選択すべしです。僕は、カルーセル(横にスワイプして画面を切り替えるアレ)の動作が最も気持ちいいと感じたSencha Touchを選択する事にしました。ちなみに、JSの動きの気持ちよさは実機で確認すべしです。Sencha TouchのカルーセルはJSライブラリの中では最も気持ちいいと思いました。また、実装の簡単さも大事ですね。Sencha Architectというユーティリティが神ツールです。Senchaの仕様をあまり理解していなくてもデザインビューにコンポーネントをドラドロするだけで実装できちゃいます。これについてはまたの機会にブログを書こうと思います。(ただし、買うと高いです。トライアルの30日間でほとんど仕上げましたが、結局気に入りすぎて買いました。)

さて、ユーザーインターフェイスができてカメラロールへのアクセスまではPhoneGap Buildでやっても、Facebookへの投稿は、Cordova化して開発する必要が出てきます。(当時、FB接続はCordovaのプラグインとして存在していました。)FBへの画像投稿機能を実装するためにやむを得ずCordovaのプロジェクトへ切り替えました。つまり、Xcode内のブラウザでSencha Touchを使う感じです。Cordovaについては、Cordova(PhoneGap) とりあえずどんなものかを。

Cordovaにすると、iOSシミュレータも使えるようになるので開発は早くなる反面、まずはiOSに限定して開発を進める事になります。

Cordovaアイコン

ここでは書ききれないほどのCordova関係のサイトを参考に、Facebook接続用のプラグインを実装して、テキストの投稿テストまでうまくいきました!

が、、、、最後の最後、肝心な画像を投稿するところで、これがうまく行かず。。
{“message”:”(#324) Requires upload file”,”type”:”OAuthException”,”code”:324}
というエラーで画像を投稿できません。この問題を解決する事ができず、この最後の最後で断念。。

ゴチャゴチャいろいろ書きましたが、結局最後の最後でだめだった、と
この辺で冬になりました。

ちなみに、現在は、PhoneGap Buildのプラグインに「FacebookConnect」なるものが!これはまだチェックしていません。これは要チェックですね。

CheerMeUp 第3世代:Sencha Touch + Titanium(未公開)
画像の投稿がうまく行かないのは、PhoneGapのせいだと決めつけて、ラッパー(HTMLをアプリにするもの)をTitaniumにしてみました。

Titaniumアイコン

Titaniumには、HTMLベース用アプリのためのテンプレートが用意されているため、移植は簡単です。PhoneGap用に用意していたwww以下のファイルをそっくりそのままHTML用のフォルダに入れてあげるだけ。あとは、カメラロールとFacebook接続といった接続部分をTitanium用に少し書き換えてあげるだけで動作しました!しかも、Titaniumは、Titanium側とHTML内部のSencha Touch側とで画像を渡しあったり通信し合う事ができます!かなりいい!

そして、この頃、TestFlightによるベータテスティング(開発段階でいろんな人にテストしてもらうのに便利なサービス)にハマりました。スマホアプリ開発者にとってとても便利なサービスです。TestFlightについては、「TestFlight とりあえずどんなものか」を。

これでiPhone/Androidのアプリ開発は完璧!と思ったその最後の最後。

今までiOSシミュレータやデバイスへの直接インストールで動作していたSencha+Titaniumのアプリが、AdHocビルドしたアプリだと、Sencha部分が全く表示されない、という問題にブチ当たりました。つまり、お気に入りのAdHocでアプリを配布するTestFlightを使う事ができなくなるのです。最初はなんとかなるだろう、と思っていたのですが、これまたどうやっても解決できない。。

(これは、App Store用にビルドしたものでもうまく行かないのでは、と思い、テスト的に申請に出してみると、意外と申請は通りました。が、TestFlightを使いたいので、この環境での開発は断念。)

ゴチャゴチャいろいろ書きましたが、これまた最後の最後でだめだった、と
この辺で正月が過ぎていきました。

しかし、ここら辺で、Titanium+GitHub+TestFlightの組み合わせによる開発に魅力を感じた僕は、このバージョンもお蔵入りとして次に進みます。

CheerMeUp 第4世代:Titaniumのみ(本日リリース!)

最初からTitaniumやXcodeで作ればええやん、という話もありますが。。。やはりワンソースでハイブリッドな開発をするメリットは捨てきれません。
Titaniumはハイブリッドなものの方言が強く、同時にiOS/Androidの両プラットフォームで動くユーザーインターフェイスを用意するのは、時間がかかります。今回は先にiOS版限定で作る事にしました。

ここで春がきて、申請も通り、本日リリースという事になりました。

アップデートしやすい環境が整ったため、今後は今まで以上に機能アップしていけると思いますので、よろしくお願いします!
CheerMeUpの今後に関する情報などは、ぜひCheerMeUpのサイトの「いいね!」で「Mushikago CheerMeUp – Community」をフォローしてみてください。ご意見・ご感想などもぜひこちらのコミュニティで!

東京造形大学卒業後、マクロメディア(現アドビ システムズ)に入社。Quality AssuranceやテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。独立後、虫カゴデザインスタジオ株式会社を設立。最近は、ZBrush、Xcode(Swift)、Firebase、Unity、Adobe Creative Cloud関連にフォーカスしています。モバイルアプリ開発情報を主としたブログ「MUSHIKAGO APPS MEMO」の中の人。