ishikawa_pro's memorandum

若手webエンジニアの備忘録です.

Swift Node.js Docker AWS etc...色々やります。

Googleのiosched-ios リポジトリが勉強になる

お久しぶりです。
3月に大学を卒業して、今は渋谷で新卒としてWebエンジニアしてます。
まだ研修しかしてないのでそれほど大変でもないですが、中々家でコードを書く体力がなくてSwift書けてないです。

何となくブログ書くかなという気になったけど、ネタがないので同期が教えてくれたリポジトリを貼っときます。

iosched-ios というGoogle.ioのkeynoteのタイムテーブルなどが確認できるiOSアプリのリポジトリで、GoogleGithubアカウントが公開してます。
github.com

デザインなど

アプリのデザインは マテリアルデザイン(material-components-ios)で作られていました。
StoryBoardは一切使っていなかったです。

サーバーサイド?

バックエンドはFirebase(主にfirestore)使っていました。
Google.io開催前は、Homeタブのupcomming eventsという部分で開催までのカウントダウンをしていたのですが、firestoreのドキュメント内で開催までの残り時間を減少させて、それをrealtime updateを使って変更を受け取ってリアルタイムにカウントダウンさせていて、なるほどなーってなりました。(firebaseのプロジェクト見れないのと、結構ざっくりしか見てないので間違ってるかも)

アーキテクチャ

アーキテクチャは、MVVMっぽいですがRxSwiftなどは使わずピュアなSwiftで作られていました。 firestoreのrealtime updateとかを使ってmodelの変更を伝播してるような感じの所もありました。
UICollectionViewのDataSourceをUICollectionViewDataSource protcolに準拠した、NSObjectのクラスで管理しているのは勉強になりました。

その他

ライブラリは全部cocoapodsで管理されてました。
firebaseのsdkがcocoapodsにしか対応してないからだろうけど、それ以外のcarthageに対応してるライブラリもcocoapodsで管理してたのは何でなんだろう?
単純に1つのツールで管理した方が楽だからかな?
リポジトリ自体は9コミットしかなく、最初の1コミットでコード自体は完成したもの上げてるだけだった。(多分1人で開発した?)

感想

僕はむやみにRxSwift入れたく無い派で、割と似たような実装方法してる所もあったり、そういうやり方もあるのかと感動する所もあった。
まだ、コードを読み切れてないので、時間見つけて解読進めて自分の知識にしていきます!

今日はここまでにします。
本業の方も頑張ります。

1月振り返り(2019)

こんにちは。
1ヶ月ごとに振り返ってみようという試みです。
これくらいなら続けられるんじゃないかな。
今年は1年の振り返りエントリーを書いてみたいので、振り返り用もかねて書いていきたいと思います。

プライベート

やったこと

年末・年始は島根の実家にいました。(1月6日くらいまで)
年末年始は友達と酒飲みながらスマブラしてた記憶しかない。
頓原探検隊冬季フェフは盛り上がってよかった。別の記事でまとめたので見てください。
ishikawa-pro.hatenablog.com

仕事

去年の10月頃からクラウドワークス経由でiOSアプリ開発の仕事を受け始めました。
11月頃から1社と直で開発依頼を頂いているのと、クラウドワークス経由で時々開発の依頼を頂いている会社が1社あります。
直で依頼を受けている会社では、新規のアプリ開発に携わっているのですが、自分の設計・実装が曖昧だったツケ回ってきた感じです。そのせいで今月の後半はほとんどリファクタリングや設計やり直しをする感じになってしまいました。。(全部自分で書いてるから自分が悪いけど)

note.mu
たまたまTwitterで流れてきたNoteを読んで、まさに自分が負債を作ってしまったなと後悔しながら負債を返済しています。
学校卒業するまで、ほとんど時間がないけど設計はもっと学ぶべきことがいっぱいあるなと感じました。

読んだ本・読んでいる本

iOSアプリ設計パターン入門

PEAKSのクラウドファウンディングでできた本です。 まだ第1部までしか読めてないですが、既に買ったかいがあったなと思える内容です。読み終えたらブログ書きたい。
peaks.cc

グラーフ・ツェッペリン 夏の飛行(読みかけ)

SF小説。本読みたいなと思ってPrime Readingを探してたら見つけた。まだ最初の方しか読んでないけど、読みやすいから良い感じ。

「気がつきすぎて疲れる」が驚くほどなくなる  「繊細さん」の本 (読みかけ)

ほぼ読んだけど、読みかけ。結構共感できることが多かった。
対処法みたいな所まで書いてあったけど、自然と身につけてきたことがほとんどだったから、あんまり新しい発見みたいなモノはなかった。

最後の医者は桜を見上げて君を想う(読みかけ・読まないかも)

最後の医者は桜を見上げて君を想う (TO文庫)

最後の医者は桜を見上げて君を想う (TO文庫)

すごい考えさせられる本だった。最初の1エピソードで完全に心が折れたので多分もう読まない。内容はすごくよかったと思う。

全体

今月はあまりメリハリ付けて生活できなかった。(特に仕事)
来月はほとんど学校最後みたいなものだから忙しいけど、仕事と両立できるようにメリハリ付けて生活したい。

頓原探検隊冬季フェフに参加しました!

明けましておめでとうございます。
今年は技術系の記事以外でも良いからとりあえずブログを継続させてみたいなと思ってます。
今年最初の記事は、頓原探検隊冬季フェフというのがあり、運営のお手伝いと参加してきたのでその記録です。

頓原探検隊冬季フェフとは

僕の地元、飯石郡飯南町頓原では若者達でイベントを企画・運営するような会が去年の夏手前くらいからありました。今回の頓原探検隊冬季フェフはその企画の1つで、地元の特徴の1つである雪を活かして何かやろうという感じで企画されました。
(詳細な発足理由や主旨などは覚えてないですが、そんな感じだと思います)
今回のイベント以外では頓原探検隊フェフという、運営の皆んなで考えた変わった競技を参加者の皆んなで楽しむイベントを8月に企画しました。
言葉では伝わりずらいと思うので、告知動画とメイキング動画があるので、そちらをご覧ください。

www.youtube.com

www.youtube.com

僕は現在、岡山に住んでいますが、地元ということと友達(村長 (@seita0126) | Twitter)が実行委員長ということもあって、企画などから参加することになりました。

何したの?

今回のイベントでは、午前中に雪合戦をして、お昼に豚汁を食べ、午後から雪像づくりをする予定でした。
しかし今年は全然雪が振ってくれず、当初の企画は出来ないと判断し、雪合戦と雪像づくりは中止して「いたっボール」という競技をやることになりました。
いたっボールとは、兵庫県伊丹市発祥の室内雪合戦のような競技で、スポンジボールを投げ合いながら、敵陣のフラッグを先に取ったほうが勝ちというようなゲームです。
www.city.itami.lg.jp
今回はこの「いたっボール」のルールをちょっとアレンジして参加者の皆さんと楽しく遊ぶことになりました。

※前々日に実行委員で雪乞いの神事を行ったところ、当日本当に大雪が降りましたがイベントの変更を発表していたので、残念ながら当初の企画をすることは出来ませんでした。 とんばら探険隊冬季フェフCM 雪乞い神事編 - YouTube

当日の様子

当日は地元の高校生が結構来てくださり、運営込みで大体20人後半くらいは人が集まりました。初めていたっボールをする方も多かったですが、みなさん一生懸命に取り組んでくださり、かなり盛り上がったイベントとなりました。

f:id:ishikawa_pro:20190127220753j:plainf:id:ishikawa_pro:20190127220942j:plain
当日の様子
途中、地元のゆるキャラ「いいにゃん」も駆けつけてくれました。

f:id:ishikawa_pro:20190127221041j:plainf:id:ishikawa_pro:20190127221053j:plain

まとめ

皆んな楽しんでいたっボールをやってくれていて、場も凄く盛り上がり楽しいイベントになりました!僕は当日の準備だけでしたが、運営も皆んなで楽しくやれたので本当に最高な1日でした。
今後も楽しいイベントを実行委員長を中心に企画していってくれると思うので、僕も可能な限り協力していきたいです。
イベント当日までに実行委員長がいくつか告知動画(?)を作ってあげているので是非ご覧ください。今後も色々発信してくれると思うのでチャンネル登録もしてあげてください。 www.youtube.com

今日はここまでです。
今後もブログ継続させたい。

「back number - 003」のオフボーカル音源作ってUPしました

こんにちは。


今日は音楽のことを書きます。
昔から趣味でたまにDAWでギターとか録音してるのですが、久しぶりにDAWで遊んでみました。
曲は、back numberの003という曲です。

この曲を選んだ理由は、最近組み始めたバンドでやる曲なので、練習とか音源制作とかかねて選びました。
演奏してるのは、ギター2本だけでドラムとベースは打ち込みにしました。


真面目に曲をコピーしたりドラムやベースをちゃんと打ち込むのは初の試みだったのですが、初めてにしてはそこそこのできだったと思います笑
問題点は、僕は歌が得意ではないのでボーカルをまだ入れられてないことです。ボカロ持ってるのですが今windowsが入ってるPC持ってなくて使えない状態です笑
もう一つ反省点は、原曲に頑張って寄せて作ったけど寄せすぎてオリジナリティが全然ないなってところですね笑


公開は、Bandlabっていうwebとスマホアプリ上で使えるDAWと音楽SNSが合体したようなサービスにしています。(超おすすめサービス)
www.bandlab.com

普段はsound cloundにあげてるのですが、今回はoff vocalで未完成だったのでBandlabにしました。BandlabはGithubのようにfork機能というのがあって、みんながupしたプロジェクトをフォークして自分でアレンジや演奏を加えたりすることが可能です。
だから、誰か僕のプロジェクトをフォークして歌を追加してください🙇‍♂️(上の埋め込みプレーヤーにある右上の丸いボタンを押せばフォークできます。)
キーの変更も承ります笑

歌入れてくれたらtwitterとかで連絡くれると嬉しいです。mixとかやりますので
ishikawa_akira (@kila_guitar) | Twitter

その他sound cloudに曲をあげてるのでよかったら聞いてください!👋

Amazon Echo 買いました!

こんにちは。ちょっと前にAmazon Echoを買いました!Amazon echo dot ではなく無印のechoです。

f:id:ishikawa_pro:20171218223317j:plainf:id:ishikawa_pro:20171218222844j:plain
f:id:ishikawa_pro:20171218222849j:plainf:id:ishikawa_pro:20171218222859j:plain

招待メールをリクエストしたのは、リクエスト受付を開始した11月8日で、招待メールがきたのは12月4日だったので約1ヶ月かかりました。その代わり、11月17日までに招待メールのリクエストをしていたので¥4000オフの¥7980で買いました!
大体2週間くらい使ってみて、Unlimited Musicで今まで興味はあったけどCD買ったりできてなかったアーティストの曲を沢山聞くようになって音楽生活がより豊かになったなーと思いました。あと、Radikoが使えるので夜0時くらいからラジオを聞くのが最近の習慣になりました。機能面で言うと、スマートスピーカーとしても天気や予定を聞いたりと活躍してますが、Bluetoothスピーカーとしても使えるのでPCやスマホのスピーカーとしても活躍しており大変便利です。
音質に関しては、結構クリアな音の印象ですが、とにかく低音が超強いです。低音が強すぎるせいか、若干ボーカルが後ろ目聞こえる感じもします。(僕の部屋の壁が薄くてあまり大きな音を出せないのも原因かと思いますが)
アコースティックギターのインストの楽曲を流したらかなりいい感じだったので、アコースティックな楽曲とは相性が良いかもしれないです。
全体的な評価としては、僕は大満足でスマートスピーカーライフを満喫してます。

Amazon Echo (Newモデル)、チャコール (ファブリック)

Amazon Echo (Newモデル)、チャコール (ファブリック)

今後は、スキルの開発をしたいですが、node.jsは書けないのでnode.jsの勉強をしつつスキル開発もやっていきたいです。
今日は以上で失礼します。

Heroku Container RegistryにデプロイするサンプルをGitHubにあげた。

タイトルの通りで、これ以上書くことないですが、前回の書いたHeroku Container RegistryについてのサンプルをGitHubにあげました。
github.com

deploy to Heroku button を使いたかったのですが、どうも対応してないみたいなのでザックリ手順をREADMEに書いておきました。

Heroku Container Registryを使ってみた

こんにちは。
Heroku Container Registryを早速使ってみたので、まとめます。普通に、デプロイするだけだと他の人がたくさんやっていて面白くないので、ローカルの開発環境の構築からDeployするところまでやってみます。

今回の構成

Ruby on Rails のサンプルアプリを作ります。ローカルの開発環境はDocker上にRuby on Rails のコンテナとPostgreSQLのコンテナを立てて、docker-composeで管理します。dockerのimageは全部Docker Hubにある公式のリポジトリを使います。本番環境は、Heroku Container Registory と Heroku Postgresを使います。

ディレクトリ構成

HerokuSampleApp
├── .dockerignore
├── .env
├── Dockerfile
├── HerokuSampleApp
│   ├── .gitignore
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── README.md
│   ├── Rakefile
│   ├── app
│   ├── bin
│   ├── config
│   ├── config.ru
│   ├── db
│   ├── lib
│   ├── log
│   ├── public
│   ├── tmp
│   └── vendor
└── docker-compose.yml

手元の開発環境を構築

まずは、ローカルのDocker環境で動かせるように整備していきます。

Rails プロジェクトを作成

docker コマンドを使ってrailsのプロジェクトを生成します。

docker run -it --rm -w /HerokuSampleApp/ -v $(pwd)/:/HerokuSampleApp/ rails rails new HerokuSampleApp -TB --database=postgresql

ちょっと解説すると、-wオプション(--workdir)は作業ディレクトリを指定しており、-v(--volume)オプションはホストのHerokuSampleAppディレクトリをマウントしています。workdirを指定して、ホストのディレクトリをworkdir上にマウントすることで、rails newでホストのディレクトリにプロジェクトを生成することができます。

Rails用のDocker imageを作成

Dockerfileを下記のようにしました。

FROM rails:latest
MAINTAINER ishikawa_pro

ENV RAILS_ENV=production RACK_ENV=production
WORKDIR /usr/src/HerokuSampleApp
COPY ./HerokuSampleApp/Gemfile* ./
RUN bundle install
COPY ./HerokuSampleApp ./

CMD ["rails","s", "-b", "0.0.0.0"]

プロジェクトのGemfileとGemfile.lockだけを先にマウントしてbundle install しています。こうすることで、再度buildする際にGemfileが変更されていなければ、bundle installのキャッシュを利用してくれるので高速で buildが完了します。また、MOUNTでファイルをマウントせずにCOPYでrailsのプロジェクトをコピーするようにしています。これは、ホストのディレクトリをマウントしてしまうと手元の開発環境では問題ないですが、デプロイ先のコンテナでプロジェクトのディレクトリがマウントできないからです。
あと重要なことは、heroku container registryはENTRYPOINT コマンドに対応していないようなので、ENTRYPOINTではなくCMDを使わないといけないようです。

.dockerignoreの作成

docker-composeでrailsを手元で動かしている状態等でdocker buildし直してデプロイしてしまうと、railsプロジェクト内のtmp/pids/server.pidが残ったままになってしまい本番環境でrailsサーバーが起動しないという自体がよく起こるので、.dockerignoreにtmp/pids/server.pidを登録してbuildする際にdocker デーモンに送らないようにします。

./HerokuSampleApp/tmp/pids/server.pid

イメージをbuildする

docker build -t heroku_sample_app .

これで、heroku_sample_appというリポジトリ名のimageができます。

scaffold

作ったimageを使ってscafoldします。

docker run -it --rm  -v  $(pwd)/HerokuSampleApp/:/usr/src/HerokuSampleApp/ heroku_sample_app rails generate scaffold user name:string age:integer

テーブルスキーマは、

user
name:string
age:integer

です。

docker-composeによる管理

Railsコンテナの設定はここで一旦休憩です。ここからは、docker-composeでRailsコンテナとPostgreSQLコンテナを管理できるようにします。今回PostgreSQLコンテナに関しては、公式リポジトリを使うため特にDockerfileを書いたりはしません。 (PostgreSQLイメージの使い方はDocker HubのPostgreSQLのページを参照してください)
docker-compose.ymlは以下のようにしました。

version: '2'

volumes:
  pgdb:
      driver: 'local'
services:
  db:
    image: library/postgres
    ports:
      - "5432:5432"
    env_file: .env
    volumes:
      - pgdb:/var/lib/postgresql/data
    container_name: HerokuSamplePostgres
  web:
    build: .
    image: rails/heroku_sample_app:latest
    ports:
      - "3000:3000"
    env_file: .env
    environment:
      POSTGRES_HOST: db
      RAILS_ENV: development
      RACK_ENV: develobpment
    links:
      - db:postgres
    volumes:
      - ./HerokuSampleApp/:/usr/src/HerokuSampleApp/
    container_name: HerokuSampleApp
    restart: on-failure
    stdin_open: true
    tty: true

pgdbという名前のvolumeを作成して、/var/lib/postgresql/data にあるdatabase fileをvolumeにマウントさせることでデータベースのデータを永続させています。
詳しく過去の記事でまとめているので読んでみてください。
ishikawa-pro.hatenablog.com
railsコンテナの環境変数でRACK_ENVとRAILS_ENVの設定を、Dockerfile側ではproductionにしておき、docker-compose側ではdevelopmentにすることで、手元の開発環境はdevelopmentで動き、本番環境ではproductionで動くようにしています。
あと、.envファイルを読み込んでコンテナ間で共通の環境変数を設定しています。
とりえあず、postgreSQLのユーザー名とパスワードだけです。

POSTGRES_USER=ユーザー名
POSTGRES_PASSWORD=パスワード

データベース周りの設定

railsのdatabse.ymlを編集してとりあえず、postgreSQLコンテナに繋がるようにだけします。

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['POSTGRES_USER'] %>
  password: <%= ENV['POSTGRES_PASSWORD'] %>
  host: <%= ENV['POSTGRES_HOST'] %>
development:
  <<: *default
  database: HerokuSampleApp_development

.envにユーザー名とパスワードを書いているので、環境変数を使ってdatabase.ymlの中身を書きます。
docker-composeでコンテナ2つを立てて、rake db:createとmigrateして、データベースを作成します。

docker-compose up -d  
docker-compose exec web rails db:create
docker-compose exec web rails db:migrate

一旦動作確認

ここまでで、超雑なユーザー管理アプリ(?)みたいなものができてるはずなのでザックリ動作確認しましょう。あと、データが永続化できているか確認するためにコンテナを落として、立ち上げ直します。

docker-compose restart

データが消えてなければローカルの環境設定は完了です。

f:id:ishikawa_pro:20171214202651p:plainf:id:ishikawa_pro:20171214202655p:plain
f:id:ishikawa_pro:20171214202700p:plainf:id:ishikawa_pro:20171214202703p:plain
動作確認

Herokuへデプロイする

CLIインストール

mac 限定でいきます。Heroku CLIとContainer Registry用のプラグインをインストールします。
(mac 以外の人は、👉を参照。 https://devcenter.heroku.com/articles/heroku-cli )

brew install heroku/brew/heroku
heroku plugins:install heroku-container-registry

インストールが終われば、HerokuへのログインとContainer Registoryへログインします。

heroku login
heroku container:login

Herokuアプリの作成

プロジェクトのディレクトリで、Herokuアプリの作成をします。

heroku create

database.ymlのproduction部分を修正

Heroku postgresを使うので、database.ymlのproduction部分だけHeroku postgres用の設定に直します。

production:
  url: <%= ENV['DATABASE_URL'] %>

rails newするときに --database=postgresqlをつけておけば、databse.ymlが最初からpostgreSQL用の記述になっており、Herokuの場合の設定の仕方もコメントで書いてあるので細かい説明は省略します。

SECRET_KEY_BASE生成

SECRETE_KEY_BASEを生成して、herokuの環境変数に追加します。

SECRET_BASE_KEY=$(docker run -it --rm -v $(pwd)/HerokuSampleApp/:/usr/src/HerokuSampleApp/ rails/heroku_sample_app bundle exec rake secret)
heroku config:add SECRET_KEY_BASE=$SECRET_BASE_KEY

No app specifiedが出る場合は、--app オプションでアプリ名を入れる。アプリ名は、

heroku apps

で取得する。

リポジトリをpushする

下記のコマンドでbuildとpushをしてくれます。

heroku container:push web

Heroku Postgresの設定

Heroku Postgresを有効にするのはコマンド一発で終わりです笑

heroku addons:create heroku-postgresql:hobby-dev

Heroku Postgresの設定が終わると自動でDATABASE_URLの環境変数を追加してくれているので確認してます。ちゃんと環境変数が設定されていれば、テーブル作成します。

heroku config
heroku run rake db:migrate

動作確認

以上の作業でデプロイ完了です。ページを開いてみてうまく動いていれば完璧です。

heroku open

まとめ

記事が長くなりましたが、これで開発環境構築からデプロイまで完了です。
Heroku Container Registoryを使ってみて、自分の作ったdocker imageを使ってめちゃくちゃ簡単にデプロイできるので最高じゃん!という感じです。特にハマるところもなくすんなりデプロイできましたし、無料枠内でアプリ1つは動かせるので僕が今作ってるアプリもHerokuへデプロイしようと思います!
長くなりましたが、今日はこれで失礼します。