Microsoft.Windows.Simulatorの解像度を変更する

Microsoft.Windows.Simulatorの解像度を変更する

解像度情報を追加

  1. 「C:\Program Files (x86)\Common Files\microsoft shared\Windows Simulator\15.0\HardwareConfigurations\HardwareConfigurations.xml」を下記のように編集する(存在しない場合は、作成する)
  2. Windowsを再起動する
<?xml version="1.0" encoding="UTF-8"?>
<ArrayOfHardwareConfiguration xmlns:xsd="htかいぞうかかおkaiいdtp://www.w3.org/2001/XMLSchema"
							  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<HardwareConfiguration>
		<Name>Surface Go</Name>
		<DisplayName>10" 1800 x 1200 (3:2, 100%)</DisplayName>
		<Resolution>
			<Height>1200</Height>
			<Width>1800</Width>
		</Resolution>
		<DeviceSize>10</DeviceSize>
		<DeviceScaleFactor>100</DeviceScaleFactor>
	</HardwareConfiguration>
	<HardwareConfiguration>
		<Name>Surface Go</Name>
		<DisplayName>10" 1800 x 1200 (3:2, 150%)</DisplayName>
		<Resolution>
			<Height>1200</Height>
			<Width>1800</Width>
		</Resolution>
		<DeviceSize>10</DeviceSize>
		<DeviceScaleFactor>150</DeviceScaleFactor>
	</HardwareConfiguration>
	<!--
	<HardwareConfiguration>
		<Name>12-2160x1440</Name>
		<DisplayName>12" 2160 x 1440 (3:2, 140%)</DisplayName>
		<Resolution>
			<Height>1440</Height>
			<Width>2160</Width>
		</Resolution>
		<DeviceSize>12</DeviceSize>
		<DeviceScaleFactor>140</DeviceScaleFactor>
	</HardwareConfiguration>
	-->
</ArrayOfHardwareConfiguration>

動作確認

動作確認

参考

Xamarin 近況報告

年末年始、なんもやってなかったことはないです。。。

占いアプリをVuetifyで作る

2018/12/19 第7回 SOL-Tech(静岡のWeb/アプリ勉強会)のテーマは「占いアプリ・プチコンテスト」ということで、占いアプリをFirebaseにデプロイする。※人前で発表なんてはじめて。ドキドキする!

Vuetify で占いアプリを作成する

DEMO

DEMO : 2019TECH占い : https://fortune-telling-2019.firebaseapp.com

機能

  1. ユーザーが名前をアルファベット(例:SHOKO)で入力する。 
  2. ユーザー名(例:SHOKO)と翌年の2019年(TWENTY-NINETEEN)のアルファベットをシャッフルする。
  3. シャッフルされたアルファベットから、占い結果の頭文字として無作為に1つ選び、占い結果を表示する。

Vue.jsを使えるようにする

  $ yarn global add @vue/cli
  $ vue create fortune-telling-2019
  $ cd fortune-telling-2019
  $ yarn serve

Vue.jsの初期画面が「http://localhost:1313」で見えることを確認する

Vuetifyを使えるようにする

  $ vue add vuetify
  $ yarn serve

Vuetifyのパッケージが追加されて、Vuetifyの初期画面が「http://localhost:1313」で見えることを確認する

プログラム作成

ソースコードは「shokokb/fortune-telling-2019@GitHub」にあるので、ご自由にどうぞ。

Firebaseにデプロイする

Firebase Consoleからプロジェクトを作成する

  1. Firebase Consoleにログインする
  2. Firebase Consoleの「Firebaseへようこそ」の画面で「プロジェクトを追加」をクリックする。

    Firebaseへようこそ

  3. プロジェクトID等を設定し、「プロジェクトを作成」する。

    プロジェクトを作成

  4. プロジェクトが作成される。

    作成中

Firebase CLIをインストールする

  $ yarn global add firebase-tools

Firebaseにログインする

  1. ログインコマンドを入力する
  2. 「アカウントの選択」が表示されるので、Googleアカウントを選択する。
  3. Success!が表示されれば、成功である。
 firebase login
  ? Allow Firebase to collect anonymous CLI usage and error reporting information?
   Yes

  Visit this URL on any device to log in:
  https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=856911908&redirect_uri=http%3A%2F%2Flocalhost%3A9005

  Waiting for authentication...

  ✔  Success! Logged in as foobar@gmail.com

ホスティングを初期化する

  1. Firebase のホスティングにログインする。
  2. 「? Select a default Firebase project for this directory: 」で[create a new project]を選択する。
  3. プロジェクト名を「fortune-telling-2019」に設定する。
  4. 「? What do you want to use as your public directory? (public)」で「dist」を入力する。
  $ firebase init hosting

       ######## #### ########  ######## ########     ###     ######  ########
       ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
       ######    ##  ########  ######   ########  #########  ######  ######
       ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
       ##       #### ##     ## ######## ########  ##     ##  ######  ########

  You're about to initialize a Firebase project in this directory:

    /Users/shoko_kb/Desktop/fortune-telling-2019


  === Project Setup

  First, let's associate this project directory with a Firebase project.
  You can create multiple project aliases by running firebase use --add, 
  but for now we'll just set up a default project.

  ? Select a default Firebase project for this directory: [create a new project]

  === Hosting Setup

  Your public directory is the folder (relative to your project directory) that
  will contain Hosting assets to be uploaded with firebase deploy. If you
  have a build process for your assets, use your build's output directory.

  ? What do you want to use as your public directory? (public) dist

   
  ? What do you want to use as your public directory? dist
  ? Configure as a single-page app (rewrite all urls to /index.html)? No
  ✔  Wrote dist/404.html
  ✔  Wrote dist/index.html

  i  Writing configuration info to firebase.json...
  i  Writing project information to .firebaserc...

  ✔  Firebase initialization complete!

  Project creation is only available from the Firebase Console
  Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

JSONファイル(firebase.json)を確認する

  $ ls
    ... firebase.json ... 

ビルドする

  $ yarn build
    :
  ✨  Done in 22.35s.

デプロイする

  firebase deploy --project fortune-telling-2019
  Project Console: https://console.firebase.google.com/project/fortune-telling-2019/overview
  Hosting URL: https://fortune-telling-2019.firebaseapp.com

スライド

参考