ひよっこエンジニアの雑多な日記

とあるプログラミングスクールで働くひよっこエンジニアが覚えたことや悲しみを記すブログ

【Rails】ActiveStorageを使ってお手軽にファイルアップロードを試す

最近ぼちぼちアウトプットしようとせこせこインプットしています。

前回Rails5.2でたからActionCable試すという舐めた記事を書きましたが、今日はRails5.2で標準搭載されるようになったActiveStorageを試します!

ActiveStorageとは

ActiveStorageはRails5.2から標準で搭載されるようになったファイルアップローダーです。
AWS S3などのクラウドストレージへのアップロードも設定で手軽に実装できる代物です。

rails/activestorage at master · rails/rails · GitHub

今日はこのActiveStorageを使って簡単な画像も投稿できる機能を作ります。

導入

まずは適当にrails newでサンプルアプリプロジェクトをつくります。
(DBにpostgresql使いますがなんでもOKです)

$ rails new active_storage_sample -d postgresql

プロジェクトができたらGemfile内のmini_magickコメントアウトを外します。
画像処理のために導入するためです。

# Use ActiveStorage variant
gem 'mini_magick', '~> 4.8' # ここのコメントアウト外す

コメントアウトを外したらbundle installでインストールしておきます。
これで導入に必要なものは整いました。

ActiveStorageをインストールする

ActiveStorageを使うためにはまずインストールのコマンドを実行します。

$ rails active_storage:install

実行するとActiveStorageでアップロードファイルを管理するテーブルのmigrationファイルが生成されるのでrails db:migrateを実行しておきましょう。

生成されるテーブルは以下の二つになります。

active_storage_blobs

カラム名 保存内容
id ID
key ファイルを一意に識別するkey
filename アップロードしたファイルの名前
content_type ファイルの種類
metadata メタデータ(画像なら縦横の大きさなどが格納される)
byte_size ファイルサイズ(byte単位)
checksum チェックサム
created_at 作成日時

active_storage_attachments

カラム名 保存内容
id ID
name モデルの属性名(Userモデルのavatarとか)
record_type モデル名(Userとか)
record_id record_typeのモデルのID
blob_id active_storage_blogsのID
created_at 作成日時

ActiveStorageの設定を確認する

ファイルの格納先はconfig/storage.ymlで設定されています。

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

例えばlocalの設定を使えばプロジェクトルートにあるstorageディレクトリ配下にファイルを格納するという意味になります。

次にconfig/environments/development.rbをみてみます。

# Store uploaded files on the local file system (see config/storage.yml for options)
config.active_storage.service = :local

という記載があり格納先にconfig/storage.ymlで定義したlocalの設定を使うよという設定が書いてあります。

これで設定の確認は完了です。

ファイルアップロードする画面を作る

まずは画像アップロードできるようにUserモデルを作ります。

$ rails g model user name:string

ActiveStorageを扱う際は画像アップロード用のカラムを定義する必要はありません。
コマンドを実行したらrails db:migrateを実行します。

Userモデルができたら、ActiveStorageを使うための記述を追記しておきます。

class User < ApplicationRecord
  has_one_attached :avatar # 追記
end

この追記を行うことでUserモデルにavatarという画像を扱う属性が付与されます。
has_oneがあればhas_manyもあります。
has_many_attachedを利用すれば複数画像を扱うこともできます。

詳しくはこちらで

Active Storage の概要 | Rails ガイド

ActionStorageを使うための記載はだいたい終了なので、あとはざっと画面などを作成します。

# config/routes.rb
Rails.application.routes.draw do
  root "users#index"
  resources :users, only: [:new, :create]
end
# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)

    if @user.save
      redirect_to root_url, notice: 'Add User'
    else
      render :new
    end
  end

  private

  def user_params
    params.fetch(:user, {}).permit(:name, :avatar)
  end
end
<!-- app/views/users/new.html.erb -->
<h1>Add User</h1>

<%= form_with model: @user, local: true do |form| %>
  <div>
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div>
    <%= form.label :avatar %>
    <%= form.file_field :avatar %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>
<!-- app/views/users/index.html.erb -->
<h1>Users Index</h1>
<%= link_to 'Add user', new_user_path %>

<ul>
  <% @users.each do |user| %>
    <li>
      <p><%= user.name %></p>
      <%= image_tag user.avatar %>
    </li>
  <% end %>
</ul>

ここまでやると、こんな感じになります。

  • 投稿画面 f:id:kimuraysp:20180420235321p:plain

  • 一覧画面 f:id:kimuraysp:20180420235349p:plain

という感じですごく簡単に画像アップロードが実装できてしまいます!

S3にアップロードできるようにする

S3でバケットを作る

せっかくなのでS3にアップロードできるようにしてみます。

まずはAWS S3で適当な名前のバケットを作成します。
(わかりやすくactive-storage-sampleというバケットを作りました)

f:id:kimuraysp:20180420235619p:plain

作成したらS3を操作できるIAMユーザーを作成してアクセスキーとシークレットキーを取得しておきましょう。

格納先の設定をS3に向くように変更する

config/storage.ymlの以下のコメントアウトを外します。

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: ap-northeast-1
  bucket: active-storage-sample

config/environments/development.rbで先ほどlocalとなっていることを確認した設定をamazonに変更します。

config.active_storage.service = :amazon # :localを:amazonに変更

またS3へのアップロードを行うためにaws-sdk-s3を導入します。
Gemfileに以下を追記しましょう。

gem 'aws-sdk-s3'

追記したらbundle installしておきます。

アプリケーションからS3につなぎこむ

アプリケーションからS3につなぎこむためにIAMユーザーを作成して取得したアクセスキーとシークレットキーを設定しましょう。

Rails5.2からcredentialsという機密情報を暗号化する機能が追加されています。
これを使ってアクセスキーとシークレットキーを設定します。

$ EDITOR=vim rails credentials:edit

これを実行するとエディタ(この記載だとvim)が開いてキーを設定できます。

エディタが開いたら以下のように設定を記載します。

aws:
  access_key_id: アクセスキー
  secret_access_key: シークレットキー

記載したら保存して閉じます。
するとconfig/credentials.yml.encというファイルとconfig/master.keyというファイルができています。
config/credentials.yml.encは暗号化されているので内容を見ることはできません。

暗号化のキーにはconfig/master.keyに記載されているキーが使用されています。(環境変数RAILS_MASTER_KEYが設定されていれば、これを使う)

設定を確認したい場合はrails credentials:showを実行すれば生のデータを確認することができます。

先ほどconfig/storage.ymlでコメント外したところに

Rails.application.credentials.dig(:aws, :access_key_id)

という記載がありましたが、これはcredentialsのawsaccess_key_idを取得するという記載になります。

ここまで設定できれば画像を保存した際にローカルではなくS3にファイルが格納されるようになっています。
クラウドストレージへのアップロードも少ない手順で実現できてしまうのはお手軽で素晴らしいですね。

ちなみに

config/master.keyRAILS_MASTER_KEYの取り扱い間違えて消してしまったりすると、credentialsの複合ができなくなり詰んでしまうので注意しましょう。
詰んでしまった場合はconfig/credentials.yml.encを削除してrails credentials:editで1から設定し直すと持ち直せる可能性があります(個人開発に限る。チーム開発だとハラキリしかないかもしれない)

最後に

ActiveStorage手軽で便利なのですが、バリデーションやキャッシュの機能を持ち合わせていないとどこかでみたのでアップロード時にファイルチェックが必要な要件があったりすると扱いにくいかもしれません。

ただ厳密さが求められないような状況であれば素早く実装できるので検討してみても良さそうです!

Rails5.2が出たし、このタイミングでActionCableを使う

こんにちは!Rails5.2がリリースされましたね! ということで今回はActionCableを試してみましょう。

…ActiveStorageの間違いじゃないかって?

振り返ってみると個人的にActionCable使った実装ってやったことなかったり、そもそも必要性なくて触ってなかったという方も多いのではないか(直感)ということで、このタイミングであえてActionCableに触れます!

作るもの

今回作るのは簡単なチャットアプリです!
イメージ的にはこんな感じ

f:id:kimuraysp:20180415200842g:plain

複数のブラウザを立ち上げて、一つのブラウザで投稿したらリアルタイムで別のブラウザにも反映されるようなものを作りたいと思います!

ともあれ導入

とりあえずrails newですね!

$ rails new action_cable_sample --skip-turbolinks -d postgresql

turbolinksは邪魔な子になりそうだったので退場してもらいます。
rails newが終わったらrails db:createもやって準備万端にしておきましょう。

チャットに必要になりそうなコントローラーとmodelも作っておきます。

$ rails g controller chat_rooms show
$ rails g model chat_message content:text
$ rails db:migrate

一通りコマンドを実行して役者を揃えておきます。

作ったcontrollerとviewを整えておきます。

# app/controllers/chat_rooms_controller.rb
class ChatRoomsController < ApplicationController
  def show
    @chat_messages = ChatMessage.all
  end
end
<!-- app/views/chat_rooms/show.html.erb -->
<div id="chat">
  <% @chat_messages.each do |chat_message| %>
    <p><%= chat_message.content %></p>
  <% end %>
</div>

今回は試しなのでチャットルームへはルートにアクセスしたら飛べるようにします。

Rails.application.routes.draw do
  root 'chat_rooms#show'
end

channelを作成する

ここからwebsocket通信を行うために必要になるActionCableのファイルを作成していきます。
といってもやることは簡単でコマンドを実行するだけです!

$ rails g channel chat_room speak

すると以下2つのファイルが作成されます。

# app/channels/chat_room_channel.rb
class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak
  end
end
// app/assets/javascripts/channels/chat_room_channel.js
App.chat_room = App.cable.subscriptions.create("ChatRoomChannel", {
  connected: function() {
    // Called when the subscription is ready for use on the server
  },

  disconnected: function() {
    // Called when the subscription has been terminated by the server
  },

  received: function(data) {
    // Called when there's incoming data on the websocket for this channel
  },

  speak: function() {
    return this.perform('speak');
  }
});

次にActionCable用のルーティングを準備します。

# config/routes.rb
mount ActionCable.server => '/cable'

ここまできたらActionCableを使う準備は完了です!

ひとまず動作確認

ActionCableと繋がっているかを確認します。
rails sを立ち上げてhttp://localhost:3000にアクセスします。
アクセスしたらchromeの検証ツールを開いてApp.chat_room.speak()を実行してみます。

f:id:kimuraysp:20180415203327p:plain

app/assets/javascripts/channels/chat_room_channel.jsApp.chat_roomにActionCableのオブジェクトを代入しているのでApp.chat_room.speak()が呼べるようになります!

とはいえまだコード的なものは全然書いていませんが、ActionCableへのつなぎこみはこれで完了です!

まずはリアルタイムでalertをあげてみる

手始めにApp.chat_room.speak('Hello')とコンソールで実行したら起動しているブラウザにalertをあげるようにしていきます。

まずはapp/channels/chat_room_channel.rbを以下のように修正します。
subscribedでどのchannel(今回はchat_room_channelとします)を購読するかを指定します。
speakでは購読しているチャンネルにメッセージを配信するというような記載をします。

# app/channels/chat_room_channel.rb
class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'chat_room_channel'
  end

  # 変更ないので省略

  def speak(data)
    ActionCable.server.broadcast 'chat_room_channel', message: data['message']
  end
end

変更したら次にapp/assets/javascripts/channels/chat_room.jsを以下のように修正します。

// app/assets/javascripts/channels/chat_room.js
App.chat_room = App.cable.subscriptions.create("ChatRoomChannel", {
  // 変更ないので省略

  // 購読側が受け取る内容
  received: function(data) {
    alert(data['message']);
  },

  // App.chat_room.speak(message)で配信する
  speak: function(message) {
    return this.perform('speak', { message: message });
  }
});

speakに引数を追加します。
performに追加した引数を渡すように記載します(オブジェクト形式で書く)。

receivedは購読しているチャンネルから配信があった場合にどうするかを記載します。
今回はalertをあげたいのでalert(data['message'])と記載します。
配信されてきた情報はdataオブジェクトに乗って入ってきます!
messageはActionCable.server.broadcast 'chat_room_channel', message: data['message']message: data['message']で指定されています。

ここまでやるとコンソールでApp.chat_room.speak('Hello')を実行するとalertでHelloが表示されるのが確認できます。

チャットっぽくしてみる

ここからチャット風に変えていきます!
まずはapp/views/chat_rooms/show.html.erbに投稿するための以下を末尾に追記します。

<form>
  投稿: <input type="text" />
  <input type="submit" value="投稿" onClick="postChatMessage()" />
</form>

投稿ボタンがクリックされたらpostChatMessage()という関数を発火させるようにしておきます。

postChatMessage()はこんな感じに実装しておきます。
一旦、app/assets/javascripts/application.jsの末尾にでも記載してください。

function postChatMessage() {
  event.preventDefault();
  var element = document.querySelector('input[type="text"]');
  App.chat_room.speak(element.value);
  element.value = '';
}

投稿ボタンが押されたら今までコンソールでチクチク実行していたApp.chat_room.speakを実行するようにしています。

channelのspeakにDBに登録する処理を追記する。
単純にcreate処理を追記するだけです!

# app/channels/chat_room_channel.rb
def speak(data)
  chat_message = ChatMessage.create!(content: data['message']) # 追記
  ActionCable.server.broadcast 'chat_room_channel', message: chat_message.content
end

それができたら、チャットが投稿されたら画面に反映されるようreceivedにDOMを操作する処理を書いておきます。
alertを消して以下の記述に変更します。

// app/assets/javascripts/channels/chat_room.js
received: function(data) {
  var chat = document.getElementById('chat');
  var newMessage = document.createElement('p');
  newMessage.innerText = data['message'];
  chat.appendChild(newMessage);
},

配信を受け取ったらid="chat"のDOM内に投稿内容を記載したpタグを追加するようにしています!

こうすることで冒頭に見せたチャットっぽいものが動くようになります!

さいごに

ActionCableなんだかんだ触ったことがなかったので新鮮でした!
ActionCableはRailsだけでなくJSも絡んでくるので割と混乱しやすい機能なのかなあとも感じたりします…

次はActiveStorageにでも触れよう

【Vue】Vue.Draggableを使ってサクッとTrelloっぽいものを作る

お久しぶりです。超久しぶりです。
ブログ書くのめっちゃさぼっていました…

久々にちょっと時間があったのと、お勉強で触ったVue.Draggableがとってもお手軽便利だったので紹介します!

Vue.Draggableとは

Vue.Draggableはドラッグ&ドロップでリストを並び替えすることをお手軽に実装できるライブラリです!
Sortable.jsをVueコンポーネントで扱えるようにしたライブラリのようです。

github.com

これを使うことでサクッと並び替えのできるリストが実装できます!

導入

まずはVueプロジェクトを作ります。
vue-cliを使ってサクッと作ります。
プロジェクトの名前は任意で問題ありません。(今回はvuedraggable-sandboxとします)

$ vue create vuedraggable-sandbox

プロジェクトができたらVue.Draggableを導入します。
(今回はyarnを使用します)

$ yarn add vuedraggable

とりあえずサクッと試したいのでsrc/App.vueにVue.Draggableをimportしてリストを作ってしまいます。
使用しないのでHelloworld系のものは消してます。

// src/App.vue
<template>
  <div id="app">
    <draggable element="ul">
      <li v-for="task in tasks">{{ task }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'app',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        'task1',
        'task2',
        'task3',
        'task4',
      ]
    }
  }
}
</script>

importしたvuedraggableはcomponentsに配置します。
また、リストのデータとしてdataにtasksという配列を設定しておきます。

templateの部分で記載している

<draggable element="ul">
  <li v-for="task in tasks">{{ task }}</li>
</draggable>

の部分がVue.Draggableを使用している箇所です。
draggableタグで指定しているelementはdraggableの部分をなんのタグにするかを指定しています.(デフォルトはdiv)
draggableで囲って並び替えのしたい要素をv-forで出力するだけで並び替えの仕組みは実装されます。

f:id:kimuraysp:20180408142405g:plain

わかりやすくするために少しCSSを調整しています。
たったこれだけでドラッグ&ドロップで並び替えできるリストが作れます。

Trelloに近づける

これだけだとまだTrelloっぽさからは少し遠いですね。
なので列を増やして、縦の移動だけではなく横の移動もできるようにします。

列を表現するためにtasksを二次元配列にします。

data() {
  return {
    tasks: [
      ['task1-1', 'task1-2', 'task1-3', 'task1-4'],
      ['task2-1', 'task2-2', 'task2-3', 'task2-4'],
      ['task3-1', 'task3-2', 'task3-3', 'task3-4']
    ]
  }
}

またdraggableの部分を以下のように修正します。

<draggable :options="{ group: 'tasks' }" element="ul" v-for="list in tasks">
    <li v-for="item in list">{{ item }}</li>
 </draggable>

optionsでgroupにtasksを設定することで、tasksの中にある配列間での要素移動ができるようになります。
またdraggableのところでtasksをv-forで回すようにします。

これだけで列間での移動もできるようになります。

f:id:kimuraysp:20180408142424g:plain

実際にTrelloっぽいものを作るとなるとAPI連携があったり、タスクの追加ができたりという機能も必要ですが並び替えについてはたったこれだけでできるようになってしまいます!
世の中末恐ろしいです…

今回のブログを書くのに使用したサンプルは以下になります!

github.com

さいごに

世の中便利なものがいっぱいです
どう道具を使うかを考えることがとりあえずものを作る上では重要なのかもしれません

【副業】会社勤めだけどはじめての確定申告に行ってきた

お久しぶりのブログになります。。。笑
ほんとだったら技術ブログをかけって話なんですが、今日は生まれて初めて確定申告に行ってきたので書いていきます

気持ち

このエントリーを書こうと思ったのは、初めて確定申告に行ってきたというのもありますが、会社員とかで確定申告に行ったことがない人って割とこのイベントにハードルを感じているのではないかなあと思っているので割と簡単にできちゃうよってのを知って欲しさがあったためです!

注意

とはいえ、簡単にできちゃうのはちょっとした副業とか仮想通貨でちょっと儲かちゃったって人限定のお話かもしれません。。。
フリーランスの人や副業が本業上回る勢いで稼ぎでているとかの人だとえらい大変なイベントなのかなあと思います。(収支の記録を辿るのが辛そうなイメージ)

自分の状況

去年の自分の状況として

  • 仮想通貨でそれなりの額で利確をした
  • 知人からちょっと仕事を引き受けて副業的に取り組んだ

ということがあり見事に副収入が20万円を超えてしまい、晴れて確定申告の対象に。。。

※ 会社勤めの場合、副収入が20万円になると確定申告の対象になってしまいます。

詳しくは

https://www.freee.co.jp/kb/kb-kakuteishinkoku/necessary-case/

確定申告に当たって準備するもの

必要な書類

  • 源泉徴収票
    • 会社からもらったやつ
  • マイナンバー通知カード
    • 掘り起こしてください
  • 運転免許証
    • 身分証明できるものであれば運転免許証でなくても可

※ 通知カードと運転免許証はマイナンバーカードがあればそれで代用できる

確定申告書を作るのにあると便利なもの

  • PC
    • あとで紹介する会計サービスをつかうため
  • プリンター、コピー機

確定申告のやり方

確定申告書類の作成はfreeeを使うとめっちゃ簡単でした!

www.freee.co.jp

月額980円がかかってしまうのですが、手軽に確定申告書類ができてしまうので払う価値は十分にあります。
詳しい操作はfreeeの指示に従っていけば大体完了しちゃいます!

会計freeeで行う確定申告の流れ – freee ヘルプセンター

僕の場合は副業の収入を記録する必要があったため収支の欄に雑収入として収入を入力しまくりました。
この収入の額については銀行通帳見ながら副業の収入の部分を手動で入力していきました。(自分の記憶力が試されます)

仮想通貨分の申告

今年の確定申告で結構肝になるのがこの部分の申告だと思います。
僕は以下のサービスを使って損益の計算を行いました。

www.cryptact.com

幸運にも某国内仮想通貨取引所しか使っていなかったため、このサービスに従って必要なデータをアップロードしただけで損益計算が終了しました。

ここで出てきた損益をfreeeの仮想通貨所得を入力する欄にコピペするだけでした。

仕上げ

あとはfreeeで確定申告書を作り切ってPDFとして出力するだけでした。

便利サービスを使うことで確定申告の知識が1ミリもない状態でも確定申告書類を作成することができます。
雑所得だと書類添付の義務はないみたいなので作成した確定申告書と必要書類だけ持って堂々と税務署に乗り込めばすんなり確定申告は終わってしまいます。

個人的な感想ですが、確定申告ってもっと仰々しいものだと思っていたのですが、結構あっさり終わった印象でした。

確定申告の流れまとめ

  • 必要書類を用意します
  • freeeを使って確定申告書を作ります
    • 仮想通貨の収入がある人はcryptactなど使って仮想通貨の損益計算を行って、計算結果をfreeeに記載
  • 作成した確定申告書を印刷します
    • 押印とマイナンバーの記載が必要な箇所があるのでそこは手書きで埋める
  • 税務署にいきます
  • 提出します
  • 優勝

といった流れになります。

最後に

注意して欲しいのですが、僕は税に関する知識などかなり薄いのでこの方法が正しい方法なのかは定かではありません。。。
実際に確定申告を行う際は自己責任でお願いいたします(ごめんなさい)

ただ確定申告って思いの外、あっさりしたイベントだよってのを確定申告をやってこなかった会社員の方などに知って欲しいという思いでこのエントリーを書きました。

確定申告が怖くて副業するのを踏みとどまったりしている人はもったいないのでガンガン副業しちゃった方がいいと思います!
あとちょっとだけ稼ぎが出てしまって確定申告の対象にはなってしまった人は少額なら大丈夫だろーと思わずにきちんと納税した方が良いと思います。

納税は国民の義務というのもありますが、このいっときのめんどくささに負けてやるべきことやらずに後から脱税が発覚して罰則で遅延料払わせられたりするのは馬鹿らしいと思うので。。。

とりあえず今回の確定申告で、収支の記録(領収書など)をこまめにつけておくのが非常に重要なんだろうなーと感じました。
もしかしたらフリーランスに挑戦したりすることがあるかもしれないので、いい教訓になりそうです。

確定申告期間は残り2週間です!!
バシッとめんどいことを終わらせて清々しい気持ちで来年度を迎えましょう

Facebook認証をlocalhostで試すときに見落としがちなこと

ちょっと間が空きましたが、メモっておきたいことがあったのでブログ書きます

概要

Facebook認証を実装してlocalhostで試そうとしましたが微妙にハマってしまいました。

developerサイトで有効なOAuthリダイレクトURIhttp://localhost:3000を設定して意気揚々とFacebookログインボタンを押すと

f:id:kimuraysp:20180128224027p:plain

上記のような残念な画面が。。。
ネットの海を漂って見ましたが軒並み有効なOAuthリダイレクトURIを設定すればいけるっす〜みたいな情報しかなくて微妙な気持ちに

とりあえず適当に設定を触りながら試して見たところ、以下の設定をいいえに設定するとlocalhostでも問題なくFacebookログインができるようになる模様

f:id:kimuraysp:20180128224238p:plain

localhostfacebook認証できないときは試してみるといいかもしれません(多分デフォルトだとはいになってる)

最後に

一週間に一記事チャレンジ2週目で終わってしまった。。。
週一執筆難し過ぎワロタ。。。
とりあえずモンハンやろ。。。

【Vue.js】vue-routerとmathjaxを掛け合わせてみたら数式が変換されていなかった話

携帯にいつのまにか書いた2018年の目標に週1でブログを更新するという項目があったため今週も書きました(使命感)
最近技術記事書いてなかったし、ちょうど苦しめられたことがあったので備忘録をば

概要

vue-routerを使ってSPAチックなWebアプリを開発していて、コンポーネント内にmathjaxで数式を変換して表示するような箇所がありましたがvue-routerでコンポーネントレンダリングした箇所が数式を変換していないという問題が発生しました。。。
普通に画面遷移で作っていたときは変換されていたので完全に見落としてました。。。

再現

vue-cliでvueプロジェクトを作成

$ vue init webpack mathjax-test

index.htmlにmathjaxのCDNを配置する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mathjax-test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 以下を追記 -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>
  </body>
</html>

ひとまず数式が表示されるか確認するためにsrc/App.vueに数式を設置してnpm run devを実行

<template>
  <div id="app">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>
$ npm run dev

いい感じに表示されます。

f:id:kimuraysp:20180113164720p:plain

vue-routerを使ってクライアントサイドルーティングを実装する。
とりあえずコンポーネントを二つ作ってみる。

src/components配下にFormula1.vueとFormula2.vueを作成します。

<!-- Formula1.vue -->
<template>
  <div id="formula1">
    $$
    \begin{eqnarray}
    \sum^n_{k=1}a_k = S_n = a_1 + a_2 + ....+a_n
    \end{eqnarray}
    $$
  </div>
</template>

<script>
</script>

Formula2は適当に数式を変えて作成してください。
コンポーネントを作成したらrouterの設定を行います。

import Vue from 'vue'
import Router from 'vue-router'
import Formula1 from '@/components/Formula1'
import Formula2 from '@/components/Formula2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/formula1',
      component: Formula1
    },
    {
      path: '/formula2',
      component: Formula2
    }
  ]
})

とりあえず/formula1/formula2というルーティングを作成して、リンクをクリックしたらそれぞれのコンポーネントを表示するようにします。
src/App.vueを以下のように書き換えます。

<template>
  <div id="app">
    <div class="links">
      <router-link to="/formula1">数式1</router-link>
      <router-link to="/formula2">数式2</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

vue-routerの書き方に沿ってリンクとコンポーネントの表示場所を作成します。
そして数式1をクリックしてみると。。。

f:id:kimuraysp:20180113164411p:plain

mathjaxが効いていない!!!/(^O^)\ナンテコッタ

普通に画面をレンダリングした時には効いていたのに、一体なんなのかと。。。

とりあえずmountedのタイミングでmathjaxを読み込むように修正

src/components/Formula1.vueのscriptsにを追記

export default {
  mounted() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  },
}

これで表示されるんとちゃいます?と数式1をクリックしたら数式が表示されました。

f:id:kimuraysp:20180113164443p:plain

mathjaxを利用しつつvue-routerを使う場合は数式が入ってくるであろうvueコンポーネントmountedのタイミングでmathjaxを読み込ませる必要があるようです。
createdのタイミングでは変換されず。。。

もしmathjaxとvue-routerを掛け合わせる時にはまっている人がいたら参考にどうぞ。。。

今回のソースコードも一応上げておきます。
https://github.com/kimuray/sandbox-vue-router-mathjax

最後に

これ実際に仕事ではめられた悲しみなんですが、仕事でやっていたときはmountedで読み込ませるだけでもダメで、createdのタイミングでも読み込ませるという二段構えをしないと数式が変換されませんでした。。。

仕事の環境はvue.js + Rails(しかも変換箇所はマークダウンで記載されている)みたいな感じだったのが何か影響していたのかなあ。。。

もしmountedにmathjax設定しても動かない場合はcreatedにもmountedと同じ記載をすれば動くかもしれないのでおためしあれ。。。

地方の人って変わりたいけど変われないジレンマを抱えてるのかも

年末年始休暇を終えて東京に帰ってきました。
今回の帰省は気づきが多い帰省になった気がします。

勉強しようと思って、帰省の荷物に入れたオライリー本を1/4も読めていないのは内緒のお話。。。
あと明日から仕事したくない。。。

帰省を振り返って

帰省の過ごし方は予定の合う友達と飯行ったり、実家のコタツでダメ人間と化していたりと割と普段の帰省と変わらずな感じでした。
ちょっと違ったのは飯行ったりした友達が結婚して家庭を持った状態になっていたりしたことですね。

あとは親が割と今後のキャリアについて悩んでいたりするタイミングだったので、50近くになってもこんなに悩むことになったりするのかと人生の難しさを感じたりもしました。

今回のブログのタイトルは帰省で友達や親と話して感じたことです。(とはいっても話したの数人なのであれだけど)
ただこの内容は今後自分が成し遂げていきたいことにつながりそうな感じがするので形として残しておこうという趣旨です。

みんな悩みを抱えてる

今回あった人たちで悩み的なものが一つもなかった人がいませんでした。
自分自身も多少は抱えてるものもあるのでなにかしら悩みがあるのは当然だと思います。

ただ今回話をしてきた人たちは、個人的に以下のような感覚を受けました。

  • 解決するための思考や行動ができていない
    • できていないというより解決するという選択肢がそもそも存在していない
  • 悩みを完全に受け入れてしまって解決するのではなくこれを気にせず受け流してしまえばいいんだというような雰囲気
  • 自分ではどうしようもできないと思い込んでいる

確かに仕事的な悩みだと、人と人のしがらみがあって思うように動けないというような制限があったり、末端だったりすると会社事情の問題には口を出しづらかったりという要因があったり、家庭的な悩みだと奥さんや子供という自分だけではない存在がでてきて自分一人の問題ではなくなったりと、外的要因で身動きが取れなくなっているという事実もあるように感じます。

個人的に言わせてもらうと、上記のような要因があったとしても、それでも思考・行動がなさすぎる感覚を持っています。
話を掘っていくと大体はどこかで諦めて行動するだけ無駄という結論に達している感じが否めませんでした。
それと同時に自分では解決は無理とさじを投げている感じもします。

私自身がこれまで自分で行動することで自分の人生や周りの環境を変えていくといったことができている感覚なので、最終的には自分がやるかやらないかが大事だと思っています。
そのため諦めの早さには少し歯がゆさを感じる部分がありました。

しかし、少し考えてみると地方ゆえの難しさがそこにはあるように思いました。

地方って思っている以上にチャンスがない

私は4年前に新卒でSEとして前職の某SI企業子会社に入社しました。
そして、勤務地が東京となり、紆余曲折を経てRailsを学習して、現在の会社にエンジニアとして転職してうまいことやってこれています。
自分で前職のキャリアのままではまずいと感じて行動した結果今の自分があります。
その経験があるので行動さえしてしまえば意外となんとかなるという感覚が自分の中に形成されました。

そのため周りにも、とりあえず動いてみたらいいと思うと結構気軽に言ってしまうのですが、地方だとそれが難しいかもしれないと考え始めています。1 (とはいえ最終的には地方の人でも自分で動かないとどうにもならないという事実もありますが。。。)

よくよく考えてみると私は「たまたま世の中的にニーズのある技術に興味があって、たまたま東京にいたから動きやすかった」という側面があるなと思いました。

東京にはいっぱい仕事があって、いっぱい面白いところがあって、いっぱい人がいます。その分だけチャンスが多いってことです。
自分が興味のある分野もITだったのでエンジニアが売り手市場の昨今は自分にあったフィールドを探すことが簡単です。

ただ地方はその辺りが全然違います。
仕事の選択肢がかなり限られる、面白いところはほとんどない(地方人の憩いの場はイオン)、人は少ない(優秀な人ほど都会の方にでていってしまう)といった具合に、東京に比べて切れるカードが少なすぎると思います。

だったら東京に出てくればいいじゃんという意見もあるかと思います。
個人的にも東京に出てくることができるのであれば、出てきちゃった方がいいと考えています。
東京に出てくるという変化を恐れず行動することで確実に自分の人生を変えることができると思います。

ただ家庭を持っている人やそもそも東京に出る資金がない人はそれが難しいと思います。
だからこそ現状の悩みの解決というより、受容してしまうという形になってしまうことが多いのかなあと感じました。

あとは情報格差ですね。
自分の周りだけかもしれませんが友達で家にPCがないというパターンが結構多いです。
情報がないということは手札を用意することもできないということだと思います。

私は職業をどうしたいか悩んでいる人には割とプログラミングの勉強をすることを勧めたりするのですが、PCがないとそもそも勉強という選択肢すらとれません。

そのため地方の人は現状を打破するための手段、選択肢を持ち合わせていない人が多いという仮説があるなと思いました。
もし情報を得る手段を知っていたら、もし東京のように色々なものがある環境に身を置けていたなら、色々と話が変わってくる部分があるかもしれません。

きっかけをまっている

帰省中に会った友達の一人に「きっかけがあればな。。。」とふと呟いたのを聞いて、たしかに地方だときっかけがなかなかないなと思いました。
かつ情報を得る能力が欠如している人だときっかけをきっかけだと考えることができなかったりすると思うんですよね。

方法は現状全く検討がついていませんが、地方に住んでいる人たちが色々な選択肢に気づいて行動できるような環境が整えば地方が元気になってくるのではないかなあと思ったりもします。

地方創生という言葉をたまに聞いたりしますが、これを成し遂げるためには地方に住む人たちがもっと柔軟に働いたり、所得が増えたりするような社会を作っていく必要があると思います。

このきっかけは本当は自分で見つけて掴み取るのは大事なのかもしれませんが、少し都市部のほうから何か働きかけていくことが必要なのだと思います。
このきっかけを提供する仕組みであったり、活動であったりを自分発でやっていきたいと感じています!

最後に

書いてみて思ったけど、この話題は扱いが難しいような気がするなあ。
結構自分の考えの押し付けにもなっちゃいそうな気がしたり。。。
とはいえこの問題は解決しないといけない課題だと思うし、個人的に解決していきたい課題に感じる。
個人的に色々な力をつけてこの課題に全力で向き合ってみれたらいいのかなとか思ったりもしてますね

明確に答えのない話だからすごく「思う」とか「感じる」とかぼやっとした語尾が多かったなあ。。。
もっと言語化できれば解決策に近づけそうな気もする

そういや最近技術記事を書いていない!!
来週とか書こう!あと今月の目標も立てよ!


  1. 東京で働いているIT会社の人とかで会社をブラックだなんだと言っている人は環境は恵まれている(会社には恵まれていないのかも)と思うので行動を起こすべきだと考えています。環境を変えるための行動をせずにあーだこーだ言うのは筋違いなんじゃないかなあとか思ったり