ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

UWP アプリ 「みお×ぽん」 のバージョン 1.1.0 をリリースしました

2016 年 10 月 1 日、IIJmio の 「IIJmio 高速モバイル / D サービス」 が au の回線にも対応して 「IIJmioバイルサービス」 に改称されました。

それに合わせて、「IIJmioバイルサービス」 のクーポン切り替えを行うことができる UWP アプリ 「みお×ぽん」 をバージョンアップしました。

www.microsoft.com

文言変更や一部デザイン変更、バグ修正のみであんまり大きな変更はしていないのですが、ご利用くださっている方はバージョンアップしてくださいませ。

変更内容

  • IIJmio 高速モバイル / D サービス」 という文言を 「IIJmioバイルサービス」 に変更。
  • 画面幅が小さい場合には、閉じた状態のナビゲーションウィンドウを完全に非表示にするように変更。
  • UWP アプリのライフサイクルを適切に扱えていなかった問題を修正。 *1

ちなみに公式アプリもあるよ

「みお×ぽん」 の最初のリリース時には IIJ による公式の UWP アプリはなかったのですが、2016 年 6 月ごろに公式アプリがリリースされました。

やったぜ!

*1:昔の MS のサンプルプロジェクト通りの実装だとだめっぽい。 これに関してはまた書こうと思う。

React Native の Universal Windows Platform サポートを試してみた

React Native が Universal Windows Platform をサポートするという発表が、2016 年 4 月の F8 にて MicrosoftFacebook により行われました。 すなわち、React Native を使って Universal Windows Platform (UWP) アプリを開発できるようになります。

blogs.windows.com

上のブログ記事の公開時点では、React Native の本家とは独立した Git リポジトリに UWP サポートが入っているものが公開されているのみで、本家の方には UWP サポートは入っていません。 今後、React Native プロジェクトの本家に UWP サポートが追加されていくようです。

仕組み

React Native の仕組みが、冒頭で紹介したブログ記事で簡単に紹介されています。

Under the hood, React Native enables app builders to declare their UI using JavaScript and React, and the framework translates the React DOM from JavaScript into method calls to view managers on the native platform, allowing developers to proxy direct calls to native modules through JavaScript function invocations. In the case of React Native on UWP, the view managers and native modules are implemented in C#, and the view managers instantiate and operate on XAML elements. We use Chakra for the JavaScript runtime, which can be consumed by any UWP app without any additional binaries being added to the app package.

React Native on the Universal Windows Platform | Building Apps for Windows

React Native でアプリ開発をする場合、開発者は JavaScript と React で UI を定義し、React Native のフレームワークが React DOM をもとにネイティブプラットフォームの View マネージャのメソッドコールを行ってネイティブの UI 要素を生成します。 また、ネイティブモジュールのメソッド呼び出しを JS から行うこともできます。

UWP での React Native の場合は、ネイティブの UI マネージャやモジュールは C# で実装されており、それらを JS から使うことができます。 JS 実行環境には Chakra が使われるため、アプリに JS 実行用の追加のバイナリを含める必要はないとのことです。

試してみた

まだ React Native 本家に UWP サポートは入っていませんが、UWP サポートが入っている Git リポジトリが公開されているので試すことができます。 というわけでリポジトリに入っているデモプロジェクトを動かすところまでやってみました。

リポジトリ

下記のリポジトリです。

UWP サポートに関するドキュメントは、今のところ次のものしかなさそうです。

試し方

上のドキュメントに書かれている通りに進めれば試せます。 簡単に流れを書くと次のような感じです。

  1. まずは Node.js や Python などの必要なツールをインストールする。
  2. リポジトリを Git で clone してくる。
  3. プロジェクトのディレクトリで npm install
  4. プロジェクトのディレクトリで node local-cli\cli.js start
  5. Visual Studio 2015 で ReactWindows\ReactNative.sln を開き、Playground プロジェクトを実行するとアプリが起動する。

Visual Studio 側で開かれるプロジェクトは、React Native と UWP の橋渡しのための機能群やアプリのガワの部分だけです。 アプリ内部の JS で書かれている部分はプロジェクトの Examples\UIExplorer\UIExplorerApp.windows というファイル (Playground プロジェクトの AppReactPage.cs ファイルで指定されている) で、JS 部分は node local-cli\cli.js start で起動されたプロセスがアプリのガワの方に渡すっぽいです。 (詳しいことはわかってない。)

アプリが起動すると、最初に次のような画面が開きます。

f:id:nobuoka:20160504020228p:plain

しばらくすると次のような表示になるはずです。

f:id:nobuoka:20160504020423p:plain

JS ファイルを変更したら、Ctrl + R で更新できます *1

とりあえずデバッグビルドで動かすことは簡単にできましたが、リリースビルドの作り方とかはよくわかってないです。

雑感

UWP アプリ開発においては、もともと JS + HTML + CSS での開発がサポートされています。 Windows Runtime API も基本的には JS からそのまま使用できます。 よって、単に 「JS + React でアプリ開発ができる」 という点では、React Native を使った場合ももともとの JS サポートも大差はありません。

もともとの JS サポートと React Native を使った場合とを比べて一番違ってくるのは、UI 周りかなと思います。 前者は HTML + CSS で UI を記述しますが、後者は本来であれば XAML で記述される UI を JS 側から操作する、ということになります。 Windows 8 や 8.1 の Windows ストアアプリの頃は、C# + XAML での UI コンポーネント相当のものが WinJS で提供されていましたが、Windows 10 の UWP アプリでは、C# + XAML では使えるカレンダーなどのコンポーネントが WinJS では提供されていないなどの差が出てきました。 同じ UI コンポーネントを異なる環境用に提供してメンテナンスするのはコストが大きいのかもしれません。

WinJS が C# + XAML の UI コンポーネントを全てカバーしきれていないという状況の中で、React Native は 「慣れている JS + React でアプリ開発したいけどネイティブの UI コンポーネントを使いたい」 という人の有力な選択肢になるかなと思います。 もちろん、もともとの JS + HTML + CSS でのアプリ開発が React Native に劣っているというわけではなく、HTML や CSS に慣れている人にとっては JS + HTML + CSS の方が view 周りをごりごり書いていくことができたり、web 側の UI ライブラリをそのまま使えたりできるといった利点もありますので、どちらを選ぶかは状況次第という感じになりそうです。

ともかく React Native で UWP アプリ開発ができるようになるのは喜ばしいことですね!

*1:文字入力用のフォームにフォーカスが当たっているときでないと反応しませんでした。

UWP アプリ 「みお×ぽん」 をリリースしました

2016 年 1 月 19 日に、Universal Windows Platform (UWP) アプリ 「みお×ぽん」 をリリースしました。 下記ページからダウンロードできます。

www.microsoft.com

どんなアプリ?

株式会社インターネットイニシアティブが提供するインターネット通信サービス 「IIJmio 高速モバイル / D サービス」 の利用状況の確認と、高速通信のためのクーポンの有効・無効の切り替えを行うことができます。 Windows 10 を搭載した PC や、Windows 10 mobile 端末などで利用できます。

IIJ 公式アプリ 「みおぽん」 (Android 用 / iOS 用) の機能を Windows プラットフォームで提供するために開発しました。

内部的には、IIJ の提供する 「みおぽん API」 を使用しています。

既知の問題点

  • Windows 10 mobile で IIJmio アカウントに接続しようとしても、ログイン画面が崩れた状態で表示され、ログインできない問題があります。 (後述のとおり、バージョン 1.0.1 で解決しました。)
    • アカウント情報は Windows 10 プラットフォームと mobile プラットフォームで同期されますので、mobile で使用したい場合は先に PC 側でアカウントに接続することでこの問題を回避できます。
    • 早めに解消できるように頑張ります……!

2016-01-23 追記

  • Windows 10 mobile で IIJmio アカウントに接続できない問題は、2016 年 1 月 23 日にリリースしたバージョン 1.0.1 で解消しました。

TypeScript + Less + HTML で UWP アプリを開発するプロジェクトのテンプレート

この記事は、「Windows & Microsoft技術 基礎 Advent Calendar 2015」 の 22 日目の記事です。 昨日は wgag さんによる 「rise4fun の検証ツールで遊ぼう」 でした。

さてさて、今年 7 月末に Windows 10 がリリースされて、先月末には Windows 10 mobile 端末が日本でも発売され始めましたね! めでたい! というわけで Windows 10 や Windows 10 mobile で動く UWP アプリ (Universal Windows Platform アプリ) の開発の話をしようと思います。

TypeScript + Less + HTML の UWP アプリ用プロジェクトテンプレート

UWP アプリの開発には C# + XAML を用いたり C++ + XAML を用いたりする方法もありますが、HTML + JS + CSS という web 技術もサポートされています。 私が UWP アプリを書くときは HTML + JS + CSS で開発しています。

HTML + JS + CSS で開発する場合、実際には JS の代わりに TypeScript を使用したり CSS の代わりに Less を使用したりしたいところです。 また、JS のライブラリの管理や TypeScript の型定義ファイルの管理なども npm のモジュールを使って行いたいですね。 新しくプロジェクトを開始するときに、そういった開発環境の整備を毎回する必要があるのが結構面倒なので、いい感じのプロジェクトテンプレートがあると便利なはずです。 先ほど最初のバージョンであるバージョン 0.1.0 をアップロードして GitHub 上に置きましたのでご利用ください!

使い方

ZIP ファイル (WindowsUniversalTemplateApp-0.1.0.zip) をダウンロードし、Visual Studio 2015 の作業ディレクトリ中の Templates\ProjectTemplates\JavaScript というディレクトリ内に置いてください。 Visual Studio 2015 を起動して、新しいプロジェクトを作成しようとすると 「インストール済み」 「テンプレート」 「JavaScript」 の中に 「TemplateApp」 という項目があるはずなので、それを選択してプロジェクトを作成するだけです。

f:id:nobuoka:20151222232828p:plain

後は、ビルドすれば Node.js や npm のセットアップなどが自動的に行われますし、「デバックを開始」 すればアプリが起動するはずです。 なお、初回ビルド時はセットアップのために結構時間がかかります。 ちなみに、ソリューションプラットフォームを 「Any CPU」 にしていると以下のようなエラーが表示されてしまいますのでご注意ください。 (デバック対象プラットフォームに適したものを指定する必要があります。)

Your project.json doesn't list 'win10' as a targeted runtime. You should add '"win10": { }' inside your "runtimes" section in your project.json, and then re-run NuGet restore. (C:\Program Files (x86)\MSBuild\Microsoft\NuGet\Microsoft.NuGet.targets, line 211)

プロジェクトの内容

プロジェクトで使用しているライブラリ等の紹介をします。

Less

Less のコンパイルには、Web Compiler を使用しています。

新しい Less ファイルを追加した際には compilerconfig.json に追記する必要があります。 Visual Studio に Web Compiler 拡張をインストールしている場合は GUI 操作でそこら辺の操作が可能です。

LESS のコンパイル結果の CSS ファイルをアプリに含めるためには MSBuild の ItemGroup の中に項目として CSS ファイルを含める必要がありますが、それは下記のあたりでやっています。

TypeScript

TypeScript のコンパイルには Visual Studio に組み込まれている TypeScript の処理系を使用しています。 Visual Studio 組み込みの機能を使うと Visual Studio との連携が便利ですが、他の npm モジュールによるツールと連携させようと思うと npm で tsc をインストールして使用した方が便利な気もするので、将来的には npm の tsc を使うようにした方がいいかなぁと思っています。

JS のライブラリ管理や TypeScript の型定義ファイルの管理など

JS のライブラリ管理や TypeScript の型定義ファイルの管理には npm モジュールを使用しています。

npm を使用するためには Node.MSBuild.Npm NuGet パッケージ を使用しています。 昔は Npm パッケージを使用していたのですが、バージョンが古いという問題があったり、プロジェクトのディレクトリ階層が深いとそもそもインストール時に失敗するという問題があったりして移行 *1 しました。

JS のライブラリ管理には Bower を使用して、TypeScript の型定義ファイルの管理には dtsm を使用しています。 これらのツールを使用するのは、MSBuild の Target として定義しているので、ビルド処理の中で実行されるようになっています。

初期状態では、WinJS のインストールや、WinJS や WinRT の型定義ファイルのインストールが実行されるようになっています。

将来的には

将来的には React を導入したり、TypeScript をモジュール化して管理しやすいようにしたいなーと思ってます。

おわり

明日は aetos さんによる PE ファイルについての話のようです! 楽しみですね!!

*1:というか自作

UWP アプリ開発に TypeScript + React を導入することの検討 (Node.MSBuild.Npm の紹介)

こんにちは! 株式会社はてなにて、主に 「はてなブックマークAndroid アプリの開発を行っている id:nobuoka です。 この記事は、「はてなデベロッパーアドベントカレンダー 2015」 の 14 日目の記事です。 昨日は id:hatz48 による 「TypeScript だけで Web アプリケーションを作る」 でした。

今日は、昨日に引き続き TypeScript の話題となります。 主にクライアントサイド (特に UWP アプリ) での TypeScript と React の組み合わせについて検討したいと思います。

(この記事の内容は、UWP アプリへの導入を目的としたときの TypeScript + React の環境の一例であり、ベストプラクティスではありません。 より良い方法などがありましたら教えてくださいませ。)

UWP アプリと TypeScript + React

UWP アプリとは 「Universal Windows Platform アプリ」 のことで、Windows 10 で導入された Windows プラットフォーム向けのアプリの一種です。 Windows 8 で導入された Windows ストアアプリや Windows Phone 8.1 向けの Windows Phone アプリの進化版という感じですね。

現在のところ株式会社はてなでは UWP アプリの開発は行っていませんが、Windows ストアアプリ 「はてなブックマーク」 を 2012 年にリリースしています。 *1

JS を快適に書く : TypeScript の導入

Windows ストアアプリや Windows Phone アプリと同様に、UWP アプリも JS + HTML + CSS で開発することができます。 Windows ストアアプリ 「はてなブックマーク」 も JS + HTML + CSS の組み合わせで書かれています。

JS は Web 開発者にとって馴染みのある言語ですので、アプリ開発に取り掛かりやすいというのは利点ですね。 一方で、素の JS には変数に型がないためリファクタリングなどがしづらいという難があります *2。 それを解決するため、いわゆる Alt JS を使用することが検討されると思いますが、UWP アプリ開発で使用するのであればまず TypeScript が候補にあがるでしょう。 UWP アプリ開発に使用される統合開発環境 (IDE) Visual Studio 2015 では標準で TypeScript がサポートされているため、UWP アプリのプロジェクトに容易に TypeScript を導入できます。 Microsoft が TypeScript のリリースを行っているあたりも TypeScript 導入にあたっての安心感につながっています。 よほど TypeScript と比べて有利な言語があればそれを使うとよいかもしれませんが、私自身は現状では TypeScript を使うのが一番だと考えています。

実際に 「はてなブックマークWindows ストアアプリ *3 でも TypeScript を導入して開発しており、素の JS を使うのに比べて楽に開発を進めることができています。

View の処理を快適にするために : React の導入を検討

TypeScript を導入することで JS の変数に型付けが行われて IDE のサポートを受けやすくなり、JS の世界については快適になります。 しかしながら TypeScript を導入するだけでは view 操作 (「何らかのデータを画面に表示する」 という処理) の部分はあまり改善されません。 UWP アプリ開発のための JS のライブラリとして WinJS というものがあり、画面にデータを表示するためのテンプレート・バインディングの機能が提供されているのですが、これがなかなか素朴な仕様で、型の恩恵を受けづらいためです。

はてなブックマークWindows ストアアプリの開発でも、やはり View を扱う部分がきれいに書けず、よりよい方法を取り入れたいと考えています。

そこで、何らかのライブラリを導入することを検討しました。 候補としては、以下のものを考えました。 いずれも JS 界隈で話題になりやすいライブラリですね。

  • React
    • JSX 構文を使って JS 側に HTML 構造を記述する。
    • TypeScript との相性が良い。
    • アプリ開発をするうえで扱いやすそう。
  • Polymer
    • 標準の Web Components を意識して開発されており、将来性はあるように見える。
    • 独自の HTML タグを定義して HTML 側で使用できるので、(React と比べて) サーバーサイドで HTML を生成するような場面で扱いやすそう。
    • TypeScript との相性は不明。
  • AngularJS
    • 現在 Angular 2 が開発されており、バージョン 1 と 2 の互換性がなくなりそうなことから、現在 Angular を導入するのはリスキーだと考えられる。
    • View 部分を手軽に扱うためだけに導入するには規模が大きいように感じる。

全部試してみてどれが良いか評価できればよかったのですが、まずは TypeScript と相性がよく、アプリ開発で扱いやすそうな React だけを試してみました。

TypeScript と React (JSX) の相性

React では JSX 構文 (JSX syntax) を用いて JS の中に DOM 構造を記述します。 そして、TypeScript では JSX 構文がサポートされています。

JSX 構文での型チェックなどもサポートされているので、React を使うことで View の処理の部分でも IDE のサポートが受けられやすくなります。 プラグインなどではなく TypeScript の処理系に JSX 構文の処理が組み込まれているので、TypeScript と JSX の相性は非常に良いといえます。

TypeScript + React の環境

さて、ここからは実際に TypeScript + React を UWP アプリ開発で用いるための環境について考えます。 UWP アプリは、ローカルファイル上の HTML + JS + CSS をブラウザ上に表示するのと似たような仕組みで動きますので、まずはローカルファイルシステム上でビルドしてブラウザ上に表示できるようにする環境を考えます。

TypeScript + React の環境を整えるためには、npm を使用するのが簡単でしょう。

React を使うにあたっては CommonJS モジュールシステムを使うことが推奨されていますので、TypeScript を記述する際はモジュール形式で記述し、CommonJS 形式でコンパイルするようにしました。

We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.

Getting Started | React

コンパイルした JS をブラウザ上で実行するために、また、UWP アプリの JS ファイルとして使用するためには、webpackBrowerify などを使用してパックしてやる必要があります。 今回は私は webpack を使用してみました。 (webpack を選択した理由は特にありません。 同僚からは、「webpack は大艦巨砲という感じなので、Browserify で事足りるなら Browserify で良さそう」 という意見をもらいました。)

これらのツールを使用して TypeScript + React のビルドを行うようにしたサンプルプロジェクトを GitHub で公開しています。 (ここではビルドシステムとして Gradle を使用しています。)

UWP アプリのプロジェクトへの TypeScript + React 開発環境の導入 : Node.MSBuild.Npm の紹介

さて、最後に UWP アプリのプロジェクトに上述の環境を構築することを考えましょう。

上で紹介した Gradle を使ったプロジェクトでは、Gradle から Node.js と npm を使用するために Gradle Plugin for Node を使用しています。 このプラグインは、ビルド時に Node.js と npm をダウンロードしてきて、セットアップしてくれるというものです。

一般的な UWP アプリのプロジェクトのビルドシステムである MSBuild でも同様の機能を使えれば、上で紹介したプロジェクトの Gradle 部分を MSBuild に置き換えることで、UWP アプリのプロジェクトに TypeScript + React の開発環境を導入できるでしょう。

MSBuild に似たような機能を提供する NuGet パッケージがないかどうか探したのですが、NuGet パッケージの中に node.exe や npm の各種ファイルを含むようなものは見つけられたものの、ビルド時にセットアップするタイプのものはなさそうでした *4。 そこで、そのような機能を持つ Node.MSBuild.Npm という NuGet パッケージを作成し、公開しました。

www.nuget.org

使用方法は簡単です。 まず、Visual Studio で NuGet パッケージマネージャを起動して 「Node.MSBuild.Npm」 を検索してインストールしてください。 あとは package.json を記述して、ビルド時に実行したい処理を build スクリプトとして package.json に定義するだけです。

例えば、TypeScript + React 環境を構築してビルド時に TypeScript のビルドや webpack による変換を実行するには、以下のように記述します。

{
  "name": "my-app",
  "private": true,
  "devDependencies": {
    "react": "^0.13.3",
    "webpack": "^1.12.9",
    "typescript": "^1.7.3",
    "dtsm": "^0.13.0"
  },
  "scripts": {
    "build": "dtsm install & tsc -p ts --outDir built\\typescript & webpack"
  },
  // 一部略
}

ビルド時に実行したい処理の記述方法に関しては、もう少し扱いやすいようにできると良いなぁと思っています。

ぜひご利用ください。

TypeScript + React 環境に対する評価

まだ軽く試している段階ですが、現時点での評価は以下のような感じで、個人的には他のライブラリ (Polymer や AngularJS) を試すまでもなく UWP アプリ開発に導入して良さそうという気がしています。

  • (良い) TypeScript が JSX をサポートしているので、JSX 構文内でも IDE のサポートを受けやすくて記述しやすい。
    • これは本当に便利です。
  • (良い) React 自体は大きなフレームワークではなく、導入がしやすい。
    • 画面内の一部の DOM 構造の構築のみに React を使用するなど。
  • (良い) React により View のコンポーネント化ができ、開発しやすくなる。
  • (良い) WinJS 側で React 用のアダプタが用意されており、WinJS と一緒に使いやすい。
  • (微妙) TypeScript + React の環境を作るのが少し面倒。 慣れれば問題はなさそう。
    • TypeScript をモジュールとして記述するかどうかや、モジュールとして記述する場合には browserify を使うか webpack を使うか、といったことで悩みそうです。 (React は CommonJS のモジュールシステムを使用することを推奨している。)
  • (不明、問題なさそう) 将来にわたってメンテナンスしやすいかどうか。
    • Facebook によりリリースされているので、ライブラリのメンテナンスの心配はそれほどなさそう。
    • 使い方次第ではあるが、React を使いながら徐々に別のライブラリに移行するというのも難しくはなさそう。

はてなブックマーク」 の Windows ストアアプリを更新する際には、こういった技術を導入することでより開発しやすく、メンテナンスしやすいコードを書けるようになりそうです。 *5

おわりに

はてなでは、より開発しやすく、よりメンテナンスしやすいコードを記述していこうとするエンジニアを募集しています!

hatenacorp.jp

明日の 「はてなデベロッパアドベントカレンダー 2015」 の担当は id:motemen です。 お楽しみに!

*1:以下 UWP アプリ向けの話をしますが、Windows ストアアプリでも基本的に同様です。

*2:UWP アプリに限らず

*3:UWP アプリではないですが、大体一緒です。

*4:NuGet パッケージ内に node.exe や npm を含むようなタイプでも悪くはないのですが、exe ファイルを複数プロジェクトで共有したかったり、プロジェクトの階層が深い場所にあると npm のパッケージのインストールに失敗するという問題があったりするので、ビルド時にホームディレクトリにインストールしてくれるタイプのものが欲しいのでした。

*5:この文は 「はてなブックマークWindows ストアアプリの大幅な更新を予告するものではありません。