iOS/Android アップデート(3)
iWanna,第三回アップデートを行いました。
大きな更新点
・達成状態の付与
・上記に伴って、自分、友達のHomeのデザインの改善
・最新メッセージと未読の視覚化
・Twitter、FacebookにWannaListをシェア（iOSのみ）
達成の付与
自分のホーム画面から、ワナのアイコンをロングタップすることで、達成状態にすることができます。
やりたいことが終わったよ！という表示になるわけですね。
これに伴って、Homeのデザインを一新！
タブ切り替えですべてのワナ、達成、Likeしているワナ（自分のみ）、フレンド（友人のみ）を見ることができます。
最新メッセージの表示の表示と未読の視覚化
Message Roomタブについて、
下のスクリーンショットを見てもらえばわかるかと思いますが、
未読はオレンジで、最新のメッセージを表示するようにしました。
その他、デザイン、細かいバグの除去やユーザーからの意見を反映させた使用改善を行っております。
使いやすくなってゆくiWannaをどうぞご利用ください！
https://uthackathon.github.io/website/
次回アップデート予定
・メッセージ着信通知機能
・グループチャット機能
・公開未公開の設定による、個人ToDoList機能の強化
etc...
iOS/Android アップデート(2)
iWanna,第二回アップデートを行いました。
大きな更新点が二つ
・外部アプリとの連携によりログイン可能に
・フレンドの、「ミュート」「ブロック」「問題報告」機能
他SNS連携ログイン！
メールアドレスの登録を強要させていて申し訳ありませんでした。
ついに！ご覧のようにTwitter,Facebookのアカウントをお持ちの方は連携して入ることができるようになりました！
連携先のユーザー名、アカウント画像をこちらでも受け取って使うことができます。
※従来メールアドレスを用いていた人がそのアカウントを引き継げる、どのログインの仕方でも同じデータを使える、というわけではありませんのでご了承ください。（要望が多ければつけるかも）
インスタの利用者が増えているという情報を耳にしたので、そちらもつけようかなと思っています。
フレンドに対するアクション機能
Twitterでおなじみの「ミュート」「ブロック」「問題報告」機能です。
iOS審査の際に、SNSアプリは問題報告機能が必須であるという指摘をいただいたので、付けました。
ブロック機能は友達解除用と思ってください。
ミュートはご存知、めんどくさい人を…
Friendページの右上・・・を押してポップアップ表示させてください。
その他、細かいバグの除去やユーザーからの意見を反映させた使用改善を行っております。
使いやすくなってゆくiWannaをどうぞご利用ください！
https://uthackathon.github.io/website/
次回アップデート予定(次週を予定)
・メッセージ画面の改善
・メッセージ着信通知機能
・Wannaの達成、未達成
・TwitterでのWannaリスト、達成状況のシェア
・公開未公開の設定による、個人ToDoList機能の強化
etc...
おまけ
iOSの審査が、リリース時は3日ほど、アップデートは1日と異常に速いです。
SNSはリリースが少なく、審査が早いのでしょうか。
アプリの出来が良いからでしょうか（これであってほしい）
なんにせよ、頻繁に更新していくよていのこちらとしてはありがたいです。
241
ionicによるfirebase外部アプリ認証(Firebase authentication with Facebook, Twitter, Google, and so on.)
このたびiWannaにTwitter及びFacebookのAPIを利用したログインをつけることができました。
そもそも、Firebaseには専用の関数が用意されており、とても楽に実装することができました。
（最初はngCordovaなどでやろうとして、わからねー！と思っていたのですが、無駄に考えすぎていましたね…）
以下に手順を残しておきます。例はTwitterで。
ここを見ました。基本的にここに従えば大丈夫。
手順
①API key とAPI secretを取得（callbackURLの記載）
②.jsファイルに記述
③htmlで関数呼び出しアクションの記述
(④in app browser の導入)
※ionic serveについて
①API key とAPI secretを取得（callbackURLの記載）
まず、Twitter developers（https://dev.twitter.com/） にアクセス、ログインの上、下部の「Manage Your Apps」をクリック
次に移動先で右上のCleate New App をクリックすると以下の画面に。
ここに自分の作っているアプリの情報を書いていきます。
ここで注意。矢印部に適切なURLを入れないと動きません。（ここに入力するのはプロジェクトを作った後でもいいです）
FirebaseのTwitter Authenticationをよんだら、
Set the application's Callback URL tohttps://auth.firebase.com/v2/"YOUR-FIREBASE-APP"/auth/twitter/callback
とあるので、下線部の"YOUR-FIREBASE-APP"
のところを自分のアプリの名前に変えて、入力しましょう。
規約に同意し、作成。Keys and~のタブを見ると、API key とAPI secretが生成されています。
自分のfirebaseのLogin&Authタブに上で得たkeyを打ち込みます。
この際、Enable Twitter Authenticationにチェックを忘れずに。
②.jsファイルに記述
これについても最初のリンクを見ればわかるのですが、authWithOAuthPopup関数を使って一発です。
いかにiWannaのコードを載せておきます。
var ref = new Firebase(FURL); var auth = $firebaseAuth(ref); $scope.TwitterLogin = function() { auth.$authWithOAuthPopup("twitter", function(error, authData) { if (error) { console.log("Login Failed!", error); } else { console.log("Authenticated successfully with payload:", authData); return authData } }) .then(function(authData){ var uid = authData.uid; var imgURL = { images : authData.twitter.profileImageURL}; var userRegister = { name: authData.twitter.username, email: "", password: "", intro: "User Information", images : [imgURL], twId : authData.twitter.id, }; $firebaseArray(ref.child('users').child(uid)).$loaded().then(function(data) { if (data.length == 0){//array==0 未登録 Auth.createProfile(uid,userRegister); }; }); }); $state.go('tab.dash'); };
Auth.createProfileでfirebase上にユーザー情報を残しています。
ifのところは、登録したい場所にデータがあるなら再度ユーザー情報の上書きをしないようにしています。
このauthDataというのが素晴らしく、固有のユーザーid、twitterのアカウント名、画像URLなどいろいろオブジェクトで入ったものになります。
これを読めば簡単にユーザー情報を受け渡しできますね。
どんなことができるかの詳細はここで
$authWithOAuthPopup("twitter", function(error, authData)の"twitter"部をかえればいろいろと対応するみたいです。
③htmlで関数呼び出しアクションの記述
<ion-view view-title=""> <ion-content class = "landing" style =" text-align : center; margin-right: auto; margin-left : auto; "> <a class="button button-outline icon-left ion-social-facebook-outline button-positive" style = "border-color:#ffffff; border:solid 2px; color:#ffffff " ng-click= "FacebookLogin()">Login with Facebook</a> </ion-content> </ion-view>
ボタンにng-clickで関数を呼んでいます。
④in app browser の導入
実機で動かすとき、このままではブラウザが立ち上がらず、外部認証画面に行かないかと思います。
in app browserを導入しておいてください。
（自分はやっていないのでこれは別の方のブログなどを参考にしていただければ…）
以上になります。
おまけ
ionic serve で外部認証がうまくいかない！
こんなかんじで
Unauthorized Request Origin
You are attempting to login with Twitter from the origin~
っとなってますがこのホストはfirebaseのリストに入っていませんよと
でfirebaseの注意書きを見てみたらローカルホストなら行けるらしい。
ということで、
コマンドラインで、ionic address
ローカルホスト選択（私の環境では(2)）で
いけました！
参考までに
iWanna Appをよろしくお願いいたします。
241
androidアップデート(1)
Play Store の第一回アップデートを行いました。
（iOSについては申請期間を考慮し、更新は大きな変更時にまとめて行うつもりです。）
変更内容:
・iW Listの並べ替え機能（やりたい度順、投稿順切り替え可能）
・iWListのジャンル分け機能
・自分のLikeしているもの一覧(My List内部)
・画像アップ時2MB以上の画像を投稿しようとした時のエラーメッセージ
・フレンド申請の確認画面追加
・ログイン失敗時の記入情報保持
・Wannaの内容を複数行で記述可能に
・他、細かいバグやデザインの修正
↑更新後使用画面
今後のアップデート予定:
・Wannaの達成、未達成状態の付与
・スマートホン通知
・ログインなしで個人使用ToDoリスト機能使用可能に
よろしくお願いします。
241
開発日記(2)：iWannaリリース!
どうも、ut-hackathonです。
気づけばもう6月。
涼しい日もありますが、着実に夏に近づきつつあるこの頃ですね。
遅れ馳せながら、皆様ご報告があります。
ポチっ
.........
iWannaアプリ リリースしました。
4月の開発開始から1ヶ月と少しで最初のリリースまで漕ぎ着けました...
(喜びを抑えきれないメンバー)
android版は6/2にリリースしていたのですが、iOS版もリリースされたということで、一つ節目を迎えました。
しかしながら、この度のリリースはまだまだ実験段階で、新しい機能などを現在議論中です！
「ここはこうした方が良い！」
「こんな機能があったら面白そう！」
などのご意見を、アプリ内のチャットもしくはMailでどんどん送ってください！アプリを見てくださった皆様の創造的な意見から、iWannaアプリはどんどんアップデート繰り返して、これは面白い！と思ってもらえるアプリになるようにしたいです！！
どうかお願いします！！！
どんなアプリになったの？
特徴はどんな感じ？
少ないメンバーですが、今月中に何度もバージョンを上げて、皆さんに面白い！と思ってもらえるアプリになるように頑張ります。
iWannaのwebページも出来上がりましたので、ご覧ください。
mtmt
ここがいい！ iWanna App と他のSNSとの違い
ついに iWanna （アイワナ）がリリースされました！！！！
さて、みなさん、
「iWannaってほかのSNSと何が違うの？」
「使う利点は？」
「I Wanna Be the Guy?」
と思っていると思います。
ここではiWannaがほかのアプリとどう違うのか、そしてここが素晴らしい！
ということを宣伝させていただこうと思います。
一言でいうと、このアプリは、【やりたいこと】を【実現】させるためのアプリです。
以下機能の詳細を紹介します。
↑ iW List(よく言うところのタイムライン)
１．みなが”やりたいこと”＝"Wanna"のみを投稿するため、他の雑多な情報に埋もれない
よくあるSNSというものは、みんながきままに言いたいことをいう場です。情報はどんどん流れて行ってしまいます。
当然ながら、やりたいことだけが投稿されるこのiWannaなら投稿する側も見る側も、目的にあったものだけを見られます。
２．やりたい度合いが色によって直感的に伝えられる
iWannaでは投稿時にカラーバーによってやりたい度を設定します。それによって、一目で投稿者のやる気が伝わり、人を集める時に役立つでしょう。
やりたい順表示機能実装予定（一週間以内にアップデート）です。
３．Likeボタンを押すと、チャット画面で投稿者に連絡がいく
これの大きなメリットは、チャット画面に直接メッセージがいくことです。このメッセージからそのまま予定調整の話に入ることができます。
通知機能、グループチャット機能も実装予定（今後アップデート）です。
↑ チャット画面
４．ジャンルが区分けされており、自分の趣味に合った"Wanna"を探しやすい
スポーツが好きな人、旅行が好きな人、など自分の趣味に応じて"Wanna"を見ることができます。また、一瞬でそのやりたいことの性質も伝えられます。
ジャンルソート機能実装予定（一週間以内にアップデート）です。
５．趣味が合う人が集まる
Lineのグループなどで遊び相手を探すことなどあると思いますが、必ずしも同じ趣味の人が集められるわけではないでしょう。
その点、iWannaでは、Likeした人はそれに興味があってやりたいと思っているわけですから、より楽しめることでしょう。
６．暇な時期にはこれで友達と遊べる
iWannaに投稿されていることは、みんながやりたいと思っていることです。そこに乗るということは、暇なときに遊ぶ約束を取り付けるのにはもってこいですよね？
７．ToDoリストとしての活用
iWannaを友達との遊びのツールとして使う以外にも、ToDoリストとして使う利用法があります。
特にグループで使えば共有ToDoリストとして非常に便利でしょう。
期限、達成状態の付与など、"Wanna"としてもToDoとしても使える機能を開発中です。
より【やりたいこと】に特化させ、このアプリをよりよくしていくためのアイデアは既にグループ内にあります。
今後のアップデートでさらに使いやすく、より魅力的になっていくことを保証します！
現在Ver.1.0公開中！
現在ver1.3公開中(16/06/18)
iWannaを一緒によりよくしていくためのアドバイスを募集しています。ぜひ使ってみて、コメントをよろしくお願いします！
241
ionicで作成されたアプリでローカルに保存された画像が実機だと表示されない
プロジェクトのフォルダ内に保存された画像を参照する際、以下の例のようにjavascriptのコード内で書くことがあるとおもいます。
"ionic serve"してブラウザーで見てみると問題なくその画像は表示されていました。
しかし、"ionic run android/ios"によりビルドして実機で確認で確認してみると、画像が表示されていませんでした。この問題は../を消すことで解決できます。
"../img/hoge.png" → "img/hoge.png"
ionic側の問題のようです。以下のサイトを参考にしました。
https://github.com/driftyco/ionic-view-issues/issues/54
by go
