C#(Visual Studio)はやっぱり楽
もっぱらWEB開発がメインとなっているが、業務系システム開発の初心を取り戻すため、たまーに、Visual StudioのC#で開発(趣味レベルで)してみると、細かいUIを早くつくれて、やっぱWEB開発より楽だなーと思う。
もちろんフィールドが全く違うが、基幹系システム等では、WEBである必要がないことがほとんどなので、まだまだC#やVBはなくならないんだろーなーと改めて感じることができる。
WEB開発もどんどん楽になっていくだろうが、ごりごりに業務システムやりたい人はVisual StudioのC#おすすめ。正直VBはやらなくていい。C#でVBの機能網羅されているし、C#のほうが利点が多いので。
WEBメインの人もたまーに趣味でオーソドックスな開発をしてみると空気が変わって新鮮かもね。
新規登録画面に登録済データを呼び出しセットする機能をつけてみる3
今回はローディングアニメーションのスタイルシートを実装してみたいと思います。
昔、開発したWEBシステムはローディングアニメーションつけてないこと割とあったのですが、ハングっているのか読み込んでるのかわからんとのことで、顧客からクレームうけること結構ありましたね。
1. app.balde.phpのheadタグ内に以下のCSSを配置します。
<style type="text/css"> .hide { display: none; } .loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } .circle{ width:100px; height:100px; border-radius:150px; border:15px solid #fff; border-top-color:rgba(0,0,0,0.3); box-sizing:border-box; position:absolute; top:40%; left:47%; animation:circle 1s linear infinite; -webkit-animation:circle 1s linear infinite; } @keyframes circle{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes circle{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } tr:hover td { background-color: #d9efff; } </style>
正直、これは拾い物です。とても小生の脳みそでは思いつきません。できたものを見ればなんとなくわかりますが、いちから作れと言われればまず無理です。
.loadingセレクタの部分はアニメーションの位置関連を設定し、.circleセレクタのところで、実際のアニメーションを記述してます。
これらのCSSをjavascriptで制御しローディングアニメーションを表示させたり隠したりします。
最後のtr:hoverのところは、ローディングアニメーションと全く関係なく、テーブルの行をマウスでホバーさせた時にバックグランドのカラーを変更したかったので追加しました。ちなみに、これだとすべてのテーブルに適用されてしまうので、テーブルにIdつけて、id名まで指定するほうがいいでしょう。‘
2. まとめ
こういったCSSをふんだんに使ったものは、ブラウザ依存するからといって、ローディングアニメーションはGIF画像とかでつくることが多かったのですが、最近のブラウザなら特に問題ないんじゃないでしょうかね。
今日はここまで。
新規登録画面に登録済データを呼び出しセットする機能をつけてみる2
前回、どのような機能を実装するか説明しました。今回実際に開発はじめるわけですが、まず手始めとして、Bladeのコンポーネントについて学びたいと思います。
コンポーネントをまず作って、そこにロジックを足していきたいと思います。
1. コンポーネントファイルを作成する。
コンポーネント作る上でやりやすいのはArtisanを使うことです。以下のようにコマンドをタイプするとコンポーネントファイルが作成されます。
#php artisan make:component ModalList
今回、コンポーネント名は"ModalList"としました。
コンポーネントとなるBladeファイルは"views/components"の中に生成されます。
そして、同時に、コンポーネントクラスファイルが"app/View/Components"に生成されます。
コンポーネントクラスファイル経由でコンポーネントのBladeファイルを呼び出すイメージです。
2. コンポーネントのBladeファイルを編集する
今回はコンポーネントをまず理解するため、"こんにちは！"という文字を表示するのみでとどめたいと思います。
以下のようにコンポーネントのBladeファイルを編集します。
<div> <h1>こんにちは!</h1> </div>
3. メインのBladeファイルにコンポーネントを記述する
最後にコンポーネントを実装したいメインのBladeファイルにコンポーネントの記述をします。
コンポーネントは、新規登録画面に実装しますので、"mst_customer_create.blade.php"のcard-body内に以下のように記述します。
<x-modal-list />
すると、新規登録画面を開くと"こんにちは!"という文字が表示されたと思います。 コンポーネントを呼び出すには上記のようにHTMLタグのように記述し、タグ名はコンポーネント名の頭に"x-"をつけます。
Reactのコンポーネントを彷彿とさせますね。
4. まとめ
コンポーネントの大まかな仕組みがわかりましたので、次回から、具体的にロジックを組んでいきたいと思います。
Linuxとの出会いについて
今ではサーバーOSとして欠かせないLinuxですが、思えば、Linuxを使い始めてもう24年になるんだと改めて思いました。
今回はLinuxを使うきっかけとなったお話をしたいと思います。
さかのぼること25年前、大学生なり立ての小生はお金がなくPCも買える状態でありませんでした。PC購入必須でなくてよかったと今思うと思います。
正直このころのPCは信じられないくらい高かったです。まあ、安くなり始めてはいたと思いますが。
そのころ、授業で解析やらプログラミングの授業やらで、C言語を使うことが多く、PCがないととてもついていけないということで、どうしようかなあーと思っていました。
そんな時、ラッキーなことに、大学で廃棄予定のPCあるからといって、それを譲り受けました。それが”Solaris OS”の乗ったPCでした。
当時はPCが手に入るだけで浮かれてました。恐ろしい話が、皆がよく知るWindows95というOSが当時主流だったので、その違いも分かっていない状態でした。
その後、SolarisはUnix系OSであることがわかるわけですが、プログラミングできるまでにかなり苦労した記憶あります。そもそもコマンドがわからんし、情報量があまりにも当時少なかったです。ワークステーション用にカスタマイズされていたのも要因なのですが、ネットワークに接続しない状態で起動させると、いたるところでエラーがでて、うまく起動しなかったりしました。
それでも、いろいろ勉強できて楽しかったなーと思います。
ちなみに Solarisはオラクル社に買収されたサン・マイクロシステムズ社が開発したOSです。
当時、技術書等は、英語で書かれているものとかが多く、翻訳するのも一苦労でした。
ここで、標準のUnixの知識がつきました。
その後、お金を貯めて、自作マシーンをつくり、当時の雑誌についていた、LinuxのDebian OSをインストールしたのが最初のLinuxです。
※1か月くらいで自作PCの電源のコンデンサーが破裂したのも今では懐かしい。当時の自作PC事情もどこかでお話しましょう。
ここから、Linuxでいろいろやっていくのですが、何するにも、ソースを編集してコンパイルするってのが当たり前で、今のように簡単にインストールしたり、デバイスの操作もできる状態でなかったです。
それでも、今思うといい経験だったと思います。
今日はここまで。
新規登録画面に登録済データを呼び出しセットする機能をつけてみる1
今回から、新規登録画面に登録済データを呼び出しセットする機能を何回かに分けて開発していきたいと思います。
過去データを参照してセットするという機能はユーザビリティーの面からも有効なものです。ただ、後で説明しますが、すでに開発済みの顧客マスタの新規登録画面にこの機能をつけるのはあまり意味ありません。
1. 開発する内容の説明
今回は、小生の言語能力で説明することは困難なため、どんなことをやりたいか、以下に完成イメージ交えながら説明し終わりたいと思います。
1. 新規登録画面の顧客名入力ボックス横に登録済みデータ呼び出しボタンをつける。
2. ボタンをクリックすると、登録済みデータを呼ぶ出すモーダル画面を表示させる。上部のボックスに検索したい顧客名(曖昧検索対応)を入力し"検索"ボタンをクリックすると、Ajaxで該当データを呼び出す。データ呼び出し中はローディングイメージを表示させる。
3. 呼び出したデータのいずれかの行をクリックすると、その行のデータが新規登録画面にセットされる。
4. 以下がセットされたイメージ
2. まとめ
上記の通り、このレベルのデータセットなら、メイン画面に、複写新規ボタンを設けるなどで十分で、わざわざjavascript使う必要もないです。もしやるなら、もっと情報量の多い顧客マスタで、本社情報を参照して子会社情報を登録するだとか、販売管理システム等の画面に顧客情報を展開するとかそういったものに使うのが有意義です。
尚、こういった機能は、再利用できるようにしとくと何かと便利なので、Bladeのコンポーネント化もやってみようと思います。というより、分けないとBladeが見難くなります。
今日はここまで。
