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

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

【合格体験記】AWSソリューションアーキテクト - アソシエイトに無事合格

お久しぶりです😊まおです🌻

先日AWSソリューションアーキテクト - アソシエイトの試験を受け、
無事合格しました!!!

今回は、AWSソリューションアーキテクト - アソシエイトについて、今後受験を考えている方の参考になるよう、合格体験記を書いていこうと思います。



AWSソリューションアーキテクト概要


受けた試験は、SAA-C02というバージョンのものになります。

項目 内容
概要 AWS利用の最適な設計について
問われる試験
問題 選択問題 65問
時間 130分
合格ライン 720点以上
採点 100〜1000点で採点
50/65問が採点対象
15/65問は採点対象外※
受験料 15,000円
模擬試験料金 2,000円
受験の前提条件 なし
言語 英語、日本語、韓国語、中国語(簡体字)

※採点対象外の15問については、情報を収集し今後採点対象の設問として使用できるかどうかを評価するとのことです。

詳細は本家をご覧ください。
https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/



受験時の筆者スペック


受験時点での知識によって学習量が変わるので、私のスペックをまとめました。

  • サーバーサイドエンジニア
  • 開発経験はざっと2年くらい
  • AWSを利用した開発経験1年半ほど

文字だけではわかりにくいので、
AWS試験範囲のサービス一覧について
どの程度の理解があったかを簡単にまとめてみました!

■受験時の筆者スペック
f:id:tonamao:20210815114906p:plain:w400f:id:tonamao:20210815115029p:plain:w400f:id:tonamao:20210815115121p:plain:w400



学習方法


筆者の場合、AWSサービスに関する学習は、

  • ①業務のための日々の学習
    • 初学者向けの本と黒本の読み込み
  • ②試験に向けた学習
    • Udemyでの学習とハンズオン実施

の2段階で行いました。
本については後ほど紹介します。

学習期間

試験に向けた学習期間は、約2週間で40時間ほどでした!!

なんだかすごく短いようですが...
AWSを利用した業務に携わっていたこともあり、試験に向けて補う内容がそれほど多くはなかったのだと思います!

実際、
AWSサービスを利用した経験が少なかったり、
レガシー系の技術経験のみの状態
では、もう少ししっかりと学習期間を設ける必要があると思います!

学習教材

筆者の場合は、本2冊とUdemyのみで学習を行いました!
私は模擬試験も受けずに受験してしまいましたので、総額6,000円くらいで手安く学習させていただきました!!


まず知識が0の状態からAWS概要を知るための本です。

【対象】
AWS初学者、開発未経験者

初心者向け内容なので、人によっては不要かと思います。

f:id:tonamao:20210815112304p:plain:w150

Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書



続いて、いわゆる黒本です。

【対象】
本試験受験者向け

各サービスや試験範囲に関するアーキテクチャの解説と問題付きです。
ただしAWSは日々アップデートされていくので、本に記載された内容は厳密にはすでに最新の情報ではないかもしれません。
または試験範囲のほうがアップデートされているかもしれません。
本が制作される期間など考慮すると、情報が最新であるのか、試験範囲が網羅できているのか、という点で本での学習には注意が必要です!
こういった点も踏まえて、ある程度短期戦で資格を取ってしまうのが良いかと思います。

本は試験に合う最新版を検索してください!
ちなみに私は古いバージョンの本を購入していたので模試はついていませんでした。

f:id:tonamao:20210815112711p:plain:w150
徹底攻略 AWS認定 ソリューションアーキテクト − アソシエイト教科書[SAA-C02]対応



最後に、試験に向けて最も参考になったUdemyの講座です。
筆者の場合↑↑で紹介した本は、1年ほど前に事前に読破していた状態であり、試験に向けてはこのUdemyの講座のみで学習しました!

【対象】
本試験受験者、AWS学習者 (AWSを業務で使っている方にもオススメ)

こちらは、試験範囲の各種サービスの詳しい説明からハンズオンまで学習できます。
資格のためだけでなく、AWS学習者全般にオススメできる内容です!
ハンズオンは、業務でも個人でも開発に活かせる内容なので、今後見返すために買っておくなどもアリだと思いました!
そして何よりセールだと安い!とりあえず買っておけ、と言える講座でした!

f:id:tonamao:20210815113430p:plain:w300
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版) | Udemy


Udemy模試の難易度は妥当か?

紹介したUdemyの講座は、3回分の模試がついています。
試験で戦えるような妥当な内容の模試なのか、という点が気になると思います。

ズバリ内容は、妥当 であり、
3回分全て必ず解いておくべき!だと思います!!

やってみると分かりますが、
1→2→3回目と、一般的な内容からだんだん詳細な内容まで問われるようになっている気がします。
1回目だけでは少々物足りなく、
2〜3回目の内容ばかりが出題されるほどではない
といった感じでした。

1回目の模試の内容は最低限把握しておくべき、
2〜3回目の内容を理解することで、確実に合格ラインに持っていくといった具合です。

試験に非常に役立つので、是非とも3回分やっておきましょう!!

それ以外の教材

これら以外にも、試験に向けたオススメ教材はありますので、詳細は載せませんが参考にしてみてください。
ちなみに公式のサンプル問題は、試験レベル把握のためにもやっておくべきです!



試験当日の注意点


本番試験は模試よりも解きにくいので注意!

当日実際に受けてみて、最初に、
「アレ...全然解けないかも...」という感覚に陥りました。
というのも、おそらく理由は2点ありまして、
1点目は、【翻訳の問題】です。

こちらはベンダー試験あるあるな気がしますが
問題文の訳が少々怪しい時がたまにあります。
ただ、試験結果に影響するほどのことではないです。
基本的に試験時間には余裕があると思うので、普段より多少時間がかかるという程度で済みます。

日本語の試験を選択していても、英語の問題文は確認可能なので、両方参照しながら解くと良いと思います。


2点目は、【選択肢の傾向】です。
Udemyの模試レベルは妥当と書きましたが、
本試験での選択肢のほうが厄介に感じました。

Udemyに比べ本試験は、4つの選択肢に関連性がないことが多かったように思います。
例を挙げて説明します。


例) Udemy模試の選択肢の傾向

  • うさぎは足が速くカメは遅いが、カメの方が先にゴールした
  • うさぎは足が遅くカメは速いが、カメの方が先にゴールした
  • うさぎは足が速くカメは遅いが、うさぎの方が先にゴールした
  • うさぎは足が速くカメは遅いが、うさぎとカメは同時にゴールした


よくある選択問題の選択肢の傾向はこのようなパターンです。
Udemy模試もこういった選択肢の問題が見受けられました。
このパターンの場合、それぞれの選択肢の違いを意識しながら、問題文と照らし合わせて選択肢を絞ることができます。

が、本試験ではそれぞれの選択肢の内容がバラバラであることが多く、
突拍子もない選択肢が入っていたりするので、理解に時間がかかりました。

ただこれは逆に言うと、
「冷静に考えればこれは絶対有り得ない」という選択肢が混ざっているということにもなるので、選択肢を絞り込みやすいという点もありました。

模試よりも多少時間がかかってしまうと思いますが、
こういったところに惑わされず、冷静に対処できれば、
Udemyで学習した内容で試験突破できると思います!

直前の試験申し込みに注意!

本試験はPSIかピアソンVUEのいずれかの配信プロバイダーを選んで試験を受けます。
私はピアソンVUEを選んだので、ピアソンの場合での話になります。

AWS試験に限ったことではないですが、テストセンターでいつでも試験が受けられる!とは言うものの、
いざ予約しようとすると意外と試験日時は限られています!
試験会場も都心以外は結構少なくなってしまうので
少なくとも1ヶ月前には一度会場と試験スケジュールを確認しておきましょう!

...と言いつつも、
試験開始の24時間前まではキャンセル・変更可能だったりするので、
学習状況に応じて確実に合格できるタイミングを狙うのもアリです!
(実際私も、前日に解いた模試が微妙な出来だったので、直前で1日伸ばしました...w)


実際受けてみて...


ここからはただの感想になります。

実際、試験を受けてみて...
まずは学習して良かったと感じました!

AWSのみならず、クラウド利用におけるアーキテクチャやモダンな開発手法、考え方を知ることができたので、思っていたより幅広く活かせる知識を習得できました!

そして学習期間は短期戦に限る!と思います。

私も業務で使っているとは言え、最初に本で概要をさらった時期から1年以上経っていたので、サービスの根本的な部分の改善が行われていたりするなどかなりのアップデートがありました。
本腰入れて学習した際に資格までとってしまうのが効率的かと思います!
(私も日々アップデート情報に目を向けないとな、と反省...)


ということで、以上、合格体験記でした🧚🏻‍♀️


Macを購入してLaradockでCodeIgniterのコンテナ環境構築してみた

お久しぶりです😊まおです!

今回は、Dockerを使ったPHPの開発環境を構築します。

先日Macを購入したので、CodeIgniterの開発環境を再構築するついでに手順を残しておこうと思います。

環境
ツール バージョン
OS mac OS (64ビット)
Docker 19.03.5
docker-compose 1.24.1


対象者
  • Mac初心者
  • 初級エンジニア
  • Docker初心者

※なお、筆者スペックも同様です😳

大まかな流れ
  1. Homebrewインストール
  2. Gitインストール
  3. Dockerインストール



環境構築手順


1. Homebrewインストール

HomebrewはmacOSで使えるパッケージマネージャーです。
よくインストール手順とかに出てくるbrewというコマンドはこれですね!

Homebrewはその文字通り、独特の表現をするため、
コマンドの意味など深く知りたい方は、下記の記事など参考にしてみてください。
パッケージ管理システム Homebrew - Qiita


Homebrewのサイト(https://brew.sh/)からインストールします。
Englishのところを変えれば日本語にもなりますよ^^

インストールと書かれている所のコマンドをそのままコピペします。
※更新されることもあるので、必ずサイトからコピペしてください。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

コピペしたコマンドは、ターミナルを開いてターン!としましょう!
いろいろなものをダウンロードするので時間かかるかもしれません。



2. Gitインストール

Homebrewのインストールが完了すると、早速brewコマンドを用いてのインストールになります♪

プロジェクトをcloneするためにGitをインストールします。

$ brew install git




3. Dockerインストール
$ brew cask install docker

caskというのはMacGUIのアプリケーションも同時にインストールするというものです。
参考:homebrew-caskとは - Qiita



4. LaradockをcloneしてPHP環境を整える

Laradockとは、Dockerを用いてLaravel環境を構築するためのオープンソースのプロジェクトです。
現在では、Laravel(PHP)だけでなく様々なアプリケーションのコンテナ環境用Dockerfileが納められています。
LaradockのGitHubhttps://github.com/laradock/laradock
Gitのインストールも完了しているので、任意の場所にLaradockをcloneします。

$ git clone https://github.com/laradock/laradock.git



続いて、Laradock公式にも記載のある設定ファイルを修正します。
cloneしたlaradockディレクトリに移動して、.envファイルを作り修正します。

$ cd laradock
$ cp env-example .env
$ vim .env


.envファイルはコンテナ起動時に読み込まれる設定ファイルです。
今回は下記のMySQLの設定を追加します。

DB_HOST=mysql




5. プロジェクト起動

最後にPHPのプロジェクトを起動します。
今回はCodeIgniterというPHPフレームワークをプロジェクトとして使用します。
まずlaradockと同じディレクトリにプロジェクト(今回はCodeIgniter)をcloneします。

$ git clone https://github.com/bcit-ci/CodeIgniter.git


この段階で起動しても接続は可能ですが404になってしまうので、nginxの設定を行います。

$ vim nginx/sites/default.conf

rootのURLを修正します。
MyProject/publicとなっている部分を起動したいプロジェクトに合わせます。
f:id:tonamao:20200102120954p:plain
今回はlaradock ディレクトリにcloneしたCodeIgniterに合わせ、
root /var/www/CodeIgniter/;とします。

f:id:tonamao:20200102145851p:plain


それでは起動してみましょう!

$ cd laradock
$ docker-compose up -d nginx mysql


初回はイメージが作成されるため、時間がかかります。

完了したら、localhostでアクセスできるようになります。
CodeIgniterのメイン http://localhost/index.phpにアクセスします。

f:id:tonamao:20200102173035p:plain
無事アクセスできました!!


今回はCodeIgniterのプロジェクトを起動しましたが、
Laravelはもちろん、docker-compose.ymlに書かれている他のアプリケーションも
簡単に起動することができます!

PCを変えても簡単に環境構築できました😊



次回は、先日合格した応用情報について体験記や対策などを書いていきたいと思います🧚🏻‍♀️

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週間ほどかかったり、
  初回ログインを済ませておく必要などがある

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

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

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

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

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

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



こんなもんですかね。



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

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

JavaScriptで さめがめ 作ってみた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タグ内でおえかきをする場合のみ
制御するように処理を入れました。






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

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


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