業務効率化App制作ブログ vol.2

こんにちは！
前回に引き続き業務効率化Appを制作していきます！
今回は、デザインカンプを作成していきます！！

デザインカンプとは

Design Comprehensive Layoutの略で、Webデザインの完成見本のこと。

トップページ作成

f:id:takesan0113:20200520213406p:plain
業務効率化Appトップページ

業務内容の部分は黒塗りしていますが、まずはこんな感じでトップページを作成しました！


デザインを作成するには、まずどんな機能が必要かの洗い出しが重要だと感じました！
機能が分からなければどんなページを作ればいいか分からないです。


機能を洗い出した後は、ユーザーフレンドリーなUIを考えてみましょう。

  • SPA(シングルページアプリケーション)は、パソコンが苦手の人でも使いやすそう

  • グローバルナビゲーションをヘッダーに付けて操作性アップを狙う


このようなことを考えながら作成していた所、
クリックしたらJavaScriptを使ってスクロールしなければならないなぁ、とJSを使う箇所や後々のコーディングまで思いを馳せながらカンプ作成することができました。


そのほかにも、
下記画像のように、どのパスへ飛ばせばいいかなど考えながらデザインを行いました。

f:id:takesan0113:20200520215041p:plain
業務効率化Appトップページ2

それぞれのページ作成

それぞれのページを作成するにあたり、どのようなDB設計を行えばいいか。どのようなテーブルにどのようなデータを格納すればいいか考えました。テーブル同士のリレーションを考案するのはなかなか骨の折れる作業だと感じました。カンプ作りでDBの大枠を捉えた後、具体的なDB設計を行うのがスムーズだと感じました。


カンプ作成まとめ

カンプ作成中に、この機能を実装したい（30分刻みで別のユーザーにメールを送信する仕組みなど）が学習不足で実装の仕方が分からない箇所も複数見つかりました。


サーバーサイドをメインにエンジニアを目指す人でも、 カンプ作成を行いアプリの全体像把握や大枠のDB設計を考えたり、必要技術の洗い出しなど行った方が良いなぁと感じました！！


次回はDB設計を行います！ではまた！

業務効率化App制作ブログ vol.1

不動産業で営業企画として働いています。

30代、趣味はギターです。

 

私が行っている業務の一つで、荷物搬入搬出の手配業務を行っています。

【 現場から本社(私)へ → 本社(私)から運送業者へ → 運用業者から本社(私)へ → 本社(私)から別の現場へ  】

 

作業は電話やFAXを用い手配をしており、非常に効率が悪いと考えています。

なんとかこの業務を効率化出来ないかと考えました。

 

手配業務効率化Appを制作することにしました！！

 

プログラミングスクールで学んだWebアプリケーション開発の流れに則り、開発してみようと思います！！

 

Webアプリケーション開発の流れ

  1. 企画
  2. 設計
  3. 開発
  4. 保守・運用

 

さっそく企画から始めてみます！

 

手配業務効率化App【企画】

 

電話やFAXを用い手配を行うことは、ステークホルダー（現場・業者・私）全員にとって、非常に効率が悪い。→

Webアプリケーション化することにより業務の合理化を行い、ステークホルダー皆が効率化、省力化できるAppを作る！！

 

パソコン操作に慣れていない人が多い → わかりやすいUI

本社(私)が間に入る必要はない → ダイレクトに現場⇔業者でやりとりできる仕組み

連絡を手作業で行うのがかったるい → 自動でメール送信する仕組み

 

 

次回は設計を行います！ではまた！

手配業務効率化App 制作ブログ vol.0

不動産流通業で営業企画として働いています。

30代、趣味はギターです。

 

私が行っている業務の一つで、荷物搬入搬出の手配業務を行っています。

【 現場から運送業者へ　→  運用業者からまた別の現場へ  】

作業は電話やFAXを用い手配をしており、非常に効率が悪いと考えています。

 

なんとかこの業務を効率化出来ないかと考えました。

 

VBAをかじっていたこともあり、プログラミングができれば劇的に業務を効率化できるのでは？と考えました。

 

その他携わっている業務においてもWebアプリケーション化したいものがあります。

 

やりたいことは分かっても技術がない。

 

・

・

・

 

思い立ったが吉日、さっそくプログラミングの学習を始めました！

副業もしたいし！！

 

2019年夏のことでした。

さっそくProgateをはじめました！一通り嗜んだ後、覚悟を決めプログラミングスクールへ入学！

 

HTML/CSS/Ruby/Ruby on Rails/JavaScript/AWSなどを学びました。

半年の受講期間で某ECサイトのコピーサイトを作成できるようになりました！

 

・

・

・

 

2020年春。

コロナウイルスが世間を騒がしている最中、会社の上司が変わりました。 

手配業務の効率化をその上司に訴えた所、興味を持ってもらいました！

 

今まで学んだスキル＋勉強も兼ねて、

手配業務効率化Appを作成しようと決意しました！！

 

そして作成の経緯をこのブログに残してみることにします！

それではまた次回！

Webアプリケーション開発の流れ　学習メモ

Webアプリケーション開発の流れ

1.企画

どのようなサービスをどのようにユーザーに使っていただき、どのようなUX体験をしていただくか考える作業。

2.設計

  1. 必要な機能の洗い出し
    どのような機能が必要か洗い出す。同時並行で画面の設計やデータベースの設計をしながらUXを考えることが良さそう。

  2. 必要な画面の設計
    画面がどの程度必要なのか、どのような画面、UIにすれば良いかを決めていく作業。人は見た目が9割ではないが、アプリケーションの中身よりビジュアルで評価をする人も多いため、操作しやすく、かつアプリケーションのイメージが伝わりやすいデザインを作ることが重要と考えている。

  3. データベースの設計 1・2で必要なデータを明らかにした後、データベース設計を行う。このアプリケーションにはどのようなテーブルが必要で、どんなカラムを持たせれば良いのか、エンティティ(属性)・エンティティ同士の関係性(リレーション)を考慮しながら決める。

3.開発

  1. 大きな機能から実装する
    アプリケーションのメイン機能から実装していく

  2. テストコードを記述し動作を担保する
    1機能を実装したらテストコードを書く。テストのみならず、トリッキーなコーディングをしてしまうと可読性やメンテナンス性が悪くなってしまうので、みんなが理解できるようなコードを心掛ける。

  3. リファクタリングを行う ソースコードを整理し、綺麗にする作業。ビューにはなるべく複雑な処理をしない。コントローラーに書き過ぎない(モデルに記載）。もっと分かりやすいコードはないか。など考えながら可読性・メンテナンス性を向上させていく。

  4. 外部のサーバにアプリケーションをデプロイする 開発の終わりに完成品をデプロイするが、作業上は、開発の最初期に一旦デプロイを行い、自動デプロイなどを活用しながら開発を行っていきたい。

4. 保守・運用

学習中


学習教材
TechCamp/TECH::MASTER

Vue.jsのオプション構成　学習メモ

Vue.jsでは、単体のオブジェクトをコンポーネントと呼ぶ。1つ以上のコンポーネントを組み合わせたものをアプリケーションと考える。

var app = new Vue ({ オブジェクト )};

Vue.jsアプリケーションは、new Vue({・・・})でコンポーネントを作成することで始まる。
Vueはフレームワーク側で定義されているクラスで、コンポーネントの中で使うデータやメソッドはあらかじめ引数として渡す。
この場合、引数は単純な数値や文字列では扱いきれない為、役割に応じた名前を持つプロパティとして、オブジェクト表記を使う。
そのため、Vueクラスは、new Vue(x,y,・・・)ではなくnew Vue({・・・})のようにコンストラクタの引数にオブジェクトを受け取る。

ただし、どんなオブジェクトでも渡せるわけではなく、あらかじめ定められている、決まった名前のプロパティを持っている必要がある。

Vueのコンポーネントが持つことが可能な主なプロパティ

プロパティ名 役割
el コンポーネントのインスタンスをどのHTML要素に結びつけるかを定義する
data コンポーネントが保持するデータを定義する
methods コンポーネントが持つメソッドを定義する
filters コンポーネントが持つフィルターを定義する
computed コンポーネントが持つ算出プロパティを定義する
watch コンポーネントが持つウォッチャを定義する

Vueのオプション構成

var app = new Vue ({
  el: '#app',
  data: {
    // コンポーネントが保持するデータをここに定義する
  },
  methods: {
    // コンポーネントが持つメソッドをここに定義する
  },
  filters: {
    // コンポーネントが持つフィルターをここに定義する
  },
  computed: {
    // コンポーネントが持つ算出プロパティをここに定義する
  },
  watch: {
    // コンポーネントが持つウォッチャをここに定義する
  }
)};

www.shuwasystem.co.jp 学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日　2019年 3月28日 第1版第1刷
著者　　中田　享
発行所　株式会社　秀和システム

Vue.jsアプリケーションの設計モデル 学習メモ

[MVC] 一般的なアプリケーションの設計モデル

一般的なアプリケーションでは、3つの構成要素で成り立っている。

RubyOnRailsMVCModel
Ruby on Rails MVCモデル

View

アプリケーションの画面を描画し、ユーザーの入力を受け付けるインターフェースを提供する

Controller

ユーザーの入力に応じたModelを呼び出して処理の実行を指示する

Model

データの更新や計算処理を行う


アプリケーションのプログラムをこのように分けて設計・実装する考え方を、3つの役割の頭文字をとってMVCモデルと呼ぶ。
役割ごとにプログラムを分けることによって分業が可能になり、開発後の保守や拡張がしやすくなる。

[MVVM] Vue.jsアプリケーションの設計モデル

Vue.jsアプリケーションは、MVCモデルから派生したMVVM(Model-View-ViewModel)モデル。

Vue.jsMVVMModel
Vue.js MVVMモデル

ViewModelの役割は、ビューから受け取った入力情報をModelに伝え、Modelから処理結果を受け取ってViewに伝えること。ViewとModelの仲介を行う点はMVCモデルのControllerと似ているが、Controllerは描画処理に介入しないのに対して、ViewModelはデータバインディングを通してModelとViewを自動的に結びつける点が大きな違い。


www.shuwasystem.co.jp

学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日　2019年 3月28日 第1版第1刷
著者　　中田　享
発行所　株式会社　秀和システム

Vue.jsはDOM操作問題を解消　学習メモ

Vue.jsとは？

Vue.jsはJavaScriptのフレームワーク。DOM操作が簡単なことが他のJavaScriptのフレームワークと比較した際の強み。

そもそもDOMとは？

ブラウザは読み込まれたHTMLをツリー状のデータ構造としてメモリ上に保存する。これをDOM(Document Object Model)と呼び、ツリーの節に相当するHTML要素のことをノードと呼ぶ。

画面描画の変更などをJavaScript上で行うためには、処理をしたいノードに適切にアクセスする必要がある。

JavaScriptのDOM操作は難しい

生のJavaScriptでは適切なノードにアクセスする為のDOM操作が初心者には難しいため、シンプルな構文でDOM操作やイベント処理などを実装できるjQueryなどのJavaScriptフレームワークが広く使われるようになった。

jQueryでもまだまだ難しい

生のJavaScriptと比較しjQueryは構文がシンプルだが、階層構造を持ったノードの集合としてHTMLを捉えることに慣れていない者は、DOM操作のロジックを組み立てることは難しい。

  1. DOM操作によりノードにアクセス
  2. 内容を変更

上記の2段階の処理を書かなければならないのは生のJavaScriptもjQueryも同様。

Vue.jsのデータ駆動でDOM操作問題を解消

Vue.jsは、DOM操作を行う必要がほとんどないため、ややこしいDOM操作をユーザーは考慮しないで済む。

Vue.jsのアプリケーションでは、ページの描画内容をHTML形式のテンプレートで定義し描画に使うデータをJavaScriptで定義する。

JavaScriptでデータを更新すれば、Vue.jsが自動的にDOMを更新してページの表示が変わるという仕組みになっている。

データ更新をトリガーに表示や動作が変わるアプリケーション設計の考え方を、データ駆動と呼ぶ。


Vue.jsはJavaScriptのデータとDOMが自動的に繋がるため、煩雑なDOM操作から解放される。

www.shuwasystem.co.jp


学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日　2019年 3月28日 第1版第1刷
著者　　中田　享
発行所　株式会社　秀和システム