2021-01-12

Nuxt.jsで動的な変数を使う

備忘録

メモ

以下の方法だと何かとエラーや問題になることが多かったのでメモ 1. process.env経由ビルド時に変数になるが、ビルド時にコケると使えないまた、ビルドされたバンドルファイルにキーが含まれる

nuxt.config.jsのenv経由 1.と同様に、ビルド時にコケると使えないまた、こちらではnuxt.config.jsのファイルの設定が読める状態になる

対応
publicRuntimeConfigを使用して、実行時に値を取得して使う

2021-01-12

特定ユーザのGmailへのブックマーク

備忘録

メモ

Gmailをそのままブックマークすると
https://mail.google.com/mail/u/0/
で表示されてしまう。
この場合、ユーザはログイン順ごとに最後の数字が変わるだけなので、ブックマークを共有している場合、同じログイン順にしないと同じページに飛べない

ユーザを指定する場合は、
https://mail.google.com/mail/?authuser=user@gmail.com
にすると特定のユーザに飛ぶことができる

2020-10-19

転職一回目

新卒で入社した会社を2020/11いっぱいで退職します

タイトルがThe 退職ブログぽい感じだったので、無難に「転職一回目」をつけた

~~最終出社日10/30~~ 10/30最終出社日
思ったより退職した実感ないですが、次があるのでそこまで気にしない
11/24退職

11/20
落ち着いてきたから会社のことをすこし書こうと思う。
会社は10年くらいやってきたベンチャー企業で、安定はしており、自分が入ったくらいに増資もあったりと波に乗っている会社だった。
自分は、某就活会社のイベントを通じてインターンをして、そのまま入社までしました。
業務は、LaravelとjQueryとたまにReactでEC系のようなサービスを開発していました。
やめた理由は、単純にその業務をこの先2~3年続けて果たしてここままでいいのかわからなくなったことや、業務でフロントエンドを改修することが少なくとも1年以上あとになってしまうこと、会社の方針と自分の方針に対し反りが合わなかったこととかで、単純に自分の感情と合わなかった。音楽性の違い(言いたかっっただけ)
会社の不満とかを書き連ねるのは正直嫌なので、書きませんが、特に会社の不満が転職のきっかけになっているわけではなく、単純に自分が流れになってやってきてしまったのがあるとは思います。(ただ、会社のバリューに関しては時間が立つほどよくわからなくなっていました)(あと、USを希望してたのにJISを渡す会社は信じられません)
社会人としての基礎を学ぶ場としては、とても感謝してますし、個人として一緒に働けて感謝しきれない人やとても迷惑をかけてしまった人もいるので、好き嫌いがあるのは置いといて、繋がりがなくなることに悲しみを感じているので、転職することはこういうことなんだなと体感しました。

つらつら書いていましたが、ありがとうございました。次はがんばります。

11/30
明日[12/1]から新しい会社でフロントエンドエンジニアとして働きます。
前の会社では、ここでずっと働くのはちょっとと思う感じで始めたが、今回はここならできる限り長く頑張れそうだなって思えるので、頑張って行きます、

WithList https://www.amazon.jp/hz/wishlist/ls/9KDOHN9Q15Q1?ref_=wl_share

2020-05-07

サブスク系を見直す(2020/5)

Why

周りの人たちがサブスク云々を3月ごろに言ってたときはうんうんって思ったり、ブログを見たりしてたら、自分もいきなりの出費にビビったので自分もまとめた

サブスク一覧

Apple Music
￥980 / month
niconico
￥550 / month
dアニメ
￥440 / month
YouTube Premium
￥1,180 / month
Netflix
￥1200 / month
Adobe CC
￥3,278 / month
FC
￥2,000 / month
￥480 / month
Google
￥1,500 / month
Nintendo ￥306 / month
Amazon Prime
￥4,900 / year

月に大体1万くらい飛んでいってる... たぶん、書いていないものもあるはず

2020-01-06

IntelliJ系組み込みterminal時でfishを使用するときのエラー

(自分用のメモ)
こんな感じにが出た際
(~/.config/fish/conf.d/z.fish (line 40):から始めるやつが出る)

f:id:NISHI3:20200106182509p:plain

WebStormの場合

$ cd ~/Library/Application Support/JetBrains/Toolbox/apps/WebStorm/ch-0/192.5728.87/WebStorm.app/Contents/plugins/terminal/
(ここはいい感じにversionを変える)
$ mv fish bak.fish
$ ln -s ~/.config/fish fish

以上

参考にしたブログ!
IntelliJ 組み込みterminalでfish-shellを使う - 今日のつちや

2019-09-30

VS Codeのターミナル上のフォント修正

現在ほとんどのEditorでは、デフォルトでShellを開くことのできるターミナルを実装しています。
私は、bobthefishというfish版Powerlineを使っています。
これは、gitのステータスがいい感じになるので使っています。
ただし、Powerline系のフォントがインストールされていない場合、文字化けが発生します。
iTermなどのターミナルでは、環境設定からフォントを変更することで文字化けを解消できます。
Powerline系のフォントは[*** *** for Powerline]という名前のもので、Meslo LG M DZ for Powerlineがおすすめです!

VS Codeのターミナルでも同様にフォントを設定する必要があります。そのままだとこんな感じで出ます。 f:id:NISHI3:20190930231027p:plain

設定方法

(説明はMac版ですが、Windows版も同様に変えることができます。)

Command + ,を押すか[Command+Shift+p]でコマンドペレットを出し、"user setting"を選択するか、ツールバーで[Code→基本設定→設定]から設定を開きます。
検索欄でterminal.integrated.fontFamilyで検索します。
入力欄に使用したいフォントを入力します。
command+sで保存もしくは、自動保存されます。

以上をすることで、ターミナルのフォントが変更されて文字化けが解消します。 f:id:NISHI3:20190930231703p:plain

参考にしたサイト
https://medium.com/@hippojs.guo/vs-code-fix-fonts-in-terminal-761cc821ef41 Using zsh theme for my terminal and I'm missing a font inconsolata for powerline · Issue #15119 · microsoft/vscode · GitHub

2019-09-25

Ionic Vue事始め

Ionic Vueを触り始めてみました。
まだ何を作るか考えてませんが、自分用のメモとしてつらつら書いていきます。(頑張って続けます!)
この記事では、インストールとページ作成とモーダル作成をします。

インストール

(yarnを使う場合が多いですが、ここではnpmを使います)
まずは、Vue CLIのインストール

npm install -g @vue/cli

Vue CLIを用いてプロジェクトを作成します。

vue create ionic-vue-app

(Vue CLI UIを用いる方法もありますが、Vue CLI UIはよく知らないのでスルーします)

Ionic VueはVue-Routerを用いるので、Routerを追加します。

vue add router

これだけで、関連するソースコードがRouterを用いたものに変更されます。

あとは、@ionic/vueをインストールします

npm install @ionic/vue

自分の環境ではserve時にexport ‘ICON_PATHS’ was not found in ‘ionicons/icons’が出て、うまく動かなかったのでioniconsを追加します。
(バージョンを適宜調べて変えてください)

npm install ionicons@4.5.9-1 --save-dev

以上で、インストールは終了です

Ionic/Vue導入

インストールはしましたが、まだVueのままです。
Ionicを使えるようにするために、src/main.jsへプラグインを追加します。
(Vue.use()はVueのプラグインを使用する方法です。)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'
 
Vue.use(Ionic)
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

次に、src/views/Home.vueもionic-appを用いたものに変えます。

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

これでserveすれば、恐らく動きます。
インストールの最後で書いたioniconsがないwarningが出ている場合、もしかしたらなにも無いページが表示されるかもしれません。(私の環境ではなにも無いページが出てきて時間を浪費しました)
serveすると、デフォルトでhttp://localhost:8080/が立ち上がり、以下のIonicのようでIonic感がない画面が表示されると思います。
f:id:NISHI3:20190919011226p:plain

ページ作成

ここまでで、ルートページだけを表示できるようにしました。
次はRouterをいじって、他のページも表示できるようにします。

src/router.jsを書き換えます。
src/main.jsと同様にVue.useを用いて、VueRouterをIonic向けにカスタムされたIonicVueRouterへ変更します。

import Vue from 'vue'
import Home from './views/Home.vue'
import { IonicVueRouter } from '@ionic/vue'
 
Vue.use(IonicVueRouter)
 
export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

次に、src/App.vueも書き換えます。
ion-vue-routeは、IonicVueRouterのコンポーネント？です。

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

これで、とりあえず動くようにはなったので、遷移ボタンを追加して遷移させます。

<ion-content class="ion-padding">
  <h1>Welcome To @ionic/vue</h1>
  <img alt="Vue logo" src="../assets/logo.png">
  <ion-button @click="aboutPush()" full>Go to About Page</ion-button>
</ion-content>

methodsにページ遷移用の関数を定義します。

methods: {
    aboutPush() {
        this.$router.push('about')
  },
}

遷移後のページ(About.vue)を作成します。

<template>
  <div class="about">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>About Page</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>About Pageです</h1>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "About",
}
</script>

これで、ページ遷移もできました。
APIはこちら => ion-nav - Ionic Documentation

モーダル作成

ページ作成ができたので、これがあればアプリっぽく見える(と思っている)モーダル作成をします。
前回と同様に、モーダル作成ボタンを作り、関数を定義します。
($ionicはionicのアラートやモーダルなどのコントローラーを提供します。)

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png">
      <ion-button @click="aboutPush()" full>Go to About Page</ion-button>
      <ion-button @click="showModal()" full>Go to Modal</ion-button>
    </ion-content>
  </div>
</template>

<script>
import Modal from '../components/Modal';

export default {
  name: "home",
  methods: {
    aboutPush() {
      this.$router.push('about')
    },
    showModal: async function() {
      const modal = await this.$ionic.modalController.create({
        component: Modal,
        componentProps: {
          data: {
            content: 'New Content',
          },
          propsData: {
            title: 'New title',
            msg: Math.round(Math.random() * 100)
          }
        }
      });
      await modal.present();
    }
  }
};
</script>

モーダル(Modal.vue)を追加します。

<template>
  <div>
    <ion-header>
        <ion-toolbar>
            <ion-title>{{ title }} </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content padding>
        {{ content }}
        {{ msg }}<br>
        <ion-button @click="dissmissModal()" full>bask to Modal</ion-button>
    </ion-content>
  </div>
</template>

<script>
export default {
    name: 'Modal',
    props: {
        title: { type: String, default: 'Super Modal'},
        msg: { type: Number, default: 0},
    },
    data() {
        return {
            content: "Content"
        }
    },
    methods: {
        dissmissModal() {
            this.$ionic.modalController.dismiss();
        }
    }
}
</script>

APIはこちら => ion-modal - Ionic Documentation

Vueユーザーの人も是非

Vueの手軽さはそのままに、モバイルに特化したコンポーネントを簡単に使用することができるので、ぜひVueを使ってる人も使ってみてください!!!

(thx: 添削してくれた友人たち)

リポジトリ

github.com