読者です 読者をやめる 読者になる 読者になる

えむにわリソース

ITのスキマ的なあれこれを書きます。

RPGツクールMVの Milkcocoaプラグインを更新しました

RPGツクールMVのプラグイン更新しました。

フラグ関係のみ、データ保存の永続化に対応しました。

github.com

使い方は、GitHub参照のこと。 https://github.com/m2wasabi/milkcocoa-rpgmv-plugin#43-永続スイッチ変数の操作new

デバッグ足りなそうなので不具合あったら教えてください。

Xamarin入門者の集い #2でLT発表しました

4月17日に行われた『初心者歓迎XamarinのLT会!Xamarin入門者の集い #2』で、 初心者LT枠として発表してきました。

jxug.connpass.com

タイトルは 『Xamarin.Formsのための基礎体力づくり(圧縮版)』です。 丁寧に説明していると到底5分で収まりきらない内容ですが、 読み物としてお楽しみください。

懇親会の時に聞かれた内容

Q. 勉強の期間はどのぐらいか
A. 勉強のみしていた期間は約1か月。あとは作りながら覚えた。まだ完璧ではない。
Q. プロジェクトを受注する前から勉強したのか、受注してから勉強したのか
A. C#基礎は受注前から勉強していた。でも具体的な使い方を学んだのは受注が決まってから
Q. Xamarinの案件なんて見つからない
A. ふわっとしたモバイルアプリの案件をXamarinでやるんだよ。自分色に染めろ!

これで、仕事や趣味でXamarin(.Forms)を使ってアプリを出す人が増えれば幸いです。

Xamarin.Forms の ListView内で可変数個の画像オブジェクトを表示する

はじめに

TwitterなどのSNSのタイムラインをXamarin.Formsを使って表示したいとき、
ListViewの中で可変数個の画像ファイルを表示する必要があります。
方法は色々ありそうですが、
今回は画像表示用のカスタムビューを定義することによりシンプルに実装しました。

本記事の価値はCustomViewのソースに集約されているので、
「説明不要、ソースくれ!」という方は以下のリンクからお持ち帰りください。

ImageListView for Xamarin.Forms · GitHub

目次

  • はじめに
  • 目次
  • 実装
    • モデルの定義
  • カスタムビューの実装
  • ビューの実装
    • ビューモデルの実装
    • 完成図(API周りの実装は省略するけど)
  • まとめ
  • 参考記事
続きを読む

EditorConfigに対応したVisualStudio2017でコーディングルールを共有する

VisualStudio2017で新たに、EditorConfigファイルへ対応したらしいので、さっそく試してみました。

使い方は、ソリューションのルートディレクトリに .editorconfig ファイルを置くだけです。

.editorconfigファイルの記法の詳細は、EditorConfigのWebサイトにて確認できます。

http://editorconfig.org/

また、このファイルをGitで共有すると、他の人がソースを編集する場合にも、特に意識せずに、 改行、タブ、インデント等のコーディング規約を共有できます。

VisualStudioでプロジェクト単位の改行コードの制御ができるようになったのが大きな進歩です!

私がXamarin.Formsのプロジェクトで使っている設定はシンプルですが以下のようなものです。

[*]
end_of_line = lf
insert_final_newline = true

[*.xaml]
indent_style = space
indent_size = 2

健全な理性を持つエンジニア諸氏は、これからはインデントガーって騒ぐ前にInitialCommitに .editorconfig仕込むようにしましょう。

ネタ元

昨日Visual Studio 2017 リリース記念勉強会に行ってきました。 csugjp.connpass.com

その中で、かずきさん id:okazuki のセッションにて、VisualStudio2017の新機能についてピックアップで紹介されました。

blog.okazuki.jp

HoloLensアプリをローカルで配布する方法

はじめに

開発中のアプリや、内輪向けのアプリを配布する場合、
自作のUWPパッケージを作成し、各人の HoloLens の Device Portal からインストールすることになります。

一度パッケージを作成してしまえば、VisualStudioを持ってない人のHoloLensにも、自作のアプリをインストールできます。

本稿では、自作UWPパッケージの配布・インストール方法を説明します。

パッケージを作る方法

VisualStudioへのエクスポート

UnityからUWPプロジェクトをエクスポートします。
詳細な方法は、Microsoft公式の Holographic Academy の記事が間違いないです。
英語とは言え、さほど難しくないです。
https://developer.microsoft.com/en-us/windows/holographic/holograms_100

VisualStudioでのビルド

Holographic Academy の記事に従って進めれば、ビルドと、
VisualStudioからのデプロイまで行います。

一度ビルドが成功した状態で、パッケージの作成を行います。
VisualStudioのメニューから、プロジェクト(P)ストア(S)アプリ パッケージの作成(P) を選択します。
f:id:m2wasabi:20170304060208j:plain

今回は、ローカルで配布するので、署名などはスキップして大丈夫です。
f:id:m2wasabi:20170304060226j:plain

アプリケーションバンドルの生成(B) は、「常に行う」を選択しましょう。 それにより、依存関係にあるファイルをパッケージの中にまとめてくれます。
HoloLensは x86アーキテクチャなので、不要なアーキテクチャのチェックを外します
PDB symbol filesは、デバッグしない場合には不要です。今回は単純に配布したいだけなので外します。
f:id:m2wasabi:20170304060254j:plain

最後に、 作成(R)を押すと、アプリをビルドします。
f:id:m2wasabi:20170304060333j:plain

ビルドが終わると、Windowsストアのアプリ認定チェックを聞いてきますが、今回はストアに公開しないので、そのまま閉じますf:id:m2wasabi:20170304060355j:plain

ビルドが完了したファイル構成は、以下の様になります。
f:id:m2wasabi:20170304060414j:plain さらにDependencies\アーキテクチャディレクトリの下に関連するパッケージが生成されます。
f:id:m2wasabi:20170304155652j:plain

この中で、配布に必要なものは、アプリケーション名_バージョン名_アーキテクチャ.appxbundleファイルと、
Dependencies\アーキテクチャ以下のパッケージです。

Device Portalからアプリをインストールする

Device Portalに接続し、App Managerからインストールします。
アプリ本体とDependencyをまとめて登録し、Deployします。
f:id:m2wasabi:20170304155857j:plain

※Device Portalへの繋ぎ方は、Microsoftの公式ドキュメントを参照しましょう。
https://docs.microsoft.com/ja-jp/windows/uwp/debug-test-perf/device-portal-hololens

まとめ

HoloLensアプリを作成して、ローカルで配布する方法を紹介しました。
個人的に嵌ったポイントは、パッケージの作成メニューを探してしまったこと、
アプリケーションバンドルの生成を行うこと、でしょうか。

これを使うと、ローカルネットワークで適当なサーバ立ててSharingしたアプリで遊べますね。
それでは、良いHoloLifeを。

Xamarin.FormsのAndroidアプリでDebug実行時エラーが出る問題(対処のみ)

Xamarinを使ったアプリ開発で、
まっこと初見殺しな実行時エラー事案にぶつかったので、
対処法とかを共有します。

起こった事象

開発中に System.NullReferenceException エラーに襲われる
f:id:m2wasabi:20170216221315j:plain

調査するもソースコードにエラーは見つからず、
ビルドしてDebugを実施、デプロイに成功するも実行時に System.NullReferenceException で落ちる。

Releaseビルドだと正常に動く。

結論

デバッグライブラリを消せば動く

解決方法

以下のいずれか

  • プロジェクトでインストールしたアプリをいったんすべて消す
  • エミュレーターなら初期化や作り直しでも良い

原因

残念ながら原因の特定には至っていません。
あるビルドから突然 Android用プロジェクトの MainActivity.csbase.Oncreateが認識しなくなり、
対応策としてIDEの指示に従って csproj に変更を加えたあたりが怪しいですが、
再現性が無いので難しいところです。
f:id:m2wasabi:20170216223832j:plain

現象としては、SDKのバージョンが変わった場合の挙動と同じようです。

手掛かりなしで手元のソースを漁ったお陰で Xamarin.Forms のソースけっこう追いかけました。
泥臭い知識としては役に立つと思われますが、問題解決の視点では徒労でした…(´・ω・`)

Xamarinを使った開発で、実行時エラーによく遭うのですが、 その時の対処法100選の一つにでも。

ネタ元

Twitterのモーメントに上げました。 twitter.com

問題の解決に際し @nuits_jp さんをはじめ JXUGの皆様にとても助けられました。
ありがとうございました。

Azure Web Apps に Let's Encrypt を使って簡単に SSL を導入する

本稿の目的

OSと旧ポータルに依存せずに、 Azure-CLIを用いて手早く Let’s Encrypt を設定します

本稿の対象者

本稿は下記の全てに当てはまっている人が対象です。

独自ドメインではなく *.azurewebsites.ne で構わない場合は
元々用意されているワイルドカード証明書を使いましょう。

Let’s encrypt設定完了までの手順

1. Azure-CLIをインストールする

Node.jsがインストールされた環境で、以下を実行します。
sudoの有無は環境によって適宜判断してください。

npm install -g azure-cli

インストールが完了したらAzure-CLIでAzureにログインしましょう

azure login

f:id:m2wasabi:20170207043233p:plain リンクにアクセスして コードを入力して Azureのアカウントでログインしましょう。 f:id:m2wasabi:20170207043321p:plain

2. 対象の WebAppsを立てる

カスタムドメインが設定された App Service を用意しましょう
App Service プランは Basic以上を選択しましょう
f:id:m2wasabi:20170207052737p:plain

3. ストレージアカウントの作成する

Let’s EncryptのSite Extentionが使うストレージアカウントを作成します。
ストレージアカウントは壊れて困るデータは入らないので、任意の設定で構いません。
今回は、パフォーマンス:Standard , レプリケーション:LRS にしました。

Azure-CLIで作る場合は以下のコマンドで作成します。

azure storage account create --sku-name LRS --kind Storage -l <location> -g <resourcegroup> <name>

例えばこんなコマンドになります。

azure storage account create --sku-name LRS --kind Storage -l japaneast -g myresource letsencrypt

ブラウザでportalにアクセスして作成しても良いです。
f:id:m2wasabi:20170207044625p:plain

4. Azure AD でアプリを登録し、サービス プリンシパルを作成する

Let'sEncryptのSiteExtensionがリソースにアクセスするための サービス プリンシパルを作成します。
難しい専門用語ですが、要は「サービス用のアカウント」と「アクセス権」という認識で良いと思います。

Azure-CLIで以下のコマンドで作成します。

azure ad sp create -n <application_name> -p <password>
azure ad sp create -n letsencrypt -p HogeFuga123

実行すると、Object IDとService Principal Namesが得られるのでメモしておきましょう。 f:id:m2wasabi:20170207044951p:plain

これはブラウザでportalにアクセスして作成する場合少し面倒です。
サービスプリンシパルは旧ポータルでしか作成できません。
旧ポータルは繋がらないこともあるので、Azure-CLI使うことを強くお勧めします…

5. リソースグループへのアクセス権限付与

作成したサービス プリンシパルが、リソースグループへアクセスできるよう権限を付与します。
よく嵌るのが、間違えて対象のAppServicesに与えてしまうことです。

Azure-CLIでもできますが、これはportalから設定したほうが楽です。
役割を「共同作成者」、
ユーザーを先ほど追加したアプリ名にしましょう。(選択肢には無いですが、フォームに入力すると出てきます。) f:id:m2wasabi:20170207045222p:plain

尚、Azure-CLI登録する場合は、

azure role assignment create --objectId <サービスプリンシパルのObject ID> -o Contributor -c /subscriptions/<WebAppsの所属するサブスクリプションID>/resourceGroups/<リソースグループ名>

参考になりにくいですが、実際に入力する場合、以下のようなイメージになります。
なお例示のIDはランダム文字です。

azure role assignment create --objectId abc12345-1234-5678-9abc-0123456789ab -o Contributor -c /subscriptions/98765412-9876-4567-3214-0123456789ab/resourceGroups/myawsomeproject

6. サービスプリンシパルのSecretKeyの生成

AzureAD(Azure Active Directory) →アプリの登録→アプリ名→設定→キー
でsecret keyを生成します。 f:id:m2wasabi:20170207045613p:plain

7. WebAppsの環境変数を登録する

WebAppsの環境変数に設定する文字列は以下です ストレージアカウント接続文字列の取得
ストレージアカウントの「アクセス キー」の項目より、
key1の右端の「・・・」をクリックし、「接続文字列の表示」を押すと以下のフォーマットの文字列が取得できます。
f:id:m2wasabi:20170207050021p:plain

DefaultEndpointsProtocol=https;AccountName={ストレージ アカウント名};AccountKey={key1};

この文字列を 【ストレージ】 と定義する。

AzureAD の「ドメイン名」の項目より、プライマリドメインをコピー。(*.onmicrosoft.comの形式) この文字列を 【ADドメイン と定義する。 f:id:m2wasabi:20170207050341p:plain

課金>作成したアクティブなサブスクリプション から得られる サブスクリプションID】 f:id:m2wasabi:20170207050946p:plain

項目名 入れる内容
AzureWebJobsStorage 【ストレージ】
AzureWebJobsDashboard 【ストレージ】
letsencrypt:Tenant 【ADドメイン
letsencrypt:SubscriptionId サブスクリプションID】
letsencrypt:ClientId 4で取得したサービスプリンシパルのObject ID
letsencrypt:ClientSecret 6で取得したサービスプリンシパルのSecretKey
letsencrypt:ResourceGroupName リソースグループ名
letsencrypt:ServicePlanResourceGroupName リソースグループ名

f:id:m2wasabi:20170207051225p:plain

8. SiteExtensionをインストールする

SiteExtension(拡張機能)でAzure Let’s Encrypt (x86)をインストールする f:id:m2wasabi:20170207051415p:plain

9. 証明書を発行する

拡張機能の【参照】から
UIに従っていけば発行できます。
f:id:m2wasabi:20170207051600p:plain

f:id:m2wasabi:20170207051742p:plain f:id:m2wasabi:20170207051754p:plain

f:id:m2wasabi:20170207052130p:plain f:id:m2wasabi:20170207052135p:plain f:id:m2wasabi:20170207052140p:plain f:id:m2wasabi:20170207052147p:plain

10. 確認と後片づけ

これでめでたくSSLの導入が出来ました。httpsでサイトにアクセスしてみましょう。
f:id:m2wasabi:20170207052340p:plain

また、WebJobsは次の証明書更新まで用がないので止めても大丈夫です。

11. 証明書を再発行するときは

WebJobsでLet'sEncryptを起動して、9の手順を行います。

簡単ですね!

付録:ルートディレクトリを変更する場合

PHPとか入れた時にドキュメントルート移動したら証明書作れなくなった!」
そんな時

アプリケーションでpublicの階層掘ってる場合は
challengeファイルにアクセスするためのweb.configを書けばOKです

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!-- Letsencrypt challenge file -->
        <rule name="AcmeChallenge" stopProcessing="true">
          <match url="^.well-known/acme-challenge/(.*)$" />
        </rule>

      </rules>
    </rewrite>
  </system.webServer>
</configuration>

参考リンク

http://blog.shibayan.jp/entry/20151111/1447172124
しばやん氏のブログ。
証明書の作成方法が本家準拠なので素直にこの方法で出来ます。
しかし実施環境に多少のハードルがあります

https://github.com/sjkp/letsencrypt-siteextension/wiki/How-to-install
今回使う Let’s Encrypt Site Extension の本家wikiです。
Azureの周辺知識が完璧で英語もさくさく読めるなら、もうここに行ってみてください。

https://blogs.technet.microsoft.com/mskk-cloudos/2016/02/22/lets-encrypt-azure-web-apps-https/
マイクロソフトの中の人のブログ。
導入説明は間違ってないけれど、用語の意味が分からなくてどうしていいか詰んだり、
旧ポータル使うとか小さすぎるスクショがダウンロードとかぐぬぬ
旧ポータルがちゃんと動いてくれれば私の記事は必要ないはずです。