ぷろじぇくと、みすじら。

XamarinでもAndroid TVアプリが作りたい

Created at: | Tag: AndroidTv Xamarin CSharp

XamarinがついにVisual Studioの一部となって、Visual Studio利用者であれば追加コストなしで使えるようになりました。Starterではなくてサイズ制限のないフル機能を使えるのでまともな開発ができます。

Xamarinの良し悪しや意義とかは置いておくとして、Androidアプリの開発ができるということはAndroid TVのアプリも作れるということなのでデバッグ実行するまでの流れを試してみました。SonyのBRAVIA(2015)での手順ですがBRAVIA以外のAndroid TV(Nexus Playerなど)でも大体同じ流れだと思います。

動かすアプリはXamarinのデフォルトテンプレートで出来るもの(ボタンを押すとカウントが増えるもの)をそのまま使うことにします。

テレビ(Android TV)側の設定と接続

まずはテレビ側でデバッグをできるように設定します。と言ってもほぼ普通のAndroidと同じです。

  1. 設定から端末情報→ビルドの項目を連打して開発者向けオプションを有効にする
  2. システム機能設定カテゴリの開発者向けオプション→デバッグ→ADBデバッグを「入」

Get started | Sony Developer Worldにも詳しく書いてあります。

つぎにコンピューターからadbコマンドからテレビに接続します。 なお、adbコマンドはXamarin.Androidとともにインストールされたものは%LOCALAPPDATA%\Android\android-sdk\platform-toolsにあります。

adb kill-server
adb start-server
adb connect <IPアドレス>

この adb connect に指定するIPアドレスはテレビのIPアドレスです。ネットワーク設定あたりから確認できます。

C:\Users\Tomoyo\AppData\Local\Android\android-sdk\platform-tools>adb connect 192.168.1.100
connected to 192.168.1.100:5555

コマンドが成功するとコンピューター側には何も出ませんが、テレビ側にUSBデバッグの許可を求めるダイアログが出るのでOKを押してください。

テレビ側で許可をして adb devices で接続したIPのデバイスが出てくれば完了です。

C:\Users\Tomoyo\AppData\Local\Android\android-sdk\platform-tools>adb devices
List of devices attached
192.168.1.100:5555      device
emulator-5554   device

後はVisual Studioのデバッグ実行ボタンにターゲットとしてテレビが出てくるのでクリックするとテレビにアプリがデプロイされてデバッグ実行されます。なお、初回時は共有ライブラリをインストールするのでちょっと時間がかかります。

スクリーンショット: Visual Studio 2015のツールバーから起動

アプリケーションをAndroid TV対応にする

アプリケーションをテンプレートから作ったままだと、Android TV感のない単なるAndroidアプリになる上にホーム画面にも出てこない状態ですので少々対応が必要です。

スクリーンショット: アプリ画面

まず、Android TVの機能を含むライブラリ(v17 Leanback Library)やテーマを使えるように、Xamarin Components StoreからAndroid Support Library V17 Leanbackをインストールします。このコンポーネントをダウンロードするにはXamarinアカウントが必要です。

ちなみにAPI中でLeanbackという言葉が出てきたらそれはAndroid TV的なものを指しています。

そして次にアクティビティにテーマを設定します。 アプリケーションに一括でAndroid TV向けテーマを適用する場合にはAndroidManifest.xmlのapplication要素にtheme属性を追加します。

<application android:label="App17" android:theme="@style/Theme.Leanback"></application>

もしアクティビティ単位で適用したいのであれば、アクティビティのクラスについているActivityカスタム属性のThemeプロパティを設定します。

[Activity(Label = "App17", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.Leanback")]

これでタイトルバーが消えたり、ボタンがフラットになったりと見た目がAndroid TV向けっぽくなります。

スクリーンショット: アプリ画面

次にホームにアプリケーションを起動するアイコンというかタイルというかを表示するためのコードを追加します。Android TV向けのアプリケーションはホームから起動できるということを明示的に設定する必要があり、何も指定しないと表示されません。

設定は起動対象としたいアクティビティ、大抵はActivityカスタム属性のMainLauncherプロパティがtrueになっているアクティビティにIntentFilterカスタム属性を追加します。

[Activity(Label = "App17", MainLauncher = true, Icon = "@drawable/icon")]
[IntentFilter(new[] { Intent.ActionMain }, Categories = new[] { Intent.CategoryLeanbackLauncher })]
public class MainActivity : Activity
{
...
}

IntentFilterでカテゴリがCategoryLeanbackLauncherのActionMainを捕まえられるようにするという感じです。

これでホームにアイコンが出てくるようになります。

スクリーンショット: ホーム

ということで準備はできたのであとは頑張ってアプリを作るだけです。

Visual StudioでF5を押すとテレビにアプリを転送、起動してブレークポイントでブレークできるというのはなかなか面白い体験です。そもそもテレビにadbで接続してshellを叩けるという時点で不思議体験でもあります。

ぜひ皆さま、Android TVを買ってC#で開発しましょうということでたまにはアフィリエイトおいておきますね。

ソニー 地上・BS・110度CSデジタルハイビジョン液晶テレビ BRAVIA X8500C 55V型 KJ-55X8500C

Micorosoft Edge Build 14316 リリース

Created at: | Tag: Edge JavaScript HTML

Windows 10 build 14316のリリースで先日のBuildやEdge Summitで出てきたいろいろなアップデートが入ってきました。

プラットフォームアップデートもいろいろありますが、拡張がパワーアップしたのと、Web Notifications、アクセシビリティーツリービューあたりが気になるところでしょうか。

新しい機能

Webプラットフォーム機能

Web Notifications

Webページから通知を表示できる機能で、Edgeの場合にはWindowsの通知機能と連動することになります。

ページが通知の許可を求める(Notification.requestPermission)と、ページの下の方に確認が出てきます。

スクリーンショット: 通知の許可を求める

許可をした状態でページから通知を発行する(new Notification(...))とWindowsの通知として表示されます。

スクリーンショット: 通知が表示される

もちろんちゃんとAction Centerにも入ります。

スクリーンショット: Action Center内にも通知が表示される

F12: アクセシビリティーツリービュー

F12にアクセシビリティーツリービューというものが増えました。 これはページについているroleやスクリーンリーダーに渡す読み上げテキストをツリー表示できるものです。

ツリービューを開くにはF12のDOM Explorerのカラーピッカーのボタンの横に新しいボタンがあるのでそれを押します。

スクリーンショット: F12のアクセシビリティーツリービューをオンにするボタン

ツリービューを表示すると、どういう名前とロールなのかを一覧でき、選択することでその要素にジャンプできます。

スクリーンショット: F12のアクセシビリティーツリービュー

Micorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法

Created at: | Tag: Edge Chrome Extension JavaScript HTML

Micorosoft Edge(プレビュー)の拡張を作ってみるでは未公開の情報を元にノリと勢いでChrome拡張をEdge拡張にしてみましたが、さっくりとできたわけではなくAPIに関しては当然少し調査してから試しました。

その調査方法兼デバッグ方法についてせっかくなのでメモっておきます。もちろん将来のビルドでは手順が変わる可能性がかなり高いです。

まずはChromeが持っているpermissionをすべて列挙したマニフェストを持つ空の拡張を作ります。JavaScript不要です。

{
    "manifest_version": 2,
    "name": "Dummy Extension",
    "version": "1.0",
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "activeTab",
        "alarms",
        /* 長いので省略 (https://gist.github.com/mayuki/5ae554c8e825f32921c7) */
        "webRequest",
        "webRequestBlocking"
    ]
}

バックグラウンドページはこんな感じでtitle要素だけ。

<!DOCTYPE html>
<!-- 名前は付けておいた方がいい -->
<title>Dummy Extension - BackgroundPage</title>

そしてACLを付けて、

icacls . /grant "*S-1-15-2-3624051433-2125758914-1423191267-1740899205-1073925389-3782572162-737981194":"(OI)(CI)(WDAC,WO,GE)"

Edgeに読み込ませます。

デバッグコンソールを開く

これで拡張は読み込まれましたがEdgeのデバッグする口がありません。Chromeなどでは拡張画面からいろいろ開けるのですがそういうインタフェースは見当たりません。

そこでF12開発者ツールをスタンドアローンで立ち上げます。実は結構前からF12開発者ツールは単体で起動できるようになっています。

単体で起動するにはC:\Windows\SysWOW64\F12にあるF12Chooser.exeを実行します。するとF12開発者ツールをどのインスタンスのEdgeにアタッチするか、という画面が表示されます。

F12Chooser

この画面でさっき作った"Dummy Extension - BackgroundPage"を選択します。すると指定したページ、つまり拡張のバックグラウンドページにアタッチされたF12開発者ツールが起動します。

F12開発者ツールが立ち上がる

そうしたらあとはコンソールでいろいろ試してみます。

windowオブジェクトにbrowserやchromeが生えている

chromeオブジェクトにはほとんど機能がないこと、pageActionの実装が中途半端なこと、webRequest/webNavigationがある(使えたとは言っていない)といったことが分かります。コンテキストメニューを足してみるのもここからできます。

ちなみにこのアタッチする手段を使うことで拡張をデバッグできます。…が、読み込み時のエラーのキャッチはできないのでなかなか厳しいです。そのあたりは将来正式に解放されるときに手段が整うのではないかと思います。

Micorosoft Edge(プレビュー)の拡張を作ってみる

Created at: | Tag: Edge Chrome Extension JavaScript HTML

Microsoft Edgeのブラウザーに対する拡張がついにWindows 10 Insider Preview build 14291からサポートされました。 サポートされたのですが現状は拡張機能のプレビューということで開発者には特に情報は開示されていません。 この辺りはBuild 2016で発表されるのではないかと思います。

せっかくサポートされたので開発情報はないものの試行錯誤で作ってみます。 作り方も「Google Chrome向け拡張を少しの変更で動かせるようになる」という話は出ていて、 公開されているプレビューの拡張機能も適当なところにぶちまけられたパッケージ化されていないものを読み込む感じなので作れそうです。

というわけで以前から「選択した文字列をGoogleで検索する」機能が欲しいと思っていたのでそれを作ることにします。Google Chromeには標準であるアレです。

そもそもGoogle Chrome拡張のAPIのどこまでがサポートされているのかわかりませんが、そのぐらい簡単なものなら動くだろうみたいな勢いです。

出来上がりはこんな感じです。

コンテキストメニューに"Search Google for ..."を追加

便利なのです。#Chromeでは前からできる #IEもアクセラレーターで出来た

Google Chrome向けに作る

いきなりEdgeで作り始めると色々とハマるのでとりあえず最初はまずGoogle Chromeで動くように作ります。

用意するファイルは次の3つです。

まずはマニフェストですが、最低限のことを書いてバックグラウンドページとパーミッションを指定します。

{
    "manifest_version": 2,
    "name": "Google Search for Context Menu",
    "version": "1.0",
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "contextMenus"
    ]
}

background.htmlもbackground.jsを読むだけの人に。

<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<script src="background.js"></script>
</head>
<body>
</body>
</html>

メインの処理であるところのbackground.jsではコンテキストメニューを作成します。ちなみにUTF-8とかで保存しておかないと事故が起きるかもしれません。

// コンテキストメニューに "Search Google for "%s"" を追加する
chrome.contextMenus.create({
    id: 'searchGoogleForSelection',
    title: 'Search Google for "%s"', // %s は選択している文字列で置き換わる
    contexts: ['selection'], // 選択しているときのみメニューに表示される
    onclick: (info, tab) => {
        // クリックのイベント
        // 新しいタブを開いてGoogleで検索する
        chrome.tabs.create({
            url: 'https://www.google.com/search?q=' + info.selectionText
        });
    }
});

コンテキストメニューのAPIはchrome.contextMenus - Google Chromeにある通りで、項目がクリックされたらタブを開く処理を書いておきます。

で、この一式をChromeに読み込ませます。Chromeの拡張の画面から"Developer Mode"を有効にして"Load unpacked extension..."で読み込ませることができます。

特にエラーがなければ適当なページで文字列を選択してコンテキストメニューを開くと項目が増えているはずです(まあ同じものをChromeが提供しているので被ってますが)。

コンテキストメニューに"Search Google for ..."を追加

Microsoft Edgeで動かす

というわけでChromeで無事動作したらEdgeで動かせるように対応します。

まずはbackground.jsを修正する必要があります。修正点は2点でchrome.contextMenusbrowser.contextMenusに、chrome.tabs.createbrowser.tabs.createに変更します。 要するにchromebrowserに変更です。

次に拡張の入っているフォルダーをコマンドプロンプトで開いて次のコマンドを実行します。

icacls . /grant "*S-1-15-2-3624051433-2125758914-1423191267-1740899205-1073925389-3782572162-737981194":"(OI)(CI)(WDAC,WO,GE)"

このコマンドはEdgeがフォルダーとその配下のファイルにアクセスできるようにするための権限付与です。EdgeはAppContainerに閉じこまれててファイルアクセスに制限がかかっているので必要なのでしょう。そのあたりはNyaRuRuさんのエントリーが詳しいです。

変更はこれだけで、あとは拡張から読み込ませて、コンテキストメニューに出てくれば成功です。簡単ですね。

拡張の一覧に追加される コンテキストメニューに"Search Google for ..."を追加

というわけで本当にChrome拡張を移植できるらしいことを確認できました。早くいろいろなAPIがそろって、情報が公開されるのが楽しみです。

既知の問題

どうもEdgeを再起動すると起動時にバックグラウンドページを自動では読み込んでくれないらしく、再読み込みが必要になります。Chromeではそういうこともないので多分プレビューだからなのでしょう。たぶん…。

ついでに

そういえばGitHubのドキュメントにも拡張周りが少し追加されていたので訳しておきました。

さらについでにMicorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法についても書いておきました。

MicrosoftEdge Documentationを訳してみる

Created at: | Tag: Edge

GitHubにMicrosoftEdge DocumentationというEdgeについてのドキュメントがあるのですが、 それをふと英語の勉強もかねて訳してみたりしています。

https://github.com/mayuki/MicrosoftEdge-Documentation

まああまりうまくないし間違ってるかもしれませんがそこまで極端には間違ってないと思いたいところ…。

今のところ以下のあたりをやってあります。