操作説明のコツ

私は業務用アプリ(いわゆる会計ソフトとか)の会社に所属しているのですが、 お仕事としてお客様に操作説明会を実施することがあります。

他にも社内で新人研修の講師をやったりと、結構経験してきたなーと感じたので 操作説明のコツを軽くまとめてみました。

操作説明で重要なこと

  • 下準備で手を抜かない(ここが9割)
  • 臨機応変に対応する(はぐらかし力)
  • とにかく堂々と話す

下準備で手を抜かない

操作説明会の成功のカギを握るのが、下準備です。
これを怠るとほぼまちがいなくぐだぐだになります。

慣れている説明会で、いつもと同じことを説明すればいいだけ…であっても きちんと下準備をするべきです。

下準備の内容は下記3点です

  • 資料作成
  • データ準備
  • 説明の流れを決めてリハ

資料作成

ここは説明するお客さんの使用想定に応じて作ります。
ポイントは主に下記2点です

  • 機能のすべてを書き込むのではなく重要な箇所のみ記述する
  • 資料を見る人の目線の移動を考える(上から下に、左から右に)

まず資料に文字が多すぎると絶対に読んでもらえません。
重要な箇所のみ記述して、補足は必要なものに絞りましょう。

また、赤枠や矢印、ふきだしなどの記号・図形を使うことが多いですが
見る人の目線を考え、配置にも気を付けましょう。

マニュアル作成という意味ではほかにももっとポイントはありますが、とにかくここで手を抜かない けど時間をかけすぎないのも大切です。難しいですが…

データ準備

当日に使用する想定のマスタ準備であったり、設定が正しくされているかを事前に確認しましょう。
当日データ準備が間に合っていないのであれば、説明会中にきちんと補足する必要があります。

説明の流れを決めてリハ

資料にはあるけど説明をはぶく、どんな順番で説明する、など流れをしっかりと決めておく必要があります。
また流れを決めたら自分の流れで通してリハしましょう。
しゃべり慣れていない人はしゃべる練習もしたほうが良いでしょう。しゃべり慣れていないとうまく舌が回らないので。

臨機応変に対応する

先ほど説明の流れを決めてリハと書きましたが、どんなに準備を完璧にしていても当日の流れで変わることはあります
(だからといって準備をしないのは×)
当日にデータ不備が発覚したり想定していた流れがうまくお客さんの考えと会っていなかった場合、 すぐに切り替えて流れを変えれるようにしましょう。
(慌てないことが大切)

またデータ不備などがあるときは「今日は説明会なんで」とうまく説明して乗り越えましょう。 てきとうにはぐらかす用の言葉を準備しておくのも良いです。

とにかく堂々とはなす

しゃべり方ではここが一番重要です。
自信のない人に宣伝されても興味がわかないのと同様に、説明でも自信がなさそうに話されると信頼されません。
とにかく堂々と話すことで、根拠のない信頼感を得ましょう(これは意外と大切)

まとめ

思いつく順にざっと書いてみましたが、いかがでしょうか。 説明会のコツとかって意外と出てこない(企業向けセミナーっぽい内容になる)ので書いてみました。 気が向いたらシリーズ化してまとめようかな。

心の余裕がないとタスク管理できなくなる

最近は旅行だったり資格試験だったり仕事だったり、平日休日問わず忙しかったのですが

今日は久しぶりに有休が取れたのでゆっくり過ごせています。

最近の仕事を振り返ると、忙しくてタスク管理がうまくできてなかったなーと感じたので思ったことをいろいろ書いてみます。
(結局仕事のこと考えてるけど…)

忙しいと効率が悪くなる

忙しいと納期が近いタスク、作業量の大きいタスクに追われてしまいます。

そうすると精神的な余裕がなくなり、いつもだったら一瞬で終わるような事務作業などをついつい後回しにしてしまいます。

そうなると忙しいのにやらなければいけない事務作業がたまり、仕事が進まないといらいらし始めます。

結果、いらいらして心の余裕がなくなり、作業効率が悪くなり、悪循環になります。

今日自分の仕事を振り返って、このようになっていることに気づきました。

毎日空き時間を作ることが大切

原因を振り返ると、私は毎日できるところまで進もう!という気持ちが強く、1日の目標値をきちんと設定していませんでした。

そうすると中途半端な状態で退社時間になってしまい、退社後も次の作業が気になって家でもうまく休めていませんでした。

さらに事務作業を後回しにしていたのでたまった事務作業をこなさねばならず、気になっていた次の作業がなかなかできず…という状態でした。

この状況を打開するためには、毎日朝30分は事務作業&今日の目標設定をする時間にあてるとか、帰る前に30分の事務作業時間を確保するなど、空き時間をあらかじめ予定することにしました。

明日から試すので結果はまだ出ていませんが、自分の仕事とうまく向き合いたいと思います。

Railsについての雑感

お盆が終わってから少しバタバタしていたので日にちがあいてしまいました。

タスク管理アプリはある程度の基盤はできましたが、まだまだ完成とは言い難い状態なので もう少し形になってからまとめて記事にするかGitHubにあげるかしたいと思います。

今回はタスク管理アプリ作成で使ったRailsに関しての雑な感想を述べたいと思います。

Railsの良かったところ

  • コードの記述量が少なく済むため、思ったことをすぐに実装できる
  • 日本語の参考記事が多いのでググるハードルが低い

やはり実装コストが低いのが圧倒的に楽です。

仕事では素のC#×ASP.Netを使用しているため、
型や定義を厳密に宣言する必要がある上、
会社の部品用のORマッパーを使ったり社内ツールを使用したり…と手順が多くて時間がかかります。

定義・宣言さえすれば何でもできるといえば聞こえはいいですが、
実装したいと思いつくようなことはほかの人も同じことを考えているものなので
参考ソースをいかに効率よくコピペするか、というスキルになります。

これはC#に限らずすべてのフレームワーク・言語で言えることであり、
であればコピペが楽(=探しやすく・記述量が少ない)ほうがいいですよね。ってことです。

Railsの難しいところ

  • 理解している必要のある知識が多い(MVC,Ruby,HTML,CSS,JavaScript…)
  • バージョン管理が難しい

ある機能を実装したい!と思い立った時、Railsでは手を入れるファイル数が多いため
どこに手を入れればいいのかを判断する必要があります。

そのためにはまずMVCを理解している必要があり、どの部分に実装すれば良いのか判断する必要があり、
さらにその部分を実装している言語知識も必要になります。

私はASP.Net MVCを少し触ったことがあり、
幸いMVCに関しての知識はあったため手を入れる箇所の判断で迷うことはなかったですが
いわゆるプログラミング初心者の方ははまっちゃうんじゃないのかな、と思いました。

また各種の言語知識、それぞれのできることがわかっているかいないかも大きいですね。

さらにググった結果を実装してもうまくいかないとき、バージョンの違いでできなくなっていたこともありました。
Railsやjemのバージョンを含めて検索したほうがいいみたいですね。

今日はこんなところで。

自由研究6日目

夏季休暇としては最終日です。

完成…はむりかな…

作業メモ

【備忘録】Rails-カラム名を変更する方法 - Qiita

Railsで検索可能なセレクトタグselect2を使う | 酒と涙とRubyとRailsと

自由研究5日目 Railsがりがり

昨日作ったサンプルアプリを参考に、いよいよタスク管理アプリの開発に入りました!
私のお盆は明日までなのですが…無理そうですね(遠い目)

タスク管理アプリ 概要

できること

  • 親子紐づきのあるタスク管理(親がボード、子がタスク)
  • タスクで進捗管理可能(と言って進捗率の列を足し忘れていたことに気づく)
  • タスクにはプロジェクト・プログラム・職種・作業が紐づく(それぞれマスタ化してある)

やりたいこと

  • 見た目はTrelloみたいにしたい(いつか)
  • ログイン機能(今回はあきらめた)

今日やったこと

  • モデル作成
  • ボード・プログラムのコントロール、ビュー作成
  • Ajaxでセレクトボックスの内容を動的に変更(職種>作業)

参考サイト
【Rails】Ajaxでセレクトボックスの内容を動的に変更する - ひよっこエンジニアの雑多な日記

ちょっとまだ公開できるレベルではないのでローカルでごりごりやってます。。
しかしRails楽しいです

はまったこと

jQueryが反応しない

一部動作にAjaxを仕込んだのですがうまく動きませんでした
⇒原因:jQueryの設定ができていなかった

  1. Gemfileにgem ‘jquery-rails'を追記
  2. bundle install
  3. app/assets/javascripts/application.jsに//= require jquery3を追記(jqueryだとなぜか失敗)

これでうまく動きました

参考にしたサイト

Ruby on Rails5.1.3にBootstrapを導入する方法 - Qiita

Rails5でjqueryがデフォルトで入ってくれなくなったみたいですね…

自由研究4日目 Rails

ようやくRailsの開発スタート、ということで
まずはドットインストールを見ながらサンプルブログアプリを開発しました。

以下メモです

Railsプロジェクト

新規作成手順

  • 1.プロジェクト作成
rails new myblog -TB --database=postgresql
sudo -u postgres psql
create role projectname with createdb login password 'password';
\q
  • 3.config\database.yml を編集 defaultのpoolの下
# 以下の3つを追加
username: projectname
password: password
# RailsサーバとPostgreSQLサーバが同じ場合
host: localhost
  • 4.bundle install
bundle install --path vendor/bundle

けっこう時間がかかる

rails db:setup
rails db:migrate
  • setup:開発DB(development)とテストDB(test)を作成してくれる。初回はshema.rbが不足していると怒られる
  • migrate:shema.rb作成

ちなみにmigrateのリセット(データ初期化)は

rails db:migrate:reset

WEBサーバ

起動

rails server -b 192.168.33.10 -d

切断(プロセスidを検索し、指定して殺す)

cat tmp/pids/server.pid
kill -9 9113

DB参照

PostgreSQLに接続します

rails db

モデル

モデル作成

名称は大文字始まり・英語の単数形でモデル名を指定する
モデルのファイルはapp/models/モデル名.rbに自動で作成される。
migrateするとDBに複数形名のテーブルが自動で作成される

rails g model Post title:stging body:text
rails db:migrate

既存のモデルと紐づけるためにはreferencesを付ける
下記例ではPost-Commentで1-nの関係。Commentテーブルにpost_id列が自動で付与される

rails g model Comment body:string post:references

モデル同士の紐づけ

モデルファイルに紐づけの情報を設定する

1-nの1側(post)

has_many :comments

これによって@post.commentsの形で取得できるようになる
削除時にn側のデータも削除する場合は下記のように書く

has_many :comments, dependent: :destroy

n側(モデル生成時に指定していたら勝手に表現される)

belongs_to :post

Validation処理

項目のチェック処理定義
必須はpresence

  validates :title, presence: true, length: { minimum: 3, message: 'Too short to post' }
  validates :body, presence: true

初期データ設定

db/seeds.rb を編集して設定できる
モデル名.create形式で書く

Post.create(要素1:'要素1内容',要素2:'要素2内容')

実行する場合は

rails db:seed

コントローラ

コントローラ作成

コントローラは大文字始まり・複数形で作成する

rails g controller Posts

これを実行すると、app/controllers/posts_controller.rbが自動生成される

ルーティング

どのメソッドをどのURLに設定するか、の設定

config/routes.rb を編集する

resources :posts

1-nのモデルを扱うときは下記のようにする

resources :posts do
    resources :comments

これを設定すると、自動でルートを生成してくれる

rails routes

また、一部のルートしか使用しない(create,destroyのみなど)場合は下記のように記述する

resources :comments, only: [:create, :destroy]

ルートパスをpostのindexに指定したい場合

root 'posts#index'

コントローラ編集

各メソッド(アクションメソッド)を定義します

index(一覧)例

def index
  @posts = Post.all.order(created_at: 'desc')
end

show(照会)例

:idはルーティングで設定されているため

def show
    @post = Post.find(params[:id])
end

create(作成)例

def create
  # 受け取ったものをそのまま表示して確認するとき
  # render plain: params[:post].inspect
  # save
  @post = Post.new(params.require(:post).permit(:title, :body)[:post])
  @post = Post.new(post_params)
  if @post.save
    #redirect
    redirect_to posts_path
  else
    render plain: @post.errors.inspect
  end
end

destroy(削除)例

def destroy
  @post = Post.find(params[:id])
  @post.destroy
  redirect_to posts_path
end

メソッド化

def create
  @post = Post.new(post_params)
end
 private
  def post_params
    params.require(:post).permit(:title, :body)
  end

ビュー

app/views/posts/にメソッド名.html.erbというファイル名で作成する

<% %>

で囲ったところがプログラム部分、ほかは素のhtml

<h2>My Posts</h2>
<ul>
<% @posts.each do |post| %>
    <li><%= post.title %></li>
<% end %>
</ul>

アプリ全体の共通ビュー

layouts/application.html.erbで設定されてる

ちなみにcssはapp/assets/stylesheets/application.css

ヘルパー

たくさんのヘルパーが用意されている

リンクヘルパー

aタグ

<%= 見出し, パス(渡す値) %>
<!-- 新規へのリンク -->
<%= link_to 'Add New', new_post_path, class: 'header-menu' %>
<!-- 編集へのリンク -->
<%= link_to '[Edit]', edit_post_path(post),class: 'command' %>
<!-- 削除へ -->
<%= link_to '[x]', post_path(post), method: :delete, class: 'command' %>

イメージヘルパー

imgタグ

<%= image_tag 'logo.png' ,class: 'logo' %>

タグを重ねる場合

aの中にimgタグ

<%= link_to image_tag('logo.png' ,class: 'logo'), root_path %>

フォームヘルパー

<%= form_for :@post do |f| %>
...
<% end %>

インプット系

<!-- テキストボックス -->
<%= f.text_field :title, placeholder: 'enter title' %>
<!-- テキストエリア -->
<%= f.text_area :body, placeholder: 'enter body text' %>
<!-- ボタン -->
<%= f.submit %>

部品化

views/postsの中に_からはじめた名前のファイルを生成すると、各ビューから呼び出せる部品となる

form_forのパラメタはroutesでresourceを設定しているのでよしなにやってくれる、らしい(よくわかっていない)

viewから呼び出すときは_抜きの部品名を指定する

<%=  render 'form' %>

クリック時に警告を出したい場合は

data: { confirm: 'Sure?' }

エラーメッセージを出したい場合

エラーの数だけ繰り返しspan

<% if @post.errors.messages[:title].any? %>
<span class="error"><%= @post.errors.messages[:title][0] %></span>
<% end %>

WindowsでRailsの開発環境構築まで

ローカル環境でRails開発環境を作るための手順をまとめました
あくまで参考サイト様の情報をもとに自分の作業内容をコピペでまとめたものですので、正確な情報は参考サイト様へ。。

設定する内容

手順

  1. Vagrantインストール
  2. VirtualBoxインストール
  3. LinuxOSの仮想環境構築(今回はUbuntu)
  4. PuTTy仮想マシンに接続
  5. CyberDuck仮想マシンの構造を確認
  6. Gitインストール(Ruby/Railsインストール用)
  7. Rubyインストール
  8. SQLインストール(今回はPostgre-SQL)
  9. Node.jsインストール
  10. Ruby on Railsインストール
  11. Railsでアプリケーション作成

Vagrantインストール

Vagrant仮想マシンの管理ができるツール

https://www.vagrantup.com/downloads.html

インストール後、コマンドプロンプト

vagrant -v

でバージョンが表示されればOK
場所はどこからでも実行できます

VirtualBoxインストール

VirtualBox仮想マシンの構築ができるツール

https://www.virtualbox.org/wiki/Downloads

LinuxOSの仮想環境構築

今回はUbuntuを採用しています

コマンドプロンプトにてC直下にVagrant専用フォルダを作成し、その中に仮想マシン用のフォルダを作成して移動します

mkdir C:\Vagrant & cd C:\Vagrant
mkdir ubuntu64 & cd ubuntu64

Vagrant初期化

ここでBoxを追加しUbuntuOSで初期化します
BoxはDiscover Vagrant Boxes - Vagrant Cloudで検索します

vagrant box add ubuntu/trusty64
vagrant init ubuntu/trusty64

Vagrantfileを編集

作成されたVagrantfileをテキストエディタで編集し、↓のコメントアウトを外します

config.vm.network "private_network", ip: "192.168.33.10"

仮想マシン起動

これでバックグラウンドで仮想マシンが起動します

vagrant up

PuTTy仮想マシンに接続

PuTTy仮想マシンSSH接続するためのツールです(要はコマンドラインです)
ここのPackage filesの64bitMSIをインストールします

Download PuTTY: latest release (0.70)

  • 接続先ホスト名:192.168.33.10
  • 接続先ポート:22
  • ユーザ:vagrant
  • パスワード:vagrant

接続するとvagrant@vagrant-ubuntu-trusty-64:$というところに出ます

CyberDuck仮想マシンの構造を確認

CyberDuck仮想マシン用のエクスプローラみたいなものです

https://cyberduck.io/index.ja.html?l=ja

環境設定

編集>環境設定で接続の設定をします

  • ブラウザタブ
    • ‘.'で始まるファイルを表示にチェック
    • ダブルクリックしたファイルを外部エディタで開くにチェック
  • 外部エディタタブ
  • 接続設定

ここから先はPuTTyでの作業です

Gitインストール(Ruby/Railsインストール用)

OSのアップデート

sudo apt-get update
sudo apt-get upgrade

Gitインストール

最新版だった2.14.1をインストール

sudo apt-get install -y libcurl4-gnutls-dev libexpat1-dev gettext libz-dev libssl-dev
cd
wget https://www.kernel.org/pub/software/scm/git/git-2.14.1.tar.gz
tar -zxf git-2.14.1.tar.gz
cd git-2.14.1
make prefix=/usr/local all
sudo make prefix=/usr/local install
git --version

でバージョンが出ればOK

Rubyインストール

バージョン管理用のRbenv経由でインストールします

GitからRbenvインストール

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo $SHELL
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
which rbenv
rbenv --list

でインストールするRubyのバージョンを確認します
(普通に公式サイトで安定板バージョンを確認しても良い)

Rubyインストール

今回は安定板の2.4.1をインストール
標準の指定バージョンも2.4.1にしておく

rbenv install 2.4.1
rbenv versions
rbenv global 2.4.1
rbenv rehash
rbenv version
which ruby
ruby -v

SQLインストール(今回はPostgre-SQL)

PostgreSQLインストール

$ sudo apt-get install PostgreSQL
$ /etc/init.d/postgresql status

SQLを起動してプロジェクトのロールを準備

sudo -u postgres psql
postgres=# create role projectname with createdb login password 'password';
postgres=# \q

Node.jsインストール

JavaScriptのエンジンが必要なのでNode.jsをインストールします
昔はtherubyracerというジェムが一般的でしたが、v8のエンジンのバージョン関係でインストール時にこけるのでNode.jsをインストールしましょう

$ sudo apt-get install nodejs

Ruby on Railsインストール

gem install rails
which rails
rails -v

Railsでアプリケーション作成

標準はSQLLiteなのでちょっとだけ面倒です

PostgreSQLを指定します

$ rails new projectname -TB --database=postgresql
$ cd projectname

依存関係をインストールしてgemのインストール

$ sudo apt-get install libpq-dev
$ bundle install --path vendor/bundle

PostgreSQLのロールを関連付ける

config/database.ymlを編集

default:
  adapter: postgresql
  encoding: unicode
  pool: 5
  # 以下の3つを追加
  username: projectname
  password: password
  # RailsサーバとPostgreSQLサーバが同じ場合
  host: localhost
development:
  <<: *default
  database: projectname_development
test:
  <<: *default
  database: projectname_test

マイグレーション

$ rails db:migrate
$ rails db:serup

データベースを使ってみる

$ rails g scaffold Post title:string body:text
$ rails db:migrate
$ rails s

サーバ起動

rails server -b 192.168.33.10 -d

参考サイト

Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する - Qiita

VagrantでUbuntuにRails環境をつくる - Qiita

インストールからRails-PostgreSQL環境を整える - Qiita

ドットインストール

神の参考サイト様のコピペです(土下座)