2020-07-07

初心者必見　CSSを変更したのに反映されない場合の対処法！

CSS HTML

本日はCSSを変更したのに反映されない場合の対処方法についてご紹介していきます。

１、CSSの記述が間違っていないか？

当てたいHTMLのクラス名やタグ、IDと、CSSの記述が間違っていないかをチェックしましょう。

例えば

//HTMLファイル

<div class="box"></div>

//CSSファイル

#box{
height: 100px;
width: 100px;
}

上記の場合はclass名がboxである要素に対してCSSを当てる場合には　.box　としてあげるのが適切です。
反対に

//HTMLファイル

<div id="box"></div>

//CSSファイル

.box{
height: 100px;
width: 100px;
}

boxというIDを持つ要素に対して.(ドット)＋ID名としてしまうのも誤りです。
IDを指定してCSSを当てる場合には#＋IDとし、Class名を指定してCSSを当てる場合には.＋Class名としましょう！

２、優先度が低くなっていないか？
実際にアプリケーションを開発していくと、CSSファイルやHTMLファイルの記述が膨大になってしまいます。そこで起こりうるのが、一度使ってしまったClass名の要素と、同じClass名の要素を作成してしまい、一つ目の要素に対して働いてしまっているCSSが新しく追加した要素に対して働いてしまうということが起こってしまいます。
そうすると、CSSが思い通りの挙動にならない場合がでできてしまいます。
例えば

//HTMLファイル

<div class="box"></div>


//省略

<div class="box"></div>



//CSSファイル

.box{
height: 100px;
width: 100px;
}

//省略

.box{
height: 200px
width: 200px;
}

上記のような場合.boxというクラス名の要素が二つ存在しているので、CSSファイルの下側に記述している方が優先されてしまうので、クラス名boxの一つ目と二つ目のheightは２００pxになり、widthも２００pxになってしまいます。
上記の問題を解決するためにはClass名を変更してあげるか、!importantを使用しましょう！
適用したいスタイル指定の末尾に!importantをつけてあげると強制的にそのスタイルが適用されるようになります。

使用例

//CSSファイル

.box{
height: 100px;
width: 100px !important;
}

３、キャッシュが残っていないか？
上記の１、２の対処を行ったのにCSSが当たらないという場合にはキャッシュが残っているという可能性があります。
「キャッシュ」とは「1度開いたウェブページのデータをブラウザに保存しておいて、次に同じページを開くときに表示してくれる仕組み」のことです。

このキャッシュを消すためには「shift」キーを押しながら更新ボタンをクリックもしくはcommand + shift + rを押しましょう！
そうすることでキャッシュを削除することができます。

最後に
本日はCSSを変更したのに反映されない場合の対処法をご紹介していきました。
いかがだったでしょうか？
個人的には３つめのキャッシュが残っていないためにCSSが当たっていないという状況が一番多いような気がします。
最後までご覧いただきありがとうございました！

2020-07-06

Google CalenderをLaravelアプリケーションから操作する(実践編)

API Laravel API Laravel

Google Calenderを操作するための準備がお済みでない方は下記のURLから認証設定をしてください。

Laravelのインストール
早速、composerコマンドを使ってLaravelのインストールを行い、プロジェクトを作成していきます。

#ターミナル

 $ composer create-project --prefer-dist laravel/laravel laravel_google_calendar

インストールしたLaravelのバージョンは6.11.0です。

google/apiclientパッケージのインストール

#ターミナル

$ composer require google/apiclient:^2.0

秘密鍵のキーファイルの保存

認証設定で取得した秘密鍵のキーファイルをLaravelからアクセスできる場所に保存します。Laravelのインストールディレクトリのstorage/appの下にgoogle-calendarディレクトリを作成しキーファイルを保存します。

コントローラーファイルの作成

#ターミナル

$ php artisan make:controller GoogleCalendarController

コントローラが作成できたら、続いてweb.phpファイルにはルーティングを追加します。

#web.php

Route::resource('/calendar', 'GoogleCalendarController');

環境変数の設定

取得したカレンダーのIDは.envファイルに登録を行います。.envファイルの最後に追加してください。カレンダーIDは皆様の環境により異なります。

# .env

GOOGLE_CALENDAR_ID = "XXXXXXXXX@group.calendar.google.com"

Google Calenderからイベント一覧を取得

Google Calendarに登録されているイベントを取得します。

#GoogleCalendarController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Google_Client;
use Google_Service_Calendar;

class GoogleCalendarController extends Controller
{
    public function index(){

        $client = $this->getClient();
        $service = new Google_Service_Calendar($client);
        $calendarId = env('GOOGLE_CALENDAR_ID');
        $optParams = [];
        $results = $service->events->listEvents($calendarId, $optParams);
        $events = $results->getItems();

        foreach($events as $event){
            echo $event->getSummary().'';
        }  
    }

        public function getClient()
        {

            $client = new Google_Client();
            $client->setApplicationName('Google Calendar API plus Laravel');
            $client->setScopes(Google_Service_Calendar::CALENDAR_READONLY);
            $client->setAuthConfig(storage_path('app/google-calendar/XXXXXXX.json'));

            return $client;

        }
}

カレンダーのIDについては.envファイルに保存されているのでヘルパー関数envにパラメータを設定して取得しています。
$client->setAuthConfigメソッドではキーファイルを指定しています。保存した場合はヘルパー関数のstorage_pathを利用しています。
それではブラウザでhttp://127.0.0.1:8000/calendarへアクセスを行い確認しましょう。

こちらでカレンダーに登録しているイベントのタイトルが表示できれば完成です。
$client->setAuthConfig(storage_path('app/google-calendar/XXXXXXX.json'));
上記のパスはjsonファイルを保存しているパス名を正確に入力してください。

もし、パス名や.envファイルの記述が誤っていないのにエラーが出てしまう場合は下記のコマンドでキャッシュをクリアしてください。

#ターミナル

php artisan config:clear

最後に
本日はGoogle CalenderをLaravelアプリケーションから操作をしていきました。
いかがだったでしょうか？
本日も最後までご覧いただきありがとうございました。

2020-07-04

Google CalenderをLaravelアプリケーションから操作する(準備編)

API Laravel

早速始めていきましょう！

まだ認証設定がお済みでない方は下記のURLから設定方法を参考にしてみてください！

Google APIのアカウントの設定方法 - ryoryo1220’s blog

カレンダーを追加
まずはGoogle Calendar上でアクセス許可の設定を行う必要があります。サービスアカウントを作成したユーザでGoogle Calendarにログインしてください。
既存のカレンダーも利用可能ですが、今回は新規のカレンダーを追加していきます。
既存のカレンダーをご利用の方は「カレンダーのアクセス設定」まで飛ばしてOKです。

「他のカレンダー」から「新しいカレンダーを作成」をクリック

f:id:ryoryo1220:20200703111422p:plain

今回、名前はtestとします。名前は任意なので好きな名前をつけてカレンダーを作成ボタンをクリックしてください。

f:id:ryoryo1220:20200703111620p:plain

カレンダーのアクセス設定
新しいカレンダーを作成した後、Google Calendarの画面の右上部にある歯車のアイコン、設定をクリックしてください。

f:id:ryoryo1220:20200703111954p:plain

設定画面が開いたら、左側のメニューにある先ほど作成したカレンダーを選択してください。
私の場合はtestです。

f:id:ryoryo1220:20200703112322p:plain

左側のメニューの特定のユーザとの共有をクリックするか右側の画面をスクロールして特定のユーザーとの共有画面にログインしたユーザのメールアドレスが表示されていることを確認し、その下のユーザーを追加をクリックしてください。

f:id:ryoryo1220:20200703112748p:plain

ここでは認証設定で取得したサービスアカウントIDのメールアドレスを入力します。

f:id:ryoryo1220:20200703113254p:plain

サービスアカウントのメールアドレスの取得方法はGoogle Cloud Platformの「IAM」の「サービスアカウント」から確認できます。

f:id:ryoryo1220:20200703115306p:plain

送信をクリックし追加が完了するとgoogleアカウントの下にサービスアカウントIDの情報が表示されます。これでユーザの追加は完了です。

カレンダーIDの取得
最後にカレンダーIDを取得していきます。
「カレンダーの統合」に移動して、カレンダーのIDを取得してください。こちらはAPIでアクセスする際に必要となるIDです。

f:id:ryoryo1220:20200703115823p:plain

最後に
本日はGoogle CalenderをLaravelアプリケーションから操作するための準備を行っていきました。
次回は実際にLaravelアプリケーションから操作を行っていきます。
最後までご覧いただき、ありがとうございました。

2020-07-03

Google APIのアカウントの設定方法

API Google

f:id:ryoryo1220:20200701134718j:plain

本日は表題のGoogle APIのアカウントの設定方法についてご紹介していきます！

GoogleAPIとは

現在Google は様々なサービスを提供しておりますが、これらのサービスによって提供されるデータをGoogle APIで操作することができます。

認証情報の設定

認証情報の設定を行うためには、Googleのアカウントが必要になります。下記の設定を行う前にGoogleアカウントを取得しておく必要があります。

Google Cloud Platformへログイン

ログインしていきます。

下記のURLからアクセスしてください。

https://console.cloud.google.com/

Google Calender APIを有効に

今回はGoogle Calender APIを有効にしていきます。

左側のメニューバーから「APIとサービス」から「ライブラリ」をクリック

f:id:ryoryo1220:20200701140408p:plain

下記のページにアクセスします。

f:id:ryoryo1220:20200701140657p:plain

ライブラリのページから「Google Calender API」をクリック

f:id:ryoryo1220:20200701141203p:plain

Google Calender APIを見つけられたら有効にしていきましょう！

認証情報の作成

続いて認証情報を作成していきます。

f:id:ryoryo1220:20200701145337p:plain

「認証情報を作成」をクリック

f:id:ryoryo1220:20200701150020p:plain

「サービスアカウント」をクリック

f:id:ryoryo1220:20200701150217p:plain

「サービスアカウントを作成」をクリック

f:id:ryoryo1220:20200701150440p:plain

こちらの画面で任意のサービスアカウント名を決めてください。

f:id:ryoryo1220:20200701150640p:plain

続いてアカウントの権限について設定していきます。

今回は特に変更をせずに進めていきます。

f:id:ryoryo1220:20200701150845p:plain

最後にアカウントへのアクセス権を設定していきます。

こちらも今回は特に変更せずに完了します。

f:id:ryoryo1220:20200701151125p:plain

続いてキーを作成していきます。

作成したアカウントのメール名をクリック

f:id:ryoryo1220:20200701151553p:plain

「鍵を追加」をクリックし「新しい鍵を作成」をクリック

f:id:ryoryo1220:20200701151716p:plain

キーのタイプを「JSON」にして作成をクリック

これでGoogle APIのサービスアカウントの設定が完了です。

最後に

本日はGoogle APIのサービスアカウントを設定していきました。

いかがだったでしょうか？

近いうちに取得したアカウントを使ってWebからGoogleカレンダーを操作する方法についてご紹介していきます！

最後までご覧いただきありがとうございいました。

2020-07-02

AWS amazon linux2にMySQL8をインストールする方法（コピペでOK）

AWS amazon linux2

本日はamazon linux2にMySQL8をインストールする方法についてご紹介いたします。

MySQLインストール

#ターミナル

$ sudo yum install mysql mysql-server

上記のようにインストールをすると、期待するバージョンがインストールされない可能性があるので

#ターミナル

$ sudo yum localinstall https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm -y

このようにバージョンを指定します。
続いてMySQLの使用するバージョンを指定していきます。

#ターミナル

//MySQL5.7を無効化
$ sudo yum-config-manager --disable mysql57-community

//MySQL8を有効化
$ sudo yum-config-manager --enable mysql80-community

もしmySQL5.7を使用したい場合は

#ターミナル

//MySQL8を無効化
$ sudo yum-config-manager --disable mysql80-community

//MySQL5.7を有効化
$ sudo yum-config-manager --enable mysql57-community

続いてインストールできるかを確認します。

#ターミナル

$ yum info mysql-community-server

確認できたらインストール実行

#ターミナル

$ sudo yum install mysql-community-server -y

最後に確認します。
確認できれば完了です。

#ターミナル

$ mysqld --version

最後に
本日はAWS amazon linux2にMySQL8をインストールする方法とバージョン変更についてご紹介しました。
いかがだったでしょうか？
コピペでも使用可能なので、お困りの方はぜひ参考にしてみてください。
最後までご覧いただきありがとうございました。

2020-07-01

初心者必見！　変数のスコープとは？

PHP

本日は「変数のスコープ」（有効範囲）についてご紹介していきます！

変数のスコープとは

定義した変数がどこまで利用が可能なのか？という有効範囲のことです。

また、変数にはスコープ（有効範囲）の異なる「グローバル変数」「ローカル変数」「スーパーグローバル変数」という3つの変数があります。
ではそれぞれどういったものなのかご紹介していきます！

１、ローカル変数
関数内で定義されたもので、その関数内でしか利用できない。

<?php

  function 関数名() {
    $local = "ローカル";    // ローカル変数
  }

?>

２、グローバル変数
関数の外で定義されたもので、スクリプト内のすべてで利用が可能。

<?php

  $global = "グローバル";   // グローバル変数

?>

もし関数内でグローバル変数を使いたい場合には下記のようにすれば使用可能です。

<?php

  // 関数の宣言
  function local() {

    $local = "Hello ";

    global $global;    // グローバル変数の参照宣言

    echo $local . $global;
  }

  $global = "World";
 
  local();   // 関数の呼び出し

?>

３、スーパーグローバル変数
いつでもどこでも使える変数のことで、あらかじめ定義されている変数のいくつかが該当します。

$GLOBALS

使用可能な変数の配列

$_SERVER

サーバーの環境情報の配列

$_GET

HTTPのGETメソッドで送信されたパラメータの配列

$_POST

HTTPのPOSTメソッドで送信されたパラメータの配列

$_COOKIE

ブラウザーから送信されたクッキー情報

$_SESSION

セッション情報の配列

$_FILES

HTTPのPOSTメソッドのファイル情報の配列

$_REQUEST

$_GET、$_POST、$_COOKIEをまとめた配列

$_ENV

環境変数の配列

最後に
本日は変数のスコープについてご紹介していきました。
いかがだったでしょうか？
変数のスコープは少し複雑なところですが、非常に大切なところなのでぜひ、マスターして行ってください！
最後までご覧いただきありがとうございました！

2020-06-30

PHPで条件分岐(if else elseif switch)の書き方　徹底解説

PHP

今回はタイトルにもあるように、if文、switch文についてご紹介していきます。

１、if文

if文は「もし条件に合っているならプログラムを実行する」ということです。

if文の書き方は下記のようになります。

if( 条件 ){
 //条件を満たした場合のプログラム処理
}

上記はif文だけの記述なので条件を満たしていない場合の処理は書かれていません。
もし条件を満たしていない場合に何かの処理をしてもらいたい場合にはelseを書きます。

elseの書き方は下記のようになります。

if( 条件 ){
  //条件を満たした場合のプログラム処理
}

else{
  //条件を満たしていない場合の処理
}

上記のコードををご覧いただければわかるように、ifの後には（）をつけてその中に条件を書きますが、elseの後には（）をつけません。

さらに、もっと細かく条件をつけたい場合にはelse ifを使います。

else ifの書き方は下記のようになります。

if( 条件 ){
  //ifの条件を満たした場合のプログラム処理
}

else if(条件){
 //else ifの条件をを満たした場合のプログラム処理
}

else{
  //if,else if,のどちらの条件も満たしていない場合の処理
}

それでは実際に値を入力して理解を深めていきましょう！

<? php

$num = 20;

if( $num < 10 ){
  echo "１０より小さい数値です";
}

else if( $num < 30 ){
 echo "10より大きく30より小さい数値です";
}

else{
  echo "30より大きい数値です";
}

?>

上記のプログラムの結果は「10より大きく30より小さい数値です」となります。

また下記のように文字列の条件も扱うことが出来ます

上記のプログラムの結果は「国内です」となります。

２、switch文

switch文は「条件式の値」を「caseの後に記述された値」と上から順番に比較していき、もし一致する「値」があった場合にはその後に記述された処理を実行しbreakに達したら処理を終了します。

switch文の書き方は下記のようなります

<? php

switch (条件式){
  case 値1:
  //「条件式の値」が「値1」と等しい時の処理;
  break;
  case 値2:
  //「条件式の値」が「値2」と等しい時の処理;
  break;
  case 値3:
  //「条件式の値」が「値3」と等しい時の処理;
  break;
  default:
  //「条件式の値」が1,2,3いずれの値にも等しくない時の処理;
}

?>

例えば下記のような場合はif文で書くよりも、switch文で書いた方がすっきりします。

<?php

$area = 1;

if ($area === 1){
  echo "北海道";
}elseif ($area === 2){
  echo "青森";
}elseif ($area === 3){
  echo "岩手";
}elseif ($area === 4){
  echo "宮城";
}
...


elseif ($area === 47){
  echo "沖縄";
}
else{
  echo "該当無し";
}

?>

<?php

$area = 1;

switch ($area){
case 1:
  echo "北海道";
  break;
case 2:
  echo "青森";
  break;
case 3:
  echo "岩手";
  break;
case 4:
  echo "宮城";
  break;
...


case 47:
  echo "沖縄";
  break;
default:
  echo "該当無し";
}

?>

switch文でbreak;を忘れてしまうと次の処理が行われてしまうので注意が必要です！

最後に

本日はPHPのif文、switch文についてご紹介しました。
いかがだったでしょうか？
if文、switch文はプログラミングを行う際に非常に重要になりますのでぜひ、マスターしていってください！
最後までご覧いただきありがとうございました！