20200210のAndroidに関する記事は8件です。

投稿日：2020-02-10T23:12:16+09:00

今からスマホアプリの学習をしようとしてる人に向けて！

1. はじめに

私は新卒でITベンチャーに入社して、現在スマホアプリのフロントエンドエンジニア(※以下アプリのフロント)として、
Android、iOS共に、主にECアプリなどを開発しております。
そんな私がスマホアプリの学習をしようか検討中の方に向けて、「アプリのフロントはこんな感じ」というのを共有させていただければと思い記事にしました。

2. スマホ開発の仕事はある？

学習するか悩んでる言語がある方の多くは、「その言語を学んでも仕事が無いんじゃ意味がない」と思っている方だと思います。
確かに「仕事がない」=「必要とされていない」と言っていいと思うので、これから学習する言語は仕事が多く取れる言語が良いですよね。
その点、スマホのエンジニアは仕事があると私は胸を張って言えます。
これは「勤めている会社の中で仕事があるから」「自分がやっているから」というだけが理由ではありません。
私は趣味で英語の勉強会に行くのですが、その際職業の話になりアプリを作っていることを話すと、
結構な確率で「こういうサービスを考えているんだけど…」と相談されます。
今、何かサービスを作って流行らせようとする人は「アプリを作ろう」と考える人が多いと思います。
一昔前Webサイトのエンジニアが引っ張り凧だったように、アプリもサービスの入り口として考える人が多くなった今では、比較的仕事は取りやすくなっていると言えると思います。

3. 将来性は？

いきなりマイナスな事を言いますが、近い将来アプリの言語が衰退するのは間違いないと思います。
その将来が何年後になるかは分かりませんが、スマホがもの凄い勢いで発展したように、
スマートグラスなのか、スマートウォッチなのかは分かりませんが、次のハードが進化した時、
必ずスマホ周りの言語も衰退します。
ただこれはどんな言語もほぼ同じなので、月並ですが、日々情報を追っていくしか無いと言えるでしょう。

4. 学習コストは？　Python、Ruby、C++と比べたら？

4-1) 難しさのレベルは？

私が学習したことのある言語で具体的にアプリ等を最後まで作ったことのある言語は、
Swift、Kotlin、Java、 JavaScript、GAS、Python、Ruby、C#(Unity)、C++です。
これらを実際に学習してみて、アプリのフロントで主に扱う言語のSwift、Kotlin、Java Script (React-Nativeなど)、C# (Unity)の学習コストを比較して考えてみると…
中くらいのレベルの難しさ、と僕は言いたいです。

複数の言語を学習したことがある方ならお分かりいただけると思うのですが、
基本文法の学習コストはどれもそんなに変わりません。個々の好みの範囲と言えると思います。
現によくRubyやPythonは学習コストの低い言語として取り上げられますが、僕はあまりそう思いません。

4-2) 学習コストの差

では学習コストで生まれる差は何か？
それは何に使うかです。Pythonなら機械学習など、RubyならWebアプリ作成など、C++ならPCのリソースに関わるプログラムの作成…などなどです。
ではアプリのフロントで使用する言語では？
当然スマホのアプリを書くためです。
他の言語と比較して目的がはっきりしている分、学習者が突っかかる問題も同じ事が多いです。
そのためネットでエラーを検索するとその解決法は他の言語に比べ見つけやすいです。
初学者にとって入門しやすいと私は思います。

4-3) アプリのフロントならではの難しさ

ではなぜ「Swiftは簡単な言語」と、手放しでは言えないのか？
その主な理由はOSやハードウェアの進化にあります。
皆さんも日々生活されていて、新しいiPhoneのニュースなどはTVやYouTubeなどで、よく見かけると思います。
Androidも同様に日々革新的な進化をし続けています。
アプリのフロントはこれらを追い続けなければならないのです。
アプリのフロントの言語は初学者にとっては入門しやすいですが、どれだけ熟達しても学習が定期的に必要な言語と言えると思います。
これが私が簡単が言語とは言い難いと思う理由です。

5.クロスプラットフォーム？ネイティブ？

少し突っ込んだ話になります。
まず学ぶなら、React-Nativeなどのクロスプラットフォームがいいか、ネイティブがいいか？
私はネイティブをオススメします。
というのもクロスプラットフォームを使ってもどのみちXcodeやAndroid Studioの使い方を知る必要がありうるからです。
例えばReact-Nativeでアプリを書いた場合、iPhoneの実機でのデバッグはXcodeからビルドする必要があります。
また、アプリのアーカイブやライブラリの設定、証明書の設定などをする際も同様です。
せっかくアプリを書いたのに、そこから使ったことのないツールをまた一から学習するのは少しうんざりしますよね。
ですので、チュートリアル程度でいいのでSwiftとKotlinである程度学習してから、クロスプラットフォームを使用することをオススメします。

6.最後に

色々とごちゃごちゃ書きましたが、
私はアプリのフロントはとても楽しくやらしていただいております。
世の中から必要とされている実感がある、とてもやりがいのある仕事です。
この記事が少しでもスマホアプリのフロントエンドエンジニアになろうと思っている方のお役に立てたら、とても嬉しいです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T20:32:37+09:00

Flutter MessageChannel APIの使い方

はじめに

Flutter (Dart) とプラットフォーム (Android/iOSなど) 間の通信/呼び出しAPIについてまとめています。

MethodChannel

EventChannel

MessageChannel　←　今回

1. MessageChannelとは

プラットフォーム (Android/iOSなど) とFlutter (Dart) 間で双方向でメッセージ送受信するためのAPIであるMessageChannel (正確にはBasicMessageChannel) です。片方からもう片方にデータを送信し、受信したらリプライを返すというごく普通のメッセージパッシング用のAPIです。

Flutterの仕組み的には、ここで解説しているPlatform Channelsを利用しています。

2. 基本フロー

実際のコードの説明の前にAPIの基本的なフローについて解説します。
ただし、プラットフォーム毎に若干API名が異なる場合があるため (iOS) 、注意してください。

送信側

BasicMessageChannelでチャンネル生成

BasicMessageChannel#sendでデータ送信

受信側

BasicMessageChannel#MessageHandlerでイベントリスナーを登録

データ受信時に登録したイベントリスナーのBasicMessageChannel#MessageHandler#onMessageがコールバックされるため、その中でリプライデータを送信

Dart → プラットフォームへの送信

プラットフォーム → Dartへの送信

3. サンプルプロジェクト

実際のAPIの使い方は後述しますが、サンプルプロジェクトを以下に用意しています。そのまま動作確認可能ですので、参考にしてください。
ただし、正式に何かの機能を実装する場合にはプラグインの形で組み込んだ方が良いです。
https://github.com/Kurun-pan/flutter-messagechannel-example

4. Flutter + Android (Kotlin) のコード解説

4.1 Dart側の実装

通信チャンネル作成

MethodChannel同様、BasicMessageChannelの通信チャンネルを作成します。
API仕様
BasicMessageChannel(String name, MessageCodec<T> codec, {BinaryMessenger binaryMessenger})
第1引数には、指定する文字列は他のアプリケーションと被らず、一意に決まるようにするために慣例で"アプリパッケージ名/チャンネル名"とするのが一般的な様子です。

第2引数は送信データのコーデックタイプを指定します。Frameworkの内部的にはバイナリデータとして扱われるため、その情報を指定する必要があります。

タイプ内容

BinaryCodec ByteDataのデータ送信時

JSONMessageCodec JSON形式のデータ送信時

StandardMessageCodec 通常はこちらを利用(プリミティブ型)

StringCodec Stringデータを送信時

なお、サンプルプロジェクト↓ではJSONMessageCodecを利用したデータ送信の例をコメントアウトした形で残していますので、参考にしてください。
https://github.com/Kurun-pan/flutter-messagechannel-example/blob/master/lib/main.dart

データ送信

BasicMessageChannel#sendでデータ送信
API仕様
Future<T> send(T message) async {
  return codec.decodeMessage(await binaryMessenger.send(name, codec.encodeMessage(message)));
}
サンプルコード

サンプルコードは、Dart側からプラットフォーム側に文字列 (String型) を送信＆リプライ受信と、プラットフォーム側からのメッセージ受信＆リプライ送信の双方向の内容を盛り込んでいます。
Dartサンプルコード
class _MyHomePageState extends State<MyHomePage> {
  static const _channel = BasicMessageChannel('com.example.messagechannel/interop', StringCodec());

  String _platformMessage;

  void _sendMessage() async {
    final String reply = await _channel.send('Hello World form Dart');
    print(reply);
  }

  @override
  initState() {
    super.initState();

    // Receive messages from platform
    _channel.setMessageHandler((String message) async {
      print('Received message = $message');
      setState(() => _platformMessage = message);
      return 'Reply from Dart';
    });

    // Send message to platform
    _sendMessage();
  }
4.2 プラットフォーム側の実装

通信チャンネル作成

BasicMessageChannelの通信チャンネルを作成します。
API仕様
BasicMessageChannel(BinaryMessenger messenger, String name, MessageCodec<T> codec)
第3引数にはString型のデータ送信時にはStringCodec.INSTANCEを指定します。StringCodecのstaticインスタンスになり、ソースコードを見てもらった方が早いです。

受信待機

BasicMessageChannel#setMessageHandlerでイベントリスナーを登録します。

リプライ送信

データ受信時に登録したイベントリスナーのBasicMessageChannel#MessageHandler#onMessageがコールバックされるため、その中でリプライデータを送信します。

サンプルコード

サンプルコードは、プラットフォーム側からプラットフォーム側に文字列 (String型) を送信＆リプライ受信と、Dart側からのメッセージ受信＆リプライ送信の双方向の内容を盛り込んでいます。
Kotlinサンプルコード
class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)

        val channel = BasicMessageChannel(
                flutterEngine.dartExecutor.binaryMessenger,
                "com.example.messagechannel/interop",
                StringCodec.INSTANCE)

        // Receive messages from Dart
        channel.setMessageHandler { message, reply ->
            Log.d("Android", "Received message = $message")
            reply.reply("Reply from Android")
        }

        // Send message to Dart
        Handler().postDelayed({
            channel.send("Hello World from Android") { reply ->
                Log.d("Android", "$reply")
            }
        }, 500)
    }
}

タイプ	内容
BinaryCodec	ByteDataのデータ送信時
JSONMessageCodec	JSON形式のデータ送信時
StandardMessageCodec	通常はこちらを利用(プリミティブ型)
StringCodec	Stringデータを送信時

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T16:46:52+09:00

51歳から（現52）のプログラミング Android Toolbar (アプリBar)

Toolbar表示まで

androidx

manifest build.gradle dependencies implementationは、androidxのappcompatであることを確認ね
dependencies{
   ...
   implementation 'androidx.appcompat:appcompat:1.1.0'
   ...
}
AppCompatActivityを拡張
public class MyActivity extends AppCompatActivity{
}
manifestでNoActionBarテーマを設定

以下はandroidx未満の説明。androidxでの扱いが不明だったので、一応呪文として書いておく。

manifestの要素でappcompatのNoActionBarテーマの何れかを使用するように設定すると、ネイティブのActionBarでアプリバーが使えなる、とリファレンスに書いてある。
<application
   android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
Toolbarをレイアウトに追加

ConstraintLayoutだとToolbarをparentに関連付けないとエラーになるので注意
<androidx.appcompat.widget.Toolbar
   android:id="@+id/myToolbar"
   android:layout_width ="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background   ="?attr/colorPrimary"
   android:elevation    ="4dp"
   android:theme ="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@sytle/ThemeOverlay.AppCompat.Light"/>

   // attr　適用してるテーマに定義されてる値を参照
   // elevation　UIの高さ。影をつける
   // popup　ポップアップ
setSupportActionBar()にToolbarを渡す（ToolBar表示）
@Override
protected void onCreate(Bundle savedInstanceState){
   super.onCreate(SavedInstanceState);
   setContentView(R.layout.activity);

   Toolbar myToolbar = (Toolbar) findViewById(R.id.myToolbar);
   setSupportActionBar(myToolbar);
}

   // setSupportActionBar AppCompatActivityのmethod
ToolBarアクションの追加

アプリバーの余白にアクションを表示させ、余白がなくなればオーバーフローメニューに格納する。オーバーフローメニューのみを使うように設定できる。

menu.xmlの作成

res/menu/menu.xml
res直下にmenuディレクトリを作成し、menu.xmlを作成して配置する。
res/menu/menu.xml
<menu xmlns:andoid="http://schemas.android.com/apk/res/android">

   
   
   <item
      android:id="@+id/action_favorite"
      android:icon="drawable/ic_favorite"
      android:title="お好み"
      app:showAsAction="ifRoom"/>

   
   <item
      android:id="@+id/action_settings"
      android:title="アクション"
      app:showAsAction="never"/>

</menu>

      // showAsAction
      //    action ItemをAppBarに表示する、タイミング、方法を指定
      //    ifRoon スペースがある限りAppBar内に表示
      //           スペースがないとき、orderInCategory値が小さいアイテムからactionとして表示される
      //           残りはOverFlowMenuに格納
      //    never  AppBar内には配置せず、OverFlowMenu内にアイテムをリスト表示
      //    その他　withText / always / collapseActionView
Action追加

AplBarのアイテムを選択する　->　Activityの onOptionsItemSelected() コールバックメソッドに、MenuItemオブジェクトを渡す -> 選択してアイテムを表示

onOptionsItemSelected()の実装では、MenuItem.getItemId()メソッドを呼び出して、選択アイテムを判別する。返されるIDはandroid:id属性の値。
Activity.java
@Override
public boolean onCreateOptionsMenu(Menu menu){
   getMenuInflater().Inflate(R.menu.menu,menu);
   // res の menuディレクトリのmenu.xml を ,menuに設定してインフレートする
   return true;
}

@Override 
public boolean onOptonsItemSelected(MenuItem item){
   switch(item.getItemId()){
      case R.id.action_settings:
         return true;
      case R.id.action_favorite:
         return true;
      default:
         return super.onOptionsItemSelected(item);
   }     
}
アップアクション（MainActivityに戻るアクション）

MainActivity以外のActivityのアプリバーに、アップボタンを表示させる。ユーザはアップボタンを選択するだけでMainActivityに移動できる。

manifestで親Activityを宣言し、AppBarのアップボタンを有効にする。

Manifest 親子Activityを宣言

android:parentActivityName属性はAndroid4.1（API16）で導入。
旧バージョンのAndroidディバイスでするならの名前と値のペアを定義する。ここで、Nameは、"android.support.PARENT_ACTIVITY"、値は親ActivityのName。

以下は、MainActivityと子Activityで親子関係を指定する例。
manifest.java
<application ...>
   ...
   
   <activity
      android:name="com.oldcat.sample.MainActivity"
      ...>
   </activity>

   
   <activity
      android:name="com.oldcat.sample.ChildActivity"
      android:label="ChildTitle"
      android:parentActivityName="com.oldcat.sample.MainActivity"
      >

      
      <meta-data
         android:name="android.support.PARENT_ACTIVITY"
         android:value="com.oldcat.sample.MainActivity"
         />
   </activity>
</application>
アップボタンを有効にする

getSupportActinBar() で AppBarのユーティリティメソッドの setDisplayHomeAsUpEnabled()を呼び出してアップボタンを有効にする。

通常、子Activityの作成時に、onCreate()でToolbarを設定して、アップボタンを設定する。
MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState){
   super.onCreate(savedInstanceState);
   setContentView(R.layout.ChildActivity);

   Toolbar childToolbar = (Toolbar) findViewById(R.id.ChildToolbar);
   setSupportActionBar(ChildToolbar);

   ActionBar actionbar  = getSupportActionBar();
   actionbar.setDisplayHomeAsUpEnabled(true);
}
setDisplayHomeAsUpEnabled(true) を使えば onOptionItemSelected()でキャッチしなくても親Activityに移動できる。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T16:46:52+09:00

51歳から（現52）のプログラミング備忘 Android Toolbar (アプリBar)

Toolbar

Toolbarを使ってonOptionsItemSelected()をactivity毎に記載する方法と、Fragmentを使ってonOptionsItemSelected()する方法について。

Fragment不使用

Toolbar表示まで

androidx

manifest build.gradle dependencies implementationは、androidxのappcompatであることを確認ね

dependencies{
   ...
   implementation 'androidx.appcompat:appcompat:1.1.0'
   ...
}

AppCompatActivityを拡張

public class MyActivity extends AppCompatActivity{
}

manifestでNoActionBarテーマを設定

以下はandroidx未満の説明。androidxでの扱いが不明だったので、一応呪文として書いておく。

manifestの要素でappcompatのNoActionBarテーマの何れかを使用するように設定すると、ネイティブのActionBarでアプリバーが使えなる、とリファレンスに書いてある。

<application
   android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

Toolbarをレイアウトに追加

ConstraintLayoutだとToolbarをparentに関連付けないとエラーになるので注意

<androidx.appcompat.widget.Toolbar
   android:id="@+id/myToolbar"
   android:layout_width ="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background   ="?attr/colorPrimary"
   android:elevation    ="4dp"
   android:theme ="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@sytle/ThemeOverlay.AppCompat.Light"/>

   // attr　適用してるテーマに定義されてる値を参照
   // elevation　UIの高さ。影をつける
   // popup　ポップアップ

setSupportActionBar()にToolbarを渡す（ToolBar表示）

@Override
protected void onCreate(Bundle savedInstanceState){
   super.onCreate(SavedInstanceState);
   setContentView(R.layout.activity);

   Toolbar myToolbar = (Toolbar) findViewById(R.id.myToolbar);
   setSupportActionBar(myToolbar);
}

   // setSupportActionBar AppCompatActivityのmethod

ToolBarアクションの追加

アプリバーの余白にアクションを表示させ、余白がなくなればオーバーフローメニューに格納する。オーバーフローメニューのみを使うように設定できる。

menu.xmlの作成

res/menu/menu.xml
res直下にmenuディレクトリを作成し、menu.xmlを作成して配置する。

res/menu/menu.xml

<menu xmlns:andoid="http://schemas.android.com/apk/res/android">

   <!-- 以下は、"お好みのアクション"の登録 -->
   <!-- OverFlowMenuに余白があれば、action Buttonを表示 -->
   <item
      android:id="@+id/action_favorite"
      android:icon="drawable/ic_favorite"
      android:title="お好み"
      app:showAsAction="ifRoom"/>

   <!-- 下はOverFlowMenuに登録 -->
   <item
      android:id="@+id/action_settings"
      android:title="アクション"
      app:showAsAction="never"/>

</menu>

      // showAsAction
      //    action ItemをAppBarに表示する、タイミング、方法を指定
      //    ifRoon スペースがある限りAppBar内に表示
      //           スペースがないとき、orderInCategory値が小さいアイテムからactionとして表示される
      //           残りはOverFlowMenuに格納
      //    never  AppBar内には配置せず、OverFlowMenu内にアイテムをリスト表示
      //    その他　withText / always / collapseActionView

Action追加

AplBarのアイテムを選択する　->　Activityの onOptionsItemSelected() コールバックメソッドに、MenuItemオブジェクトを渡す -> 選択してアイテムを表示

onOptionsItemSelected()の実装では、MenuItem.getItemId()メソッドを呼び出して、選択アイテムを判別する。返されるIDはandroid:id属性の値。

Activity.java

@Override
public boolean onCreateOptionsMenu(Menu menu){
   getMenuInflater().inflate(R.menu.menu,menu);
   // res の menuディレクトリのmenu.xml を ,menuに設定してインフレートする
   return true;
}

@Override 
public boolean onOptonsItemSelected(MenuItem item){
   switch(item.getItemId()){
      case R.id.action_settings:
         return true;
      case R.id.action_favorite:
         return true;
      default:
         return super.onOptionsItemSelected(item);
   }     
}

アップアクション（MainActivityに戻るアクション）

MainActivity以外のActivityのアプリバーに、アップボタンを表示させる。ユーザはアップボタンを選択するだけでMainActivityに移動できる。

manifestで親Activityを宣言し、AppBarのアップボタンを有効にする。

Manifest 親子Activityを宣言

android:parentActivityName属性はAndroid4.1（API16）で導入。
旧バージョンのAndroidディバイスでするならの名前と値のペアを定義する。ここで、Nameは、"android.support.PARENT_ACTIVITY"、値は親ActivityのName。

以下は、MainActivityと子Activityで親子関係を指定する例。

manifest.java

<application ...>
   ...
   <!-- MainActicity(親Activityを持たない） -->
   <activity
      android:name="com.oldcat.sample.MainActivity"
      ...>
   </activity>

   <!-- MainActivityの子 -->
   <activity
      android:name="com.oldcat.sample.ChildActivity"
      android:label="ChildTitle"
      android:parentActivityName="com.oldcat.sample.MainActivity"
      >

      <!-- support4.0以下では <meta-data>で親子を指定する -->
      <meta-data
         android:name="android.support.PARENT_ACTIVITY"
         android:value="com.oldcat.sample.MainActivity"
         />
   </activity>
</application>

アップボタンを有効にする

getSupportActinBar() で AppBarのユーティリティメソッドの setDisplayHomeAsUpEnabled()を呼び出してアップボタンを有効にする。

通常、子Activityの作成時に、onCreate()でToolbarを設定して、アップボタンを設定する。

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState){
   super.onCreate(savedInstanceState);
   setContentView(R.layout.ChildActivity);

   Toolbar childToolbar = (Toolbar) findViewById(R.id.ChildToolbar);
   setSupportActionBar(ChildToolbar);

   ActionBar actionbar  = getSupportActionBar();
   actionbar.setDisplayHomeAsUpEnabled(true);
}

setDisplayHomeAsUpEnabled(true) を使えば onOptionItemSelected()でキャッチしなくても親Activityに移動できる。

Fragment利用

流れ

MainActivity.onCreate() -> activity_main.xml/<fragment> -> Fragment_Toolbar.onCreateView -> fragment_toolbar.xml

AndroidManifest.xml

<application
    ...
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // <- レイアウト(activity_main.xml)を呼ぶ
    }
}

activity_main.xml

<fragment
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:id="@+id/fragmentArea"
   class="(packegeName).Fragment_Toolbar" // <- Fragment_Toolbar.classを呼ぶ
   />

Fragment_Toolbar.java

public class Fragment_Toolbar extends Fragment{
   @Override 
   public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){

   AppCompatActivity activity = (AppCompatActivity) getActivity();
   View view = inflater.inflate(R.layout.fragment_toolbar,container.false);// <- レイアウト(fragment_toolbar)を呼びだしてインフレート！
   Toolbar toolbar = view.findViewById(R.id.toolbar);
   activity.setSupportActionBar(toolbar); // <- Toolbarをセット
   setHasOptionsMenu(true); // menuを使えるようにする
   return view;
   }

   // ToolbarにMenuを搭載する
   @Override 
   public void onCreateOptionsMenu(Menu menu,MenuInflater inflater){
      super.onCreateOptionsMenu(menu,inflater);
      inflater.inflate(R.menu.overflow_menu01,menu); // res/menu/overflow_menu01.xmlをToolbarにインフレート！
   }

   // Menu選択の分岐処理
   @Override 
   public boolean onOptionsItemSelected(MenuItem item){
      retun super.onOptionsItemSelected(item)
      switch(item.getItemId()){
         case R.id.menu01:
            return true;
         case R.id.menu02:
            return true;
         default
            return super.onOptionsItemSelected(item);
      }
   }
}

fragment_toolbar.xml

<androidx.appcompat.widget.Toolbar
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="#aaa"
   android:id="@+id/toolbar"
   />

res/menu/overflow_menu01.xml

overflow_menu01.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:title="MENU01"
      android:id="@+id/menu01"
      app:showAsAction="never"
      />

   <item
      android:title="MENU02"
      android:id="@+id/menu02"
      app:showAsActoion="never"
      />
</menu>

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T15:40:02+09:00

Uno Platform 入門 2 : 環境構築をしよう

いよいよ Uno Platform の開発環境を整えてみましょう。 Uno Platform はクロスプラットフォーム開発環境なので、それぞれの環境で動くように、多少揃える必要のある環境があります。
この記事では、ちゃんとそれぞれが動くか一歩一歩動作確認しながら進めていきます。

この記事のゴール：

Xamarin.Forms ハローワールド (環境構築 && 実行)

Uno Platform ハローワールド (環境構築 && 実行)

ASP.NET Core ハローワールド (環境構築 && 実行)

参考記事：

前回の記事：『Uno Platform 入門 1 : Uno Platform とは？～ C# で iOS, Android, Web, Windows 10 アプリを一気にクロスプラットフォーム開発～』

(英語) 『Using Uno - getting started / Setting up the environment』 - Uno Platform 公式ドキュメント

前回のあらすじ

前回の記事では、Uno Platform についてをお話ししました。

Uno Platform を使えば、UWP 向けにコードを書く (C# + XAML) だけで

Windows 10 アプリ (UWP)

iOS アプリ

Android アプリ

Web アプリ（WebAssembly）

がクロスプラットフォーム開発 (= 複数プラットフォーム間でソースコードを共通化しながら開発)!
できるということでしたね。

そして、iOS, Android 向けアプリビルドのためには、下で Xamarin が使われている、というところまでお話ししました。

(上のアーキテクト図は公式サイトより)

必要な環境（機材編）

Windows 10 マシン

iOS アプリも作る場合は、ビルド用に Mac も必要です。（iOS アプリを作るには Xcode が必要で、Xcode は macOS 上でしか動かないので）（Mac マシンを用意するのが難しい場合は、クラウド上でビルド用に Mac を動かすサービスもあるので探してみてください）

必要な環境（開発環境編）

上の「Uno Platform の仕組み」の図を見て察せられるとおり、
Uno Platform を使い 4 プラットフォームでアプリを実行させるには、
以下の環境が最低必要なことが分かります：

Xamarin ：.NET でのモバイルアプリ開発環境

ASP.NET ：.NET での .Web アプリ開発環境

当然 UWP アプリ開発環境： .NET での Windows 10 アプリ開発

これらの環境を整えましょう。(Visual Studio インストーラーでチェック入れるだけで入るのでとても簡単です)

参考：

Xamarin ドキュメント - Microsoft 公式ドキュメント

ASP.NET のドキュメント - Microsoft 公式ドキュメント

UWP: Windows 10 アプリの概要 - Microsoft 公式ドキュメント

Windows 10 + Visual Studio 2019

Windows 10 で、Visual Studio 2019 を使いましょう。

（一応公式ドキュメントでは VS 2017 15.5 以降となっていますが、2019 の方が良いです）

VS2019 入れてない人は入れてください。個人開発者の方は Community 版は無料です。

VS2019 既に入れている人は Visual Studio Installer を開いてください。
Windows ボタンを押して Windows のスタートメニューでタイプしたら出てきます。

開いたら「編集 (Modify)」をクリックしてください。

（スクショについて：私は英語の勉強のために英語表記にしていますが、インストール時に日本語を指定していたら日本語で表示されていると思います）

そこから、以下の３つにチェックを入れてください。

『ユニバーサル Windows プラットフォーム開発』

『.NET によるモバイル開発』(Xamarin)

『ASP.NET と Web 開発』

環境チェック

Uno Platform やる前に、
まずちゃんとそれぞれの環境が正しく入っているかのチェックをするのをお勧めします。

環境チェック01：ASP.NET アプリを動かしてみる (まだ Uno 始まってないよ)

最初に、ASP.NET の環境がちゃんと入っているかどうかのチェックがてら
ハローワールド Web アプリの実行をローカルでしてみましょう。

参考：チュートリアル: ASP.NET Core の Razor ページの概要 - Microsoft 公式ドキュメント

Visual Studio 2019 を起動して「新しいプロジェクトの作成」をクリックします。

検索欄に「asp」
言語絞り込みで「C#」と入れてください。

(* ゜▽゜ * っ)З「あれ？なんか ASP.NET のテンプレート 2 つ出てきたの何なの？」

上が .NET Core ベース（新しい）、
下が .NET Framework ベース（古い）のものです。

今回は上を選びます。

そして「Web アプリケーション」を選択して進めてください。

しばらく待つとプロジェクトが展開されます。(私 (Core i7, RAM 16 GB) は 5秒くらいだった)

コードをいじらないまま、
上のメニューバーの
「デバッグ (Debug)」→「デバッグ無しで開始 (Start Without Debugging)」
で実行してみましょう。

すると 2 つほど SSL 証明書関係のポップアップが出てくるので、
全部 Yes で。

するとめでたく ASP.NET Core 製のアプリが立ち上がります。

これを見届けたら OK !

(* ゜▽゜ * っ)З「これで ASP.NET の開発環境は整っているという理解でいいわね」

安心したところで、このプロジェクトは閉じます

環境チェック02：Xamarin.Forms アプリを動かしてみる (まだ Uno 始まってないよ)

これやります： Build your first Xamarin.Forms App - Microsoft 公式ドキュメント

さっきの ASP.NET プロジェクトを閉じた後、
また VS2019 で「新しいプロジェクトの作成」をクリックします。

検索欄で「Xamarin.Forms」と入れて進みます。

次の画面で、
テンプレートは Blank (空白/空っぽ)、
ターゲットプラットフォームは、ビルドマシンの Mac に繋げていない場合は iOS をチェック外します。
私は Android と Windows に入れました。

OK を押してしばらく待ちます。（私は 10 秒くらいだった）

下記 3 つのプロジェクトが生成されます。

App1 （共通コード。一番多くコードが入る）

App1.Android （Android 特有記述コードが入る）

App1.UWP (Universal Windows) （Windows 10 用の特有コードが入る）

最初は UWP プロジェクトがスタートアッププロジェクトに設定されているので、
UWP アプリを実行してみようとします。

Windows 10 を開発者モードに

でもその前に、
今あなたが使っているマシンの Windows 10 を「開発者モード」にする必要があります。

(参考：デバイスを開発用に有効にする - Microsoft 公式ドキュメント)

Windows の設定を開いて、
「更新とセキュリティ」→「開発者向け」を選択し
「開発者モード」を選択してください。

するとポップアップが出てきますが OK でお願いします。

UWP 実行

Visual Studio 2019 に戻り、
またデバッグ無しで実行します

(* ゜▽゜ * っ)З「これで Xamarin.Forms の UWP 環境が正しく入ったことが確認できたね！　次は Android で動くか確認してみよう！」

Android プロジェクト実行

Android プロジェクトをスタートアッププロジェクトに設定します。
（右クリックから選ぶ）

実機ではなく Android エミュレータで実行する場合、
まずエミュレータの設定をする必要があります。

実行ボタンの右のドロップダウンから「Create Android Emulator」(Android エミュレータの作成) をクリックします

作成 Android 機エミュレータのスペック, OS, API バージョンの設定画面になります。何 GB メモリを割り当てるかとか。
デフォルトのまま作成します

そして VS2019 に戻り、
実行ボタンが先ほど作成した Android エミュレータになっているのを確認します。
（もしエミュレータではなく実機を繋いでいる人は、実機の名前が表示されているはず）

これを押して実行します

実行できましたね！

(* ゜▽゜ * っ)З「これで Xamarin の環境が (UWP, Android ともに) 正しく入ったことが確認できたね！さて、次はいよいよ Uno Platform だ！長かったなあ」

ついに Uno Platform 導入

Visual Studio 2019 をいったん閉じて、また起動します。

「Continue without code (コード無しで開く)」で VS2019 を開いて
上のメニューの「拡張機能」→「拡張機能の管理」を開きます

左のサイドメニューで「オンライン」を選択し
右上の検索ボックスで「uno platform」を入力します。

そして出てきた「Uno Platform Solution Templates」をダウンロードします。

ダウンロードが終わったら VS2019 を閉じます。するとインストールが始まるので、終わったらまた開きます

Uno Platform ハローワールド

VS2019 を起動して「新しいプロジェクトの作成」をクリックします。

するとプロジェクト選択画面になるので
検索ボックスに「uno platform」と入れて絞り込み、
Cross-Platform App (Uno Platform) を選択して開きます。

アプリの名前は「MyFirstUnoApp」とか適当に入力して
「Create (作成)」をクリックします

そして出てきたプロジェクトが立ち上がります。

生えた 5 つのプロジェクト

上から

MyFirstUnoApp.Droid

MyFirstUnoApp.iOS

MyFirstUnoApp.Shared

MyFirstUnoApp.UWP (Universal Windows)

MyFirstUnoApp.Wasm

の 5 つのプロジェクトが出来上がっています。
それぞれ、

.Droid → Android 用のビルドを行うプロジェクト。Android 固有の API を叩くコードを書く。デフォルトではこれがスタートアッププロジェクトに設定されているので、このまま「実行」すると、Android アプリが実行される

.iOS → iOS 用のビルドを行うプロジェクト。

.Shared → メインプロジェクト。4 プラットフォーム共通のコードが全て入る。プラットフォーム間で美しく設計して共通化できていたら、ここに 9 割以上のコードが入ることになる

.UWP (Universal Windows) → UWP 用のビルドを行うプロジェクト。UWP 固有の API を叩くコード入れ

.Wasm → WebAssembly 用のビルドを行うプロジェクト。WebAssembly (Web アプリ) 固有の API を叩くコード入れ

実行してみる

コードは一切編集しないで、
まず実行してみましょう。

デフォルトでは Android プロジェクトがスタートアッププロジェクトに設定されています。
そのまま実行ボタンを押してみましょう。(F5 を押す)

Android エミュレータ (または繋いでいる実機) に
"Hello, World!"
と実行されたら成功です

(* ゜▽゜ * っ)З「おお！ Uno Platform ハローワールド完了！」

もし足りないバージョンの Windows SDK がある場合は入れる

私の場合、実行が成功する前、ここでアラートウィンドウが出ていました。
このサンプルアプリのターゲットバージョンが私の環境より古いらしく、どうやら必要な SDK が入っていないようです。

（というか Android アプリのビルドしてるのに足りない Windows SDK 聞かれるあたり Uno Platform いじってる感あって良い）

なので、ターゲットバージョンを上げるか、その指定されているバージョンの Windows SDK を入れるかとなります。私は SDK 入れることにしました。

このアラートの中の「install」リンクをクリックすると、Visual Studio Installer が立ち上がります。

2.8 GB かあ、結構食うなあ。まあそんなものだよね。
「インストール」を押します。

編集してみる

せっかくなので表示されている文字列を変更してみましょう。

Shared プロジェクトの MainPage.xaml を開きます。
これはアプリ実行時に最初に起動される画面の UI を記述しているファイルです。

これの 11 行目を少し編集してみましょう。

今これ
<TextBlock Text="Hello, world!" Margin="20" FontSize="30" />
↓ こうする
<TextBlock Text="ハロー Uno Platform！" Margin="20" FontSize="30" />
そして実行してみると
狙った通りに動きましたね！

参考資料

2020年3月1日(日) の技術書典で
3人で書いた技術本『牛めし警察で学ぶ Uno Platform』を頒布します！

Microsoft MVP のひらりんさん (@himarin269)、
Microsoft 社のエンジニアのかずきさん (@okazuki)
との 3 人で書きました！

参考記事： #技術書典 8 にて「牛めし警察で学ぶ Uno Platform」を頒布します！

こちらの本でも詳しく解説していきます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T15:40:02+09:00

Uno Platform 入門 2 : 環境構築をしよう！ Uno Platform ハローワールド

いよいよ Uno Platform の開発環境を整えてみましょう。 Uno Platform はクロスプラットフォーム開発環境なので、それぞれの環境で動くように、多少揃える必要のある環境があります。
この記事では、ちゃんとそれぞれが動くか一歩一歩動作確認しながら進めていきます。

この記事のゴール：

Xamarin.Forms ハローワールド (環境構築 && 実行)

ASP.NET Core ハローワールド (環境構築 && 実行)

Uno Platform ハローワールド (環境構築 && 実行)

参考記事：

前回の記事：『Uno Platform 入門 1 : Uno Platform とは？～ C# で iOS, Android, Web, Windows 10 アプリを一気にクロスプラットフォーム開発～』

(英語) 『Using Uno - getting started / Setting up the environment』 - Uno Platform 公式ドキュメント

告知：2020年 3月 1日 (日) に、私たち 3 人で書いた Uno Platform 本「牛めし警察で学ぶ Uno Platform」を、技術書典 (池袋) にて発売します！

前回のあらすじ

前回の記事では、Uno Platform についてをお話ししました。

Uno Platform を使えば、UWP 向けにコードを書く (C# + XAML) だけで

Windows 10 アプリ (UWP)

iOS アプリ

Android アプリ

Web アプリ（WebAssembly）

がクロスプラットフォーム開発 (= 複数プラットフォーム間でソースコードを共通化しながら開発)!
できるということでしたね。

そして、iOS, Android 向けアプリビルドのためには、下で Xamarin が使われている、というところまでお話ししました。

(上のアーキテクト図は公式サイトより)

必要な環境（機材編）

Windows 10 マシン

iOS アプリも作る場合は、ビルド用に Mac も必要です。（iOS アプリを作るには Xcode が必要で、Xcode は macOS 上でしか動かないので）（Mac マシンを用意するのが難しい場合は、クラウド上でビルド用に Mac を動かすサービスもあるので探してみてください）

必要な環境（開発環境編）

上の「Uno Platform の仕組み」の図を見て察せられるとおり、
Uno Platform を使い 4 プラットフォームでアプリを実行させるには、
以下の環境が最低必要なことが分かります：

Xamarin ：.NET でのモバイルアプリ開発環境

ASP.NET ：.NET での .Web アプリ開発環境

当然 UWP アプリ開発環境： .NET での Windows 10 アプリ開発

これらの環境を整えましょう。(Visual Studio インストーラーでチェック入れるだけで入るのでとても簡単です)

参考：

Xamarin ドキュメント - Microsoft 公式ドキュメント

ASP.NET のドキュメント - Microsoft 公式ドキュメント

UWP: Windows 10 アプリの概要 - Microsoft 公式ドキュメント

Windows 10 + Visual Studio 2019

Windows 10 で、Visual Studio 2019 を使いましょう。

（一応公式ドキュメントでは VS 2017 15.5 以降となっていますが、2019 の方が良いです）

VS2019 入れてない人は入れてください。個人開発者の方は Community 版は無料です。

VS2019 既に入れている人は Visual Studio Installer を開いてください。
Windows ボタンを押して Windows のスタートメニューでタイプしたら出てきます。

開いたら「編集 (Modify)」をクリックしてください。

（スクショについて：私は英語の勉強のために英語表記にしていますが、インストール時に日本語を指定していたら日本語で表示されていると思います）

そこから、以下の３つにチェックを入れてください。

『ユニバーサル Windows プラットフォーム開発』

『.NET によるモバイル開発』(Xamarin)

『ASP.NET と Web 開発』

環境チェック

Uno Platform やる前に、
まずちゃんとそれぞれの環境が正しく入っているかのチェックをするのをお勧めします。

環境チェック01：ASP.NET アプリを動かしてみる (まだ Uno 始まってないよ)

最初に、ASP.NET の環境がちゃんと入っているかどうかのチェックがてら
ハローワールド Web アプリの実行をローカルでしてみましょう。

参考：チュートリアル: ASP.NET Core の Razor ページの概要 - Microsoft 公式ドキュメント

Visual Studio 2019 を起動して「新しいプロジェクトの作成」をクリックします。

検索欄に「asp」
言語絞り込みで「C#」と入れてください。

(* ゜▽゜ * っ)З「あれ？なんか ASP.NET のテンプレート 2 つ出てきたの何なの？」

上が .NET Core ベース（新しい）、
下が .NET Framework ベース（古い）のものです。

今回は上を選びます。

そして「Web アプリケーション」を選択して進めてください。

しばらく待つとプロジェクトが展開されます。(私 (Core i7, RAM 16 GB) は 5秒くらいだった)

コードをいじらないまま、
上のメニューバーの
「デバッグ (Debug)」→「デバッグ無しで開始 (Start Without Debugging)」
で実行してみましょう。

すると 2 つほど SSL 証明書関係のポップアップが出てくるので、
全部 Yes で。

するとめでたく ASP.NET Core 製のアプリが立ち上がります。

これを見届けたら OK !

(* ゜▽゜ * っ)З「これで ASP.NET の開発環境は整っているという理解でいいわね」

安心したところで、このプロジェクトは閉じます

環境チェック02：Xamarin.Forms アプリを動かしてみる (まだ Uno 始まってないよ)

これやります： Build your first Xamarin.Forms App - Microsoft 公式ドキュメント

さっきの ASP.NET プロジェクトを閉じた後、
また VS2019 で「新しいプロジェクトの作成」をクリックします。

検索欄で「Xamarin.Forms」と入れて進みます。

次の画面で、
テンプレートは Blank (空白/空っぽ)、
ターゲットプラットフォームは、ビルドマシンの Mac に繋げていない場合は iOS をチェック外します。
私は Android と Windows に入れました。

OK を押してしばらく待ちます。（私は 10 秒くらいだった）

下記 3 つのプロジェクトが生成されます。

App1 （共通コード。一番多くコードが入る）

App1.Android （Android 特有記述コードが入る）

App1.UWP (Universal Windows) （Windows 10 用の特有コードが入る）

最初は UWP プロジェクトがスタートアッププロジェクトに設定されているので、
UWP アプリを実行してみようとします。

Windows 10 を開発者モードに

でもその前に、
今あなたが使っているマシンの Windows 10 を「開発者モード」にする必要があります。

(参考：デバイスを開発用に有効にする - Microsoft 公式ドキュメント)

Windows の設定を開いて、
「更新とセキュリティ」→「開発者向け」を選択し
「開発者モード」を選択してください。

するとポップアップが出てきますが OK でお願いします。

UWP 実行

Visual Studio 2019 に戻り、
またデバッグ無しで実行します

(* ゜▽゜ * っ)З「これで Xamarin.Forms の UWP 環境が正しく入ったことが確認できたね！　次は Android で動くか確認してみよう！」

Android プロジェクト実行

Android プロジェクトをスタートアッププロジェクトに設定します。
（右クリックから選ぶ）

実機ではなく Android エミュレータで実行する場合、
まずエミュレータの設定をする必要があります。

実行ボタンの右のドロップダウンから「Create Android Emulator」(Android エミュレータの作成) をクリックします

作成 Android 機エミュレータのスペック, OS, API バージョンの設定画面になります。何 GB メモリを割り当てるかとか。
デフォルトのまま作成します

そして VS2019 に戻り、
実行ボタンが先ほど作成した Android エミュレータになっているのを確認します。
（もしエミュレータではなく実機を繋いでいる人は、実機の名前が表示されているはず）

これを押して実行します

実行できましたね！

また、iOS アプリのビルドは、リモートで mac を繋いで、iOS プロジェクトをスタートアッププロジェクトに設定したらできます。
ビルド用の mac 実機の無い方は、App Center を使うこともできます。
参考：App Center Building Xamarin apps for iOS - Microsoft 公式ドキュメント

(* ゜▽゜ * っ)З「これで Xamarin の環境が (UWP, Android ともに) 正しく入ったことが確認できたね！さて、次はいよいよ Uno Platform だ！長かったなあ」

ついに Uno Platform 導入

Visual Studio 2019 をいったん閉じて、また起動します。

「Continue without code (コード無しで開く)」で VS2019 を開いて
上のメニューの「拡張機能」→「拡張機能の管理」を開きます

左のサイドメニューで「オンライン」を選択し
右上の検索ボックスで「uno platform」を入力します。

そして出てきた「Uno Platform Solution Templates」をダウンロードします。

ダウンロードが終わったら VS2019 を閉じます。するとインストールが始まるので、終わったらまた開きます

Uno Platform ハローワールド

VS2019 を起動して「新しいプロジェクトの作成」をクリックします。

するとプロジェクト選択画面になるので
検索ボックスに「uno platform」と入れて絞り込み、
Cross-Platform App (Uno Platform) を選択して開きます。

アプリの名前は「MyFirstUnoApp」とか適当に入力して
「Create (作成)」をクリックします

そして出てきたプロジェクトが立ち上がります。

生えた 5 つのプロジェクト

上から

MyFirstUnoApp.Droid

MyFirstUnoApp.iOS

MyFirstUnoApp.Shared

MyFirstUnoApp.UWP (Universal Windows)

MyFirstUnoApp.Wasm

の 5 つのプロジェクトが出来上がっています。
それぞれ、

.Droid → Android 用のビルドを行うプロジェクト。Android 固有の API を叩くコードを書く。デフォルトではこれがスタートアッププロジェクトに設定されているので、このまま「実行」すると、Android アプリが実行される

.iOS → iOS 用のビルドを行うプロジェクト。

.Shared → メインプロジェクト。4 プラットフォーム共通のコードが全て入る。プラットフォーム間で美しく設計して共通化できていたら、ここに 9 割以上のコードが入ることになる

.UWP (Universal Windows) → UWP 用のビルドを行うプロジェクト。UWP 固有の API を叩くコード入れ

.Wasm → WebAssembly 用のビルドを行うプロジェクト。WebAssembly (Web アプリ) 固有の API を叩くコード入れ

実行してみる

コードは一切編集しないで、
まず実行してみましょう。

デフォルトでは Android プロジェクトがスタートアッププロジェクトに設定されています。
そのまま実行ボタンを押してみましょう。(F5 を押す)

Android エミュレータ (または繋いでいる実機) に
"Hello, World!"
と実行されたら成功です

(* ゜▽゜ * っ)З「おお！ Uno Platform ハローワールド完了！」

もし足りないバージョンの Windows SDK がある場合は入れる

私の場合、実行が成功する前、ここでアラートウィンドウが出ていました。
このサンプルアプリのターゲットバージョンが私の環境より古いらしく、どうやら必要な SDK が入っていないようです。

（というか Android アプリのビルドしてるのに足りない Windows SDK 聞かれるあたり Uno Platform いじってる感あって良い）

なので、ターゲットバージョンを上げるか、その指定されているバージョンの Windows SDK を入れるかとなります。私は SDK 入れることにしました。

このアラートの中の「install」リンクをクリックすると、Visual Studio Installer が立ち上がります。

2.8 GB かあ、結構食うなあ。まあそんなものだよね。
「インストール」を押します。

編集してみる

せっかくなので表示されている文字列を変更してみましょう。

Shared プロジェクトの MainPage.xaml を開きます。
これはアプリ実行時に最初に起動される画面の UI を記述しているファイルです。

これの 11 行目を少し編集してみましょう。

今これ
<TextBlock Text="Hello, world!" Margin="20" FontSize="30" />
↓ こうする
<TextBlock Text="ハロー Uno Platform！" Margin="20" FontSize="30" />
そして実行してみると
狙った通りに動きましたね！

UWP 版も実行してみる

実行を一回停止。

UWP プロジェクトを選択して、右クリックして「スタートアッププロジェクトに設定」をクリックします

実行ボタンが、Android エミュレータからローカルマシンに切り替わりましたね。

そしたらそれを押して実行します。

UWP アプリが立ち上がりました！
（スクショのアプリが黒いのは、私が Windows OS をダークモードにしているので黒くなっています）

また、iOS アプリのビルドは、リモートで mac を繋いで、iOS プロジェクトをスタートアッププロジェクトに設定したらできます。
ビルド用の mac 実機の無い方は、App Center を使うこともできます。
参考：App Center Building Xamarin apps for iOS - Microsoft 公式ドキュメント

参考資料

2020年3月1日(日) の技術書典で
3人で書いた技術本『牛めし警察で学ぶ Uno Platform』を頒布します！

Microsoft MVP のひらりんさん (@himarin269)、
Microsoft 社のエンジニアのかずきさん (@okazuki)
との 3 人で書きました！

参考記事： #技術書典 8 にて「牛めし警察で学ぶ Uno Platform」を頒布します！

こちらの本でも詳しく解説していきます。

まとめ

(* ゜▽゜ * っ)З「これで Uno Platform でハローワールドできたね！　最初の画面の文字列を編集して実行などもできたね」

環境もそろったし準備万端かな！

次回

次回は画面遷移のやり方など見ていきましょう

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T14:01:29+09:00

UnityでMicrosoft Cognitive Speech Servicesによる音声認識をAndroidスマホで実装する

Androidスマホで動作するUnityの３Dアプリに音声認識をさせる必要が生じたので、簡単なサンプルを作るところから始めました。音声認識には「Microsoft Cognitive Speech Services」を使うことにしました。ちょっとハマったので、備忘録も兼ねて書いておきます。

開発環境

Windows 10
Unity Ver 2019.2.17f1
Android 9.0 (Galaxy Note9)

（1）Microsoft Cognitive Speech Servicesの準備

Microsoft Azure の無料アカウントを作成

まず、Microsoft Azure の無料アカウントを作ります。ちょっと古いけど、この辺が参考になると思います。
「Microsoft Azure の無料アカウントを作ってみた」

Cognitive Servicesのプロジェクトを作る

「Azure Cognitive ServicesのSpeech to Textで書き起こしをしてみよう」の「Cognitive Servicesのプロジェクトを作る」を参考にします。
ただし、「S0」で作っているけど、無料の「F0」がいいと思います。Nameは、これから作るプロジェクトに合わせて「csharp-unity」にしておきます。

(2) Unity 用 Speech SDKのインストール

「クイックスタート:開発環境を設定する」を参考に、Unity 用 Speech SDKをダウンロードします。パッケージのインポートはプロジェクトを作ってからやるので、とりあえずダウンロードだけでOKです。

(3) Unityでプロジェクトを作成する

「クイックスタート:マイクから音声を認識する」を参考にUnityのプロジェクトを作ります。

サイトの、「サンプルコードを追加する」項目の「5. YourSubscriptionKey という文字列を探し、実際の Speech サービスのサブスクリプションキーに置き換えます。」で使うキーは(1)で作ったKey1をコピーします。また、リージョンは「東日本」を選んでいれば「japaneast」になります。

プロジェクトを作ったら、上記「(2) Unity 用 Speech SDKのインストール」でダウンロードした「Speech SDK」をダブルクリックして展開し、「import」します。

(4) PCで実行確認

とりあえず、PCで実行確認すると、ちゃんとSpeech Serviceが機能して音声入力できました。

(5) Android端末で実行確認（失敗）

ここでハマりました。「connection failed (no connection to the remote host)・・・」なんてエラーが出ます。

要はこのプログラムはインターネットのアクセス許可がないようです。Androidで動かしているので、とりあえずAndroidManifestを探します。ファイル検索すると「temp」の中にありました。開いてみるとインターネット許可のパーミッションがありません。
「Unity ドキュメントのAndroid マニフェストの説明」によると、「Unity は適切なマニフェストを生成しますが、そのコンテンツを直接制御したい場合もあるでしょう。Unity 以外で作成した Android マニフェストを使用するには、以下の場所にその Android マニフェストファイルを置いてください。 Assets/Plugins/Android/AndroidManifest.xml 。こうすることによって、デフォルトの Unity が作成したマニフェストをオーバーライドすることができます。」とあるので、「csharp-unity\Temp\StagingArea」の中にあったAndroidManifest.xmlをコピーして
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
を追加してみましたが駄目でした。

でも、このページを再度読むと、
「パーミッション
Unityは、Android Player 設定と、アプリケーションがスクリプトから呼び出す Unity API に基づいて、マニフェストに必要なパーミッションを自動的に加えます。以下はその例です。
・Network クラスにより INTERNET パーミッションを加えます。」
とあります。つまり、「Network クラスのメソッドをなんか使えばいいんじゃね？」ということで、HelloWorld.csの62行目あたりを次のように編集してみました。
HelloWorld.csの62行目あたり
else if (result.Reason == ResultReason.Canceled)
{
   var internet = Application.internetReachability;

   var cancellation = CancellationDetails.FromResult(result);
   newMessage = $"CANCELED: Reason={cancellation.Reason} ErrorDetails={cancellation.ErrorDetails} {internet}";
}
(6) Android端末で実行確認（成功）

今度は無事に動きました。めでたし、めでたし。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-10T13:55:58+09:00

51歳から（現52）のプログラミング備忘 Support Library API追加

Support Library APIの追加

ネイティブのActionBarはAPIレベル21以降。Support Library の Toolbar ならAPIレベル7以降をサポートできる。

Projectのbuild.gradleファイル内にGoogle Mavenリポジトリを組み込む
allprojects{
   repositories{
      google()
      // もし、gradle versionが4.1以下なら、代わりに以下を使う
      // maven{
      // url 'https://maven.google.com'
      // }
}}
次に、サポートライブラリを使用するモジュールごとに、build.gradle内のdependenciesブロックにライブラリ（v4 core-utils）を追加
build.gradle
dependencies{
   ...
   implementation "com.android.support:support-core-utils:28.0.0"
   // implementation "com.android.support:appcompat-v7:28.0.0"
   // versionを省略記載するとバグるかも
サポートライブラリを使用して、既存アプリの以前のバージョンまで広げる場合、manifestのタグに以前のバージョン番号を設定する。これでアプリがAndroid APIレベル14以降を搭載するデバイスにインスツールできるようになる。
manifest
<uses-sdk
   android:minSdkVertion="14"
   android:targetSdkVersion="23" />
でも、これよりもbuild.gradle内でminSdkVersionの設定のほうが優先されるよ
build.gradle
apply plugin:'com.android.application'
android{
   ...
   defaultConfig{
      minSdkVersion 16
      ...
   }
   ...
}
サポートライブラリを複数追加する場合、指定したライブラリで必要となる最新のSDKバージョンを最小SDKバージョンとして設定する必要あり。

例）V14 preferenceサポートライブラリと、V17 Leanbackライブラリの両方をアプリに組み込む場合、最小SDKバージョンを17以上にする。

　 Tweet
Qiitaで続きを読む

20200210のAndroidに関する記事は8件です。

今からスマホアプリの学習をしようとしてる人に向けて！

1. はじめに

2. スマホ開発の仕事はある？

3. 将来性は？

4. 学習コストは？ Python、Ruby、C++と比べたら？

4-1) 難しさのレベルは？

4-2) 学習コストの差

4-3) アプリのフロントならではの難しさ

5.クロスプラットフォーム？ネイティブ？

6.最後に

Flutter MessageChannel APIの使い方

はじめに

1. MessageChannelとは

2. 基本フロー

送信側

受信側

Dart → プラットフォームへの送信

プラットフォーム → Dartへの送信

3. サンプルプロジェクト

4. Flutter + Android (Kotlin) のコード解説

4.1 Dart側の実装

通信チャンネル作成

データ送信

サンプルコード

4.2 プラットフォーム側の実装

通信チャンネル作成

受信待機

リプライ送信

サンプルコード

51歳から（現52）のプログラミング Android Toolbar (アプリBar)

Toolbar表示まで

androidx

AppCompatActivityを拡張

manifestでNoActionBarテーマを設定

Toolbarをレイアウトに追加

setSupportActionBar()にToolbarを渡す（ToolBar表示）

ToolBarアクションの追加

menu.xmlの作成

Action追加

アップアクション（MainActivityに戻るアクション）

Manifest 親子Activityを宣言

アップボタンを有効にする

51歳から（現52）のプログラミング 備忘 Android Toolbar (アプリBar)

Toolbar

Fragment不使用

Toolbar表示まで

androidx

AppCompatActivityを拡張

manifestでNoActionBarテーマを設定

Toolbarをレイアウトに追加

setSupportActionBar()にToolbarを渡す（ToolBar表示）

ToolBarアクションの追加

menu.xmlの作成

Action追加

アップアクション（MainActivityに戻るアクション）

Manifest 親子Activityを宣言

アップボタンを有効にする

Fragment利用

流れ

Uno Platform 入門 2 : 環境構築をしよう

前回のあらすじ

必要な環境（機材編）

必要な環境（開発環境編）

Windows 10 + Visual Studio 2019

環境チェック

環境チェック01：ASP.NET アプリを動かしてみる (まだ Uno 始まってないよ)

環境チェック02：Xamarin.Forms アプリを動かしてみる (まだ Uno 始まってないよ)

Windows 10 を開発者モードに

UWP 実行

Android プロジェクト実行

ついに Uno Platform 導入

Uno Platform ハローワールド

生えた 5 つのプロジェクト

実行してみる

もし足りないバージョンの Windows SDK がある場合は入れる

編集してみる

参考資料

Uno Platform 入門 2 : 環境構築をしよう！ Uno Platform ハローワールド

前回のあらすじ

4. 学習コストは？　Python、Ruby、C++と比べたら？

51歳から（現52）のプログラミング備忘 Android Toolbar (アプリBar)

51歳から（現52）のプログラミング備忘 Support Library API追加