Docker for Macのステータスバー項目のまとめ

空き時間でDockerの勉強を基礎からやっていこうと思っていますので、調べたことを少しずつ記録していきます。
今回はDocker入門としてステータスバーのくじらアイコンの各項目をまとめていきます。

投稿時のDocker for MacのVersion

Version 17.12.0-ce-mac49 (21995)
ちなみにDockerのバージョン表記はこの場合
17年12月にリリースされたX.versionのDocker Comunity Editionという意味のようです。

Docker for Macのステータスバー

Docker for Macをインストールすると、恒例のくじらアイコンがステータスバーに追加されます。

Docker is running

Dockerデーモンが正しく動いていればrunningとなっているはずです。Docker for Macのバージョンによってはrestart釦があったようですが、今回の最新バージョンではないようです。

About Docker

インストールしているDockerバージョンやRelease notesを見ることが出来ます。

Preferences

この項目はまた別途調べます。

check for Updates...

この項目をクリックするとDockerの最新バージョンがあるかのチェックを行ってくれます。

Diagnose and Feedback

Docker for Macへの質問や不具合などのFeedbackをすることができます。

Documentation

Docker公式のドキュメントサイトへのリンク。

kitematic

今回初めて知ったのですがDockerをGUIで操作するためのアプリケーションがあるようです。kitematicをインストールししておけば、ここをクリックするだけで起動できるようになるそうです。
kitematicは下記サイトでなんとなくイメージをつかめました。
uxmilk.jp

Docker Enteprise Edition

Docker Enteprise Editionへのリンクとなります。

Docker Store

Docker Storeへのリンクとなります。Docker StoreではDockerが公開しているソフトウェアやコンテナを見ることができます。

Sign in / Create Docker ID

Docker cloudやDockerアカウントを作成することができます。

まとめてみた感想

今までこういったステータスバーを一つずつ調べたことはなかったのですが、意外と勉強になる情報があるようです。
今回調べたKitematicというのは初めて知りましたが、GUIで簡単操作でできるのであれば使ってみたいと思います。

Google homeでiTunesの曲を再生する

遂に我が家にもGoogleHomeが来たので早速遊んでみました。

まず最初にしたのは音楽を聴く環境の構築をしました。私はいつもiTunesを使って音楽を聴いていたので、その中から好きな曲を声で再生できるようにしたいと思います。

Google play Musicにアップロードして音楽を再生する

購入してから当たり前のことに気づきましたが、Google Homeは直接iTunesにアクセスすることはできません。そのためGoogle play MusicにiTuensの曲をアップロードするという作業が必要になります。

ちなみにGoogle Play Musicの無料アカウントでも問題ありません。自分のiTunesの音楽を聴きたいだけであれば、音楽再生が可能です。ただし事前にクレジットカードの登録をしておく必要があります。(これをしていなかったために、一晩待っても進捗95%のまま完了しませんでした)

アップロードするにはMusic ManagerというフリーToolを使うことでGoogle Music Playerにアップロードしてくれます。これを使わなくてもアップロードは出来ますが、MusicManagerを使えばiTunesに曲が追加されても自動でアップロードしてくれます。

あとは「ねぇ、Google」「サカナクションのアイデンティティ流して」といえば再生してくれます。

GoogleHomeを使ってみた初日の感想

初めてスマートスピーカーを使ってみましたが、今まで経験したことのない体験でとてもワクワクしました。
昨夜はベッドに入って横になった状態で「眠れる曲かけて」というとオルゴール音楽をかけてくれるなど、こちらの期待にかなり応えてくれます。

そして何よりも音声認識の精度に驚かされました。小さな声で「ねぇ、Google」と言ってもちゃんと反応してくれます。

今後はNature Remoを購入して赤外線リモコンでエアコンや照明、テレビなどをIFTTTと連携させて便利な部屋を作っていきたいと思います。

Nature Remo

Docker+Wordpressで会社の部内コミュニティサイトを作った

半年程前になりますが、会社の部内用のコミュニティサイトを立ち上げました。
今日はネタがないのでそのコミュニティサイトについての話を振り返ってみます。

背景

私の所属している部署(400人ぐらい?)ではあまり勉強会をやったり、仕事以外の技術のことで盛り上がったりすることが少ないイメージがあります。
しかし興味がないわけではなく、個人がひっそりとやったり一部だけで盛り上がったりしているようなんです。
もっと共有したら活気が出て、技術面も向上するのに、、、

ということで部内のエンジニア同士が交流できる場を作るため私は立ち上がりました！

Docker+Wordpress

どうやってHPを作るのか色々と考えた結果、一番簡単にリッチなサイトが作れるようにWordpressを使うことにしました。社内の開発サーバーでLinuxを使っていたためDockerを入れ、Wordpressコンテナを立ち上げました。
(さらっと書きましが0からの勉強かつ業務の傍らの作業でしたのでWordpressコンテナを立ち上げるのに1ヶ月、サービスを公開するのに約半年弱かかりました。。。これはまた別で書きます)

どのようなサイトを作ったのか

実はWordpressのテーマを決めるのに2週間以上悩みました。答えがでず悩んでいたところ、ある目標となるコミュニティサイトと出会いました。

面白法人カヤックさんのつくってみたラボ

create.kayac.com
面白法人カヤックさんのつくってみたラボが心に刺さり、こんな風に作ったモノをみんなでお披露目しあいが出来たらめちゃくちゃ楽しいだろうなと思いました。

そのためモノづくりが好きな人達が集まり「面白いものがあるから見てよ」とか「良い記事あるから読んでみて！」「このvimの設定見てよ」といった「ちょっと、ちょっとこれ見てよ！！！」が集まるワクワクできるサイトを作ることが目標となりました。

結果として、記事投稿タイプに適したWordpressテーマを選ぶことで決まりました。

この経験から得たもの・学んだこと

技術知識

まず第一に間違いなく技術力があがりました。このコミュニティサイトを作ることでDockerやVagrantといったサーバー側の知識だけでなくWordpressを使ったHP作成もすることができるようになりました。これは1年前の私では考えられません。

余談ですが、このときはHTMLもCSSすらも読めなかったのに、TechAcademyを受講し半年間さらに勉強した今の私はかなり成長したなと実感しました(自画自賛)。この1年で出来るようになったことがかなり増えたと思います。

デザインや機能はユーザーの目標達成のため

Wordpressのテーマ決めで学んだことですが、やはりデザインや様々な機能はユーザーの目標を達成するためにある(作る)のだと改めて思いました。

何も明確になってないままHPのデザインとなるWordpressのテーマを選ぼうとしても、全く決めることができませんでした。また仮に決めたとしても、なぜこのテーマにしたのか？という問いには答えられませんでした。

しかしユーザーにどのような体験を与えたいのか？このサイトで達成したいことは？想定するユーザーの課題は？といったことが明確になると選ぶべきテーマはすぐに決まり、なぜこのテーマにしたのかという問いに対しても明確な答えを持つことができました。

今後の課題

作ってみたものの、PV数はまだまだ低く全体人数の5%程度しか利用されていません。しかしこの数ヶ月間色々と取り組みをした結果ちょっとずつではありますが興味を持ってくれる人が増え、記事を投稿してくれる人数が増えてきました。

そして今考えている次の作戦は名付けて「あのお店、なんか行列できてるよ作戦」です。

すぐに興味を持ってくれそうな人(コアユーザー)を探しておき、その人達中心に巻き込んでいきます。それが盛り上がっていけば傍から見た人たちは、「なんかあのお店行列できてるから、行ってみよう」というのと同じ心理でサイトを覗きに来てくれる人が増えるのではないかと考えています。

100人が嬉しいものを作ろうとするのではなく、20人が嬉しいものを追求していこうと思います。

「作って、終わり」には絶対しない！

目指すはつくってみたラボ！！

RailsでLoadError: Unable to autoload constantの原因

Railsで下記エラーが出て結構ハマってしまったのでその原因をメモしておきます。

Unable to autoload constant Relation_User, expected *********app/models/relation_user.rb to define it

原因

どこかで、間違えてRelation_Userという名前を書いてしまっている。
RelationUserではなくRelation_userをロードしようとして失敗している。

探してみるとModelのUserクラスで間違っていました。

  has_many :reverses_of_relation_user, class_name: 'Relation_user', foreign_key: 'follow_id'

Model名にアンダーバーを使ってもクラス名にアンダーバーはつかない

Model名：Relation_user
Class名 ：RelationUser

そのためClassを修正して解決しました。

  has_many :reverses_of_relation_user, class_name: 'RelationUser', foreign_key: 'follow_id'

あとはGitのissueにメモして終わり。

DBからデータ取得する際にfindとwhereの違いに苦しんだ話

Railsを学び初めて約6ヶ月になりましたが、がっつりRailsを勉強しているわけでもないのでなんとなく使っていて動くけど、ちゃんと理解していない部分がまだまだたくさんあります。
今日はデータベース操作でMysqlからデータを取得する際に、findとwhereの違いについて4時間悩まされた話を書いていきます。

やりたかったこと

Railsを使って、お気に入りのCDアルバムを記録する機能を作っています。
その中で、あるアルバムをお気に入りしている全ユーザー情報を表示したいと思っています。

データベースのイメージ

User

n ----- 1

中間テーブル

1 ------ n

Album

ハマったこと

まずアルバムの情報が欲しいためあるAlbumインスタンスを取得します。
(既に登録されている前提)

# アルバム名とアーティスト名が一致するアルバムのインスタンスを取得
 @albm = Album.where(album: album, artist: artist)

# そのアルバムをお気に入りしているユーザーのインスタンスを取得
 @users = @albm.favorite_users

どう見てもこれでOKだろうと自信満々に保存すると次のエラーに怒られました。

undefined method `favorite_users' for #

要は@albmはfavorite_usersメソッドなんて持ってないぞ！と言っています。その原因は調べても調べてもわかりませんでした。
そしてrails consoleを使って「find」は上手くいくけど、「where」だと上手くいかないという事実を漸く見つけ解決に繋がりました。

findはインスタンスを返すが、whereは範囲を絞るのみ

find (find_by)はすぐに利用できるデータ

findは指定したモデルのインスタンス（すぐに利用できるデータ）を返す

特定のIDのデータを取得したい場合はfindやfind_byを使いますが、これらはある特定(一意)のインスタンスを取得します。そのため先の例でいえば@albm.idのように使えます。

whereは範囲を絞っただけ

whereメソッドを使った場合、指定したモデルのインスタンスではないのでそのままデータを利用できない

where句とはあくまで条件に当てはまるインスタンスの集合体であり、一意のインスタンスを取得しているわけではないのです。今回の場合、一つしかないことが分かっていたため頭では一意に絞ったものだと思いこんでいました。そのため@albm.idがエラーとなってしまっていました。

解決方法

# アルバム名とアーティスト名が一致するアルバムのインスタンスを取得
 @albm = Album.where(album: album, artist: artist).first

とすることで解決しましたが、ブログを書きながら下記でもできることが分かったのでfind_byを使うことにしました。

# アルバム名とアーティスト名が一致するアルバムのインスタンスを取得
 @albm = Album.find_by(album: album, artist: artist)

以上、おそらく初心者が陥りやすそうなfindとwhereの違いでした。

参考サイト
qiita.com

CSSを使ってフルスクリーンページにグラデーションをつける

フルスクリーンページを作るために調べたことのおまけとなります。
今回はフルスクリーンページにグラデーションを用いる方法を調べました。
参考にした、、、というよりも今回はほとんどこのサイトをそのまま持ってきてます。
www.webcreatorbox.com

グラデーションの付け方

backgroundプロパティでグラデーションを実現出来ます。

body {
  background: linear-gradient(#05FBFF, #1E00FF);
}

ただしグラデーションだけで使うことはおそらくなく、画像の上にオーバーレイとして使用する方が多いと思います。
その場合にわざわざ画像を編集しなくても、CSSで実現が出来るようです。

#index {
  background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)), url(../images/bg.png);
}

このように先程のlinear-gradientに背景画像をカンマで区切って記述すれば

このように簡単にキレイなグラデーションを重ねることができるようです。

まぁ何はともあれ、最初に紹介した参考ページを見ればかなりまとまってるのでこちらを見るのがいいかと思います。

フルスクリーンページで背景に網目を重ねてテキストを見やすくする

前回フルスクリーンページの作り方を勉強しました。
okerra.hatenablog.com
そのおまけで今回は背景に網目を重ねるということをやってみます。

網目を重ねることの目的

たまに網目がかかっているWebページを見かけますが、その目的を考えてみました。

• 背景画像とその上にあるテキストのコントラストが近い場合に見やすくする
• 背景画像や動画をフルスクリーンで拡大したことによる画質の劣化を目立たなくする

実装方法

実装の方法は今回はbackground-imageに2つセットすることで実現します。

まずは前回の知識を使って簡単なHTMLとCSSを書いてみます。

見て分かるように、この例では背景に白が多いのにその上に白のテキストを置いているため非常に読み辛くなってしまっています。
そこで今回はこの上にアミ掛けを入れて読みやすくしていきます。

完成イメージ

style.css

#index {
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

事前準備

まずは下記サイトから上に重ねるための素材をダウンロードします。
Vegas Background SlideShow
この中のvegas/overlays/の中にあるので、好みのものを使います。

background-imageの変更

background-imageは実は2つ設定をすることが出来るそうです。今回は先程ダウンロードした素材の08.pngを使用します。
ここで重要なのは上のレイヤーとなる方を先に記述する必要があります。そのため先に08.pngを記述し、後に背景画像を設定します。
style.css

#index {
  background-image: url("../images/08.png"), url(../images/bg.png);
}

これだけだと08.pngはあまりにも小さいので見た目に変化がありません。しかしこれをどうやって網目上にするかというと、repeat効果を使用します。

style.css

  background-image: url("../images/08.png"), url(../images/bg.png);
  background-repeat: repeat, no-repeat;

これで08.pngが繰り返して表示され、あたかも網目の画像を上に重ねたかのように見えます。
最後に画像の大きさなどを調整して完成です。

style.css

#index {
  background-image: url("../images/08.png"), url(../images/bg.png);
  background-repeat: repeat, no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: auto, cover;
}