Visual Studio 2019 for Windows / Mac ダブルリリース

Visual Studio 2019 は Windows 版と macOS 版が同時リリースされました。

visualstudio.microsoft.com

f:id:kondoumh:20190406145225p:plain

for Mac

macOS 版からインストールしてみます。以前入れた 2017 Community 版はなぜか起動できなくなってそのまま放置してました。

blog.kondoumh.com

f:id:kondoumh:20190406145822p:plain

とりあえず全部入りで

f:id:kondoumh:20190406145845p:plain

f:id:kondoumh:20190406145906p:plain

わりとあっさり終わりました。2017 をインストールしていたのでその残骸のモジュールアップデートだけで済んだのもありました。

f:id:kondoumh:20190406145932p:plain

Xamarin の master - detail フォームのアプリを生成してみます。

f:id:kondoumh:20190406150005p:plain

ASP.NET Core Web API プロジェクトを追加する にチェックを入れました。

f:id:kondoumh:20190406150024p:plain

f:id:kondoumh:20190406150050p:plain

2017 版と同様なプロジェクト構成です。

f:id:kondoumh:20190406150921p:plain

アプリをビルド・デバッグしてみました。いい感じです。エミュレータは Xcode や Android SDK のものが使われます。Swagger UI も起動して API の確認ができます。

f:id:kondoumh:20190406152509p:plain

ダークテーマにも対応してました。

f:id:kondoumh:20190406154420p:plain

for Windows

次に Windows 版。事前に 2017 は全部アンインストールしてます。

f:id:kondoumh:20190406154701p:plain

f:id:kondoumh:20190406154718p:plain

UWP の開発予定はないし、モバイル開発や Node.js、Python の開発も Visual Studio ではやらないので、ワークロードの画面では [ASP.NET と Web 開発]、[.NET デスクトップ開発]、[C++ によるデスクトップ開発]、[.NET Core クロスプラットフォーム開発] にチェックを入れました。

f:id:kondoumh:20190406154733p:plain

C++ は MFC アプリ開発にはデフォルトのオプションでは足りないのが 2017 のインストール時にわかっているので個別オプションをチェック

f:id:kondoumh:20190406155428p:plain

f:id:kondoumh:20190406160041p:plain

Windows 版のインストールは全部入りじゃなくてもけっこうかかりました。

f:id:kondoumh:20190406164455p:plain

以前作った WPF のプロジェクトを開いてみました。

blog.kondoumh.com

ターゲットフレームワークが入ってないと言われたので別途インストール。

f:id:kondoumh:20190406164851p:plain

マイグレーションできました。コードエディタ上にプロパティの参照情報がオーバーレイされるようになってますね。設定は 2017 のが引き継がれています。

f:id:kondoumh:20190406171233p:plain

MFC アプリのプロジェクトも上記の C++ 追加設定で無事マイグレーションできました。

印象

Mac 版は 2017 をほとんど触ってない僕が言うのもなんですが、2017 の Xamarin Studio をリネームしましたというリリースに比べると、各ツールのインテグレートが進んで Visual Studio 感が出てきている印象です。.NET Core も一緒にインストールされるようになりました。

コードエディタは .NET Core と ネイティブ macOS UI で完全に書き換えたみたいです。

blogs.technet.microsoft.com

Visual Studio for Mac のコード エディターは、Visual Studio on Windows と共有されるコア上に構築された新しいエディターと、ネイティブの macOS UI で、完全に置き換えられました。スムーズな編集およびナビゲーションによりエクスペリエンスが向上しているだけでなく、新しいエディターには、Visual Studio エディターに期待される強力な IntelliSense コード補完およびクイック修正提案もすべて含まれます。

やはり Xamarin でクロスプラットフォームなモバイルアプリ作りたい時は Xcode が利用できる macOS 版を使うのがよさそうです。

Windows 版もインストールが一層改善されています。リリースノートによるとパフォーマンスも大きく改善されている模様です。

.NET Core や Language Service Protcol そして .NET Core CLI が普及すれば Visual Studio なしで、テキストエディタだけで .NET の開発できる世界がもうそこまで来ている気はします。

docs.microsoft.com

しかしながら、ベースラインは 2年に1度の Visual Studio のリリースという時代が当面続くのかなあと。

野良 Scrapbox アプリ - プロジェクトアクティビティ表示ダイアログ

またまた Scrapbox アプリの話。

社内で導入されている Scrapbox。隙間時間に閲覧・更新できて社内の活動も透明化されるということで、我々のように客先常駐が多い環境では導入効果高いです。

導入した管理者の人から、利用状況を把握するためページビュー(集計値) の推移を記録したいという要望がありました。

ページ一覧を取得する API で全ページのリストを取れば可能です。1回のリクエストで取得できる一覧には限りがあるので、繰り返し取得して最後に集計値をダイアログ表示するようにしています。Copy ボタンを押すとクリップボードに内容がコピーされます。

f:id:kondoumh:20190328212609p:plain

これは、僕の個人ページの情報ですが、会社のはすでに2,000ページ、80,000ビューを超えています。

Release v0.6.3 · kondoumh/sbe · GitHub

野良 Scrapbox アプリ - 見出し指定っぽいコンテキストメニュー

Scrapbox には見出し記法はなく、文字の大きさを [** text] というフォーマットで修飾する(* が多いとサイズが大きい) という仕様です。標準のメニューでは * 1個のパターンのみ Strong 記法として指定可能です。

長めの文章を書いていると、文字の大きさを見出し風に指定したい場合があるので、独自コンテキストメニューで4段階で指定できるようにしました。Scrapbox の場合タイトルの文字がだいたいレベル4ぐらいのようなので 1-4 で指定できれば OK ということで。

f:id:kondoumh:20190326004310g:plain

関連する機能として、見出しサイズを指定してプレースホルダーとして挿入するキーボードショートカット (⌘ + 1 など) も以前のバージョンで追加してました。

f:id:kondoumh:20190326005730g:plain

Release v0.6.2 · kondoumh/sbe · GitHub

野良 Scrapbox アプリ - ページ情報ダイアログを出せるようにしました

コンテキストメニュー Info からページ情報を表示するダイアログを出すようにしました。

f:id:kondoumh:20190309105249p:plain

ページを開く前に概要を把握できたらと思い、ページへのリンクに対してコンテキストメニューを表示しています。

タイトル、ページを作成したユーザ、共同編集ユーザ、ページ概要を表示します。

ページ概要は、本文の先頭5行ぐらいが入っている模様です。

ダイアログから直接ページを開くことも可能です。

f:id:kondoumh:20190309014844p:plain

Release v0.6.1 · kondoumh/sbe · GitHub

社内勉強会で Electron の話をしました

そもそも社内勉強会で喋るというのが初だったかも。

www.slideshare.net

趣旨としては、

  • Electron 熟成してきてるよ
  • クロスプラットフォーム開発大変だけど Electron はけっこう手軽
  • PWA の方が流行るかもしれないけどねー

という感じです

簡単なハンズオンもやりました。

  • WebView を使うサンプルを作ってみる
  • 独自の Menu を追加してみる
  • WebAPI からデータを取得してレンダリングしてみる

先日の Vue アプリの Electron 化もデモしました。

blog.kondoumh.com

Main process 経由で OS ネイティブのプログラムと Web 画面の相互運用ができることに興味を示した人がいました。

野良 Scrapbox アプリの fav 機能

Scrapbox の野良 Electron アプリにちょっとしたヒストリとブックマーク機能を追加しようと思いました。

最初はメニューに履歴を追加してピン止めするような UI を作ろうとしましたが、Electron では動的にメニューアイテムを追加削除する API が提供されてませんでした。

そこでツールバーに select-box を置いて動的に option 要素として追加するようにしてみました。

履歴とピン止めを同じリストで扱う UI の実装が複雑になるので、とりあえずピン止め用のリストを切り出しました。

そのうち履歴要らないって気持ちになってきました。Scrapbox 自体が履歴表示しますし、自前のページリスト画面もあるし。

ということで、fav 機能だけに絞りました。

着け外しの UI も実装、操作ともに面倒だし、fav リストに入れたページは最上位に出して、一定数の上限値を超えたものは古い方から消していくキューのような感じで、キューから消えちゃったものはまた検索して出せばよいと。

f:id:kondoumh:20190227055053p:plain

結果、ヒストリ的なピン止め機能といった UI に落ち着きました。

f:id:kondoumh:20190228055504g:plain

Release v0.6.0 · kondoumh/sbe · GitHub

Vue を使って Electron アプリを開発する

blog.kondoumh.com

Vue のことがちょっと分かった気になれました。すると、最近よく触っている Electron でのアプリ開発にも取り込みたくなります。

github.com

Scrapbox in Electron は WebView でサイトの画面を表示していますが、Electron では当然自前で画面を作ることもできます。その場合は Vue のようなフレームワークを適用するのが自然でしょう。

  • Web とアセットを共有したい
  • フレームワークのツールチェインや知識を流用したい

という意図があります。

electron-vue という Vue と Electron を使ったプロジェクトのボイラープレートがあります。

f:id:kondoumh:20190224130025p:plain

github.com

vue-cli が導入されていれば、以下のコマンドを叩いて、プロジェクト名などを入力するだけ。

$ vue init simulatedgreg/electron-vue my-project

Electron のインストールもお任せできます。

生成されたプロジェクトディレクトリに移動して

$ npm run dev

で、デフォルトの Electron アプリが起動します。

f:id:kondoumh:20190224125417p:plain

Vue 用のフォルダは src/renderer/components 配下になりますので、ここに Web アプリ用の Vue ファイルなどを配置します。

f:id:kondoumh:20190224140252p:plain

動きました。

f:id:kondoumh:20190224133624p:plain

Electron アプリとして作りこむためには、Renderer と Vue コンポーネント間の連携が必要ですが、そこをどう作りこむのか、Web とアセットの共有がどこまで可能かについてはやってみないと分からないところです。

2019/2/27 追記

Main Process のメニューから Renderer Process 経由で、ダイアグラムにノードを追加するコードはこんな感じになりました。

src/main/index.js

function createMenu () {
  console.log('createMenu')
  const template = [
    {
      label: 'Edit',
      submenu: [
        {
          label: 'add',
          click () {
            mainWindow.webContents.send('add', 'hoge')
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

src/renderer/components/JointDia.vue

<script>
  import joint from 'jointjs'

  export default {
    name: 'JointDia',
    mounted () {
      this.graph = new joint.dia.Graph()
         :
      this.$electron.ipcRenderer.on('add', (e, data) => {
        this.addNode(data)
      })
    },
</script>

this.$electron.ipcRenderer で IPC イベントを処理できます。

この例では、イベントを受けたいコンポーネントの mounted に直接ハンドラーを書きましたが、App.vue からディスパッチするようにすれば、サブコンポーネントは Web と同一にできそうな気がしました。