iq29 diary

EG.LAB 開発日記

Magic Keyboard (US) → HHKB Professional BT (US 無刻印) にした話。あとMagic Trackpad (スペースグレイ)も

Magic Keyboard (US) → HHKB Professional BT (US 無刻印) にした話。あとMagic Trackpad (スペースグレイ)も

f:id:loney1986:20180415204407j:plain

経緯

副業のあぶく銭が入った。ずっとほしかった

所感

HHKB BT(US 無刻印)

  • 純正のMagic Keyboardと比べると遅延あり。でも気にするほどでもないレベル
  • ついタイプでスリープを解こうとするがキーボードも30分経過でスリープしてるから無理
  • スリープしない設定もできるが電池もったいないので、自分でスリープ解くことを選んだ
  • Controlキーの位置が慣れない。矢印がない。ということは慣れないControlキーの位置に慣れる必要がある
  • 無駄なキーを排除しているので物理的に遠かったキーは押しやすくなっている
  • セブンのATMみたいなスコスコ打鍵感。触っていて気持ちいい
  • 打鍵音がうるさいらしい、でもそれはみんながAppleのヘコヘコキーボードを使ってるからそう感じるだけかと
  • 指の負担が軽減される訳ではなさそう
  • 当然のことながら今すぐタイピングが早くなる魔法の道具ではなかった
  • 単純な英数字の入力だけなら初日のスピードは変わらなかった。問題は入力切替とかショートカット
  • しかし配列やコマンドをマッスルメモリーに叩き込んでしまえば早くなりそうな予感がある
  • というか無刻印にした以上そうならざるを得ない
  • すべての構造が最適化されているので名前どおり入力が楽しくなりそう (マゾ気質)

Magic Trackpad

  • ワイヤレス製品全てにいえるけどやはり無線で好きな場所に置けて、自身が楽な姿勢を保てるのはストレスフリー
  • Macbookについてるやつより大きい
  • 気持ちはiMac proユーザ
  • Magic Mouseから乗り換えたような形だが、できるアクション数はやはり多いし増えてる
  • Magic Mouseのカーソルの早さより上げられてるっぽいので必要な動作が減る。省エネ
  • 指の関節はやっぱり疲れる
  • キーボードで極力なんでも操作したいモードだから必要なときにだけアシストしてもらう感じ。かといって存在が邪魔にならない
  • まだできることがありそうけどHHKBのせいで構ってあげられていない
  • ごめんね

今回の出費は5万円
HHKBの鞄とカラーキートップも付けたらこんなにいってしまった...
まぁでも一生使えるし、商売道具だしと考えれば

追記

純正マウスの速度あげれたやん。速度は5.5くらいがいい感じ

anote.work

EC2上のRDS (MySQL) をVS Codeで使えるようにする話

EC2上のRDS (MySQL) をVS Codeで使えるようにする話

契機

「え?エディタで DB 見れるようにしてないの?」

つまずいた

VS Code で MySQLプラグインをつっこんで追加ボタン
必要情報を入力

・・・タイムアウト発生

そもそも

前提として EC2 で動かすのに、EC2 のログインが求められていないゾ
MySQL Workbench とか コマンドラインのときは両方でログインをしなければいけなかったのに

あ、なるほど

AWS のセキュリティグループで「MySQL (3306) 」が「0.0.0.0/0」になっていない
ここで解放してあげて、公開鍵は EC2 の pem ファイルを指定してあげれば
直接 EC2 ログインしなくとも無事表示されました

参考

a1-style.net

その他

rmate を使って、VS Code からリモート編集できるようにしたかったので
こちらのポートも追加しました
qiita.com

毎日その日のタスクを自動通知する Slack bot 作った話

毎日その日のタスクを自動通知する Slack bot 作った話

経緯

つまり

スプレッドシート
1. 工数管理 (自動計算)
2. 工数管理の情報を元に1ヶ月のスケジュールを組む
3. Slack で毎日その日のタスク通知してくれたら便利やん!
と思った (月並)

スプレッドシート作成

  • 工数管理シート
    タスクの工数を自動計算してくれるシート f:id:loney1986:20180408114309p:plain

  • スケジュールシート
    1ヶ月のタスクを登録しておくシート f:id:loney1986:20180408114142p:plain

  • Slack シート
    f:id:loney1986:20180408114331p:plain Slack で通知して欲しい情報はこのシートで全て管理している
    TODAY() で日付オブジェクトを作り、
    MATCH() でスケジュールシートの日付とマッチした行番号取得
    その行番号に欲しい情報が全てあるので、列名と組み合わせて文字列のセル番号を作成
    indirect() で文字列セル番号をオブジェクト化して、値を参照できるようにしている

GoogleAppScript (GAS)

ただの JavaScript だった

function myFunction() {
  // spread sheet 取得
  var sheet    = SpreadsheetApp.openById('13RzmCmRRsYc4N2MU9xwJoRVhDQLjqNwkrhj5dc8YUVU');
  
  // 拾うシートの名前
  var sheetName = 'slack';
  
  // 日付
  var today = sheet.getSheetByName(sheetName).getRange(1,1).getValue();
  
  // 曜日
  var week = sheet.getSheetByName(sheetName).getRange(1,2).getValue();
  
  // タスク名
  var task = sheet.getSheetByName(sheetName).getRange(1,3).getValue();
  
  // 大目標
  var big = sheet.getSheetByName(sheetName).getRange(1,4).getValue();
  
  // 中目標
  var medium = sheet.getSheetByName(sheetName).getRange(1,5).getValue();
  
  // 小目標
  var small = sheet.getSheetByName(sheetName).getRange(1,6).getValue();
  
  // タスク進捗率
  var percent = sheet.getSheetByName(sheetName).getRange(1,7).getValue() * 100;
  

  var sentence = 
    "-- *きょうのいけだの衝動* --\n" +
    "*" + task + "* [ *" + percent + " %* ] " + "\n" +
    "\n" + 
    ":yavai: 大目標 `" + big + "` \n" +
    "\n" + 
    ":yavai: 中目標 `" + medium + "` \n" +
    "\n" + 
    ":yavai: 小目標 `" + small + "` \n" +
    "https://drive.google.com/open?id=13RzmCmRRsYc4N2MU9xwJoRVhDQLjqNwkrhj5dc8YUVU";
  
  var payload  = {
    'text'      : sentence,
    'channel'   : 'stand_up'  ,  // 投稿するチャンネル
  };
  
  var options = {
    'method'      : 'post'                 ,
    'contentType' : 'application/json'     ,
    'payload'     : JSON.stringify(payload),
  };
  
  var url = '(Slack incoming WebhookでコピーしたURL)';
  
  UrlFetchApp.fetch(url, options);
}

完成

まりこ様 bot が決まった時間に通知してくれるようになりました f:id:loney1986:20180408115201p:plain

参考

www.tam-tam.co.jp

tech.camph.net

www.minemura-coffee.com


Slack 設定画面が変わり続けているので、色々と昔と違うところがありました
今回使ったトークンの種類は Webhooks です
共有リンクはオンにしておかないと届かないみたいです
覚えたばかりの工数でいうと1人日かかりました

HTTPSの導入と挫折

カイカフカイカの HTTP 対応を行った。

使ったのは Let's Encrypt

無料で有名なとこっすね。

素の HTTP だと Google Chrome で今後警告が出てしまうということで、勉強を兼ねた導入。

導入自体は簡単だったんだけど、ランダムコードは Node.js からインスタンスを立ち上げていて

そのインスタンスを切らずにドメイン全体をSSL化した影響からか

Mongo.db が動かなくなってしまった。ふつうの mongo コマンドさえ。

でてきたエラーは以前と同じ。

そのときの方法だと直らなかったので、

MongoDB アンスコ、再インストールすればすぐ治った。

lockファイルの削除やらerrオブジェクト・configの確認まで色々やったんだけどね...

結局これが一番早かったという。

そういうわけでランダムコードのHTTPS対応だけはもう少し後になりそう。

 

 

 

TotalSpaces2 買った

UdemyでReactの講座やってる人のTwitterみたらおすすめされてたので購入 (約1600円)
設定は下記参照

qiita.com


画面管理に使ってた頭のリソースが解放された気がする
あと、画面の切り替えがめっちゃサクサクになった

.eslintrc.jsの設定(Airbnb)でインデントのアラートが出まくる。でもインデントはTABにしたい。

日本語はおろか、英語でも結構探した

stackoverflow.com

"rules": {
	"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
	"no-tabs": 0,
	"react/prop-types": 0,
	"react/jsx-indent": [2, "tab"],
	"react/jsx-indent-props": [2, "tab"],
}

VScodeの設定も。全然反映されなかったり、よくわからんね。。。

{
	"editor.detectIndentation": false,
	"editor.renderWhitespace": "all",
        "editor.tabSize": 2,
        "editor.insertSpaces": false,
        "editor.renderWhitespace": "all",
        "window.zoomLevel": -1,
        "extensions.ignoreRecommendations": false,
        "emmet.syntaxProfiles": {
            "javascript": "jsx"
        },
}

Twitterにリンクできなかった件

URLがIPアドレスもろだしの状態のものでツイートしても

リンク部分が活性化しなかった

ちゃんとドメインを使おう...

それに気づいてドメインのURLを使うようにサイトを全改修...

こんな弊害があるとは

ランダムコードをリリースしました

Random Chord

こんなん作った

開発環境

データベース:MongoDB v3.4.10
言語:Node.js v9.2.0
サーバ:AWS EC2上にHTTPサーバ構築
読んでた本:JavaScript Ninjaの極意

作曲の勉強に...

メジャーかマイナーかどっちかのキーで適当にコード進行を3つ表示してくれます。
ついでに曲のテンポも指定してきます。
頑張ってそれで作曲してみてください。

所感

非同期処理のことをよくわかっていなかったのでいい勉強になった

EC2でNode.jsからHTTPサーバ起動したときにEADDRNOTAVAILエラーが出た話

[前回の続き]
ローカル開発環境でサーバ起動して動いていたNode.jsのプログラムをEC2上で動かしたい。
→ EC2のIPv4 パブリック IP、ポート番号を(適当に)8080に指定して、Node.jsからHTTPサーバ起動!

events.js:136
throw er; // Unhandled 'error' event
^
Error: listen EADDRNOTAVAIL (IPアドレス)

めっちゃ調べたが、わからず悶々として一週間経過

セキュリティグループ

ふと、そういえばEC2のセキュリティグループで8080のポートを解放してねーじゃんと気づく

f:id:loney1986:20171216225627p:plain

再度実行

events.js:136
throw er; // Unhandled 'error' event
^
Error: listen EADDRNOTAVAIL (IPアドレス)

心が折れる音がした

パブリックIP と プライベートIP

またぐぐる。そして以下のStackoverflowの質問を見つける
stackoverflow.com

パブリック IP は指定するな、プライベートIPを指定しろって言ってる気がしたのでそうしてみる
→ 無事サーバ起動成功!
→ ブラウザで 「プライベートIP:8080/設定したエンドポイント」 にアクセス
→ 白い画面のままずっと読み込み中になる

/(^o^)\ツンダ

そこからまた小一時間、調べたり、色々なパターンのURLを試す

そして

→「 パブリックIP:8080/設定したエンドポイント」ニュウリョク〜

・・・

うおおおおおお!表示された!!!!!

どうやら
パブリックIP は プライベートIP と紐づいていて、ブウラザからアクセスできるもの
プライベートIP は公開されないのでアクセスこそできないが
DBとかサーバのIPを指定するときはこっちを指定するものっぽい

いやー初歩的なことすぎたのか、調べても全然出てこなくて大変でした...
インフラの勉強ちゃんとしないとなあ...

EC2にMongo DB導入したときにECONNREFUSEDエラーが出た話

{ MongoNetworkError: failed to connect to server [IPアドレス:27017] on first connect [MongoNetworkError: connect ECONNREFUSED IPアドレス:27017]

1年前にNode.jsでローカル開発したシステムをEC2に引っ越しさせようとしたら
Mongo DBの上記のエラーが発生した。

ほとんど海外サイトしか情報がなく、
有力情報もなく (そんなはずもないと思うけど)
時間だけが吸い取られていった...
以下自力で探した答え

# Mongoのポート番号の調査 (ローカルでしか適用されていないポートだと分かった)
$ netstat -ant | grep 27017 
tcp 0 0 127.0.0.1:27017 0.0.0.0:* LISTEN

# confファイルの編集
$ sudo vi /etc/mongod.conf

# 下記場所をコメントアウト → Mongo DB サーバ再起動
# bind_ip=127.0.0.1

# 下記のようになっていればポートがすべてのIPに対して解放されたことがわかる
$ netstat -ant | grep 27017
tcp 0 0 0.0.0.0:27017 0.0.0.0:* LISTEN

なんでローカルでしか使えない設定になっているんだろう

ブログ作ったことをはてなブログに書くという話

http://www.iq29.org/

こういうサイトを作った。 

 

開発環境

データベース:MySQL14.14

言語:PHP 5.3.29

フレームワーク: Bootstrap4 beta.2 

サーバ:AWS EC2

読んでた本:ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座

 

経緯

元々は「真面目」なLP風アフィサイトをさくっと作ってみるかと思い

勉強がてらBootstrapを使いつつ、素のPHPでコーディングをしていた。

しかし途中から色々なテーマの記事を書きたくなってきて、

毎回LP作るのもめんどくさいし、雑多で「不真面目」なブログ形式にして

ついでに開発者としてのチャンネルも作ってしまおうという主旨に変更。

 

そして第一回のライティングとアフィリエイトについて調査をしているうちに

あんまり広告広告した嘘っぽいことを書きたくなくなってきて、

良い悪いを正直ベースに断じていく方がよっぽど面白いなと思ったので

一定の記事数とPV数がたまるまで広告も控えることにした。

まずはそれなりに見てもらえるものを作ろうと思ったわけです。

だから第二回以降の記事はそうなっていくはずです。

行き当たりばったりでやってるから保証できないけど。

 

所感

Bootstrap

道中、WordPressのテーマ使えばいいじゃんみたいな声が聞こえてきた。

確かにバックエンドの実装はともかく、

フロントエンドをいじるのは結構辛かった...

しかしまとめサイトみたいな見栄えになってしまったが

Bootstrapならではのレイアウトになったのでそれなりに満足はしている。

 

Bootstrap4 beta.2は10月にリリースされたばかりで

バグがあったり、ググっても公式リファレンス以外の情報があまりなかった。

しかしはじめて勉強するのに今からBootstrap3をやるのもナンセンスかと思い

3の情報を参考にしつつ、試行錯誤の末に4での実装を行った。

まあこの辺はノリで...

グリッドシステムによるレスポンシブデザインの自由度が高かったので、

表示・非表示をかなり制御することができた。

レスポンシブ対応は僕の敵なのでこれはかなり助かった。

ぶっちゃけ中規模以上のWebアプリとかブログを作るんだったら

WordPressとかPHPフレームワークの方がいいと思うけど、

一画面のなにかに対してだったら結構使えるので今後はそうすると思う。

デフォルトのデザインはあんまり良くないし、バッチの色や形の種類も少ないから

バックエンドエンジニア向けって印象。

 

ちなみに完成したタイミングで

ドットインストールにBootstrap4 入門の動画がきていた...

 

AWS

さくらのレンタルサーバしか使ったことがなかったので今回を機にAWSデビュー。

古いアカウントを持っていたけど、1年無料の期限が迫っていたので新規登録。

日本語にローカライズされていたので使いやすくなっていた。

ドメインも Route53 で取得。ここは英語。.com がとれなかったので .org に。

さすがにPHPMySQLを最初にインスタンスに入れるのはわかっていたが

まさかPDOは初期設定しないと使えないものだとは知らなかった。

 

他にも色々つまづいたところはあったと思うのだけど

あんまり覚えていないので今後は備忘録として残していこうと思います。