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