日々地道に成長

思いついたことを書いていきます。

【Embulk】Embulk入門講座〜使用方法編〜【初心者】

f:id:stady-diary:20201027001919p:plain

お疲れ様です。コーヒーです。

前回はEmbulkのインストール方法について解説いたしました。

stady-diary.hatenablog.com


今回はEmbulkの簡単な使用方法を解説していこうと思います。

EmbulkのQuick start

Embulk公式のお試しプログラムで基本的な使い方を覚えることができるため、そちらを元に解説していこうと思います。

https://www.embulk.org/

1.exampleの実行でお試しファイルの作成
embulk example ./try1

上記コマンドを入力することでサンプルのcsvファイル(sample_01.csv.gz)と実行の元となるファイル(seed.yml)が生成されます。

実際の作業でcsvファイルを送る場合などは、この工程はサンプルファイルを作成しているだけなので必要はありません。

[sample.csv]

id account time purchase comment
1 32864 2015/1/27 19:23 20150127 embulk
2 14824 2015/1/27 19:01 20150127 embulk jruby
3 27559 2015/1/28 2:20 20150128 Embulk "csv" parser plugin
4 11270 2015/1/29 11:54 20150129 NULL

 [seed.yml]

in:
 type: file
 path_prefix: 'C:\Users\try1\csv\sample_'
out:
 type: stdout

seed.ymlは設定を行う前の状態なので、pathの設定ぐらいしか書かれていません。

逆にpathさえ繋がっていれば後に紹介するguess機能でおおよその設定ができます。

2.guessの実行でembulk設定ファイルのおおまかな設定を行う
embulk guess ./try1/seed.yml -o config.yml

guessを入力することで、指定したファイルを推測して設定ファイルを作成できます。上記コマンドは、seed.ymlで指定しているcsvファイル(sample_01.csv.gz)の構成を読み取り、その結果をconfig.ymlとして出力しています。

[config.yml]

in:
 type: file
 path_prefix: C:\Users\try1\csv\sample_
 parser:
 charset: UTF-8
 newline: LF
 type: csv
 delimiter: ','
 quote: '"'
 escape: '"'
 null_string: 'NULL'
 trim_if_not_quoted: false
 skip_header_lines: 1
 allow_extra_columns: false
 allow_optional_columns: false
 columns:
 - {name: id, type: long}
 - {name: account, type: long}
 - {name: time, type: timestamp, format: '%Y-%m-%d %H:%M:%S'}
 - {name: purchase, type: timestamp, format: '%Y%m%d'}
 - {name: comment, type: string}
out: {type: stdout}

先ほどのseed.ymlからかなり情報量が増えているのがわかると思います。

sample.csvから以下のような情報を読み取り、自動作成してくれています。

  • charset(文字コード)：UTF-8
  • type(fileの種類)：csv
  • skip_header_lines(ヘッダーの位置設定)：1
  • columns：それぞれのカラム名、データ型等

これがguess機能のすごいところです！

guessコマンドは、使用しなくてもembulkの設定ファイルの作成はできますが、自分で入力する項目が減るため、なれてくるまでは便利な機能になっています。

また、今回はoutの設定を行っていないため標準出力になっています。outの設定を追加することで「CSVとして出力」「MySQLへ出力」「TreasureDataに出力」など様々なことが出来ます。

3.preview機能で出力する前に結果を確認
embulk preview config.yml

preview機能を使用することで、実際に出力する前に結果を確認できます。

間違っている状態でデータを上書きしてしまうことを防ぎたい時など、先に出力結果を確認してから行いたい時に使用してください。

[出力結果]

f:id:stady-diary:20201027004030p:plain

4.run機能でEmbulkの実行
embulk run config.yml

runで設定したファイルの実行が行えます。

上記コマンドでは「2.」で設定したconfigファイルの実行をおこなっています。

出力結果は以下のようになります。

 [出力結果]

f:id:stady-diary:20201027004208p:plain

 

以上でEmbulkの簡単な使用方法についての解説は終了です。

参考にしていただければ幸いです。

【Embulk】Embulk入門講座〜インストール編〜【初心者】

f:id:stady-diary:20201027002644p:plain

お疲れ様です。コーヒーです。

前回はEmbulkの概要について解説いたしました。

stady-diary.hatenablog.com

今回は実際にEmbulkのインストール方法を解説していこうと思います。

Javaのインストールについて

Embulkのインストールする前に、Javaのインストールが必要となります。

Javaをインストールするに当たって注意すべきポイントとして「Java 8」をインストールしてください。(2020/10現在)

それ以外のバージョンでは、対応していないため気をつけてくだい。

インストールは以下のページからおこなえます。

http://jdk.java.net/

インストール方法は以下のページ等を参考におこなってください

OpenJDKのダウンロード及びインストール | Java入門

各OSでJDKのバージョンを切り替える方法 – CodeAid（コードエイド）

 Embulkのインストールについて

公式サイトは以下になり、基本的にはこの方法でインストール＆Quik startが可能です。

https://www.embulk.org/

このインストール方法をより詳しく解説していきます。

Linux&MacOS

以下のコマンドをターミナル上で打つことでインストール完了します。

それぞれのコマンドの意味も調べたので、載せておきます。

curl --create-dirs -o ~/.embulk/bin/embulk -L "https://dl.embulk.org/embulk-latest.jar"

 curlコマンドは「HTTP,FTPからダウンロードやアップロードできる」コマンドです。

上記コマンドはディレクトリを作成しつつ、指定したURLからダウンロードしています。

chmod +x ~/.embulk/bin/embulk

chmodコマンドはパーミッションの変更を行えます。

上記コマンドは簡単にいうと実行権限を追加していることになります。

echo 'export PATH="$HOME/.embulk/bin:$PATH"' >> ~/.bashrc

echoコマンドは文字列や数値等を表示するコマンドです。

通常は画面に表示するのですが、指定することでファイルに出力も行えます。

上記コマンドの場合は「export PATH="$HOME/.embulk/bin:$PATH」という文字列を、「.bashrc」に追記しています。

source ~/.bashrc

sorceコマンドはファイルに書かれたコマンドを実行するコマンドになります。

先ほど追記した「.bashrc」を実行しています。

windows

Windowsの場合は下記コマンドだけでインストール完了します。

PowerShell -Command "& {[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::TLS12; Invoke-WebRequest http://dl.embulk.org/embulk-latest.jar -OutFile embulk.bat}"

「embulk.bat」をインストール後は環境変数に追加することをお勧めします。

以下サイト等を参考に設定をおこなってください。 

Windows10でTempやPathなどの環境変数を設定する方法 | サービス | プロエンジニア

 

 

以上で、embulkのインストール方法の解説は終了です！

参考になれば嬉しいです。

【Embulk】分かりやすい！！Embulk入門講座【初心者】

お疲れ様です。コーヒーです。

 

今回はEmbulkについて、初心者による初心者向け解説をしてみようと思います。

EmbulkからETLに触れるという人にとっての記事となると思います。（自分がそうだったため）

詳しい内容というよりは、Embulkがどういったもので何ができるのかに重点を置いて説明します。

ETLツールとは

Embulkについて説明する前にETLツールについて先に説明します！

ETLとは

  • Extract（抽出）
  • Transform（変換）
  • Load（格納）

の頭文字からきています。

すなわちETLツールとは、「あるデータをどこからか抽出し、抽出したデータを変換後、どこかにデータを格納する」ことのできるツールとなっています。

以下は「CSVファイルをETLツールでMySQLに格納している図」です。

f:id:stady-diary:20200930001115p:plain

Embulkとは

先ほどETLツールについて説明しましたが、それはEmbulkはETLツールの一つであるためです。

Embulkの特徴としては以下のようなものがあります。

  • オープンソースのため、無料で使用できる
  • プラグイン（便利機能）が多数用意されている＆独自実装が可能
  • 実行はコマンド実行（GUIではなくCUI）
  • 並列分散処理のため、巨大なデータに対応可能
  • guess機能により、自動で推定してファイルを生成できる

 Embulkの設定ファイルについて

次にEmbulkの設定ファイルについて解説します。

Embulkは「YAML形式」で書き、拡張子は「.yml」です。YAMLとは構造化データの表現方法の一つで、設定ファイル等に使われている書き方です。

ここからは大雑把に設定ファイルの構成を見ていきます。

 

f:id:stady-diary:20200930013541p:plain

細かい設定については今回は触れませんが、上記画像のような構成になっています。

ETLツールとはの構成と合わせてみることで分かりやすいかなと思います！！

 

今回は以上となります。

最後まで読んでいただきありがとうございます！！

UNDERTALE風webサイト制作＃5

お疲れ様です。コーヒーです。

第12回はHTML＆CSSとWEBデザイン実践編の最終回とします！

HTMLとCSSでできる範囲のことは一通りやったため、次回からはなにか新しいことに挑戦していこうかなと思います。

前回は紹介ページのコンテンツ追加を行いました！

第11回：

https://stady-diary.hatenablog.com/entry/2020/08/24/185645?_ga=2.246794435.632011921.1599410921-1694477281.1543286277

今回はコンタクトページを作成しました。

元々は経歴ページを最後に作ろうと思っていたのですが、紹介するほどの経歴もないため変更いたしました。(笑)

今回作成したページ

今回実際に作成したページを紹介します。

f:id:stady-diary:20200914000847p:plain

名前、メールアドレス、メッセージのシンプルな構成です。

ポートフォリオサイトを見た人に感想を送ってもらえるように作成しました。

フォームの作成方法

フォームを作成するには<form>タグを使用します。 フォームで使用するパーツを<form>タグで囲むことで作成します。設定する属性は以下のようになります。

  • action:データの送信先ページを指定
  • method:データの転送方法の指定。主にget,post
  • name:フォームの名前を指定

フォームのパーツ

フォームタグ内で使用するパーツを紹介します。<input>タグを使い、type属性でパーツを指定します。typeで指定できるパーツは以下のようなものがあります。

 作成したコード

今回作成したコードが以下になります。参考になれば嬉しいです。

        <form  action="#">
          <div>
            <label for="name">お名前</label>
            <input type="text" id="name" name="your-name">
          </div>
          <div>
            <label for="email">メールアドレス</label>
            <input type="email" id="email" name="your-email">
          </div>
          <div>
            <label for="message">メッセージ</label>
            <textarea id="message" name="your-message"></textarea>
          </div>
          <input type="submit" class="button" value="送信">
        </form>

問い合わせフォームについて

今回問い合わせフォームを作成しましたが、これは見た目だけの作成になります。実際にメールの受信にはPHP等のプログラミング言語を使用する必要があります。

 

 

今回はこれで以上となります!

最後まで読んでいただきありがとうございます！！

UNDERTALE風webサイト制作＃4

お疲れ様です。コーヒーです。

第11回も引き続きHTML＆CSSとWEBデザイン実践編です！

前回は紹介ページの作成を行いました！

第10回：

https://stady-diary.hatenablog.com/entry/2020/08/03/191003?_ga=2.126368654.2052626876.1598104009-1694477281.1543286277

今回は紹介ページのコンテンツ追加と当ブログにリンクをつなげてみました！

（紹介ページの話はほとんど自分の趣味の話です...）

紹介ページのコンテンツ追加

　前回はダンスが好きというページを作成しましたが、あれだけでは自分の好きなものを紹介しきれていません！そこで、同じような構成のページをもう二つ作成し、紹介ページに付け足していきます。コンテンツ内容はMusicとGameの2種類にしました。

　実際に作成したデザインが以下になります。

Music

f:id:stady-diary:20200823225817p:plain

　こちらがMusicの紹介ページです。普段は HIPHOPの主にラップを聴くことが多いです。ラップバトルが好きでそこからハマっていきました。Creepy Nutsとかが好きです！！

　また、ロックも好きでRADWIMPSなどを昔よく聴いていました。最近では、「ずっと真夜中でいいのに」にハマっています。

Game

f:id:stady-diary:20200823230728p:plain

　 こちらはGameの紹介ページです。今回作成しているWEBサイトも「UNDERTALE」というゲームを参考にしているように、ゲームはとても好きです。

　基本的にはRPGが好きで、最近では「ドラクエ11」「FF7リメイク」「ペルソナ5」がとても面白かったです。新しくキングダムハーツというゲームをはじめましたが話がとても長いのでクリアまでは時間がかかりそうです。

　RPGの他にもスマブラがとても好きでよくやるのですが、オンラインではなかなか勝てません...

ブログへのリンク

　作成しているホーム画面に、ブログというボタンを作成してあるのでそこから当ブログへのリンクをつなげようと思います。ただ、同じタブで開いてしまうと別サイトに飛ぶため、戻るのが大変になってしまいます。そこで今回はリンク先を別タブ表示にしてみます。

　実際に書いたコードが以下になります。 

<a href="https://stady-diary.hatenablog.com" target="_blank"><img src="images/blog.png" alt="nav-blog"></a>

　重要となるのはtarget属性を「_blank」に指定することです。これを行うことにより、別タブでの表示が可能になります。

　しかし、リンク先を別タブで表示させる実装には賛否があります。target属性を指定してしまうとユーザーがリンクをどのように開くかを選択できなくなるためです。実装時には使い勝手をしっかりと考える必要があります。

 

今回はここまでです。

最後まで読んでいただきありがとうございました！！

UNDERTALE風webサイト制作＃3

お疲れ様です。コーヒーです。

第10回も引き続きHTML＆CSSとWEBデザイン実践編です！

前回はホーム画面の実装を行いました！

第9回：

https://stady-diary.hatenablog.com/entry/2020/07/20/030943?_ga=2.186522473.1712988994.1595786087-1694477281.1543286277

今回は紹介ページを作っていきます。

紹介ページ構成

　紹介ページは自分の好きなものを載せていこうと思います！フルスクリーンレイアウトをいくつか組み合わせて一つのページを作成していきます。

　フルスクリーンとは、画像や動画等のメインビジュアルを画面全体を使って表示させるレイアウトになっています。特徴としては、印象的なデザインを作ることができます！

ダンスコンテンツ

　紹介ページの１つ目のコンテンツとして、ダンスの紹介をしていきます。自分はブレイクダンスが好きなため、外せないコンテンツになります！！

　実際に作成したものが以下のようになります。

f:id:stady-diary:20200727030854p:plain

　このキャラクターが行っているのはトーマスという技になります。両手で体を支えて足を振り回す技です。実際にやるとなかなかに疲れる技ですが、自分の得意技の一つとなってます！！

 　ちなみに動画ではこんな感じになります。


トーマス講座　ブレイクダンス　パワームーブ講座

※これみてめちゃめちゃ練習していたころを思い出します（笑）

 

次回は紹介ページにコンテンツを追加していこうと思います！！

最後まで読んでいきありがとうございます。

UNDERTALE風webサイト制作＃2

お疲れ様です。コーヒーです。

第9回も引き続きHTML＆CSSとWEBデザイン実践編です！

前回は企画からデザインカンプの制作まで終了しました！

第8回：

https://stady-diary.hatenablog.com/entry/2020/07/13/035613?_ga=2.146485490.713791784.1595177338-1694477281.1543286277

今回は実際にコーディングを行い、WEBサイトのホーム画面を作っていきます。

コーディング環境

　コーディングを行う前に、テキストエディターについて少し触れたいと思います。テキストエディターを使用することで多くの「補完機能」を得ることができ、効率よく開発が行えるため非常に便利です。

　今回使用したエディターは、「Atom」です。シンプルで使いやすく、無料で拡張機能も多いため、オススメのテキストエディターです。

ホーム画面作成

　それでは実際にコーディングしていきます。今回作成するサイトの構造は以下のようになります。

f:id:stady-diary:20200720024001p:plain

　上記構造を元に実際にHTMLを書いた結果こうなりました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Koshi Portfolio Web</title>
    <meta name="description" content="UNDERTALE風ポートフォリオサイトになります。">
    <link rel="icon" type="image/png" href="images/favicon.png">
  <!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Philosopher">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div id="home">
      <header class="page-header wrapper">
        <h1><a href="index.html"><img class="logo" src="images/logo.png" alt="koshinagai-logo"></a></h1>
      </header>

      <div class="home-content wrapper">
        <img class="char" src="images/char.png" alt="char">
      </div><!-- /#home-content-->

      <nav>
        <div class="main-nav wrapper">
          <a href="index.html"><img src="images/syoukai.png" alt="nav-syoukai"></a>
          <a href="index.html"><img src="images/keireki.png" alt="nav-keireki"></a>
          <a href="index.html"><img src="images/blog.png" alt="nav-blog"></a>
        </div><!-- /#main-nav-->
      </nav>

    </div><!-- /#home-->
  </body>
</html>
ファビコン

　今回はファビコンも用意しました。ファビコンとはサイト名の横に表示されている小さなアイコンのことです。例としてYouTubeのファビコンが以下となります。

f:id:stady-diary:20200720024832p:plain

　ファビコンがあることで複数タブを開いている時などに、ひと目で判断できるようになります。ファビコンの記述はヘッド内で行われています。

    <link rel="icon" type="image/png" href="images/favicon.png">
CSS

　HTMLだけでは、なんの装飾も行われていない状態です。実際にHTMLだけの状態は以下のようになります。

f:id:stady-diary:20200720030023p:plain

配置も大きさもバラバラで、背景も白のためおかしな表示になっています。これをCSSで整え、理想のサイトに近づけていきます。実際のコードは以下になります。

@@charset "UTF-8";

/* 共通部分
-------------------------------*/
html{
  font-size: 100%;
}
body{
  font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ pro W3","sans-serif";
  line-height: 1.7;
  color: #432;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
  max-height: 100%;
}

.wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}


/* home
------------------------------*/
#home {
  background-color: #000;
  min-height: 100vh;
}

/* header
------------------------------*/
.logo{
  margin-top: 5%
}

/* nav
------------------------------*/
.main-nav{
  display: flex;
  margin-top: 20px;
  list-style: none;
  justify-content: space-between;
}

それぞれの項目に対して必要な処理を加えていく形になります。

そして完成したものがこちらになります。

f:id:stady-diary:20200720030726p:plain

 

次回は紹介ページの作成を行なっていこうと思います！！
今回を最後まで読んでいただきありがとうございます。