2014/04/08

ドットインストールの「Javascript入門」を少しずつまとめていきます。
http://dotinstall.com/lessons/basic_javascript_v2

Javascriptとは何か？

概要

  • 主にブラウザに実装されているスクリプト言語
  • 動きのあるWebサイト制作に使われる。
  • Javaとは別物。

リファレンス

必要な知識知識

  • HTML
  • CSS

ツール

  • ブラウザ(Google Chrome)
  • エディタ

はじめてのJavascript


  • 書き方は2通り

    • HTMLファイル内に記述

      < script>
      console.log(“hello,world”);
      < /script>

    • 外部ファイル参照の場合は以下で取得

      < script src=”myscript.js”>< /script>

  • console.logの確認はChromeならChromeDeveloperToolの「Console」タブで確認
    Chrome Developer Toolは「Ctrl + Shift + i 」で表示。

  • 文末は;(セミコロン）で区切る
  • 複数行のコメントは以下で記述

    / *
    コメント文
    */

  • 単一行のコメントは以下で記述
    // 一行コメント

変数を使ってみよう

変数

  • データにつけるラベルの事。
  • 変数宣言は以下で行う。
    var msg;
    msg = “hello,world!”;
    console.log(msg);
  • 宣言と代入を同時に行う事も可能。
    var msg = “hello,world!”;

データ型

  • 数値
  • 文字列
  • 真偽値（True／False)
  • オブジェクト
    • 配列
    • 関数
    • 組み込みオブジェクト
  • undefined（値が定義されていない）

  • null（意図的に値が無い）

    • -

2014/04/06

Javascriptとは

  • オブジェクト指向型（プロトタイプベース）の軽量なスクリプト言語

Javascriptの特徴

  • スタンドアローンの言語としては不便だが、ウェブブラウザなどの他製品やアプリケーション上での実装、動的なWebサイト構築等が得意。
  • Javascriptの仕様は、ECMAScriptというスクリプト言語で定められている。EMACScriptはコア言語とも呼ばれる。
    （ECMAScriptを各社で実装したのが、Mozilla社のJavascriptだったり、MicrosoftのJScript、AdobeのActionScriptだったりする。）
  • クライアントサイドJavascriptは、コア言語に加えて、ブラウザ&DOMコントロール用オブジェクト を拡張している。
  • サーバサイドJavascriptは、コア言語に加えて、サーバ上でのJavascript実行関連オブジェクトを拡張している。
  • Javascript ≠ Java。別物。オーストリアとオーストラリアくらい違う。

他言語との違い

  • クラス（似たオブジェクトを量産するための仕組み）が無い。
    • 通常クラスという「型」を元にして、クラスの特設（属性や機能）を引き継いだオブジェクト（「実体」）を作成する
  • クラスで行っていた、同等特性のオブジェクト量産は、
  • 関数自身もオブジェクト

実行の仕方


  1. HTML／XHTMLファイル内に以下記述で埋め込んで直接実行

    < script >
    　　スクリプト文
    < /script >

  2. 外部スクリプトファイル（「ファイル名.js」)として以下記述で呼び出して実行

    < script src = “ファイル名.js”>< /script>

書き方

  • 文末にセミコロン(;)をつける
  • 大文字、小文字は区別される（NUMとnumは別物。）
  • スクリプトファイル内の空白、改行は無視される。

出力

  • Javascriptの標準ライブラリには入出力関連の関数がほぼ無い。

  • 出力には以下を使用する。

    • ブラウザへの出力関数(alert)

      alert(“Hello,world!”);

    • コンソールへの出力関数(console.log)

      console.log(“Hello, world”);

コメント

  • コメント（単一行）は以下。

    //ここから1行はコメントです。

  • コメント（複数行）は以下。

    /* ここからは複数行でも閉じるまではコメントです。 */

エラー処理

  • 以下でエラー発生する可能性のある処理と、エラー発生時の対応を記述
    try{
    　　test(“test”)　//エラー発生する可能性のある処理
    } catch(e){
    　　alert(“エラーは”+e+”です。”);

宣言

変数

  • 変数宣言はvarで行う。

    var 変数名

  • 変数宣言と初期化は同時実行可能

    var a=1;

  • 変数には型は無い。

  • 命名規則

    1. 1文字目は、英字、アンダースコア(_)、ドル記号($)
    2. 2文字目以降は1+数字
    3. 変数名の大文字、小文字は区別される
    4. Javascriptの予約語は使えない。

    ◯ _test
    ◯　$num
    ×　　1num

定数

  • 定数宣言はconstで行う。
    const 定数名 =183;

データ型

型はalert(typeof(値))などで確認可能。
  • 数値
  • 文字列
  • 真偽値
  • オブジェクト
    • 関数、配列(Array)、日付(Date)、正規表現(RegExp)・・・
  • null //意図的に値が無い
  • undefined //値が未定義

数値

数値は10進数、8進数、16進数を扱う事が可能。
例として

  • 65535（10進数）
  • -123.56（10進数）
  • 0xffff（16進数）
  • 0x9ab4（16進数）
  • 011（8進数）
  • -3.1E12

文字列

  • “（ダブルクォーテーション）か、’（シングルクォーテーション）で囲む。

    ”このように文字列を記述”
    ‘シングルクオーテーションでもOK’

  • ダブルクオーテーション内の文字列として、ダブルクオーテーションを使いたい場合は、\”を使う。
    シングルの場合も同じ。（\’）

    “ここでダブルを使用する場合は\”と記述”
    ‘シングルの場合は\’と記述’

  • 文字列途中に変数を含む場合は以下のように記述

    alert(“このように” + x + “+で連結します”);

  • 文字列から数値への返還は以下

    parceInt(“123”);　//整数値
    parcefloat(“1.5”);　//少数値

演算子

  • 代入演算子
    • +=、-=、*=、／=、%=
    • <<=、>>=、>>>=
    • &=
    • ^=
    • |=
  • 比較演算子
    • ==、!=
    • ===、!==
    • >、>=、<、<=
  • 算術演算子
    • ＋、―、*、/
    • %（余り）
    • ++　（インクリメント）
    • —　（デクリメント）
    • -a　（符号反転）
  • ビット演算子
    • a & b、a | b、a ^ b、~ a、a >> b、a >>> b
  • 論理演算子
    • a && b （aかつb）
    • a || b （aまたはb）
    • !a (aではない）
  • 特殊演算子
    • 条件演算子
    • コンマ演算子
    • delete
    • in
    • instanceof
    • new
    • this
    • typeof
    • void
      }

オブジェクト

  • オブジェクトは以下のように定義される

    var objName = new Object();
    もしくは
    var objName = {}　//こちらは「オブジェクトリテラル形式」と言う。

  • オブジェクトには以下の種類が有り。

    • 標準ライブラリオブジェクト
      • オブジェクト （Object）
      • 真偽値 （Boolean）
      • 計算 （Math)
      • 数値 （Number)
      • 配列 （Array)
      • 文字列 （String)
      • 正規表現 （RegExp）
      • 日付 （Date）
      • 関数 （Function）
      • エラー （Error）

制御文

if文

var num = 2;
if (num >= 6) {
　　alert(“6以上です。”)
} else if ((num<6)&&(num>=3)) {
　　alert(“3以上6未満です。”)
} else {
　　alert(“3未満です。”)
}

while文

while (true) {
// 無限ループ!
}

for文

for (var i = 0; i < 5; i++) {
　　// 5 回実行されます
　　alert(i+”回目の実行です。”);
　}

関数

function add(x, y) {
　　var total = x + y;
　　return total;
}

参考

2014/04/03

PHPとは

  • 「Php Hypertext Processing」の略。
  • 他の言語との大きな違いとして、HTML内に組み込むことが出来る。

データ型

  • 扱えるデータ型は以下。
    • 文字列
    • 整数(int)
    • 浮動小数点(float)
    • 真偽値
    • 配列
    • オブジェクト
    • リソース
    • null

    書き方

  • ファイルの拡張子は「.php」
  • 文末は必ずセミコロン(;)をつける。
  • PHPコードは以下の文法の間に書く。ただし、PHPコードのみをファイルに書く場合は、終わりの?>は省略する。
    < ?php ~ ?>

出力

  • print文 or echo文 をつかう。

    print “テスト”;
    echo “テスト”;

    コメント

    （単一行）は以下で指定

    //ここから1行はコメントです。

  • コメント（複数行）は以下

    /* ここから閉じるまでは何行でもコメントです。 */

参考

2014/04/02

ドキュメント作成、文章表現のスキルアップのために
気になっていた「入門 考える技術、書く技術」を読んだので、
内容要約してみました。

入門　考える技術・書く技術

わかりやすい伝え方に必要なステップを一から学ぶことができる良書でした。
いくつもあるロジカル本の中でも個人的に一番わかりやすかったです。
-------------------------------------------------------------

0. 誤解に気付く

  • × 【誤解1】自分が書きたい事を書く→ 読み手が知りたい事を書く。
  • × 【誤解2】起承転結で書く → まず結論。それから理由・詳細。
  • × 【誤解3】とりあえず書き始める → まず考えを整理する。それから書く。

1. 読み手を理解する

読み手は、なんで忙しい中わざわざあなたの話を聞くか？
→ 読み手が「この人おれの知りたい事に答えてくれるかも！」と思うから。
→ 読み手の知りたいことに答えないと。
  • 読み手って誰？
  • 読み手の知りたい事って何？
    • OPQ分析の大原則
      • O(Objective)
        読み手の望ましい状況 「読み手はどうしたい？」
      • P(Problem)
        読み手にとっての問題＝Objectiveとのギャップ 「読み手の希望に対して実際はどう？」
      • Q(Question)
        OPで読み手が抱くであろう疑問 「読み手はそういう時どう思う？」
      • A(Answer)
        Qに対する読み手の結論（答え） 「読み手はこうするべきでは？」
        ＋
      • レール
        文章のテーマ、ものさし
    • OPQ分析のポイント
      • 全て主語を「読み手」にして読んでみて変じゃない？
      • レール(文章のテーマ)がずれていない？
      • QOPQAのQへの回答Aは直接の回答になってる？

2. 考えをまとめる

概要
以下を繰り返す
  • WhySo なんでそうなるの？(結論(答え) → なんで？ → 理由）
  • SoWhat だから何なの？(理由 → だから何？ → 結論(答え)）

3. 考えを整理する

  • 帰納法で考える（推論である結論（答え）が本当に正しいか？理由が裏付ける）
    • まず結論(答え)を冒頭に置く。
    • 次に理由。 WhySoチェック。 「なぜならば、例えば、具体的には」+「下部メッセージ」で不自然じゃない？
    • 下部メッセージの「つなぎ言葉」は全て同じ種類か。
  • 演繹法で考える（全ての前提（下部メッセージ）が正しければ、結論(答え)も絶対に正しい。）
    • その前提は本当に間違いなく正しい？
    • 縦と横の2次元を意識する
      • 縦の関係＝「論理の帰結」＝上が結論、下が根拠／説明
      • 横の関係＝「ロジックの流れ」＝同種類のメッセージ群
    • ピラミッドの縦横を無視しない
    • 同じメッセージの繰り返しに注意
  • メッセージ作成のポイント
    • 名刺表現、体言止めは禁止（メッセージでは無く単語になってしまう）
    • 「あいまい言葉」は禁止(見直し、再構築、適切な、問題　等)
    • 1つのメッセージは1つの文章。
    • 構成を、結論とメッセージの構造がひと目でわかるようにする
    • 列挙する事柄は5個まで。(マジックナンバー7±2の下限値)
    • しりてが接続詞は禁止(〜し、〜であり、〜して、〜だが、〜せず)←前後関係がAndで論理関係が無い
    • ピラミッド内で文章を書こうとしない（構成作成と文書作成は分ける）

4. 文章を書く

  • メッセージ毎に段落を作る（メッセージは冒頭に）
  • メッセージの塊をわかりやすく
  • 文章同士をロジカル接続詞でつなげる
    時間／対比／原因・結果／目的／条件

5. 具体的なアクション

  1. まず「だれが何を知りたい？」
  2. 次に「知りたい事の答えは～。なんでかっていうと～だから。」
  3. チェック「文章がロジカル接続詞でつながってる？」
  4. 最後に「自分が読み手だったとしてこれ読んで納得出来る？」

2014/01/23

Vagrant環境の起動(Vagrant up)を実行した所、
以下メッセージで起動に失敗した時の復旧方法になります。
-----------------------------------------------------------------------
C:\HashiCorp\Vagrant\localdev>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
Your VM has become "inaccessible." Unfortunately, this is a critical error
with VirtualBox that Vagrant can not cleanly recover from. Please open VirtualBox
and clear out your inaccessible virtual machines or find a way to fix
them.

C:\HashiCorp\Vagrant\localdev>
-----------------------------------------------------------------------

VirtualBox上で確認すると、「アクセスできません」というステータスで
操作できなくなっているようです。




ここで、
対象のVirtualBox用ディレクトリにある仮想マシンイメージファイル（.vox）
の「xxxxxx.vbox-tmp」を「xxxxxx.vbox」にリネームして、
Virtualboxを再起動すると「中断」状態で正常認識されました。


この状態で再度vagrantupを実行すると正常起動を確認できました。
-----------------------------------------------------------------------
C:\HashiCorp\Vagrant\localdev>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
[default] Clearing any previously set forwarded ports...
[default] Creating shared folders metadata...
[default] Clearing any previously set network interfaces...
[default] Preparing network interfaces based on configuration...
[default] Forwarding ports...
[default] -- 22 => xxxx (adapter 1)
[default] Booting VM...
[default] Waiting for machine to boot. This may take a few minutes...
-----------------------------------------------------------------------

Virtualbox上でも正常起動が確認できました。




直前にvagarant halt実行しないまま、うっかりPCシャットダウンしてしまったので、間違いなくそれが原因だと思います。。
この時、起動時に参照するべきVirtualBox用仮想マシンイメージファイル（.vox）が正常終了していないためにtmpファイルとして別名保存されていたようです。

同様の現象の場合はお試しあれ。

2014/01/18

Linux基礎コマンドまとめ（随時更新）

#CentOSのバージョン確認
$ cat /etc/redhat-release

#システム情報の確認
uname -a

#プロセスの状況確認
$ top

 #サービスの状況確認
$ service サービス名 status

 #サービスの開始
$ service サービス名 start

#サービスの停止
$ service サービス名 stop

 #サービスの再起動
$ service サービス名 restart

 # タスク一覧の確認
$ crontab -l

# タスクの編集
$ crontab -e

#システムシャットダウン
shutdown -h
※以下のようにnowをつけると即時実行
shutdown -h now

#システム再起動
shutdown -r
※以下のようにnowをつけると即時実行
shutdown -r now

# ファイル名検索
find 検索場所　-name ファイル名
例）find / -name php.ini

#データダウンロード
wget ダウンロードURL

#圧縮データの解凍
tar xvfz 圧縮データ




Vagrantの仮想イメージのバックアップ、別ボックスへの復元方法

【バックアップ】
①起動側にて以下コマンドを実行
　$ vagrant package

②以下メッセージが表示されれば正常完了。
　C:\HashiCorp\Vagrant\localdev>vagrant package
　[default] Attempting graceful shutdown of VM...
　[default] Clearing any previously set forwarded ports...
　[default] Creating temporary directory for export...
　[default] Exporting VM...
　[default] Compressing package to: C:/HashiCorp/Vagrant/localdev/package.box

　C:\HashiCorp\Vagrant\localdev>


③ローカルディレクトリに、バックアップファイル「package.box」が作成されている事を確認


【復元】
①以下コマンドにて新規ボックス作成
 $ vagrant box add 新規作成ボックス名 バックアップファイル
 $ vagrant box add centos64bk package.box

②以下メッセージが表示されれば正常完了
 C:\HashiCorp\Vagrant\localdev>vagrant box add centos6_bk package.box
 Downloading or copying the box...
 Extracting box...ate: 960M/s, Estimated time remaining: --:--:--)
 Successfully added box 'centos6_bk' with provider 'virtualbox'!

# MySQLのバックアップ、復元方法


環境は以下
CentOS ：CentOS release 6.5 (Final)
MySQL   ：5.5

【バックアップ】
# 全てのDBの場合
$ mysqldump -u ユーザ名 -p パスワード --all-databases > backup.sql

# 特定のDBの場合
$ mysqldump -u ユーザ名 -p パスワード DB名 > 出力ファイル名
例)mysql -u root -p password dbname > dbname.sql

※実行時に以下エラーが出る場合有り。
　 mysqldump: unknown variable 'symbolic-links=0'

　 この場合は、以下を実行
　 MySQLの設定ファイル「my.cnf」にて「symbolic-links」をコメントアウト

　 symbolic-links=0
　↓
　 # symbolic-links=0


【復元】
# 全てのDBの場合
mysql -u ユーザ名 -p < 出力ファイル名

# 特定のDBの場合
mysql -u ユーザ名 -p DB名 < 出力ファイル名

2014/01/15

①MySQLの設定ファイル「my.cnf」の場所を確認
$ find / -name my.cnf

②MySQLの設定ファイル「my.cnf」を変更
$ vi (①で確認したパス）

[mysqld]
default-time-zone='+9:00'

③MySQLの再起動
$ sudo service mysqld restart

④MySQLにログインの上、以下コマンドデータが正しく反映された事を確認
$ mysql>select curdate(),curtime();

以下のような表示で日付時刻が一致していればOK
+------------+-----------+
| curdate()  | curtime() |
+------------+-----------+
| 2014-01-15 | 20:53:45  |
+------------+-----------+

2014/01/14

jQueryの基本操作でつまづいたので基礎からまとめてみた。
随時更新。


#jQueryとは

JavaScriptのライブラリの1つ。

じゃあJavascriptライブラリとは何か。

「Javascriptだけでもプログラムは書けるけど、1から10まで全部書くのは大変。
だからJavascriptのよく使う機能(プログラムの集まり）をまとめたパッケージをまず用意しておいて、
 繰り返し簡単に使えるようにしよう。」

このパッケージを「Javascriptライブラリ」という。

つまり、
jQueryとは「Javascriptのよく使う機能をまとめたパッケージ」の内の1つ。

だから、jQueryで書けるものは、Javascriptでも書ける。
けど、jQueryの方が楽に効率よく書ける。


#jQueryの種類
jQueryには以下の種類がある。
・jQuery（jQuery Core）
・jQuery公式プラグイン(jQuery UI)
・スマートフォン用プラグイン(jQuery Mobile)

#jQueryの特徴

* バージョン毎の特徴
・jQuery 1.X系 ： ◯IE8以下のサポート有り
・jQuery 2.X系 ： ×IE8以下のサポート無し

* クロスブラウザ
* 軽量、高速
* MITとGPLのデュアルライセンス
* ドキュメントが充実
* ノンプログラマにも優しいセレクタAPI


#jQueryの書き方
1.  jQueryの読み込み(ローカル or CDN)
2.  要素(セレクタ)を選択
3.  操作(メソッド)を選択


#jQueryで出来ること
・jQueryコア ：核となるjQueryオブジェクト
・セレクター    ：DOMの要素選択
・Attributes    ：DOMの属性制御
・Traversing    ：DOMの選択系操作
・Manipulation  ：DOMの制御、更新系操作
・CSS           ：DOMのスタイル操作
・Events        ：イベント操作
・Effects       ：エフェクト操作
・Ajax          ：Ajax関連
・Utilities     ：各種ユーティリティ
・Internals     ：内部的に用いるAPI群

2014/01/13

ExcelのcsvファイルをMySQLへインポートする。

①システム共通の文字コード設定を確認する
$ sudo vi /etc/my.cnf

②DBの文字コード確認
$ mysql> show variables like 'character%';

③テーブルの文字コード確認
$ mysql> show create table テーブル名 \G

④取得するcsvファイルをutf-8で保存、サーバーへアップロード
・パスワードはfileZilla等で行う。
・アップロードパスを覚えておく。
・この時csvファイルのutf-8保存、確認はterapad等のテキストエディタから行う。
　ExcelのWebオプション＞エンコード＞ドキュメントを保存する形式で指定しても、
　正しく反映されていない事があるので注意

⑤csvファイルのインポート
load data local infile 'アップロードデータのパス' into table テーブル名 FIELDS TERMINATED BY ',' ENCLOSED BY '"';

⑥MySQLへの正常インポート確認
MySQL上で以下SQL文でDB一覧を参照の上確認
use データベース名;
select * from テーブル名;

ja → en
· Utf-8 save the csv file to make sure done in a text editor such as terapad at this time . If it is specified with a format in which to save the Web Options > Encoding > Document of Excel, There is a thing that is not reflected correctly .

2014/01/01

【Saharaプラグインとは・・・】
Vagrantの拡張機能で、サーバー状態のSAVE、RESTORE機能の事です。
Vagrantで管理しているサーバーの一時点の内容を記録しておき、好きなときに元に戻すことが簡単に出来ます。
# 作業用パスへ移動

 cd 作業用パス

# Vagrant Saharaプラグインのインストール

 vagrant plugin install sahara

以下メッセージが出たらインストール完了！

 vagrant plugin install sahara Installing the 'sahara' plugin. This can take a few minutes... Installed the plugin 'sahara (0.0.16)'!


# sandboxモードの開始

 vagrant sandbox on

以下メッセージが表示されてエラーが無ければ完了。

 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%


# 変更点を決定する

 vagrant sandbox commit

以下メッセージが表示されてエラーが無ければ完了。

 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100% 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%


# 変更点までロールバックする

 vagrant sandbox rollback

以下メッセージが表示されてエラーが無ければ完了。

 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100% 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%



# sandboxモード終了（commitしていないものは破棄される）

 vagrant sandbox off

以下メッセージが表示されてエラーが無ければ完了。

 0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%



# 現在sandboxモードかどうかの確認

 vagrant sandbox status

以下メッセージが表示される。

 vagrant sandbox status [default] Sandbox mode is off
登録: 投稿 (Atom)