とりあえず、やってみる。

よくわからんけど、やってみる。とりあえず、やってみる。

Laradockで環境構築してみた🔰

お久のおはようございます😊まおです🌼


いろいろ闇雲に活動してたら放置してました...!

その「いろいろ」を自分のために備忘録として書きに来ました!

OCJP Gold以降の動きをざっくり...💁‍♀️

  • 5/26:LPIC Level1 取得🎖
  • 6/13:ITパスポート取得🎖
  • 6〜7月:転職活動🏃‍♀️
  • 先日:Docker使いを目指して環境構築💻


こんなところかな🤔

ちなみに副賞として...

  • ボーナスアップ🎉
  • 社員表彰される🎉

とかありました!笑
この辺を足しにして、そろそろMac買いたい...💻笑
開発環境作るのにやっぱりWindowsは罠だらけだった😅笑


時系列順にしたいと思いつつも、
忘れそうなんで、今回は先に環境構築について書く📝


Laradockで環境構築


ざっくりやること
WindowsのパソコンにCodeIgniter(PHPフレームワーク)の開発環境を構築する。

    1. Vagrantで仮想環境(OS:Ubuntu)を作る
    1. 仮想環境に必要なツールを入れる
    1. 仮想環境にLaradock, CodeIgniterを入れる
    1. Dockerで必要なツールを起動


イメージとしてはこんな感じ。
f:id:tonamao:20190730225002p:plain
自分のWindowsのパソコン(ホストOS)に
仮想環境としてUbuntu(ゲストOS)を立てて
その中にCodeIgniterの開発環境を作る、ということ。


動作環境

ツール バージョン
OS Windows10 64ビット
VirtualBox 5.1.38
Vagrant 2.2.5
Ubuntu 18.04.2
Docker 19.03.1
docker-compose 1.24.0



1. Vagrantで仮想環境を作る


パソコンにVirtualBoxをインストール

  • 仮想環境を作ってくれるソフトウェア

VirtualBoxはこちら
https://www.virtualbox.org/


パソコンにVagrantをインストール

Vagrantはこちら
https://www.vagrantup.com/downloads.html

VagrantUbuntuの仮想環境作る

vagrant init bento/ubuntu-18.04


Vagrantで仮想環境起動

vagrant up


Vagrantfileを書き換え
下記の行のコメントアウト("#")を外す

config.vm.network "forwarded_port", guest: 80, host: 8080


Vagrantの再起動

vagrant reload


Vagrantで仮想環境に接続

vagrant ssh



2. 仮想環境に必要なツールを入れる


ここからは仮想環境(今回はUbuntu)の中での話。
参考↓↓↓(参考URL先のまんまをやりました。)

qiita.com


リポジトリをアップデートを

sudo apt update


HTTPS経由でやりとり出来るパッケージをインストール

sudo apt install -y \
     apt-transport-https \
     ca-certificates \
     curl \
     software-properties-common


Dockerの公式GPG keyを追加する

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -


リポジトリ(stable)追加

sudo add-apt-repository \
     "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
     $(lsb_release -cs) \
     stable"


再度aptのアップデート

sudo apt update


Dockerのインストール

sudo apt install -y docker-ce


sudoなしでdocker使えるようにする

権限確認:cat /etc/group | grep docker
権限追加:sudo gpasswd -a {ユーザ名} docker
※{ユーザ名}は、whoamiコマンドを打って出た名前を入れればOK!

sudo chmod 666 /var/run/docker.sock


これで
sudo docker psと打たなくても
docker psでプロセス確認ができる!

docker-composeをインストール

export compose='1.21.1'

sudo curl -L https://github.com/docker/compose/releases/download/${compose}/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose`

権限追加:sudo chmod 0755 /usr/local/bin/docker-compose
権限確認:docker-compose -v


Gitをインストール

sudo apt install git



3. 仮想環境にLaradock, CodeIgniterを入れる


Laradockをクローン

mkdir webapp
cd webapp
git clone https://github.com/laradock/laradock.git


Laradock

https://laradock.io/

DockerでLaravel環境を簡単に作るためのイメージ...として作られたが、
その他PHPフレームワークを中心とする環境に必要なものをどんどん詰め込まれ
割と何でもある な環境のDockerイメージにレベルアップ。
とりあえず入れて、必要なものだけ立ち上げる感じで使います。

Laradockの設定ファイルをいじる
cd laradock
cp env-example .env
vim .env

下記を追加

DB_HOST=mysql
REDIS_HOST=redis
QUEUE_HOST=beanstalkd


CodeIgniterをインストール

cd /
cd /vagrant/webapp/
composer create-project kenjis/codeigniter-composer-installer {codeigniter}

{}部分がディレクトリ名となるので、好きなように。
{codeigniter}ディレクトリは、laradockディレクトリと同じ階層に作る。


4. Dockerで必要なツールを起動


nginxとmysqlとredisを起動

docker-compose up -d nginx mysql redis


下記に接続する

http://localhost:8080/index.php

Welcome to CodeIgniter に接続できれば完了!




ふ~~~
LaradockのDockerfileを見るだけでも
Docker使いになれそうだな~😳



未経験がOCJP Goldとってみた

おはようございます😊まおです🌸

先日、今年の目標の1つにしていた、 OCJP Gold がようやく取れました!!!

f:id:tonamao:20190420220303p:plain

f:id:tonamao:20190420220435p:plain:w200



..ということで
これから受けようと思っている方、
とくに 未経験 初心者 の方の
一助となれればと思い、合格体験記なるものでも書いてみます!!



OCJPとは?


Oracle Certified Java Programmerの略で、
ラクル認定試験のうちの1つです。
名前にもあるように、 Javaプログラマー としての資格になります。

要は、 Javaの資格 ですね!

資格名 難易度 問題数 試験時間 合格ライン
Bronze 60問 65分 60%
Silver 77問 150分 65%
Gold 85問 150分 65%


資格名 ざっくり出題内容
Bronze プログラムの流れ、データ宣言と使用、演算子、分岐・ループ、
オブジェクト指向、クラスとオブジェクト、継承、ポリモーフィズム
Silver Javaの基本、データ型操作、演算子と判定構造、配列、ループ、
カプセル化、継承、例外処理、主要なAPI
Gold Javaクラス設計、ジェネリクス、コレクション、ラムダ、例外・
アサーション、Date and Time API、IO、並行処理、JDBCローカライズ


Goldは、Silverなど前提となる資格が必要になります。



どのくらいの期間必要?


もうこればっかりは個人差です!!笑
この辺は、いろんな体験記とか見て、自分なら...って考えるしかないです。
個人的には、逆に【ここまでにこれをとる!】を決めてしまって、それに合わせて勉強するのがいいかと思います(^^;)

一応ですが...めちゃくちゃ独断と偏見で言えば、
・Bronze・・・1週間~1か月
・Silver ・ ・ ・1週間~3か月
・Gold・・・・2か月~半年 + 業務経験

何この期間の幅...って感じですが、
ぶっちゃけJavaの開発経験が普通にあれば、Silverまではちょっと勉強すればとれると思います。
Goldはさすがにそうはいかない....という感じかと思います。

ちなみにわたしは、
・ 開発経験はほぼ皆無
・ 入社後研修とかでJDBCくらいまではやった(全部コピペだけど←

このスペックでもって、

・Silver :1か月半
・Gold  :2か月

でとりました。
ちなみに1日3~4時間、土日は5~10時間くらい勉強してました。



ぶっちゃけ資格っている?


いるかいらんか、って聞かれたら 「いらん」 って言います、わたしは笑

プログラマ、エンジニアにとって重要なのはやっぱり、
「資格」より「経験や開発物」 です。

いや、業種なんて関係ないですね。
「資格あります!」より「~~できます!」
ですよね。よく聞く話です。知ってるよ!ってね...



じゃあ、なんで資格をとるのか?




「~~できます」が大事だと知ったうえで、
「~~できます」側になるために何かしましたか?
1週間、1か月、3か月...そういう単位で何かできるようになりましたか?


結局、資格は デキるヤツへのきっかけ だと思います。

Javaができるように...って言ったって、じゃあ何したらいいかわからない。
スッキリ(某書籍)読んだけど、何作ったらいいかわらかない。

この辺で思考停止するくらいなら、まだ身についてないと思います。


もちろん初めから、資格とるよりも作れるほうが、早く デキるヤツ になれます。
特に資格の勉強なんか始めるとさらに、
「とる意味あるの?」
「資格の勉強するくらいなら、なんか作ったほうがよくない?」
「資格のための勉強してる時間もったいないよ」
とか言われます言われるかもしれません。


大丈夫。
資格の勉強してる間に、あっという間に開発ができるようになる人なんて、ほぼいません。
そして、「とる意味ある?」っていう人は、絶対 きっとその資格を持ってません。

「Goldとってみたけど、とる意味なかったわ~笑」なんて言ってる人ほとんどいないはずです。笑

なので、大丈夫!自分を信じて勉強しましょう!


ただそれでもやっぱり、 「~~できます!」 が最終的なゴールであることを忘れてはいけません。



使った教材


Silver

【教科書】

スッキリわかるJava入門
f:id:tonamao:20190420213712j:plain:w150

スッキリわかる Java入門 実践編
f:id:tonamao:20190420213716j:plain:w150

【問題集】
オラクル認定資格教科書 Javaプログラマ Silver SE 8 スピードマスター問題集

 ⇒いわゆる白本
f:id:tonamao:20190420213728j:plain:w150

徹底攻略 Java SE 8 Silver 問題集[1Z0-808]対応

 ⇒いわゆる黒本
f:id:tonamao:20190420213722j:plain:w150


Gold

【教科書】

オラクル認定資格教科書 Javaプログラマ Gold SE 8

 ⇒いわゆる紫本
f:id:tonamao:20190420213726j:plain:w150

【問題集】

徹底攻略 Java SE 8 Gold 問題集[1Z0-809]対応

 ⇒いわゆる黒本
f:id:tonamao:20190420213718j:plain:w150




実際どんな感じなの?(一問一答形式)


試験の申し込み...これがまためんどくさいんですよ!!笑


ちなみにこのブログでは、完全解説するつもりはないので、ググってみてください。笑

ただ、未経験や初心者のためなので、グーグル先生でもヒットしにくいめちゃくちゃ当たり前のことや実体験などを書いておきます。


  • そもそも「試験の名前」と「資格の名前」は違うよ

 ⇒例)「試験:1Z0-808-JPN Java SE 8 Programmer I」
    「資格:Oracle Certified Java Programmer, Silver」
 ⇒※日本語と英語で別の名前の試験なのでお間違いなく!

  • 試験はいつでも申し込み・受験が可能だよ

 ⇒全国各地にあるテストセンターにて試験を受けるので、
  テストセンターがやっている日はいつでも受験可能!

  • だけど申し込みは余裕をもって!

 ⇒申し込みのために2つ、試験結果を知るために1つ、
  サイトに登録してアカウントを取得する必要がある
 ⇒試験結果を知るためのサイトは、アカウント取得に1週間ほどかかったり、
  初回ログインを済ませておく必要などがある

  • テストはパソコンで受けるよ

 ⇒選択式の問題で、選択肢から何個選ぶのかは問題に書いてあるよ

  • 当日はメモ用紙としてホワイトボードが渡されるよ(会場によるかも...

 ⇒といっても、消せないので、欄がいっぱいになったら
  交換してもらわなければならない
 ⇒ペンは蓋を開けておくと(いやもはや最初から..?)全然インクが出ない...!

  • 試験会場で結果表に載る用の写真撮影があるよ

 ⇒急に撮られて、永遠にその合格証明書に載ることになるよ...
  試験受けるだけだし...ってすっぴんで行っちゃだめだよ。



こんなもんですかね。



このブログ始めてから、初めて人のためになりそうな記事を書いた気がする....😂笑

わたしも デキるヤツ 目指して、なんか生み出せるように頑張っていきたいと思います😆!

さめがめ作ってみたPart1

おはようございます😊まおです🌸

大変遅くなりましたが、さめがめのゲームロジックがなんとか完成しました😳👏
時間かかりました~😭✨
もはや最近もう放置してた...w


SameGame


https://tonamao.github.io/SameGame/

f:id:tonamao:20190330124551p:plain



SameGameって?
通称「さめがめ」。昔からあるパズルゲームですね!

さめがめは、コンピュータゲームの一種である。 名前の由来は、ゲームタイトル「SAME GAME(セイムゲーム)」のローマ字読みによるもの。(さめがめ#歴史)

出典: フリー百科事典『ウィキペディアWikipedia)』


私個人としては、昔から知っていて、Yahoo!ゲームに「ブロキシー」って名前であったのでよくやってました!

ルールとしては、同じ色が隣り合う2つ以上のブロックを消していき、
なるべく多くのブロックを消すというものです🎮

消されたブロックのところは、下へ、左へ、詰められていきます。



工夫した仕様はこんな感じ


1Clickでチェック、2Clickで消す
SameGameって消したブロックが一瞬で落ちてきて、左に詰められるので、
1Clickでブロックが消えちゃうと、
何が起こったかわかりにくいと思うんですよね。
押し間違えたとかもあると思うしね~。
なので、1Clickめは削除対象のブロックがチェックされるようにしました。

Safariでタップした時のグレーになるのを阻止!
Safariでタップすると、一瞬グレーっぽくなります。
今回1回ブロックを消すのに2Clickするのを考えると
かなりタップ回数が増えるので、画面が点滅して見えます。

今回も検索スキㇽ()を発揮して
「click」「イベント」「スマホ」「画面光る」で検索して、
下記のサイトにたどり着き、参考にさせていただきました💁‍♀️笑

[CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS - YoheiM .NET

要は、CSSで以下追加するだけです。

-webkit-tap-highlight-color:rgba(0,0,0,0);


説明の都合で後ろから見ていきます。w

rgba(0,0,0,0)
言わずと知れた、color指定方法ですね!
最初の3つ:0~255で指定。 黒色 となります。255,255,255なら 白色 になります。
最後の1つ:0~1.0で指定。 透明度 を表し、「0」なので透明となります。

tap-highlight-color
これはもう名前の通り!タップした時のハイライトカラーを決めます。笑

-webkit-
これは ベンダープレフィックス と呼ばれるもの。
ChromeとかSafariとかFirefoxとか各社のデザインに対応したCSSを書く場合につける接頭辞です。


各社用につけるってあたりで想像できると思いますが、
これに頼って作りこみすぎると、手に負えない修正量になっていきそうなので要注意ですね...😅
今回はいったんスマホ操作時の点滅が気になっただけなので、これで進めました。




余談


まず、「上下左右にある色が同じブロックを探す」処理につまずきました。w
次に、「ブロックが重力の原理で下に落ちる」という処理でつまずきました。ww
最後に、「ブロックが1列全部消えたら、左に詰める」という処理であきらめ始めました。www

まあ結局は、仕様を超具体的に落とし込めれば実装できるはずなんですけどね!
なかなか考えが追い付かずって感じでした~...


今後このSameGameを改良していこうかなと思います🙋‍♀️
そういうわけでの Part1 です!

まあ「作ってみた」でいうと、Part1しかありえないけどねw

戒め会

おはようございます😊まおです!
今週は無理でした!!ごめんなさい😭😭😭
完成まで至りませんでした...
来週また頑張ります!!


下記、戒めをつらつらと書いときます(笑)


今回の反省点①:計画性


完成の見通しが立っていなかった
⇒初めての開発でも機能ごとに締め切りを作る

デッドラインがなくずるずるやってしまった
⇒週中の水曜時点で50%いってなければ、方向性を改める


今回の反省点②:優先度を守れなかった


資格の勉強>開発が守れなかった
⇒土日をフルで使って開発を進めてしまったため、勉強時間が減った


来週への教訓とします....w
来週はSameGame!乞うご期待!!!


Canvas初心者がおえかきボード作ってみた!

おはようございます😊まおです!
ちょっと遅くなりましたが、今週もなんとか趣味開発できました!!


今回は、前回同様Canvas APIを使用して、【おえかきボード】を作ってみました🎈
早く画面とソースはこちらです💁‍♀️


おえかきボード


■全画面はこちら

https://tonamao.github.io/OekakiBorad/ f:id:tonamao:20190303174838p:plain



■コードはこちら

See the Pen OekakiBoard by tonamao (@tonamao) on CodePen.



■参考にさせていただいたのはこちら

q-az.net


↑↑↑ロジックの大枠など参考にさせていただきました!

www.yoheim.net


↑↑↑スマホに対応させるために参考にさせていただきました!

イベントリスナーの種類


今回のCanvas APIとしては、前回開発して理解した内容の応用でなんとかなりました!
が、今回つまったのは、イベントリスナーの種類でした。

今回使用したのは、こちらです。

■イベント

mousedown・・・・・・マウスのボタンが押されたとき
mousemove・・・・・・マウスカーソルがターゲット内を動いているとき
mouseup ・・・・・・・マウスのボタンが離されたとき
mouseout・・・・・・・マウスカーソルがターゲット外にいったとき


今回は、canvas内をドラッグしている間絵を描く仕様となるので、
mousedownで描画開始、mouseupで描画終了となるように実装しました。

また、canvas外にカーソルが動いた場合、描画終了となります。



続いてこれらの原理をもとに、マウスを使用しないスマホ対応も行いました!
スマホはマウスイベントでは動いてくれないので、専用のイベントを使用します。
実装時はこれを知らず、ここまででぬか喜びしておりました🙄


スマホ用に使用したイベントはこちらです。

スマホ対応用イベント

touchstart・・・・・・タップ開始
touchmove ・・・・・ターゲット内を動かしているとき
touchend・・・・・・タップ終了



これでスマホ対応できた....と思いきや..!?....でしたね..



Safariで画面がびよ~~~ん


決してふざけているわけではありません。はい。...😅

Safariの仕様として、画面をスライドした際に、
画面外が表示され、画面がびよ~んって感じになりますよね?

これに対応しなければ、おえかきボードが動いてしまって
おえかきどころではありません。


参考サイトの情報をもとにこちらを使って対処しました。

event.preventDefault();



これを入れることで、Safariのデフォルトの動きを制御できます。

今回私は、canvasタグ内でおえかきをする場合のみ
制御するように処理を入れました。






今回はなかなか実装する時間がなくて、大変でした。。。
しかもスマホ対応のために別途処理が必要とは....

まだまだですね...!
引き続きいろいろ、勉強していきたいと思います!


来週こそはゲームらしいものを作ってみたい...💪


Canvas初心者が雪を降らせてみた

おはようございます😊まおです!
今週はいつもと違って、ただの画面を作りました!!w


ずっと使ってみたいと思っていたCanvas APIを使ってみました!!
いいから早く画面とソースだけよこせってこともあると思うのでこちらです💁‍♀️w↓↓


雪が降る画面


■全画面はこちら

https://tonamao.github.io/Snow/ f:id:tonamao:20190223160745p:plain

■コードはこちら

See the Pen Snow by tonamao (@tonamao) on CodePen.



Canvas API


Canvas API画面に図形を描画できる機能です。
Canvas APIってのは俗称なのかな~🤔

言語としては、HTMLとJavaScriptを使います。
HTMLのcanvasタグをJavaScriptで操作していく感じです。


詳細は↓↓↓のURLとかとても参考になりました!(多分非公式ですが...)
http://www.html5.jp/canvas/ref.html


たいぶ見切り発車で作りましたが、なんとか一週間でできてよかったです!!
冬ということにちなんでの「雪」でしたが、ギリですかね...w

これで少しはCanvas APIに慣れたかな~




下記、今回の実装のポイントだけ簡単に書きました。

Canvasの縦横比率がおかしい


ここにアプリを載せるとき、スタイルの設定を分業させていて
別途CSSファイルを作ってました。
今回も同様にCSSファイルを別途作成してました。

そこで試しに正方形を描画してみたところ...
縦長の長方形になってしまいました...!!!


原因はcanvasのwidthとheightの設定にあるんだとか...!?

styleのwidth、heightではなく、属性のwidth、heightで設定しなければならない!



???





まあ、下記を見てください。

■styleで設定

<canvas style="width: 500px; height: 500px;"></canvas>


■属性で設定

<canvas width="500px" height="500px"></canvas>



後者の属性で指定してあげないと、canvas自体のサイズを変更することはできないようでした。

属性とスタイルって違いがあったのか~(;'∀')w



JavaScriptのclassを使ってみた


JavaScriptの知識はほぼ皆無です、すみません(-_-;)。。
今回「雪」を作るのに、一粒一粒の設定を行っているわけですが、
こいつらをクラスみたいに持てないのかな~と思って調べていたところ
JavaScriptにclassってないイメージでしたが、2015年頃に追加されてたみたいですね~(いつの話...w

■class定義

class Snow {};

こんな感じで書けます。

■コンストラク

class Snow {
 constructor(){};
};

使うときはnewすればOK!
■classを使う

new Snow();



今回のコードも見様見真似、調べた知識をもとにclassを使って実装しております!

こんな感じで使えばいいのかな~
勉強になりました。




おまけ~NG集~


作成段階でミスったやつを載せてみますw

■雪が伸びていく...
f:id:tonamao:20190223171541p:plain

■雪が消えていく...
f:id:tonamao:20190223171536p:plain



ちなみにjQueryで一発で雪を降らせるプラグインがあるんだとか...(; ^ ー^)

以上ですwww

第4弾Webアプリケーションの公開

おはようございます😊まおです!
今週はStop Watchを作って公開してみました。



今回の成果


◼︎Stop Watch

https://tonamao.github.io/StopWatch/
f:id:tonamao:20190216161459p:plain
今回もドットインストールにあるやつです🙋‍♀️

そろそろ自分でも何か作ってみたいな〜

◼︎ JavaScriptでストップウォッチを作ろう

https://dotinstall.com/lessons/stop_watch_js_v4



今回作ったアプリのポイントを書いてみました!





ボタンを切り替えにする


ストップウォッチのスタートストップボタンの話です。

スタートストップの「ボタンの役割」を考えてみました!
この2つのボタンって、交互にしか必要にならないボタンですよね!
スタートしたら次はストップなわけなので。


◼︎元のボタン

f:id:tonamao:20190216150638p:plain
StartとStop、そしてResetのボタンが3つ並んでますね~


◼︎作ったボタン

f:id:tonamao:20190216150826p:plainf:id:tonamao:20190216150829p:plain
ボタンは2つしかなく、押すと切り替わります。


ちなみにですが...

◼︎iPhoneのストップウォッチ

f:id:tonamao:20190216155446p:plain
iPhone開始停止
同じボタンを切り替えて使うようですね!



そもそも必要のないボタンは減らすとかって
小さなことだけどUIを改良することになりますね!




フラットデザインを意識する


css」「デザイン」とか調べてると出てきました。
フラットデザイン!!

要は、最近よくあるデザインってやつですかね!笑
なんというかペタペタした感じのやつです!←

デザインのデの字も知らない私なのでご容赦ください...(−_−;)


ひと昔前は、スキューモーフィズムというデザインが流行っていたようです。
2013年ごろからこれに代わって、現在はフラットデザインが主流のようですね。
iPhoneiOS6とiOS7を比べるとすごくわかるようです!

個人的にはInstagramのアイコン!

iOS6      iOS7

だいぶ変わってますね!

右の今のやつのがペタペタしてますね!w






なんか青くなるの嫌!!笑




なんのこっちゃww



こういうことです!
f:id:tonamao:20190216162242p:plain

文字として選択できちゃうんですよね~

それをアプリっぽく?できないようにしました!

うん...できないはずです!w
パソコンからの方は試してみてください~

「文字」「青くなる」「いや」みたいな検索した気がしますwww


CSSで制御しました!

user-select: none;

これを使いました。


例えば↓↓↓の文章。

この文章は選択できるよ
この文章は選択できないよ



こういうわけです。

<div>この文章は選択できるよ</div>
<div style="user-select: none;">この文章は選択できないよ</div>






これでおみくじアプリも改良しました~!!!

https://tonamao.github.io/test.first-omikuji/
f:id:tonamao:20190205001423p:plain




次なにつくろうかな~~