【Bootstrap3】ボタンでモーダルダイアログを呼び出す方法!

Bootrap3で簡単なモーダル処理の記述と説明をしていきます!
最後に記述しているソースコードのサンプルを実行できるのでお試しを!

htmlソースコード

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal">
	モーダル・ダイアログ 呼び出し
</button>

<!-- モーダル・ダイアログ -->
<div class="modal fade" id="sampleModal" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
				<h4 class="modal-title">タイトル</h4>
			</div>
			<div class="modal-body">
				本文
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">ボタン</button>
			</div>
		</div>
	</div>
</div>

ポイントとしては5つ


1. モーダル・ダイアログを呼び出す要素(button要素やa要素など)のdata-toggle属性にmodalを指定、data-target属性に、2のモーダル・ダイアログ用div要素のid属性値を指定します。


2. モーダル・ダイアログ用div要素のclass属性にmodal fadeを指定する。こうすることでモーダル呼び出し時にアニメーションを付与することができます。


3. 2のclass属性にmodalを指定したモーダル・ダイアログ用div要素内に、class属性にmodal-dialogを指定したdiv要素を配置します。


4. 3のdiv要素内に、class属性にmodal-contentを指定したdiv要素を配置します。ここがモーダルの表示コンテンツとなります。


5. 4のdiv要素内に、必要に応じ、ヘッダ(class属性にmodal-headerを指定したdiv要素)、本文(class属性にmodal-bodyを指定したdiv要素)、フッタ(class属性にmodal-footerを指定したdiv要素)を配置します。

サンプル
上のサンプルソースを実行しています。


See the Pen
Bootstrap3 modal
by Kazuki Tsujimoto (@mossan)
on CodePen.

ではまた~~!

gitの基本用語まとめてみた!

こんにちは。今回はgitについての基本用語をまとめてみました。
何かありましたらコメントお願いいたします。
もっとこうしてほしいなどの意見もお待ちしております。


gitとgithubの違い

まず、そもそもgitとgithubってよく聞くけど、違いって何?って方に書きます。

git
gitとはプログラムソースなどの変更履歴を管理する分散型のバージョン管理システムのことです。
gitの特徴はローカル環境(自分のパソコンなど)に、全ての変更履歴を含む完全なリポジトリの複製が作成されるということです。
昔ではサーバーにある1つのリポジトリに対して変更後のファイルなどを置いて管理していました。しかしそれだとファイルが大量に置かれる上に、共同で開発する人が何人もいるとどのバージョンが最新なのか整合性が合わなくなってしまったりと色々問題がありましたが、gitの登場によって今までファイルを置いてたのが履歴で管理できるようになり、各ローカル環境がリポジトリのサーバーになれるのでコンフリクトが起きた際にもエラーを出してくれたり、整合性が取れるようになりました。

github
githubは、このgitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開することができるようにしたウェブサービスの名称です。


git基本用語


リポジトリ
履歴管理を行う場所


リモートリポジトリ
サーバーにあるリポジトリ。基本はベアリポジトリで運用される。


ローカルリポジトリ
自分のPCにあるリポジトリ。基本はノンベアリポジトリで運用される。


ベアリポジトリ
ワークツリーを持たず、チェックアウト、マージができないリポジトリ


ノンベアリポジトリ
ワークツリーを持ち、チェックアウト、マージができるリポジトリ


ワークツリー
履歴管理を行いたいファイルがある場所。


インデックス
コミットしたいファイル又はファイルの一部を登録するところ。


ステージ
ワークツリーからコミットしたいファイル又はファイルの一部をIndexに登録すること。


ハンク
変更した一範囲。


コミット
インデックスに登録してある変更対象をローカルリポジトリに反映すること。


リセット
コミット前の変更をローカルリポジトリの状態へ戻すこと。
また、特定のまで状態を戻すこと。ただし、ローカルリポジトリに限られる。


ヘッド
作業対象となっているブランチ、コミット。


チェックアウト
ヘッドを切り替えること。
過去のコミットを対象にチェックアウトした場合、それをもとにコミットすることはできない。


プッシュ
ローカルリポジトリの変更をリモートリポジトリに反映させること。


プル
リモートリポジトリの変更をローカルリポジトリに反映させること。フェッチ+マージ


フェッチ
最新の変更履歴を見つけてくること。


マージ
異なるブランチの変更を反映させること。お互いの変更履歴が残る。


リベース
異なるブランチの変更を反映させること。変更履歴が片方に集約される。


コンフリクト
マージ対象の2ファイルで同じ箇所が変更されている状態、衝突という意味。


ブランチ
履歴管理を枝分かれさせてたもの。ブランチを使うことにより、複数の履歴を並列に管理できる。


フォーク
他人のリポジトリを自分のアカウントのリモートリポジトリにコピーすること。


クローン
リモートリポジトリをコピーしてローカルリポジトリを作成すること。


プルリクエス
フォークしたリポジトリでの変更を、フォーク元のリポジトリへ反映するよう依頼すること。

【PHP】多次元配列、連想配列とは

普通の配列
<?php
$array = array(A,B,C,D,E);

print_r($array);


 ?>

出力結果

Array
(
    [0] => A
    [1] => B
    [2] => C
    [3] => D
    [4] => E
)
多次元配列がこちら
<?php
$array = [
  ['近藤',30,'男性'],
  ['土方',25,'男性'],
  ['沖田',22,'女性']
];

print_r($array);

 ?>

出力結果

Array
(
    [0] => Array
        (
            [0] => 近藤
            [1] => 30
            [2] => 男性
        )

    [1] => Array
        (
            [0] => 土方
            [1] => 25
            [2] => 男性
        )

    [2] => Array
        (
            [0] => 沖田
            [1] => 22
            [2] => 女性
        )

)

このように配列の中に配列があるのが多次元配列です。

多次元配列の特定の要素だけを指定したい場合はこちら
<?php
$array = [
  ['近藤',30,'男性'],
  ['土方',25,'男性'],
  ['沖田',22,'女性']
];

echo $array[1][0].$array[0][1].$array[2][2];

 ?>

出力結果

土方30女性

この配列の構造はこうなっています。
$array = [
0 = ['近藤',30,'男性']
   0 ,  1,  2
1 = ['土方',25,'男性']
   0 ,  1,  2
2 = ['沖田',22,'女性']
   0 ,  1,  2
];
なので行指定の'[数値]'と列指定の'[数値]'で特定の値を指定することができます。

連想配列について
<?php
$array = [
    ''=>['リンゴ','イチゴ','トマト'],
    ''=>['メロン','キュウリ','ピーマン'],
    ''=>['バナナ','パイナップル','レモン']
];

echo $array[''][0];

 ?>

出力結果

バナナ

はい、勘の良い人はもうわかったかと思いますが、
上の例で言うと'黄'の中の配列の0番目の値を指定しています。
なのでバナナが出力されます。
これが連想配列です。マジカルバナナみたいなもんです。

今日はこれくらいで終わります~
ではまた~

【PHP】多次元連想配列でソートをする方法!

こんばんは。もっさんです。

最近あまり更新ができていませんでした(汗)

早速、表題の件記述していきます!

以下の配列があるとします。

<?php

$array = array(
  array(
    'id' => 5,
    'name' => "tanaka"
  ),
  array(
    'id' => 3,
    'name' =>"satou"
  ),
  array(
    'id' => 2,
    'name' => "suzuki"
  ),
  array(
    'id' => 4,
    'name' => "itou"
  ),
  array(
    'id' => 1,
    'name' => "honda"
  ),);

?>

そのままの実行結果

Array
(
    [0] => Array
        (
            [id] => 5
            [name] => tanaka
        )

    [1] => Array
        (
            [id] => 3
            [name] => satou
        )

    [2] => Array
        (
            [id] => 2
            [name] => suzuki
        )

    [3] => Array
        (
            [id] => 4
            [name] => itou
        )

    [4] => Array
        (
            [id] => 1
            [name] => honda
        )

)

'id'でソートをしたいときに、array_multisort()を使う

<?php

$array = array(
  array(
    'id' => 5,
    'name' => "tanaka"
  ),
  array(
    'id' => 3,
    'name' =>"satou"
  ),
  array(
    'id' => 2,
    'name' => "suzuki"
  ),
  array(
    'id' => 4,
    'name' => "itou"
  ),
  array(
    'id' => 1,
    'name' => "honda"
  ),);

  foreach($array as $key => $value) {
    $sort[$key] = $value['id']; //ソートしたい値を配列に入れる
  }

  array_multisort($sort, SORT_ASC, $array); //今回は昇順でソート
  print_r($array);

?>

実行結果

Array
(
    [0] => Array
        (
            [id] => 1
            [name] => honda
        )

    [1] => Array
        (
            [id] => 2
            [name] => suzuki
        )

    [2] => Array
        (
            [id] => 3
            [name] => satou
        )

    [3] => Array
        (
            [id] => 4
            [name] => itou
        )

    [4] => Array
        (
            [id] => 5
            [name] => tanaka
        )

)

こんな感じです。
array_multisort(①ソートの基準 , ②ソートの条件 , ③ソートしたい配列)
これからも細々と書いていきます。

【超まとめ】AWS コンピューティングサービス

今回AWS第三弾はコンピューティングサービスについてのご紹介です。

コンピューティングサービスとは、サーバーやデータベースなどのITリソースをネットワークを通して利用することをクラウドコンピューティングと呼びます。

超簡単にまとめただけなので、こういうものがありますよ。ぐらいで書いていきます!

 

 

 

 

 

EC2

AWSが仮想サーバーを提供するサービスで、このサービスを利用して作成した仮想サーバーをEC2インスタンスと呼びます。

 

 

 

Amazon Machine Image(AMI)

EC2インスタンスを作成する際に使用する仮想マシンイメージです。

OSには、Red Hat Enterprise LinuxUbuntuなどの各種LinuxディストリビューションMicrosoft Windows Serverや、AWSが提供しているAmazon Linuxが利用可能です。

 

 

ユーザーデータとインスタンメタデータ

これはサービスではないのですが、アソシエイトの試験を受ける上で絶対に覚えておくべきことなので、書いておきます。

EC2インスタンスにはユーザーデータとインスタンスメタデータの2種類があります。

それぞれの活用例が以下です。

 

・ユーザーデータ

ユーザーデータとはEC2インスタンスの初回起動時に1回だけスクリプトを実行できる機能です。

 

f:id:m0_s3:20190129113536p:plain

ユーザーデータの活用例

 

 

インスタンスメタデータ

インスタンスメタデータとはEC2インスタンス自身に関するデータで、実行中のインスタンスを設定または管理するために使用されます。このデータをもとにCloud Watchなどのサービスと連携させることができます。

具体的には以下の情報が取得できます。

インスタンスID

・プライベートIPv4アドレス

・パブリックIPv4アドレス

・ローカルホスト名

・公開鍵

 

 

 

Lambda

サーバーなどのコンピューティングリソースを意識することなく、アプリケーションコードをデプロイしただけで実行することができる、サーバーレスなサービスです。

実行する際のメモリ容量と実行時間に対して課金されます。Lambdaは実行時間に制限があるため、時間を要する処理には不向きです。

Lambdaは様々なAWSサービスとの連携ができ、イベント駆動型のアプリケーションを執行できます。

例として、以下の図のようにS3にコンテンツファイルがアップロードされたことをトリガーとして、LambdaでアップロードされたファイルをEC2インスタンスへ連携することができます。

 

f:id:m0_s3:20190129115006p:plain

Lambdaへの連携のイメージ図

 

・ExecutionRole

LambdaにアタッチされたIAMロールのことです。

 

・ロギング

全てのLambda関数の処理結果はCloud Watch Logsへ保存されます。

 

 

API Gateway

APIの作成、配布、保守、監視、保護を行えるサービスです。

EC2インスタンスやLambdaと組み合わせることをとで、Webアプリケーションのバックエンドや、データ、ビジネスロジックにアクセスすることができます。API gateway自体はサーバーで管理する必要がないため、Lambdaと組み合わせることでサーバーレスアプリケーションを実装することができます。

 

その他サービス

Elastic MapReduce(EMR)

大量のデータを迅速、容易に、かつコスト効率よく処理するためのWebサービスです。

大規模なデータを蓄積し分析する技術にHadoopやSparkなどの分散処理がありますが、

EMRはこれらの主要な分散処理環境を構築でき、それを利用した分散処理を容易に行うことができます。

 

 

Elastic Container Service(ECS)

コンテナオーケストレーションサービスです。(複数のコンテナを管理するためのツールのこと)

Dockerコンテナを簡単に実行、停止、管理することができます。

 

VM Import/Export

VM Importは、オンプレミス環境に作成した仮想サーバーのマシンイメージを、AWSのEC2インスタンスにインポートすることができるEC2サービスの機能です。

VM ExportはVM ImportによってAWS上にインポートされたEC2インスタンスを、オンプレミス環境で動作する仮想サーバーのマシンイメージへエクスポートすることができます。

 

以上です。

次回の第4弾はストレージサービスについて少しだけ紹介できればと思います。

ではまた!!!

【まとめ】AWS ネットワークサービス簡単に紹介!

AWS第2弾です!今回は数あるAWSのサービスの中から主要ネットワークサービスをご紹介します!

 

 

 

 

 

サブネット

VPC内に構成するネットワークセグメントのことで、1つのVPCに対して1つ以上のサブネットで構成されます。

サブネットにはパブリックサブネットとプライベートサブネットがあり、簡単に違いを言うとパブリックサブネットがインターネットと繋ぐことができ、プライベートサブネットの場合はVPC内のみの通信となり、外部の通信を行わないサブネットとなります。

 

 

インターネットゲートウェイ

VPC内のリソースからインターネット接続するためのゲートウェイです。

インターネットゲートウェイVPCにアタッチすることでインターネットへアクセスすることができます。

 

 

ルートテーブル

サブネット内インスタンスに対する静的ルーティングを定義するもの。

設定はサブネット単位で行います。

ルートテーブルのデフォルトゲートウェイ(0.0.0.0/0)へのルーティングに、インターネットゲートウェイ指定したのがパブリックサブネット指定していないのがプライベートサブネットです。

 

 

NATゲートウェイ

NATゲートウェイには、プライベートサブネットからインターネットへ接続するためのNAT機能があります。AZ内で冗長化されているため、EC2インスタンスを利用する方法より可用性が高いです。

NATゲートウェイを利用しない場合は、NATインスタンスと呼ばれるEC2インスタンスを利用してネットへアクセスします。

 

f:id:m0_s3:20190127171713p:plain

パブリックサブネットとプライベートサブネット

 

 

 

バーチャルプライベートゲートウェイ

Direct ConnectやインターネットVPN接続するためのゲートウェイです。オンプレミス環境と接続するVPCにアタッチして利用します。

 

 

 

VPCフローログ

VPC内のネットワークインターフェース(Elastic Network Interface:ENI)で通信するトラフィック情報をキャプチャするサービスです。

キャプチャした情報はAmazon CloudWatch Logsへ転送されます。

 

 

Elastic IP(EIP)

固定のグローバルIPアドレスを提供するサービスです。

本来、EC2インスタンスは停止するとそれまで使っていたIPアドレスを保持できません。IPアドレスが変わるためDNSなどを変更するのは手間がかかるので、その場合EIPを使用します。

 

 

VPCピアリング接続

異なるVPC間をプライベート接続するサービスです。

VPCは、AWS上に独立したプライベートネットワーク空間作成するため、VPCは直接通信を行えませんが、VPCピアリング接続をすることでVPC同士はインターネットを経由せず、AWSのプライベートネットワーク内で直接通信することができます。

 

 

VPCエンドポイント

VPCエンドポイントはネットワークレイヤーのゲートウェイ型とアプリケーションレイヤーのインターフェイス型の2種類があります。

ゲートウェイ型では、ルートテーブルに指定されたターゲットを追加することでS3やDynamoDBへアクセスする際、インターネットを経由せずにAWS内のプライベート接続を実現することができます。

インターフェイス型は、「AWS PrivateLink」とも呼ばれ、AWSへのAPIコールに対してインターネットを経由せずにプライベート接続を実現することができます。

 

 

セキュリティグループ

EC2インスタンスなどに適用するファイアウォール機能です。

デフォルトでは全てのアウトバウンドトラフィックを許可。インバウンドトラフィックは許可していません。

また、ステートフルな通信が可能です。

 

 

ネットワークACL

サブネット単位で設定するファイアウォール機能です。

デフォルトでは全てのインバウンドトラフィック、アウトバウンドトラフィックを許可しており、ステートレスです。

 

 

Elastic Load Balancing(ELB)

Elastic Load Balancingは、EC2や特定のIPアドレスへの通信トラフィックを分散するロードバランシングサービスで、EC2インスタンスを登録するだけで利用できます。ここで登録されたEC2インスタンスは「バックエンドインスタンス」と呼びます。

 

 

Auto Scalingグループ

リソースの使用状況をモニタリングし、その使用状況に応じてEC2インスタンスを自動でスケールアウト・スケールインするサービスです。○○はあらかじめ設定したAMIからEC2インスタンスを起動するため、AMIを常に最新化しておくことが重要です。ユーザーデータを利用してS3やGitからソースやスクリプトを取得することで、EC2インスタンスを最新の状態にすることが可能です。

 

 

Route53

可用性の高いDNSを提供するマネージドサービスです。

ホストゾーンの設定として外部向けのパブリックホストゾーンと、VPCDNSプライベートホストゾーンがあります。

Route53はELBやCloudFrontに対して、Zone ApexレコードをAレコードで指定することができます。

 

 

Direct Connect

オンプレミス環境とAWSの間を専用線で接続するサービスです。専用でプライベート接続することに加え、高速なネットワーク帯域で安定した通信を行うことができます。

 

 

バーチャルプライベートゲートウェイ

オンプレミス環境とAWS接続する際に利用するゲートウェイです。

インターネットVPNやDirect Connect接続をする際にあらかじめ用意しておき、VPCへアタッチして利用します。

 

 

CloudFlont

エッジロケーションからコンテンツを配信するコンテンツデリバリーサービスです。

 

 

こういうものがありますよ。って感じでめちゃくちゃ簡単にまとめた(?)ので各サービスを深くは紹介できていませんが、AWSソリューションアーキテクトの資格を取るにはこのサービスを知っておくのは必須だと思います。

また、これ以外にもコンピューティングサービスやストレージサービス、データベースサービスなどの分野もありますので、こういう感じで概要だけをまとめていこうと思います。

ご覧いただき、ありがとうございました。

 

 

 

 

【まとめ】AWS IAMサービスとは何か

 AWSの資格勉強をしているのでこれからは、AWSの各種サービスを紹介していこうかと思います。

今回は「Identity and Access Management(IAM)」についてサラッとまとめました。

 

 

 

 

IAMとは

Identity and Access Management(IAM)は、AWSを利用するユーザーに対しAWS各種サービスへの利用を安全に制御するための仕組みです。

 

AWSを最初に利用するときの流れ

1.AWSアカウントの登録

管理者となるメールアドレスやプロフィールなどの個人情報、料金支払いに必要なクレジットカード情報などを登録し、AWSを利用するためのアカウント「AWSアカウント」を取得する必要があります。ルートユーザーで「AWSマネジメントコンソール」にログインし、設定を行います。

 

 

2.IAMユーザー、IAMグループの登録

操作用のユーザーやグループを作成していきます。

ここで実際に使用するユーザーやグループを登録できます。

 

 

3.IAMプロフィールポリシーによる権限の付与

IAMユーザー、IAMグループは作成直後だと何も権限が付与されていません。

そこでIAMポリシーで適切な権限を付与することで、AWSの各種サービス、ストレージなどのアクセス権限を行うことができます。

例として、開発者のIAMグループに所属するIAMユーザーに対してはEC2とRDSの操作権限のみ与えるといった具合です。

下図がイメージ図になります(下手ながら自作してみました。w)

 

f:id:m0_s3:20190122121309p:plain

IAMによるアクセス制御イメージ図

 

 

IAMサービスを通じたAWSの操作方法

  • WebからAWSマネジメントコンソールへログインする

IAMユーザーのユーザー名とパスワードを用いて、WebからAWSマネジメントコンソールの画面にアクセスできます。

 

AWS CLIをインストールするとWindowsコマンドプロンプトLinuxのコンソールからAWSサービスへのコマンドを実行できます。

コマンド操作には、操作先のリージョンとIAMユーザーごとに作成できる「アクセスキーID」と「シークレットアクセスキー」を事前に作成する必要があります。

※アクセスキーIDとシークレットアクセスキーを利用した認証はキーの流出が懸念されるため、IAMロールによる認証が推奨されています。

 

以上です。IAMサービスざっくりまとめでした。