=> Wed, 26 Jun 2019 23:51:24 JST +09:00
ーーーーーーーー
今日はdeviseやwardenの内部実装を読んだりしていた。
devise/sign_in_out.rb at master · plataformatec/devise · GitHub
def expire_data_after_sign_in! # session.keys will return an empty array if the session is not yet loaded. # This is a bug in both Rack and Rails. # A call to #empty? forces the session to be loaded. session.empty? session.keys.grep(/^devise\./).each { |k| session.delete(k) } end alias :expire_data_after_sign_out! :expire_data_after_sign_in!
この expire_data_after_sign_in! メソッドはその名の通りログイン認証後にdeviseのセッションを破棄するメソッドなのだけど、エイリアスで expire_data_after_sign_out! メソッドも定義している。メソッドの内容は同じでログイン/ログアウト時にそれぞれ適した命名のメソッドを呼べるので、ほーんこんな時にalias使うんかーと唸るなどした。
内部実装を読んでやりたかったことはdeviseのscopeを新しく追加し、 user 以外の別のモデルでログインするルーティングを追加したかったのだけど、そこはうまくいっていない。明日の自分に期待。
Netlifyでデプロイした
みやです:)
Vue.jsでえんやこらプロジェクト、第4回です 前回はこちら、ブログ機能の肝となるCMS機能、ButterCMSを導入しました m5gf.hatenablog.com
初回の記事はこちら→ Vue.jsの勉強がてらブログを作るよ - M5GF
今回はなんとロゴしか作っていないのに本番環境を用意してデプロイしちゃいます！！！
Netlify
今回本番環境として利用するのはNetlifyと呼ばれるサービスです。
Netlifyとは、静的Webページ(HTML/CSS/JSのみのページ)のホスティングサービス。近いところだとGitHub Pagesや、WebアプリなどでおなじみHerokuがあります。
その中でもNetlifyは、GitHubリポジトリから指定したブランチの変更を検知し、自動デプロイまでサクッとしてくれちゃうこれまたスゴイやつです。独自ドメインの利用・https化までできるし、HerokuのReview Appsのようなブランチ毎の検証環境まで用意してくれて非常に便利。
ねっとりファイ。
やっていきファイ
早速やっていきましょう。今回はこちらのサイトを参考に導入しました
猫本の名前で知られるVue.jsの入門書、 基礎から学ぶ Vue.jsのチュートリアルページです。
GitHubアカウントでログインし、New Site From Git を選択。
続いてGitリポジトリのリソースをGitHubで選択。該当するリポジトリを自動で表示してくれます。
僕の場合はCNRを選択。
デプロイするブランチを選択。
ビルドコマンド？？なんだ？npm run buildかな？パブリッシュディレクトリ？？チュートリアルページでは dist ディレクトリが指定されているけどそんなもの存在してなくない？
npm run について知ろう
結果的にここでビルドコマンドは npm run build 、パブリッシュディレクトリは dist を指定すれば良かったのですが、そのコマンドでは何をしているのか・そもそも開発時に立ち上げている nom run dev コマンドは一体何なのか、今一度知る必要がありました。
※ここは飛ばしてもらって大丈夫です！！
まずは npm run こちらの記事には、以下のように書かれています。
フロントエンド開発の３ステップ（npmことはじめ）
npm runとは、npm scriptsと呼ばれるタスク実行機能を呼び出すコマンドです。 機能は一つしかありません。
- package.json内に書かれたシェルスクリプトを実行するだけ
これだけです。
ほんほんなるほど？ではpackage.jsonを見てみます。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
これらの記述は npm init 時に自動生成されたものですが、なるほどnpm run devコマンドでは
- webpack-dev-serverを立ち上げる(ファイルパスはbuild/webpack.dev.conf.js)
- --inlineオプションでinlineモードで起動(変更があった際のオートリロードができる)
- --progress で進捗表示
をしているようです。参考
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動
そしてnpm run buildコマンドは build.jsを実行している(何が書かれているのかはまだ理解できなかったため飛ばします)
npm run build
npm run buildをローカルで実行してみると dist ディレクトリが生成され、HTML/CSS/JSファイルがそれぞれ生成されていることを確認できました。
NetlifyのPublish Didectoryには、 npm run build でビルドされるこの dist ディレクトリを指定すれば良さそうです。
Deploy Site
Build command と Publish Directory を指定したら、Deploy Siteをクリックするともうデプロイが開始します。
デプロイログを見て待ちます
Build complete!!!
こちらからアクセスできます！やったーー
https://affectionate-nobel-000d34.netlify.com/#/
（すでにちょっとだけレイアウトのスタイルが追加されていますが、実はこの記事を書くタイミングで3記事分くらい進んでしまっています コード書くのは楽しい）
おわり
今後はmasterブランチにプッシュしたタイミングでビルドが行われ、自動でデプロイが行われるようになります。このタイミングで本番環境への自動デプロイを用意したため、ローカルでは動くが本番環境では動かない、といったバグをその都度検知し修正でき非常に便利です。
Netlifyの設定として残っているのはカスタムドメインの設定がありますが、それは開発終了後で問題ないでしょう。（ドメインは買ってあります）
という訳で今回はここまで！次回はレイアウトの追加をします ここまで読んでくれてサンキュー‼️
ButterCMSの導入をした
どうもみやです:)
Vue.jsでなんか作ってみようプロジェクト第３回です 前回の記事はこちら、コンポーネントを使ってみました
最初の回はこちら Vue.jsの勉強がてらブログを作るよ - M5GF
今回はブログ機能の肝である、ButterCMSの導入をします！
ButterCMS
今回のプルリクはこちらです。
Feature/add butter cms by MH4GF · Pull Request #2 · MH4GF/CNR · GitHub
ButterCMSの追加をしました。見ての通りコード量は全然なく、簡単に導入できました
あとは自動生成されたHelloWorld.vueを削除したりしていますね
ButterCMSって何
ButterCMSは、ブログサービスの中でもヘッドレスCMSと呼ばれるものの一つで、API形式のデータの共有と、ブログの管理画面を提供してくれます。
なのでこちらとしてはフロントエンドだけ用意して、ButterCMSの管理画面で記事を書けばあとはよしなにいい感じにやってくれるスゴイやつです
やっていき
早速導入してみましょう Vue.jsのプロジェクトにButterCMSを導入する方法は、Vue.js公式ドキュメントでチュートリアルが用意されておりここに全てが書かれています
しかしクイックスタートの序盤でいきなりつまづいてしまいました、こちらの記述です
ES6 の使用:
import Butter from 'buttercms';
const butter = Butter('your_api_token');
頼むもっと説明してくれ〜〜〜〜〜！
何をしているのかはわかるけどどこに書けばええねん、初心者あるあるの一つ「記述するファイル名書いて欲しい」です（様々なパターンがあるのであえて明記してないのだろうなとは思いますが…）
こういう時はgithubを検索して自分と似たようなことをしている人いないかなーと探すのをよくやります vue-cliで自動生成してButterCMS導入した人なんてたくさんいるでしょう
こんな感じでコードを1行丸々ぐぐっちゃいます
すると良さげな人を見つけました Personal-Site/buttercms.js at master · ChrisSMendoza/Personal-Site · GitHub
src配下に別のjsファイルを用意して、cmsを使いたいファイルでインポートすれば良さそうです
というわけで今回はこんな感じで書きました
src/buttercms.js
import Butter from 'buttercms';
const butter = Butter('23c952c6842efc4729cce6501912809d9174816f');
export default butter;
src/components/BlogHome.vue
<script> import butter from '../buttercms'; # 定数butterを読み込む ~~~ </script>
github検索、もっと使いこなせるようになると捗って良さそうです
やっていきその2
あとはチュートリアルをそのまま進めていけば問題ありませんでした、
vue-routerの導入
import Vue from 'vue';
import Router from 'vue-router';
import BlogHome from '../components/BlogHome';
import BlogPost from '../components/BlogPost';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: BlogHome,
},
{
path: '/:slug',
name: 'post',
component: BlogPost,
},
],
});
コピペ
'/'にアクセスするとBlogHomeが、'/記事名'にアクセスすればBlogPostが表示されます（slugは変数みたいなものと考えればいいのでしょうか）
src/components/BlogHome.vue
<template>
<div id="blog-home">
<h1>{{ page_title }}</h1>
<!-- `v-for` の生成、および Vue 用に `key` 属性の適用。ここでは、slug と index の組みを使用します -->
<div
v-for="(post,index) in posts"
:key="post.slug + '_' + index"
>
<router-link :to="post.slug">
<article class="media">
<figure>
<!-- `:` による結果のバインディング -->
<!-- `featured_image` を使うかどうかは、`v-if`/`else` で判定します -->
<img
v-if="post.featured_image"
:src="post.featured_image"
alt=""
>
<img
v-else
src="http://via.placeholder.com/250x250"
alt=""
>
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.summary }}</p>
</article>
</router-link>
</div>
</div>
</template>
<script>
import butter from '../buttercms';
export default {
name: 'blog-home',
data() {
return {
page_title: 'Home',
posts: [],
};
},
methods: {
getPosts() {
butter.post.list({
page: 1,
page_size: 10,
}).then((res) => {
this.posts = res.data.data;
});
},
},
created() {
this.getPosts();
},
};
</script>
<style lang="scss" scoped>
</style>
コピペ
src/components/BlogPost.vue
<template>
<div id="blog-post">
<h1>{{ post.data.title }}</h1>
<h4>{{ post.data.author.first_name }} {{ post.data.author.last_name }}</h4>
<div v-html="post.data.body"></div>
<router-link
v-if="post.meta.previous_post"
:to="post.meta.previous_post.slug"
class="button"
>
{{ post.meta.previous_post.title }}
</router-link>
<router-link
v-if="post.meta.next_post"
:to="post.meta.next_post.slug"
class="button"
>
{{ post.meta.next_post.title }}
</router-link>
</div>
</template>
<script>
import butter from '../buttercms';
export default {
name: 'blog-post',
data() {
return {
post: {},
};
},
methods: {
getPost() {
butter.post.retrieve(this.$route.params.slug)
.then((res) => {
this.post = res.data;
}).catch((res) => {
console.log(res);
});
},
},
watch: {
$route() {
this.getPost();
},
},
created() {
this.getPost();
},
};
</script>
コピペ
動いた〜〜〜〜〜〜
このフェーズではとにかく動かせればよかったので、コピペのまま内容は理解していません pugも使っていないしね いじるタイミングでコードを理解していこうと思う
終わり
文量も多くなってきているので、ここで一旦区切ります 次回はNetlifyでのデプロイをしよう
ここまで読んでくれてサンキュー‼️
タイトルロゴのコンポーネント化をした
どうもみやです:)
今回もVue.jsでなんか作るぞプロジェクトの第2回です、前回書いた通り、プルリクを出すタイミングでこのブログで「こんなことやったよ〜」みたいなのを書いていきます
前回の記事はこちら m5gf.hatenablog.com
早速やっていくぞ！
タイトルロゴのコンポーネント化をしました
今回のプルリクはこちら Feature/logo by MH4GF · Pull Request #1 · MH4GF/CNR · GitHub
タイトルロゴのコンポーネントを作りました。と言ってもh1要素だけ！！
src/header/logo.vue
<template lang="pug">
.logo
h1 CNR
</template>
<script>
export default {
};
</script>
<style lang="scss" scoped>
.logo {
position: fixed;
top: 40px;
left: 40px;
h1 {
margin: 0;
}
}
</style>
本当にh1要素だけの簡単なコンポーネントです
また、余談ですが今回はHTMLテンプレートエンジンに pug を使ってみようと思っています。いつもRailsで書いているSlimみたいで書きやすそう！
コンポーネント
Vue.jsといえばコンポーネント思考(と思っているの)ですが、いまいち使い方を理解していなかったのでひとまず雑に使ってみようと思いました。
Vue.js公式のドキュメントによると、
コンポーネントは Vue.js の最も強力な機能の1つです。基本的な HTML 要素を拡張して再利用可能なコードのカプセル化を助けます。高度なレベルでは、コンポーネントは Vue.js のコンパイラが指定された振舞いをアタッチするカスタム要素です。場合によっては、特別な is 属性で拡張されたネイティブな HTML 要素の姿をとることもあります。 コンポーネント - vue.js
ほーん？とにかくパーツを単一ファイルにひとまとめにして再利用可能にすると考えれば良さそうです
コンポーネント登録の流れ
それでは実際にコンポーネントを用意して使ってみます。
1. src/componentsディレクトリを用意し、その中に.vueファイルを作成する
今回はsrc/components/header/logo.vue に配置しました（上のやつ）
2. App.vueのscriptタグ内でインポートする
App.vue
<script>
import Logo from './components/header/Logo'; # インポート（.vueはいらない）
export default {
name: 'App',
components: {
logo: Logo, # コンポーネントを登録
},
};
</script>
コンポーネント登録の方法はグローバル登録とローカル登録があり、これはローカル登録の方法です。App.vueのVueインスタンス内でのみコンポーネントの使用が可能になる。
3. App.vueのtempleteタグ内でコンポーネントを使用する
App.vue
<template>
<div id="app">
<header>
<logo/> # コンポーネントを配置
</header>
<router-view/>
</div>
</template>
先ほど logo というコンポーネント名で登録したので、登録先であるApp.vueのtempleteタグ内では <logo /> というタグでコンポーネントを使用することができます。
これでロゴが表示されるようになりました！！やった〜〜
おわり
今回はここまでです コンポーネントの用途として親子コンポーネント間でのデータの引き渡しがありますが、ロゴでは必要ないので必要になった際にまた勉強します。 次回は早速本番デプロイしてみる予定です！早めのデプロイが大事:)
ここまで読んでくれてサンキュー！！
続き↓ ButterCMSの導入をしました m5gf.hatenablog.com
Vue.jsの勉強がてらブログを作るよ
こんにちは久々のブログです。岐阜改めみやです。
そろそろjQueryでお茶を濁すのはやめて、本腰入れてフロントエンドを勉強しないとなあ…と、JavaScriptを勉強する機運が高まってきています。
いつも書いているRailsは英文のようにスラスラ書けるので書いていて楽しいのだけど、いざJSを書こうとすると手と思考が停止する。WebpackもやーんもajaxもCSS設計とかもいまいちわからない。フロントエンド苦手意識なんとかしなきゃ、、、
そんな中、株式会社イメジンのshuさん(@shujs1)からVue.jsの基礎の基礎を教えていただく機会がありました。vue-routerが思っていたよりなんとか理解できそうだったのと、HTML/CSS/JSを１つのファイル内で書ける単一ファイルコンポーネントが気に入ったので、Vue.jsからフロントエンドの勉強を始めてみることにしました
ブログ作る
勉強といえど、自分の場合は
- ググりながら雑に作ってみる
- 本を読んでいい感じの書き方を知る
- リファクタリング
が性に合っているようなので、さっそくVueで何か作ってみることにします
ちょうど写真載せたりヒカキンの話をしたりできるいい感じのブログが欲しいなーと思っていたところなので、今回の目標は実用に耐えうるSPAのいい感じなブログを作って使うにしましょう。
細かい目標として、
も意識していきたいと思います。
やっていき
早速やっていきます。最近はDockerの勉強をしてきていたので、これも勉強がてらMac内を汚さずコンテナ内で完結するVueの開発環境を作りました。Dockerfileはこちらです。
こちらのコードを参考にしました。
Nuxt / Vue.js の開発環境をDockerでつくる | tackeyy.com
Dockerfile
FROM node:10.11.0-alpine ENV LANG C.UTF-8 # Create app directory RUN mkdir ./frontend WORKDIR /frontend # Set environment variables ENV NODE_ENV development ENV HOST 0.0.0.0 EXPOSE 9000 # Bundle app source RUN yarn global add vue-cli RUN yarn install CMD ["/bin/sh"]
docker-compose.yml
version: '3'
services:
cnr:
build: .
ports:
- 9000:9000
volumes:
- .:/frontend
stdin_open: true
tty: true
そのあと npm install をして諸々ファイルを生成したのがこちらのリポジトリです。環境構築めっちゃ簡単なんだね。CNRは好きな曲の頭文字です。
一人開発ではあるけどブランチを切って開発して、プルリク出すタイミングくらいの頻度でブログを更新できればいいなあと思っています。
これから
まだどんなもんなのかなあというのが分かっていないのだけど、
の流れでなんとかなるんじゃないかなあと思っています。軽く調べた限りだとButterCMSとNetlifyを使うのがモダンなのか。
ひとまずやっていきましょう。頑張るぞー！
10/20追記：続きです m5gf.hatenablog.com
2月の振り返りと3月やりたいこと
1月の振り返りと今月やりたいこと
おはよー！！！こんにちはー！！！こんばんはー！！おやすみー！！！！起きてぇえええ！！！！gifuです！！！（月ちゃんすき）
2月になり、大学は春休み期間に入りました。アルバイトをあまり入れていない春休みは初めてです。自分の時間がより多くとれるので、この2カ月間でどこまでできるかどうかが楽しみですね！（意識高くないとやってらんねえよ！！）
というわけで月初めの前月の振り返りと今月の目標です。
前回のはこちらです。
m5gf.hatenablog.com
