O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

マスコットアプリ─ キャラアプリ─ 開発 with Xamarin

986 visualizações

Publicada em

プロ生勉強会 第45回@名古屋のスライドです

Publicada em: Tecnologia
  • Seja o primeiro a comentar

マスコットアプリ─ キャラアプリ─ 開発 with Xamarin

  1. 1. マスコットアプリ ─ キャラアプリ ─ 開発 with Xamarin (Visual Studio for Mac も出るよ) jz5 プロ生勉強会 第45回 @名古屋 2016/11/26
  2. 2. プロフィール • jz5 • 仕事1: プロ生ちゃんP • 仕事2: プログラマー • Xamarin 歴: 1年と少し • Visual Basic 歴: 20年近く
  3. 3. 作ったもの
  4. 4. 作ったもの
  5. 5. プロ生ちゃんアプリ開発支援プログラム • はじめました • 第一弾は自作 iOS アプリを App Store での 配布をサポート(無料で公開できます) • 対象者: アプリ開発初心者 • 必要なもの: Mac と開発~公開の作業 • 詳しくは Web & お問合せで
  6. 6. Q. Mac ないよ
  7. 7. A. Mac 買いなさいよ
  8. 8. Mac 環境の提供もはじめました! • 合同会社プロ生所有の Mac (Server) へ リモートアクセスできるアカウント無料提供 • 対象者: 開発用 Mac がないアプリ開発初心者 • 詳しくは Web & お問合せで
  9. 9. Agenda • マスコットアプリ(キャラアプリ)とは • Xamarin でスマホアプリ開発 • アプリが完成したら
  10. 10. マスコットアプリ(キャラアプリ)
  11. 11. はじめに・前提 • キャラ運営の立場・ アプリ等を作ってほしい立場からの話 • マスコットアプリ文化祭などの経験からの話 • キャラクター – 第三者が利用できるキャラ – ※ アニメ・ゲーム等キャラの非公認同人利用とは違う • アプリ – 第三者が作るアプリ – ※ キャラ運営公式でないアプリ
  12. 12. ゴール • アプリの例を知ってアイデアのヒントに • アプリ開発のきっかけに
  13. 13. キャラについて
  14. 14. キャラを使う • ガイドライン等の確認 – 公認されている使い方の確認 – ない場合は、要望・交渉もアリ • チェックポイント – 活動の継続性 – 二次利用(素材の提供・利用等)、二次創作の許可 – 運営との距離 • 萌えキャラ・ゆるキャラ®たくさんいる – ガイドラインやキャラの活動を見れば 使ってほしい or 単なるライセンス商品 or 権利者のみ利用かが だいたいわかるかも
  15. 15. キャラの設定 • 好きな設定を盛り込もう – 少なくともプロ生ちゃんは OK – 料理が苦手 = 料理アプリで使うのは向いてない… というわけではない • ゲームなら – 実は双子、実はエスパー、実は未来人 – とかなんでもアリ • 教育系?なら – 教え役、教えられ役どっちもアリ
  16. 16. アプリを分類してみた
  17. 17. ① 既存アプリにキャラ追加 • 自作アプリに追加 –キャラバージョン作成、 キャラ化できる機能追加など • 他者アプリに追加 –エディターのプラグイン、Chrome 拡張など
  18. 18. Mery 背景設定の追加
  19. 19. FavBinEdit テーマの追加
  20. 20. プロ生ちゃん IDE Visual Studio 拡張
  21. 21. Atom プロ生ちゃん拡張 Atom パッケージ
  22. 22. ① 良いところ • 手軽に作れるかも • 有名アプリだと話題性がある • ユーザー層が広がる –ファンユーザーが増えるかも • 既にユーザーがいる –アプリユーザーに向けてアピール
  23. 23. ② 既存アプリの置き換え • 電卓・カレンダー等のありふれた機能に キャラ追加した新規アプリ
  24. 24. プロ生ちゃん電卓
  25. 25. 東北ずん子QR
  26. 26. せっかくだから二段階認証するにゃ。
  27. 27. お父さんアプリ
  28. 28. ② 良いところ • 手軽に作れる場合も • キャラという付加価値でアプリ置き換え • アイデアは自分のホーム画面や メニュー画面を参考に • ユーザーは自分・ファン(+キャラ運営)
  29. 29. ③ オリジナルのゲームやツール • 独自アイデアのゲームやツール
  30. 30. マスコットふぇすてぃばる
  31. 31. プロ生ちゃんブレード
  32. 32. チャレンジ!!さんすう ~with プロ生~ 2
  33. 33. ③ 良いところ • 独自性のあるアイデアを実現 • 新規でも一度作れば… キャラの追加・差し替えも簡単な場合も • ゲームの場合オリジナルキャラとの共演もアリ –自分の創作と両立 –キャラのファン層へアピール
  34. 34. ④ 番外: 少し変わった使い方 • アプリ名だけキャラ登場 • サンプル画面やヘルプだけキャラ登場 • サンプルアプリだけで素材提供
  35. 35. 慧ちゃんのリボン Excel 拡張
  36. 36. LockPix ロック画面を pixiv の画像に設定
  37. 37. 8Bit ゲーム機風ドット絵プロ生ちゃん ドット絵素材のサンプルゲーム
  38. 38. アプリアイデア視点から • 挫折産業はいいぞ? –簡単には達成しない –実は挫折しない・何度でもやり直せる • → 英語学習、ダイエットなど
  39. 39. プロ生ちゃんによる体重管理
  40. 40. アプリができたら… • 後半(終盤)へ続く
  41. 41. Xamarin でアプリ開発
  42. 42. Xamarin • ここでは iOS や Android アプリが作れる 開発環境のこと • 個人/小規模開発チームは無料
  43. 43. Xamarin ブランドは消えるかも? • Microsoft 買収により… –Windows の Xamarin Studio → Visual Studio のみ –Mac の Xamarin Studio → Visual Studio for Mac –諸 Xamarin サービス → 消えたり消えてなかったり • 名前は消えても中身は同じ(諸問題も以前残る)
  44. 44. おまけ情報: ざまりん • 神奈川県座間市を PR する ためにがんばっている妖精 のマスコットキャラクター • 所定の手続きで誰でも営 利・非営利目的関わらず無 料で使える • 「ざまりんの使い方」で プロ生でも記事で紹介
  45. 45. 大前提 • 目標・目的: ○○できるアプリが作りたい (iOS/Android で○○したい) • ゴールさえすれば過程は何でもいい
  46. 46. Xamarin を選ぶ唯一のポイント 絶対に C# で開発したい
  47. 47. だいたいトレードオフ • Xamarin の言われているメリット的なところ –クロスプラットフォーム –ネイティブ UI/API/パフォーマンス –Visual Studio + .NET クラスライブラリ –オープンソース(部分的に)
  48. 48. C#/Xamarin を使うということ • Microsoft 製 3rd パーティー開発環境 C# Swift /Objective-C Java Visual Studio /Xamarin Studio HockeyApp, .. Xcode Android Studio Firebase, .. 3rd ライブラリ3rd ライブラリ
  49. 49. C#/Xamarin を使うということ • iOS/Android の機能はすべて網羅 –タイムラグはある(iOS 新機能は同日サポート) • 競合するようなサービスやライブラリも存在 • 多くのサービスやライブラリは iOS/Android 用 –Xamarin 対応は少ない –頑張れば利用可能(バインディング作業)
  50. 50. Xamarin で iOS/Android アプリを作る
  51. 51. Xamarin.* • Xamarin.iOS –iOS アプリが作れる • Xamarin.Android –Android アプリが作れる • Xamarin.Forms –Forms アプリが作れない –iOS/Android/UWP アプリを同じコードで作れる (ということになっている)
  52. 52. Xamarin.iOS/Android でクロスプラットフォーム開発 普通に作ると iOS プロジェクト .NET ライブラリ プロジェクト Android プロジェクト 共通のロジックや データ 画面/UI 画面遷移 OS 固有機能の処理 画像/リソース 参照
  53. 53. Xamarin.iOS/Android でクロスプラットフォーム開発 ライブラリ活用 iOS プロジェクト .NET ライブラリ プロジェクト Android プロジェクト 共通のロジック・データ 画面遷移 OS の機能呼び出し 画面/UI OS 固有機能の処理 画像/リソース 参照
  54. 54. Xamarin.Forms でクロスプラットフォーム開発 iOS プロジェクト Forms プロジェクト Android プロジェクト 画面/UI ロジック・データ 画面遷移 OS の機能呼び出し 画像/リソース
  55. 55. Xamarin.Forms • UI も含めた iOS/Android/UWP クロスプラットフォーム開発環境 –DSL に近い印象 –現実は各プラットフォームごとに Forms 用の コードを書く必要多々あり –発展途上・バグあり・結果に妥協&妥協も必要
  56. 56. オマケ情報: MVVM で開発 • MVVM: イケてる開発ができる設計/実装方法 • イケてるライブラリを導入 ← イケてない –MvvmCross –ReactiveUI –MVVM Light –Prism (Xamarin.Forms 用)
  57. 57. Xamarin.iOS/Android でアプリを作る
  58. 58. Demo 1 • プロジェクト新規作成 • ソリューション構成 –.NET クラスライブラリ プロジェクト(コードなし) –Xamarin.Android プロジェクト サンプルコードあり –Xamarin.iOS プロジェクト サンプルコードあり
  59. 59. Q. はじめて作りたかったアプリは?
  60. 60. A. スクリーンセーバー
  61. 61. テキストがくるくるまわる スクリーンセーバーっぽいものを作る
  62. 62. Xamarin で 2D/3D 描画 • CocosSharp –Cocos2D • MonoGame • UrhoSharp –Urho3D
  63. 63. Demo2: UrhoSharp • 先ほどのプロジェクトを修正 –NuGet でインストール –.NET クラスライブラリに Application クラスを継承したクラス作成 (UrhoSharp のクラス) –iOS/Android プロジェクトから Application クラスを生成して画面を呼び出し
  64. 64. Q. Unity でいいんじゃ? • A1. いいと思う • A2. 1画面だけ 3D というのもできる
  65. 65. Demo3: OS 固有の機能を使う • カメラ & バーコードリーダー Demo • iOS 固有のクラスを C# で使える
  66. 66. Xamarin でアプリ開発した感想
  67. 67. Xamarin.Forms • デモ程度のアプリは Forms でできる • 業務で求められるアプリは厳しい –途中から Xamarin.iOS/Android に移行は ほぼすべてのコードを捨てる
  68. 68. Xamarin.iOS/Android • 困ったときは iOS/Android 情報がそのまま役立つ – 同じAPI・クラスがある(ちょっと思想が違う場合もある、古 い Xamarin 情報があることも) • Material Design や iOS ガイドラインに準じることも できる(Forms に比べ自由度が高い) • 結構クリティカルな Xamarin バグに遭遇することも – ブレークポイントで止まらない – 例外発生場所が不明など
  69. 69. Xamarin.iOS/Android + MvvmCross • ViewModel/Model で多くを共通化できた –ただし iOS/Android で 画面/UI が異なり 片方でしか使わない ViewModel もできがち –見た目にこだわると View 側の実装が肥大に • MvvmCross –重い。起動時、View 生成時いろいろしすぎ? –不具合箇所がわかりづらくなることが あってデバッグしづらい –Binding を文字列で書くと保守性がさがる
  70. 70. その他 • サーバー側のアプリも Model 共通利用できた
  71. 71. まとめ • Xamarin の選択のポイント –C# で開発に価値があるかどうか • Xamarin でクロスプラットフォーム開発 –Xamarin.iOS/Android と Forms • Xamarin でアプリ開発 –Xmarin.iOS/Android を紹介
  72. 72. アプリができたら
  73. 73. とその前に、ロゴの作成 • ロゴを作ってみるのもいいかも • 500円から作ってくれるひとも –ココナラ、その他クラウドソーシング系
  74. 74. アプリを広める • Web サイト等で紹介 • プレスリリース • その他いろいろ
  75. 75. Web サイト・Blog・ツイートなど • 公式の情報元を作る –Web サイトや Blog、ツイートでも OK • 紹介されやすくする –サイトにツイートボタンなどを設置 –ツイートはプロフィールに固定 –ツイートする時間・回数を工夫
  76. 76. プレスリリース(ニュースリリース) • Web メディアに連絡する – 窓の杜 – GIGAZINE – スマホレビューサイトなど • 紹介文、スクリーンショット、 ロゴ画像などすぐ使えるものを提供する • 連絡する時間を工夫する • 紹介されなくても気を落とさない
  77. 77. その他いろいろ • コンテストに応募 –コンテスト用バージョンを作るのもアリ • キャラ運営に直接連絡 • 素材の提供 –SNS 用アイコンなど
  78. 78. 楽しいアプリを作ってみてね! そして教えてね!
  79. 79. ご清聴ありがとうございました マスコットアプリ(キャラアプリ)開発 with Xamarin jz5 プロ生勉強会 第45回@名古屋 2016/11/26 プロ生ちゃん LINE スタンプ販売中!

×