【解決】Twitterの検索でURLにハイフンが入っていると検索できない問題

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の19日目の記事です。

tl;dr

  • Twitterで自分のブログyoshitaku-jp.hatenablog.comを検索したら出てこなかった
  • URLにハイフンが入っているのが原因だった
  • url:"yoshitaku\-jp.hatenablog.com" で検索に出てきた!

エラー?内容

Twitterで自分のブログyoshitaku-jp.hatenablog.comを検索したら出てきませんでした。

f:id:yoshitaku_jp:20181219132628p:plain

なぜ気がついた?

自分のブログがTwitter上でシェアされたときに通知が欲しかった

tadaken3さんが下記の記事で述べていた、「自分のブログがシェアされた通知する」をやってみたかったのが始まりでした。

tadaken3.hatenablog.jp

IFTTTは使ったことあったので、Twitterで特定の文字列を検索して、Slackに通知を送るんだなーということはすぐに理解できたのですが…

他の方は通知が来ているようでしたが、自分は通知が一向に来ませんでした…

解決までの過程

yoshitakus**tという文字が隠れているので弾かれている?

ゲームのアカウントを作るときに結構弾かれるので疑っていましたが、違いました。

Twitterの検索窓で試行錯誤する

調査に協力してくれた方がTwitterの検索窓でも出力されないことから、yoshitaku-jp.hatenablog.comの文字列が原因じゃないかという話になりました。

yoshitaku-jp.hatenablog.comで検索

でない

f:id:yoshitaku_jp:20181219132628p:plain

url:"yoshitaku-jp.hatenablog.com" で検索

でない

f:id:yoshitaku_jp:20181219132650p:plain

解決策

url:"yoshitaku\-jp.hatenablog.com" で検索

出た!!!ハイフンが原因でした!ハイフンをエスケープすれば検索結果に出てきます!

f:id:yoshitaku_jp:20181219132706p:plain

余談

yoshitaku\-jp.hatenablog.comはダブルクォートで囲っていないのでダメでした。ハイフンを付けている人はurl:"hoge\-hoge"の形式でやりましょう

f:id:yoshitaku_jp:20181219133040p:plain

まとめ

  • URLにハイフンが入っているのが原因だった
  • url:"yoshitaku\-jp.hatenablog.com" で検索に出てきた!
  • 最終的にはurl:"yoshitaku\-jp.hatenablog.com" -from:@yoshitaku_jp -rt で検索している
    • -from:@yoshitaku_jpは自分の投稿を除く
    • -rtリツイート除く

シェアしてくれた人を見つけて、感謝の言葉をかけにいきましょう!!!

Isaaxフォントを使ってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の18日目の記事と、

https://qiita.com/advent-calendar/2018/isaax の18日目の記事です

tl;dr

  • Isaaxフォントを使ってみた
  • Vueでのフォントファイルの使い方がわかった
  • かっこよくてお気に入り

Isaaxフォントとは

http://isaax-font.xshell.io/

Isaax Font はアポロ計画スペースシャトル計画など20世紀後半の宇宙開発計画を意識したフリーフォントです。未知の領域を探索し開拓する人の意志とテクノロジーの力をデザインに投影しています。どなたでも自由に利用することが可能です。

以前Isaaxのアドベントカレンダーを書いているときに、Isaaxでフォントを出していることを知りました。 眺めていたらかっこいいですし、コンセプトもよかったので早速使わせてもらいます。

vueでフォントファイルを使うために

ディレクトリの構成

今回は./src/assets/fontsディレクトリにIsaaxフォントを配置します。

tree -I ".cache|dist|node_modules"
.
├── index.html
└── src
    ├── App.vue
    ├── Posts.vue
    ├── assets
    │   └── fonts
    │       ├── IsaaxOrigin-Regular.woff2
    │       └── IsaaxSans-Regular.woff2
    ├── components
    │   ├── PageFooter.vue
    │   └── PageHeader.vue
    └── index.js

.src/components/PageHeader.vueにフォントファイルを読み込む設定

scssの@font-faceで、./src/assets/fontsディレクトリに配置したIsaaxフォントを指定します。さらに、h1font-family: 'IsaaxFont';を指定することでフォントが切り替わります。

<template>
    <nav class="page_header">
      <h1>Write Blog Every Week</h1>
    </nav>
</template>

<script>
export default {
  name: 'page-header',
}
</script>
・
<style lang="scss" scoped>
@font-face {
  font-family: 'IsaaxFont';
  src: url('~src/assets/fonts/IsaaxOrigin-Regular.woff2');
}

h1{
  font-family: 'IsaaxFont';
  text-align: center;
  font-size: 64px;
}


</style>

Write-Blog-Every-Weekのサイトに使ってみて比較

フォントなので実際に見てもらいたいです。

未使用

f:id:yoshitaku_jp:20181215162345p:plain

IsaaxFont使用

f:id:yoshitaku_jp:20181215162402p:plain

かっこいいですね!気に入ってます!

まとめ

  • IsaaxFontかっこいい!
  • scssを使って、フォントファイルを読み込み使った。
  • フォントを変えるだけで見た目が凄く変わるのでこれからは注目してみようと思う!

今年のアウトプットを振り返る(趣味)

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の17日目の記事と、 Everyone Outputer Advent Calendar 17日目の記事です

adventar.org

結構真面目な記事も並んでいる中、趣味について語っていらっしゃったので、自分も今年のアウトプットを振り返る(趣味)として、この流れに乗りたいと思います。

真面目なものはこちらをご覧いただければ

yoshitaku-jp.hatenablog.com

サッカー

実際に体を動かすサッカーとして

今年は4チームに加入し大会に出る回数が増えました。交友関係も広がったのですごく良かったです。自分を磨いてもっとチームに貢献していきたいですね。

観るサッカーとして

海外はLiverpoolというチームが好きです。今シーズンはリーグで1位を走っており非常に楽しいです(2018/12/17現在)。今シーズン優勝できそうであれば、学生の時以来にイングランドへ飛び立ちたいと思います。またチャンピオンズリーグでは準優勝という悲しい結果となってしまいましたが、いつか優勝できることを願っています。

日本国内のJリーグではガンバ大阪というチームが好きで、今シーズンは2試合観戦してきました。大阪での観戦はなく、佐賀と兵庫まで応援しにいきました。有名なイニエスタフェルナンド・トーレスを見てきました。旅行も兼ねていて楽しかったです。関東の試合はもっと見に行かないといけないなと感じています。

技術として

ワールドカップのデータがGithubにあるのはご存知でしょうか?

github.com

なんかやってみたいなと思ってやれていないですが、こういうデータをもとに新しい戦術が生まれていってもっともっとサッカーは面白くなるんだろうなと考えるとワクワクします。まずはforkしている人たちのリポジトリを覗いてみようと思います。

競馬

応援として

今年は馬主デビューしました。一口馬主です。今後の人生考えたときに馬主なんてやってる余裕ないよなと思ったので、勢いで申し込んでみました。正確には2017年に出資しはじめて、2018年に馬が走ってくれました。夏に新潟まで応援しに行って、残念ながら2着でした。競馬というものを見はじめて8年、毎週末やってくるレースですが「一つ勝つことの難しさを」改めて感じました。さらには、勝つためにどれだけの人が見えないところで頑張っているのかを想像したら涙が出てきました。世の中には見えないところで頑張っている方が大勢いるんだなということが知れてよかったです。

技術として

ギャンブルと機械学習って面白いんじゃないかと思っています。 pydataに行って話も聞いてきました。

https://alphaimpact.jp/downloads/pydata20181020.pdf

競艇の「みずはのめ」もずっと追っています。

v2.mizuhanome.net

競馬は毎週レースが行われてデータが増えるので仮設と検証ができて面白いとか、自分にはない視点で面白かったです。競艇は走る数が決まっているので、走る数が変動する競馬とは違ってやりやすいなんて話も聞きました。

まとめ

自分の趣味も少し語りつつ技術と結びつけてみました。来年は自分の趣味に関連してなにかアウトプットできたらいいなと思っています。ただただプログラミングをやるのもいいですが、自分の趣味に関連して探すとまた違った面白さがあるかもしれませんよ?

OSS Gateで司会をしてきた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の16日目の記事です。

目次

tl;dr

  • OSS Gateで司会をした。
  • 今年でビギナー、サポーター、司会とすべての立場を経験できた
  • 来年はもっとOSSに貢献する

OSS Gateとは

oss-gate.github.io

OSS Gate | Doorkeeper

OSS Gate」とはOSS開発に参加していない人が参加する人に変わる「入り口」を提供する取り組みです。
OSS開発に未参加の人向けに参加方法を伝える場を継続的に提供することにより、OSS開発に参加する人を増やすことができるのではないか。
それを実現することが「OSS Gate」という取り組みの目的です。

過去の自分の参加会はこちらです

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

OSS Gate東京ワークショップ2018-12-15

oss-gate.doorkeeper.jp

というわけで、OSS Gate東京ワークショップ2018-12-15に参加してきました。 会場の提供はSIOS様です。ありがとうございます。

お菓子も提供していただきました。

広い会場

タックス

初めて司会をした

初めて勉強会で司会をしました。今回はOSS Gateで共有されているスライドがありましたので、それを利用しました。

slide.rabbit-shocker.org

tl;drにも書きましたが今年の中だけで、ビギナー、サポーターを経験していたので、進行中に自分の体験談を織り交ぜることができました。基本的には共有スライドを読むだけでいいようになっていますが、それだけでは面白くないので自分なりに体験談を交えて説明していきました。この点は他の人と差別化できてよかったかなと思います。Github上に、ビギナーで参加したときのメモも残っていたので、適宜利用することができました。今後の初司会者の方のための参考となれば幸いです。

スライドの中でいくつか直したいところもあったので、OSS Gate振り返り会でフィードバックを出してみようと思います。

f:id:yoshitaku_jp:20181216102023j:plain

今後

OSS Gateとしては、明日(17日・月曜日)に「もくもく会&ミートアップ」があります。急ではありますが、参加できる方はぜひご参加ください。

oss-gate.doorkeeper.jp

個人としては、OSSに対してそこまで絡めなかったことが反省点なので、来年は2ヶ月に1回PR出せたらいいなと思っています。

今回のワークショップの中での意見にありましたが、Githubであがっている以外のOSSにも触れていったほうがいいんじゃないかというものがありました。Github以外にもあるんだろうなということは理解していましたが、そこにたいしてどう貢献していけばいいのかというのがわからなかったので、もっと視野を広げていければと思いました。

まとめ

  • 1年間通してOSS Gateに継続参加した
  • OSSにはあまり貢献できなかったが、OSS Gateには貢献できたのでよしとする
  • 司会は楽しい
  • 1年間ありがとうございました

f:id:yoshitaku_jp:20181216102042j:plain

Macで簡単にgifを作ろう!

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の15日目の記事です。

tl;dr

  • Macで簡単に画面の録画ができる
  • gifの作成もできる
  • ブログ上でのデモ動画はこうやって作ろう!

目次

  1. 画面の録画のやり方
  2. gifの作成方法
    1. ffmpegimagemagickのインストール
    2. gifの作成
  3. まとめ

画面の録画のやり方

Mojaveからはcommand + shift + 5で画面の録画をすることができます。

  • 画面全体の収録
  • 選択部分の収録

の2つから選択することができます

f:id:yoshitaku_jp:20181215140122p:plain

余談ですが、スクリーンキャプチャを撮る方法はcommand + shift + 3またはcommand + shift + 4です。

gifの作成方法

ffmpegimagemagickのインストール

brew install ffmpeg
brew install imagemagick

gifの作成

cd //gifにしたい動画のあるディレクトリに行きます
mkdir result
ffmpeg -i tmp.mov -an -r 10 ./result/%04d.png
cd result
convert *.png -resize 40% output_%04d.png
convert output_*.png result.gif

参考にさせていただきました。 https://qiita.com/kosuke0820/items/ebeb0c59b603c7224eac

注意

これはエンジニア向けに書いているので、アップロード先にはてなブログを想定しています。はてなブログは1ファイル10MBまでしか写真を投稿できないので、長い動画は短くしたり画質を落とす必要があります。(20181215現在)

自分は長めの動画を作ってしまい、何故アップロード出来ないか必死に原因究明していました…

まとめ

スクリーンキャプチャを何枚も撮って貼り付けるのは冗長的になることも多いし、デモ動画は実際に動いているところを貼り付けて見てもらうほうが早いと思います。

Firebase RealtimeDatabaseで実際に動いているところを見せたいときに活用しました。

f:id:yoshitaku_jp:20181213173434g:plain

Firebase RealtimeDatabaseを触ってみた

f:id:yoshitaku_jp:20181128144942p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の14日目の記事です。

tl;dr

  • Firebase RealtimeDatabaseを触ってみた
  • データの挿入と削除をやってみた

準備

  • ディレクトリの構成
  • Todo.vueのソース
  • router/index.jsのソース

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Todo.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

yoshitaku$ tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

Todo.vueのソースコード

<template>
    <div class="todo">
        <h1>タスクの一覧</h1>
        <div>
            <input type="text" v-model="newTodoName">
            <button type="submit" v-on:click="createTodo()">タスクの作成</button>
        </div>
        <ul v-for="(todo, key) in todos" :key="todo.id" >
            <li>
              <input class="toggle" type="checkbox" v-model="todo.isComplete">{{ todo.name }}
              <button type="submit" v-on:click="deleteTodo(key)">タスクの削除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Todo',
  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },
  data () {
    return {
      database: null,
      todoRef: null,
      newTodoName: '',
      showTodoType: 'all',
      todos: []
    }
  },
  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }
}

</script>

<style scoped>
ul {
  list-style: none;
}
</style>

Firebase RealtimeDatabaseとの接続

個別に見ていきます。createdでインスタンスを作成したときに、データベースへ接続し保存されているデータを取得してきます。 this.todoRef = this.database.ref('todos')にFirebase Consoleで定義した名前を設定します。(Firebase RealtimeDatabaseの設定の項で再度説明)

  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },

Todoの作成と削除

methodsにcreateTododeleteTodoを設定しています。 createTodoは画面上のテキストボックスnewTodoNameに入力された値を引数に、todoRefにpushしています。終わったら、テキストボックスnewTodoNameを空欄でクリアしています。deleteTodoはkeyを引数にremoveしています。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

router/index.jsのソース

これは、Todo.vueとURLを紐づけています

import Vue from 'vue'
import Router from 'vue-router'
import Todo from '@/components/Todo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
})

Firebase RealtimeDatabaseの設定

データベースのルールタブを開きます。画像内のtodos".read": "true"".write": "true"と追加します。

todosの名前は好きな名称で大丈夫ですが「Firebase RealtimeDatabaseとの接続」で指摘したように、接続の際に指定するのでそこだけは一致させるようにしてください。

f:id:yoshitaku_jp:20181213150811p:plain

デモ

デモ1

f:id:yoshitaku_jp:20181213173434g:plain

デモ2

f:id:yoshitaku_jp:20181213173928g:plain

まとめ

  • リアルタイムで変化していくのをみるのは業務上ないので新鮮だった。
  • 今後のアプリ作成に生かしていきたい

他のFirebase系

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

【解決】npm run devでwebpack-dev-serverのエラー

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の13日目の記事です。

tl;dr

  • TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生
  • webpack-dev-server@3.0.0 をダウングレードして解決

エラー内容

TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生しました。

発生の状況

npm run devを実行したらエラー

上記のエラーはnpm run devの実行時に出力されました。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
    at addHooks (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:114:49)
    at new Server (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:127:5)
    at startDevServer (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
    at processOptions (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
    at internalTickCallback (internal/process/next_tick.js:77:7)
    at process._tickCallback (internal/process/next_tick.js:47:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:778:11)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

解決までの過程

TypeError: Cannot destructure property compile of 'undefined' or 'null'.で調べる

GithubのWebpackのところへissueが上がっていました。

github.com

1 - Upgrade webpack to v4, you must change the webpack.config.js file for compatibility. or
2 - Downgrade webpack-dev-server to exactly v3.0.0 as @Nufeen said.

「webpackのバージョンを4にあげてwebpack.config.jsを編集するか、3.0.0にダウングレードをしてください」と書いてありました。

解決策

webpack-dev-serverをダウングレード

今回はnpm install --save-dev webpack-dev-server@3.0.0 でダウングレードしてみます。

yoshitaku$ npm install --save-dev webpack-dev-server@3.0.0
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.

+ webpack-dev-server@3.0.0
added 26 packages from 8 contributors, removed 49 packages, updated 10 packages and audited 31156 packages in 22.405s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit fixが気になりますが、実行すると再度バージョンが上がってしまうので、一旦思いとどまります

バージョンが下がったので、npm run dev を実行してみます。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in -1970ms                                                                                                                                                                            8:32:14

 I  Your application is running here: http://localhost:8080

無事になおってwebpack-dev-serverを使うことが出来ました。

今年のアウトプットを振り返る

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の12日目の記事です。

かつ、『エンジニアの登壇を応援する会』 Advent Calendar 12日目の記事です。(https://adventar.org/calendars/2993

11日目は、どももさんでした。お疲れ様でした。

LTに初めて申し込むときの不安要素とその取り除き方 - りんごとバナナとエンジニア

さらに「よしたくブログ」の100記事目になります。とうとう3桁のりました。よく続いたなぁ。

今年のアウトプットを振り返るまえに

今年28歳になり社会人としても5年目を迎え、今までのことをザーッと振り返ってみようと思います。

就職して配属した直後ぐらいまで

大学では会計学を学びITと関わる機会はありませんでしたが、ご縁があり中小のIT企業(いわゆるSES企業)に就職しました。 配属されてからは「やさしいJava」を1つ渡され「読み終わったら一人で掲示板を作ってみて」と言われ立ち向かう日々でした。 突然インストールされたEclipseに頭を悩まし、TomcatやDB接続するためのドライバーについてわからないままネットの情報を駆使して生き延びてきました。 土日もほとんどの時間を調べ物に費やし、やっと掲示板が出来たと思ったらSQLインジェクションが考慮されてないねと言われ、「???」が生まれるなかさらに調べ続ける毎日でした。 表現としてインパクトがあるように書いていますが、自分としては「こんな事ができるのか!!!」「こういうようにやれば解決するのか!!!」と毎日楽しかったです。 さらに、情報系卒業でないことを先輩も理解してくれていたので気長に育ててくれたように感じています。

実際の案件にアサインされてから

案件にアサインされてからもSDKの使い方や、ネットワーク、仮想技術など、わからないことが多く常に調べていました。 1個調べると10個わからないことが出てくる状態で、GoogleChromeのタブは常にパンパンでした。 BtoB系の製品だとインターネットに情報が出ていないので、似たような情報を探して、自分なりに考え対応しました。

2年・3年・4年と過ごしてきて

このような感じで、就職してからはわからないことだらけな上に常に調べて対応する日々でした。 もちろん2年・3年・4年と時を過ごすうちに、自分にもわかる・理解できることが増えていきました。それと同時に、こんな気持も芽生えてきました。

自分もなにか周りに貢献したい!!!

今年のアウトプットを振り返る

今年は週1でブログを更新しました。技術のことを中心に書き続けてきました。これには2つの理由があります。

  1. 転職活動でアウトプットの実績として使う
  2. インターネットへの恩返し

転職活動でアウトプットの実績として使う

これは見出しの通りです。

  • 自分はいろいろな技術について調べる意欲
  • 習慣化させ継続する力

を見せられたらいいなと思ってやってきました。 継続してこれたのには自分ひとりの力だけではありません。 3ヶ月間ブログメンターをしていただいたkakakakakkuさんや、write-blog-every-weekのみなさんには感謝しかありません。 加えて、自分のブログにリアクションをくださった方ありがとうございます。 リアクションがあるということだけで、非常にモチベーションが上がります。 ここまで続けてきたブログが今後の転職活動で活かせたら最高だと思います。

インターネットへの恩返し

ここが一番お伝えしたいところです。 「今年のアウトプットを振り返るまえに」で、自分は周りの人に助けられ続けてきました。 それは実際に直接関わっている人や、インターネットの先にいる知らない人にもです。 直接関わっている人には感謝の言葉などをかければいいと思いますが、インターネットの先にいる知らない人にはどうしたらいいでしょうか。 自分が行き着いた先は、「自分もブログを書く」ことでした。 最近聞いた言葉では、「恩送り」という言葉がしっくりきます。

恩送り(おんおくり)とは、誰かから受けた恩を、直接その人に返すのではなく、別の人に送ること。

「誰かが書いてくれたブログの記事で自分が助かり、その恩としてブログを書く。その自分が書いたブログを見て、誰かが助かる。」 そんな循環になったら素敵だなと思っています。

どの世界でも上を見ればキリがないですが、今の自分にしかできないことがあると思います。 技術レベルが低いために自信がなかったり、マサカリが飛んでくるのが怖かったりするかもしれませんが、恐れず自信を持って書いてみてください。 世の中には優しいエンジニアがたくさんいて、あなたのことをサポートしてくれるはずです。

最後に

ダラダラと書いてきてまとまりが無くなってしまいましたが、これで終わりにしようと思います。 要は今年はブログ頑張ったって話でした。来年はLTの回数増やしたり、アウトプットのベクトルをしっかり考えて実践していきたいと思います。それは来年の目標を綴るこちらのアドベントカレンダーで書きたいと思います。

真・エンジニアの登壇を応援する会 Advent Calendar 2018 - Adventar

インターネットへの恩返し」についてはずっと思っていましたが、なかなか言語化する機会がなかったので1年が終わるタイミングでアウトプットできてよかったです。 今後も誰かの助けになればいいなと思い、ブログを書き続けていきたいと思います。

いつか自分のこの記事を読んで、ブログを書くことを決めた人に出会えたら嬉しいです。

おしまい。

CircleCIからFirebase Hostingへデプロイ

f:id:yoshitaku_jp:20181203152044p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の11日目の記事です。

CircleCIからFirebaseへデプロイ

CircleCIを回してFirebaseへデプロイをしてみたかったので調べてやってみました。

CircleCI上での設定

Environment Variables

まずはCircleCI側に、Firebaseの情報を設定していきます。 CircleCIの設定画面のEnvironment Variablesに

  • FIREBASE_PROJECT_NAME
  • FIREBASE_TOKEN

を設定します。Environment VariablesからAdd Variableをクリックすれば、各値を設定することができます。

f:id:yoshitaku_jp:20181210215307p:plain

FIREBASE_PROJECT_NAME は、今現在取り組んでいるプロジェクトの名前を設定すればOKです。

FIREBASE_TOKENfirebase login:ciコマンドをローカル環境で実行すると、ブラウザでの認証が終わったあとにコンソールるに表示されます。

一部内容を変えて、実行結果を載せておきます。

yoshitaku$ firebase login:ci

Visit this URL on any device to log in:
URLが

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

<FIREBASE_TOKENの内容>

Example: firebase deploy --token "$FIREBASE_TOKEN"

config.ymlの設定

画面上の設定が終わったら、config.ymlの設定です。下はビルドして、デプロイをしている内容です。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8

    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run:
          name: 'Build Client Code'
          command: npx webpack
      - persist_to_workspace:
          root: .
          paths:
            - .
  deploy:
    docker:
      - image: circleci/node:8
    working_directory: ~/repo
    steps:
      - attach_workspace: 
            at: .
      - run:
          name: 'Install Dependecies'
          command: npm install -save firebase-tools
      - run:
            name: 'Deploy to Hosting'
            command: npm run deploy
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build

package.jsonのscripts 部分

config.ymlで、command: npm run deployを使いました。package.jsonのscript部分では"deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""と記述しています。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",
    "build": "webpack -p",
    "deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""
  },

まとめ

  • CircleCIからFirebaseへデプロイができた
  • CicleCI上でfirebase-toolsをインストールする際に、躓いた
    • グローバルにはインストールできない
    • -saveをつけた
  • builddeployでのattach_workspaceの受け渡しも学べた

#ゆうかねラジオ にゲスト出演してきた

f:id:yoshitaku_jp:20181210001428p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の10日目の記事です。

anchor.fm

このラジオはパーソナリティの悠とKANEがゲストを招待し、様々なテーマについて話をしながら新しい価値観を開拓するラジオです。 人材のお仕事に携わる僕たち二人が「人」にフォーカスを当てていきます。 また、僕たちはIT業界で働いていますが、IT業界の方々に限らず様々な人と様々なテーマについて話をしていきます。

先日の秋の夜長の自由研究LT大会 でLTしているところを、悠さんに目をつけられ見ていただき、今回呼ばれました。ありがたいです。嬉しい。

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

まだ公開されていないのでネタバレは避けますが、LTの話とか趣味の話で盛り上がりました。 Podcastの収録は初めてで非常に緊張しましたが、オフラインで顔が見えるところでやったので本当に雑談な感じでやれてよかったです!台本が用意されていないので事前回答が用意できず、その場でどう答えようか考えなければならなかったので瞬発力が要求されるなと思いました。猛スピードで落ちてくるぷよぷよを見つつ、下の土台では連鎖を考えなければいけない感じです。まぁある意味で言えば、瞬発的に答えられないってことは、自分の中でしっかり考えがまとまっていないんだなってことですね。これからも精進したいと思います。

Podcast出演はいい経験でした。ありがとうございました。公開されたらまたブログ書きます。