銀の光と碧い空

クラウドなインフラとC#なアプリ開発の狭間にいるエンジニアの日々

めとべや東京#3 でライブコーディングしてきました

昨日、めとべや東京#3 (Room metro Tokyo #3) - PARTAKE 開催しました。参加していただいたみなさん、講師のみなさん、スタッフのみなさん、ありがとうございました。

今回、一度やろうと思っていたライブコーディングをやってみました。結果としては、まだまだ改善の余地あり...ということでして、今後の自分や同じことをやろうとしている方向けにまとめておこうと思います。

目的とかは資料に書いてあるのでどうぞ。

さて、今回ライブコーディングで作るストアアプリですが、以下の要素でコーディングできたらいいなと思い準備していました。

  • MVVM Light Toolkitでのプロジェクト構成
  • ViewModel作成
    • ViewModelに画面に表示させるプロパティを作成
    • ViewModel にリスト側のプロパティを作成
  • Model作成
    • ModelクラスにWeb APIたたいてデータを取得する処理を作成。このとき、APIの認証トークンはべた書き。
    • MVVM Light Toolkit のIDataServiceインターフェースにデータ作成処理追加。
  • 画面遷移時の処理
    • MainViewModel にデータ取得してリストのViewModelを作成する処理を作成
    • MainPage の OnNavigatedTo をオーバーライドして、画面遷移時にViewModelのデータ取得処理を追加
  • View 作成
    • CollectionDataSource の作成
    • XAMLにGridView を追加してViewを作成する
    • GridViewをSnapped状態(MVVM Light 側でViewStateとして定義されている)のときにListViewに切り替えるようにする
    • GridViewのItemClickイベントでViewModel側のコマンドを実行して、RoomPageに遷移するようにする(このときRoomView追加)
  • RoomViewModel (追加するRoomViewのViewModel)の作成
    • Viewに表示するプロパティ追加
    • データを読み込むLoadメソッドを追加
    • メッセージを投稿するコマンドを追加
  • RoomViewの編集
    • ルーム名の表示
    • メッセージ入力と送信ボタンを追加
  • SettingFlyout の追加
    • DataService クラスを編集してAPIトークンを設定できるようにする。PasswordVaultを用いてトークンを保存。
    • ポップアップを追加してSettingViewと名前を付ける。APIトークンの入力と保存ボタンを付ける
    • SettingViewModel を作成し、プロパティとコマンドを追加。
    • MainPage に遷移するときに、APIトークンが設定されているかチェックして、設定されていなければSettingViewを表示するようにする

当然全部できるとは思って居なかったのですが、RoomViewの追加くらいまではいけると思っていましたが、そこまでもいけず... 普段の感じではコーディングできないので、スムーズにいきませんでした。

一応、リハーサルの時に上の要素を取り込んで作っておいたプロジェクトはこれになります。

また、当日実際にライブコーディングでできたものがこれになります。

両方とも、APIトークンだけ念のため変更しています。

思っていたところまでできなかったのもありましたが、それ以上にプロジェクターに移った文字が小さくで見づらかったかと... VisualStudioのエディタ拡大でやろうかと思っていましたが、それだと表示領域がせまくてわかりづらそうで、 じゃあ拡大鏡で、と思ったものの、これだとあまりに使いづらくてコーディングできず...という未解決のままになってしまいました。

後からアドバイスをもらったのですが、拡大してコーディングしづらいならいったん普通にコーディングして、エディタ拡大してみてもらう、という繰り返しがいいかなと。 あと、「ここのIntelliSenseが」というときについては、エディタ拡大で拡大されないので拡大鏡がいいようです。あと、拡大鏡が使いづらい場合はZoomItもおすすめです。(Windows7以前のときは使っていたのですが、すっかく忘れていました)

というわけで、やり方見直してもう一度ライブコーディングしたいですね、というのが次の目標です。