IonicとXamarinの概要紹介
Xamarin
- JXUG 田淵 義人(エクセルソフト)
Xamarinとは
- モバイルのクロスプラットフォームのフレームワーク
- C#
- ネイティブのAPI100%移植されている
- 全部薄くラップされている
- 共通化できるけど全部できるってわけではない
開発手法
- Xamarinネイティブ
- Xamarin.Forms
- 使い分け
- さっと作る時はForms
- ちゃんと作る時はネイティブ
Ionic
- Ionic Japan 榊原昌彦
フロントエンドの流れ
- bower死んだ
- grantもgulpも死んだ
- coffeeも出てきたけどもう消えた
- 今はESもしくはTS
- CSS使いづらいSCSS使おう
- Angular/React/Vueの時代
- ReactNative/Kotlinネイティブ
- PWA
今後の流れ
- PWAがあるからWEBもアプリにできる
- BackgroundSync
- オフライン時の操作をとっておく
- 復帰時に再送できる
- Push通知
- ホーム画面追加
- GPS/カメラ等へのアクセス
どうしてWebなのか
- アプリのインストール率低下のデータが
- Webサイトの利用時間増加
- ストアから遷移するまでのめんどくささ
ionicとは
- Cordovaを使うことでWebアプリをネイティブアプリとしてストアから落とせるようにするようなもの
- android/ios/browserそれぞれ対応
- andularが土台
- PWAデフォルト対応
- UIライブラリも同梱
- https://github.com/ionic-team/ionic-conference-app
Material DesignとFlat Designの比較
- JXUG 福田
- Ionic Japan 桑原(株式会社ゆめみ)
- https://speakerdeck.com/clown0082/materiarudezain-huratutodezaingaidorainwodu-mu
Material Design
- 2014のGoogleIOで発表
Flat Design
- シンプル
- ダイナミックなレイアウトや色使い
歴史
メリット/デメリット
- メリット
- 柔軟性のあるFW
- より大きくより合理的なタイポグラフィ
- レスポンシブデザインとの親和性
- デメリット
- ユーザビリティへの悪影響
- 識別性の欠如
- 似たようなものになりがち
- 日本語に合わない
- 漢字が複雑
- カタカナとか画数少ないひらがなならなんとかいける
今後
- フラットデザイン2.0
- 厳格に遵守ではなく柔軟に
マテリアルデザインとの比較
実践から考える「UIデザインの前にやらないといけないIAとUX設計」
- Ionic Japan 榊原昌彦(イノベーションアライアンスCTO)
UI設計
- 情報のグルーピング
- 情報の取捨選択
- ページ間の意味の統一
- 同じ見た目なら同じような情報を置かないと
- ユーザの観察
- キーボードで隠れる部分の使いかたとか
- 機能に気づかれないと使ってもらえない
UIの構成要素
- グラフィック
- 機能要件
- 情報設計
UX
- アプリを使いたいんじゃなくてアプリを通して何かを実現したいと思って使っている
- 利用前/利用中/利用後
- ペルソナ
- 誰をターゲットにするのか
- 自分の都合のいい人にしてしまいがち
- 知り合いを設定するとよい
- 実際に話し聞いたりとかもできるし
- コンテキスト
- どういうシーンで使うのか
- 砂漠で温かいおしるこを売ってもUXは低い
- ユーザの持つ問題への理解と共感を深める
- ユーザが望む本質を探求する
- http://ykazu.com/ux/context-for-ux-design/
- どういうシーンで使うのか
Webとアプリの違い
- 繰り返し使ってほしいならアプリ
- 一回でいいならWebでいい
まずはプロダクトを作ろう
- プロダクトが存在しないと学べない始まらない
- 作って反応を見る
【Xamarin.Forms】デザインと「よしなに」する方法
これからXamarinやるひと
- 公式が一部日本語対応
Xamarinとは
- .NETと互換性あるMonoプロジェクトをモバイルで動かせるようにしたFW
Xamarinのメリット
- ネイティブに負けない
- 実行速度
- ライブラリ数
- ネイティブ+.NETライブラリ
- コードの共通化
- アプリの規模にもよるが4割弱
- ios/androidどちらも同じコードで書ける
- 仕様をコードベースで揃えられる
Xamarin.Forms
- プラットフォーム間でViewを共通化するためのUI Tool Kit
- android/iosの差異をあまり意識せず作れる
- .NET(MONO)とFormsの知識あればなんとかなる
- VS上でプレビューできる
デモ
- ビルドはサンプルだからはやい
- 機能があるともうちょっとかかる
- xamlで書くのはかなりつらそう
- 特にJSエンジニアからすると絶対に書きたくない
- コンポーネント化できないってことなのかな？
- RNエンジニアからするとすごく古い開発スタイルに見えてしまう
TabとNavigation
リーンアジャイルで開発を加速しよう
- なかしょ
- 中島進也さん
Sketchで実装しやすいデザインデータをつくる
- 中江 亮(株式会社ディー・エヌ・エー)
105問のエムグラム性格診断の離脱率を激減させてバズらせるUIのお話
- m-gram Inc. 松村有祐
