情報収集

現在転職活動中です。

転職活動にあたり技術力に加え、IT業界の情報収集にも力を入れ始めました。

日経コンピューター(雑誌)

②NewsPicks

②IT JAPAN 2019

 

IT業界の潮流を把握すべく新聞やニュースサイト、雑誌を日々眺めています。

雑誌については、ネットで調べる限りエンジニアが読むべきものとして「日経コンピューターは外せない」ということだったので、6月から読み始めることにしました。

日経コンピューターは隔週の発売なので新刊はまだ2冊しか読んでいません。

なので

 

 

 

 

 

過去半年分のバックナンバーをまとめて購入しました

f:id:Arts91:20190706210843j:plain

毎日ひたすら読んでいます。多いわ笑

 

平成発売分のもありますので「そんな記事古いぜ」と言われるかもしれませんが、

業界の流れを勉強することが目的なので、古いニュース記事も目を通します。

歴史を勉強することも大事かと(IT業界ではついこのあいだのことも古い歴史になるんでしょうか)。

 

雑誌の内容は、ニュース記事がいくつか、特集(注目の企業や話題の技術などが取り上げられています)、コラムなど。僕はニュース記事と特集には目を通し、それ以外に気になるものがあれば読みます。

視点としては「IT企業の情報」というよりか、「ITのこういう技術やシステムが様々な業界や企業、生活にこのように影響を与えている」という見方で書かれているので、身近に感じながら読めます。

最近はIT業界のみならず、最近は様々な業界がデジタル戦略に力を入れていますし、まだ5冊しか読んでませんが、「企業のDX(デジタルトランスフォーメーション)戦略」などのキーワードが多く見受けられます。(なぜXなんでしょうか?)

 

 

 

次に、

NewsPicks

有名なニュースまとめサイト(アプリ)ですが、これは、iphoneだと小さいし、パソコンも微妙なのでipadで見てます。ちょうどいいです。

いろんなサイトから引っ張ってきてるんですね。

僕は「ダイヤモンド・オンライン」とか「東洋経済オンライン」とか「日経ビジネスオンライン」とか個別に今まで見てたので、それらから記事がピックアップされているので便利です。

プレミアム会員にはなっていないので、見れない記事はコメント欄見てます。全部見れませんが、それで大体の記事の内容が推測できます笑

 

最後に、

IT JAPAN 2019が7月10日(水)〜12日(金)の3日間、品川のプリンスホテルで開催されます。日経コンピューターを読んでいたら広告があったので3日通し券をとりあえず購入しました。

様々な企業の重役の方や大学の方が講演して頂けるそうです。

テーマは「DXで挑む新時代」なので、最近の日経コンピューターで特集されている内容がメインになりそうです。

 

ちなみに一番の楽しみは、

レスリング選手の吉田沙保里さんのスペシャトークです。

 

いや、IT関係ねえー!!!笑

 

予算と現状のリアルタイム表示

家計簿アプリを開発中です。

せっかくなので、搭載した機能とコードについてたまに紹介していきます。

 

機能:

・月ごとに収入予算と支出予算を設定することができる

・トップページで当月の収入予算と支出予算が表示される。

・今月のその時点での収入額、支出額が表示される。

・収入(支出)予算に対する、その時点での収入(支出)額との差が表示される

・実際の収入額ー実際の支出額で収支状況が分かる。

 

予算の設定:

設定ページでで年・月を選択し、収入予算額、支出予算額を入力するとDBのbudgetsテーブルにデータが送られます。

コントローラ:

 def new
 budget = Budget.new
 end

 def create
 @budget = Budget.create(year: budget_params[:year],month: budget_params[:month],
 income_amount: budget_params[:income_amount],
 spending_amount: budget_params[:spending_amount], user_id: current_user.id)
 end

 private
 def budget_params
 params.permit(:year, :month, :income_amount, :spending_amount)
 end

 end

 

トップページで当月の収入予算と支出予算を表示:

 def index
 @name = current_user.name
 # 今月は何月か
 time = Time.now
 this_month = time.month
 this_year = time.year
 
 # 設定した予算の今月
 @income_budget = Budget.find_by(year: this_year, month: this_month).income_amount
 @spending_budget = Budget.find_by(year: this_year, month: this_month).spending_amount
 

まず、今が何年の何月かリアルタイムで認識される必要があります。

現在、this_yearには今年("2019")が、this_monthには今月("6")が入るようになっています。それを使いbudgetsテーブルから「年」は今年「月」は今月の「(設定した)収入予算額」を条件に検索して取得します。支出予算も同様です。

取得した値をビューファイルに」渡して表示させます。

 

今月のその時点での収入額、支出額を表示:

# 今月の現在の収支状況
 
@current_income = Income.group("YEAR(date)").group("MONTH(date)").sum(:amount)
@current_income[[this_year,this_month]]
@current_income_view = @current_income[[this_year,this_month]]
 
@current_spending = Spending.group("YEAR(date)").group("MONTH(date)").sum(:amount)
@current_spending[[this_year,this_month]]
@current_spending_view = @current_spending[[this_year,this_month]]
 
end

コードが長くなってしまいました。

まず、カラムの型が予算テーブルと異なっているので検索の仕方を変えました。(DB設計は反省です)。

incomeテーブルで検索条件を「年」を今年「月」を今月とし、その対象のレコードのincome_amount(収入金額)の合計金額を取得します。この時点では{2019,6 => 300000)という形で取得できていますので、そのまま@current_spending2019,6とすれば300000が取れます。しかし、毎月リアルタイムで値を取りたいので@current_spendingthis_year,this_monthに置き換えています。こうすれば7月に入れば、自動的に7月のものをデータベースから探してきます。

ポイントは、日付を検索する際はcreated_atではなく専用で作ったdateから探してきます。なぜなら、検索対象は「入力を行った日」ではなく「入力欄に入力された日付(中身)」だからです。(カレンダーから選べるようになっています)。

例えば、6月1日に思い出して5月31日の分を入力することも考えられるため、その際齟齬が生じないよう、DB設計と検索条件を考えました。

 

・収入(支出)予算に対する、その時点での収入(支出)額との差

・実際の収入額ー実際の支出額で収支状況が表示される。

ビューファイル:

 .side-contents
 .side-contents_budget
 .side-contents_budget_income
  今月の収入予算
  = @income_budget.to_s(:delimited)
.current_income
現在の状況
= @current_income_view.to_s(:delimited)
.income_difference
差額
= (@income_budget-@current_income_view) * -1
-# 収入予算より実績が上回っていたら計算式ではマイナスだが、会計上はプラスなので*-1して反転
 
.side-conyents_budget_spending
今月の支出予算
= @spending_budget.to_s(:delimited)
.current_spending
現在の状況
= @current_spending_view.to_s(:delimited)
.spending_difference
差額
= @spending_budget-@current_spending_view
.total
収支
= @current_income_view - @current_spending_view
円(今月の収入額-今月の支出額状況)
 


 
デザインはまだ仮置きなのでhamlは簡易的ですが、ここではただ四則演算で差額を計算しています。収入予算に対する、実際の収入額は予算を超えていれば計算上マイナスになるますが会計上はプラスなので*(-1)してプラスとマイナスを反転させています。
(まあ反対に実際額から予算を引いても同じことですが...)
 

家計簿アプリ!!

プログラミングスクールのカリキュラムを修了し、就職活動も徐々に始めていますが、同時に勉強も兼ねて個人的にアプリを開発中です。

今回は家計簿アプリに挑戦です。

アプリ:家計簿アプリ

 

なぜ家計簿か:

・金融に興味があったから。

・プログラミング開発の流れを理解するのに丁度良いかなとなんとなく思ったから。

 

目的:カリキュラムが一通り終わったので、復習を兼ねプログラミング開発の流れをより理解するため。早めに完成させたいですが、優先度としては、理解をしながら、新しいことも勉強しながら、調べる力を身につけながらやってみることに重きを置いています。遠回りしてんなと思う時もありますが、きっと将来に役立つ・・・はず!

 

主な機能:

・新規登録、ログインができる

・収入・支出を日別、カテゴリー別に入力し保存

・月毎に予算を設定できる

・トップページには、当月の収入予算と支出予算、及びその日時点での収入と支出額が自動で表示されその差額が分かる。

・年と月を選択するとカテゴリー毎の金額と全体における割合、そして月の合計額が分かる。

応用として上記以外にも便利な機能を付けてみたいですが、まず基本的な機能の完成を目指しています。

 

今回の個人アプリは想像以上に身になっています。

理由:

・自分でどのようなアプリを作るかというところから構想する。

・アプリに必要な機能、処理の流れ、設計など一連を自分で考える。

・カリキュラムにない部分を自分で調べるため、調べる力がつく。

・考えても、調べても試行錯誤しても分からない時は、某WEBサイトで質問してみる。

その際、全く知らない、アプリの背景も分からない方々に質問するので、どのようにしたら質問の意図が分かりやすく伝わるか一旦自分自身でまとめる。

など

まとめると「自分の頭で考える」というのが一番です。

 

難しさ:

(進め方)

アプリを開発する上では、アプリの機能、構成、処理の流れ、またDB設計を事前に固める必要はあると思いますが、自分はもともと完璧主義者なので、作業を始めるまで時間が掛かりそうでした。いつまでたっても始められないと思い、一旦仮で設計を固めましたが、案の定進めていくにつれ「やっぱり、あーしたほうがいい」とか「あれが必要だから急遽追加、あれは不要」などスムーズとは言えない状況です。ただ、カリキュラムに沿って進めるのではなく、自分の頭で考えるのは、今まで学んだ知識、考え方を整理し、総動員する必要があるのでかなり充実しています。実践に近ずけるためTrelloも作って用意しましたが、最近は全然見てないです笑 いつの間にか無視です。

 

(実装)

家計簿アプリはSNSアプリなどと違い「分析」をすることが機能の主な役割なので、結構ややこしいです。ほとんどの機能ではデータを加工し扱います。

月毎、日毎、カテゴリーごとの収支、前月比、設定した予算に対しての実際の収支とその差、各カテゴリーの全体の中での割合などなど。当然機能ごとに必要なデータの抽出条件は変わってきますので、その都度、条件を組み合わせながらDBからデータを取得する必要があります。なので、SQLやActive Recordなんかはかなり調べたりしながら進めています。予想以上に入り組んでいるなというのが実感です。ナメてました。

例えば、今月の現時点での収入状況をDBから取得する際、

「今月が何月かをリアルタイムで認識させる」

「dateカラムの年ー月ー日から年と月のみを抽出し検索条件とする」

「検索にマッチするレコードのincome_amount(収入金額)カラムの金額を全て足し合わせる」

 

今の所うまく取得できてません。

 
 def index
 @name = current_user.name
 # 今月は何月か
 time = Time.now
 this_month = time.month
 this_year = time.year
 
 # 設定した予算の今月分
 @income_budget = Budget.find_by(year: this_year,month: this_month).income_amount
 @spending_budget = Budget.find_by(year: this_year,month: this_month).spending_amount
 
 # 今月の現在の収支状況
 @current_income = Income.group("YEAR(date)").group("MONTH(date)")
 .select(date: this_month).sum(:amount)
 @current_spending = Spending.group("YEAR(date)").group("MONTH(date)")
 .select(date: this_month).sum(:amount)  

 # binding.pry
 end
 
 
 
結果

[1] pry(#<BooksController>)> @current_income

=> {[2019, 5]=>150000, [2019, 6]=>1165000}

6月の合計取れてんじゃんと思ったら、5月もきてました。呼んでねーんだよ5月。御呼びでないんすよ。

 

引き続き頑張ります。

SQL

今回はSQLについて書いていきます。

SQLとはStructured Query Languageの略で、リレーショナルデータベース管理システムと対話をするための言語です。

つまり、データベースに対し、〇〇というデータを追加してほしい、〇〇のデータについて検索したいという要求を出します。この要求をクエリ(問い合わせ)と言います。

 

では、リレーショナルデータベースとは何なのか。

データベースにはいくつかの種類があります。

階層型、ネットワーク型、リレーショナル型などです。

リレーショナルデータベースでは、データを表形式で管理します。そしていくつかの表(テーブル)同士を関連づけて管理することができます。

例えば、以下はある学校についてのデータベースですが、生徒テーブルは、生徒は全員どこかしらのクラスに所属していると見て取れます。教師テーブルには各教師がどのクラスを担当しているかわかります。つまり、2つのテーブルを関連づければ,

各生徒の担任が誰であるのかが分かります。

 

生徒

ID

名前

所属クラス

1

山田

A

2

佐藤

C

3

鈴木

D

4

加藤

B

 

教師

ID

クラス

担任クラス

1

A

小川

2

B

大野

3

C

石川

 

SQLに話を戻しますが、SQLはこれらデータに対し、様々な指示、要求を出すことができる言語です。

例えば、以下のようなものです。

 

〜基本〜

・データの取得

 

f:id:Arts91:20190606233358p:plain

・データの追加

f:id:Arts91:20190606233419p:plain

・データの更新

f:id:Arts91:20190606233427p:plain

・データの削除

f:id:Arts91:20190606233436p:plain

〜検索〜

・AND

f:id:Arts91:20190606233445p:plain

・OR

f:id:Arts91:20190606233456p:plain

 

算子 意味
= 左右の値が等しい
+ 左辺は右辺より小さい
< 左辺は右辺より大きい
> 左辺は右辺の値以下
<= 左辺は右辺の値以下
>= 左辺は右辺の値以上
<> 左右の値が等

f:id:Arts91:20190606233934p:plain

・NULL判定

f:id:Arts91:20190606233946p:plain

・LIKE分

f:id:Arts91:20190606234006p:plain

 

パンくずリスト

最終課題メルカリのクローンサイトで実装したパンくずリストについて紹介します。

 

パンくずはページの階層が深くなった際に、今どこのページにいるのか視覚的にわかりやすくします。

 

下記実際に実装したページですが、メルカリのマイページに入り、その中のプロフィール画面にいることが視覚的にわかります。

 

f:id:Arts91:20190603104802p:plain

 

実装の流れ

①gretelというgemをインストール

(gemfileに追記し、bundle install)

 

②gretelの設定ファイル config/breadcrumbs.rbを作成

(bundle exec rails g enerate gretel:install)

 

③config/breadcrumbs.rbに各ビューページに表示させたいパンくずを設定

 

f:id:Arts91:20190603105723p:plain

メルカリ>マイページ>プロフィールを例に説明します。

まず「マイページ」について、

・crumb :show doでどのビューファイルに対し設定するのか書きます。「マイページ」はusers/show.html.hamlなのでshowです。

・link" "ではページに表示させたいパンくずの表示名を書きます。

・〜_pathでパスつまりルーティングの経路を書きます。「マイページ」はroot(トップページ)から入るので root_pathになります。

・parent : 〜 は親ページ(1つ前のページ)なので同じくrootです。

 

同じように

プロフィールはedit.html.hamlに設定し、表示は「プロフィール」(全ての経路を書く必要はありません。そのページの呼び名のみでOK)にします。パスはusers/editなのでusers_path, 親はshowなのでparent: showです。

 

④各ビューファイルに設定する。

下記はプロフィールページのファイルです。

f:id:Arts91:20190603111307p:plain

 

スライダープラグイン[Slick]

今回は、最終課題メルカリのクローンサイトで実装した商品詳細ページの画像表示について紹介します。機能はslickというプラグインを使用しました。

 

下記に実際に作ったページの動画を載せました。

まず作りとしては、

ユーザーが投稿した写真は、一覧で表示され、選択すると上の大きいメイン部分にスライドして現れるという仕組みになっています。ページにアクセスした際は1枚目に投稿した写真がメイン部分に表示されています。

 

f:id:Arts91:20190602135656g:plain

 

実装の流れ

・ユーザーが投稿した写真はデータベースに入りますので、データベースからそのユーザーが投稿した画像を取得します。

 

コントローラー:

DBから画像を取得し@imageに入れます。

f:id:Arts91:20190602140609p:plain

ビューファイル:

f:id:Arts91:20190602140620p:plain

詳細ページでは2箇所(メインの大きい部分と下の一覧部分)画像を表示するところがありますが、@imageのみしかありませんね。

なぜかというと、下記に紹介するslick機能が関係しています。

 

スライダープラグインのSlickをここから紹介します。

プラグインとはソフトウェアに機能を追加するプログラムで、slickではスライド機能を実装できます。

 

まず、@imageで統一したのはslickを使いメインとサブ(一覧表示部分)を連携させたからです。つまりユーザーが5枚画像を投稿したらそれらをメインとサブにそれぞれ仕込んでおく訳です。そしてサブからAという画像を選択したら、メインに仕込んであるAがスライドで出てくるという訳です。つまりメインとサブ両方に@imageで渡せば、当たり前ですが両方に同じ画像を仕込めます。わざわざコントローラーで@image_main、@image_subとか書いてデータを取得する必要はありません。

 

JSファイル

f:id:Arts91:20190602141055p:plain

SlickはJavaScriptで使用できます。

まず、mainの設定をします。asNavForを使い、subと連携させます。

subも同様に設定します。

またSlickは様々なオプションを使うことができカスタマイズがしやすいのが特徴です。

 

Slick及びオプションについて参考にした記事がありますので紹介します。

https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7

https://stand-4u.com/web/javascript/slick.html

ナビゲーションバー

今回は、ナビゲーションバーの実装について紹介します。

 

スクールの最終課題をチームで開発中と以前、記事で書きましたが、

具体的にいうとフリマアプリのメルカリのクローンサイトを作りました。

 

私が担当したのは、

・新規登録ページのフロントエンド

・商品詳細ページのサーバーサイド

・パンくず機能

です。

 

今回は、新規登録ページで実装したナビゲーションバーについて紹介いたします。

まず、見た目は下記の通りです。

新規登録は複数ページに渡る為、フローを可視化させる役割を持ちます。

 

f:id:Arts91:20190602130624p:plain

 

例えば、3ページ目まで行くと、今中間地点の「お届け先住所入力」の段階まで来てると、一目でわかります。
f:id:Arts91:20190602131011p:plain

 

実装

使用機能:

Haml, Scss

今回は、マークアップのみの設定で実装しました。

JavaScriptなどで自動的に更新されるようにしたかったのですが、調べてみるとマークアップのみで設定するのがメジャーらしく、それに倣いました。

 

大まかな流れとしては、

・各ページに対応するフローの設定を1ページごとにビューファイルを作り記述する

・各ページに対応するビューファイルにrenderで差し込む(管理しやすくするためにやったので必須ではない)

・Scssでレイアウトを設定

hamlは各ページ毎に作りscssは1ファイルのみでした)

 

下記実際のコードを紹介します。

3ページ目の「お届け先住所入力」ページを例に説明します。

まず、新規登録ページは3つのステータスに分けることができます。

・完了(completed)

・現在のページ(active)

・これからのページ

「お届け先住所入力」ページについて言えば、「会員情報」〜「電話番号認証」までが完了、「お届け先住所入力」が現在、「お支払い方法」〜「完了」がこれからとなります。

つまり、今回は5段階ある訳ですが、各ページで組み合わせが変わることになります。

それらを各ビューファイルに記述してあげて、あとはScssでcompletedの部分はこう、activeの部分はこう、これからの部分はこうと色やつくりを

設定してあげれば良さそうです。

Haml

f:id:Arts91:20190602131848p:plain

Scss (一部省略)

f:id:Arts91:20190602133606p:plain


次回は、新規詳細ページで使ったslickというスライダープラグインについて書きます。