「技術」カテゴリーアーカイブ

WPFでMVVMプログラミング 第四回

●DIコンテナー

プロジェクトを作成していると、

たくさんViewができると思います。

ということは、少なくとも同じ数以上の

ViewModelが出来上がるはずです。

 

ここで発生する問題は、

ViewModel間でデータの連係をどうするか

というのが出てくると思います。

 

方法は二つあります。

一つは、シングルトンで作成した一つのオブジェクトを

複数のViewModelで使用する。

もう一つは、イベントでデータを飛ばす方法です。

ここでは、前者の方について説明します。

 

例えば、こんなクラスを作成したとします。

これをシングルトンでオブジェクトを作成するには、

Bootstrappersクラスにて

ConfigureContainerをオーバーライドし、

Containerに登録します。

ContainerはBootstrappersクラスのプロパティで、

何もしなくても存在しているシングルトンのオブジェクトです。

これにインスタンスを登録すれば、

ViewModel生成時に引数で受け取る事ができます。

RegisterType<>にインスタンス化するクラスと

それを取り出すためのインターフェースを登録します。

 

そうするとこんな感じに書けます。

こうすればPrismライブラリが、

View生成と同時にViewModelもインスタンス化し、

Containerに登録したオブジェクトも引数に入ります。

 

WPFでMVVMプログラミング 第三回

では、今回は、

Prismテンプレートで作成したプロジェクトについて

解説したいと思います。

 

まず、通常は見ることがない、

  • Bootstrapper.cs
  • MainWindow.xaml
  • MainWindowViweModel.cs

ですね。

まず、Bootstrapper.csでは、

ソリューションで使用するシングルトンを定義したり、

モジュールの設定などを記載します。

この辺りは、また後で詳しく解説しますね。

で、残りのMainWindow.xamlと

MainWindowViewModel.csですが、

これはそれぞれViewとViewModelです。

 

MainWindow.xamlでViewを定義し、

MainWindowViewModel.csでViewModelのコードを

記載します。

 

ちなみに、ViewとViewModelは命名定義があり、

(つまりは名前を決めるときの決まり事)

Viewsフォルダの中に○○.xamlというViewがあったら、

ViewModelは必ず、

ViewModelsフォルダの中の○○ViewModel.csと対応します。

この名前定義により、

ViewtoViewModelの対応付けがされているのです。

なので、通常は、このルールに従う必要があります。

(違う名前にもできるけど、後々面倒なので)

 

さらに、Viewのコードを見て見ます。

このコードの中にPrismとかTrueとか記載されていますが、

これが、Prismライブラリが有効になっていることを

表しています。

 

つまりは、これがある事で、Viewが生成されると同時に、

ViewModelもPrismによって生成されるのです。

 

なので、ここは絶対に書き換えてはいけません。

 

ちなみに、MainWindow.xaml.csというファイルもありますが、

これに手を入れることはMVVMモデル設計から

逸脱する行為ですので、

MVVMモデルに準拠するのであれば、

ここに手を加えてはいけません。

 

では、次にBootstrapper.csを見て見ます。

Bootstrapper.csではアプリケーションの初期設定を行います。

主に、

  • DIコンテナー
  • モジュール
  • リージョン
  • ベヒイベア

などの設定をここに記載します。

(この辺りについては後述します)

ここでは、

CreateShell()でMainWindowをResolve

(解決→Viewをインスタンス化)し、

InitializeShell()でMainWindowをShow(表示)

しているのがわかると思います。

 

ちなみに、

App.xaml.csを覗いてみると、

bootstreapperをRunしているのがわかると思います。

引数eには、コマンドパラメータが配列で格納され、

bootstreapperの一連の処理を実行しているのが

わかると思います。

 

それでは、次回はDIコンテナーについて解説します。

 

WPFでMVVMプログラミング 第二回

●Prismライブラリ

MVVM設計を容易にするために

Prismというライブラリを

マイクロソフトが公開しています。

 

MVVM設計プログラミングでは必須のライブラリです。

 

ソリューションが複数プロジェクトに分けて

開発を行う場合、

毎回NuGetでインストールするのは非常に面倒です。

なので、Prismテンプレートという物が用意されています。

 

これは便利すぎる。

 

導入方法。

 

Visual Studioを起動して

ツール→拡張機能と更新プログラムを選択し、

Prismテンプレートをインストールする。

 

インストール後に再起動すると

Prismという項目が追加されている。

 

プロジェクトを作成するとこのようなプロジェクト構成になる

 

ということで、

これらの詳細は次回にします。

 

WPFでMVVMプログラミング

この話、ネットでよく調べるんだけど、

いい情報が見つからない。

ならば、自分で書いてしまおうと言うことで。

 

●そもそもWPFとは?

Visual Studioでソリューションを選択するときに

(WPF)って書いてる物があると思います。

このソリューションを作成すると、

○○.xamlというファイルができると思います。

このファイルにHTMLのタグのような感覚で書いていくと、

アプリケーションのユーザーインターフェースが

出来上がります。

 

最近のWindowsアプリはこっちの方がトレンドだそうです。

たとえば、ストアアプリもWPFではないですが、

同じような仕組みが使用されています。

これは、使用しているデバイスによって解像度が異なるので、

どのような解像度でも同じUIが使用できるメリットがあります。

 

●MVVMとは?

例えば、Webアプリのフレームワークで

MVCモデル

(View-Control-Model)

を採用している物と同じように、

アプリケーションを

View-ViewModel-Model

にわけて開発を行うアプリケーション設計です。

これらは疎結合(ゆるーい結合)になりますので、

分担作業が簡単になります。

 

なので、小規模なアプリなら

通常のアプリ設計で問題ありませんが、

企業が開発するような大規模アプリとなると、

作業分担することが前提となりますので、

MVVMモデル設計を採用するケースがおおいのです。

 

それでは、次回はPrismというライブラリを使用した

MVVM設計について説明していきます。

 

ローカルネットワークにgitリポジトリを作る

いろいろ試したんだけど、

どうやらwindowsからは上手くできないみたい。

なんか、暗号鍵やpgp署名を上手く設定しなくちゃいけないて

結局そのやり方がわからなかった。

 

でもLinuxからはちゃんとできた。

なぜだろう・・・

 

まずはリモート側。

$ mkdir project.git

$ cd project.git

$ git init –bare

これでリモートリポジトリを初期化

 

次はローカル側

$ mkdir project

$ cd project

$ git init

$ git add .

$ git commit -m “message” -a

$ git remote add origin ssh://ユーザ@IPアドレス/project.gitのパス

$ git push origin master

 

あとは、ファイルを更新したら、

$ git add .

$ git commit -m “message” -a

$ git push origin master

でリモートにプッシュできる

 

WindowsマシンにVNCでリモートアクセスする

外出先でも自宅のPCにアクセスしたい。

しかもGUIで。

そういう思いでいろいろ調べて設定しました。

 

基本的にはVNCというアプリを使用する。

でもVNCは基本的に暗号化はされていないので、

入力した内容がそのまま通信されることになる。

この状態でパスワードなんて入力したら大変だ。

 

それ以前に、ルータの壁をどうやって乗り越えるかが問題になる。

 

そのため、以下の方法を使用する。

  • ルータにSSHのアクセスを自宅PCにポートフォワーディングする
  • SSHをトンネルにして、VNC接続する

 

方法はいろいろあるんだけど、

これが一番現実的でセキュアな方法だと思う。

 

で、以下が実際に設定した内容。

●ルータの設定

変更した内容は以下の通り

  • DMZを有効にする。転送先を自宅PCのローカルIPに設定する
  • ポートフォワーディングを設定する。SSHの接続を自宅PCのローカルIPに設定する。なお、ポート番号は通常は22(変更は可能)

 

●自宅PCの設定

内容は以下の通り

  • SSHサーバを立てる

使用したのはPowerShell Server

http://www.powershellserver.com/download/

設定箇所は二箇所

設定が完了したらSTARTをクリックしてサーバを起動

(使用しないときはSTOPしておいた方が良い)

 

この状態で、リモートPCからSSH接続できることを確認する。

接続先のIPアドレス(外部からアクセスできるルータのIP)は、自宅PCから以下のサイトにアクセスすることでわかる

https://www.akakagemaru.info/port/iphost.php

ログインできれば成功

 

  • VNCサーバを立てる

使用したのはUltraVNC

http://forest.watch.impress.co.jp/library/software/ultravnc/

サーバを立ち上げたらローカルネットワークからVNC接続できることを確認した方が良い。

 

●リモートPCの設定

内容は以下の通り

  • SSH転送の設定

使用したのはTeraterm

https://ja.osdn.net/projects/ttssh2/releases/

設定→SSH転送を選択し、追加をクリック

ローカルのポート番号は任意

リモート側ホストにはルータの外向けIPアドレス、ポート番号はVNCサーバのポート番号(通常は5900)を設定

ルータの外向けIPアドレスに接続し、ログインする

 

  • VNCクライアントの設定

UltraVNCを使用する

接続先はlocalhost、ポート番号はSSH転送のローカルポートに設定した番号

 

ログインできればOK

 

 

iPhone8とiPhone X

ども。

今日の早朝に発表があったようで。

オイラはニュースで詳細を知りました。

 

まぁ、驚きは無いというか、

リーク情報がたんまりあったからね。

これはしょうが無い。

 

でも、これは欲しいぞ。

ポイントはこんな感じ。

  • ワイヤレス充電Qiに対応
  • グローバル版でもFelica搭載

さらにiPhone X(テンと読むらしい)では

  • ホームボタン廃止
  • 指紋認証を廃止し、顔認証搭載

iPhone Xは今までのiPhoneとは別物と考えた方が良いかも。

それでも、QiとFelicaは大きいなぁ。

 

Web技術はあれからかなり進歩したもので

オイラが職業訓練で学んだWeb技術はもう通用しないのです。

 

まぁ、アレは5年ぐらい前に学んだもの何ですが、

それだけでは足りない、と言うことです。

と言うことで、実際に現場で覚えた技術をここに書いておきます。

 

composer

PHPのパッケージの依存関係を解決してくれる。

フレームワークのインストールもこれで解決できたりする

 

node.js

元々はサーバサイドでjavascriptを実行できる環境。

今はローカル環境でタスクを自動化する用途で使用する事が多い

 

npm

node.jsでパッケージを管理する

 

gulp

node.js上でタスクを実行するプラグイン

 

例えば、jsやcssを圧縮するのに、gulpを使用して圧縮処理を自動化してwebに公開するケースが多い

 

bootstrap

レスポンシブwebデザインに対応するためのjsライブラリ

まぁ、スマートフォンやタブレットが普及している中で、

画面解像度などが統一されていないので、

解像度別に、そのサイト用にcss書き換えなければならないわけですが

bootstrapを使えば解決してくれる。

 

jquery.js

もはや、使えばければWebデザインができないレベルの必修ライブラリ

本来、長いコードを書いてWebの細かい演出を行う処理を、

このライブラリを使えば簡単に実装できたりする。

 

Vue.js

js上でフレームワークを実現する

まぁ、上手く使えば、Webで細かい演出が使えます

 

まぁ、今のプロジェクトで使っているのがこれで、

これらのヤツを使えば大抵のWebサイトは作れます。

 

糖質データベースを作ろうか

例えばgoogle検索で

「食材名 糖質」

と検索すれば、食材の糖質を検索できる。

これ、絶対間違ってると思うんだ。

ビールの糖質が0gなわけないもん。

まぁ、単位が100gだから、0gと表示しても問題無い、という理屈なんだろうけど。

そこで、糖質データベースを作りたいと思う。

検索窓に食材名を入力すれば、糖質が出力されるやつ

例えば、こんなサイトのようなもの。

https://fooddb.mext.go.jp/

これは文部科学省で作成した、成分表示をデータベース化して検索できるようにしたもの。

これもこれでいいんだけど、炭水化物はわかるけど、糖質はわからない。

糖質は炭水化物から食物繊維を引いたものが糖質です。

まぁ、炭水化物≒糖質とみなしても問題無いのだが。

これはこれで非常に完成度は高くて、オイラが考えているものに一番近い。

でもどうせなら、もっと具体的な製品名からでも検索できるようにしたい、と言うのがオイラの考え。

そして、おいら一人ではデータを集めるのは大変だから、

ユーザーでデータを登録して共有したい。

と言うのがオイラの考え。

 

ちょっと本気で考えてみようか。

 

VSCodeのターミナルからSSHにログインする

PHP Stomeとか使ってるところを見ると、

エディターのウィンドウにターミナルっていう窓があって、

そこからサーバにアクセスしてコマンド実行ができる。

これをVSCodeでやりたい。

 

方法としては、opensshというものを使用する。

Windows版はこちらからダウンロードできる。

https://github.com/PowerShell/Win32-OpenSSH/releases

ダウンロードしたファイルからssh.exeと一緒に入っているDLLを

パスの通っているフォルダに入れる。

おすすめはVSCodeのインストールフォルダの下のbinフォルダの中。

あとは、コマンドラインから

ssh [ユーザー名]@[ホスト名]

と打ち込んだあと、パスワードを入力すればログインできる。