リモートワークしました。リモートワークし過ぎたかもしれません。

この記事は、Supershipグループ Advent Calendar 2021の3日目の記事になります。

概要

コロナの影響で突然リモートワークとなり、家には机はありましたが会社ほどの環境はなく右往左往していました。
私と同じ様な境遇の方も結構いたのかとおもいます。
そこで私のリモートワークを支えた技術（ガジェット）を紹介したいと思います。
この記事が皆様のリモートワークの助けになれば幸いです。

リモート当初のデスク周り

まず最初に初期リモートワーク環境がこちらになります。

とりあえず、外部モニターを購入してノートパソコンの小さな画面から解放されました。

現在のデスク周り

そしてこちらが、現在のデスク

概ね満足しているが、
おしゃれなデスク紹介などをYoutubeでみるとやっぱりシンプルな構成がいいのではないかと悩む毎日

リモートワークを支える 技術（ガジェット）

ドッキングステーション

Macはスタイリッシュで使い勝手もよく大変いいのですが、
ポートが少ないないことが欠点としてあります。。
その拡張性を補っているのがこちらのドッキングステーションと呼ばれるものです。

圧倒的に便利
当初はポータブルタイプを使っていましたがステーションタイプに変更したことにより
さらに拡張性がましました。

ノートパソコンスタンド

現在はクラムシェルモードで運用しています。
ダイソーとかでブックスタンドやまな板おきのハックが紹介されていましたが、
普通に専用のノートパソコンスタンドを使用しています。

左が私物Mac
右が会社Mac

サイドテーブル

ランチやちょっとしたメモをしたいときはこのサイドテーブルを利用しています。
単純にスペースが広がったのはいいのですが、圧倒的に場所をとり少し邪魔なのでレイアウト変更を検討中です。

サイドテーブルは無印良品の折り畳み机です。

HDMIセレクター

リモートワークも長くなり、私物のパソコンとかとの切り替えを楽にできないかなぁと調べた結果
HDMIセレクターにたどり着きました。
モニターの切り替えがすごい楽になりました。

1台目 2台目(モニターが増えたため買い増しました)

1 業務Mac
2 私物Windows
3 Nintendo Switch

ガイア、オルテガ、マッシュ

こちらが、現在の画面構成です。
メインモニターを4kにしてサブは2kを二枚配置しています。

モニターライトバー

モニターを増やした結果手元が暗くなったので購入した手元を照らしてくれるライトです。

モニターの上部に挟む様に設置し手元を満遍なく照らしてくれます。
ただ、Webカムの置き場所が高くなるのが難点

色温度も選べるのでいい感じです。

女優ライト

Web会議はライトをたいて肌艶をだすといいぞ系のブログを見て購入しましたが
思った以上に眩しくて目が耐えられませんでした。。。
現在はポールにつけて上から照らす様に変更しました。
が、現在はほとんど使っていません。。

アロマ

チームメンバーに教えてもらって早速私も導入したアロマストーン
昼食後や夕方などに使うと気分の切り替えが出来る気がする。
おしゃれになった気がします。
欠点はアロマオイルがとても高価で長続きするか心配です。

会議用マイク

こちらはリモートワークのマナーとして購入しました。
ゲーミングヘッドセットなども検討しましたが長時間つけてても苦にならないこちらのタイプにしました。

本当に音質はマナーだと日々感じています。

まとめ

  • 正直3つも画面は入らない
  • ドッキングステーション、HDMIセレクターは至高
  • ヘッドセット（音質）はいろんな気遣い
  • 女優ライトはいらない
  • アロマはいいぞ

以上が現在の私のリモートワークを支える技術（ガジェット）となります。
こっちを買ったら、こっちが必要になってなど沼感がありますが、、
今は概ね満足しています。
まだまだ、コロナが続きそうなのでこの先も技術（ガジェット）探究が続きそうです。

最後に宣伝

Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
Supership株式会社 採用サイト
是非ともよろしくお願いします。

他にも、Super Storiesというオープン社内報やっていますので興味ある方は覗いて見いてください！

Emberで他のApiサーバを使うとき

概要

ローカルで開発してデータだけApiサーバから取得したいとき、
server/配下をどうにかすると便利な話。

DSのRESTAdapterにHostを設定しても良いのだが、
開発だけ向き先を別ドメインに変えたい時などにしたい場合はhttp-proxyを使用する。

http-proxy

作成

proxyファイルを作成

ember g http-proxy <Local Path> <Remote URL>

doc

作成の際にserver/index.jsの上書きを聞かれるので問題ない場合はy、
すでに記述がある場合は上書きしないように気をつける。
上書きをしない場合はserver/index.jsで”proxies”が読み込まれる用にする。

1
2
3
4
5
6
7
8
9
10
module.exports = function(app) {
  var globSync   = require('glob').sync;
  var proxies    = globSync('./proxies/**/*.js', { cwd: __dirname }).map(require);

  // Log proxy requests
  var morgan  = require('morgan');
  app.use(morgan('dev'));

  proxies.forEach(function(route) { route(app); });
};

api配下の全てを指定するとき

例えばhttp://your-domain/のapi/*を利用したい場合などは

proxyファイル作成

ember g http-proxy api /api

上記のコマンドでapiのproxyファイルが作成される

server/proxies/api.jsファイル修正

作成したserver/proxies/api.jsを修正

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
var proxyPath = '/api';

module.exports = function(app) {
  // For options, see:
  // https://github.com/nodejitsu/node-http-proxy
  // 追記
  var serverUrl = 'http://hogeproxy:80';

  options = {
    target: serverUrl,
    changeOrigin: false
  }

  // var proxy= require('http-proxy').createProxyServer({});
  var proxy = require('http-proxy').createProxyServer(options);

  proxy.on('error', function(err, req) {
    console.error(err, req);
  });

  app.use(proxyPath, function(req, res, next){
    // include root path in proxied request
    // リクエストパスをサーバUrlとローカルパス、リクエストパスに書き換え
    req.url = serverUrl + proxyPath + req.url;
    // proxy.web(req, res, { target: '/api' });
    proxy.web(req, res);
  });
};

それでもmockを利用したい場合などは設定値にする

server/index.jsを変更し、起動時environmentに値を指定する

ember sever 起動時 ember server --environment=offline

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
module.exports = function(app, options) {
  var globSync = require('glob').sync;
  var mocks, proxies;

  if (options.environment === 'offline') {
    mocks = globSync('./mocks/**/*.js', {
      cwd: __dirname
    }).map(require);
  } else {
    proxies = globSync('./proxies/**/*.js', {
      cwd: __dirname
    }).map(require);
  }

  // Log proxy requests
  var morgan = require('morgan');
  app.use(morgan('dev'));

  if (mocks) {
    mocks.forEach(function(route) {
      route(app);
    });
  }

  if (proxies) {
    proxies.forEach(function(route) {
      route(app);
    });
  }
};

参考

※注 proxyファイルの書き方が、何か違うかもしれない。。

追記

上記の用に設定しなくてもserver/index.jsでmockを読み込まない用にして、
サーバ起動さの際にproxyを指定してあげれば良い。ember sever --proxy 'http://your-domain/'

参考

いちいちServerに設定するのが面倒な場合は~/.ember-cliに記述もできる

1
2
3
4
5
{
  "liveReload" : true,
  "environment" : "server",
  "proxy" : "http://your-domain"
}

doc

ブログをHexoに移行しました

WordpressからHexoに移行した話

理由

  • 多機能だが全然使いこなせない
  • gitで全てを管理できない

上記が主な理由なのだが、何を隠そう元々４エントリーしかなかったので
心機一転環境を変えてモチベーションを上げようというのが狙い。。

移行先の選定

下記のサイトを参考に選定しました

最終的にJekyllとHexoで迷い、
Node.jsの勉強になるかと思い「Hexo」を選びました。

セットアップ

公式サイトを参考にインストール(node,npmはインストールは省き)

Hexo インストール

1
2
3
4
$ npm install hexo-cli -g
$ hexo init weblog
$ cd weblog
$ hexo server

Hello Worldの記事が表示されます
すごい簡単

GitHub Pages

サーバはGitHubPagesを利用しようと思ったので、
GitHubにレポジトリを用意

1
2
3
4
5
6
$ cd weblog
$ git init
$ git remote add origin git@github.com:tetuo41/weblog.git
$ git add .
$ git commit -m "first commit"
$ git push origin master

今回は何も考えずmasterブランチで管理しようと思う

Wordpressの記事を移行

Wordpressから、記事のxmlをエクスポートしHexoに取り込む
取り込む際には「hexo-migrator-wordpress」プラグインを利用

1
2
3
$ cd weblog
$ npm install hexo-migrator-wordpress --save
$ hexo migrate wordpress <source>

取り込むとsource/_post/配下に記事が作成される
画像などは修正する必要があるので各々修正

私は画像はpost_asset_folderを利用せず、<img>タグで運用することにしました。
post_asset_folder: trueにすると記事ごとにフォルダが作成されそこに画像データを入れると
記事内でタグで便利になるっぽいですが、私はそんなに画像を使わないだろうと判断し
source/img/フォルダを作成し、そこを参照するように変更

Deploy

準備ができたので、Deploy作業設定ファイル_config.ymlを色々変更

サイトの基本情報系

1
2
3
4
5
6
7
# Site
title: Stay Rad
subtitle:
description:
author: Hiroki Hatsushika
language: ja
timezone: Asia/Tokyo

テーマ（light）

1
theme: light

Deployment

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:tetuo41/weblog.git
  branch: gh-pages
  message: hexo deploy

私はGitHub Pagesを利用しようと思うので
別途https://github.com/hexojs/hexo-deployer-gitプラグインを入れとく

設定変更が終わったらいよいよDeploy

1
$ hexo d -g

GitHub Pageが表示される

私は独自のドメインを利用したのでCNAMEを設置して完了

感想

非常にメンテナンスしやすくなった。
MySQLサーバも必要ないし、GitHub Pageも利用できるしGitで管理もできるようになった、
画像の運用に関しては色々検討したいが、取り敢えずPluginを漁ってみようと思う。
ゆくゆくはPluginも作りたいｗ

HexoにWordPressの記事をマイグレートする
hexo-セットアップメモ
Hexo でブログをつくるまで

FireBase試し (EmberFire)

Google i/oでFirebaseが気になったので試しにどんなものかさわってみた
https://events.google.com/io2016/

■ 環境

node v4.4.4
npm v2.15.1
bower v1.7.9

ember v2.5.1
ember-cli v2.5.0
emberFire v1.6.6

EmberFireのTutorialを参考に試してみる

https://www.firebase.com/docs/web/libraries/ember/

Guide

https://www.firebase.com/docs/web/libraries/ember/guide.html

■ 準備

FireBase ConsoleでApp作成

■ 作成

Ember App 作成

ember-cliを利用してAppを作成

1
$ ember new emberFire-study

emberFireインストール

こちらもember-cliを使用してemberFireをインストール

1
$ ember install emberfire

インストールすると「bower.json」と「app/adapters/application.js」に
emberFireが追記されていることがわかる

emberFire設定

  • 「config/environment.js」内の先ほど作成したfirebaseのURLを設定する
1
firebase:'https://YOUR-FIREBASE-APP.firebaseio.com/'

データ作成用にモデル作成

ember-cliでモデルを作成

1
$ ember generate model post title:string body:string timestamp:number

app/models/post.js

1
2
3
4
5
export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  timestamp: DS.attr('number')
});

データ作成用にテンプレート作成

1
$ ember generate template posts

データ投入処理追加

  • template
1
2
3
4
5
6
7
8
9
10
11
12
<h2>New Post</h2>
<ul class="post-publish">
  <li>
    {{input value=title placeholder="Title"}}
  </li>
  <li>
    {{textarea value=body placeholder="Body"}}
  </li>
  <li>
    <button {{action "publishPost"}}>Publish</button>
  </li>
</ul>
  • controller
1
$ ember generate controller posts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Ember from 'ember';

// app/controllers/posts.js
export default Ember.Controller.extend({
  sortProperties: ['timestamp'],
  sortAscending: false, // sorts post by timestamp
  actions: {
    publishPost: function() {
      var newPost = this.store.createRecord('post', {
        title: this.get('title'),
        body: this.get('body'),
        timestamp: new Date().getTime()
      });
      newPost.save();
    }
  }
});

サーバを立ち上げ動作確認

1
$ ember s

http://localhost:4200/

http://localhost:4200/posts

「Publis」ボタンを押してblogを投稿

FireBase Console画面にて確認

無事登録されていることを確認

データ一覧を参照する処理を追記

  • route
1
$ ember generate route posts

途中でTemplesを上書きするか聞いてくるので取り敢えず「No」！

1
2
3
4
5
export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('post');
  }
});

先ほどのtemplesに下記を追記

1
2
3
4
5
6
<section>
{{#each model as |post|}}
  <div>{{post.title}}</div>
  <div>{{post.body}}</div>
{{/each}}
</section>

サーバを立ち上げ動作確認

1
$ ember s

http://localhost:4200/posts

上記の通り登録したものが表示されればOK。
他にもコメントなどのリレーションのコードもあるが割愛ｗ

GitHub

github

JAWSDAYS 2015でみたSession

memo

安達 輝雄

blog

土居 正行
https://speakerdeck.com/mdoi/kai-fa-suruyouniyun-yong-suruinhura-jaws-days-2015?slide=1

西谷 圭介

照井 将士

大崎 充博

cron Memo

$ vi /var/log/cron

passwd

pwconv

pwunconv

$ cat /etc/shadow

$service crond restart

Passenger Memo

必要なモノをインストール

1
$ yum install httpd httpd-devel apr-devel apr-util-devel curl-devel

Passengerをインストール

1
$ gem install passenger

apache moduleインストール

1
$ passenger-install-apache2-module

設定ファイル追加

1
2
3
LoadModule passenger_module ～/mod_passenger.so
PassengerRoot ～/passenger-x.y.z
PassengerDefaultRuby ～/ruby

httpd.conf 変更追加

1
$ vi /etc/httpd/conf.d/passenger.conf

Thanks for the link.
http://babiy3104.hateblo.jp/entry/2013/08/30/193034
http://morizyun.github.io/blog/passenger-install-apache-ruby-rails/
http://petitviolet.hatenablog.com/entry/20130804/1375604128

MIME type Memo

.doc application/msword
.xls application/vnd.ms-excel
.ppt application/vnd.ms-powerpoint

.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation

vagrant Memo

64bitだったver

$ vagrant box add centos64_64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box

$ init centos64_64

32bitver

$ vagrant box add centos64_32 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-i386-v20130427.box

Vargrant認識 Vargrantファイル作成

$ vagrant init centos64_32

起動

$ vagrant up

仮想サーバー接続

$ vagrant ssh

停止

$ vagrant halt

削除

$ vagrant destroy

Thanks for the link.
http://k-holy.hatenablog.com/entry/2013/08/30/192243

tmail

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
def mail_data(mFile)
  file = File.open(mFile).read
  mail = TMail::Mail.parse(file)
  #p mail.to # 送信先
  #p mail.from # 送信元
  idx = 1 # ファイル名
  mail.parts.each do |m|
    if nil != m['content-disposition']
    m.base64_decode
    attach_fileNm = m['content-disposition']['filename']
    #File.open("#{CLIENTDATAPATH}/#{attach_fileNm}.#{ext(m)}", 'w') do |f|
    File.open("#{CLIENTDATAPATH}/#{attach_fileNm}", 'w') do |f|
      f.write m.body
    end
  end
  idx += 1
end

CTYPE_TO_EXT = {
'image/jpeg' => 'jpg',
'image/gif' => 'gif',
'image/png' => 'png',
'image/tiff' => 'tiff',
'text/plain' => 'txt',
'application/vnd.ms-excel' => 'csv'
}

def ext( mail )
  CTYPE_TO_EXT[mail.content_type] || 'txt'
end

Thanks for the link.
ここ