最近使ったツールの紹介
最近ER図や画面遷移図を作成していたので、今回は最近使ってみたツールの使ってみた所感を述べていきたいと思います。
ER図
・ERDplus
オススメ度★★☆☆☆
erdplus.com
ER図を作成の際に初めて使ったツール。
適当にテーブルを作成したのがこちら。
使ってみての所感としては、
good points
・シンプルで操作がわかりやすい
・サクッと作りやすい
・ドキュメントの複製がしやすい
bad points
・よく見るER図となんか違うものが出来上がる
・矢印が増えるととても見辛い
・ショートカットが使えない
ちなみに見せた人には不評でした。
・Lucidchart
オススメ度★★★★☆
www.lucidchart.com
ERDplusが不評だったため、次に使ったツール。
適当にテーブルを作成したのがこちら。
使ってみての所感としては、
good points
・テーブルが作りやすい
・リレーションの線が描画しやすく、さらに自由自在に折り曲げられる
・ショートカットをいつもの感覚で使える
・エクスポートできるファイル形式が豊富
bad points
・開く時に若干のロードが発生する
・リレーションの線を描画するのが若干面倒
ER図を作成するにはもってこいのツールだと思います。
ブラウザ上でも、デスクトップアプリと同じようにショートカットを使えるのが嬉しいです。
さらに、リレーションの線を自由自在に折り曲げられます。
なので、テーブル数が増えた時でも、ごちゃごちゃしないようにできるのも使いやすい点。
ただしブラウザアプリだからだと思いますが、ファイルを開くのに若干時間がかかります。
また、リレーションの線の始点と終点をカスタマイズした時に、その線を描画するのにちょっとコツが必要なのがマイナス点。
当面はER図を作成する場合は、Lucidchartを活用していきたいです。
画面遷移図
・draw.io
オススメ度★★★★☆
www.draw.io
画面遷移図を作成する時に使ったツール
こちらのツールで作成した画面遷移図がこちら。
使ってみての所感としては、
good points
・オブジェクトを描画しやすい
・線を自由自在に折り曲げられる
・エクスポートできるファイル形式が豊富
bad points
・開く時に若干のロードが発生する
・オブジェクトを一括して細かい調整ができない
ボックスと線・矢印が描画しやすくて画面遷移図が簡単に作れちゃう！以上！
どのツールも、まだざっとしか使っていないので、秘めたるポテンシャルがあるかもしれません。
今回はこの辺で。
初対面の人と話すときの心構え〜勉強会編〜
僕の勤めている会社は社員が少ないこともあって、知らない人と話す機会がそれほど多くはありません。
なので最近は少しずつですが、勉強会等に参加して外部の人と話すようにしています。
PHP勉強会とか
phpstudy.doorkeeper.jp
エンジニアの登壇を応援する会の催しには参加してきました。
先日はカジュアルLT大会に参加しました。
engineers.connpass.com
本題ですが、勉強会ではほとんど懇親会のフェーズがあって、大体ピザとお酒をいただきながら雑談をする時間が設けられています。
この時に誰とも話さないとただ端の方でピザを食べながら酒を飲むことになります。
しかし、こういう時には積極的に話に行かないとほとんど話しかけられることはありません。
なので、初対面の人と話すために僕が心掛けていることを今回は書いていきます。
基本的には、「A. 人に話しかける→B. 話す→C. 様子を見て席を外す→再びA」の繰り返しです。
A. 話しかけるフェーズ
1. 話したいと思った人に話に行く
勉強会では大体自己紹介やLTがあるので、その時に興味を持った人に話しかけにいきます。
2. 隙を突く
と言っても食べ物や飲み物を取りに行っている時の隙を見て話しかけるということです。
みんな盛り上がってて話す人がいないよ〜って時に結構使えます。
3. 誰とも話していない人に話しかける
一人でピザを食べながら酒を飲んでいる人に話しかけにいきます。
双方"誰かと話している"立場になれるので、ぼっち感からは解放されます。
B. 話すフェーズ
1. 相手の話していた内容の質問をする
自己紹介やLTで面白そうな人だなと思った人にはその話題を振ってみます。
これが一番手っ取り早くて盛り上がる確率が高い気がします。
2. 相手の業務内容を聞く
無難な話題1。
他会社のことを知る機会はあまりないので、こういうチャンスに聞いておくと面白い話が聞ける場合があります。
聞ける内容でも
・どういう仕事をしているのか
・言語やフレームワークは何を使っているのか
・その会社で働くようになったきっかけ
など話せる内容はこと足りるとは思います。
3. なぜ勉強会に参加したのか聞く
無難な話題2。
特筆して盛り上がる話題でもないですが、初めの話題の振りためには結構使えます。
基本的には自分が気になったor共通点がある話題が話しやすいと思います。
C. 席を外す時
話題というものは尽きてしまって沈黙が続いてしまうと、どうしても気まずいものです。
そうした時には、
・トイレに行く
・食べ物や飲み物を取りに行く
行動をすれば、無理なく席を外せます。
おわりに
初対面の人と話すことは中々勇気がいるもので、苦手な方も多いかと思います。
でも、個人的には初対面の人と話すのは新鮮味があって面白いと思います。
そういう理由もあり、2019年は1ヶ月に1回は勉強会には参加していこうかなと思います。
入力フォームを追加削除できる機能を実装してみる use Vue & Vuetify
今回はVue.jsで入力フォームを追加削除できる機能を実装してみます。
試しにデザインにVuetifyを使ってみました。
今回はvue-cliを使っております。
vueのバージョンは2.9.6でした。
動作はこんな感じ。
まずはVuetifyの準備から。
Vuetifyのマテリアルデザインを適用するためにmain.jsに↓を追加しておきます。
mport Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify)
簡単ですね。
Vueファイルのソースはこんな感じ。
<template>
<div class="hello">
<h2>Essential Links</h2>
<v-flex xs6 class="ma-auto">
<v-layout row v-for="input in inputList" :key="input.id">
<v-text-field
v-model="input.text"
></v-text-field>
<v-btn fab dark small color="red" @click="removeInput(input.id)">
<v-icon dark>remove</v-icon>
</v-btn>
</v-layout>
<v-btn fab dark small color="blue" @click="addInput()">
<v-icon dark>add</v-icon>
</v-btn>
</v-flex>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
inputList: [{id: 0, text: ''}]
}
},
methods: {
addInput () {
let inputList = this.inputList
inputList.push({
id: inputList.length,
text: ''
})
},
removeInput (id) {
let inputList = this.inputList
inputList = inputList.filter((input) => { return input.id !== id })
let newInputList = []
for (let i = 0; i < inputList.length; i++) {
newInputList.push({
id: i,
text: inputList[i].text
})
console.log(i)
}
this.inputList = newInputList
}
}
}
</script>動作としては、
1. +ボタンをクリックするとaddInputメソッドが発火、inputListの最後に新たにオブジェクトを生成。
こちらはinputListに新たなオブジェクトをpushしているだけです。
2. 各フォームの右端にある-ボタンをクリックするとremoveInputが発火、クリックした-ボタンに付随するファームを削除。
こちらは
i) 削除したいオブジェクトのidを持つオブジェクトをinputListから除外
ii) inputListをidを0から順に並べ直す
ことをしています。
spliceを使えばいいじゃんと思われるかもしれませんが、spliceはオブジェクトを削除してもidは更新されず良からぬ挙動をするので今回の実装では使っておりません。
まどろっこしいかもしれませんがこれが安牌…？
Vue.jsもVuetifyも公式ドキュメントが超充実してるのでとても使いやすいです。
Vuetifyのロゴが結構好みなので公式ストアからTシャツが発売されててちょっと欲しいのですが、アメリカなのか日本なのかはたまた違う国なのか、どこから発送されるのかが気になるところ。
Store — Vuetify.js
おしまい。
=============================
あとがき
今年ももうすぐ終わってしまいますね。
学生の時よりも働いていた時の方が月日が過ぎるのは早いように感じます…
今年はプライベートでは暇さえあればゲームをしていたので、来年はその時間を他の時間として使っていきたいです…
ちなみに今年は、
ディシディアFFNT：約500時間
ペルソナ5：約130時間
キングダムハーツFM1.5：約60時間
Marvel's Spider-Man：約30時間
計720時間を1年間PS4のゲームをプレイしていることになります。
毎日約2時間はやっていることになりますね…
まだKHFM1.5+2.5の6作品のうち1作品しかやっていないし、来年にはKH3やキャサリン等も発売されるのでこの生活はまだまだ続きそうです。
でも積みゲーはしない主義。
さらに追記
ディシディアFFNTは現在無料版を配信中！
Free_Edition | DISSIDIA FINAL FANTASY NT | SQUARE ENIX
興味があれば是非とは言えませんがどうぞ。
PHPで日付のデータから月の英語表記の文字列を取得する
今回はPHPのおそらくマイナーであろう関数を使って日付のデータから月の英語表記の文字列を取得したいと思います。
例えば、$birthdayという変数にY-m-dの形のデータが入っているとすると、
$birthday = '1996-08-07'
こうすればできます。
$year = date_format(date_create($birthday), 'Y'); $month = date_format(date_create($birthday), 'm'); $day = date_format(date_create($birthday), 'd'); $jd = cal_to_jd(CAL_GREGORIAN, $month, $day, $year); $month_name = jdmonthname($jd, 1); echo $month_name; // August
使用した関数の説明
・date_create：新しいDatetimeオブジェクトを返す
date_formatはDatetimeオブジェクトを使わないといけないみたいなので、その形に変換するために使いました。
・date_format：指定した書式でフォーマットした日付を返す
第一引数にDatetime型オブジェクトを、第二引数に取得したい形を指定します。
cal_to_jdで月と日と年の数値が必要なため使いました。
例：
// $birthdayから'1996/08/07'で取得したい場合 date_format($birthday, 'Y/m/d') // $birthdayから0がついていない月の8だけ取得したい場合 date_format($birthday, 'n')
フォーマットの指定について詳しくはこちら↓
年・月・日を取得する ～ PHP 関数 日付・時刻 - Office Tanabe
・cal_to_jd：指定した日付からユリウス積算日を計算する。（ちょっと何言ってるかわからない）
第一引数に変換元のカレンダーを、第二引数に月を表す数値を、第三引数に日を表す数値を、第四引数に年を表す数値を使います。
jdmonthnameでユリウス積算日が必要なため使いました。
関数について詳しくはこちら↓
PHP: cal_to_jd - Manual
・jdmonthname：月の名前を含んだ文字列を返す
第一引数にはユリウス積算日を、第二引数でどの暦に変換するかを指定します。
変換についてはこちら↓
PHP: jdmonthname - Manual
今回は現行の太陽暦であるグレゴリオス暦で欲しかったので1を指定しています。
初めはcase文でやればええやんと思っていましたが、記述が確実に長くなるし調べてみたらcase文を使わなくてもできることが判明したのでやってみました。
（結局どっちを使った方がいいかは自分の中で結論出ず）
でもPHPには面白い関数があるんだなーと思いました。
今回は手続き型でやりましたが、オブジェクト指向型でもできるようです。
またいつか
PHPでスペースで区切った検索をできるようにする
今回は、PHPでスペースで区切った検索をできるようにする実装について書いていきます。
実装する機能は
1. preg_replaceで全角スペースを半角スペースに変換する
2. explodeで半角スペースごとに分割して配列にする
3. array_filterで空白の配列を削除
4. array_valuesで配列番号を整える
です。
では今回使うイカれた関数を紹介するぜ！
1. preg_replace
第一引数で正規表現パターンを、第二引数で置換後の文字列を、第三引数で置換対象の文字列を指定します。
今回はスペースが全角だった場合に半角に置換するために使います。
例
$str = "ガングニール 天羽々斬 イチイバル アガートラーム";
$replace = preg_replace("/( | )/", " ", $str);
//$replaceの中身
"ガングニール 天羽々斬 イチイバル アガートラーム"2.explode
第一引数で区切り文字を、第二引数で対象の文字列を指定します。
1.で置換した文字列を配列にしてforeachで回せるように加工します。
例
$str = "ガングニール 天羽々斬 イチイバル アガートラーム";
$explode = explode(" ", $str);
//$explodeの中身
array [
0 => "ガングニール"
1 => "天羽々斬"
2 => "イチイバル"
3 => "アガートラーム"
]通常であれば1と2で事足ります。
しかし、通常の範囲外の入力がされるかもしれません。
動作の不具合の原因になるかもしれないので、想定される通常の範囲外の入力にも対応できるような実装をしていきます。
3. array_filter
指定した引数の空白が入ったvalueを削除します。
トチ狂ったかのように文字と文字の間にスペースを入れられることを想定して、空白が入ったvalueがないようにするために使用します。
例
$str = "ガングニール 天羽々斬 イチイバル アガートラーム";
$explode = explode(" ", $str);
$filter = array_filter($explode);
//$explodeの中身
array:17 [
0 => "ガングニール"
1 => ""
2 => ""
3 => ""
4 => ""
5 => ""
6 => "天羽々斬"
7 => ""
8 => ""
9 => "イチイバル"
10 => ""
11 => ""
12 => ""
13 => ""
14 => ""
15 => ""
16 => "アガートラーム"
]
//$filterの中身
array:4 [
0 => "ガングニール"
6 => "天羽々斬"
9 => "イチイバル"
16 => "アガートラーム"
]空白が入ったvalueのkeyは消えましたが、配列番号が飛び飛びになってしまいます。
そこでarray_valuesの出番です。
4. array_values
配列番号を整えます。
例 $str = array_values($filter); //$strの中身 array:4 [ 0 => "ガングニール" 1 => "天羽々斬" 2 => "イチイバル" 3 => "アガートラーム" ]
以上だ！
今回紹介した関数を使えばforeachで回せるいい感じの配列になるはずです。
後はSQLをいい感じに構築して、必要な箇所に変数をぶち込んでください。
Laravelで画像のアップロードと削除を実装してみる
地獄からの使者、スパイダーマッ！
ということで9/7（金）にスパイダーマンのゲーム（PS4）が発売されましたね。
スパイダーマンになった気分になれるゲームでめちゃくちゃ面白いです。
Marvel's Spider-Man move
Marvel's Spider-Man action
移動もアクションも爽快で止め時がわからなくなります。
けれど、このUIが分かりにくくてここだけマイナスポイントです。
「続ける」も「リトライ」も今プレイしているモードをやり直して続けると捉えられるので、一瞬考える時間が生まれてしまうのが良くないかな〜っと思ったり思わなかったり（エンジニア脳）。
そろそろトロコンしそうなのでクリアしたら冬に発売されるKH3に向けて、キングダムハーツHD1.5+2.5リミックスをプレイしていこうと思ってます。
==========================================
さて、本題に。
Laravelで画像のアップロードと削除を実装してみます。筆者の環境ではLaravelのバージョンは5.5です。
仕様としては画像が既にアップロードされている場合に更に画像をアップロードする場合は、既にアップロードされている画像を削除するようにしています。
画像のアップロードに関してはこちらを元に実装しています。
Laravelで画像ファイルアップロードをする簡単なサンプル
フォームの作成
画像をアップロードするフォームを作成します。
基本的には参考にした記事通りですが、削除ボタンが追加されています。
元記事と同じくresources/views/home.blade.phpに記述していきます。
{!! Form::open(['url' => '/upload', 'method' => 'post', 'files' => true]) !!}
@if (session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
@if($errors->any())
<div class="alert alert-danger">
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="form-group">
@if($user->avatar_filename)
<p>
<img src="{{ asset('storage/avatar/' .$user->avatar_filename) }}" alt="avater" />
</p>
@endif
{!! Form::label('file', '画像アップロード', ['class' => 'control-label']) !!}
{!! Form::file('file') !!}
</div>
<div class="form-group">
{!! Form::submit('アップロード', ['class' => 'btn btn-default']) !!}
</div>
{!! Form::close() !!}
//元記事からの追加点、削除ボタンを追加しています。
{!! Form::open(['url' => '/delete', 'method' => 'post']) !!}
{{ method_field('DELETE') }}
<button class="btn btn-danger">削除</button>
{!! Form::close() !!}
Routeを追加
uploadの他にdeleteも追加します。routes/web.phpに記述していきます。
Route::post('/upload', 'HomeController@upload');
Route::delete('/delete', 'HomeController@delete');Controllerに記述
画像のアップロードと削除の機能を実装していきます。
public function upload(Request $request)
{
$this->validate($request, [
'file' => [
'required', 'file', 'mimes:jpeg,png'
]
]);
if ($request->file('file')->isValid([])) {
$filename = $request->file->store('public/avatar');
$user = User::find(auth()->id());
//画像アップロード時に既に他の画像がアップロードされている場合に既存の画像を削除する処理
Storage::disk('local')->delete('public/avatar/'.$user->avatar_filename);
$user->avatar_filename = basename($filename);
$user->save();
return redirect('/home')->with('success', '保存しました');
} else {
return redirect()->back()->withInput()->witherrors(['file' => '画像がアップロードされてないか不正なデータです。']);
}
}
public function delete(Request $request)
{
$user = User::find(auth()->id());
//ファイルがアップロードされてない場合に削除ボタンをクリックした時の挙動を制御
if (is_null($user->avatar_filename)) {
return redirect('/home')->with('error', '削除するファイルがありません');
}
Storage::disk('local')->delete('public/avatar/'.$user->avatar_filename);
$user->avatar_filename = null;
$user->save();
return redirect('/home')->with('success', '削除しました');
}
実装時の挙動の動画を載せようと思いましたが、時間がないので割愛します。
基本的な画像のアップロードと削除はできましたが、今時のUIだと画像を選択するとアップロードする前に選択した画像が表示されるのが当たり前だと思うので、そちらの方もいつかはやってみたいかなとは思っています。
いずれまた一つ頼もう
Node.jsやらnpmって一体何だ？何なのだ？
はじめに
お仕事で「Node.jsとnpmをインストールしといてー」と言われ、ターミナルにコマンドをぶち込んでインストールしました。
その後、こいつらが一体何者なのかという疑問がふつふつを湧いてきたので、ヤホーで調べたものをまとめたいと思います。
1.Node.jsとは
Node.jsとは、ライアン・ダール(Ryan Dahl)氏によって作成されたサーバーサイドのjavascript実行環境のことです。
フレームワークでもライブラリでもないそうです。
ちなみにロゴが緑と黒の配色が好きな僕にドストライクで、ロゴのステッカーかT-シャツが欲しくなるレベルです。（特に上二つ）
Node.jsの使うメリット
なんと言っても メモリの消費量が少なく速いのが特徴です。
非同期処理のノンブロッキングI/Oで接続台数が1万台を超えても遅くならないそうです。
ちなみに2018年6月現在でユーザー登録者数が2100万人を突破したソーシャルゲーム、「グランブルーファンタジー」でも使われているみたいです。
Node.jsのバージョン管理ツールについて
Node.jsのバージョン管理ツールは色々あって、今までに「nodebrew」や「n」を使ったことがありました。
しかし、Node.jsのバージョン管理ツールって何を使えばいいんだ？と思って調べてみると、下記のサイトが疑問の答えの一つのような気がします。
Node.js のバージョン管理ツール n を使ってみました
2.npmとは
npm(node package manager)とは、その名の通りNode.jsのパッケージ管理システムです。
パッケージ管理システムと聞いていまいちパッとしませんでしたが、
前からHomebrewを使っているのでHomebrewのNode.js版なんだなという感じで捉えてます。
パッケージ管理システムなので、例えば
npm install パッケージ名
でパッケージがインストールできますし、
npm info パッケージ名
でパッケージの情報を確認できます。
Homebrewの
brew install パッケージ名
や
brew info パッケージ名
に記述方法が似ている気がします。
npmのコマンドはまだまだありますが、その紹介は割愛します。
おわりに
これでざっくりですが、Node.jsとnpmについて知ることができたと思います。
これから使っていきながら発見することもあると思うので、これから仲を深めていきたいです。
P.S.
緑と黒の配色で特に好きなものはこちら
