//ルートにアクセスされたら/archiveにリダイレクトする
読者です 読者をやめる 読者になる 読者になる

エイリーの備忘録

開発や音楽について書いていこうと思っています。

vimの勉強会に行ってきました。

今回東京に行ったついでにvimの勉強会に行ってきました。
フリマアプリ「フリル」の開発を行っている会社Fablicがやってくれた勉強会で、Fablic.vimという勉強会です。
公式レポートがあるので個人的な感想をダラダラと書きたいと思います。

ざっくりレポート

今回この勉強会に行った動機が、東京に1泊で行くことになって、前日の予定が少し開いていたのでせっかく東京に行くのだし勉強会を探したら何かやってるはず!と思い探してみると、最近使い始めたvimの勉強会をやっていたので参加してみることにしました。

ざっくりした内容は、みんなでvimの事について語り合ったり、雑談したり、自慢のvim裁きをみんなの前で発表するというような内容でした。

自慢のvim裁き発表(飛び込み発表)

vim裁きを見ていると、みんな凄いと感じました。私はまだ.vimrcを編集して出来ることが無いか色々探っている最中なのですが、プラグインで拡張しまくってGoやRailsに対応させたvim環境を構築し、快適に作業ができているとおっしゃっていたのでびっくりしました。
正直な話、vimって言ってしまえばコンソール版のノートパットだろ?と思っていたのですが、プラグインでどこまででも出来るのですね。
これを見て、とりあえずvimでJSやPHPを快適に書けるようにしてみたいな感じましたw

雑談

みんなで適当にグループに別れて色々なことを話していました。
周りを見ていると、楽しそうにvimのことを語り合っている人たちもいれば、会社のことを話している人たちもいて本当に、vimmerの交流だなと感じました。
個人的に一番雑談で印象に残ってるのが、私に、ニートのすすめをしてくれた方がいらっしゃったのですが、話を聞いていると、一理あると納得しましたw

印象に強く残った発表(というよりプラグイン

今回色々な発表を聞き、印象に強く残った発表は2つありました。(というよりここの印象が強すぎるという感じでした。)

mario.vim

ん?vimってテキストエディタだよな・・・?
このプラグインを使うと、なんとvim上でマリオがプレイできるのです!
動作を見ていると、結構ヌルヌル動いていて、敵キャラはAIで動いているらしいです。
ちゃんとマリオがジャンプしたりブロックを壊せたり出来るのですごかったです。
GitHub - rbtnn/mario.vim: Mario on Vim

puyo.vim

mario.vimと同じ方が作っているプラグインなのですが、vim上でぷよぷよが出来ますw
ちゃんと連鎖の処理もされていて凄いクオリティでした。
ここまで来たらもう凄い以外言葉が出てこないですw
GitHub - rbtnn/puyo.vim: Puyo on Vim

全体の感想

vimすげぇぇぇぇ
ただのテキストエディタだと思ってたらゲームまで出来るんかいw
サーバを触るのに使ったら興味を持った私ですが、もう少しちゃんとvimを勉強してみたいと感じました。
とりあえず、近くの目標としましては、JSとPHPを快適に書ける環境をvimで整えるというのを目標に頑張ってみたいと思います。遠い目標としては、「は??」と言われるような変なvimスクリプトを書いてみたいですw
目指せvimmerで頑張ってみます!

リンク

公式レポートですw
in.fablic.co.jp

togetterのまとめ
togetter.com

macのアクセサリを買ってきた話

近所のソフマップで前々からほしいと思っていた物と絶対に必要になったものを買ってきました。
買ってきたのはこの2つ。
f:id:youmjww:20170521230450j:plain
USB to 有線LANアダプタとmacの画面の保護シールです。
東京に行く用事ができて、宿のネット環境を調べてみると有線LANしか無く、wifiが飛んでいないみたいで、ネット依存症の私にPCでネットをするなというのは死ねと言われているのと一緒ですのでここは買わねばと思い買ってきましたw
画面の保護シートは画面に指紋や汚れがつくと目立つのが嫌だったので、本当はノングレアにするシートがほしかったのですがそれがなく、(自称)指紋防止とパッケージに書いてあったので買ってみました。

買った物の感想

USB to Ethernet

商品名は、LUA3-U2-ATXです。
この商品を買う決め手になったのが、値段と本体の横にケーブルを収めるスペースが付いていたところです。
スピードが遅いのは気にしないですw(どうせターミナルでの作業とネットサーフィンが主な用途ですし。)
動画は画面が1枚しか無い時はあまり見ないのでほとんど問題ないかと思います。

使ってみた感想ですが、まず実際に収納スペースへ収めてみました。
f:id:youmjww:20170521231453j:plain
思っていたのと少し違うw
USBのコネクタ部分が本体に収まると思ったらケーブルしか収まらなかったですw
しかも硬いwまあ、本来の機能が満足に動けば問題なしですが、動くんかな・・・
てか、買ってからせっかくmacを使ってるならUSB toでは無くて、Thunderbolt toにすればよかった・・・USBポートが一個減るのは思ったより痛かったですw
しかし!調べてみると、
f:id:youmjww:20170521232456p:plain
思ったより高いw
二千円ぐらいなら買ったけど、ここまで来ると買えないですw
耐久度についてはしばらく使ってみて様子見ですね。

画面の保護シート

買った商品は、ELECOM Sscreen Protector for MacBook Pro 2016です。
私の持っているmacは、mac book proの2015なのですが、画面サイズは一緒なので問題なく使えたらいいと思い購入
実際に貼ってみると、静電気を纏っており少し貼りづらいと感じつつ、なんとか貼ることは出来ました。
貼ってみて、やっぱり光沢はあるけど、実際に画面を触ってみて指紋は付きづらそうだと感じました。
実際の使用感はまた様子見ですねw

あとがき

やはり家電量販店やPC用品店に行くのは楽しいですねw
要らない物まで見てついつい欲しくなってしまいますw
最近は無駄遣いしないためにアマゾンなどを見ないようにしてたのにソフマップで画面の保護シートを買ってしまうとは思っていませんでしたw
まあ、久々のショッピングですし、少しぐらいならいいかなw

reactのmeetupに参加してみた話

皆さんお久しぶりです。
ここ3日間ぐらいブログを更新出来ていなかったのですが、結構寂しくなりますねw
ほぼ毎日投稿していたのでブログを投稿できなくなると結構寂しいものです。
これからはまた頑張って毎日投稿していきたいと思います。(技術ブログを謳ってるくせに技術的に書けるネタはしばらくなさそうだけど・・・)
技術ブログって毎日更新に向いていないですねw
何を書いたらいいのかよくわからなくなってきますw
縛りをつけると書きやすいと思ったんだけどなあw

meetupに参加した話

さて、ここからが本題です。
先日梅田の株式会社ロックオンの会議室で行われていたreactのmeetupに参加してきました。
一番最初に感じたのが、会社に入るためのエレベーターがかなり綺麗だと感じましたw
f:id:youmjww:20170521220631j:plain
なんというか、シャフト感がwと感じながら会場の階に行き、入ってみると、meetupだから覚悟はしていたのですが外国の方ばっかり・・・話しかけに行くのが怖かったです・・・
実際に始まってみると、英語で全員の自己紹介から始まり、プレゼンが始まり、フリートーク
自己紹介の時はかなり緊張しましたw(てか、頭の中が真っ白w)
そしてreactのプレゼンが始まり、内容を(雰囲気で)聞いていると、重要なのは5つの要素だと話していました。
Components
JSX
Props & State
The Component API
Component Types
上記に上げた5つの要素が大切らしいです。
上からProps & Stateまでは触っていて知っていたのですが、ComponentAPIとComponent Typesは触ったことを無かったのでまた調べて記事にできたらいいなと思いましたw
正直、プレゼンの内容はわかりませんでした・・・スライドを読むのに必死で話してる英語を自分の中で解釈するのが間に合わなかったです・・・
英語わからん・・・
フリートークは、ずっと日本人と喋ってました・・・

行ってみた感想

周りのみんなを見ているとすごく楽しそうにされている方が多かったのでいいイベントだったんだろうなと感じました。

ただ、英語が怖かったですw
英語がと言うより、コミュニケーションが取れないのが怖かったです。
フリートークの時に他の人に話に行きたかったけど、私の英語力では話しかけに行くことは出来ず、話に行って会話が成り立たなかったらと考えたら怖くていけませんでした・・・
英語は話すのも勉強したいと考えmeetupに参加したのですが、英会話は私の能力ではまだまだと思い知らされましたw
ただ、英語というより言語は習うより慣れろだからもっと参加していったほうがいいのかな・・・
洋画を見て英語に耳を慣らしてみてもいいかもしれないですね。

これからの課題としては、英語に耳を慣れさせてもっと積極的に英語でコミュニケーションを取れるようになりたいです。

npm install でつまずいたのでメモ

あれ?いつも通りnpmでパッケージをインストールしようとすると404エラーが出るぞ・・・
スペルはgithubの公式からコピペしてるから間違えていないはず・・・と思い、いろいろ調べてやってみたことのメモです。

npmのバージョン確認

とりあえず、npmのバージョンが古いのかと思いバージョンを確認してみました。

npm -v

#結果
3.5.2

うーん今回使いたいパッケージはnpm4.15.2って書いてあるな。
俺、npmをインストールたのどんだけ前なんだろと思いつつnpmを更新することに。

npmのアップデート

とりあえずaptでインストールしたはずだからaptでアップデートできると思いやってみました。

$sudo apt update
$sudo apt upgrade npm
$npm -v
#結果
変わらず3.5.2

ん?aptで更新をかけたのに変わってないぞ・・・
じゃあ、npmでnpmの更新ができるみたいだから試してみよう。

$npm install -g npm

すると・・・
f:id:youmjww:20170517001548p:plain
なんでやw
npmのリポジトリは登録されているはずだろw
これはもしかしてリポジトリの登録が何かの拍子で解除されてしまったのかな?
とりあえず、リポジトリのリストを確認してみましょう。

npmレジストリの確認

$npm config get registry
#結果
null

あーレジストリがnullになってる・・・
そりゃインストール出来ないわな・・・
うん。
じゃあ登録しなおしてやってみるか

npmレジストリの登録

$npm set registry http://registry.npmjs.org/

これで登録出来たはず・・・

もう一回npmの更新を試みている

とりあえず、テストも兼ねてnpmの更新をしてみたいと思います。

$npm install -g npm

お!今度は通ったぞ!
じゃあnpmのバージョンが何になったか確認してみよう!

$npm -v

#結果
3.5.2

あれ・・・バージョンが上がってない・・・
とりあえずこれでもう一回目的のパッケージがインストールできるか試してみるかと思い試してみると、ちゃんとインストールできました。
どうやら原因はレジストリの登録が何故かnullになっていたからみたいですね・・・

あとがき

なんか途中からnpmのトラブルシューティングみたいになってましたけど、目的は達成できたので良しとしますw
まさかレジストリの登録が変わっていてnullになっているとは思いませんでしたw
でも、更新をかけてもnpmのバージョンが上がらなかったのは何故なんだろ・・・
ubuntu16.04で使えるバージョンだと今のバージョンが最新なのかな・・・
まあいいやw
目的は達成できたから今回は良しとしましょう。

ubuntuでrpmパッケージを使う

あれ?debian用のパッケージは転がってるけどubuntu用のパッケージが無い・・・
rpmでしか転がってない・・・コンバートしたら使えるんだ・・・コンバートしよう・・・

コンバート用のパッケージをインストー

$sudo update
$sudo apt install alien dpkg-dev debhelper build-essential

コンバートしてインストールする

コンバート

$sudo alien <rpmのパッケージ名>.rpm

インストー

ここはいつも通りですよね。
dpkgでサクッと行きましょう

$sudo dpkg -i<コンバートしたrpm>.deb

あとがき

正直・・・ubuntuってdebianを元にして作られているならdebianのパッケージをコンバートせずに追加したいものです・・・
linuxの事は詳しくないのでなんとも言えないですが・・・

meteorのプロジェクトをpassengerで二回目以降のデプロイ

meteorのプロジェクトの二回目以降のデプロイ方法を書かせていただきます。
初回のデプロイと二回目のデプロイは微妙にすることが違うのでご注意ください。

一回目の場合は下記記事をご参照ください。
youmjww.hatenablog.jp


この記事は、前回同様
Deploying a Meteor app on Ubuntu 16.10 (with APT) on a Linux/Unix production server with Passenger open source in Standalone mode - Passenger + Meteor deployment tutorial - Passenger Library
上記サイトを参考にして筆者が実際に構築をし、必要と思われるものを書き出しています。

前提環境

ディストリービュージョン:ubuntuまたはdebian
サーバー:passenger
Meteorのバージョンが1.4以上

デプロイ前の準備

meteorのプロジェクトをビルドしてサーバーに送信する

まず、ローカル環境でmeteorのパッケージをビルドします。

#ローカル環境
#ビルド
$meteor build --server-only ../new_package && mv ../new_package/*.tar.gz package.tar.gz

#ファイルをアップロード
$scp package.tar.gz adminuser@yourserver:~/

サーバーにログイン

$ssh myappuser@yourserver.com

デプロイ

tarの解凍

$mkdir -p /var/www/myapp/tmp
$cd /var/www/myapp/tmp
$tar xzf ~/package.tar.gz

passengerの設定ファイルをコピー

このファイルは何回も使いまわすのでどこかにバックアップを取っておいたほうがいいかも知れないですね。

$cp /var/www/myapp/bundle/Passengerfile.json /var/www/myapp/tmp/bundle/

依存関係のインストー

$cd /var/www/myapp/tmp/bundle/programs/server
$npm install --production
$npm prune --production

アプリを更新する

もしちゃんと更新できなかった時のためにバックアップを取っておきます。

$mv /var/www/myapp/bundle /var/www/myapp/bundle.old
$mv /var/www/myapp/tmp/bundle /var/www/myapp/bundle
$passenger-config restart-app /var/www/myapp/bundle

古いバージョンを削除

新しいバージョンのアプリが動いているのを確認できたら古い方は削除してください。

$rm -rf /var/www/myapp/bundle.old

あとがき

passengerでアプリをデプロイするのって結構手間ですよねw
と言っても私はapacheでデプロイなどは経験がないのでなんとも言えないですけどw
私は実際に使う時はもうめんどくさいのでこのページをまるまるスクリプトにして実行をかけていましたw
今度はどんなネタで記事を書こうかなwそろそろネタ切れ感がしてやばいですw
でも、毎日更新をしていることによってブログのモチベーションがあるのも事実だし、毎日更新は崩したくないな・・・

meteorのプロジェクトをpassengerで1回目のデプロイをする

今回はmeteorのプロジェクトの1位回目のデプロイ方法を書かせていただきます。
日本語の記事って少なすぎて泣けてきますよね・・・
エンジニアなら英語の記事ぐらい読めろって言われますが、まだ苦手です・・・

この記事は、
Deploying a Meteor app on Debian 8 (with APT) on a Linux/Unix production server with Passenger open source in Standalone mode - Passenger + Meteor deployment tutorial - Passenger Library
上記サイトを参考にして筆者が実際に構築をし、必要と思われるものを書き出しています。

passengerのインストー

まだpassenger(webサーバー)をインストールしていなければ、下記の記事を参考にpassengerをインストールしてください。
youmjww.hatenablog.jp

前提環境

ディストリービュージョン:ubuntuまたはdebian
サーバー:passenger
sudo権限が使える
Meteorのバージョンが1.4以上

デプロイ前の準備

meteorをビルドしてサーバーに送信する

まず、ローカル環境でmeteorのパッケージをビルドします。

#ローカル環境
#ビルド
$meteor build --server-only ../new_package && mv ../new_package/*.tar.gz package.tar.gz

#ファイルをアップロード
$scp package.tar.gz adminuser@yourserver:~/

appユーザの作成

ここからは特に指示がない限りサーバー上で作業を行ってください。

#ローカル
#サーバーに接続
$ssh adminuser@yourserver

私、セキュリティの事はよくわからないのですが専用のユーザを作って操作してるのが安全らしいですね。よくわからんけど・・・

#appユーザーの作成
$sudo adduser myappuser

meteorのパッケージを抽出する

$sudo mkdir -p /var/www/myapp

$cd /var/www/myapp
$tar xzf ~/package.tar.gz
$chown -R myappuser: .

アプリ環境を用意する

MongoDBのインストー

#aptのリポジトリを追加
$sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

$echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

#リポジトリを追加したのでパッケージリストに更新をかける
$sudo apt update

$sudo apt install -y mongodb-org

依存関係のインストー

#myappuserに切り替え
$su myappuser

#依存関係のインストール
$cd /var/www/myapp/bundle/programs/server
$npm install --production

passengerの設定

サーバーの設定を行います。

$cd /var/www/myapp/bundle
$vim Passengerfile.json

Passengerfile.jsonに下記の内容を入力してください。

{
  // Tell Passenger that this is a Meteor app.
  "app_type": "node",
  "startup_file": "main.js",
  "envvars": {
    // Tell your app where MongoDB is
    "MONGO_URL": "mongodb://localhost:27017/myappdb",
    // Tell your app what its root URL is
    "ROOT_URL": "http://yourserver.com",
  },
  // Store log and PID file in parent directory
  "log_file": "../passenger.log",
  "pid_file": "../passenger.pid"
  // Run the app in a production environment. The default value is "development".
  "environment": "production",
  // Run Passenger on port 80, the standard HTTP port.
  "port": 80,
  // Tell Passenger to daemonize into the background.
  "daemonize": true,
  // Tell Passenger to run the app as the given user. Only has effect
  // if Passenger was started with root privileges.
  "user": "myappuser"
}

ROOT_URLはページのルートURLを指定してください。

passengerを起動する

#今はadminuserからmyappuserにスイッチしている状態のはずなのでadminuserに戻る
$exit

#passengerのスタート
$cd /var/www/myapp/bundle
$sudo passenger start

サーバがちゃんと動いているかテストする

#ローカル環境
$curl http://yourserver.com/
#これでちゃんと立っていたらHTMLファイルが帰ってくるはずです。

あとがき

これでpassengerの初期設定などは完了しました。
ただ、私も英語が得意なわけではないので解説などはざっくりしています。
ああ・・・英語できるようになりたい・・・