明神岳を登ってきたヘ(^o^)ノ

最近、登山いってます!

今回は明神谷ルートで、明神平 => 前山 (ルート間違いww) => 明神岳にチャレンジしてきました!

入り口はこんな感じ f:id:murajun1978:20190929092336j:plain

第1印象はけっこう激坂!

心拍数はあがりましたが、筋トレの成果もあり足は余裕でした!

だた、40分ほど登ってるとやっぱり心臓が悲鳴をあげてきます、、

それでも、Max 165でした

心拍数が振り切れなくなったのは、ジムに通っている成果なのでしょうか? (きっとそうです

休憩しながら登りきると明神平に到着

f:id:murajun1978:20190929111411j:plain

まわりに自分がいるとこより高い山があって、あんま登頂感はないですww

お昼ゴハン食べて、いざ明神岳へ!

僕が先導したのですが、ルート間違えたみたいで前山へ向かってましたw

10分ほどで制覇!w

そこから明神岳へ向かいました

明神岳 (1,432m)

途中、川を渡ったりして楽しかったなー

予報では雨だったせいか、登山者は少なめでしたねー

下りは相変わらず膝にきます、、(ダイエットせねば\

登った印象は、ひたすら登りが続く感じでした

ただ、絶壁みたいなのはないので、楽しく登れるはずです(はずです

あと、川を渡らないとダメなので、雨とかで増水してるとキビシそうですね

ちがうルートもあるみたいなので、また登ってみたいと思います

Enjoy Climbing ヘ(^o^)ノ

GitHub Registryが使えるようになったので、Next.jsのDocker imageをPushしてみたヘ(^o^)ノ

GitHubからWelcome to the beta of GitHub Package Registryメールが来たので試してみた

GitHub Package Registryにpushできるものは ↓ リンクを参照してください

help.github.com

今回はNext.jsのDocker imageをGitHub Package Registryにpushしてみました

サンプルコードはこちら

github.com

/packages にアクセスすると、パッケージ一覧が確認できます!

Next Actionとしては、GitHub Actionsを使ってAuto Deployできるようにしようかなー

ちょっと気になるのが、Betaだからなのか、僕のネットワークがクソなのかわかりませんが、no such hostなるエラーがちらほら出ました、、

サンプルコードはPublicですが、もちろんPrivateリポジトリでも利用できます!(これはめっちゃいい!!!!

Privateリポジトリの場合は、writeはもちろんread時もaccess tokenが必要になるのでお気をつけを

この辺 ↓ を参考に設定すれば大丈夫かと思います

help.github.com

Enjoy GitHub Package Registry ヘ(^o^)ノ

Docker Container上のNext.js with TypeScriptなAppをVSCodeでDebugする

Docker containerで動作しているNext.jsをVSCodeでDebugしてみました

サンプルコード

github.com

Requirements

  • Docker
  • Docker Compose

インストールはこの辺を参考に ↓

Docker

開発用のDockerfileを作成

Dockerfile

FROM node:12.10-alpine

WORKDIR /home/app
USER node

EXPOSE 3000

Docker Compose

まずは、Node開発環境をととのえる

docker-compose.yml

version: '3.7'

services:
  node: &node
    build:
      context: .
    volumes:
      - .:/home/app
  runner:
    <<: *node
    command: /bin/sh

Node.jsのベースと開発用のServiceを作成する

できたら、開発用のコンテナを起動しよう

$ docker-compose run --rm runner
Creating network "example-next-typescript-with-vscode_default" with the default driver
/home/app $ 

Next.js

起動できれば、Next.jsとTypeScriptをインストールしていく

$ npm install next react react-dom
$ npm install -D typescript @types/react @types/node

package.json

{
  ...
  "scripts": {
    "dev": "next",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

Homeページを作る

pages/index.tsx

// pages/index.tsx

function Home() {
  return <div>Welcome to Next.js!!!!</div>;
}

export default Home;

Next.jsを起動すると、tsconfigとか諸々作成されます

$ npm run dev

起動できました!本題のDebugいってみよう

Node.js Inspector

Node.jsは --inspect オプションを追加すると、デバッグクライアントをリッスンしてくれます

環境変数でオプションを指定します

FYI: nodejs.org

Inspect用のnpm scriptを追加します

package.json

{
  ...
  "scripts": {
    "dev": "next",
    "dev:inspect": "NODE_OPTIONS='--inspect=0.0.0.0' next dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

nodejs.org

↑ ここのドキュメントにも書いてますが、inspectのデフォルトは 127.0.0.1:9229 です

今回はNext.jsをDocker Containerで起動させて、ホスト側のVSCodeから接続したいので、ホストを 0.0.0.0 に変更してます

docker-composeの設定も変更します

docker-compose.yml

version: '3.7'

services:
  node: &node
    build:
      context: .
    volumes:
      - .:/home/app
  runner:
    <<: *node
    command: /bin/sh
  server:
    <<: *node
    ports:
      - 3000:3000
      - 9229:9229
    command: npm run dev:inspect

Serverというサービスを追加しました

作業しているコンテナから抜けて、containerを起動します

$ docker-compose up

docker-composeの環境変数にセットしてみたけど、Node.jsでコンフリクトしてるのか起動できなかった

Starting example-next-typescript-with-vscode_node_1     ... done
Recreating example-next-typescript-with-vscode_server_1 ... done
Starting example-next-typescript-with-vscode_runner_1   ... done
Attaching to example-next-typescript-with-vscode_runner_1, example-next-typescript-with-vscode_server_1, example-next-typescript-with-vscode_node_1
server_1  | Debugger listening on ws://0.0.0.0:9229/136aaa58-2624-4587-8f5f-45e7234c9610
server_1  | For help, see: https://nodejs.org/en/docs/inspector
example-next-typescript-with-vscode_runner_1 exited with code 0
server_1  | 
server_1  | > app@1.0.0 dev /home/app
server_1  | > next dev
server_1  | 
example-next-typescript-with-vscode_node_1 exited with code 0
server_1  | Starting inspector on 0.0.0.0:9229 failed: address already in use
server_1  | npm ERR! code ELIFECYCLE
server_1  | npm ERR! errno 12
server_1  | npm ERR! app@1.0.0 dev: `next dev`
server_1  | npm ERR! Exit status 12
server_1  | npm ERR! 
server_1  | npm ERR! Failed at the app@1.0.0 dev script.
server_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
server_1  | 
server_1  | npm ERR! A complete log of this run can be found in:
server_1  | npm ERR!     /home/node/.npm/_logs/2019-09-08T14_07_48_368Z-debug.log
example-next-typescript-with-vscode_server_1 exited with code 12

VSCode debugging

.vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker: Next.js",
      "type": "node",
      "request": "attach",
      "remoteRoot": "/home/app",
      "protocol": "inspector"
    }
  ]
}

VSCodeのDebugから、Docker: Next.js を実行します

pages/index.tsx にブレイクポイントをおくと止まってくれるはずです

Enjoy Next.js ヘ(^o^)ノ

GR-CITRUS ミニハッカソン in OSAKA に審査員として参加した

connpass.com

GR-CITRUS ミニハッカソン in OSAKA に審査員として参加してきました

IFTTTを使ったIoTなものから、アイディア満載の作品などどれもレベルが高かったです!

個人的にもいい刺激をいただきました!

でもね、スタッフとか審査員とかで参加した場合、みなさんが楽しそうに作業してるのみてムズムズするわけで、、

てなわけで、僕もLチカにチャレンジしました

GR-CITRUSのLEDをチカチカさせてみます

@kimu_shu さんが作られた Rubic を使っていざ!

サポートしてくれたのは @ogomr さんと @kimu_shu さん(豪華!

Rubicはよくできていて、ボードやファームウェアなんかをポチポチ選択していくと実行環境ができちゃいます!

以下、個人的なメモ

Rubicを追加する

  • vscodeCtrl + P
  • ext install kimushu.rubic を入力してEnter
  • インストールが終了したら reload する

Rubicの設定

  • vscodeF1
  • rubic で検索
  • Show Rubic board catalog を選択

ボードを選択

f:id:murajun1978:20180211062152p:plain

  • GR-CITRUS を選択

ファームウェアリポジトリを選択

f:id:murajun1978:20180211062510p:plain

Wakayama.rbのリポジトリですね

ファームウェアを選択

f:id:murajun1978:20180211062757p:plain

Configuration

f:id:murajun1978:20180211063215p:plain

LチカなんでミニマムでOK

ファームウェアの書き込み

ここでデバイスが表示されるはずが、、されてない

@kimu_shu さんに聞いてみると、パーミッションじゃないかなとのこと!

僕の環境はLinuxだったので、デバイスファイルに read, write 権限が必要みたいです

なので以下はLinux環境のみ作業が必要

GR-CITRUSttyACM0 ってなファイル名らしいので

$ ls /dev/ttyACM*
/dev/ttyACM0

$ sudo chmod 666 /dev/ttyACM0

でも、デバイスを外すとパーミッションが元にもどっちゃうのでめんどくさいから

# /etc/udev/rules.d/50-udev-default.rules
ERNEL=="ttyACM[0-9]*", GROUP="murajun1978", MODE="0666"

ってしておくと抜き差ししても大丈夫!

でわ、ファームウェアを書き込みます

f:id:murajun1978:20180211064951p:plain

  • Write firmware to boad をクリック
  • 確認ポップアップがでてくるので yes を選択
  • Push reset button on GR-CITRUS ってポップアップがでたら GR-CITRUS のリセットボタンを押す
  • OK pushed をクリック
  • LEDのチカチカ(ファームウェアの書き込み中)が終わると OK, confirmed をクリック

コネクションテスト

f:id:murajun1978:20180211064951p:plain

  • Test connection をクリック

テスト成功のポップアップが表示されたら終了

これで環境がととのいました!

コードを書く

僕は lchika ってディレクトリ配下にmain.rbを作成しました

# lchika/main.rb
class Lchika
  def initialize(lchika_count)
    @lchika_count = lchika_count
  end

  def run
    @lchika_count.times do
      led
      delay 1000
    end
  end
end

lchika = Lchika.new(3)
lchika.run

実行する

僕のサンプルだと3回チカチカがするはずです

楽しかった!個人的にはスマートスピーカーを自作してみたいなー

Google AssistantやAmazon Alexaなんかでね

みなさま、お疲れ様でしたー

Rails Follow-up Osaka #13 を開催したヘ(^o^)ノ

rails-follow-up-osaka.doorkeeper.jp

会場提供は株式会社エイチームさんでしたーヽ(´▽`)/

ありがとうございましたっ!

localhostでsubdomainのURLにアクセスしてデバックしたかったようなのでサポートできたかな?

e.g.

# config/routes
Rails.application.routes.draw do
  constraints subdomain: 'admin' do
    resources :todos
  end
end

/etc/hosts127.0.0.1 admin.localhost.local を追加してあげることで解決できた。

$ sudo vi /etc/hosts


e.g.

127.0.0.1 localhost
127.0.0.1 admin.localhost.local
255.255.255.255 broadcasthost
::1             localhost

今回の場合とかはDockerを使って開発した方が良いのかもしれないです。

Enjoy Rails ٩( ‘ω’ )و

Rails Follow-up Osaka #12を開催した

rails-follow-up-osaka.doorkeeper.jp

会場提供は株式会社エイチームさんでしたーヽ(´▽`)/

ありがとうございましたっ!

チームにjoinしたての方が環境構築に手間取っていたのでサポートできた。

具体的にはRMagickのインストールに失敗していた。

なんだかImageMagickのバージョン6でないとダメみたい。

なので、Homebrewでバージョン6をインストールした。

$ brew install imagemagick@6

しかし、ImageMagickなんてないと怒られる、、

brew infoを見るとconfigのパスを通せと言っているので

$ echo 'export PKG_CONFIG_PATH=/usr/local/opt/imagemagick@6/lib/pkgconfig' >> ~/.bash_profile
$ echo 'export PATH="/usr/local/opt/imagemagick@6/bin:$PATH"' >> ~/.bash_profile
$ brew link --force imagemagick@6

無事インストールすることができた。

今後、同じように環境構築でハマらないようにドキュメントにおこしておこうってアドバイスしました。

その後、全員で懇親会へ

楽しかったーヘ(^o^)ノ

神戸.rb Meetup #64 へ参加した ヘ(^o^)ノ

koberb.doorkeeper.jp

参加してきたメモ

ちょっとできるエンジニアが1人で色々やってもあんまり会社としてもメリットないよってお話

他のメンバーと一緒に階段を1段ずつ登っていかないとダメだよねってお話 できるエンジニアがいなくなると何も残らなくなってしまう、、

成果をちゃんと計測しようねってお話

試したい事があったらぱっと作って、成果を計測するようにしようってお話

Dokcerのお話

Dokcerの導入事例もいいけど、保守や運用事例が欲しいなってお話

Webフロントエンド ハイパフォーマンス チューニングどうよ?ってお話

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

読んでるところ

HTTP2.0っていいよってお話

qiita.com

React のお話

Componentからif文をなくしちゃえーって話とPromiseの使い方を話した

Shinosaka.rbの資料を作成した

2ページしかできなかった、、

責任を譲渡することの大切さのお話

ある程度まかせることで人は成長できるというお話

泉州水ナスは美味しいというお話

美味しかった

JWTのお話

JSON Web Tokenだよー WebとMobileアプリに対応してるよー(Backendは1つでOK)ってお話 マイクロサービスには向いてるかもってお話

フロントエンドのエラー通知

AirbrakeとかSentryは便利だよーってお話

GraphQLのお話

今週末にShinosaka.rbでテーマとしてイベントするけど、Kobe.rbでサーバーレスなGraphQLをお話しようかという

Shinosaka.rbの飲み代のお話

今日の懇親会は3,000円だった、なぜShinosaka.rbは飲み代が高いのかってお話

HUAWEI P10のライカカメラはすごいって話

カメラに詳しくないので僕はわからなかったが、詳しい人がみるとまぁまぁすごいらしい

TDD

FeatureテストもTDDでかくべき(バックエンドはstubで)ってお話