【合格体験記】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試験範囲のサービス一覧について
どの程度の理解があったかを簡単にまとめてみました!
■受験時の筆者スペック
学習方法
筆者の場合、AWSサービスに関する学習は、
- ①業務のための日々の学習
- 初学者向けの本と黒本の読み込み
- ②試験に向けた学習
- Udemyでの学習とハンズオン実施
の2段階で行いました。
本については後ほど紹介します。
学習期間
試験に向けた学習期間は、約2週間で40時間ほどでした!!
なんだかすごく短いようですが...
AWSを利用した業務に携わっていたこともあり、試験に向けて補う内容がそれほど多くはなかったのだと思います!
実際、
AWSサービスを利用した経験が少なかったり、
レガシー系の技術経験のみの状態
では、もう少ししっかりと学習期間を設ける必要があると思います!
学習教材
筆者の場合は、本2冊とUdemyのみで学習を行いました!
私は模擬試験も受けずに受験してしまいましたので、総額6,000円くらいで手安く学習させていただきました!!
まず知識が0の状態からAWS概要を知るための本です。
【対象】
AWS初学者、開発未経験者
初心者向け内容なので、人によっては不要かと思います。
Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書
続いて、いわゆる黒本です。
【対象】
本試験受験者向け
各サービスや試験範囲に関するアーキテクチャの解説と問題付きです。
ただしAWSは日々アップデートされていくので、本に記載された内容は厳密にはすでに最新の情報ではないかもしれません。
または試験範囲のほうがアップデートされているかもしれません。
本が制作される期間など考慮すると、情報が最新であるのか、試験範囲が網羅できているのか、という点で本での学習には注意が必要です!
こういった点も踏まえて、ある程度短期戦で資格を取ってしまうのが良いかと思います。
本は試験に合う最新版を検索してください!
ちなみに私は古いバージョンの本を購入していたので模試はついていませんでした。
徹底攻略 AWS認定 ソリューションアーキテクト − アソシエイト教科書[SAA-C02]対応
最後に、試験に向けて最も参考になったUdemyの講座です。
筆者の場合↑↑で紹介した本は、1年ほど前に事前に読破していた状態であり、試験に向けてはこのUdemyの講座のみで学習しました!
【対象】
本試験受験者、AWS学習者 (AWSを業務で使っている方にもオススメ)
こちらは、試験範囲の各種サービスの詳しい説明からハンズオンまで学習できます。
資格のためだけでなく、AWS学習者全般にオススメできる内容です!
ハンズオンは、業務でも個人でも開発に活かせる内容なので、今後見返すために買っておくなどもアリだと思いました!
そして何よりセールだと安い!とりあえず買っておけ、と言える講座でした!
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版) | Udemy
Udemy模試の難易度は妥当か?
紹介したUdemyの講座は、3回分の模試がついています。
試験で戦えるような妥当な内容の模試なのか、という点が気になると思います。
ズバリ内容は、妥当 であり、
3回分全て必ず解いておくべき!だと思います!!
やってみると分かりますが、
1→2→3回目と、一般的な内容からだんだん詳細な内容まで問われるようになっている気がします。
1回目だけでは少々物足りなく、
2〜3回目の内容ばかりが出題されるほどではない
といった感じでした。
1回目の模試の内容は最低限把握しておくべき、
2〜3回目の内容を理解することで、確実に合格ラインに持っていくといった具合です。
試験に非常に役立つので、是非とも3回分やっておきましょう!!
それ以外の教材
これら以外にも、試験に向けたオススメ教材はありますので、詳細は載せませんが参考にしてみてください。
ちなみに公式のサンプル問題は、試験レベル把握のためにもやっておくべきです!
- AWS Certified Solutions Architect – Associate 認定
- 上記の公式サイトのサンプル問題リンクから確認できます
- ホワイトペーパー | AWS
- AWS クラウドサービス活用資料集 Top
- ブラックベルトと呼ばれてるやつです
試験当日の注意点
本番試験は模試よりも解きにくいので注意!
当日実際に受けてみて、最初に、
「アレ...全然解けないかも...」という感覚に陥りました。
というのも、おそらく理由は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初心者
※なお、筆者スペックも同様です😳
大まかな流れ
- Homebrewインストール
- Gitインストール
- 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
というのはMacのGUIのアプリケーションも同時にインストールするというものです。
参考:homebrew-caskとは - Qiita
4. LaradockをcloneしてPHP環境を整える
Laradockとは、Dockerを用いてLaravel環境を構築するためのオープンソースのプロジェクトです。 現在では、Laravel(PHP)だけでなく様々なアプリケーションのコンテナ環境用Dockerfileが納められています。 LaradockのGitHub:https://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
となっている部分を起動したいプロジェクトに合わせます。
今回はlaradock
ディレクトリにcloneしたCodeIgniter
に合わせ、
root /var/www/CodeIgniter/;
とします。
それでは起動してみましょう!
$ cd laradock $ docker-compose up -d nginx mysql
初回はイメージが作成されるため、時間がかかります。 完了したら、localhostでアクセスできるようになります。 CodeIgniterのメイン http://localhost/index.phpにアクセスします。 無事アクセスできました!! 今回は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フレームワーク)の開発環境を構築する。
イメージとしてはこんな感じ。 自分の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 VagrantでUbuntuの仮想環境作る
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先のまんまをやりました。)
リポジトリをアップデートを
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
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 がようやく取れました!!!
..ということで これから受けようと思っている方、 とくに 未経験 や 初心者 の方の 一助となれればと思い、合格体験記なるものでも書いてみます!!
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入門 実践編 【問題集】 オラクル認定資格教科書 Javaプログラマ Silver SE 8 スピードマスター問題集
⇒いわゆる白本
徹底攻略 Java SE 8 Silver 問題集[1Z0-808]対応
⇒いわゆる黒本
Gold
【教科書】
オラクル認定資格教科書 Javaプログラマ Gold SE 8
⇒いわゆる紫本
【問題集】
徹底攻略 Java SE 8 Gold 問題集[1Z0-809]対応
⇒いわゆる黒本
実際どんな感じなの?(一問一答形式)
試験の申し込み...これがまためんどくさいんですよ!!笑 ちなみにこのブログでは、完全解説するつもりはないので、ググってみてください。笑 ただ、未経験や初心者のためなので、グーグル先生でもヒットしにくいめちゃくちゃ当たり前のことや実体験などを書いておきます。
- そもそも「試験の名前」と「資格の名前」は違うよ
⇒例)「試験: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/
SameGameって? 通称「さめがめ」。昔からあるパズルゲームですね!
さめがめは、コンピュータゲームの一種である。 名前の由来は、ゲームタイトル「SAME GAME(セイムゲーム)」のローマ字読みによるもの。(さめがめ#歴史)
私個人としては、昔から知っていて、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
Canvas初心者がおえかきボード作ってみた!
おはようございます😊まおです!
ちょっと遅くなりましたが、今週もなんとか趣味開発できました!!
今回は、前回同様Canvas APIを使用して、【おえかきボード】を作ってみました🎈
早く画面とソースはこちらです💁♀️
おえかきボード
■全画面はこちら
https://tonamao.github.io/OekakiBorad/
■コードはこちら
See the Pen OekakiBoard by tonamao (@tonamao) on CodePen.
■参考にさせていただいたのはこちら
↑↑↑ロジックの大枠など参考にさせていただきました!
↑↑↑スマホに対応させるために参考にさせていただきました!
イベントリスナーの種類
今回のCanvas APIとしては、前回開発して理解した内容の応用でなんとかなりました!
が、今回つまったのは、イベントリスナーの種類でした。
今回使用したのは、こちらです。
■イベント
mousedown・・・・・・マウスのボタンが押されたとき
mousemove・・・・・・マウスカーソルがターゲット内を動いているとき
mouseup ・・・・・・・マウスのボタンが離されたとき
mouseout・・・・・・・マウスカーソルがターゲット外にいったとき
今回は、canvas内をドラッグしている間絵を描く仕様となるので、
mousedownで描画開始、mouseupで描画終了となるように実装しました。
また、canvas外にカーソルが動いた場合、描画終了となります。
続いてこれらの原理をもとに、マウスを使用しないスマホ対応も行いました!
スマホはマウスイベントでは動いてくれないので、専用のイベントを使用します。
実装時はこれを知らず、ここまででぬか喜びしておりました🙄
スマホ用に使用したイベントはこちらです。
■スマホ対応用イベント
touchstart・・・・・・タップ開始
touchmove ・・・・・ターゲット内を動かしているとき
touchend・・・・・・タップ終了
これでスマホ対応できた....と思いきや..!?....でしたね..
Safariで画面がびよ~~~ん
決してふざけているわけではありません。はい。...😅
Safariの仕様として、画面をスライドした際に、
画面外が表示され、画面がびよ~んって感じになりますよね?
これに対応しなければ、おえかきボードが動いてしまって
おえかきどころではありません。
参考サイトの情報をもとにこちらを使って対処しました。
event.preventDefault();
これを入れることで、Safariのデフォルトの動きを制御できます。
今回私は、canvasタグ内でおえかきをする場合のみ
制御するように処理を入れました。
今回はなかなか実装する時間がなくて、大変でした。。。
しかもスマホ対応のために別途処理が必要とは....
まだまだですね...!
引き続きいろいろ、勉強していきたいと思います!
来週こそはゲームらしいものを作ってみたい...💪