Netlifyとgatzbyでデプロイして著しく開発意欲が低下した話
gatsby new gatsby-starter-hero-blog https://github.com/greglobinski/gatsby-starter-hero-blogCopy
cd gatsby-starter-dimension
gatsby develop
この4コマンドでローカル開発環境が完成するんですよ。
さらにGithubアカウント連携して、*1コミットしてpushすればデプロイが10分かからず完了します。
これが無料でできるとは。 下手にコーポレートサイト作るよりこれでいいのでは。 セキュリティ云々の話はなしにして…。
でも断然UIが可愛いので載せてしまいますよ。
うーん。何か良さげなAPIを叩くなりして、実用的なアプリを作ろうかな…。
*1:remote: Permission to kayataaa/gatzby_portfolio.git denied to 〜という話は今回なしで…
Rails6のアプリでポートフォリオを作った話。【2】
前回の記事の続きになります。
# 使うもの👩💻
- Rails6, slim, scss, Vue.js, webpacker
- heroku, postgres
# ゴール💡
- 動的なコンテンツのあるポートフォリオページ
# 今回の目次🐕
1. CSS3を使ってオシャレ感を演出する
2. Vue.jsでモーダルを追加する
3. GSAPでDOMを動かす
## 1. CSS3を使ってオシャレ感を演出する
①hover時にぼやっとする
②hover時にぼやっとして文字を出す
①やっていることはCSS3でfilterとanimationの動きを指定するだけです。
&:hover {
transition: .3s ease-in-out;
-webkit-filter: grayscale(60%) blur(2px);
filter: grayscale(60%) blur(2px);
}
CSS3のfilterはinvert(反転)の効果が簡単に画像にかけられて好きです。 場合によってはデザイナーさんの手を煩わせずに加工ができてしまいますが、caniuseなどでCSSがブラウザに対応しているか見つつ、プレフィックス(-webkitなど)を導入してください。
filterだけではゆっくりと変化する動作がつけられないので、transition-durationで変化の所要時間を指定しましょう。transitionは変化のモーションを指定することもできますよ。
②画像にfilterをかけて、画像を囲っているdivのbefore要素に対して文字を載せています。beforeのような擬似要素はimgのような置換要素には適用できません。
今回はscssを触ったので、マップを使って文章を各divに載せることをしました。key名をクラスにあてがう事で、対応する文章を載せています。
$texts: (
bike: "バイク好きです。よく1人でお出かけしたりしています。",
game: "ホラゲとシューティングゲームが好きです。バイオハザードシリーズや最近は World War Zに手を出しました。",
spa: "Vue.jsを使ったSPAアプリを作りました。お手軽にできるのがいいですね。",
… );
@each $key, $text in $texts {
&.-#{$key}:hover:before {
width: 100%;
height: 100%;
font-size: 30px;
font-family: 'クレー', '游明朝体', 'ヒラギノ明朝 ProN';
position: absolute;
content: $text;
padding: 12px;
}
}
## 2. Vue.jsでモーダルを追加する
- DOMが描画されるタイミングでトップ画面にモーダル付きのカード要素を挿入しています。
- カードのボタン押下時のイベントを拾い、モーダルを出力します。
- モーダルではバツボタンを押下すると、イベントが伝搬し、モーダルを閉じる動作になります。
カードのテンプレート
<template>
<div class="m-card">
<div class="a-picture">
<img v-bind:src="require('../assets/images/new.PNG')"/>
</div>
<h2 class="a-title">What's new</h2>
<h3 class="a-title -sub">2020.04.20 | Aboutページを更新しました！</h3>
<button @click="showModal">...</button>
<modal @from-upddate-modal="handler()" v-show="show"></modal>
</div>
</template>
- requireはRailsのアセットが置かれているパスを参照してくれます。
- v-showはプロパティの評価に関わらず、CSSで要素の表示・非表示の切り替えをしています。評価の遅延がある分、条件が一つであるならv-showで切り替えた方が良さそうです。
モーダルのテンプレート
<template>
<div class="m-modal__bkground">
<div class="m-modal">
What's new
<button class="a-button" @click="closeModal">x</button>
<h2 class="a-title">2020.04.20 | Aboutページを更新しました！</h2>
<span>CSS3を使ったhover時の挙動を追加しました。</span>
----
…
<script>
export default {
methods :{
closeModal(event){
this.$emit('from-upddate-modal', 'false')
}
}
}
</script>
- $emitメソッドは、第1引数のイベントをトリガーとして値を渡します。渡す値は複数指定することができます。
- @イベント名で親に値を渡すことができます。
## 3. GSAPでDOMを動かす
ここで余談になりますが、Railsはhtmlを部品化して呼ぶことができます。 部品化できるメリットは、1ファイルにあるコードの行数が減るので、アレンジやバグの特定がしやすいところです。
このパーシャル（部品化）の性質を利用して、jsのコードをページ毎に整理しようとしています。（今は参照パスの問題を解消しているところです…）
なぜパーシャルの話が出るのかというと、フロントエンドの部品を独立して動かす事で変更が他の部品に適用されてしまう心配がないというメリットがあります。
考え方はさておきgsapの紹介です。ライブラリをimportしてアニメーションの作用先と設定を書くことで簡単にアニメーションができます。
TimeLineメソッドを使ってDOMを動かすコード
import { gsap } from "gsap";
function logo() {
const tl = gsap.timeline({repeat: -1, repeatDelay: 0.5});
const logo = document.querySelectorAll(".a-logo");
var grid = [7,15];
var selections = {from: "left", axis: null, ease: "none"};
tl.to(logo, {
duration: 1,
scale: 0.1,
y: 60,
yoyo: true,
repeat: 1,
ease: "power1.inOut",
stagger: {
amount: 1.5,
grid: grid,
axis: selections.axis,
ease: selections.ease,
from: selections.from
}
});
}
- .a-logoというクラス名のDOMを集めて、波のような動きを表現しています。 それぞれのプロパティを調整することでアニメーションの種類やタイミングを変更可能です。
プロパティについてはこちらの公式ドキュメントを見ながら手を動かすと、楽しいと思います。
あまり聞き慣れないかもしれませんが、gsapはGreenSockが出しているアニメーションライブラリです。gsap, TweenMaxのことをGreenSock(のライブラリ)と表現している記事も見かけられ、Vueの公式でも採用されているくらいにはアニメーションのライブラリとして普及されているようです。
日本語ドキュメントはありませんが、紹介記事やデモも多いです。 公式サイトのshowcaseは見ているだけでも楽しいので、めちゃくちゃ推しておきますヽ(´▽｀)/笑
Rails6のアプリでポートフォリオを作った話。【1】
最近転職活動をしています。
半年ぶりに再びRailsを触ろうと思って、herokuを使って再勉強中です。
# 使うもの👩💻
- Rails6, slim, scss, Vue.js, webpacker
- heroku, postgres
# 今回の目次
1. RailsでDBの切り替え時に発生したエラー
2. フロントエンドの技術選定と困りごと
## 1. rails newする
rails new my_portfolio
いつもであればオプションコマンドを付けて新規作成していきますが、バックエンドの構成などは決めていないのでこのまま叩きます。
これではRailsがデフォルトで扱っているsqliteでアプリが作成されてしまうので、herokuで扱うことができません。
## 2. データベースの変更をする
- Gemfile
```
# gem 'sqlite3', '~> 1.4'
gem 'pg'(1.2.3が入ることになります)
```
- ローカルのgemを入れる
- database.yml
```
adapter: postgresql
```
これらの変更を加えているうちに、3つエラーにつき当たったのでメモします。
### 2-1. rails sしようとした瞬間に出たエラー
```
LoadError: dlopen(〜): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
```
これは該当のバージョンのopensslが見つからないと言われているようです。
📕: OpenSSLとは？
PostgreSQLは標準でSSL接続をサポートし、クライアント/サーバの通信がさらに安全になるよう暗号化します。 そのためにはOpenSSLがクライアントとサーバシステムの両方にインストールされ、構築時にPostgreSQLにおけるそのサポートが有効になっている必要があります
なるほど。postgresに必須なライブラリのようなので、brewでインストールしてみます。
しかし、普通のopensslをダウンロードしてしまうと同じことが起きてしまうので、openssl@1.1をインストールしてあげます。
### 2-2. pg gemインストール中に起こったエラー
```
- Fetching: pg-0.18.4.gem (100%)
Building native extensions. This could take a while...
ERROR: Error installing pg:
ERROR: Failed to build gem native extension.
conftest.c:3:10: fatal error: 'libpq-fe.h' file not found
```
opensslのパスがうまく通っていなかったようなので、brew link openssl --forceでシンボリックリンクを貼ります。
### 2-3. bundle exec rake db:migrateで起こったエラー
マイグレーション中に下記のようなエラーが出ます。
```
- psql: could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?
```
これは他にpostgresのプロセスが動いているのではないかと考えられます。
ps aux | grep postgresして出てきたプロセスをpkillしていきます。
（どこで動いているかわからないのでこのやり方ですが、通常は正常終了するようにしましょう。）
完了後は `initdb /usr/local/var/postgres` で初期化し、
`pg_ctl -D /usr/local/var/postgres -l logfile start` でpostgresを立ち上げたらマイグレーションしていきます。
## 3. フロントエンドの技術選定
- slim
htmlのテンプレートエンジンはslimを導入しました。
インデントを解釈して美しくdivやタグを並べられるところが好きです。記述量も短い。
- scss
AtomicDesignを考えた時に、modifierをかなり使用する為、1つの部品に表現のパターンが一目でわかりやすいところが気に入っているところ。
- GSAP
これが冒頭で言っていた、3DCGコンテンツを作ってくれるアニメーションライブラリ。
導入も簡単です。
```
yarn add gsap
```
app/javascript/packs/application.js
````
require("gsap")
```
今回は3.2.6を使います。Vueのようにimportでgsap, TweenMaxが使えるようになります。
こんな動きを実現できます。
### 3-1. slimとvueの併用で起こる問題点
他は忘れかけている親しみ深いvueを構築の練習も兼ねて入れています。
ただし、slimではjavascript:と書いた下側にjsを書いていくことができますが、
export defaultと書かれた以降をテンプレートエンジンが解釈できず、slimにvueのコンポーネントをimportできないという難しさがあります。
エラーは、javascript type="module":とすることでなくすことができます。
📗: export defaultとは
JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになってきました。
モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります 。（MDNより抜粋）
ついでに、これらモジュールが動作する環境はほぼPCののブラウザ上でスマホになるとChrome以外は対応していないらしいです。
この辺をwebpackerさんがよしなにしてくれているのか…
この記事は次回に続きます🙇♂️
2019年の振り返りと、2020年にやってみたい事。
あけましておめでとうございます🐹🌅
令和2度目の年明けとなりましたが、みなさまいかがお過ごしでしょうか。
私は28年目になる年明けを迎えて、自分の頼りなさに少しがっかりしたり、10年前は考えられなかったであろう経験をしたりして、昔思っていたよりもアラサーを楽しめている感じです。
初夢は2度見ましたが、仕事関連の夢でした orz
若干の緊張が仕事に関してあるのだと思います。
昨年は4度目の転職もしましたし、新しい出会いもあって、自身を客観的に見る機会をいただけて、ラッキーだったと思います。弱点は発見できても、なかなか改善まで時間が要るところは難点ですが。。
以上を踏まえて、2019年の目標を振り返ってみます🌟
- アプリのデプロイ回数を増やす
こちらは1(2)回に止まっています。Vue.jsとgithub pagesを利用した1度だけかな。
githubのリポジトリのREADME.mdを整理して、アウトプットをわかりやすくしたという部分は大きかったかな。
1(2)回という表記については、昔のコードをデプロイするのにherokuを使ったからです。
- 英語
初夢で見るくらいには英語の進捗は捗りませんでした。
現弊社で週1くらいのペースで外国人講師の方を招いて、英語の雑談教室みたいなイベントに参加しています🙌
週末の過ごし方を英語で伝えたり、お土産のお菓子を食べたりかなりのんびりとしていますが( ω )
言葉にする練習にはなっているはず！笑
- 余暇の過ごし方
技術と食べる事以外にそんなに頑張っていない。カメラとか二輪取得に向かって頑張りたいところ。
多分素材が集まれば個人HP作るだろう(管理費も会社から支給されないかしら)
との事でした。
2019年は食事:人間:技術:バイクで構成されていて、それも4:3:2:1くらい…笑
（人間は転職だったり、人間関係を含みます）
職業を変えてからようやく人間らしい情緒のある生活が出来たというか、
そういう意味でいい年でした。二輪免許は取れたし、昔の親友にまた会いに行けたからね。
- 資格取る
基本情報技術者かな…とりあえず受かるまで受ける😇
取れませんでしたね。Javaで受かるまで受け続けると思います。
自分の弱みはマネジメントとテクノロジの部分です。正直山を当てた分だけ知識がとっ散らかる＆浅い理解になってしまう傾向があります。
午後問題、特にJavaに関しては、自分のデバッグ能力大丈夫か…？と思うくらいに見落としが多く、後で解いてみたらできる設問も多かったです…。
心の余裕がないと焦ってしまうタイプなので、勉強の計画をもう少し立てる必要がありそうです。心が折れない程度に頑張ろう。
- 技術的なポリシーを打ち立てて勉強を進めたい
頼まれて実装することは多くても、保守性を意識してコーディング出来ていなかった気がする。
アプリやDB設計周りの勉強は続けたいし、テストを書く習慣を付けていきたい。
Goを触りたいという気持ちでいるけど、実務で私の書いたKotlinが受け入れられてから考えることにする。
ここは去年の期待の半々だったなあ。
設計についてはGoFの本を読んだり、実務のコードを読む事で理解を進めているところ。
Kotlinは書かなくなってしまったけど、今はJavaを書いていて、テストに対する執着は前よりも出来ている。テストはGroovyで書かれていて、慣れるのにちょっと時間がかかったけど。
型言語で仕事をしたいってこだわりを認めてもらえて、仕事ができて本当によかった。嬉しい。
進んでテスト駆動回すまでは難しかったなあ。
前任者が残したテストコードの意図を理解するのに時間がかかってしまって…
全部消して書き直しちゃえばいいじゃんっていう強強の先輩がいるけど、想定できるリスクは全て潰しておきたいし、それの手がかりを消すってどうしても抵抗あるよね……今はいないけど、前任がそれなりに苦労して書いたコードだし、絶対に意図はあるはずだからなあ。。
2020年の目標
- 金銭管理をする。貯金する。
昨年はバイク関係に極振りしてしまった関係で、毎月の支払いを気にしながら生活していた。。
何よりそういうとこって、少なからず周囲にバレてしまうので、適当に生きたりせずに自炊増やしたり、月2万円くらいは貯金したい。申し込みした投資信託も動いてないしね…
アプリに当てる金も捻出したいよ。
- 体調管理を徹底する
昨年は欠勤が多かったので、メンタル的な余裕も持ちつつ日々を過ごしたい。
免許取った時も全然余裕がなかったし…自炊も増やして自転車で出かける時間も作ろう。
情報系出身の先輩にも薦められたので、自分の力量を示すためにも取得を目指します。苦手分野に力をいれるところと、復習を丁寧にする時間を取りたい。
- 英語
旅行先で話せるレベルになりたい。オリンピックでてんやわんやしたくないので←
- 設計パターンに習熟する。アプリケーションとして還元する。
やることは、Kotlinを使って
Androidアプリの設計を
自分がイケてると思う設計3つ程度を用いてコーディング、デプロイ。
- 説明が上手くなる
人間関係が広がっていった年だけに、自分の熱中していることについての紹介が上手く出来ず、楽しくコミュニケーション出来なかった場面も多かった。
ビジネスサイドへの説明も丁寧にできるようになりたいので、ここは技術的な内容を相手の興味に沿って説明できることを目標にしてみる。他プロダクトチームの先輩への説明を壁打ちとしてやってみようかな。
おまけ
- インフラ（AWS）への習熟
ソリューションアーキテクトレベル？
ある事情で心穏やかに仕事できないから
- アウトプットは続けてやっていく
他社の人にもいいね！と言ってもらえるスパンでアウトプットは出来ていたと思うので、引き続きやっていきたい。
更新できなかった記事もこれだけあったし、もっと簡潔にまとめられる能力を高めよう。
\---お正月の写真シリーズ---
Rails6がリリースされたのでリリースノートをチェックしてみた
ハッピーバイクライフなう
運動神経ゼロの私が、普通二輪の卒業検定に受かるまで。 - おもろいことしかやらないという記事の続きです。
花壇を破壊し、教官に白い目で見続けられながら約2.5~3ヶ月ほど教習所に通いました。
真夏の教習はマジでお勧めしません。
8の字のような細かい動作を練習する場合、クラッチ操作でエンジン部分に負荷がかかり、車体がクッソ暑くなります。
（そうでなくても体感40度超えなので、たまに熱中症で教習生が救急車で運ばれていくそうです。）
私は教習中にウォオオン！という突然のスーフォア（教習で使うHONDA CBR400SF）の叫びを聞いたために、思わず8の字花壇の中で絶叫した事があります。
乗りたいバイクがたくさんあった話
それでも今後苦楽もしくは死を共にするバイクを探すのに勤しんでいました。
ハーレーダビッドソンも魅力的でしたが、現実的ではないという事でHONDAのREBELなどを候補に入れていました。が、たまたま見かけた女性ライダー誌を見るとまあREBEL率が高い。
人との被りが苦手な私は、教習所で見かけたGSX250R(2015)に一目惚れするのでした。
自分に合うバイクVSかっこいいバイク
レンタルバイクで初公道に。
見るも無残に目の前を横切ったクロスバイクとエンカウントし、フロントブレーキをかまして無事に貸し出し業者の前で立ちゴケました🙂🌷
元々足つきも悪く、重心がズレる瞬間に片足では184kgを支える支点を見つける余裕もなく…おそらく初めてのツーリングでは10回程度はこけたんじゃないかな？（都心から飯能市まで出ました）
修理代はレンタルの5倍くらいかかりました。
憧れのバイクで立ちゴケましたし、寒いし途中で動かなくなるし呆然としてしまう瞬間もありました。
それでも、直線を走るときの…あのアクセルを開けた時の音や、感じる風が心地よくて、もっと乗りたい！運転が上手になりたい！という気持ちがさらに大きくなりました。
（同行してくれた人・業者さんには目一杯迷惑かけたので、ごめんですが…）
そのあとは現実的なラインを探りながらウィンドジャマーズ→スズキワールド→SOX→YSPって感じで嫁探し。懲りずにスーパースポーツに絞ってました。
納車！
私の貧弱な体ではSSを支える事が難しい＆運転への恐怖が払拭できていないという事を考慮して、gixxer(2017)をチョイスしました。134kgという軽量な車格と、125cc超えだが250程いかつさもないというところが魅力的。何より倒しまくって練習するにはいいだろうと考えました。
総額310k強かな？それでもめちゃくちゃ分割した。（修理代未完）
初期不良とかは勘弁なので、スズキワールドさんでお世話になりました。
アリさんみたいな見た目のgixxerちゃんと対面。一緒について来てくれる人もいたので、不安よりも楽しみな気持ちが上回ったのです。
納車2日目にして横倒しし、エンジンタンクに傷を付けました。が、夜の練習はサイコーです。
人を轢かずに、ちゃんとウィンカーを出して交通状況に気を配る自分に拍手を贈りたい👏
今後はグッドライダーと呼ばれるくらいに運転テクを上げていきたいです。
次の目標は道志とタンデムだな！
令和元年基本情報技術者試験を振り返る
言い訳3行
・アルゴリズムの正答率は77％、Java66％だった。
・情セとセキュリティで死んだ
・ちょいちょい凡ミスが多かった
→午後で足を引っ張って死んだ、自己採点は60％＆51％だった。
傾向
【午前】例年より難化傾向らしい。隣接行列、レジスタの16進数への符号化？問題などが出題される。ROIとかSEOポイズニングとか微妙なポイントの引っ掛けが出てきて、付け焼き刃の知識を嘲笑われている気がしてならない。
正答した問題については自信を持って説明できるが、わからんやつは本当にわからんかった。監査系の問いが若干多めだった？（ストラテジ苦手）
【午後】平年どおりの難易度らしい。
アルゴリズムとJavaに時間を極振りしたので、情セとセキュリティの問題を読み上げ終わった頃にはつい他人事のようなテンションになってしまった。
対策
【午前】いつもの参考書と時事ニュースも見るか。
【午後】Javaは使わないとはいえ、メイン関数の例外宣言は正答しないとまずい気がする。アルゴリズム対策の本を続けてやるか。
ついにTCP/IPに手を出すことにする。
後半はいつも通り問題解きまくるコースで。
午前問題の問21
職場のH先輩に教えてもらった。
レジスタ、ストローブ、クロックなどの単語たちが完璧に説明できなくても解ける問題。
この
問題文
```
クロックの立ち上がりエッジで、８ビットのシリアル入力パラレル出力シフトレジスタの内容を上位方向へシフトすると同時に正論理のデータをレジスタの最下位ビットに取り込む。
また、ストローブの立ち上がりエッジで値を確定する。各信号の波形を観測した結果が図の通りである時、確定後のシフトレジスタの値はどれか。ここで、数値は16進数で表記している。
```
クロックの立ち上がりエッジで、８ビットのシリアル入力パラレル出力シフトレジスタの内容を上位方向へシフトする
→なんか論理シフトする内容なのはわかる
正論理のデータをレジスタの最下位ビットに取り込む
→booleanと仮定して、レジスタの最下位がtrue(1)
になる
また、ストローブの立ち上がりエッジで値を確定する。各信号の波形を観測した結果が図の通りである時、
→ストローブが凸している時データの内容が確定する
図から読み取れること
ストローブが凸しているところまでのクロックは9回立ち上がっている
→9回論理シフトと最下位ビットへの書き込みが行われる
図に照らし合わせてクロックのエッジのタイミングを2進数で表現する
0000 0001←1回目
0000 0011
0000 0110
0000 1100
…
1000 1101←9回目のシフトと書き換え
これを2進数から16進数で表現する。
1000 1101
1000→2の7乗で128
1101→2の3乗 2の2乗 2の0乗で13
128＋13＝141
141/16=8 141%16=13
13→16進数でD
8D イが正解
先輩マジ天才です。
これをあっさり解く先輩がおわす弊社のエンジニアについてはこちらからどうぞ。笑
