はじめに ゆうちょPayのQRコードを払込取扱票に印刷するWebアプリを作りました。 払込取扱票とはこういうものです。 ゆうちょPay対応の払込取扱票印刷アプリ https://yuucho-pay.com/ Chromeでの実行を推奨します。 GW中に作ったせいか、ついテンションが上がってドメインまで取得してしまいました。 ゆうちょPayが始まります 2019年5月8日(水)からゆうちょPayが使えるようになります。 弊社でもゆうちょPayのQRコード決済を導入を検討しているので、先日ゆうちょ銀行の方に説明に来てもらいました。 以下はその時伺った話の抜粋です。（注意：サービス開始前に聞いた話ですので仕様が変わる可能性もあります） ゆうちょPayと紐付けできるのは個人の総合口座のみ（法人の口座ではアカウントを作れない） 請求書払いでQRコード決済ができるのは今のところゆうちょPayだけ インターフェースはCSVファイル（金額などを記載したCSVファイルをアップロードして、QRコード情報を記載したCSVをダウンロードする） 払込取扱票にQRコードを印刷して決済した場合は108円の手数料がかかる その他の紙にQRコードを印刷して決済した場合は３%の手数料がかかる メールにアプリ起動リンクを載せて顧客に送信して決済した場合は108円の手数料がかかる 電算システムのバーコードとゆうちょPayのQRコードは併用できない（将来的に電算システムのバーコードのみでゆうちょPayの決済ができるようになる） QRコードを印刷するのが難しくて導入のネックになっているという加盟店候補が多いらしい 弊社では毎月かなりの枚数の払込取扱票を発行しています。そのため、ゆうちょPayには期待していたのですが、弊社の顧客は大部分が法人なので、そもそもゆうちょPayアカウントを作れないことがわかりました。 それでも個人の口座を使って立て替え払いするシチュエーションはあるかもしれないので、一応利用はするつもりです。 決済あたりの手数料は、基本料金も考慮すると電算システムより安くなるので、法人顧客が利用できないのは本当に残念ですが仕方ありません。 インターフェースがCSVファイルのアップロードとダウンロードのみというのは使い勝手が悪いので、システムを作ったGMOさんには頑張ってAPIを作っていただきたいところです。 それから同じQRコードでも、印刷する紙によって手数料の体系が異なるという仕様は、まともに運用できるとは思えないので、実際にサービスが始まったらなかったことになるのではないかと勝手に予想しています。 QRコードの印刷が難しい・・・？ さて、ここからが本題ですが、説明を伺っているときに「QRコードの印刷が難しい」という話が何度も出てきました。 「別に難しくないですよね？」といったら驚かれましたが、実際Qiitaの読者層だったらQRコードを印刷する仕組みを実装するのは難しくないですよね？ でも社内にITエンジニアのいない会社では本当に難しいらしく、「じゃあ、誰でも簡単にQRコードを払込取扱票に印刷できる仕組みを作ったら需要があるんじゃないか」と思ったのが今回のアプリを作ったきっかけです。 「広告を載せればいい小遣い稼ぎになるかも」とも思いましたが・・・。 実装 現時点のキャプチャです。かなり荒削りです。 QRコードの表示 QRコードの表示はGoogle Chart APIを使用しています。 使い方はとても簡単で、例えば「1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J」というデータをQRコードに変換したい場合は、以下のように指定するだけでQRコードが生成されます。 https://chart.googleapis.com/chart?cht=qr&chs=80x80&chl=1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J 印刷位置の調整 こちらの記事を参考にさせていただきました。 paper.cssを使ってブラウザだけで名刺を印刷する 当初はPDFを生成するつもりでしたが、HTMLとCSSだけで精密な印刷位置調整ができることがわかり、よりシンプルに実装することができました。 ホスティング Netlifyでホスティングしています。 今のところは複雑なことは何もしていません。 完全な静的サイトです。 ソースコードを見ていただければ分かる通り、入力されたデータは保持していないので顧客情報が漏洩する心配もありません。 今後の展望 記事執筆時点ではサービスが始まっていないので、ゆうちょPayが今後発展するかどうかは分かりません。 QRコード決済が乱立する状況を踏まえると、成功する確率は低いと思っています。 それでも今回のアプリには、もう少し手を入れて改良して行くつもりです。 現在構想しているのは以下のような内容です。 フレームワークの見直し(JQueryとBootstrap → Vue.jsとBulma） デフォルト値の記憶 外部システムとの連携 現在のシンプルさを損なわない範囲で実装していきたいと考えています。
ゆうちょPayのQRコードを払込取扱票に印刷するWebアプリを作りました。 払込取扱票とはこういうものです。
ゆうちょPay対応の払込取扱票印刷アプリ https://yuucho-pay.com/
Chromeでの実行を推奨します。
GW中に作ったせいか、ついテンションが上がってドメインまで取得してしまいました。
2019年5月8日(水)からゆうちょPayが使えるようになります。 弊社でもゆうちょPayのQRコード決済を導入を検討しているので、先日ゆうちょ銀行の方に説明に来てもらいました。 以下はその時伺った話の抜粋です。（注意：サービス開始前に聞いた話ですので仕様が変わる可能性もあります）
弊社では毎月かなりの枚数の払込取扱票を発行しています。そのため、ゆうちょPayには期待していたのですが、弊社の顧客は大部分が法人なので、そもそもゆうちょPayアカウントを作れないことがわかりました。 それでも個人の口座を使って立て替え払いするシチュエーションはあるかもしれないので、一応利用はするつもりです。 決済あたりの手数料は、基本料金も考慮すると電算システムより安くなるので、法人顧客が利用できないのは本当に残念ですが仕方ありません。
インターフェースがCSVファイルのアップロードとダウンロードのみというのは使い勝手が悪いので、システムを作ったGMOさんには頑張ってAPIを作っていただきたいところです。
それから同じQRコードでも、印刷する紙によって手数料の体系が異なるという仕様は、まともに運用できるとは思えないので、実際にサービスが始まったらなかったことになるのではないかと勝手に予想しています。
さて、ここからが本題ですが、説明を伺っているときに「QRコードの印刷が難しい」という話が何度も出てきました。 「別に難しくないですよね？」といったら驚かれましたが、実際Qiitaの読者層だったらQRコードを印刷する仕組みを実装するのは難しくないですよね？ でも社内にITエンジニアのいない会社では本当に難しいらしく、「じゃあ、誰でも簡単にQRコードを払込取扱票に印刷できる仕組みを作ったら需要があるんじゃないか」と思ったのが今回のアプリを作ったきっかけです。 「広告を載せればいい小遣い稼ぎになるかも」とも思いましたが・・・。
現時点のキャプチャです。かなり荒削りです。
QRコードの表示はGoogle Chart APIを使用しています。 使い方はとても簡単で、例えば「1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J」というデータをQRコードに変換したい場合は、以下のように指定するだけでQRコードが生成されます。
https://chart.googleapis.com/chart?cht=qr&chs=80x80&chl=1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J
こちらの記事を参考にさせていただきました。
paper.cssを使ってブラウザだけで名刺を印刷する
当初はPDFを生成するつもりでしたが、HTMLとCSSだけで精密な印刷位置調整ができることがわかり、よりシンプルに実装することができました。
Netlifyでホスティングしています。 今のところは複雑なことは何もしていません。 完全な静的サイトです。
ソースコードを見ていただければ分かる通り、入力されたデータは保持していないので顧客情報が漏洩する心配もありません。
記事執筆時点ではサービスが始まっていないので、ゆうちょPayが今後発展するかどうかは分かりません。 QRコード決済が乱立する状況を踏まえると、成功する確率は低いと思っています。
それでも今回のアプリには、もう少し手を入れて改良して行くつもりです。 現在構想しているのは以下のような内容です。
現在のシンプルさを損なわない範囲で実装していきたいと考えています。
z-indexを使う時についつい忘れること 端から使っていると気にならず使うものなので意識していなかったが、今回保守案件ですでに作られたCSSを触っている時に気づいたことがきっかけです。 positionがいる z-indexを使うときはpositionがあって、relativeか、absolut、fixedのどれかではならず、staticでは使えない。 ググると意外と『z-index 使えない』を多く見かける。気をつけよう。記述する際には以下のようになる。 .hoge { z-index: 50px; position: relative; }
端から使っていると気にならず使うものなので意識していなかったが、今回保守案件ですでに作られたCSSを触っている時に気づいたことがきっかけです。
z-indexを使うときはpositionがあって、relativeか、absolut、fixedのどれかではならず、staticでは使えない。
ググると意外と『z-index 使えない』を多く見かける。気をつけよう。記述する際には以下のようになる。
.hoge { z-index: 50px; position: relative; }
Progateで「HTML & CSS 中級編」を終了 10連休の間に少しずつProgateでHTMLとCSSの学習を進めようやく中級編まで到達しました。 初級編と比べると、確かに少しレベルが上がったような気がします。 また、自分のスピードとしても慣れてきたのか少し生産性が上がった気がします。 ボタンの動きや立体感など初級編よりもワクワクする動きやおしゃれな見た目になっていき、とても楽しく学習できました。 Progateでの注意点 Progateは前評判通りで初心者にオススメのサイトであると思います。 スライドが非常にわかりやすく、楽しく学んでいくことができます。 しかし、Progateで学習する上で注意しなければいけない点があると感じました。 それは、「振り返ると意外に覚えられていない」ということです。 Progateでは、解説が丁寧で、間違えてもヒントが与えられるなど、スラスラと進めていくことができます。 だがしかし、それゆえに作業のようになってしまい、主体的に吸収するという姿勢が必要なくなるのです。 だからこそ、一つ一つのポイントを吸収し、自分のものにしていくという姿勢を心がけながら取り組もうと思います。 今後について HTMLとCSSについて初級編・中級編で学習したことが身についているか確かめるため、道場コースで特訓してみようと思います。
10連休の間に少しずつProgateでHTMLとCSSの学習を進めようやく中級編まで到達しました。 初級編と比べると、確かに少しレベルが上がったような気がします。 また、自分のスピードとしても慣れてきたのか少し生産性が上がった気がします。 ボタンの動きや立体感など初級編よりもワクワクする動きやおしゃれな見た目になっていき、とても楽しく学習できました。
Progateは前評判通りで初心者にオススメのサイトであると思います。 スライドが非常にわかりやすく、楽しく学んでいくことができます。 しかし、Progateで学習する上で注意しなければいけない点があると感じました。 それは、「振り返ると意外に覚えられていない」ということです。 Progateでは、解説が丁寧で、間違えてもヒントが与えられるなど、スラスラと進めていくことができます。 だがしかし、それゆえに作業のようになってしまい、主体的に吸収するという姿勢が必要なくなるのです。 だからこそ、一つ一つのポイントを吸収し、自分のものにしていくという姿勢を心がけながら取り組もうと思います。
HTMLとCSSについて初級編・中級編で学習したことが身についているか確かめるため、道場コースで特訓してみようと思います。
padとは 引用:goo辞書 1 （綿などを中に入れた）詰め物（解説的語義） （衝撃・摩擦を軽減する）当て物，パッド，クッション，（衣料品の形を整える）パッド，（傷口などに当てる）パッド；生理用ナプキン knee [elbow] pads （スポーツ用）ひざ［ひじ］当て 1a スタンプ台，印肉（ink pad）；（研磨用の）パッド，（清掃・洗浄用の）スポンジ，シート；（ディスクブレーキの）摩擦パッド；《コンピュ》マウスパッド（mouse pad）；（馬の）枠のない革製の鞍（敷き）；((略式・やや古))ベッド；ねぐら，部屋，アパート 2 《動物》（動物の足裏の）肉球（解説的語義） 肉趾にくし；（肉球のある）足；〔通例～s〕（人間の）指の腹，指先の内側（◇指紋のある部分）；《昆虫》（足の）褥盤じょくばん，付着盤 marginとは 引用:goo辞書 2 （ページの）余白，欄外；《郵便》マージン（◇無目打めうち切手の印面の周囲の部分）；耳紙みみがみ（selvage）（◇切手シート周囲の余白部分） 2a （時間・金銭などの）余裕，ゆとり；（誤りなどの）許容範囲 paddingの元は「パッド」でマウスパッドなど 中や間にいれる緩衝材のイメージ→内側 marginは「マージンを取る」の様に 余分なもののイメージ→外側 で覚えています。
1 （綿などを中に入れた）詰め物（解説的語義） （衝撃・摩擦を軽減する）当て物，パッド，クッション，（衣料品の形を整える）パッド，（傷口などに当てる）パッド；生理用ナプキン knee [elbow] pads （スポーツ用）ひざ［ひじ］当て 1a スタンプ台，印肉（ink pad）；（研磨用の）パッド，（清掃・洗浄用の）スポンジ，シート；（ディスクブレーキの）摩擦パッド；《コンピュ》マウスパッド（mouse pad）；（馬の）枠のない革製の鞍（敷き）；((略式・やや古))ベッド；ねぐら，部屋，アパート 2 《動物》（動物の足裏の）肉球（解説的語義） 肉趾にくし；（肉球のある）足；〔通例～s〕（人間の）指の腹，指先の内側（◇指紋のある部分）；《昆虫》（足の）褥盤じょくばん，付着盤
2 （ページの）余白，欄外；《郵便》マージン（◇無目打めうち切手の印面の周囲の部分）；耳紙みみがみ（selvage）（◇切手シート周囲の余白部分） 2a （時間・金銭などの）余裕，ゆとり；（誤りなどの）許容範囲
paddingの元は「パッド」でマウスパッドなど
marginは「マージンを取る」の様に
で覚えています。
目次 コーディングのコツ HTML CSS デフォルトに戻す floatと崩れ解除 コーディングのコツ ・HTMLは、左上に重力のある積み木である ・積み木の一つ一つは中身の大きさの変わる箱である ・入れ子構造である ・レイアウトは大きな箱から考えていく HTML CSS デフォルトに戻す body, html { height: 100%; background-color: white; } h1, h2, h3, h4, h5, h6, p, body { line-height: 1.77; font-size: 18px; color: #4a4a4a; font-family: sans-serif; margin: 0; padding: 0; } ブロック要素のデフォルトの大きさ 横幅(width)・・・親要素の横幅と同じ 高さ(height)・・・子要素の高さの合計 floatと崩れ解除 左にコンテンツの箱を作り、右にサイドバーのレイアウトの場合 html <div class="box"> <div class="left"></div> <div class="right"></div> </div> css .left_content{ width: 700px; float: left; } .right_content{ width: 140px; float: right; } float解除は、親要素=boxに対してclearfixをかけてあげることで崩れが修正される classを追加して html <div class="box clearfix"> cssに追記します css .clearfix:after{ content: ""; clear: both; display: block; }
・HTMLは、左上に重力のある積み木である ・積み木の一つ一つは中身の大きさの変わる箱である ・入れ子構造である ・レイアウトは大きな箱から考えていく
body, html { height: 100%; background-color: white; } h1, h2, h3, h4, h5, h6, p, body { line-height: 1.77; font-size: 18px; color: #4a4a4a; font-family: sans-serif; margin: 0; padding: 0; }
ブロック要素のデフォルトの大きさ
横幅(width)・・・親要素の横幅と同じ 高さ(height)・・・子要素の高さの合計
左にコンテンツの箱を作り、右にサイドバーのレイアウトの場合
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.left_content{ width: 700px; float: left; } .right_content{ width: 140px; float: right; }
float解除は、親要素=boxに対してclearfixをかけてあげることで崩れが修正される classを追加して
<div class="box clearfix">
cssに追記します
.clearfix:after{ content: ""; clear: both; display: block; }
【はじめに】私的に役に立つ 起動時画面 「RGB → 16進数カラーコード」に変換機能の流れ ①「Red」「Green」「Blue」の数値を設定をする！ ②「RGB → HexcolorCodes」にチェックを入れる！ ③「Create」を押下する！ ④設定した色が「Hex color codes」に16進数カラーコードを各RGBに表示！ また、下のテキストボックスにコピーしやすいように表示！ ⑤右の四角に色が表示される！ 「16進数カラーコード → RGB」に変換機能の流れ ①「Hex color codes」の各RGBに数値を設定をする！ ②「HexcolorCodes → RGB」にチェックを入れる！ ③「Create」を押下する！ ④設定した色が「RGB」に表示！ ⑤右の四角に色が表示される！ 「カラーパレット」から「RGB」「16進数カラーコード」に変換機能の流れ ①「Color Dialog」を押下する！ ②色を選択する！ ③設定した色が「RGB」「16進数カラーコード」に表示！ ④右の四角に色が表示される！ 【各コントロールのプロパティ】足りてるか不安… 「コントロール：Nameプロパティ：その他のプロパティ」の順で Form：Pallet：Text(Pallet) GroupBox：RGBGroupBox：Text(RGB) GroupBox：HexcolorCodesGroupBox：Text(Hex color codes) Label：redLabel：Text(Red) Label：greenLabel：Text(Green) Label：blueLabel：Text(Blue) Label：hexadecimalLabel：Text(Hex color codes) Label：sarpLabel：Text(#), Font(11.25pt) NumericUpDown：redNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Red) NumericUpDown：greenNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Green) NumericUpDown：blueNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Blue) RichTextBox：hexcolorCodesRichTextBox：ReadOnly(True), BackColor(White), ScrollBars(None), BorderStyle(FixedSingle) CheckBox：RGBCheckBox：Text(RGB → HexcolorCodes) CheckBox：hexcolorCodesCheckBox：Text(HexcolorCodes → RGB) Button：createButton：Text(Create) Button：dialogButton：Text(Color Dialog) Panel：colorPanel：BorderStyle(FixedSingle) ColorDialog：colorDialog：なし 【コード】カキカキしまっせ Form1.cs using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp6 { public partial class Pallet : Form { public Pallet() { InitializeComponent(); } /// <summary> /// RGBまたは16進数カラーコードから値を取得し、色をパネルに表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void createButton_Click(object sender, EventArgs e) { // 「RGB → HexcolorCodes」にチェック時 if (RGBCheckBox.Checked == true && hexcolorCodesCheckBox.Checked == false) { // RGB の値を取得 int R = (int)redNumericUpDown.Value; int G = (int)greenNumericUpDown.Value; int B = (int)blueNumericUpDown.Value; //設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); } // 「HexcolorCodes → RGB」にチェック時 else if (RGBCheckBox.Checked == false && hexcolorCodesCheckBox.Checked == true) { // 16進数カラーコードを取得し、16進数を10進数に変換 var R = Int32.Parse(redTextBox.Text, System.Globalization.NumberStyles.HexNumber); var G = Int32.Parse(greenTextBox.Text, System.Globalization.NumberStyles.HexNumber); var B = Int32.Parse(blueTextBox.Text, System.Globalization.NumberStyles.HexNumber); // 設定した色をパネルに表示 DrawingPanel(R, G, B); // RGB で表示 CreateRGB(R, G, B); } else { // チェックボックスの選択に不備があることをメッセージボックスで警告 MessageBox.Show(@"Please check either ""RGB → HexcolorCodes"" or ""HexcolorCodes → RGB"""); } } /// <summary> /// カラーダイアログから色を取得し、色をパネルに表示。または、RGB、16進数カラーコードに値を表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void dialogButton_Click(object sender, EventArgs e) { // カラーダイアログを表示 DialogResult dialogResult = colorDialog.ShowDialog(); // カラーダイアログからRGB の値を取得 int R = colorDialog.Color.R; int G = colorDialog.Color.G; int B = colorDialog.Color.B; // 設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); // RGB で表示 CreateRGB(R, G, B); } /// <summary> /// 設定したRGB の色をパネルに表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void DrawingPanel(int R, int G, int B) { // パネルに設定された色を表示 colorPanel.BackColor = Color.FromArgb(R, G, B); // RGBを16進数に変換し、16進数カラーコードを「hexcolorCodesRichTextBox」に表示 hexcolorCodesRichTextBox.Text = "#" + $"{R:x2}" + $"{G:x2}" + $"{B:x2}"; // 「hexcolorCodesRichTextBox」に表示されたの文字を色分け hexcolorCodesRichTextBox.Select(1, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Red; hexcolorCodesRichTextBox.Select(3, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Green; hexcolorCodesRichTextBox.Select(5, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Blue; } /// <summary> /// RGB を表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateRGB(int R, int G, int B) { // 設定されたRGBをRGBグループの各RGBに表示 redNumericUpDown.Value = R; greenNumericUpDown.Value = G; blueNumericUpDown.Value = B; } /// <summary> /// 16進数カラーコードを表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateHexadecimal(int R, int G, int B) { // 設定されたRGBをHex color codesグループの各RGBに表示 redTextBox.Text = $"{R:x2}"; greenTextBox.Text = $"{G:x2}"; blueTextBox.Text = $"{B:x2}"; } } } もっと簡略的にできそうだけど、浮かばない (((;^ω^))) 【おわり】チャンチャン♪ 最近やっとメソッドを理解したから使ってみた 使い方が合ってるかは、わからないが…… いろいろ指摘して欲しい ∑d(≧▽≦*)OK!! HTMLやCSSを使う時に色の試しをしたくて作ってみたが、地味に助かる(´▽｀)♪ これはこれで良いが「地味に助かる(´▽｀*)♪」じゃなく。ちゃんと助けてぇぇぇぇぇぇええええええええええええ 配色に悩むことが多いからそこもフォローできるようにしたい！ 色味が決まらないと心に花が咲かないというかーうんうんﾜｸo(ﾟｰﾟo)(oﾟｰﾟ)oﾜｸ そこらへんも、ブチかましていけたら 続きとしてQiitaに書こうと思うこの頃の俺だぁ 以上、「色選びを助けるマン(`･ω･´)」でした。
起動時画面
「RGB → 16進数カラーコード」に変換機能の流れ ①「Red」「Green」「Blue」の数値を設定をする！ ②「RGB → HexcolorCodes」にチェックを入れる！ ③「Create」を押下する！ ④設定した色が「Hex color codes」に16進数カラーコードを各RGBに表示！ また、下のテキストボックスにコピーしやすいように表示！ ⑤右の四角に色が表示される！
「16進数カラーコード → RGB」に変換機能の流れ ①「Hex color codes」の各RGBに数値を設定をする！ ②「HexcolorCodes → RGB」にチェックを入れる！ ③「Create」を押下する！ ④設定した色が「RGB」に表示！ ⑤右の四角に色が表示される！
「カラーパレット」から「RGB」「16進数カラーコード」に変換機能の流れ ①「Color Dialog」を押下する！ ②色を選択する！ ③設定した色が「RGB」「16進数カラーコード」に表示！ ④右の四角に色が表示される！
「コントロール：Nameプロパティ：その他のプロパティ」の順で Form：Pallet：Text(Pallet) GroupBox：RGBGroupBox：Text(RGB) GroupBox：HexcolorCodesGroupBox：Text(Hex color codes) Label：redLabel：Text(Red) Label：greenLabel：Text(Green) Label：blueLabel：Text(Blue) Label：hexadecimalLabel：Text(Hex color codes) Label：sarpLabel：Text(#), Font(11.25pt) NumericUpDown：redNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Red) NumericUpDown：greenNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Green) NumericUpDown：blueNumericUpDown：Text(0), TextAlign(Right), Maximum(255), ForeColor(Blue) RichTextBox：hexcolorCodesRichTextBox：ReadOnly(True), BackColor(White), ScrollBars(None), BorderStyle(FixedSingle) CheckBox：RGBCheckBox：Text(RGB → HexcolorCodes) CheckBox：hexcolorCodesCheckBox：Text(HexcolorCodes → RGB) Button：createButton：Text(Create) Button：dialogButton：Text(Color Dialog) Panel：colorPanel：BorderStyle(FixedSingle) ColorDialog：colorDialog：なし
using System; using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApp6 { public partial class Pallet : Form { public Pallet() { InitializeComponent(); } /// <summary> /// RGBまたは16進数カラーコードから値を取得し、色をパネルに表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void createButton_Click(object sender, EventArgs e) { // 「RGB → HexcolorCodes」にチェック時 if (RGBCheckBox.Checked == true && hexcolorCodesCheckBox.Checked == false) { // RGB の値を取得 int R = (int)redNumericUpDown.Value; int G = (int)greenNumericUpDown.Value; int B = (int)blueNumericUpDown.Value; //設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); } // 「HexcolorCodes → RGB」にチェック時 else if (RGBCheckBox.Checked == false && hexcolorCodesCheckBox.Checked == true) { // 16進数カラーコードを取得し、16進数を10進数に変換 var R = Int32.Parse(redTextBox.Text, System.Globalization.NumberStyles.HexNumber); var G = Int32.Parse(greenTextBox.Text, System.Globalization.NumberStyles.HexNumber); var B = Int32.Parse(blueTextBox.Text, System.Globalization.NumberStyles.HexNumber); // 設定した色をパネルに表示 DrawingPanel(R, G, B); // RGB で表示 CreateRGB(R, G, B); } else { // チェックボックスの選択に不備があることをメッセージボックスで警告 MessageBox.Show(@"Please check either ""RGB → HexcolorCodes"" or ""HexcolorCodes → RGB"""); } } /// <summary> /// カラーダイアログから色を取得し、色をパネルに表示。または、RGB、16進数カラーコードに値を表示 /// </summary> /// <param name="sender">イベント発行元</param> /// <param name="e">イベント情報</param> private void dialogButton_Click(object sender, EventArgs e) { // カラーダイアログを表示 DialogResult dialogResult = colorDialog.ShowDialog(); // カラーダイアログからRGB の値を取得 int R = colorDialog.Color.R; int G = colorDialog.Color.G; int B = colorDialog.Color.B; // 設定した色をパネルに表示 DrawingPanel(R, G, B); // 16進数カラーコードで表示 CreateHexadecimal(R, G, B); // RGB で表示 CreateRGB(R, G, B); } /// <summary> /// 設定したRGB の色をパネルに表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void DrawingPanel(int R, int G, int B) { // パネルに設定された色を表示 colorPanel.BackColor = Color.FromArgb(R, G, B); // RGBを16進数に変換し、16進数カラーコードを「hexcolorCodesRichTextBox」に表示 hexcolorCodesRichTextBox.Text = "#" + $"{R:x2}" + $"{G:x2}" + $"{B:x2}"; // 「hexcolorCodesRichTextBox」に表示されたの文字を色分け hexcolorCodesRichTextBox.Select(1, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Red; hexcolorCodesRichTextBox.Select(3, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Green; hexcolorCodesRichTextBox.Select(5, 0); hexcolorCodesRichTextBox.SelectionLength = 2; hexcolorCodesRichTextBox.SelectionColor = Color.Blue; } /// <summary> /// RGB を表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateRGB(int R, int G, int B) { // 設定されたRGBをRGBグループの各RGBに表示 redNumericUpDown.Value = R; greenNumericUpDown.Value = G; blueNumericUpDown.Value = B; } /// <summary> /// 16進数カラーコードを表示 /// </summary> /// <param name="R">赤色の値</param> /// <param name="G">緑色の値</param> /// <param name="B">青色の値</param> private void CreateHexadecimal(int R, int G, int B) { // 設定されたRGBをHex color codesグループの各RGBに表示 redTextBox.Text = $"{R:x2}"; greenTextBox.Text = $"{G:x2}"; blueTextBox.Text = $"{B:x2}"; } } }
もっと簡略的にできそうだけど、浮かばない (((;^ω^)))
最近やっとメソッドを理解したから使ってみた 使い方が合ってるかは、わからないが…… いろいろ指摘して欲しい ∑d(≧▽≦*)OK!!
HTMLやCSSを使う時に色の試しをしたくて作ってみたが、地味に助かる(´▽｀)♪ これはこれで良いが「地味に助かる(´▽｀*)♪」じゃなく。ちゃんと助けてぇぇぇぇぇぇええええええええええええ
配色に悩むことが多いからそこもフォローできるようにしたい！ 色味が決まらないと心に花が咲かないというかーうんうんﾜｸo(ﾟｰﾟo)(oﾟｰﾟ)oﾜｸ そこらへんも、ブチかましていけたら 続きとしてQiitaに書こうと思うこの頃の俺だぁ
以上、「色選びを助けるマン(`･ω･´)」でした。
起動時画面
ﾜｸo(ﾟｰﾟo)(oﾟｰﾟ)oﾜｸ