シェルスクリプトのメモ
シェルスクリプトの書き方
引数
コマンドの引数に指定した値を使う時は$を使う。
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
変数スコープ
変数をローカル化するにはsetlocalとendlocalで囲む。
囲んだスコープ内だけで変数が有効になる。
@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勉強会を開催しました。
前回同様初学者向け、女性限定勉強会なので、女性の方でも気軽に参加していただける勉強会です。
以下、今回のJavaScript勉強会の資料です。
JavaScriptの基礎についてまとめています。
JavaScriptとは
Webページの文字や画像に動きを与えるプログラミング言語です。
開発の準備
デスクトップにkronosjsフォルダを作成して、エディタを起動します。
アジェンダ
- JavaScriptの適用方法
- JavaScriptの構文について
- JavaScriptで要素を取得するには
- 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 関数名(引数){
// ここに処理を書きます
}
関数に定義した処理が最後まで読まれると、「戻り値」という１つの結果を返すことができます。
戻り値は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に用意されているボタンや、テーブル１つ１つの要素がどんなデザインなのかを確かめることができます。
カタログ感覚で使えます。
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を用意しました。
- Hello Worldを表示してみよう
- いろんなButtonを作ってみよう
- テーブルを作ってみよう
- フォームを作ってみよう
- ページトップにナビゲーションバーを表示してみよう
- 簡単なページを作ってみよう
Step1 Hello Worldを表示してみよう
1-1. Foundationのダウンロード
- ファイルをダウンロードする場合
Foundationダウンロードページからファイルをダウンロードできます。
ダウンロードしてきたフォルダのファイル構造はこのようになっています。
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に加えて時間まで入力できます。 |
| メールアドレスを入力します。 | |
| 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：どういう風に立ち上げるかを保存しておくファイル
デプロイ
- eclipse
- git
- visual studio
環境について
- Web Server：作る時に選ぶ（今回はこっち）
- Worker Server：受け渡して処理して回答を得たい時に使う
操作するツール
機能について
環境構築機能
- EC2（サーバー）の設定
- ELB（ロードバランサー）の設定
- Auto Scalingの設定
モニタリング対象
- URLアクセス
- ELBの存在
- CNAMEの設定?などなど
ログの閲覧
デモ
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から始めてみます。
Swift：ImageViewの色を変える(Xcode)
UIColorを使ってImageViewの色を変える
背景の色を変えるだけの簡単なアプリを作ります。
完成イメージ
上部の色のボタンをタップすると背景の色が変わります。
UIColorを使って色を変える場合、使うImageは単色でなければいけません。
そのため、柄付きの画像の色を変えたい場合は、背景と柄を別々のImageViewに分けてStoryboard上に配置します。
1.Storyboard上にImageViewを配置する
7ちゃんの画像と背景の画像を別々のImageViewに入れてConstraintsを追加します。
背景は全面に配置しています。 全面に配置するConstraintsの追加方法は前回のブログ を参考にしてください。
2.色ボタン用にButtonを4つ配置する
ButtonのDefault Imageにボタンの画像を指定します。
すべてのButtonにそれぞれの画像を指定します。
3.色ボタンと背景をViewControllerと紐付ける
4.ViewControllerにボタンをタップする処理を書く
@IBOutlet weak var backgroundImageView: UIImageView! @IBOutlet weak var redButton: UIButton! @IBOutlet weak var blueButton: UIButton! @IBOutlet weak var greenButton: UIButton! @IBOutlet weak var yellowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() // 色ボタンを配列に入れる let buttons = [redButton, blueButton, greenButton, yellowButton] for button in buttons { // アクションの設定 button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside) } } // 色ボタンがタップされると呼び出される func tapButton(sender: UIButton) { if let button = sender as? UIButton{ if(button == redButton){ //TODO:色を変える処理 } } }
5.ViewControllerに色を変える処理を書く
viewDidLoad()に以下のコードを追加します。
// テンプレートとしてbackgroundImageViewを描画する
backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate)
.imageWithRenderingMode(.AlwaysTemplate)を指定すると、ImageViewをテンプレートとして描画できるようになります。
デフォルトでtintcolorが青色に設定されているので、背景の色が青色になります。
デフォルトの色はStoryBoard上でも変更することができますが、独自の色を作って色を設定したいので、今回はStoryBoard上では変更しません。
※Storyboard上でデフォルトの色を変える場合
6.独自に指定した色を使えるように処理を書く
独自の色を指定したいので、RGBで指定した色を使えるようにします。
swiftのUIColorはデフォルトでRGBの値を0.0~1.0の値で扱って、インスタンスを生成できる仕様になっています。
backgroundImageView.tintColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
※ alphaは不透明度
ですが、RGBは3桁表記で扱うことが多く、0.0~1.0の値で指定するのは結構難しいです。
そこで、extensionに以下のように定義するとRGBを3桁で扱えるようになります。
// RGBカラーを3桁で扱えるようにする extension UIColor { class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{ return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha) } }
extensionを定義した上で、UIColorでRGBを指定すると、思い通りの色を指定することができます。
classにRGBで色を定義する。
class ConstColor{ // 色の指定 func red() -> UIColor { return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0) } func green() -> UIColor { return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0) } func blue() -> UIColor { return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0) } func yellow() -> UIColor { return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0) } }
色の準備は以上で、定義したUIColorを呼び出すことで色を変更することができます。
7.classに指定したUIColorを色ボタンが押されたタイミングで呼び出して背景の色を変える
色ボタンが押されると、tapButton関数が呼ばれて、各色ボタンごとに背景の色が変わります。
※全体のコード
class ViewController: UIViewController { @IBOutlet weak var backgroundImageView: UIImageView! @IBOutlet weak var redButton: UIButton! @IBOutlet weak var blueButton: UIButton! @IBOutlet weak var greenButton: UIButton! @IBOutlet weak var yellowButton: UIButton! override func viewDidLoad() { super.viewDidLoad() // テンプレートとしてbackgroundImageViewを描画する backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate) // 初期表示は背景の色が緑 backgroundImageView.tintColor = ConstColor().green() // 色ボタンを配列に入れる let buttons = [redButton, blueButton, greenButton, yellowButton] for button in buttons { // アクションの設定 button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside) } } // 色ボタンがタップされると呼び出される func tapButton(sender: UIButton) { if let button = sender as? UIButton{ // 各色ボタンが押された時の処理 if(button == redButton){ // 背景のtintColorを赤色に変える backgroundImageView.tintColor = ConstColor().red() } else if(button == blueButton){ backgroundImageView.tintColor = ConstColor().blue() } else if(button == greenButton){ backgroundImageView.tintColor = ConstColor().green() } else{ backgroundImageView.tintColor = ConstColor().yellow() } } } // 色の指定 class ConstColor{ func red() -> UIColor { return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0) } func green() -> UIColor { return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0) } func blue() -> UIColor { return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0) } func yellow() -> UIColor { return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0) } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } // RGBカラーを3桁で扱えるようにする extension UIColor { class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{ return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha) } }
8.実行
初期表示
赤のボタンがタップされた時
青のボタンがタップされた時
黄色のボタンがタップされた時
