ひよっこの備忘録

積み重ねて山となる

富士葵目覚まし時計開発#03

Xamarin 富士葵

Xamarinは公式リファレンスを見ればいいとして、XAMLがどこを見たらいいのかてんで分からなくて四苦八苦しているゆづるです。
本当に助けて。

進捗

とりあえず、以下の機能を実装しました。

  1. 起動ごとにランダムな背景画像の表示
  2. 日時の表示と、一秒ごとに更新
  3. 背景画像タップ時音声を再生

1.起動ごとにランダムな背景画像の表示

下記のサイトを参考に作成。
http://tottemohimadesi.esy.es/c/xamarin-forms-%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AE%E8%A1%A8%E7%A4%BA2/

XAML。 Imageタグのプロパティにx:Nameを宣言して、c#側でこの名前を指定して画像を流し込む。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Aoi_Alarm"
             x:Class="Aoi_Alarm.MainPage">
    <Grid>
        <Image x:Name="BackGroundImage" Aspect="AspectFill" />
</ContentPage>

XAMLで宣言したimageタグに画像を流し込む

// 背景画像を表示
BackGroundImage.Source = ImageSource.FromResource(Util.BackGroundImage.GetRandomImageFilePath());

ランダムな画像ファイルのパスを返す

using System;
using System.Collections.Generic;
using System.Text;

namespace Aoi_Alarm.Util
{
    class BackGroundImage
    {
        #region member
        /* ファイル名リスト */
        private static List<String> fileNameList = new List<String>()
        {
            "DgnEcVmUcAATOfD.jpg",
            "DgoYfoqVQAAwHkh.jpg",
            "DhwD7m-VQAAfvPA.jpg"
        };
        #endregion

        #region public function
        /*
         * ランダムな画像のファイルパスを取得する.
         * 
         * @return ファイルパス
         */
        public static String GetRandomImageFilePath()
        {
            var fileName = GetRandomFileName();

            return String.Concat("Aoi_Alarm.Resources.Image.", fileName);
        }
        #endregion

        #region private function
        /*
         * ランダムなファイル名を取得する.
         * 
         * @return ランダムなファイル名
         */
        private static String GetRandomFileName()
        {
            // ファイルの数を取得
            var fileCount = fileNameList.Count;

            // ランダムなファイル名を返す
            var randomObject = new System.Random();
            var randomNumber = randomObject.Next(fileCount);
            return fileNameList[randomNumber].ToString();
        }
        #endregion
    }
}

2. 日時の表示と、一秒ごとに更新

タイマーというか一定時間ごとに処理を行う方法は以下のサイトを参考にした。
https://dev.classmethod.jp/smartphone/xamarin-forms-device-start-timer/

xamlに以下を追記

<Label x:Name="Date"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />

サイトを参考にして一秒ごとに更新される時計を作成

// デジタル時計の表示
// 一秒ごとに更新
Xamarin.Forms.Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
    Date.Text = Util.Time.GetTime();
    return true;
});

using System;
using System.Collections.Generic;
using System.Text;

namespace Aoi_Alarm.Util
{
    class Time
    {
        public static String GetTime()
        {
            return DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        }
    }
}

3. 背景画像タップ時音声を再生

以下のサイトを参考にして音声を再生。
プラグインを作成してくださった作者様に大感謝である。
rksoftware.hatenablog.com

xamlのimageタグを下記の様に書き換える。

<Image x:Name="BackGroundImage" Aspect="AspectFill">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="PlaybackVoiceWhenTapped" />
    </Image.GestureRecognizers>
</Image>

このタップしたら何かするっていう動作は公式に情報が載っていた。
docs.microsoft.com

/*
 * タップ時ランダムな音声を再生する.
 */
void PlaybackVoiceWhenTapped(object sender, EventArgs args)
{
    // playerの生成
    var player = Plugin.SimpleAudioPlayer.CrossSimpleAudioPlayer.Current;

    // ランダムな音声を取得して再生
    player.Load(Util.Voice.GetRandomVoiceFile());
    player.Play();
}

using System;
using System.IO;
using System.Reflection;
using System.Collections.Generic;

namespace Aoi_Alarm.Util
{
    class Voice
    {
        #region member
        /* ファイル名リスト */
        private static List<String> fileNameList = new List<String>()
        {
            "なんで葵の絵がひきだしあけお.m4a",
            "みなっさーん富士葵です.m4a",
            "欲しい欲しい欲しい欲しい.m4a"
        };
        #endregion

        #region public function
        /*
         * ランダムな音声のファイルストリームを取得する.
         * 
         * @return 音声ファイルのストリーム
         */
        public static Stream GetRandomVoiceFile()
        {
            var assembly = typeof(App).GetTypeInfo().Assembly;
            var stream = assembly.GetManifestResourceStream(GetRandomVoiceFilePath());
            return stream;
        }

        /*
         * ランダムな音声のファイルパスを取得する.
         * 
         * @return ファイルパス
         */
        public static String GetRandomVoiceFilePath()
        {
            var fileName = GetRandomFileName();

            return String.Concat("Aoi_Alarm.Resources.Voice.", fileName);
        }
        #endregion

        #region private function
        /*
         * ランダムなファイル名を取得する.
         * 
         * @return ランダムなファイル名
         */
        private static String GetRandomFileName()
        {
            // ファイルの数を取得
            var fileCount = fileNameList.Count;

            // ランダムなファイル名を返す
            var randomObject = new System.Random();
            var randomNumber = randomObject.Next(fileCount);
            return fileNameList[randomNumber].ToString();
        }
        #endregion
    }
}