Recommended
More Related Content
Similar to 20191209 JXUGC #26 平日エディション 発表資料. ｢Xamarin.Formsの標準UIで どこまでできるナウなUI｣
Similar to 20191209 JXUGC #26 平日エディション 発表資料. ｢Xamarin.Formsの標準UIで どこまでできるナウなUI｣ (16)
20191209 JXUGC #26 平日エディション 発表資料. ｢Xamarin.Formsの標準UIで どこまでできるナウなUI｣
- 2. 自己紹介 • 西澤 周平（@shu_commu） • C#エンジニア • 業務用ASP.NETアプリケーションの開発,保守 • Xamarin.Forms歴 • 1年半ぐらい • 趣味でアプリ作ったりしてます（完全個人用）
- 4. なんで? • Xamarin.Formsに興味を持ってもらいたいから • 純粋にモバイルアプリ開発のフレームワークとしていい感じ • 簡単に始められる • すぐに動く • UI共通化でかなりなところまでWrite Once, Run Anywhere • なのになぜか知名度がいまいち
- 5. 興味を持ってもらうには? • やはり見た目, UI • 例えば, アプリを作りたいと思った人がいるとしましょう
- 6. 興味を持ってもらうには? • アプリ作りたいとき最初に考えること • こんなアプリを作りたい • それはきっとシンプルだけど おしゃれなアプリ
- 10. UIが良いにこしたことはない • モチベーション保てる • 他の人にも使ってもらえる可能性が上がる • さらにモチベーションアップ
- 14. 何がいいって • 複数のプラットフォームでUIとロジックを共通化 • Write once , Run anywhere • 見慣れて使いやすいC#とXAML (極めて個人の見解です) • すぐに始められてすぐに動く • これは本当に • 最大の難関はVisual Studioをインストールする時間
- 17. 作ろうと思ったときに大切なこと • モチベーション • モチベーションはUIに大きく左右される • 良いモチベーションの維持は良いUIから
- 18. ところでXamarin(ザマリン)って? • クロスプラットフォームのアプリケーションを開発するフレー ムワーク • コードやUIを共通化できたり,できなかったりします. • Xamarin.NativeとXamarin.Formsの2種類
- 19. Xamarin.Native • ロジックの共通化 • UIはネイティブ • それぞれのプラット フォーム用に作る • 各プラットフォームで できることはほぼ何で も • デザイン重視やプラッ トフォーム固有の機能 を使うアプリ
- 20. Xamarin.Forms • ロジックの共通化 • UIの共通化 • 各プラットフォーム共通 のUIのみ • シンプルなUIのアプリ ケーションに向いてい る • 業務用など
- 21. Xamarin.Forms • UIの共通化がうり • 双方に共通のUIが標準UIとして提供 • UIの自由度は下がる • UIに本気を出すならNative • シンプルな機能,UIのアプリケーション
- 22. Xamarin.Forms • UIの共通化がうり • 双方に共通のUIが標準UIとして提供 • UIの自由度は下がる • UIに本気を出すならNative • シンプルな機能,UIのアプリケーション
- 24. おしゃれなUIの例
- 25. ナウなアプリで使われているおしゃれ要 素 • 左からスワイプすると出てくるメニュー • アイコン付きのタブ • カルーセル • タイル状に項目を並べる • カード状の見た目 • 写真や角(かど)が丸い • アイコンがアニメーションする
- 27. アイコン付きのタブ
- 28. カルーセル
- 29. タイル状に項目を並べ る
- 30. カード状の見た目
- 31. 写真や角が丸い
- 34. ただし • あくまで｢機能面｣のこと • 最初からこういう見た目,UIが提供されているわけではない • UIコントロールを配置すればOKというわけでもない
- 35. 逆に言えば • 機能が足りなくてできないということはない • 標準UIを配置して, 見た目を整え,ちょっぴりコードを書くだけ • そして,これらのおしゃれ要素を満たせば, おしゃれUIになる ということ
- 38. Shellについて • ナウなモバイルアプリに必要な基本機能をまとめて提供してく れるUIコントロール • これだけで以下の機能を使える • ポップアップメニュー • タブ
- 39. Shellについて • タブやポップアップメニューが簡単にできる • FlyoutItemを追加するだけでメニューとタブができる • ポップアップメニューのカスタマイズ簡単 • ヘッダー作ったりも簡単 • 他のページを簡単にインポートできる • ShellContentで簡単インポート
- 40. Shellのサンプル
- 46. CollectionViewについて • ListViewよりも柔軟に見た目を調整可能 • 2列,3列など複数列(行)表示が可能 • スナップ(画面端など指定した位置にスクロールが止まる • 遅延ローディング機能あり • 未表示の項目が指定値以下になったら追加読み込み処理を行う • …ためのイベントが用意されている
- 47. CollectionViewについて（柔軟な表示） • 縦,横のスクロール方向の指定 • 列数,行数の指定 横方向, 1行 縦方向, 2列
- 50. CollectionViewについて （スナップ） • スナップとは • 慣性スクロールさせた後,止まるとき に画面の端や中央に画像が止まるよ うにすること. • 惰性でだけ止まらないようにするこ ともできる 画面左端で自然に止まる
- 51. CollectionViewについて（柔軟な表示） SnapPointsAlignmentで指定する Start : 左, 上端 Center : 中央 End : 右, 下端
- 57. Frameについて • 枠を作るもの • 角を丸めたり • もっと丸めて円に
- 59. Frameについて • このフレームの中に画像やテキストを並べることで 丸い画像やカード状のパーツを作ることができる とても使い勝手の良いコントロールの一つ インFrame FrameFrame
- 63. アニメーションの種類1 • FadeTo • 透明度を上げたり下げたりする • LayoutTo • 指定した`Rectangle`内にフィットさせる • RelRotateTo • 現時点の角度から指定した回転角だけ回転させる
- 64. アニメーションの種類2 • RelScalTo • 現時点の拡大率から指定した拡大率分だけ拡大させる • - RotateTo • 0度を基準にして指定した角度まで回転させる.平面回転. • - RotateXTo • 0度を基準にして指定した角度まで回転させる. • Y軸を中心に回転.
- 65. アニメーションの種類3 • RotateYTo • 0度を基準にして指定した角度まで回転させる. • X軸を中心に回転. • ScaleTo • 1(等倍)を基準にして指定した倍率まで拡大させる. • TranslateTo • 現在の座標から指定した座標へ移動させる.
- 66. 変化のバリエーション（一部省略）
- 67. アニメーションのサンプル
- 70. 使い方 • コードビハインド(C#側)で,各UIコントローラのアニメーション のメソッドを呼び出すだけ. 拡大･縮小の例 1000ミリ秒かけて元の大きさに. 終わり際を｢みょ～ん｣という感じに
- 71. 使い方 • コードビハインド(C#側)で,各UIコントローラのアニメーション のメソッドを呼び出すだけ. 拡大･縮小の例 1000ミリ秒かけて元の大きさに. 終わり際を｢みょ～ん｣という感じに
- 84. Demo1 （ちょっと解説：レイアウトについて） • Gridで分割 • Gridで分割
- 85. Demo1 （ちょっと解説：レイアウトについて） • Gridで分割 • Gridで分割 • Gridで分割
- 86. Demo1 （ちょっと解説：レイアウトについて） • Gridで分割 • Gridで分割 • Gridで分割 • StackLayoutで縦に並べ る
- 87. Demo1 （ちょっと解説：レイアウトについて） • Gridで分割 • Gridで分割 • Gridで分割 • StackLayoutで縦に並べ る 各セルにテキストや画像を配置
- 89. Demo3（よく見るタイムライン風） • 電車の乗り換え案内アプリ • SNSアプリのアクティビティの表示 • 縦棒と◯印が特徴 Yahoo乗換案内
- 93. Demo4（インスタ風） • おしゃれアプリの代表 • おしゃれUIが揃っている • カルーセル • Likeボタン
- 94. Demo4（インスタ風） • おしゃれアプリの代表 • おしゃれUIが揃っている • カルーセル • Likeボタン • アイコン付きタブ
- 95. Demo4（インスタ風） • おしゃれアプリの代表 • おしゃれUIが揃っている • カルーセル • Likeボタン • アイコン付きタブ • 丸いアイコン
- 96. Demo4（インスタ風） • おしゃれアプリの代表 • おしゃれUIが揃っている • カルーセル • Likeボタン • アイコン付きタブ • 丸いアイコン • カード表示（もちろん角は丸い）
- 97. Demo4（インスタ風） • モシャス • 色々足りないけれど • 実装不可能ではなく時間の問題 • でもおしゃれUI要素はすべてつっこんだ • カルーセル • Likeボタン • アイコン付きタブ • 丸いアイコン • カード表示（もちろん角は丸い）
- 98. Demo4（インスタ風） • モシャス • 色々足りないけれど • 実装不可能ではなく時間の問題 • でもおしゃれUI要素はすべてつっこんだ • カルーセル • Likeボタン • アイコン付きタブ • 丸いアイコン • カード表示（もちろん角は丸い）
- 99. まとめ • Xamarin.Formsの標準UIは最近のアプリケーションで使われるUIコン トロールを盛り込んできてくれている. • SNSぐらいのシンプルな機能であればおしゃれアプリは作れる. • Xamarin.Formsでカバーできるアプリの範囲は結構広い気がする • UI共通化は大きなメリット • 今回は標準UIのみ. • ライブラリなどを使えばもっと良いものを作れる
- 100. まとめ • それよりもなによりも重要なこと • モチベーションを保って楽しくモバイルアプリを作れる! • 見た目的にも • 機能的にも • プラットフォームを選ばずに
- 101. おしまい ありがとうございました
Editor's Notes
- 自分以外の人にとってアプリの機能以前に見た目で足切りされることがおおい
- あまりにもダサくて, もっとどうにかならないのかな, と真剣に考えた. これも今回の発表の動機だったりします.
- 必ずしもXamarin.Formsを選んでほしい! というわけではなく, 候補の一つになれたらな,と思います.
- Hello worldまでがこれほどスムーズに進むフレームワークは無い気がします.
- 先程ももうしましたが
- ここからはなすことは
- まずはおしゃれなUIとはどういうものかを見てみましょう 左からTwitter, facebook, Instagram
- ナウなアプリで使われているUIの要素をピックアップしてみました.
- ポップアップというらしい
- とにかく丸ければおしゃれという風潮
- みんな大好きLike! インタラクティブだと気持ちもあがります
- 見た目を実現するための｢機能｣は揃っているということ
- ポップアップルメニューというらしい
- 簡単にポップアップメニューとタブを追加することができます.
- FlyoutItemの中にShellContentを入れてページを指定するだけで,タブが作られ, タブをタップするとそれぞれのページが表示されます. シンプルで直感的.
- 加えて,スワイプしたときのポップアップルメニューも自動的に用意される. 見た目を調整したければ手を加えることもできる.
- ヘッダーの追加も簡単にできるので,手間なく簡単におしゃれなUIの土台が作れる
- おしゃれなUIには欠かせない要素 項目をリストとしてスクロール表示させるだけであれば, ListViewでも構わない でもCollectionViewにはカルーセルを実現するために重要な機能がある これは後で紹介:スナップ機能
- 列数も,方向も変えられる
- これもよく見る動作 このように柔軟な表示方法を設定することができる. カルーセルや項目を並べるといったUIを作ることができる
- ButtonについてはButton自体で丸くすることができるけど
- 見た目を整える上でとても便利なコントロール
- 見た目を整える上でとても便利なコントロール
- 見た目を整える上でとても便利なコントロール
- ただ色が変わるだけでは少々物足りなく感じてしまいます
- ユーザーの操作に対して何かしらの反応があると,アプリケーションも生き生きしてきます. 例えばよくあるライクボタンですが, 押して画像が変わるだけではいまいちですが,アニメーションを使うと違ってきます. Like数を表す数字もフリップさせるなどアニメーションをつけるとなお良いと思います. 無限Likeができるので精神衛生上もよろしい
- 若干速く
- ちょっとうるさい感じですが. 画面外から差し込まれるような表現もできます.
- みんな大好きTwitter. フォロワーリストを表示させるとこんな画面が表示されます.
- 完全に一致. 好きなだけフォローできます.
- 自動でLikeとFollower数が上がっていく優しい仕様
- でもおしゃれ.
- というか,おしゃれな人が使っているアプリ おしゃれじゃない人が使うとラーメンの画像だらけ
- カルーセルは当たり前
- LikeのないSNSアプリなんて存在価値がない
- 当たり前
- これも当然
- 黒くてわかりにくいけれど 角が丸くないなんて考えられない
- というか,おしゃれな人が使っているアプリ おしゃれじゃない人が使うとラーメンの画像だらけ
- というか,おしゃれな人が使っているアプリ おしゃれじゃない人が使うとラーメンの画像だらけ
- Xamarin.Formsに少しでも興味を持っていただくきっかけにでもなればこの上なく嬉しく思います.