jQuery外部ライブラリ「Colorbox」

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

不定期掲載「jQuery外部ライブラリ紹介」
第一回目は画像ファイルをポップアップ表示する「Colorbox」を紹介します。

まずはどんなものか見てみましょう。
サンプルはコチラです。
色々なサイトで使用されている外部ライブラリなので、よく見た事があるのではないでしょうか。

Colorboxの使用例を紹介します。

1、Colorboxのサイト、青い太文字の「Download」から「colorbox-master.zip」をダウンロードして解凍します。
2、解凍されたフォルダ内の「jquery.colorbox.js」または「jquery.colorbox-min.js」をWebページに組み込んで使用します。
3、テーマごとに「example1」から「example5」まであり、気に入ったテーマの「colorbox.css」と「images」を使用します。cssは組み込んで、imagesフォルダはcssと同じフォルダ内に配置して下さい。
4、Webページの中に「$(セレクタ).colorbox」で適用します。プロパティの設定は色々ありますが、今回のサンプルではグループ化を指定する「rel」のみを使用しています。

以下のサンプルソースコードを参考にしてください。

	<head>
		<meta charset='utf-8'/>
		<title>Colorboxのサンプル</title>
		
		<!-- 「colorbox.css」「jquery.js」「jquery.colorbox.js」を組み込む -->
		<link rel="stylesheet" href="./colorbox.css" />
		<script src="./jquery.js"></script>
		<script src="./jquery.colorbox-min.js"></script>
		
		<script>
			$(function(){
				
				//group1にcolorboxを適用する
				$(".group1").colorbox({rel:"group1"});	//group1でひとつに括る
			});
		</script>
		
	</head>
	<body>
		<p>
			<a class="group1" href="./files/file1.jpg" title="ネコの画像その1">ネコ1</a><br/>
			<a class="group1" href="./files/file2.jpg" title="ネコの画像その2">ネコ2</a><br/>
			<a class="group1" href="./files/file3.jpg" title="ネコの画像その3">ネコ3</a><br/>
			<a class="group1" href="./files/file4.jpg" title="ネコの画像その4">ネコ4</a><br/>
			<a class="group1" href="./files/file5.jpg" title="ネコの画像その5">ネコ5</a><br/>
		</p>
	</body>

ColorboxはJSONや複雑な設定を使用していないので、比較的簡単に使用できる外部ライブラリです。

（担当：奥田　英太郎）

「図解」の基本ルール

投稿日時：
カテゴリ：エクセル・パワーポイント・ワード

PowerPointでは、伝えたいことを図解により「視覚化」することがよくあります。
（「図解」でわかりやすく伝える）
http://www.frontier-link.jp/Blog/business/1461.html
図解する際は、下記の点に留意すると良いでしょう。

◆関係性に合った配置や形で構成する
　分類・順番・上下関係・対比関係等、説明したい関係性が一目でわかる配置にします。

◆説明する順番や流れに沿った配置にする

・視線
　横書きの場合、読み手の視線は「上から下」「左から右」に移動します。そのため、紙や画面上では「左上→右下」に読み進める傾向にあります。
　この視線の動きに合わせて説明したい項目を配置すると、自然な流れでプレゼンテーションを見ることができます。

・表示順序をコントロール
　視線が移動する方向とは異なる順番で読ませたい場合は、矢印を付けたりアニメーションの表示順などで視線をコントロールします。

◆適切な色分け（分類や強調）を行い、見やすくする
　同じ意味を持つ図形や事柄が何回も出てくる場合は、色を特定するなどのルール付けを行い、プレゼンテーション全体を通じて統一します。
　また、グラデーションや色分けはデザイン性だけではなく、強調や流れを考えて設定します。

（担当：瀧川　仁子）

帰納法＝グループ化とは

投稿日時：
カテゴリ：プレゼンテーション・ロジカルシンキング

ビジネスパワーアップコラム＜ロジカルシンキング編＞　第十二回

前回のロジカルシンキング編コラムでは、論点の関連づけを考える際の思考方法である「演繹法」についてのお話をしました。演繹法で考える際には、

小前提（二番目の論点）は大前提（最初の論点）に対する「コメント」と考えられるかどうか

を確認することが重要であり、この確認に問題がなければ

論点を繋ぎ合わせた「ロジックライン」がイメージできる

という点を押さえておく必要がありました。

今回のコラムでは、もう一つの関連づけ思考方法である「帰納法」についてのお話をしたいと思います。

前々回のロジカルシンキング編コラムにおいて、帰納法とは

論点同士の「類似性」に基づく関連づけを考えること

であることを紹介しました。今回も簡単な例を示しながら、帰納法で考える際の基本的なポイントを説明しましょう。

例1
・休日のデパートは混んでいる
・休日の映画館は混んでいる
・休日の遊園地は混んでいる
　→休日の外出は混んでいる

例2
・日本企業がタイに進出した
・アメリカ企業がタイに進出した
・ドイツ企業がタイに進出した
　→先進国の企業がタイに進出した

帰納法とは簡単に言えば「共通キーワードによるまとめ上げ＝グループ化」を考えることであり、その際のキーポイントは、

1. 複数の論点に存在する「類似点」を見い出すこと
2. その類似点に適用可能な「共通キーワード」を考えること

となります。先程の例1では「デパート」「映画館」「遊園地」が論点における類似点となり、例2では「日本」「アメリカ」「ドイツ」が類似点となります。そして、これらの類似点にそれぞれ適用することが可能な「共通キーワード」を新たに考え出すプロセスが、帰納法を用いる際の重要なポイントとなります。

例1の「デパート」「映画館」「遊園地」であれば、例えば「外出」という共通キーワードが想定可能ですし、例2の「日本」「アメリカ」「ドイツ」であれば、「先進国」という共通キーワードを適用可能と考えられます。このように、それぞれの類似点を「グループ」としてひとまとめに扱い、その「グループ」の特色を表すキーワードを一語の「名詞」で定義することが、帰納的理由付けを考える際の基本技術となります。

次に、帰納法で考える際の注意点を見ていきましょう。まずは、以下の例を見てみましょう。

例3
・日本企業がタイに進出した
・日本企業がコートジボアールに進出した
・日本企業がパラグアイに進出した

この例3において、類似点を見いだすことが可能でしょうか？（ちなみに、コートジボアールはアフリカの国、パラグアイは南米の国です）。地理的にもバラバラのエリアですし、この情報だけからですと、類似点を想像することは難しいと思います。

帰納的に考える際には、同じ「主部」または「述部」を持つ論点同士をグループ化することが大前提となります。ただし、グループ化を適用するためにはその上位階層に来る「共通キーワード」を各論点が説明できなければなりません。言い換えれば、ピラミッド思考における縦方向思考＝階層の上下関係を想像できない場合、グループ化は出来ないことになります。例3であれば「タイ」「コートジボアール」「パラグアイ」の上位階層に存在する共通キーワードは想像することが難しいですから、これは「帰納的な考え」ではなく、単なる「情報の列挙」と考えた方が良いことになります。

次の例はいかがでしょうか。

例4
・日本企業がタイに進出した
・日本企業がベトナムに進出した
・日本企業がマレーシアに進出した
・日本企業がパラグアイに進出した

この例4においては、「タイ」「ベトナム」「マレーシア」までは「東南アジア」という共通キーワードが適用できそうですが、パラグアイが入ってしまうと、共通キーワードの定義が難しくなります。このように、グループ化を行う際には「不適切要素の見極め」と「必要に応じた除外」を行う必要があります。今回の例であれば、パラグアイは別の論点グループに整理し直す必要があります。

以下の例も見てみましょう。

例5
・日本企業がタイに進出した
　→日本企業が東南アジアに進出した

この例5においては、日本企業がタイに進出したという事実「のみ」が分かっている状態で、日本企業が東南アジアに進出したと論じています。ですが、タイに進出したという事実のみを持って、東南アジアと一足飛びに論じることには無理があります。この例で気をつけなければならないことは「帰納法を使用できるのは、あくまでも論点が『複数』存在する場合のみ」という点になります。帰納法は「共通キーワードによるグループ化」を考える論証法ですから、そもそもグループ化を行う要素が複数存在しない場合は帰納的に考えることが出来ません。従って、確実に示せる内容が一つしか存在しないケースにおいては、演繹法を用いることになります。上記の例であれば、

例5′
・日本企業がタイに進出した → タイは人件費が安い → 東南アジアは人件費が安い → 日本企業は（タイを含む）東南アジアに進出した

例えばこのように、「人件費の安さ」をロジックラインに含めた演繹法を用いることで、結論を示すことが可能となります。

まとめますと、帰納法で考える際には

1. 複数の論点に存在する「類似点」を見い出すこと
2. その類似点に適用可能な「共通キーワード」を考えること

以上の2点に留意することが基本となります。さらに

・類似点や共通キーワードが想定できない場合は、帰納法の適用は出来ない
・グループ内に「不適切要素」がある場合は、除外して考える
・確実に示せる内容が一つしか存在しない場合は、演繹法で考える

これらの注意点を押さえておく必要があります。

実は帰納法については「共通キーワード」を新たに定義する必要があること、言い換えれば「新しい考えを導出する」必要があることから、演繹法よりも高度な思考回路が求められます。ただし、この「共通キーワード＝新しい考え」とは「要点」を意味しますので、帰納法を用いた場合には「要点を先に示してから、その詳細を述べる」ことが可能となります。そのため、聞き手側の立場からすると、帰納法の論理展開は演繹法の場合と比較して遙かに理解しやすいものとなります。前回と今回でお話した「演繹法」と「帰納法」の違いを是非理解し、論理的な説明に役立てていただければと思います。

（担当：佐藤　啓）

色について #4 赤色

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

色の持つ効果についてのシリーズ第三回目のWeb系コラムでは灰色の「主張しない」というポイントについて見ていきました。今回は逆に「主張する赤」を使用する際のポイントと具体例について説明したいと思います。

赤はWebサイトで最も多く使用されている色の一つです。心理的に赤からイメージされるものは「炎」「情熱」「革命」などの「力強さ」と深く関連付けられているため、赤を使用することで小面積でも強い印象を与えることができます。また赤は道路標識に使用されていることからも想像できるように目立ちやすい色ですので、特に重要な情報を伝達する場合によく使用されます。一方、赤を使用する量が多すぎると読み手の注意を分散してしまう可能性があるため注意が必要です。

以下の具体例から赤を使用するポイントを見ていきましょう。

WebCentric

活動的なイメージを表現する赤の選び方です。高い彩度の色を大きい面積で使用すると少し派手な印象を与えることもあるため、彩度を少しだけ下げる工夫が見やすい色使いのポイントになります。

Impulse

赤の明るさを抑えると落ち着いた印象を表現することが可能です。赤は彩度が強いものを大きな面積で使用する場合少しまぶしく感じることもあるため、このサイトのように少し暗めの色を使用し、また薄いグラデーションを加えることで見やすさを保ったまま色のイメージを伝えています。

recetas de rechupete

赤に限らず、暖色系の色には食欲を増進させる効果が存在することが知られています。このサイトでは少しオレンジに寄った、明るさを抑えた赤を使用することで、多様なアイコンから来るポップなイメージと同時にレシピサイトとしての信頼感を演出しています。

TAKE THE WALK

赤と黒の組み合わせは、赤の選び方次第でエネルギッシュなイメージや落ち着いたイメージを表現することができ、印象深いサイトに仕上げることができます。

このように一口に赤といっても様々な赤がありますが、心理的にも機能的にも読み手に「力強さ」や「重要性」というメッセージを伝える点は共通です。「重要性」というメッセージについて逆に考えてみますと、さほど重要ではない情報の表示に赤を使用することは、読み手に「間違った重要性」の印象を与えてしまう可能性がありますので注意が必要です。「力強さ」と「重要性」のどちらに比重を置くかを考える際には、色選びだけでなく文章などのコンテンツ自体の重要性も考慮することが大切なポイントとなります。

今回は赤の持つ「力強さ」や「重要性」というイメージを活用することで、心理的にも機能的にも分かりやすいWebサイトの構築が可能となることをお話しました。今後のWebサイト作りに生かしていただければ幸いです。

（担当：斉藤　万幾子）

php.iniの設定

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

今回はPHPプログラミングに関するお話です。

・自分のPCで作成したPHPファイルを、Webサーバ（レンタルしているサーバなど）にアップロードして配置する。
・同じファイル、同じソースコードなのに、自分のPCとレンタルサーバでは実行結果が異なる。

実はこれ、良くある話です。
なぜか？　答えは簡単で、自分のPCとレンタルサーバの「環境」が異なるからです。

・WindowsとLinuxでOSの設定が違う。
・IISとApacheでWebサーバの設定が違う。

違いを挙げれば多岐に渡りますが、中でも「PHPの設定が違う」ことによる要因は多く見られます。

PHPの設定には設定ファイル「php.ini」を使用します。
テキストエディタで開いて中を見てみましょう。

error_reporting = 値

error_reportingはエラーメッセージ、警告メッセージの設定です。
警告メッセージが出たり、出なかったりするのはここの設定になります。

参考：PHPマニュアル「定義済み定数」

magic_quotes_gpc = 値

マジッククォートの設定です。
マジッククォートは$_GET、$_POST、$COOKIEで取得する文字列内の’(シングルクオート)、” (ダブルクオート)、\(バックスラッシュ) 、NULLを自動的にエスケープする機能になります。
例を挙げると、入力フォームに「”abc”」と入力して送信し、$_GETや$_POSTで取得すると「\”abc\”」と変換されるような機能になります。
Onであればマジッククォート有効、Offであれば無効となっています。

参考：PHPマニュアル「実行時設定」

エスケープされる事を想定しているソースコードと想定していないソースコードでは、実行結果が異なるのも当たり前ですね。

レンタルサーバではphp.iniが参照できない環境もあります。
その場合はphpinfoを使用する事で確認できます。確認するだけで変更はできませんが、どの様な設定かどうかがわかるだけでも意味がありますね。

今回はerror_reportingとmagic_quotes_gpcの2点をご紹介しました。
PHPプログラミングの学習とは、ソースコードを書くだけでなく、設定を理解する事も含まれると心得ていただければと思います。

（担当：奥田　英太郎）