JavaScript => Nuxt.js（二日目）

Nuxt.jsへの移植作業二日目です。

Nuxt.js ディレクトリ構造

ディレクトリ構造について書かれていて

「それぞれこういった役割を振り分けられているのね」

と、ふむふむしました。 

USER-no-MacBook-Air:nuxt.Rabbit-game suwa$ tree
 .
 ├── README.md
 ├── assets
 │   └── README.md
 ├── components
 │   ├── Logo.vue
 │   └── README.md
 ├── layouts
 │   ├── README.md
 │   └── default.vue
 ├── middleware
 │   └── README.md
 ├── nuxt.config.js
 ├── package-lock.json
 ├── package.json
 ├── pages
 │   ├── README.md
 │   └── index.vue
 ├── plugins
 │   └── README.md
 ├── static
 │   ├── README.md
 │   └── favicon.ico
 └── store
     └── README.md
 8 directories, 16 files

↑の、pagesの下にあるindex.vueをエディタで編集したの。

何故画像なのかというと、コードブロックで書こうとしたらスラッシュが何かに作用してうまく表示されなかったからです！そんなんばっか！

.

index.vue内は上記画像のようなHTML/JS/CSSの三部構成になっているので

それぞれ指定されたものをコピペしていくのですが

Nuxt.js語的な独自ルールがあって、その翻訳がいまだにわかりません。

うさぎでもわからないblog

.

土日は作業できるカフェを探すのだけでも苦労するの。

WiFiか電源、どちらかを譲歩できるだけでもかなりラクになるなあ

とおもった。

Dockerなどを使わなければ、ほどほどに電池もつので

むしろダラダラ作業しないためにも

電源なしの作業場所を選ぶのアリかもしれないとおもいました。

Nuxt.js移植

恵比寿でネイルしてきたよ。

くすんだベージュで落ち着いた感じになりました。

そのあとは六本木に移動して、しばらく作業。

ひたすらWordPressのタグつけ作業だよ。

PCからだと左側にタグ群が表示されて

スマホからだと右上のハンバーガーメニュー（三本線）から

タグ群が表示されるようになりました。

やったねえ。

.

母に頼まれて大昔に作ったHPの、ログインボタンを復活させるなどしました。

すべてgit管理したいなあ。

.

Rabbit-gameのNuxt.jsへの移植もすこしやったよ。

標準ライブラリやサードパーティライブラリについて

あと、コンパイルとビルドまでやるのかと知って

JavaScriptなのにJavaぶっているなと感じました。

.

わたしは浦島太郎なのでjQueryに触れずにきて

最新の恩恵がわからず、ただひたすら複雑化して

JS書くだけなのに何故こんなにも段階を踏まされるのか分からん😠

って気持ちだったのだけど

思い返せばdocker-composeも仮想サーバーも

以前なら存在すらしなかったけれども

現在の技術進歩によって生み出されて

複雑化してはいるのだけれども、便利だし覚えた方が良いよね。

って、ノリで覚えてきたし

JSも膨大に散らかったものを一つ一つ見るのではなく

自動化して整理されるようなツールがあるのならば

それの使い方は、積極的に覚えてしまった方がラクなのかもしれないと思いました。

こちらGitHubのブラウザ上でJSを移植しようとして一気にコピペしてpushしていたの。

移植は一行一行やっていかないとerrorだらけでわけわからんくなる😢

と、いうことで

$ git log

で、今までのgit履歴を確認して

$ git revert [ID]

で、IDを指定して消し

git pushしました。

git管理だいじ

Lambda

AWSで例えば

“S3へファイルがあがったら、それをトリガーにして何かプログラムが走る”

というような

簡単な動作をさせたいねという話から

Lambdaならコードさえ書けば、EC2要らずで動くの便利なのでは？

と、いうことでLambdaについてザッと調べました。

.

AWS初心者入門 第7回～「Lambda」ってなにがスゴイんですか？

説明はそこそこにサッサと現物を触ってみようということで

Python による Lambda 関数のビルド

AWSのチュートリアルを参考にコンソールをポチポチしてから

ローカル環境で実行も出来るらしいということで

Qiitaの記事をいくつか参考にしつつ試してみました。

.

aws-sam-local 改め aws-sam-cli の新機能 sam init を試す 

AWS SAM CLIでLambda Functionを開発する

Pythonの参考に出来る新しい記事が見当たらなかったのと

タイポミスで、記事通りだと実際に動作しないものや

若干の変更点もあったので

自分で備忘録用に記事をまとめてみることにしました。

Pythonでaws-sam-cliをローカル実行するまで

Mastodonにもupしたのだけれども、ほぼ反応なかったの寂しい😢

ま、いいけどねえ。

treeコマンドを使えるようになった画像です。

LambdaをGitHubにあげるところまでやったよ。

.

そういえば

gitコマンド操作に慣れるため

ブラウザからのGitHub禁止令が出されました。

ひいい

git stashなどのコマンド操作や

サーバー内でgit操作をしたいときに

gitコマンドに慣れていた方が良いよね。

と、いうことでしばらく封印です。

少しだけgitコマンド慣れたよ☺️

横になる日

低気圧fuckin’だったので

頭痛薬を飲んで

ほぼ横になって過ごしました。

.

このあいだ台風が近づいたときは

無理に出かけたせいか

外出先でひたすら吐き続けてしまい

意識朦朧として帰るのが至難なかんじだったので

今回はきちんと大人しくしていたよ。

.

あまりにも低気圧に弱いので

病院で検査を受けたの

特に異常無しだったので

頭痛薬でしのぎつつ

あまり薬も効かないので

台風が近づくと吐き気と闘うマンだよ。

吐くのがツラい、お出かけしづらくなってしまう。

.

車酔いならぬ台風酔いってかんじする。

気圧が安定すればケロッと治るのだけどねえ。

ナノビーズ

週末は台風がくるらしいので

低気圧fuckin’で出掛けられなくなる前に

ニコタマデートしてきました。

蔦屋家電ぶらぶらするの。

ちょいブレなのうけるね。

今日と明日は

作業が難しいだろうなあ

ということで

そういう日は潔く諦めて

作業は完全offで過ごしました。

.

夜にちまちま作ったよ。

ナノビーズ

根気のいる作業でした。

細かな作業すきなので楽しかったあ。

またやりたい。

13時間寝た

昨夜は22時に寝落ちしたはずなのに

起きたら11時で焦ったわよね。

.

お昼過ぎに渋谷でひとと会う用事があったので

急いで支度して間に合わせました。

活動的！

しかし、蓄積された疲れはどこかで歪みとして出てくるので気をつけないとね。

.

安定のFab Cafe

今日は草食べたの。

服は祖母がつくってくれたものだよ。

洋服のデザインをしたり

作ったり売ったりしているひとなの。

腰のリボンが可愛い。

.

Rabbitｰgameにコンテニューボタンつけたの。

Rabbitｰgameの謎クオリティどうにかしたい。

デザインも機能面も謎なかんじなので、きちんとします。

GitHub充実させよう。

俺流に寄って帰りました。

v2.9.2 => v2.9.3

午前中はお部屋の片付けをしていたの。

お昼過ぎに渋谷へ行って

Fab Cafeで作業をしたよ。

どんすわ無事にアップデートしました。

ターミナルのhistoryをまとめて

Evernoteにメモしました。

差分をきちんと確認して

それに合わせてアプデしないといけないのねえ。

git diffコマンド

便利なので覚えよう。

.

Illustratorで

スマホページの画像と

SNSのトップページの素材をつくっていたの。

Illustratorもっと使いこなせるようになりたいなあ。

夕方は山ちゃんに寄ってビール飲んだよ。

昭和の歌謡曲すきだなあとおもった。

Slider

帰省2日目です。

静岡らしいもの食べたよ。

生しらすや黒はんぺんとかね。

.

スマホ用ページで画像をスライドさせたいなあとおもい

参考コードを探したのだけれども

なかなかコードが長くて疲れてしまったので

JSは使わずにHTMLとCSSだけで動くものを見つけて

そちらを参考にしました。

できたものがこちら

動くのでスマホから下記ページを見てみてね。

https://suwa3.github.io

.

コードをコピペして

画像をちょろっと変更しただけなので

こちらは数十分で完成したの。

.

でも、動きがあるからか

SNSへ投稿したとき

こっちのほうが10倍くらい反応あって

やはり動きがあると違うのだなあとおもった。

.

昨日の編集には3時間溶かしたわりに

反応の有無という意味では

費用対効果が少なかったかもしれない。

.

しかし、デベロッパーツールの使い方を再確認できた点では

成果が大きかったので良しだよ。

デベロッパーツール

HPのスマホ用ページを編集したの。

ハンバーガーメニュー持て余していたので。

.

移動時間にスマホ用ページのデザイン集を見つつ

スプリングボードメニューが見やすそうだなあとおもい

下記ページを参考にしつつ作りました。

https://gardenplace.jp/

(実際にはリンクを並べる形なのだけれども)

.

まずデベロッパーツールの使い方を調べるのに1時間。

基本的な使い方ふわっと分かっていたので

とりあえず欲しい場所のHTMLタグから

対応しているStyleを

自分のHPの既存内容と喧嘩しないようにコピペして

ひたすら貼り付ける作業に2時間。

計3時間かけて

上画像から下画像に編集しなおしました。

.

高校生のころ、毎日

｢今日はこのHTMLタグで遊ぼう｣

ってノリでWeb編集していたけれども

当時はデベロッパーツールとかなかったの。

改めて、これめちゃ便利だね。

PCでF12押すだけで参考にできるの強い。

.

静岡に帰省しました。

1泊2日なの。

従兄弟が大学で材料系と機械系について学んでいると知り

Linuxやラズパイ周辺のことなど

いろいろと話せたので楽しかった。

blog整備

昼間はお盆のschedule2019をまとめました。

外出そこそこに作業時間を確保できたら良いなあ。

.

最近暑くて夏バテ気味なので

栄養がままならず貧血になり

諸々の体調不良の原因となっている気がするので

鉄分補給を心掛けようとおもいます。

干しプルーンを朝夜たべよう。

.

postgreSQLのコマンド

実際に手を動かして操作してみているの。

キーボードを替えたばかりで、ショートカットなど探りつつだよ。

早く慣れたいなあ。

HPのデザインなんだけれども

https://automotiveoem.com/About-Us

ここのページデザインとても好きだなあとおもった。

参考にしたいの。

先週のblogの訪問者が41名で

じわじわと増えているので

blogをきちんと整備したいとおもいました。