【手抜きUI】C#でCUIな人が楽するためのGUIフレームワーク（萌えあり？）　その１ (2版）


楽に出来るとは言ってない・・
まずは紹介編から。ここでは本システムの概要から、サンプルの動かし方まで書かせていただきます。

アプリを書きたい人は

[【手抜きUI】C#でCUIな人が楽するためのGUIフレームワーク（萌えあり？）　その２ (2版）](http://qiita.com/GDaigo/items/aae9f3cdddb349501ce7)

に諸々書かせて戴きました。が、まずこちらをざっと見てもらえると嬉しいです。

# 2版で何したか

諸々事情がありまして、DLL化しました。つか、初めからしろって話で・・申し訳ございません。。
それに合わせて、設定ファイルの場所などを変更しています。

# これ何？

通信とか計算など凝った入出力は不要なんでＤＯＳアプリでガシガシやってたら、「ＧＵＩにしてくれるかな」と笑顔で言われ、GUI化を楽したいと考えている人に向けてこの　CuiHelper　を作ってみました。とりあえず形になったので、上げさせて戴きます。

VisualStudio（C＃）で入力と出力に関して定番的なものを用意しました。
なので、本来書きたい通信系とか計算系の処理を書いてしまえば、後はそれに繋げるだけで一応GUIっぽい感じに仕上げる事が出来ます。HTMLの知識が必要になります（が、[わかばちゃん](https://www.amazon.co.jp/dp/4863541945/)ぐらいで大丈夫です。私がそうなので）

後、[プロ生ちゃんなどマスコットな子たち](https://mascot-apps-contest.azurewebsites.net/2015/Awards)をアプリに取り入れたい人も向いているかもしれません（笑）

こんな需要が私以外にどれだけあるかは分からないです。。

# 入出力で使えるもの

以下を用意しました。

## 入力

- テキスト（TextBoxの入力文字列）
- 選択された指示（ComboBoxで選んでButtonをクリック）
- 食わせたいファイルをドラッグ＆ドロップ

## 出力

- イメージ（JPGとかPNG）とか
- HTML一式（テンプレートも入れてあります）
- 一時的な出力報告を行うTextBox

# どんな感じで実装するのこれ？

## 実装の流れ

以下の流れで実装できるようになるといいなぁ・・を目指して作っています。

1. まぁザックリとアルゴルリムとか組みたいコードのイメージを。
2. 入力系をどうするか本仕様を見ながら決めていきます。
3. で、実際に組みたいコード（通信処理とか、計算とか）を書きます。
4. 次に出力系を組み上げます。以下から必要に応じて作ってください。
 1. 細かかったり、文章など長い結果の場合はHTMLを作ってください。テンプレもあるので、必要なトコだけで良いです。
 2. 出力に見合った画像（女の子の反応とか）を用意。画像はひとつのフォルダにまとめる必要があります。
 3. 短いコメントが必要ならTextBoxに出力するテキストを用意
5. 後はそれをコードで指定するだけ。

なので、絵を出したいからImageBoxを配置してぷろぱてぇが・・とかListBox系でデータをどう見せるかとかは考えなくて良いです。

サンプルも置いています。参考になるかもしれません。

## もう少し具体的に

### 入力は？

イベント関数がそれぞれ設定されていますので、やりたい処理をそこに書く感じです。

### 出力は？

サービスを提供するクラスを用意していますので、それを使って出力プログラムを書いて下さい。

# ダウンロードして使う

## 要件

 * VisualStudio2015を使います。
 * WIndows7,10 (共に64bit）、Windows8.1(32bit)で確認しています。
 * 開発者がアホのため、ちょっと設定とか必要がです。それに付き合ってくれる人
 * 出来立てなので生暖かい目で見守ってくれる人

## ダウンロード

[GitHubのここ](https://github.com/gdaigo82/cui_helper)からダウンロードして下さい。
以下3つのフォルダから構成されている事を確認します。

* __CuiHelperLib__　VisualStudioのプロジェクトです。DLLを作成します。
* __CuiHelperApp__　VisualStudioのプロジェクトです。上記のDLLを使ったサンプルアプリです。
* __CuiHelperContents__　本システムが使うWeb系（HTML）の集まりです。

## ビルド

手抜きをしてしまって、申し訳ありません。少し設定して戴く必要があります。setting.jsonの修正が必要です。
__場所が変更されていますのでご注意__

* CuiHelperApp\CuiHelperApp\Resources\setting.json をエディタで開きます。

```js
{
    "parameters":{
        "ImagePath":"C:\\CuiHelperContents\\img\\",
        "ContentsPath": "C:\\CuiHelperContents\\"
     }
}
```

* ContentsPathの項目に落としたCuiHelperContentsフォルダのパスを指定します。
* ImagePathには表示で使う画像ファイルのあるフォルダを指定します。
 * GitHubから落とした状態なら、上記のようにContentsPathに「￥￥img￥￥」を追加したパスを指定します。
 * 上の”￥”は2バイト文字なのでコピペしないで下さい
 * __一応この使い方を標準とします。__

これが終われば、後はビルドして実行で起動出来る・・筈です。問題が無ければ以下、図１のように表示されます。エラーが出るようでしたら上記のパスが正しく設定されていないかもしれません。

![cuihelper_start.png](https://qiita-image-store.s3.amazonaws.com/0/129334/ebbc28e5-9661-a935-62ad-da2304d4c44f.png)

___図１ 起動イメージおよび入力方法___

__注意としてドラッグ&ドロップは下側にお願いします。__上側にやると、ブラウザが受け取ってしまって、CuiHelperで処理が出来ません。。

## 内容確認

GitHubから落とした状態では、以下のサンプルを入れています。

* TextBoxに文字列を入れると、数値か文字列かを判定する
* テキストファイルをドラッグ＆ドロップすると、その内容を表示する。
* 電卓アプリを起動する事が出来る
* 画像ファイルを選択して、その内容を表示する。

以下の手順で内容を確認できます。

1. 図1左側（プロ生ちゃんの上）にあるTexoBoxをクリックして適当な数字を入れ、ENTERキーを叩いて下さい。数値か文字列かを判別して表で表示されます（図２）

![cuihelper_table.png](https://qiita-image-store.s3.amazonaws.com/0/129334/6c7418a2-9447-6c0a-8db0-cce015975d4e.png)

___図2 テキスト入力結果。こんな表も出せます。___

2. エキスプローラを開いて適当な .txt を下側のプロ生ちゃんかその横のTextBoxにドラッグ＆ドロップしますと、上側にそのテキストの内容が表示されます。
3. 図１右側のComboBoxから「Calc」を選択して「GO」をクリックしますと電卓アプリが起動します。
4. 同じく図１右側のComboBoxから「View jpg/png file」を選択して「GO」をクリックしますと、ファイル選択画面が出ますので、拡張子がjpgかpngの画像ファイルを選んでください。上側に画像が表示されます。
5. 同じく図１右側のComboBoxから「Goto Home」をを選択して「GO」をクリックすると最初に表示された画面に戻ります。

# 参考にさせて戴いたもの

C#は通信処理とか、デバイス制御なんかはやるものの、GUI系は逃げ回っていたので、いろいろ大変でした。

開発に関して、以下のサイトの情報を参考にさせて戴きました。良い情報を提供下さり、ありがとうございました！

* [ .ico ファイルを Window のアイコンに設定する方法](http://qiita.com/sukobuto/items/a672e945103d7dda284b)

* [ドラッグ＆ドロップ処理を実現する](http://gushwell.ldblog.jp/archives/52326682.html)

# ライセンスなど

以下使わせて戴きました。素晴らしいソフトウェアを提供して下さり、ありがとうございます。

 * 本プロダクトは[MITライセンス](https://opensource.org/licenses/MIT)とします。詳細はGitHubを。
 * [DynamicJson](https://dynamicjson.codeplex.com/)を利用しています。ライセンスは[Microsoft Public License](https://dynamicjson.codeplex.com/license)です。
 * bootstrapを利用しています。[MITライセンス](https://github.com/twbs/bootstrap/blob/master/LICENSE)です。
 * jQueryを利用しています。[MITライセンス](https://jquery.org/license/)です。
 * プロ生ちゃんの画像は[「プロ生ちゃん利用ガイドライン」](http://pronama.azurewebsites.net/pronama/guideline/)に従った利用が必要ですので、ご注意ください。
 * アイコンは[このサイトのbird-green](http://www.veryicon.com/icons/system/trainee/bird-green.html)を採用しています。商用利用に制限がありますので、ご注意下さい。
 * コードではありませんが、Web側のフォントは[Google Fonts](https://www.google.com/fonts#AboutPlace:about)を使っています。


# つづき

これで確認は終わりです。

本システム向けのアプリの書き方などは、[【手抜きUI】C#でCUIな人が楽するためのGUIフレームワーク（萌えあり？）　その２  (2版）](http://qiita.com/GDaigo/items/aae9f3cdddb349501ce7)を見てください。