新卒エンジニアがNoCode触って感動した話

自己紹介

はじめまして!株式会社Hajimariでエンジニアを担当している保坂(@michael_progs)と申します。
今年の4月に新卒として入社しました。
普段は大きく分けて次の3つの業務を行っています。

  1. inteeという学生のファーストキャリアをサポートするサービスの開発
  2. ソースコードリファクタリングを行うプロジェクトのリーダー
  3. リアルカレッジというプログラミングスクールの企画・運用・講師

今回はプログラミングなしで、サービスを作ることが出来るNoCodeについて書いていきます。
(NoCodeはエンジニアから見てもかなり感動するツールでした)

NoCodeとは

読んで字の如く、コードを書かずにサービスを開発できるツールのことです。

例えば何かサービスを作るときに、エンジニアがプログラミングをする必要があると思います。
しかしNoCodeを使えば、プログラミングをせずにサービスを作ることが出来ます!
今回僕も初めてNoCodeを使ってみたのですが、本当に感動しました。こんなにも短時間でクオリティの高いサービスが出来てしまうのかと。。。

ただ現状のNoCodeのツールでは、やはりエンジニアリングの知識が合ったほうがスムーズに開発できるように感じました。
なので、非エンジニアの方がNoCodeを使ってサービスを作るのには、現段階では少しだけハードルが高い気がしました。

しかし本当に革新的なツールなので、今後はNoCodeの需要が伸びていきそうです。NoCodeのこれからが楽しみです。

僕は今回bubbleというサービスを使いました。 bubble を選択した理由は以下の2つです。(気軽に選びました)

  • リアルカレッジ受講生がbubbleを使って、サービスを作ろうとしていたため
  • ネットで検索したときに、bubbleをおすすめしているサイトが多かったため

bubble.io

なぜNoCodeを触ってみようと思ったか

リアルカレッジ受講生が以下のNoCodeハッカソンに出場することになり、僕もその子達を応援したいと思ったからです。 ただ今までNoCodeを一度も触ったことがなかったので、この機会に触ってみようと思い挑戦してみました。

ncc01.nocodecamp.co.jp

NoCode触ってみた

実際にNoCodeを使って、ツイートを投稿出来るサービスを作ってみました。開発にかかった時間は60分くらいで、画面を見ながら直感的にサービスを作ることが出来ました。NoCode本当にすごいです!僕が60分で作ったサービスはこちらになります。

f:id:hosaka555:20200620190217p:plain
NoCodeで作ったツイッター

ツイートを投稿するだけの簡単なサービスですが、サイトのレスポンスも非常に速く、作っていてとても楽しかったです。 慣れてしまえば10分くらいで、同じようなものが出来てしまいそうです。

今回作ったツイートを投稿できるサービスの作り方の手順を簡単に載せておきます。
まずbubbleを開き、NEW APPよりアプリを新規で作成します。

f:id:hosaka555:20200622171320p:plain
NEW APPをクリックしてアプリを作成

次にアプリ名を設定しますが、このアプリ名がサブドメインになるので、他で使われていない名前にする必要があります。

f:id:hosaka555:20200622171346p:plain
アプリネームを設定

早速投稿フォームを作っていきます。(もともとあったエレメント(要素)やコンテナ(ブロック)などは削除しておきました)
左のメニューからInput forms > Inputを選択して、入力フォームを配置します。

f:id:hosaka555:20200622174540p:plain
投稿フォームを配置する

次にボタンを配します。先ほどと同様に左のメニューからVisual elements > Button を選択してボタンを配置します。

f:id:hosaka555:20200622174910p:plain
ボタンを配置する

ボタンの中のedit meをクリックして、投稿に書き換えます。

f:id:hosaka555:20200623093706p:plain
edit meを投稿に書き換え

次にDBにTweetテーブルを作成します。左のメニューから、Data を選択し、New TypeのところにTweetと入れてCreateをクリックします。

f:id:hosaka555:20200623094243p:plain
Tweetテーブルの作成

Tweetテーブルが作成されるので、続いてmessageというツイートを保存するカラムを追加していきます。 Create a new fieldをクリックして、以下画像のように設定します。

f:id:hosaka555:20200623094549p:plain
messageカラムを追加

これでTweetテーブルの作成は完了です!

次に投稿ボタンをクリックしたときにツイートをTweetテーブルに保存するようにしていきます。 左のメニューからWorkflowを選択し、以下画像のようにElements > An element is clickedを選択します。

f:id:hosaka555:20200623094825p:plain
ボタンをクリックしたときのイベントを追加

選択後は以下の画像のような感じになります。

f:id:hosaka555:20200623141849p:plain
選択後の状態

ここで上記画像のWhenをクリックして、出てきたポップアップウィンドウのElementのところに先程追加したボタンを選択します。

f:id:hosaka555:20200623104834p:plain
ElementにButton 投稿を選択

これで投稿ボタンをクリックしたときに何かしらのイベントを実行できるようになります。早速イベントを登録していきます。
Click here to add actionをクリックして、Data > Create a new thingを選択してください。

その後出てきたポップアップウィンドウに以下のように設定してください。

f:id:hosaka555:20200623110416p:plain
ボタンクリック時に登録するデータを設定する

これでツイートを投稿ボタンをクリックしたときに、ツイートをDBに登録できるようになりました!
左のメニューのData > App data > All Tweetsからデータが登録できているか確認できます。

f:id:hosaka555:20200623110723p:plain
ツイートを投稿できているか確認

いよいよ投稿したツイートを表示していきましょう! (実は投稿したツイートを画面に表示出来ずに40分くらい悩みました。。。)

まず投稿したツイートを表示するボックスを容易します。
左のメニューからContainer > Repeating Groupをクリックして以下画像のように設定してください。

f:id:hosaka555:20200623135532p:plain
ツイートを表示するためのボックスを用意する

次にRepeating Group の上に Text というエレメントを配置して次のように設定します。

f:id:hosaka555:20200623140518p:plain
ツイートを表示するためにTextエレメントを配置

これで右上のPreviewをクリックするとツイートが表示されていると思います!

f:id:hosaka555:20200623141534p:plain
投稿したツイートが表示される

めでたしめでたし

最後に

株式会社Hajimariでは、自社開発・受託開発を行っています。
一緒にLaravelやVue.jsを使って開発してくれるエンジニア・デザイナーを絶賛募集しています!

新卒・中途どちらも募集しておりますので、興味のある方は以下の記事をぜひ御覧ください!
みなさまとお会いできるのを心からお待ちしております。

www.wantedly.com

www.wantedly.com

躓いたところ共有しておきます

f:id:hosaka555:20200620190350p:plain
躓いたところ

その原因は次の2つでした。

  1. データを表示するエレメント(要素)を配置していなかったこと
  2. データ型を間違えていたこと

まず1つ目についてですが、データベースに存在する値を表示するときは、Repeating Group というエレメント(以下画像の赤色部分)を配置するだけで表示できると思いこんでしまっていました。
実際にはRepeating Group の上に Text というエレメント(以下画像の青色部分)を配置する必要がありました。 ここに気づくまでにかなり時間がかかってしまいました。。。

f:id:hosaka555:20200620191250p:plain
データを表示するエレメントを配置していなかった

2つ目がデータ型を間違えていたことです。
最初僕はTweetオブジェクトに存在するmessageというプロパティを表示したかったので、以下画像のようにData sourceを設定してしまっていました。。。

f:id:hosaka555:20200620192312p:plain
データ型を間違えていた

正しくは以下画像のようにData sourceに設定する値の型をType of contentに合わせて、Textエレメント上でTweetオブジェクトのmessageプロパティを表示するように設定することで上手く表示することができました。

f:id:hosaka555:20200620192520p:plain
Data sourceに設定する値の型をType of contentに合わせる

f:id:hosaka555:20200620192822p:plain
TextエレメントにTweetオブジェクトのmessageプロパティを表示するように設定する

でめたしでめたし

WordPressでディスク容量がMAXになりカテゴリが表示されなくなった話

wordpress

こんにちは!Hajimariの新卒エンジニアの市川(@shu_chikanne)です。

2020年4月1日に新卒エンジニア2期生としてジョインしました!

普段は、自社プロダクトであるスタートアップ向けマッチングサイト構築パッケージPIECE(https://crowd.itpropartners.com/piece/)の開発や受託開発をしたり、新卒採用関係の業務を行っています!


今回はタイトルにもある通り、WordPressでディスク容量がMAXになったことでカテゴリが表示されなくなった話をしていきたいと思います。

業務の関係上、スクショ等は掲載できないのでご了承ください(><)

今考えても恐ろしい出来事でした・・・

 

 

経緯

発端は6月10日の17時頃。

クライアントから恐ろしい連絡が飛んできました。内容は以下の2つ。

  • ワードプレスのカテゴリーとタグが全てリセットされてしまったこと

  • それに伴いURLが変わってしまったこと このWordPressのサイトは広告の配信先として利用しており、URLが変わることで広告元のURLがデッドリンクになってしまいます。


つまり、「大量の広告のリンク先が表示されず、広告経由の収益が出ない状態」となっていたのです。


同時接続数が100前後のサイトのため、常時100人近くのユーザーがサイトを閲覧していることになります。

そんなサイトのURLがデッドリンクになったと聞いて、本気で冷や汗を書きました。

もういっそのこと、全てを忘れて眠りにつきたい。。。


嘆いていても、原因を見つけて修正しないことにはこの状態は解消されません。


原因調査

ここからはなぜその状態になったのか、原因調査の段階に入ります。

まずはメモリの確認をします。

$ free -m
             total       used       free     shared    buffers     cached
Mem:          7986       4550       3436         37        142        902
-/+ buffers/cache:       3505       4481
Swap:         2047         14       2033

ふむ、問題なし。

先輩エンジニアからディスク容量はどうなの?と聞かれたので、確認してみると、、、

$ df -h
 ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         3.9G   60K  3.9G    1% /dev
tmpfs            3.9G     0  3.9G    0% /dev/shm
/dev/xvda1        30G   30G   0G   100% /
[ichikawa@ip-172-31-16-13 ~]$

100%!!! はじめてみた!!!


そう、原因はディスク容量が100%になっていたことでした。

ひとまずAWSコンソール上からディスク容量を増やします。(ちなみに一回増やすと減らせません)

そしてターミナル上で以下のコマンドを叩きます。

$ sudo growpart /dev/xvda1

$ sudo resize2fs /dev/xvda1


確認してみます。

$ df -h
Filesystem      Size  Used Avail Use% Mounted on
devtmpfs        3.9G   60K  3.9G   1% /dev
tmpfs           3.9G     0  3.9G   0% /dev/shm
/dev/xvda1       99G   30G   69G  30% /

しっかり増えてますね。
今回は30G→100Gまでディスク容量を増やしました。

WordPressの管理サイトを確認しに行った所、カテゴリとタグが正常に表示されるようになっていました。
良かった!!!

なぜディスク容量が100%になっていたのか

duコマンドでどのディレクトリの容量が大きいのか確認してみます。

$ du -sh /*
7.0M    /bin
50M /boot
4.0K    /cgroup
60K /dev
11M /etc
408K    /home
93M /lib
21M /lib64
4.0K    /local
16K /lost+found
4.0K    /media
4.0K    /mnt
43M /opt
107M    /root
8.0K    /run
12M /sbin
4.0K    /selinux
4.0K    /srv
2.1G    /swap
1.1G    /swapfile1
0   /sys
8.0K    /tmp
1.3G    /usr
24.9G   /var


なにやらvar配下がとても大きくなっているようです。

var配下も確認してみます。

$ cd /var
$ du -sh ./*
4.0K    ./account
105M    ./cache
124K    ./db
8.0K    ./empty
4.0K    ./games
12K ./kerberos
2.4G    ./lib
4.0K    ./local
16K ./lock
14.8G   ./log
0   ./mail
4.0K    ./nis
4.0K    ./opt
4.0K    ./preserve
132K    ./run
1.8M    ./spool
0   ./swap
4.0K    ./tmp
6.7G    ./www
4.0K    ./yp

logディレクトリがとても大きいことが判明しました。

そしてlogディレクトリを調べていると、Apacheアクセスログのログローテーションを設定していないことが判明。

(そりゃあディスク容量の大きくなるわ。。。)


ログローテーションの設定をし後日確認してみた所、/var/logディレクトリのディスク容量が14.8G→696Mまで減っていました。

再発防止策として、AWSの構成の見直しやディスク容量・メモリ・CPU等の監視を行っていく予定です。(ここらへんも今後記事にしていきたいと思います!)

最後に

Hajimariでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です!

そして、22卒新卒エンジニアのエントリーも心よりお待ちしております!

www.wantedly.com

www.wantedly.com

【スマートロック】sesame APIを使って部屋の鍵を操作する画面を作ってみた

さなぽんです。
今回は表題の通り、スマートロック「sesame」の鍵を操作してみようかと。
既に機能がある中でAPIを使用するに至った経緯なども含めて書いていきますね。
まずは今回の主役となるsesameの紹介です。

続きを読む

Laravel好きが高じてアメリカまで行ってきました!LaraconUSまとめ(一日目)

f:id:kumamon_engineer:20190725100354p:plain

 

こんにちわ、ITプロパートナーズのエンジニアのくまモンエンジニア(@miyakey7)です。

Laraconに関する記事を書きたいと思います。多分今年出席した日本人は私しかいなかったような気がします。

Laravelは自分の転職のきっかけになったフレームワークで思い入れがあります。

元々組み込みエンジニアで通信ライブラリとか作っていた私が、去年Laravelが好きでというかLaravelしか知らないような状態からWEBエンジニアになんとか転職し1年以上経ちました。

今年、そして来年と開催されるLaravel jp conferenceもコアスタッフとしてお手伝いさせていただいてます。

conference2020.laravel.jp

 

そんなLaravel好きが高じて、ついには国境を越えてしまいました。

今年の7/24〜25日に開催された laraconUS(https://laracon.us/)に参加するためにNYに行ってきました!

私の目から見たLaraconUSの感想を率直に書いていきたいと思います!

英語力が皆無のため、多分間違ってる所があるかと思います、すいません!

誤りがあればご指摘お願い致します!!

 

入場

まずは朝8:30から入場開始です。

 

 

会場はタイムズスクエア近くのイケイケの場所です!

NYは以前も訪れたことがあり、とても好きな街でした。

今年のLaraconUSがNYと決まった瞬間に行くことを即決しました。

 

PlayStation Theater

 https://www.google.com/maps?q=playstation+theater&um=1&ie=UTF-8&sa=X&ved=0ahUKEwjn_aKw9M7jAhWUX80KHdIBCSMQ_AUIEigC

 

f:id:kumamon_engineer:20190725102557j:plain

ゴリゴリの強面SPに荷物検査をされ、金属探知機を通って、震えながら蛍光色光る地下のフロアへ。

 

中はもう騒然とした雰囲気でおしゃべりで陽気なエンジニアたちが大騒ぎでした。

朝からみんな元気良いな...

 

今回のLaraconは昔の2Dゲームの世界観がテーマのようです。

f:id:kumamon_engineer:20190725102748j:plain


ストⅡもありました👀

こちらはアメリカのスーパーファミコン(スーパーニンテンドー)ですね。

知らない外人と戦って2戦2勝でした。eスポーツイケますね。

f:id:kumamon_engineer:20190725102833j:plain

 

会場に入ると既にかなり埋まってる状態。

座席は自由です。

 

空いてる座席にグッズが置いてありました!

f:id:kumamon_engineer:20190725103719j:plain

中身は意外とシンプルでした。Laraconはあんまりこだわらないのかな?

 

座席はかなり後方でした..出遅れた!

f:id:kumamon_engineer:20190725103545j:plain

会場のwi-fiのパスワードがわからず弱弱のwi-fiモバイルルーター苦戦していたら、公式ツイートでアナウンスが!

 Laravelerなら誰でも胸アツなパスワード「artisan19」に胸が熱くなりましました!

 

午前セッション

ADAM WATHAN

twitter.com

自身が開発しているtailwind CSSについてのセッション

tailwindcss.com

 

f:id:kumamon_engineer:20190725113912j:plain

基本コードを書きながらレイアウトのデモをしまくっていました。

場馴れしてるからなのか余裕で話しながらガンガンコード書いてて凄いな〜と感じました。900人が見てる中でコーディングとか震える。

 

tailwind CSSはとても拡張性があり、容易なレイアウト置き換えが出来たりレスポンシブ対応していたりする便利CSSフレームワークでした。

Laravelと関与する所はbladeの中でも書きやすいよ〜くらいの感じでした。

bladeを適宜コンポーネント化してincludeで呼び出し、パラメータ引数としてクラス設定することで容易に変更出来るよねと。

FREEK VAN DER HERTEN

twitter.com

 

引用はこのツイートにまとまってます

 

観客と和気あいあいとしながら、こちらも基本ライブコーディングをしていたのが印象的。

 アクションをコントローラやモデルに書かず、アクションフォルダ配下に置く。

 

viewに関してはviewModelを使った書き方を説明。

github.com

viewに渡すパラメータを沢山並べるとかもしやってるならば参考にしましょう。

 

続いてbladeの話。blade-xを使えばincludeの書き方を省略できるよと。

確かにそうですね。vueライクな書き方です。

github.com

 

休憩

休憩で一度全員が席を離れます。

そのチャンスを使って前の方に移動しました!

みんな意外と前の方の席にこだわりはなかったみたいで、すんなり座れました。

f:id:kumamon_engineer:20190725115110j:plain

ただ、この前方エアコンがめちゃくちゃ効いていて寒かった。。 

 

BOBBY ELITE BOUWMANN

twitter.com

laravelのデザインパターンの話

speakerdeck.com

・Singleton Pattern

・Observer Pattern

・Bridge Pattern

についてピザとピザ窯を例に話していました。サンプルコードも載っているので

わかりやすいと思います!

 

印象的だったのは最後の方に言っていた

「No silver bullet, learn by doing and trying(銀の弾丸はない、やってみることで学ぶ)」

という部分。

設計に関しては本当にそう感じます。どれだけ向き合ってどれだけプロダクトを落とし込んで適切な設計ができるか。一朝一夕で身につくものではないと感じます。

 

JMAC

twitter.com

 laravelのちょっと気の利いた書き方というセッションでした。

f:id:kumamon_engineer:20190805152851j:plain

結構色んな省略形の話をしていました。

それこそbladeであれば @auth@guest@csrfみたいな所やModelリレーションのPivotsMorphMapの書き方、redirectwithInput付けるなど。結構基礎的な使い方が多かった印象。

Gateの話がちらっと出たりもしましたが(もう少し丁寧に聞きたかった)、全体的に公式リファレンスにある内容でしたね。

 

ランチタイム

 ランチタイムになると900人が一斉に外に出ます。

人の流れとかガン無視カオス状態です。

ちなみに会場は映画館のシアターとロビーと通路があるだけのイメージなので、

全員が飛び出すととんでもない人の渋滞が発生します。

そんな事は全く気にしません、これがアメリカ。

ランチボックスと飲み物をカウンターで貰いあとは自由に食べてねという形式。

通路に座り込んで食べる人が半分、シアターの中で食べる人が半分ぐらいでした。

なんで中で食べないんだろう?

 

そして配られたランチボックスが完全にアメリカ!

 

午後セッション

KEITH DAMIANI

twitter.com

GraphQLに関するセッションでした

speakerdeck.com

最もスライドが作り込まれたセッションでした。

データの繋がりをニューヨークの地下鉄の路線図を例にして表現し、グラフ理論の歴史を示した上で、どういう時にGraphQLの優位性が発揮されるかについて述べています。


KAYA THOMAS

twitter.com

彼女のセッションはサイドプロジェクトの走らせ方についてでした。

プログラミングの話は一切なく、マインドやマネジメント、ケアの方法、終わらせ方など一連を実体験を元に話をしていました。

 サイドプロジェクトを始めたらちゃんと広めることも大事だよと。


JONATHAN REININK

twitter.com

こちらのコースの作者ですね。みんな大好きEloquentに関するセッションです!

reinink.ca

内容はパフォーマンスチューニングの方法、テクニック、debugbarの数値確認方法などでした。

結果的には

 でした。

まぁ、最終的にこれに至るまでにメモリのサイズを確認したり、クエリの数を確認して少しずつチューニングしていくという手順のデモがこのセッションの有意義な部分だったと思います。そしてEloquentは何も知らないと簡単にN+1などを実装出来てしまうので、しっかりとした知識と結果のクエリをよく確認しようというお話ですね。


JUSTIN JACKSON

twitter.com

今回のLaraconのメインMCをやっていました。めちゃくちゃ話し上手で盛り上げ上手。

それもそのはずで、ポッドキャストの配信者でもあります。

SaaS開発に関するポッドキャストです。

saas.transistor.fm

スライドはこちら!

内容は人生とプログラミングを学ぶことについてでした。結構おちゃらけた感じでMCやってましたがセッションは真面目でした。

https://justinjackson.ca/assets/laracon-2019-compressed.pdf

最初にLaraconの会場にいる参加者の年代を聞いてましたが、圧倒的に30代が多かったです!アメリカのPHPerは30代が多いぞ!(日本はどうなんだ?)

 

"It's too late for me to learn programming". This emotional baggage held me back.(「プログラミングを学ぶには遅すぎる」という感情が自分を引き留めていた。)」

これはプログラミングだけでなく色んな新しいチャレンジに言えることだと思う。

気にせずに飛び込んでチャレンジすればいい。


TAYLOR OTWELL

twitter.com

遂に出ました、大トリ。CREATOR OF LARAVEL

Laravelの創始者Taylorです。

 セッションは早速Laravel6リリースの公式発表!

ロゴも変わり、会場のボルテージも上がりました!

 ロゴが変わるために、カンファレンスTシャツはこのセッションが終わるまで配られませんでした。途中で帰る人とか気にしないのね...。

 ロゴ及び公式サイトが変わること、8月にリリースされること、ver6からセマンティックバージョニング(semver)というバージョン方式を取るという話がありました。

これでLaravel6の話は終わります。

そう、今回のセッションのメインはLaravel6の発表ではなく、Laravel VaporというLaravel用のサーバーレスデプロイプラットフォームの発表でした。

 

これは去年発表されたNova同様に有料になっております。

元々あったLaravel Forgeという環境管理ツールがあり、その中にあったlaravel-cloudというクラウドサービスと連携していた部分のコードを書き直し、独立進化しAWSと連携したサーバーレスプラットフォームに昇華したイメージでしょうか。

 

ちなみに先日、laravel-cloudは一瞬公開されましたが

 すぐにprivateに戻されましたw

 大丈夫かなw

 

まぁ、Vaporに関してはすぐに使う機会は無さそうという感覚です。

新規で作る際に使うのもありかと思う一方でVaporのコストを足す分の利点が今の所感じれていないという印象。

アプローチの方向性は面白いし今後の進化を期待したいと思います。

 

Vaporの詳細については以下にわかりやすくまとまっています。

mattstauffer.com

 

既に公式サイトも公開されています。

vapor.laravel.com

 

また本セッションは他に先駆けて動画配信もされているので詳細はこちらを参考にしていただければと思います。

youtu.be

 

AFTER PARTY & MINGLING

 そして遂に運命の時が...

Laravelの作者Taylorとの対面!

 

とりあえず記念写真!

 

そこからは緊張の会話タイム...!

 

日本から来た話、日本のカンファレンスのスタッフだよとアピール(初日に着ていたのはLaravel JP conferenceのコアスタッフTシャツ)、内緒の交渉、Laravelの今後について、Vaporの話も少し...短い間でしたが色々と聞けてとても貴重な時間でした。

 

これで完全に満足した私は、懇親会で数人と会話にならない会話をして帰りました。

「日本から来たの?」「何故?」「日本でLaravelはどうなんだい?」などなど、聞き取りやすい質問はサクッと返事出来るのですが、少しでも聞き取れなくなるともうお手上げ状態でした...。

 

ちなみに懇親会も人の配置はガン無視で通路やロビーに突然食べ物や飲み物が置かれたり、スタッフが配り続けたりして立ったままガンガン話すだけでした..アメリカ凄いぜ。

 

次回、二日目編は会場にたどり着くまでにタイムズスクエアで黒人に捕まって60ドル払った話を中心にお送りする予定です😢

 

すいません、上記は事実なのですが、二日目もちゃんと書きます!!

 

Laravel好きは一度お話してみませんか?

www.wantedly.com

 

社内の新制度(Googleのあのルール??)を使い、社内データのJuliaで統計分析PJ(仮)を1人で勝手にキックオフしてみました

 

f:id:marron-web-engineer:20190704161804p:plain

こんにちは!ITプロパートナーズの新卒エンジニアの栗岡です。

2019年4月1日に新卒2期生、エンジニアとしては1人目のエンジニアとしてジョインしました。

業務では、Larave/Vue.js/JQueryITプロパートナーズメインサイトの開発と20卒21卒の新卒採用担当をしています!

 

今回は、会社の新ルールAd-vanを使い、社内データの統計分析PJ(仮)を1人で勝手に始めましたというお話を自分を鼓舞する意味を込めてしようと思います。

本当は5月にはキックオフしていた事は秘密です。

 

そもそもAd-vanとは??

ITプロパートナーズの新しい制度です。

毎週水曜日にそれぞれの社員が考えた「今やりたいこと、今やるべきこと」に 主体的 に取り組んでもらうという制度です。

エンジニアにとっては凄く嬉しい制度で、自社サービスにtypescript導入している社員やR&Dプロジェクトを進めるエンジニア がいます。

今回はこの制度を使い、簡単ではありますがデータ分析に挑戦してみようと思いました。

(専攻が心理系だったことから、統計分析は研究のためにふんわりと使っていた背景もあり、、)

 

やりたい事

主要事業であるITプロパートナーズのデータや20卒採用で取れたデータを統計分析という形で処理し、データを取得し、ただ眺めていただけの状態から、統計的に何が言えるのかまで出せるようにしたい。

そして、いつか統計に強いエンジニアやサイエンティストにジョインして欲しい。

僕自身が統計学に精通しているわけでも、数学がゴリゴリでできるわけではないので、

「取得しているデータを活用する」するための一歩になれば良いというモチベーションで緩くやって行きますw

 

使用ツール・言語

 

言語はぶっちゃけなんでも良かったのですが、データ分析と言えばPython!R!っていうのが何となく嫌で、あまのじゃく精神からJuliaにしました。

 

デモ

今回は試しに、JuliaとJupyter Notebookを使った回帰分析とグラフ表示をファッションサイトをスクレイピングして取得したデータで試しに行いました。

 

今回は、身長が高いモデルさんほどファッションサイトではランキング上位に来るのか?つまり、背が高い人ほど洋服が似合うのか??を検定しました。

ランキングの順位に対して、身長に因果関係があるのかを判定します。

 

コマンドラインで Jupyter Notebookを起動

 jupyter notebook

 

 あとは以下のようにコードを書き込む。(y=ax+bに当てはめるだけ)

ほぼRの上位互換のようなコードですね。

f:id:marron-web-engineer:20190630171721p:plain

 

ソース実行結果!!!!  

Coefficients:
             Estimate Std.Error t value Pr(>|t|)
(Intercept)   257.544   90.8531 2.83473   0.0056
height       -1.30983  0.574484   -2.28   0.0248

height 140 150 160 170 180 0 50 100 rank Regression image

 

このように綺麗なグラフと検定結果を簡単に出力してくれました!

実際に表示されるグラフはD3.jsなので、インタラクティブに動かすことができます。

JuliaとJupyter組み合わせバッチリですね!

ソースコード一部省略して実行したので、データ分析が得意な方には目を瞑って頂けると幸いです、、、(すみません、、、)

ちなむと検定結果は、一応身長が高いほどランキングは1位に近くなります、、

 

あまりドキュメントも出回っていない言語であるJuliaですが、これからも勉強しながらこのプロジェクトを成功させられるように頑張ります!

数学も少しは勉強しないと、、

 

このプロジェクトの結果は次回でご報告がきっとできればと思います!!

最後に

ITプロパートナーズでは、Laravel、vue.js、Nuxt.jsで開発に挑戦したいエンジニア・デザイナーを絶賛募集中です!

そして、21卒新卒エンジニアのエントリーも心よりお待ちしております!

www.wantedly.com

 

www.wantedly.com

 

www.wantedly.com

関西初開催!!#ProLabo(プロラボ)もくもく会@なんば 5月25日(土)に開催しました! 

みなさんこんにちは!

ITプロパートナーズ(https://itpropartners.jp/)新卒2年目の藤井です!

今年の4月から関西支社立ち上げにあたり大阪に赴任、

現在立ち上げに関連する業務全般を行なっております!

実は先日、毎月渋谷で行なっている#ProLabo(プロラボ)もくもく会がなんと、、、

 

関西に進出いたしました~🎉🎉

 

今回はそちらの様子をレポートにまとめました!!

ぜひご覧ください!

続きを読む

Nuxt + Contentful + NetlifyでJAM Stackなブログを作ってみよう

ITプロパートナーズでエンジニアをしているもりと申します。

少し今更感がありますが、ContentfulとNuxtでJAM Stackなブログを作ってみました!

 

まずJAM Stackという聞き慣れない言葉がでてきましたが、JAM Stackとは

Javascript + Api + Markup のことで、HTMLをサーバーサイドで生成してレンダリングするのではなく、javaScriptapiから取得したデータをもとにデプロイ時にHTMLを生成する最新のweb開発アーキテクチャのことです。

詳しくはこちら

 

今回はContentfulをAPIとして、Nuxtを静的サイトジェネレーターとして使用することで

JAM Stackとして実装していきます。

 

Contentful

  1. Contentfulアカウントの作成
  2. スペースの作成
  3. モデルの作成
  4. 記事の作成

Nuxt

  1. Nuxtアプリケーション作成
  2. Contentfulの設定
  3. Contentfulのコンテンツデータ取得
  4. ビルド時のhookと動的ルーティングの生成
  5. ブログページ
Netlify
  1. 事前準備
  2. アカウント作成

 

Contentful

ContentfulとはヘッドレスCMSと呼ばれるコンテンツ管理サービスで、WordPressのように記事の作成や管理ができます。

WordPressと違うのは、Contentfull側でViewのレンダリングは行わず、完全にAPIベースである点です。

記事のデータはAPIを介して取得するため、フロントエンドは自分の好きな技術で好きなように作ることができます。

 

1. Contentfulアカウントの作成

まずはContentfulのアカウントを作成していきましょう。

https://www.contentful.com/

 

Try for free  とあるのでこちらからアカウントを作成します 。

f:id:frostnday:20190515112519p:plain

 

今回はGithubと連携を行います。

f:id:frostnday:20190515112906p:plain

 

名前やメールアドレスなどの必要事項を入力し signUp してアカウントの作成完了です。

2. スペースの作成

次に スペース という大枠になるものを作成します。

スペースとはContentfulの一番大きな領域で、1プロジェクト = 1スペースになります。

公式によると開発用とProduction用といった単位でスペースを作成することもありだそうです。

今回はブログを1つ作成するだけなので、スペースは1つでOKです。

 

早速スペースを作成していきましょう。

まずは左側にあるメニューからCreate spaceをクリックします。

f:id:frostnday:20190515124817p:plain

 

space作成用のモーダルが表示されるので、最初にspaceのタイプを選択します。

今回はFreeプランで作成します。

f:id:frostnday:20190515125413p:plain

 

次にスペース名を決めます。

f:id:frostnday:20190515125837p:plain

今回はシンプルにblogとしておきました。

 あとはConfirm & CreateSpaceをクリックしてスペースの作成完了です!

3. モデルの作成

次にモデルを作成していきましょう。

モデルとはContentfulで作成する記事などのコンテンツのことです。

例えば、 title top_image create_atのように、一つのコンテンツに持っておきたい情報を名前と型を決めて登録します。

今回はブログ記事なので、タイトルやTOP画像、作成日、本文などの情報を持つ記事モデルを作成してみたいと思います。

 

先程スペースを作成したので、TOPページに戻るとCreate spaceが Completedになっていると思います。

そのすぐ下にあるDefine the structure の Create a content type をクリックします。

f:id:frostnday:20190515144917p:plain

モデルの名前と説明を入力しCreateをクリックしましょう。

f:id:frostnday:20190515145206p:plain

 

今回はブログの記事なのでシンプルにarticleとしました。

 

次に、このモデルにフィールドを設定していきます。

f:id:frostnday:20190515155447p:plain

作成後に右側にあるAdd Fieldをクリックします。

 

f:id:frostnday:20190515155735p:plain

クリックすると追加するフィールドの型を決めるモーダルが表示されるので、Textを選択します。

f:id:frostnday:20190515155957p:plain

フィールドの名前を入力してCreateします。

これでText型のブログのタイトルを表すフィールドの作成が完了です。

 

今回は合計5つのフィールドを作成しました。

f:id:frostnday:20190515160333p:plain

これで、1つのコンテンツ(記事)はここで設定した5つのフィールドを持つことができるようになりました!

 

4. 記事の作成

 スペース、モデルの作成が終わったので、実際にコンテンツ(記事)を作成してみましょう。

TOPページには、先程Modelも作成が終わったので、 Define the structureもCompletedになっているかと思います。

 

f:id:frostnday:20190515162113p:plain

  Create your contnet の Add an entry からコンテンツを作成していきます。

 

このように先程設定したフィールドの中身を入力していきましょう。

f:id:frostnday:20190515162526p:plain

 

実際の本文はフィールドタイプをrichTextにしたので、このように文章の途中に自由に画像を差し込んだり、太字にしたり といったことが可能です。

f:id:frostnday:20190515162940p:plain

記事の作成が終わったら、右上のpublishをクリックして作成完了です。


Nuxt

Contentfulでブログ記事の作成が完了したので、次はそのブログを表示するフロントエンドの部分の作成を行います。

 

今回はNuxtを使用してそのフロントエンド部分を作成していこうと思います。

NuxtとContentfulの連携については公式に手順が載っているのでこちらに沿って説明して行きたいと思います。

1. Nuxtアプリケーション作成

では早速Nuxtのアプリケーションを作成していきましょう。

まずはvue-cliを使ってNuxtの新規アプリケーションを作成します。

 

vue-cliのinstall

$ yarn global add @vue/cli-init

 

nuxtアプリケーションの作成

$ vue init nuxt/starter アプリケーション名 

これでnuxtのアプリケーションが作成できたので早速Nuxtを起動してみましょう。

作成したNuxtアプリケーション配下に移動して必要なmoduleをinstallします。

$ yarn install 

installが完了したら実際に起動してみます。

$ yarn dev 

上記コマンドでbuildが開始され、URLが表示されるのでクリックしてみましょう。

 

成功していれば、このような画面が表示されます。

f:id:frostnday:20190515170732p:plain

2. Contentfulの設定

Nuxtのアプリケーションの作成が完了したので、次はContentfulと連携するのに必要なModuleをinstallします。

 

$ yarn add contentful 

 

contentfulと連携するにはapiのキーが必要になるのでそちらを作成しましょう。

作成が必要なのは

・space id

access token

の2つです

 

contentfulのページのヘッダーにあるsettingsからAPIkeysページに移動します。 

f:id:frostnday:20190605133401p:plain

ページに移動すると、SpaceIDとAccessTokenなどが自動で生成されているのでこちらのキーを使用してcontentfulと連携をしていきます。

 

f:id:frostnday:20190605134328p:plain

f:id:frostnday:20190605134607p:plain


contentfulのキーの作成が終わったらそのキーを保存しておく場所をNuxt側に作ります。

プロジェクト直下にenv.jsを作成して以下のようにします。

// ./env.js
{ "CTF_SPACE_ID": "先程作成した Space ID", "CTF_CDA_ACCESS_TOKEN": "先程作成したContent Delivery API - access token" }

 ※こちらgitignoreに指定するのをお忘れなく

 

 

先程installしたcontentful用のmoduleを使うためにpluginを作成します

// ./plugins/contentful.js
const contentful = require('contentful')
const env = require('../env.js');

const config = {
space: process.env.CTF_SPACE_ID,
accessToken:process.env.CTF_CDA_ACCESS_TOKEN
}

// export `createClient` to use it in pagecomponents
module.exports = {
createClient () {
return contentful.createClient(config)
}
}

これでNuxtとcontentfulの連携の設定は完了です。

3. Contentfulのコンテンツデータ取得

連携の設定が完了したので、次はContentfulから先程書いた記事を取得します。

今回はJAM Stackにするので、buid時に全ての記事データを取得してjsonに固めます。

 

ではまずデータを取得するmoduleを作成しましょう。

 

modulesディレクトリ配下に、先程作成したcontentful連携用のpluginを使用して

データ取得する処理を書きます。

 

その後、取得したデータをjsonファイルとして指定ディレクトリに出力します。

// ./modules/createStaticJson.js

import { createClient } from '../plugins/contentful.js';
import env from '../env.js';
import fs from 'fs';

const outputPath = 'static/json/article.json';

/**
* Contentfulから取得したデータをjsonファイルとして出力します。
*/
export default async function outputStaticData() {
const client = createClient();

// contentfulからデータを取得
const articles = await client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
});

// jsonとして出力する
fs.writeFile(
outputPath,
JSON.stringify(articles),
err => {
if (err) {
throw err;
}
},
);
};

 

取得したjsonはstatic/json/article.jsonに配置するので、指定ディレクトリにはあらかじめ空のjsonファイルを作成しておきましょう。

// ./static/json/article.json
{}

 

これでデータの取得、jsonファイル出力処理は完了です!

 

4. ビルド時のhookと動的ルーティングの生成

データを取得する処理ができたので、その処理の呼び出し元を作っていきます。

 

今回は nuxt generateという nuxtアプリケーションを静的ファイルとして出力するコマンドを使用していきます。

そのため、このgenerateが実行されたタイミングでデータを取得するようにしましょう。

 

 nuxt.config.jsのgenerateの中に以下のように処理を追加します。

 

まず、先程作成したデータを取得してjsonにする処理を呼びます。

// ./nuxt.config.js

import Articls from './static/json/article.json';
import outputStaticData from './modules/createStaticJson';

module.exports = {
generate: {
async routes() {
// contentfulからデータを取得してjsonにexportする
await outputStaticData();

// 取得したjsonからページを動的生成する
return Articls.items.map(i => {
return `articles/${i.fields.id}`;
});
}
},

 // --- 以下省略 ----

その後に取得したデータから動的なページを生成します。

 

なぜこのような処理をする必要があるかというと

nuxt generateコマンドで静的ページとして出力した場合、

article/{id} のような動的URLのページは生成できないからです。

 

今回は

/ 記事一覧ページ

article/{記事ID} 記事詳細ページ

 

というページ構成で作成するので

contentfulから取得した記事IDをもとに記事詳細ページのroutingを追加しています。

 

5. ブログページ

 最後に、実際に表示するページ部分を作成して行きます。

 

/ 記事一覧ページ

article/{記事ID} 記事詳細ページ

 

という構成にします

 

root /

├ pages/

         index.vue

       articles/

              _id.vue

 

pages 配下の構成がそのままルーティングになるので、こんな感じでvueファイルを配置していきましょう。

 

ここではポイントだけ説明をしていきたいと思います。(vueの説明は省きます)

 

まず、取得したjsonの記事データを表示する方法ですが、jsonをimport してcomputedで参照するのが良いでしょう。

 

// ./pages/index.vue

 const Articls = require('~/static/json/article.json');

export default {
computed: {
articles(){
return Articls.items;
}
}
}

 

詳細ページに関してはurlから対象の記事のデータを抽出します。

 

 // ./pages/article/_id.vue
const Articls = require('~/static/json/article.json');

export default {
computed: {
article(){
const id = this.$router.params.id;
return Articls.items.find(i => i.fields.id == id);
}
}
// 以下省略

 

 

今回contentfulでrichテキストを使用して文章の途中に画像をいれたり、太文字にしたり

といったことを行っています。この richText を表示する部分は少し処理が必要です。

 

 // ./pages/article/_id.vue

import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";

export default {
methods: {
toHtmlString(obj) {
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
`<img src="${fields.file.url}"/>`,
},
}
return documentToHtmlString(obj, options);
}
},
// 以下省略

このように変換するモジュールがライブラリにあるので、こちらを使用して変換の処理を行う必要があります。

 

template内ではv-htmlで指定し、変換メソッドを指定すればOKです。

 // ./pages/article/_id.vue
<template>
<div v-html="toHtmlString(article.fields.body)"></div>
</template>
// 以下省略

 

Netlify

 アプリケーションの実装が完了したので、次は実際にデプロイします。

今回はNetlifyという静的なサイトを無料でホスティングできるサービスを利用して

githubにpushしたら自動でデプロイされるようにします。 

 

1. 事前準備

 事前準備として、先程作成したアプリケーションをgithuにpushします。

 

$ yarn generate

 

nuxt generateで静的ファイルとしてビルドしましょう。

実行後にdistというディレクトリが作成されていると思います。

 

次に先程作成されたdistディレクトリをgit.ignoreから外します。

 

最後にgit pushでgithubにpushしたら準備完了です。

 

2. アカウント作成

 次にhttps://app.netlify.com/signupからNetlifyのアカウントを作成しましょう。

f:id:frostnday:20190529224337p:plain

今回はgithubと連携したいのでgithubアカウントでsignupします。

 

アカウント作成後のTOPページからgithubリポジトリと連携していきます。

f:id:frostnday:20190529224748p:plain

New site from Gitをクリックします。

 

f:id:frostnday:20190529225120p:plain

GitHubを選択して認証します。

 

f:id:frostnday:20190529225704p:plain

Only select repositoriesを選択肢、連携するgithubリポジトリを選択します。

 

f:id:frostnday:20190529230154p:plain

先程連携したリポジトリを選択肢します。

 

f:id:frostnday:20190529231011p:plain

連携するリポジトリの設定を行います。

① pushがあった場合にhookするブランチを選択します。

 今回は masterを選択しておきます。

 

② pushがあった場合に実行するコマンドを入れます。

コマンドは何も実行しないので未指定でOKです。

 

③ 実際にホスティングする対象となるディレクトリを入力します。

NuxtGenerateを行ったときのデフォルトディレクトリはdistなので今回はdistを指定してましょう。

 

最後に Deploy site でデプロイが開始されます 。

f:id:frostnday:20190530000029p:plain

ビルドが成功するとこのようにURLが表示されます。

 

以上でデプロイ設定は完了です。

 

以降はコンテンツをcontentfulで更新したら、ローカルでnuxt generateを実行し

githubにpushすることで自動でデプロイができます。

 

これでJAMStackなブログが完成しました!!!

 

いかがだったでしょうか?

比較的お手軽に構築からデプロイまで出来たかと思います。

 

今回のブログは完全な静的サイトなので画像など最適化したりすれば阿部寛の速度も夢ではないかもしれません。(笑)

 

サンプルは以下に置いておくので参考にどうぞ

 

サンプルブログ

https://reverent-saha-5d7aec.netlify.com/

 

サンプルソースコード

 https://github.com/frostnday/contentful_nuxt_sample