2018年が終わる...

先月は更新できなかった…

#あれ、数か月前も同じようなこと言ってたような。。
ここ数日、寒すぎやしませんか。起きるのが辛い……。

前回のQiita投稿一覧サイトの見直しの件、Qiitaにあげていた記事も更新しました。
masterbranchの差分が大きいとメンテナンスがしんどいこともあり、結局emitではなくstoreを使ったものにしました。

転職しました

10月から新しい会社で働いています。
SIer→事業会社なこともあり、戸惑うこともあるのですが楽しく刺激をもらっています。
自分で思っていたほど…なので頑張らないと。

あと2週間程度で新年

年々、一年過ぎるのが早く感じます。
8月時点でこれからやることリストを以下のようにあげていました。

1
2
1. 既存のアプリケーションのリファクタリング
2. 認証機能のあるWeb APIの勉強

とりあえず1番は1つ対応したので、2番を残り数週間で取り組みたいと思います。
AWSを使った何かも作りたいなぁ。

Share

Qiita投稿一覧サイトの見直し

Qiita投稿一覧サイトの見直し

前回宣言したようにnuxtを使ったアプリケーションの1つである
Qiita投稿一覧サイトを見直したいと思います。

具体的に何をするか

以下の4点に取り組もうと思います。

  1. 各依存関係のバージョンアップ
  2. トップへ移動の処理をvue-scrolltoに代替
  3. スタイルをscssで書き直す
  4. 処理の見直し、機能追加

各依存関係のバージョンアップ

依存関係の(マイナー)バージョンアップを行います。

name before after
nuxt ^1.1.1 ^1.4.2
axios ^0.17.1 ^0.18.0
element-ui ^2.0.11 ^2.4.6
babel-eslint ^7.2.3 ^7.2.3
eslint ^4.3.0 ^4.19.1
eslint-config-standard ^10.2.1 ^10.2.1
eslint-loader ^1.9.0 ^1.9.0
eslint-plugin-html ^2.7.0 ^3.2.2
eslint-plugin-import ^2.0.11 ^2.14.0
eslint-plugin-node ^5.1.1 ^5.2.1
eslint-plugin-promise ^3.5.0 ^3.8.0
eslint-plugin-standard ^3.0.1 ^3.0.1

トップへ移動の処理を「vue-scrollto」に代替

vue-scrolltoをインストールします。

1
npm install --save vue-scrollto

nuxt.config.jsに設定を追加

nuxt.config.jsのbuild内に以下の設定を追加します。

1
2
build: {
vendor: ['axios', 'element-ui', 'vue-scrollto'],

nuxt.config.jsのpluginsに以下の設定を追加します。

1
2
3
plugins: [
{ src: '~plugins/vue-scrollto', ssr: false }
],

vue-scrollto.jsの作成

/plugins/vue-scrollto.jsを作成します。

1
2
3
4
5
6
// plugins/vue-scrollto.js

import Vue from 'vue'

const VueScrolltop = require('vue-scrollto')
Vue.use(VueScrolltop)

スクロール処理をvue-scrolltoに置き換え

自前実装のスクロール処理をvue-scrolltoに置き換えます。

【before】

1
2
// pages/search.vue line:2
<div>
1
2
3
4
5
6
// plugins/vue-scrollto.js line:34~
<div v-if="250 < scrollY" class="page-component-up">
<transition name="fade">
<i class="el-icon-caret-top" @click="scrollTop" />
</transition>
</div>

【after】

1
2
// pages/search.vue line:2
<div id="page_top">
1
2
3
4
5
6
// plugins/vue-scrollto.js line:34~
<div v-if="250 < scrollY" class="page-component-up">
<a href="#" id="return-top" v-scroll-to="'#page_top'">
<i class="el-icon-caret-top" />
</a>
</div>

スタイルをscssで書き直す

まずは現在指定しているスタイルをscssに切り出したいと思います。
加えて、フォント指定もちゃんと行います。

Saasをコンパイルするための設定

まずはSCSSがコンパイル/読み込まれるよう、ローダーのインストールと設定を行います。

node-sassとsass-loaderのインストール

node-sasssass-loaderをインストールします。

1
npm install -D node-sass sass-loader
nuxt.config.jsに設定を追加

nuxt.config.jsに含めたいSCSSのファイルを指定します。

1
2
3
css: [
'@/assets/scss/main.scss'
],

これでSCSSがコンパイルされ、自動的にstyleタグに挿入されるようになります。

Nuxt Sass Resources Loaderの使用

設定を簡単に行うようにするため、nuxt-sass-resources-loaderを用います。

nuxt-sass-resources-loaderのインストール

nuxt-sass-resources-loaderをインストールします。

1
npm install nuxt-sass-resources-loader
nuxt.config.jsに設定を追加
1
2
3
4
5
module.exports = {
modules: [
// provide path to the file with resources
['nuxt-sass-resources-loader', '@/assets/scss/main.scss']
],

scssディレクトリの作成

assetsディレクトリ配下にfontsscssという名前のディレクトリを作成します。
役割は以下のようにします。

directory outline
fonts フォントファイルを配置
scss scssファイルを配置

スタイルをscssに切り出し

scssディレクトリ下にmain.scssを作成します。
粗いですが、いったん各ファイルのスタイルをこのmain.scssに全部まとめます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// main.scss
@charset "utf-8";

html, body {
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-size: 12px;
background-color: #59bb0c;
color: #fff;
a {
text-decoration: none;
&:link, &:visited {
color: #fff;
}
}

*, *:before, *:after {
margin: 0;
}
}
:
:
以下省略

フォント指定を行うscssの作成

フォントの選択

フォントはGoogle Fontsから選びます。今回はKosugi Maruにしました。
ダウンロード後、fontsディレクトリ下に配置します。

フォントの設定

scssディレクトリ下に_fonts.scssを作成します。
mixinを使用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// _fonts.scss
@mixin font-face($name, $path, $weight: null, $style: null, $exts: ttf) {
$src: null;

$extmods: (
eot: "?",
svg: "#" + str-replace($name, " ", "_")
);

$formats: (
otf: "opentype",
ttf: "truetype"
);

@each $ext in $exts {
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
}

@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}

読み込む際はmain.scssに以下のように指定します。

1
2
3
4
5
// main.scss
@import './fonts';

@include font-face('Kosugi Maru', '~/assets/fonts/KosugiMaru-Regular', null, null, ttf);
font-family: 'Kosugi Maru', 'Segoe UI';

このほか、カラーコードなどの定数定義を行う_variales.scss、共通しているスタイルの定義を行う_partials.scssを作成しmain.scssで読み込むようにしました。

処理の見直し、機能追加

  • storeの利用 && actionでデータ取得を行うよう変更
  • async/awaitの利用
  • ページ表示時にcreated()のタイミングデータ取得を行っていた箇所をfetchで代替
  • コンポーネントの細分化(検索部分と検索結果を分離)
  • computedで値の状態管理
  • ローディング画面の追加
  • 投稿時間のフォーマット

に取り組みます。

Read More

Share

もう8月 X_X

先月は更新できなかった…

更新はなかったものの、インプットがとても多く新たな気づきがあり、実りの多い月でした。
関わってくださった全ての方に感謝です。
時間をかけて咀嚼/補強していきます。

これからの取り組み

今月から以下の3つに取り組みます。

  • 既存のアプリケーションのリファクタリング
  • 認証機能のあるWeb APIの勉強
  • このブログのSSL化

既存のアプリケーションのリファクタリング

主にnuxtを使ったアプリケーションを見直そうと思います。

認証機能のあるWeb APIの勉強

これまで自前で実装したことがなかったので勉強がてら挑戦します。
先日JWTを少しだけ触りました。不完全燃焼なので実装完了させたい。。。

このブログのSSL化

「not secure」が出るページがあることに気付きました。
なんでだろう。。。調べます。
こちらが原因でした。
リンク先の画像のURLによって出ていたのでどうかな、対応しないかもしれません。

その他

nuxtの翻訳、年内に一度全てのページの翻訳を終わらせられたらと思い
空き時間にちょこちょこ取り組んでいます。
OSSのドキュメント、新しい技術を知るのにも役立ちますね!
英語力…は向上しているといいなぁ。

そういえば先日、直接プルリクを送りマージして頂けました。
#Gitlocalizeはjson形式のファイルをサポートしていないため
緊張しました〜@w@

Share