2016-02-12

JavaScript と jQuery の基本

JavaScript

JavaScriptとは

1. ブラウザ上で動くプログラミング言語

Webブラウザにて解釈・実行されることがJavaScript（以下、js）の特徴の1つです。
そのため、基本的にjsはHTMLファイルの中に書かれています。
（ここで「基本的に」と書いたのは、jsを外部ファイルとして定義して、HTML内で指定のjsファイルを呼び出す場合もあるからです。）

HTMLに加えてjsを記述することで、以下の機能が実現できます。

イベント発火
マウスの位置やクリックなどに応じて、任意の動作を起こすような仕掛けを作る
DOM操作
DOMオブジェクト（HTMLの各要素がオブジェクト化したイメージのもの）を操作し、レイアウトを変更する

つまり、
HTMLだけでは静的な画面しか実装できないところが、
動的な画面を作ることができるようになる、ということです。

2. プロトタイプベースのプログラミング言語

jsはC++やjavaと同じくオブジェクト指向言語です。
大きく異なるのは、C++やjavaはクラスベースの言語であるのに対し、
jsはプロトタイプベースの言語である点です。

クラスベースの言語では、静的なクラスを定義した後に変数を定義しますが、
プロトタイプベースの言語ではクラスは事前に定義しません。

後半の「JavaScriptの基本文法」を見てもらえるとわかりますが、
クラス宣言とインスタンス化を同時に行うような書き方をします。
（「型」のようなものを使いまわすこともできますが、難易度が高いです。）

jQueryとは

JavaScriptのライブラリ

jQueryはジョン＝レシグという人が作った、jsを使いやすくするライブラリです。

具体的にどう使いやすくなるかというと、

ブラウザの差分を吸収するため、ブラウザ毎の書き分けが不要に！
DOM操作が容易に！

なります。

また数多くのプラグインが用意されているうえ、
bootstrapなど様々なフレームワークやライブラリにも使われています。

このようにjQueryにはjsを扱う上での便利かつ基本的な機能が用意されており、
もはやjQueryとjsは一心同体であると言っても過言ではないかもしれません。

JavaScriptの基本文法

変数

var x = 10;

配列

var array = [1, 2, 3];

オブジェクト

var obj = {"name":"Tanaka", "age":20};

alert(obj.age)
=> 20

obj.age = 25
alert(obj.age)
=> 25

メソッド

function f(x) { ... }
f(x);

//または

var g = function(x) { ... };
g(x);

ハマりどころ "this"
予約語thisは使う場面によって意味が異なるため、
慣れないうちは使わない方が無難。
（もちろん使いこなせれば利用価値はあります。）

jQueryの基本文法

jQueryオブジェクトの生成

var $obj = $("CSSセレクタ");

変数名の頭の"$"に特別な機能はなく、あくまで文字列の一部とみなされます。
ただ慣習的にjQueryオブジェクトの変数名の先頭には"$"をつけるようです。

jQueryオブジェクトの操作

$("CSSセレクタ").method1().mehtod2();

ユーティリティー関数

$.each(...)

jQueryにはいくつかの標準メソッドが備わっており、
上記のような記法で使用することができます。

Eclipse 初心者のためのショートカット集

Eclipse

これからEclipseを使い始める人が、効率的に作業を進めるために最低限知っておくべきショートカットをまとめてみました。
（Macのショートカットとなっているので、Windowsの方はご注意下さい。）

ショートカット　一覧表

分類	動作	コマンド
タイピング高速化	コンテンツアシスト	control + space
	行を削除	command + d
	コードを成形	command + shift + f
検索	ファイル内検索	command + f
	全体検索	command + h
移動	メソッドや変数の定義を参照	F3
	1つ前のファイルに戻る	command + [
	1つ先のファイルに進む	command + ]
コメント	コメントアウト	command + /
	JavaDocコメントを記述	option + command + j
折りたたみ・展開 (※)	折りたたむ	command + numpad-
	すべて折りたたむ	command + shift + numpad/
	展開する	command + numpad+
	すべて展開する	command + shift + numpad*
保存	開いているファイルを保存	command + s
	すべてのファイルを保存	command + shift + s

(※)「折りたたみ・展開」のショートカットで書かれているnumpadとはテンキーのことです。ご存知の通りMac Bookにはテンキーなどついていないので、これらのショートカットを使用するためには、コマンドの設定を変更するかテンキーを外部接続する必要があります。
ショートカットのコマンド設定は、Preference > General > Keys から変更できるので、是非設定してみて下さい。

2016-02-04

オンラインアンケートの「SurveyMonkey」を使ってみる

オンラインアンケートの「SurveyMonkey」に触れる機会があったため、
今後の使用検討や使用の一助となるよう、特徴や使い方を紹介します。
（想定読了時間：3～5分）

目次
1.SurveyMonkeyとは何か
2.SurveyMonkeyはどんな特徴を持っているか
3.エンタープライズの使い方
　1.アカウントの割り当て
　2.アンケートの実施
　3.アカウント管理
4.補足

1.SurveyMonkeyとは何か

SurveyMonkeyとは、世界最大規模のオンラインアンケートのサービスです。
jp.surveymonkey.com

詳細は、公式サイトのSurveyMonkey についてまたは
公式slideshareのサービス概要をご覧ください。

2.SurveyMonkeyはどんな特徴を持っているか

SurveyMonkey（エンタープライズ）は以下の特徴を持っているようです。
（エンタープライズの概要や機能、プランと価格、slideshareのサービス概要より）

簡単に（シンプル）
　- テンプレートの提供（専門家作成のアンケートや質問を利用可能）
　- 組織のための機能（ロゴ追加等のデザイン変更、エクスポート機能やレポート作成機能など）
安全に
　- セキュリティ（詳細はこちらを参照）
　- 組織のための機能（自社ネットワークからのシングルサインオンなど）
適切なアンケートを（パワフルさ）
　- 高度な質問機能、カスタマイズ性（回答内容による質問の誘導、リスト化などの多様な回答形式など）
　- 様々な分析ツール（リアルタイム集計、データトレンドなど）

ご参考までに、他のオンラインアンケートのサービスとその特徴は、以下のとおりです。
（※ITmediaさんやLIGさんより）

（例）
- Googleフォーム：　すべて無料
- Quentant：　利用者10万人以上、年間20,000件を超える調査実績
- クリエイティブサーベイ：　ウェブフォント200種類以上などでデザイン性が高く、有料プランでは電話・メール（日本語）のサポートあり

※ITmediaさん
www.itmedia.co.jp

※LIGさん
liginc.co.jp

3.エンタープライズの使い方

SurveyMonkey エンタープライズの使い方をお伝えします。

※以下の記載は、エンタープライズで利用可能なプラチナプラン（有料）を前提としています。プラチナプランの詳細はこちらをご覧ください。

エンタープライズの大まかな利用手順は、以下のとおりです。

1.アカウントの割り当て
　　　社内用アカウントの割り当て申請、または新規作成を行います。
2.アンケートの実施
　　　アンケートの作成、配信、集計・分析・報告を行います。
3.アカウント管理
　　　使用後のアカウントやアンケート結果の管理を行います。

3-1.アカウントの割り当て

無料プランは誰でも登録できますが、エンタープライズの場合は、
社内用アカウントを管理者に割り当ててもらう必要がありますので、
上長に利用したい旨を伝えてください。
その後の流れは2パターンになります。

①社内用アカウントが存在している場合
社内の管理者から直接、または上長を通じて
アカウント情報が共有されるはずです。

②社内用アカウントが存在していない場合
過去に社内用アカウントが存在していたが暫く利用がなく契約解除してしまった等の状況では、
社内用アカウントを新規作成する必要があります。
上長の指示に従ってください。

新規作成の参考情報として以下のリンクを貼っておきます。

3-2.アンケートの実施

アンケートの具体的手順と機能は、以下のとおりです。
但し、エンタープライズの場合、複数ユーザーの利用が想定されますので、
命名ルール等、社内・チーム内でのルール整備が必要と考えられます。

①作成
　- 過去のアンケートや、専門家によるテンプレートをもとにすることができます。また、ページを分ける等のオリジナルカスタマイズが可能です。
　- 個別の質問についても、質問バンクというテーマごとのテンプレートから作成できます。プルダウンなど入力形式のオリジナルカスタマイズも可能です。
　- プレビュー・テスト機能で配信前の確認が可能です。
②配信
　- 配信方法は、メール、Facebook、Webリンク生成など様々な選択肢があります。
　- 回答方法については、再回答を可能にするなどのカスタマイズが可能です。
③集計・分析・報告
　- 集計については、リアルタイム集計や質問別・回答者別の回答閲覧が可能です。
　- 分析については、フィルタやクロス集計、データトレンドという回答時間での比較が可能です。
　- 報告については、PPTX等でのエクスポートやレポート作成が可能です。

具体的手順の一連の流れについては、以下をご参照ください。
gigazine.net

具体的手順ごとの流れについては、以下が参考になります。
nanapi.jp

3-3.アカウント管理

アンケート完了後のアカウント管理については、特に定まっていない場合、
上長に指示を仰いでください。

管理者権限を誰に付与するか、アカウントやアンケート結果を共有または削除するか等、
社内ルールの整備が必要となります。

4.補足

使い方については、まずは無料アカウントでサービスに触ってみることをすすめます。
また、更に詳しく知りたい場合のために、公式のリンクを以下に記載します。

2016-01-26

EC2上でDockerをいじる（編集途中）

AWS Docker EC2

過去の記事でEC2上でDockerの利用を紹介しましたが、
今回はさらに踏み込んだDockerの解説をします。
（以下、過去ブログのリンク）
digitalblog.hatenablog.com

EC2の設定は過去記事の通りになっているという前提で進めます。

今回の流れ

DockerFileを作成
warファイルとDockerFileをEC2に転送
DockerFileからDockerイメージを作成
Dockerイメージからコンテナを起動

そもそもDockerって何やねんっていう人は以下のリンクを参照のこと。

qiita.com

1. DockerFileを作成

FROM jetty

ADD ROOT.war /var/lib/jetty/webapps/

2. warファイルとDockerFileをEC2に転送

qiita.com

$ scp -i 秘密鍵のパス送信するファイルのパスユーザ名@該当インスタンスのパブリックIPアドレス:ファイルを配置するパス

scp -i [pemファイル名] [送信したいファイル名] ec2-user@[ip]:

3. DockerFileからDockerイメージを作成

sshでサーバに接続してから、Dockerイメージを作成

docker build -t [ユーザ名（何でも良い）]/[イメージ名（何でも良い）] .

4. Dockerイメージからコンテナを起動

docker pull jetty
docker pull mongo
docker run --name [コンテナ名A] -d mongo
docker run --name [コンテナ名B] --link [コンテナ名A]:mongo -p 80:8080  -d [ユーザ名]/[イメージ名]

2015-10-15

Bootstrapを使ってみる【編集途中】

Bootstrap Modern Architecture Team

Bootstrapとは

twitterが開発したCSS フレームワーク
HTMLのタグを編集するだけで、レイアウトが設定可能
レスポンシブデザインにも対応

Bootstrapを利用する為には

ファイルをダウンロードする方法もありますが、CDNを利用するのが簡単です。
headタグの中に以下のコードを追加すれば、OKです。
BootstrapはjQueryを利用するので、jQueryのライブラリも読み込む必要があります。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--スマートフォン用に最適化-->
<meta name="viewport" content="width=device-width, initial-scale=1">

参考リンク

www.wivern.com

公式サイト
getbootstrap.com

rowとcontainer

bootstrapはグリッドシステムというレイアウト形式を採用していますが、その基本となるのが、container,row,colです。

containerは、containerとcontainer-fluidの二種類がありますが、慣れないうちはcontainerを使っておけばOKです。
詳細は以下のサイトを参照してください。

wordpresscollege.org

また、container,row,colの関係がよく分からん、という人は、以下のサイトを御覧ください。

Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお

2015-10-06

Scalaのアプリケーションフレームワーク"Lift"　（3: SiteMap）

Modern Architecture Team Lift Scala

Scalaのアプリケーションフレームワーク"Lift"　（2: アプリ構築）
は作者の都合により、後日に掲載します。

SiteMapの役割

ページのアクセス権限管理
ページのグループ化

SiteMapの定義はBootクラスのboot関数で行われ、アプリの立ち上げ時に一度だけ読み込まれます。

SiteMapの定義方法（Simply Lift バージョン）

//返り値がSiteMap型の関数を定義
def sitemap():SiteMap = ...
//setSiteMapFuncの引数に、定義した関数を実行する関数オブジェクトを与える。
LiftRules.setSiteMapFunc(() => sitemap())

SiteMapの定義方法（デフォルトプロジェクトバージョン）

//List[ConvertableToMenu]を定義、setSiteMapの引数に変換。
val entries = List(Menu.i("Home") / "index", Menu.i("SP Home") / "sp" / "login")
LiftRules.setSiteMap(SiteMap(entries: _*))

こっちのほうがオススメです。
setSiteMapをコメントアウトすれば、アクセス管理は行われません。

SiteMapの実態

SiteMapはMenuのインスタンスのコレクション。
MenuはLoc[_]と複数のMenuインスタンス（0~n）をサブメニューとして持つ。
メニューはそれぞれ固有の名前を持つ。
Menu.iメソッドはLoc[Unit]を持つMenuインスタンスを生成する.

サブメニュー、グループ化、アクセス管理

//サブメニュー
Menu.i("Info") / "info" submenus(
  Menu.i("About") / "about",
  Menu.i("Contact") / "contact")
LiftRules.setSiteMap(SiteMap(entries: _*))

//グループ化<span class="lift:Menu.group?group=bottom"></span>こんな風に使うらしい
Menu.i("About") / "about" >> LocGroup("bottom")

//アクセス管理
//ログインしていなかったら、ログイン画面に飛ばす、などを制御。（この場合は強制で飛ばしている）
//実際はSessionVarを継承したobjectなどを使って、ログインしているかを確認する。
val hasLogined_? = If(() => true, () => RedirectResponse("/login"))
Menu.i("Home") / "index" >> hasLogined_?

まとめ

原則、LiftではBootクラスでアクセス可能なhtmlを指定し、必要に応じて、詳細なアクセス権限を定義します。

グループ化や、サブメニューなども定義できますが、フッターやヘッダーはどうせテンプレートを使って一度しか定義しないので、わざわざ使うことあるかなぁという感じです。

アクセス管理はSessionVarが出てきてからでないと、イメージがわかないと思いますが、中々便利です。

SiteMap周りは下手に機能が充実している分、かえって扱いにくくなってる気がします。

アクセス管理に集中して利用するのが吉。

2015-10-05

補足記事　（Sublime Text 3 ＆ Emmetで爆速HTMLコーディング）

Modern Architecture Team Sublime Text

tidyの設定が中々に面倒だったので、備忘録として。
最後に大どんでん返しがあります。結論を先にお読みください。

Homebrewでインストール出来ないのか？

古い記事を見ると、Homebrewで導入している人も多かったが、
何やら公式のコマンドは変わっているし、その通りにやってもうまくいかない。
仕方ないので、手動でインストールすることに。

諦めて手動でインストール

手動でインストールしようと思ったのですが、その方法も変わっている。
日本語のドキュメントが、、、ない。。。
諦めて英語読みながらやりました。

公式のドキュメントはこれ。
github.com

tidyはこっち。 github.com

具体的な手順

cmakeをインストールしろとか書いてあるので、以下からソースを取得。

Download | CMake

展開して移動し、

./bootstrap
  make      
  make install

適当なディレクトリに移動して

git clone https://github.com/htacg/tidy-html5.git
cd tidy-html5
cd build/cmake
cmake ../.. -DCMAKE_INSTALL_PREFIX=/usr
make
[sudo] make install
tidy -v

HTML Tidy for Mac OS X version 5.1.14が表示されればOKです。
パッケージを導入後、Sublime Textを再起動させましょう。

実は、Homebrewでインストール出来てたっぽい

手動でインストールし終えてから、衝撃的な事実に気付く。
Sublime Textを再起動し忘れていただけで、brewのインストールで問題なかった模様。
一発ではインストールできなかったものの、（権限の問題があった）
そこさえ調整すれば、すんなりとインストール出来てました。
（今までの苦労はなんだったのか。。。）

結論

Homebrewを導入後

brew install tidy-html5
tidy5 -v

HTML Tidy for Mac OS X version 4.9.26と表示されればOK!
tidy5 -v が無効の場合は、tidy -vで確認してみてください。
変更が頻繁に入っているっぽく、この方法もいつまで有効なのか、かなり怪しいです。。。
エラーが出る場合は、以下のサイトを参照のこと。

qiita.com

パッケージを導入後、Sublime Textを再起動させればちゃんと動くはずです。

JavaScriptとは

1. ブラウザ上で動くプログラミング言語

2. プロトタイプベースのプログラミング言語

jQueryとは

JavaScriptのライブラリ

JavaScriptの基本文法

jQueryの基本文法

おすすめリンク・書籍

ショートカット 一覧表

1.SurveyMonkeyとは何か

2.SurveyMonkeyはどんな特徴を持っているか

3.エンタープライズの使い方

3-1.アカウントの割り当て

3-2.アンケートの実施

3-3.アカウント管理

4.補足

1. DockerFileを作成

2. warファイルとDockerFileをEC2に転送

3. DockerFileからDockerイメージを作成

4. Dockerイメージからコンテナを起動

Bootstrapとは

Bootstrapを利用する為には

参考リンク

rowとcontainer

SiteMapの役割

SiteMapの定義方法（Simply Lift バージョン）

SiteMapの定義方法（デフォルトプロジェクトバージョン）

SiteMapの実態

サブメニュー、グループ化、アクセス管理

まとめ

Homebrewでインストール出来ないのか？

諦めて手動でインストール

具体的な手順

実は、Homebrewでインストール出来てたっぽい

結論

ショートカット　一覧表