7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-06-26

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

アプリを書きたい人は

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

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

2版で何したか

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

これ何?

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

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

後、プロ生ちゃんなどマスコットな子たちをアプリに取り入れたい人も向いているかもしれません(笑)

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

入出力で使えるもの

以下を用意しました。

入力

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

出力

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

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

実装の流れ

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

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

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

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

もう少し具体的に

入力は?

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

出力は?

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

ダウンロードして使う

要件

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

ダウンロード

GitHubのここからダウンロードして下さい。
以下3つのフォルダから構成されている事を確認します。

  • CuiHelperLib VisualStudioのプロジェクトです。DLLを作成します。
  • CuiHelperApp VisualStudioのプロジェクトです。上記のDLLを使ったサンプルアプリです。
  • CuiHelperContents 本システムが使うWeb系(HTML)の集まりです。

ビルド

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

  • CuiHelperApp\CuiHelperApp\Resources\setting.json をエディタで開きます。
{
    "parameters":{
        "ImagePath":"C:\\CuiHelperContents\\img\\",
        "ContentsPath": "C:\\CuiHelperContents\\"
     }
}
  • ContentsPathの項目に落としたCuiHelperContentsフォルダのパスを指定します。
  • ImagePathには表示で使う画像ファイルのあるフォルダを指定します。
  • GitHubから落とした状態なら、上記のようにContentsPathに「¥¥img¥¥」を追加したパスを指定します。
  • 上の”¥”は2バイト文字なのでコピペしないで下さい
  • 一応この使い方を標準とします。

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

cuihelper_start.png

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

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

内容確認

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

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

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

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

cuihelper_table.png

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

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

参考にさせて戴いたもの

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

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

ライセンスなど

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

つづき

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

本システム向けのアプリの書き方などは、【手抜きUI】C#でCUIな人が楽するためのGUIフレームワーク(萌えあり?) その2 (2版)を見てください。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?