おもろいことしかやらない

🗣: バイクに乗ったり、ものづくりしたり、ひたすら寝たり。

はじめてのスクレイピング アプリでOSの依存性やCORSなどに殴られた話。

早いもので、盛夏の真っ只中です。後5ヶ月もしたら29回目の紅白歌合戦。 ここ数ヶ月に渡って、TypeScript, Angular.js, Node.js, AWS…などなど、前の現場の復習も兼ねて触ったりしていました。

シングルページアプリケーション www.oreilly.co.jp

を読んだ3年前、何がどうなっているかわからないうちに手を動かしている部分もありましたが、 今回はもう少し発展的なことができたかな…テスト書いてないけど…

今回作ったもの

バイクが大好きですが、横断的に車両の情報を表示しているWebページがなかった気がしたので、 バイク情報の表示 + 内容をDBに取り込んで検索 できる物を作ってみました。もう自己満足です。

デモアプリ
デモアプリ
今の仕様では前者だけの要件を満たしていますが、まずはローカルでの開発〜デプロイまでのいろいろをメモしていきます。

今回作る上でやってみたかったこと

バックエンドJSと、フロントエンドはAngularで書きたかった。です。

フロントはVueを使うことも検討しましたが、よりサービスロジックに近いこと + オブジェクトを独自のデータ型で定義し、扱うことが主流になっているAngularにしました。 (Vueでも好きなオブジェクト型は作れるが、構成に頭を使うことと、Component単位の実装をして、再利用について全て一緒にやっていたら頭がおかしくなりそうだった)

バックエンドJSは最近流行っているから…、Nodeを書きたい気持ちになった。JavaScriptができることの可能性をバックエンドまで体験したかった。という理由です。

苦労した点

はじめてのEC2インスタンスで環境構築

AWSを触るのはほぼほぼはじめて。(前職ではSSL証明書の更新をやらせてもらったくらい)

インフラって本当に抽象的というか、実際に触らないと実感としてわかないところが多い。なので前職ではむりくり理由をつけて触らせてもらったw自分で物作るときはホスティングサービスにお世話になってたからね…

マシンタイプの選定も、よくわからずどうせ拡張するからね!って理由でAmazon Linux2のt2.micro(メモリ1GBw)を選択したけど、これが後々の環境構築に大きく響くことになった…ここに関しては調査不足が否めない。 まっさらなOSにいろいろインストールするのは比較的脳死で行ってたけど、後々CentOSに切り替えてからsudo yum whatprovidesコマンドの存在を崇めることになる。平たく言うとrpmライブラリがなにに依存して動いているかがわかる。今足りないものについても教えてくれる。rpmってなに

スクレイピング してくれるライブラリ(puppteener)のlaunch error

ものごっつ便利なスクレイピング アプリがあると聞いて、まず導入してみた。 比較的最近Nodeでの開発事例があることと、READMEがしっかりしてたからまず使ってみた。Dockerの上からでも動く。

github.com

OS別の動かし方も載っている。 が、EC2上で動かすときにUnhandledPromiseRejectionWarning: Error: Failed to launch chrome!と出る。 node/node_modules/puppeteer/.local-chromium/linux-*****/chrome-linux/chromeとか出ているから、chromeが参照できなくて怒ってるんだね。権限周りを散々疑ったり、引数にわざわざ上記のパスを書いてみたりしたけれど、この段階ではうまく解決できなかった。

OSとライブラリの依存性

上でもちょっと触れているけど、最初はAmazon Linux2上でpuppteenerを動かしてた。上に書いてあるようなエラーにぶち当たって、思い切って新しいインスタンスを立ててみることにした。(なけなしの銭を投げ打って。w) これは正解だったみたいで、前のOSでは見つけきれなかったパッケージなどをうまくインストールすることができた。 これによってUnhandledPromiseRejectionWarning: Error: Failed to launch chrome!は見えなくなったし、puppteenerが動いているAPIのエンドポイントで真っ白なページを眺めることもなくなった。w

スクレイピング 結果
スクレイピング 結果

わかりづらいけど、あるバイク販売店のHPのhtmlを丸ごとリクエストして、そこから必要なDOMから文字列を抜き出してる。 フロントエンドで<td>を挿入するように整形しているはずだけど、なぜか数珠つなぎになってるw直さなくては。

最終的にスペックは t2.medium Red Hat Enterprise Linux にした。

必要だったやつ

sudo yum install alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 ipa-gothic-fonts 
sudo yum install libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils

lddコマンドで調べてから、また足りないライブラリのためにwhatprovidesで調べたりした。

ldd /node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome
    linux-vdso.so.1 (0x00007fff041e2000)
    libdl.so.2 => /lib64/libdl.so.2 (0x00007f1ef9dd3000)
…
    libnspr4.so => /lib64/libnspr4.so (0x00007f1ef70ac000)
    libatk-1.0.so.0 => not found
    libatk-bridge-2.0.so.0 => not found
    libcups.so.2 => not found
    libdbus-1.so.3 => /lib64/libdbus-1.so.3 (0x00007f1ef6e58000)
    libXss.so.1 => /lib64/libXss.so.1 (0x00007f1ef6c54000)
    libgio-2.0.so.0 => /lib64/libgio-2.0.so.0 (0x00007f1ef68ab000)
    libexpat.so.1 => /lib64/libexpat.so.1 (0x00007f1ef6670000)
    libXrandr.so.2 => /lib64/libXrandr.so.2 (0x00007f1ef6465000)
    libdrm.so.2 => not found
    libm.so.6 => /lib64/libm.so.6 (0x00007f1ef60e3000)
    libgbm.so.1 => not found
    libasound.so.2 => not found
    libpangocairo-1.0.so.0 => /lib64/libpangocairo-1.0.so.0 (0x00007f1ef5ed4000)
    libpango-1.0.so.0 => /lib64/libpango-1.0.so.0 (0x00007f1ef5c8d000)
    libcairo.so.2 => /lib64/libcairo.so.2 (0x00007f1ef596c000)
    libatspi.so.0 => not found
    libgtk-3.so.0 => not found
    libgdk-3.so.0 => not found
    libgdk_pixbuf-2.0.so.0 => not found
…

CORSで殴られる

ローカルで開発して喜んでる人だったから、CORSに悩まされたの。(こういうことを生業としていた会社に勤めていながら、恥ずかしい) API側でヘッダーの設定の書き方がちょっと違ったのでしばらく悩んでた。

   res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
-  res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, DELETE');
+  res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
+  res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');

セキュリティグループの設定をうっかり忘れる

工程的には前の方だけど、インバウンドグループを設定し忘れるなんてこともあった。

次にやること(優先度順)

デザインをマシにする スマホで見れるようにする テストを書く ドメイン取る 機能の拡充

感想

express爆速。超便利。

qiita.com

プロジェクトのベース

medium.com

Denoことはじめ

最近はQiitaをチェックする頻度が減っていたのですが、Nodeよりも強いjsが出たよと聞いて触らずにはいられませんでした。チュートリアルから読み取れた一部の内容を、めっちゃざっくりとまとめておきます。

※ちなみに私はNodeに関してはlocalhostHello Worldしかしたことがありません。

何が"強い"かというと、

  • 1つの実行ファイルで動作する(node_modulesは必要ない)
  • Node.jsに比べてセキュア
  • 依存性の書き方がシンプルになった

という点らしいです。

Deno自体は依存性なしでファイルを実行します。( 1つの実行ファイルで動作する)

コマンドをインストールすれば、即開始できます。 Shell (Mac, Linux):

curl -fsSL https://deno.land/x/install/install.sh | sh

ウェッブ上にあるファイルをシンプルに実行してみます。

deno run https://deno.land/std/examples/welcome.ts

https://deno.land/std/examples/welcome.tsにアクセスすると、ドキュメントページが迎えてくれます。

シンプルなHTTPリクエストをするアプリの例(セキュア)

例の通り下記のコマンドを叩くと、

deno run https://deno.land/std/examples/curl.ts https://example.com

エラーが出ます。

Download https://deno.land/std/examples/curl.ts
Warning Implicitly using master branch https://deno.land/std/examples/curl.ts
Compile https://deno.land/std/examples/curl.ts
error: Uncaught PermissionDenied: network access to "https://example.com/", run again with the --allow-net flag
    at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11)
    at Object.sendAsync ($deno$/ops/dispatch_json.ts:98:10)
    at async fetch ($deno$/web/fetch.ts:591:27)
    at async https://deno.land/std/examples/curl.ts:3:13

ここで私たちはプログラムに対して、ネットワークにアクセスするための特権を明示的にしておかなければなりません。

deno run --allow-net=example.com https://deno.land/std/examples/curl.ts https://example.com

--allow-netフラグはその役割を持っています。

DenoのAPIはDenoからグローバルに参照することができます。(依存性の書き方がシンプル)

APIは下記から参照することができます。

doc.deno.land

その他

ファイルの読み込み(Ex)

for (let i = 0; i < Deno.args.length; i++) {
  let filename = Deno.args[i];
  let file = await Deno.open(filename);
  await Deno.copy(file, Deno.stdout);
  file.close();
}

これは仮にfilenameにファイルのパスが渡されていたとして、見ての通りファイルの内容が標準出力されます。

copy()はカーネル→ユーザーディレクトリ→カーネルの必要なコピーしかしていません。 ファイルからは同僚のメモリが読み出され、そのまま出力されます。これはDenoにおいてのI/O出力の普遍的な設計を表しています。

テストも書くことができます。

assertion utilitiesをimportするだけでそれが実現できます。 非同期関数についても用意があるようです。

deno.land

Chrome Developer Tool向けのデバッガの用意もあります。

インストール後にinspectを有効にすると、localhost:4500にアクセスすることでログイン中のリポジトリのjsファイルが見れるようになっています(ちょっとゾワっとする) f:id:letterneginr:20200524174524p:plain https://deno.land/manual/tools/debugger

感想

セキュリティ周りについていいお勉強になりそうだと思いました。 バックエンド色の強いチュートリアルが多かったので、今回はこれ以上深入りしないようにします^^;

Deno を参照することでテストやAPIも呼べる点がシンプルで、実装しやすそう。 jsのフレームワークを勉強して、余裕が出てきそうだったらまた触りたいです。

JavaScriptのクロスサイトスクリプティングについて調べてみた

最近は「使うだけ」ではなく、設計レベルを目指してJavaScriptを勉強中です。 JavaScript本格入門を読んでいますが、jsの生い立ち、クロスブラウザの問題の背景を知ることができて、読み応えがある感じです。

そこで、「JSはセキュリティホールが多い」という誤解が一時期広まったと書いてありました。 これは、JSが動作するブラウザのセキュリティ対策が不完全だったことも相まって、JSの不人気の原因になってしまったようです。

記憶にも新しいニュースを載せておきます。 www.itmedia.co.jp

上記のようなモーダルを出す、という実装は、環境さえあれば手軽に実行できてしまうものなので、 それが誤解されてこのような事件に発展することもあるかと思います。

この機会に、理解があいまいだったJSで引き起こされる「クロスサイトスクリプティング」についてまとめていきます。

ゴール

初心者にクロスサイトスクリプティングがざっくり伝わる説明をする。

説明

*1クロスサイトスクリプティング(英: cross site scripting)とは、Webアプリケーションの脆弱性[1]もしくはそれを利用した攻撃。 xss説明の図

①悪意のある人間がJSを使い、WebサイトのURLのパラメータやDOMを操作して、htmlを改ざんする。

②Webサイトを閲覧し、そのhtmlが表示されたユーザーが、別のページに誘導されてしまったり、不正に個人情報を抜き取られてしまう。

という流れです。この話は何度か聞いたことがありましたが、 では具体的にどういった実装が人々に不安をもたらしたり、害悪があるのかについて疑問でした。 いろんなパターンがあると思いますが、

モーダルを出して不安を煽る文句を見せる

モーダルを消すとリダイレクトする

といったパターンが多いようです。

そもそもなぜこのような操作がJSでできてしまうのか

実装によって異なりますが、

サーバサイドで不正なリクエストを受け取り、本来の実装とは異なるhtmlが返却される

という事象に集約されるようです。

不正なリクエストとは、不正な機能の載ったページをくださいという要求をサーバサイド側にするということです。 サーバサイドでは、このような悪用を防ぐ為に、不正なリクエストがあった時に安全なページを表示する為に工夫をすることができます。

エスケープ

ここではRubyを使ったエスケープという工夫を見ていきます。

docs.ruby-lang.org

例えば、攻撃者が悪意を持って

https://www.サイトURL?params=< script type= \"text/javascript" > alert("警告") < /script>

というコードをリクエストしたとします。(コピペで実行できないように、実際のものに少し手を加えてあります🙇‍♂️)

このままでは、htmlでparamsの値が表示される部分に、モーダルが出てきてしまいます。

これを、ブラウザがモーダルとして解釈しないように、ただの文字列にします。(プログラミングのコードではなく、文章にしてブラウザに伝える命令を変えてしまいます)

p CGI.escapeHTML('< script type= \"text/javascript">alert("警告") \')

#=> "&lt;script type=&quot;text/javascript&quot;&gt;alert(&quot;警告&quot;)&lt;/script&gt;"

すると、#=>以降の文字列としてブラウザに解釈され、モーダルは出ずにコードだけがWebページに表示されるようになります。

Railsのビューヘルパー

上記はサーバサイド言語のRubyを使って説明していますが、アプリケーションを作るフレームワークでもすでに実装されています。 不正なURLにリダイレクトさせたくない時は、url_encodeも有効です。

ERB::Util - html_escape github.com

ActionView - FormTagHelper github.com

この部分は、erbでフォームを作るメソッドです。 フォーム内の文字がエスケープされるように処理が書かれています。

生い立ちを忘れずにメソッドの役割を理解する

今はこのような対策がWebアプリを作る際にすでに用意されているので、私個人として、使う時には意識をしない問題だったと思います。

これはあくまでブラウザが実装者の意図しない命令を解釈をしてしまうことでも引き起こされるので、今後の開発に役立てていこうと思います。

アイコン:

Icons made by Flat Icons, DinosoftLabs, and Freepik from www.flaticon.com

ありがとうございます。

(あまりJSの話ができなかった…)

*1:Wikipediaより

Netlifyとgatzbyでデプロイして著しく開発意欲が低下した話

npm i -g gatsby-cli

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が可愛いので載せてしまいますよ。

f:id:letterneginr:20200422203809p:plain

うーん。何か良さげな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時にぼやっとする f:id:letterneginr:20200421145639g:plain

②hover時にぼやっとして文字を出す f:id:letterneginr:20200421145648g:plain

①やっていることはCSS3でfilterとanimationの動きを指定するだけです。

&:hover {
  transition: .3s ease-in-out;
  -webkit-filter: grayscale(60%) blur(2px);
  filter: grayscale(60%) blur(2px);
}

developer.mozilla.org

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でモーダルを追加する

f:id:letterneginr:20200421154642p:plain

  • 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
    }
  });
}

f:id:letterneginr:20200419002837g:plain

  • .a-logoというクラス名のDOMを集めて、波のような動きを表現しています。 それぞれのプロパティを調整することでアニメーションの種類やタイミングを変更可能です。

プロパティについてはこちらの公式ドキュメントを見ながら手を動かすと、楽しいと思います。

あまり聞き慣れないかもしれませんが、gsapはGreenSockが出しているアニメーションライブラリです。gsap, TweenMaxのことをGreenSock(のライブラリ)と表現している記事も見かけられ、Vueの公式でも採用されているくらいにはアニメーションのライブラリとして普及されているようです。

日本語ドキュメントはありませんが、紹介記事やデモも多いです。 公式サイトのshowcaseは見ているだけでも楽しいので、めちゃくちゃ推しておきますヽ(´▽`)/笑

Rails6のアプリでポートフォリオを作った話。【1】

最近転職活動をしています。
半年ぶりに再びRailsを触ろうと思って、herokuを使って再勉強中です。

# 使うもの👩‍💻

  • Rails6, slim, scss, Vue.js, webpacker
  • heroku, postgres

# ゴール💡


herokuのアカウントは作られている前提で進めます。

# 今回の目次

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やタグを並べられるところが好きです。記述量も短い。
f:id:letterneginr:20200419010102p:plain

  • scss

AtomicDesignを考えた時に、modifierをかなり使用する為、1つの部品に表現のパターンが一目でわかりやすいところが気に入っているところ。
f:id:letterneginr:20200419001711p:plain

  • GSAP

これが冒頭で言っていた、3DCGコンテンツを作ってくれるアニメーションライブラリ。
導入も簡単です。
```
yarn add gsap
```

app/javascript/packs/application.js
````
require("gsap")
```
今回は3.2.6を使います。Vueのようにimportでgsap, TweenMaxが使えるようになります。

f:id:letterneginr:20200419002837g:plain
こんな動きを実現できます。

### 3-1. slimとvueの併用で起こる問題点

他は忘れかけている親しみ深いvueを構築の練習も兼ねて入れています。
ただし、slimではjavascript:と書いた下側にjsを書いていくことができますが、
export defaultと書かれた以降をテンプレートエンジンが解釈できず、slimにvueのコンポーネントをimportできないという難しさがあります。


f:id:letterneginr:20200419004255p:plainf:id:letterneginr:20200419004259p:plain
エラーは、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)への習熟
ソリューションアーキテクトレベル?
ある事情で心穏やかに仕事できないから

  • アウトプットは続けてやっていく

他社の人にもいいね!と言ってもらえるスパンでアウトプットは出来ていたと思うので、引き続きやっていきたい。
更新できなかった記事もこれだけあったし、もっと簡潔にまとめられる能力を高めよう。

お蔵入りの記事たち
お蔵入りの記事たち










\---お正月の写真シリーズ---

お正月ツーリング中ドット絵な元日富士山
お正月ツーリング中とドット絵な元日富士山