読者です 読者をやめる 読者になる 読者になる

AWSでWordPressのWebサイトを起動させる手順

1インスタンスの作成」を押下

f:id:marikooota:20170228195440p:plain

2 AWS Market Placeを選択し、検索欄にWordPressと入力

f:id:marikooota:20170228195807p:plain

3 WordPress powered by Bitnami を選択

f:id:marikooota:20170228200156p:plain

4 無料利用枠を選択し、「確認と作成」を押下

f:id:marikooota:20170228200415p:plain

5作成」を押下

f:id:marikooota:20170228200716p:plain

6 既存のキーペアを選択するか、新しいキーペアを作成する。

f:id:marikooota:20170228201351p:plain

選択したプライベートキーファイルへのアクセス権があり〜・・・にチェックをいれ、「インスタンスの作成」を押下

7 作成されるのを待つ。

f:id:marikooota:20170228220828p:plain

作成ログの表示をクリックして、「作成が完了しました」と表示されていたらOK!! 「次のインスタンスの作成が開始されました」の横のインスタンスIDをクリックする。

8 WordPress Webサイトをテストします。以下のページのパブリック IPにアクセスします。

f:id:marikooota:20170228221711p:plain

9 WordPressのサイトが開きます

f:id:marikooota:20170228213541p:plain

10 管理者画面にいきたいので、IPアドレスの後に「/admin」をつけます

f:id:marikooota:20170228213806p:plain

11 ログイン画面

f:id:marikooota:20170228213944p:plain

ユーザー名とパスワードが必要です。確認しましょう。

12 パスワードを確認するには、先ほどのAWSの画面で作成したインスタンス上で右クリックします。 インスタンスの設定 ->システムログの取得を選択してください。

f:id:marikooota:20170228221748p:plain

13 システムログが表示されるので、スクロールしていくと下の方にpasswordが書いてあります。

f:id:marikooota:20170228221233p:plain

14 では、WordPressのログイン画面に戻ってログインしてみます。

Username: user
Password: 先ほどシステムログで確認したパスワード

※ 初期状態のUsernameはuserです

f:id:marikooota:20170228214913p:plain

14 管理者画面が表示されます

f:id:marikooota:20170228215258p:plain

以上で完了です。

今回は試験的に作成しただけなのでインスタンス削除してます..

シェルスクリプトのメモ

シェルスクリプトの書き方

引数

コマンドの引数に指定した値を使う時は$を使う。

sh hoge.sh 引数1 引数2

引数を使う時

echo $1
echo $2

変数

変数名の前には$マークをつけない。(値を設定する時)

VAR='hoge'

変数を参照するときは$マークをつける。

echo $VAR

if文

if文の条件は[]で囲む。

#!/bin/sh
VAR1=0
VAR2=1
if [ $VAR1 -gt $VAR2 ]; then
echo "VAR1はVAR2より大きい"
elif [ $VAR1 -eq $VAR2 ]; then
echo "VAR1とVAR2は等しい"
else
echo "VAR1はVAR2より小さい"
fi

実行結果

VAR1はVAR2より小さい
演算子まとめ
演算子 説明
-gt 「>」より大きい(greater than)
-ge 「>=」以上(greater than or equal )
-lt 「<」より小さい(less than)
-le 「<=」以下(less than or equal)
-eq 等しい(equal)
-ne 等しくない(not equal)

for文

for文はforとinとdoとdoneで書く。

for VAR in hoge fuga foo piyo
do
echo $VAR
done

実行結果

hoge
fuga
foo
piyo

ループ条件を以下のように書くと、カレントディレクトリにあるHTMLファイルを対象にループを回すことができる。

#!/bin/sh
for file in `\find . -name '*.html'`; do
echo $file
done

実行結果

./hoge.html
./fuga.html
./foo.html
./piyo.html

文字列の連結

変数に入れた文字列を連結する時は以下のように変数をつなげる。

#!/bin/sh
VAR1='hoge'
VAR2='piyo'
echo $VAR1$VAR2

変数と文字列をつなげたい時は、変数を区別させるために{}で囲む。

#!/bin/sh
VAR='hoge'
echo ${VAR}piyo

どちらも実行結果は以下の通り

hogepiyo

コメント

コメントを書く時は#を使う

#コメント

バッチのメモ

バッチの書き方

引数

コマンドの引数に指定した値を使う時は%を使う。

hoge.bat 引数1 引数2
echo %1
echo %2

変数

変数を設定する時はSETコマンドを使う。

SET VAR

変数を参照する時は%で囲む。

echo %VAR%

変数に数値を代入する時は /a オプションをつける

SET /a VAR=12345

変数に文字列を代入するときはダブルクォーテーションで囲む必要はない。

SET VAR=hoge

変数スコープ

変数をローカル化するにはsetlocalendlocalで囲む。
囲んだスコープ内だけで変数が有効になる。

@echo off
setlocal
SET VAR=hoge
echo %VAR%
endlocal
echo %VAR%

一回目のechoでだけ変数VARが有効になっている。

遅延環境変数

遅延環境変数を設定するにはsetlocalのあとにenabledelayedexpansionをつけます。

@echo off
setlocal enabledelayedexpansion
rem コマンドを書く
endlocal
遅延環境変数とは

変数を読み込むタイミングを遅らせる変数。

これまで変数を%で囲んでいたが、%だとその変数を見つけた瞬間すべてを展開するので、以下のような場合に悲しいことが起きてしまう。

@echo off
setlocal enabledelayedexpansion
SET COUNT=0
for %%i in (*.html)do(
  SET /a COUNT=%COUNT% + 1
)
echo %COUNT%
endlocal

結果

0

for文の中でCOUNTに+1したのに、COUNTが0のまま展開されてしまうから、結果は0になる。

そうなってしまうのを防ぐために、setlocalのあとにenabledelayedexpansionをつけて、変数は%ではなくて!で囲む。

遅延環境変数についてQiitaの記事
http://qiita.com/sawa_tsuka/items/c7c477cacf8c97792e17

@echo off
setlocal enabledelayedexpansion
SET COUNT=0
for %%i in (*.html)do(
  SET /a COUNT=!COUNT! + 1
)
echo !COUNT!
endlocal

結果(htmlファイルが4つある場合)

4

遅延環境変数にすることで期待通りの結果になる。

if文

if文の中の処理は()で囲む。

SET VAR=1
if VAR == 1 (
  echo %VAR%
)

for文

for文は以下のように書く。

SET VAR=hoge
for %%i in (ループの条件) do(
  echo %VAR%
)

ループ条件を以下のように書くと、カレントディレクトリにあるhtmlファイルを対象にループを回すことができる。

SET VAR=hoge
for %%i in (*.html) do(
  echo %VAR%
)

コメント

コメントを書く時はremコマンドを使う。

rem コメントを書く

ベーシックPHP

PHPとは

PHPはプログラムをコンパイルせずに実行するスクリプト言語です。
動的なWebページの作成が可能なのでHTMLに埋め込んだり、Webアプリケーションの開発に利用できます。
PHPはWebサーバーで実行されることからサーバーサイドスクリプト言語と呼ばれています。
ちなみにJavascriptとかはクライアントサイドの言語です。
PHPオープンソースです。

PHPの記述方法

<?PHP // 開始タグ

  // コマンドを記述

  ?> // 終了タグ

変数の定義

PHPでは変数の前に「$」を付けて表します。

$変数名

ヒアドキュメント

変数を含む文字列を定義したり出力したりするために使われる構文。
長いHTML内のブロックの中に多くの変数を補完する際に利用する。

<?php
echo <<<EOD // 区切り文字の単語で始める
Print string : "Hello hello"
EOD; // 区切り文字と同じ単語を記述
 ?>

実行結果

Print string : "Hello hello"

ヒアドキュメントの終了を示す文字列の前には字下げや空白などを入れることはできず、行頭から記述する必要がある。末尾には「;」を記述する。

ヒアドキュメントでよく使われる区切り文字

  • EOM (End Of Message)
  • EOF (End Of File)
  • EOD (End Of Document)

ヒアドキュメントを変数に入れることもできます。

<?php
$message = <<<EOM
Print string : "Hello hello" <br>
EOM;
 ?>

比較演算子

比較演算子 説明
== 値が等しい(データ型まで判定しない)
=== 値とデータ型が等しい
!= 値が等しくない(データ型まで判定しない)
!== 値とデータ型が等しくない

連想配列

整数または文字列をキーにした配列を連想配列といいます。

$array['key'] = "value";
$array['key2'] = "value2";
$array['key3'] = "value3";

array()構文を用いる時は => を使います。

$array(
    key  => value,
    key2 => value2,
    key3 => value3
);

keyには整数または文字列を指定します。
valueには任意の値を入れることができます。

<?php
$array = array(
    "key1"  => "value",
    "2" => "value2",
    3 => "value3"
);
var_dump($array);
 ?>

実行結果

array(3) {
  ["key1"]=>
  string(6) "value1"
  ["key2"]=>
  string(6) "value2"
  ["key3"]=>
  string(6) "value3"
}
array_values関数

連想配列の中のすべてのを取り出したい場合は、array_values()関数を使います。

<?php
$array = array(
    "key1"  => "value",
    "2" => "value2",
    3 => "value3"
);
print_r(array_values($array));
 ?>

実行結果

Array
(
    [0] => value1
    [1] => value2
    [2] => value3
)

このように全ての値を取り出し、数値添字をつけた配列を返します。

var_dump関数

変数に関する情報を表示してくれる関数。
変数に指定した式に関して、その型や値を含む構造化された情報を返します。

var_dump($変数名);

ユーザー定義関数

関数を定義する時はfunctionキーワードを使います。

function 関数名(引数) {
  // 処理を書く
}

<?php
// 関数の定義
function output_order($order, $price) {
  print($order . "を注文しました。" . $price . "円です。");
};

// 関数の呼び出し
output_order("Drip coffee", 280);
 ?>

実行結果

Drip coffeeを注文しました。280円です。

参考
PHP: 言語リファレンス - Manual
徹底攻略PHP5技術者認定[初級]試験対応問題集

JavaScript勉強会

Kronos.js

前回のCSS勉強会に続き、12/13に大阪 本町でJavaScript勉強会を開催しました。
前回同様初学者向け、女性限定勉強会なので、女性の方でも気軽に参加していただける勉強会です。

Kronos.js(JavaScript女性限定勉強会)

以下、今回のJavaScript勉強会の資料です。
JavaScriptの基礎についてまとめています。

JavaScriptとは

Webページの文字や画像に動きを与えるプログラミング言語です。

開発の準備

デスクトップにkronosjsフォルダを作成して、エディタを起動します。

アジェンダ

  1. JavaScriptの適用方法
  2. JavaScriptの構文について
  3. JavaScriptで要素を取得するには
  4. JavaScriptのイベントについて

Step1 JavaScriptの適用方法

JavaScriptはScript要素を使ってHTMLに直接記述、または外部のスクリプトファイルから読み込んで実行することができます。

内部スクリプト

HTMLの内部に直接JavaScriptを記述して実行します。
JavaScriptを読み込むには、まず、HTMLにScript要素を記述します。

以下のコードを記述したHTMLファイルを作成して、sample1.htmlという名前で保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    // ここにJavaScriptの処理を書きます
  </script>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

アラートを出してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    alert("Kronos.js");
  </script>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

外部スクリプト

HTML内部に記述するのではなく、別のJSファイルに分離させてJavaScriptを読み込むこともできます。

以下のコードを記述したjsファイルをsample.jsというファイルで保存してください。

alert("Kronos.js");

HTMLで作成したJSファイルを読み込むには、以下のようにscript要素のsrc属性にsample.jsのパスを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
    <script src="./sample.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>Kronos Cafe</h1>
  </body>
</html>

Step2 JavaScriptの構文について

変数

変数とはプログラミング中の値を保持しておくためのものです。
JavaScriptでは変数を以下のように定義します。

var 変数名;
var 変数名=値;

処理結果などの値を変数に入れておけば、その変数を別の処理に引き渡して使うことができます。
変数latteに格納した文字列"Caffe Latte"がアラートとして表示されます。

<script type="text/javascript">
  var latte="Caffe Latte";
  alert(latte);
</script>

配列

配列を作る場合は以下のように[]で囲んで、その中に値を入れていきます。

var 変数名=["値0","値1","値2"];

配列は0から数えます。
配列の要素を取得したい場合は 配列名[配列番号] のように書くと取得できます。

<script type="text/javascript">
  var orders=["Coffee","Moca","Tea","Misto"];
  alert(orders[0]);
</script>

制御構文

if文やfor文などの制御構文を書くことができます。

  • if文
<script type="text/javascript">
  var latte="Caffe Latte";
  if (latte=="Caffe Latte") {
    alert(latte);
  }
  else {
    alert("注文しない");
  }
</script>
  • for文
<script type="text/javascript">
  var orders=["Coffee","Moca","Tea","Misto"];
  for(var i=0; i < orders.length; i++){
    console.log(orders[i]);
  }
</script>

関数

関数の定義はfunctionキーワードと、関数名、引数(任意)、{}の中に処理を書きます。
関数の中には汎用的に使う処理をまとめて書いておくことができます。

function 関数名(引数){
  // ここに処理を書きます
}

関数に定義した処理が最後まで読まれると、「戻り値」という1つの結果を返すことができます。
戻り値はreturnキーワードで定義します。

return 戻り値;

コンソールから関数を呼び出して、結果をコンソールに表示させます。

<script type="text/javascript">
  function doOder(coffee, latte){
    totalAmount = coffee + latte;
    return totalAmount;
  }
  // コンソールに結果を表示
  console.log(doOder(200, 300));
</script>

Step3 JavaScriptのイベントについて

JavaScriptには動作のタイミングをイベントとして定義しています。

  • ボタンが押されたタイミング
  • ボタンにマウスが乗ったタイミング など

ではイベントを実際に使ってみましょう。
HTMLファイルを作成して、samlple3.htmlというファイル名で保存してください。

ボタンが押されたタイミングでアラートを表示してみましょう。
button要素にonclickイベントを登録します。
onclickイベントに関数名を渡すと、ボタンを押したタイミングで毎回その関数が呼ばれます。

<button type="button" name="button" onclick="clickButton()">注文</button>

clickButton関数にはアラートの処理を書いておきます。

<script type="text/javascript">
  function clickButton() {
    alert("注文しました");
  }
</script>

全体のコードは以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    function doOrder() {
      alert("注文しました");
    }
  </script>
  <body>
    <h1>Kronos Cafe</h1>
    <button type="button" name="button" onclick="doOrder()">注文</button>
  </body>
</html>

onclickイベント以外にも以下のようなイベントが用意されています。
使ってみましょう

|イベント|説明| |:---|:---| |onclick|要素がクリックされた時| |onmouseover|要素にマウスが乗った時| |onmouseup|要素上でクリックボタンが離れた時| |onmousedown|要素上でクリックボタンが押された時| |onchange|入力内容が変更された時(textarea要素、input要素、select要素など)| and more...

サンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
  </head>
  <script type="text/javascript">
    function clickButton() {
      alert("注文しました");
    }
  </script>
  <body>
    <h1>Kronos Cafe</h1>
    <button type="button" name="button" onclick="clickButton()">onclick</button>
    <button type="button" name="button" onmouseover="clickButton()">onmouseover</button>
    <select class="" name="" onchange="clickButton()">
      <option value="">Coffee</option>
      <option value="">Tea</option>
      <option value="">Latte</option>
    </select>
  </body>
</html>

Step4 JavaScriptで要素を取得するには

JavaScriptのオブジェクト

  • Windowオブジェクト
    ドキュメントを表示するウィンドウに対応するオブジェクト

以下のようにWindowオブジェクトのalertメソッドを使うと、ウィンドウにアラートを表示させることができます。

window.alert("Caffe Latteお願いします");
  • Documentオブジェクト
    HTMLドキュメントに対応するオブジェクト

以下のようにDocumentオブジェクトのwriteメソッドを使うと、HTMLドキュメントを書くことができます。

document.write("Cafe Latteお願いします");

JavaScriptでは、要素を取得して、その要素に対して処理を行うことができます。
li要素にidを指定して、そのidに対して色を変えてみます。
特定のidの要素を取得するには以下のようにJavaScriptを書きます。

HTMLファイルを作成してsample3.htmlというファイル名をつけて保存してください。

document.getElementById("id名");

取得されたidの要素に対して処理を行うことができます。

// 特定のidの要素のスタイルの色を赤色にする
document.getElementById("id名").style.color="red";

id取得以外にもclassの取得や、<タグ>の取得などの処理を行うこともできます。
- classの取得

document.getElementsByClassName("クラス名");
  • <タグ>の取得
document.getElementsByTagName("タグ名");

全体のコードです。
ボタンが押されたタイミングで特定のshortというidがつけられたタグで囲まれている文字の色が変わります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kronos.js</title>
    <script type="text/javascript">
     function changeOrder() {
       document.getElementById("short").style.color="red";
       document.getElementsByClassName("menu");
       document.getElementsByTagName("h1");
     }
    </script>
  </head>
  <body>
    <h1>Kronos Cafe</h1>
    <ul class="menu">
      <li id="short">Drip Coffee</li>
      <li id="tall">Cafe Misto</li>
    </ul>
    <button type="button" name="button" onclick="changeOrder()">注文</button>
  </body>
</html>

CSS勉強会「Kronos.css」

CSS勉強会

11/22に大阪 本町でCSS勉強会を開催しました。
初学者向け、女性限定勉強会なので、女性の方でも気軽に参加していただける勉強会です。

次回は12/13(火)にJavaScriptの勉強会を予定しています。
ご都合の合う方は是非お越しください。
Kronos.js(JavaScript女性限定勉強会)

以下、今回のCSS勉強会の資料です。
CSSフレームワーク「Foundation」についてまとめています。


CSSフレームワークとは

フレームワークの意味:枠組み、骨組み、骨格

フレームワークの決まりにしたがったCSSを書くと、簡単にそれなりのデザインのWebページができます。

メリットデメリット

メリット デメリット
あらかじめボタンやナビゲーションバーなどの様々な部品が用意されているので、簡単にデザインができる 簡単にできる分見栄えが同じようになる

CSSフレームワークの種類

Foundationの特徴

  • 簡単にレスポンシブデザインのWebページを作ることができます。
  • デザインはとてもシンプルです。
  • 簡単にカスタマイズができます
    →Foundationのサイトでカスタマイズしてフレームワークをダウンロードすることができます
  • 標準でSass (= CSSを効率的に記述するための記法) に対応しています。

Foundationのサイトの説明

Kitchen Sink

Foundationに用意されているボタンや、テーブル1つ1つの要素がどんなデザインなのかを確かめることができます。
カタログ感覚で使えます。

CSS

CSSのダウンロードページです。

  • Complete
    foundationフレームワークで用意されているすべてのCSSやJSファイルが欲しい場合はこちらをダウンロードします。

  • Essential
    最低限不可欠なファイルが入っています。
    フォント、グリッド、ボタンが含まれています。
    ファイルの重さはCompleteの二分の1くらいで軽いので、最低限しか必要ない場合は、不要なファイルが入らないのでこっちで十分だと思います。

  • Custom
    テーマカラーの変更や、フォントサイズの変更などをカスタマイズしたフレームワークをダウンロードすることができます。

  • Sass
    Sassに対応しています。
    フレームワークのカスタマイズもできるようです。

  • Accessibility
    ページを誰もがアクセスしやすく作るためのガイドラインが載っています。

HTML TEMPLATES

8つのレスポンシブ対応してるHTMLのテンプレートをダウンロードできます。
"See Demo"ボタンを押すと、デモページを見ることもできます。

Building Blocks

FoundationのUIコンポーネントのライブラリーを見ることができます。
例えば、"Responsive Pagination With Page Numbers"というUIコンポーネントを使いたければ、HTMLとCSSが記述されてあるので、その通り真似して書けば、ページ番号を表示することができます。

Resources

テンプレートや、icon、フォントなどをダウンロードして使うことができます。

Docs

Foundationのドキュメントが書かれています。
ボタンの記述方法など細かく書かれているので、実際にコーディングする時はDocsを読みながら作業すると良いでしょう。

本日のハンズオンメニュー

6つのStepを用意しました。

  1. Hello Worldを表示してみよう
  2. いろんなButtonを作ってみよう
  3. テーブルを作ってみよう
  4. フォームを作ってみよう
  5. ページトップにナビゲーションバーを表示してみよう
  6. 簡単なページを作ってみよう

Step1 Hello Worldを表示してみよう

1-1. Foundationのダウンロード

ダウンロードしてきたフォルダのファイル構造はこのようになっています。

css

js

  • app.js
  • vender
  • foundation.js
  • foundation.min.js
  • jquery.js
  • what-input.js

  • CDNで外部からソースを読み込む場合

<!-- 圧縮されたCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<!-- 圧縮されたJavaScript -->
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

※ CDNとは「Content delivery network」の略で、stylesheetやscriptがネットワーク経由で配信されています。

1-2. スタイルシートを読み込む

htmlのの中にlinkタグを記述します。

ダウンロードしてきた場合

以下のコードをsample1.htmlという名前をつけて、ダウンロードしてきたフォルダ直下に保存してください。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="#" class="button">button</a>
  </body>
</html>

CDNリンクを使う場合

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="#" class="button">button</a>
  </body>
</html>

このコードはFoundationのサイトのInstallationページにまるまる記述されているので、次回からはここをコピーすればすぐにhtmlを書き始めることができます。

Step2 いろんなButtonを表示してみよう

2-1. ボタンの定義方法

Foundation6にはデフォルトで様々な種類のbuttonが用意されています。
これらのボタンは、<タグ>に決まったclass名を指定するだけで、foundation6がいい感じのボタンに仕上げてくれます。

では早速試してみましょう。

以下のコードを記述して、sample2.htmlというファイル名で保存してください。

サンプルコード

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <button type="button" class="button">Default</button>
    <button type="button" class="success button">Save</button>
    <button type="button" class="alert button">Delete</button>
  </body>
</html>

まずはベーシックなbuttonを作ってみます。

ボタンにはaタグで書くパターンと、buttonタグで書くパターンがあります。
aタグにリンクをつけて別のページに遷移するようなボタンを作りたい場合は以下のように記述します。

<a href="#" class="button">Default</a>

class名をbuttonとすると、Foundation6のスタイルシートに定義されている.buttonのスタイルが反映されます。
.buttonはfoundation.cssで以下のように定義されています。

.button {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: background-color .25s ease-out,color .25s ease-out;
    transition: background-color .25s ease-out,color .25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0;
    padding: .85em 1em;
    margin: 0 0 1rem;
    font-size: .9rem;
    background-color: #2199e8;
    color: #fefefe;
}

このようにフレームワークCSSを使えば、自分でCSSを書かなくても綺麗なボタンをデザインすることができます。
また、buttonだけでこれだけのCSSを自分で書くとすると、大変時間がかかってしまいますが、フレームワークを使うとで短時間で見栄えの良いデザインにすることができます。

一方、現在のページで、ボタンを押して何かしらのアクションを加えたい場合はbuttonタグを使います。

<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>

class名にbuttonとsuccessをつけると、「成功」をイメージさせる緑のボタンができます。保存ボタンなどに使われます。
また、class名にbuttonとalertをつけると、「危険」をイメージさせる赤いボタンができできます。削除ボタンなどに使うことができます。
.successに定義されているCSSは以下の通りです。

.button.success {
    background-color: #3adb76;
    color: #fefefe;
}
.button.success:focus, .button.success:hover {
    background-color: #22bb5b;
    color: #fefefe;
}

2-2. サイズ変更

<a class="tiny button" href="#">tiny</a>
<a class="small button" href="#">small</a>
<a class="button" href="#">default</a>
<a class="large button" href="#">large</a>
<a class="expanded button" href="#">expanded</a>
<a class="small expanded button" href="#">small expanded</a>

ボタンの大きさは以下のように文字のサイズで変えているようです。

.button.tiny {
    font-size: .6rem;
}
.button.small {
    font-size: .75rem;
}
.button.large {
    font-size: 1.25rem;
}

2-3. 色変更

<a class="secondary button" href="#">Secondary Color</a>
<a class="success button" href="#">Success Color</a>
<a class="alert button" href="#">Alert Color</a>
<a class="warning button" href="#">Warning Color</a>
<a class="disabled button" href="#">Disabled Button</a>

Step3 テーブルを作ってみよう

3-1. テーブルの定義方法

Foundation6ではデフォルトで4種類のtableが用意されています。
例えば、classなど付けず、ストレートにtableの構成を書くだけで、Foundation6で用意されている最もベーシックなtableを作ることができます。

以下のコードを記述して、sample3.htmlという名前をつけて保存してください。

サンプルコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Adress</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Spider</td>
          <td>NY</td>
        </tr>
        <tr>
          <td>Iron</td>
          <td>Cali</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

3-2. テーブルのクラスの種類

Foundation6では、tableタグのclass属性に以下のような値をつけることで、綺麗なテーブルを作ることができます。

クラス名 説明
hover マウスオーバーした時に行の色が少し暗くなるホバーエフェクトがつきます。
stack スマホなどの小さい画面で見た際に、積み上げたようなテーブルになります。

Step4 Formを作ってみよう

formの構成と一緒に、Foundation6で用意されているスタイルを組み合わせて使うことで、フレキシブルなデザインのformを簡単に作ることができます。
formには、ラジオボタンチェックボックスなどありますが、今回はテキスト入力欄のみの説明になります。

4-1. シンプルなテキストの入力欄を作る

テキスト入力欄の種類には、日付や数値やemailや電話番号など、多くの種類のテキストに対応できるスタイルが用意されています。
クラス名もとてもシンプルでわかりやすいので、すぐに覚えられると思います。

例えば、inputタグのtype属性の値にtextと書くと、テキストを入力できるフォームができます。 以下のコードを記述して、sample4.htmlというファイル名で保存してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <form>
      <label>Input text
        <input type="text" placeholder="テキストを入力してください">
      </label>
    </form>
  </body>
</html>

※ placeholder属性には、ダミーテキストを値として入れることができます。

4-2. type属性の値の種類

text以外には以下のような種類があります。

値の種類 説明
date カレンダーが表示され、日付を入力できます。
datetime カレンダーが表示され、年月日を入力できます。
datetime-local カレンダーが表示され、datetimeに加えて時間まで入力できます。
email メールアドレスを入力します。
month カレンダーが表示され、年月まで入力できます。
number スピンボタンと呼ばれる上下ボタンによって数値のインクリメントとデクリメントができます。自分で入力することも可能です。
password パスワード入力欄で、入力値が●で表示されます。
search 検索ワードを入力します。
tel 電話番号を入力します。
time スピンボタンつきで、時間を入力できます。
url URLを入力します。
week XXXX年第Y週のように週を入力することができます。

4-3. 表示位置を変える

ラベルの位置

labelタグのクラス名にtext-rightかfloat-rightと書くと、ラベルが右よりに配置されます。
leftの場合も同様です。

<div class="row">
  <div class="small-3 columns">
    <label for="middle-label" class="text-right middle">Label</label>
  </div>
  <div class="small-9 columns">
    <input type="text" id="middle-label" placeholder="テキストを入力してください">
  </div>
</div>

※ クラス名にclumnsと指定すると、foundation.cssファイルの.columnsに定義してあるpadding-leftとpadding-rightが効くので左右に余白がつきます。
※ クラス名についている、"small-3"や"small-9"はFoundation6のグリッドシステムを使っています。

Step5 ページトップにナビゲーションバーを表示してみよう

5-1. ベーシックなナビゲーションバー

以下のコードを記述して、sample5.htmlというファイル名で保存してください。

サンプルコード

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kronos.css</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text">Site Title</li>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">access</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>
  </body>
</html>

ナビゲーションバーの枠組みとなるhtml

<div class="top-bar">
  <div class="top-bar-left"></div>
  <div class="top-bar-right"></div>
</div>

top-bar-leftとtop-bar-rightには、以下のようにCSSでfloatが定義されています。

.top-bar-left {
  float: left;
}
.top-bar-right {
  float: right;
}

5-2. レスポンシブなナビゲーションバー

スマホ画面にあわせてメニューのタブが変化します。
以下のコードを追加することで、デフォルトでは画面が小さくなった時にタイトルバーが表示されて、バーに表示されていたメニューは隠れます。
data-responsive-toggleには切り替えたいメニューのIDを指定します。

<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon dark" type="button" data-toggle></button>
</span>

サンプル

<div class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon dark" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</div>

Step6 簡単なページを作成してみよう

ここまでのフレームワークのコンテンツを使って、自由にページを作成してみてください。
私が作ったサンプルを貼っておきますので、困った場合はこのコードをカスタマイズしてお使いください。

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kronos.css</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
  <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
</head>
<body>
  <!-- ナビゲーションバー -->
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="menu">
        <li class="menu-text">The Heroes</li>
      </ul>
    </div>
  </div>

  <!-- タイトル -->
  <div class="row">
    <div class="large-12 columns">
      <div class="text-center" style="margin-top: 30px">
        <h3>The Heroes</h3>
      </div>
      <p class="text-justify">
        The Heroes were an Ameriacan rock band, formed in LA in 1960. With members Spider, Iron and Bat, they became widely regarded as the foremost and most influential act of the rock era. Rooted in skiffle, beat, and 1950s rock and roll, the Heroes later experimented with several musical styles, ranging from pop ballads and Indian music to psychedelia and hard rock.
      </p>
      <hr>
    </div>
  </div>

  <!-- テーブル -->
  <div class="row">
    <div class="large-12 columns">
      <table class="stack hover columns text-center" style="margin-top: 1.25rem">
        <thead>
          <tr>
            <th class="text-center">Members</th>
            <th class="text-center">Part</th>
            <th class="text-center">And More</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Spider</td>
            <td>Guitar & Vo</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
          <tr>
            <td>Iron</td>
            <td>Base</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
          <tr>
            <td>Bat</td>
            <td>Drums</td>
            <td>
              <a href="#" class="button">Detalis</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

AWS勉強会

AWS勉強会

AWSの勉強会に参加してきました。

勉強会タイムスケジュール
タイムスケジュール
19:30~ AWS Elastic Beanstalk
20:30~ AWSへの移行
20:50~ 質疑応答
21:00~ 勉強会終了

勉強会メモ

AWS Elastic Beanstalk

Elastic Beanstalkは、AWSにアップロードするための簡単な方法
細かいことができるPaaS

Elastic Beanstalk
分類 Deploy&Management(今はコンピューティング)
利点 作成したアップロードするだけで展開されて確認ができる。
本番公開もできる。
アプリの利用環境を手作業で作成する必要がない。
サーバーやロードバランサーなど構築しなくてもいい。

対応のプラットフォーム

  • Dokerの上で立ち上げることもできるようになった(最近追加されたらしい)
  • 基本的に無料(リソース分はお金がかかる)

論理構成

  • configuration Template:どういう風に立ち上げるかを保存しておくファイル

デプロイ

環境について

  • Web Server:作る時に選ぶ(今回はこっち)
  • Worker Server:受け渡して処理して回答を得たい時に使う

操作するツール

機能について

環境構築機能

モニタリング対象

  • URLアクセス
  • ELBの存在
  • CNAMEの設定?などなど

ログの閲覧

  • DNS swapping
  • Route53などのDNS機能が必要になるが非常に便利に利用可能
  • swappingすることで違うサイトで見てたのがうまくできるようになる

デモ

AWSのコンソールで触る
1. 左のメニューElastic Beanstalk
2.「今すぐ作成しましょう」または「アクション」のボタン
3.ウェブサーバーの作成

ウェブサーバーの作成
環境タイプ プラットフォーム → なんでも(Dokerとかある)
環境タイプ → 負荷分散と単一インスタンス(今回はこっち)どっちも操作は変わらない
送信元(ソース) 初めての場合サンプルアプリケーション
作り上げたものが表示される画面(とりあえず作った画面確認したい時はサンプルでいい)
環境名 ドメインを選ぶのを管理(使えるかチェックする)
自社のDNSを用意しなくてもこのアドレスをコピーして貼り付ければ見れる
その他のリソース VPCに〜〜にチェック
インスタンスタイプ t1microとかのちっさいやつ選んどく
システムタイプ そのまま拡張でいい
ルートボリュームタイプ なんでも。今回はマグネチィック
環境タグ ネームタグをつけれるけど勝手につけてくれるのでなくてもいい
VPC 事前準備必要
パブリック 公開するかどうか
セキュリティーグループ 許可するしない
アクセス権限 インスタンスプロファイル(サーバーに対しての権限設定)
サービスロール 初期値のものでいい

4.確認画面で開始

  • 右側のプラットフォームはなにがうごいているか(今回はPHPでデモしてもらいました)
  • だいたい5分くらいかかる
  • 終わると右側のURLにアクセス
  • 作ったファイルが動いてるサンプルページが開く(環境は作成完了)
  • 作ったサンプルのソースをあげることができる

5.アップロードとデプロイ

  • 作ったファイルをアップロード
  • バージョンラベルを入れるの重要
  • アップロードした情報を入れたり紐付けしたりするので少し時間がかかる
  • 実行バージョンが変わる(この環境で動いてますよということ)
  • アプリケーションのバージョン変更(どの環境に適用されてますよっていうのが見える)
  • 新しいのにあげたけど元戻したい場合チェック入れたらアプリケーション環境を呼び出すことができる
  • 環境変えたらまたぐるぐる回ってバージョン変更することができる
  • 以前のバージョンの環境では見えなくなる(Not found出る)
  • インスタンス停止とか削除できるけどダメ!Elastic BeanstalkはEC2が動いてるか監視してるので 強制終了したことになっちゃって新しいのを立ち上げないとと思っちゃう
  • 本来止まってたのが動いてる

※ メモリの使用率はEC2見れない
→ Elastic Beanstalkの画面から見れる(CPUの使用率とか)

※ アクションからクローンを作れて、本番用に、今作ってるバージョンと同じものを公開するというのもできる

感想

AWSはまだ触ったことが無くて、勉強会では知らないワードがたくさん出てきましたが、とても興味を持ちました。
今年中に何かWebサイト作って、ちゃんと勉強して使ってみようと思います。
今回はElastic Beanstalkについてでしたが、EC2をまず触ったことがなかったので、まずはEC2から始めてみます。