投稿日時:

いよいよ、今年も残すところあとわずかとなりました。本年最後のパワーアップコラムとして、今年VBAのセミナーを受講された方の傾向から、是非とも理解していただきたい関数間の連携についてご説明したいと思います。

VBAセミナーを受講される方の半分以上が、初めてプログラミングに触れる方になります。
そして、初めてプログラミングに触れる方の多くが、関数間の連携に戸惑い、難しく感じています。
本コラムでは、具体的なサンプルプログラムを使って、関数間の連携についてご説明します。

プログラムというのは、同じことを実現するために、いろいろな書き方があります。
そこで「1と10を足して結果の11を表示する」動きを実現する、4パターンのサンプルプログラムを準備しました。
この4パターンのプログラムを使って関数間の連携に関するポイントについてご説明しましょう。

◆パターンA
 シンプルなソースコードにしています。以降のソースコードは、このパターンAとの比較にて、ご説明していきます。
 
 ▽Main関数のポイント
  ・変数は戻り値のみ(ret)を準備し、計算対象となる数値は直接書き込んでいます。
  ・CalcProcedureからの戻り値は引数に記載している1と10の足した数字である11になります。
  ・CalcProcedure関数のxに1が代入され、yに10が代入されます。

 ▽CalcProcedure関数のポイント
  ・引数はxとyの2つになります。
  ・計算結果を格納するための変数(result)を準備しています。
  ・計算で使われているxとyは引数のxとyを意味します。

' 呼び出す関数
Sub Main()

    ' 戻り値の格納場所を変数として宣言
    Dim ret As Long
    
    ' 計算する関数を呼び出す
    ret = CalcProcedure(1, 10)
    
    ' 計算結果を表示する
    MsgBox ret
    
End Sub

' xとyを足して結果を返す関数
Function CalcProcedure(x As Long, y As Long) As Long

    ' 計算結果を格納するための変数
    Dim result As Long
    
    ' xとyの足し算を計算する
    result = x + y
    
    ' 計算結果を戻り値にする
    CalcProcedure = result

End Function

◆パターンB
 パターンAと違い、変数を宣言せずにCalcProcedure関数の行数を少なくしました。
 
 ▽CalcProcedure関数のポイント
  ・計算結果を格納する変数を準備せず、計算結果を直接戻り値に設定しています。
  ・計算で使われているxとyは引数のxとyを意味します。

' 呼び出す関数
Sub Main()

    ' 戻り値の格納場所を変数として宣言
    Dim ret As Long
    
    ' 計算する関数を呼び出す
    ret = CalcProcedure(1, 10)
    
    ' 計算結果を表示する
    MsgBox ret
    
End Sub

' xとyを足して結果を返す関数
Function CalcProcedure(x As Long, y As Long) As Long

    ' 計算結果を戻り値にする
    CalcProcedure = x + y

End Function

◆パターンC
 パターンAと違い、変数を宣言せずにMain関数の行数を少なくしました。

 ▽Main関数のポイント
  ・CalcProcedureを呼び出した結果をメッセージボックスで表示しています。
  ・CalcProcedure関数のxに1が代入され、yに10が代入されます。

' 呼び出す関数
Sub Main()

    ' 計算結果を表示する
    MsgBox CalcProcedure(1, 10)
    
End Sub

' xとyを足して結果を返す関数
Function CalcProcedure(x As Long, y As Long) As Long

    ' 計算結果を格納するための変数
    Dim result As Long
    
    ' xとyの足し算を計算する
    result = x + y
    
    ' 計算結果を戻り値にする
    CalcProcedure = result

End Function

◆パターンD
 パターンAと違い、Main関数で利用する値に対し全ての変数を宣言したため、Main関数の行数が増えています。
 
 ▽Main関数のポイント
  ・Main関数で宣言されているinputX、inputYはCalcProcedureのx、yに代入されます。

' 呼び出す関数
Sub Main()

    ' 戻り値の格納場所を変数として宣言
    Dim ret As Long
    Dim inputX As Long
    Dim inputY As Long
    
    ' 値の設定
    inputX = 1
    inputY = 10
    
    ' 計算する関数を呼び出す
    ret = CalcProcedure(inputX, inputY)
    
    ' 計算結果を表示する
    MsgBox ret
    
End Sub

' xとyを足して結果を返す関数
Function CalcProcedure(x As Long, y As Long) As Long

    ' 計算結果を格納するための変数
    Dim result As Long
    
    ' xとyの足し算を計算する
    result = x + y
    
    ' 計算結果を戻り値にする
    CalcProcedure = result

End Function

いかがでしたでしょうか。関数間のつながりについて、イメージが持てましたでしょうか。1つのソースコードをじっくりと説明する方法ではなく、いろいろな角度から同じ実行結果になるようなサンプルプログラムをご紹介することで、理解を深めてもらう手法にてご説明いたしました。

本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

(担当:小口 真己

投稿日時:

前回に引き続き、jQueryを使ったダイアログボックスについてご紹介いたします。

前回ご紹介しました警告や確認のように、ユーザーへのメッセージを主にしたダイアログボックスもありますが、ユーザーに対して、何か情報を入力してもらうためのダイアログボックスが必要になる事もあると思います。

今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。

◆準備
 もし、読んでいない方は前回のコラムにてご紹介しました、「◆準備」と「▼表示する場所の指定」をご確認ください。

◆ダイアログボックスの表示
 今回のサンプルでは、文字入力ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。
 ▼jQueryを使った文字入力ダイアログ
  基本的には、前回のコラムでご紹介しましたダイアログボックスと変わりはありませんが、警告ダイアログや確認ダイアログで記載していたコメント部分にフォームタグを記述して、ダイアログの中に文字入力機能を盛り込んでいます。以下のソースコードの6行目がポイントになります。
  
  以下が確認ダイアログのサンプルソースコードになります。

	function ShowJQueryInputDialog() {
		var strTitle = "文字入力ダイアログ";
		var strComment = "これは文字入力ダイアログです。";
		
		// ダイアログのメッセージとタイトルを設定
		$( "#show_dialog" ).html( '<p>' + strComment + '</p><input type="text" name="inputtxt" id="inputtxt" value="初期入力されている文字列です" />' );

		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog("入力された文字は「" + $( "#inputtxt" ).val() + "」です。");
				},
				"キャンセル": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "キャンセルがクリックされました" );
				}
			}
		});
	}

今回は、1行入力のフォームタグを使って単純な文字入力のみをご紹介していますが、このコメント部分に他のフォームタグを設定することによって、ダイアログの機能を増やすことが可能です。皆さんのWebサイトの要件に合わせてこのダイアログを応用してみてはいかがでしょうか。

本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

(担当:小口 真己

投稿日時:

「Webサイトでユーザー向けにダイアログを表示したい。」という要件はとても多いと思いますが、最近ではJavaScriptの標準ダイアログでは、機能が少なすぎるという場合が多いのではないでしょうか。そこで、見た目をリッチなデザインで、タイトルも付けたいなどの要件を満たすための簡単な方法として、「jQuery」と「jQuery UI」を利用したダイアログ表示についてご紹介しましょう。

今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。

◆準備
 もし、読んでいない方は前回のコラムにてご紹介しました、jQueryを使う準備をまずはご一読いただき、以下の準備をしてください。

 1. jQueryライブラリを読み込む
CDNを使ってjQueryを読み込むサンプルについて記載しています。

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

 2.jQuery UIライブラリを読み込む
  jQuery UIライブラリはスタイルシートもセットで読み込む必要があります。そのため、以下の2行をCDNを使って読み込みます。

	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" rel="stylesheet">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

◆ダイアログボックスの表示
 今回のサンプルでは、警告ダイアログと確認ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。

 ▼表示する場所の指定
  忘れてしまいがちなのが、表示する場所の設定です。表示する場所とは言っても、ここではブラウザ上のどの場所に表示するという意味ではなく、div要素を使ってダイアログを表示する画面上の受け入れ先の準備という意味になります。ここで指定している「id属性」に対して、ダイアログを表示する制御を行います。
  
  以下が表示する場所の指定用サンプルソースコードになります。

 	<div id="show_dialog"></div>

 ▼jQueryを使った警告ダイアログ
  ダイアログを表示するときに、オプションとしてモーダルダイアログ(ブラウザ上の他のリンクなどをクリックできないようにし、表示されているダイアログのみを動かせる)設定やタイトルの指定、表示するボタンについて設定しています。この他にもデザインを変更したり、ダイアログ表示にアニメーションを適用する設定も可能です。

  以下が警告ダイアログのサンプルソースコードになります。

	function ShowJQueryAlertDialog() {
		var strTitle = "警告ダイアログ";
		var strComment = "ダイアログのメッセージ\nダイアログを閉じるためにはOKをクリックするか、右上の×ボタンをクリックしてください。";
		
		// ダイアログのメッセージを設定
		$( "#show_dialog" ).html( strComment );

		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
				}
			}
		});
	}

 ▼jQueryを使った確認ダイアログ
  確認ダイアログの場合は、ボタンを複数設定し、クリックされたときの動きを記載しておきます。今回のサンプルではシンプルにOKとキャンセルの各ボタンが押されたメッセージを表示するだけに留めていますが、要件によっていろいろと応用可能になります。
  
  以下が確認ダイアログのサンプルソースコードになります。

	function ShowJQueryConfirmDialog() {
		var strTitle = "確認ダイアログ";
		var strComment = "これは確認ダイアログです。";
		
		// ダイアログのメッセージを設定
		$( "#show_dialog" ).html( strComment );
		
		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "OKがクリックされました" );
				},
				"キャンセル": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "キャンセルがクリックされました" );
				}
			}
		});
	}

今回はjQueryとjQuery UIを使ってダイアログボックスを表示するサンプルについてご紹介しました。次回は、今回の続きとして文字入力ダイアログについてご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

(担当:小口 真己

投稿日時:

Webサイトを作成する際に、一般的なWebサイトであっても、社内や社外関係者向けの業務システムであっても、全世界に公開されているインターネット上のいろいろなWebサイトを参考にして、目的とするWebサイトを作成するのではないでしょうか。

最近ではカッコいいデザインで、アニメーションなどの効果を見せながら動くWebサイトが数多く見られます。これらのWebサイトの多くがjQueryと呼ばれるJavaScriptのライブラリを使って作成されています。
このパワーアップコラムでもjQueryの外部ライブラリを利用した「Colorbox」「Colorbox その2」をご紹介しています。

そこで、本コラムではjQueryを使うために、どのような準備をすれば良いのかご紹介いたします。

jQueryはJavaScriptのライブラリであるため、「jquery.js」のようなファイルを利用するWebサイトにて読み込む必要があります。
しかし、jQueryにはバージョンや種類があるため、目的に応じて読み込むファイルを選択しなければなりません。

そこで、まずはjQueryのバージョンと種類についてご説明しましょう。

◆バージョン

 ▼jQuery 1.x
  バージョン1.x系は2006年8月に1.0がリリースされました。その後、数か月単位でバージョンアップされ、本コラム掲載時点での最新バージョンは1.10.2になります。
 
 ▼jQuery 2.x
  バージョン2.x系は今年の4月に最初の2.0がリリースされました。基本的にバージョン1.x系と同じ動きをしますが、Internet Explorer 8以前の古いバージョンにおける動作をサポートしないため、バージョン1.x系よりも動作が軽くなっています。(最新バージョンのminファイル(minの意味については後述)で比較すると、バージョン1.x系(1.10.2)の91kbに対し、バージョン2.x系(2.0.3)は82kbと約1割の容量削減となっている。)

jQueryは大きく分けて1.x系と2.x系のバージョンがあります。会社などで、古いバージョンのInternet Explorerを使っているのであれば、業務システム開発用にjQuery 1.x系を使う方が良いでしょうし、新しいブラウザのみを考えれば良い、一般ユーザ向けのWebサイトであれば、jQuery 2.x系が良いでしょう。
また、細かいバージョン(2.0.3など)については、他のライブラリとの組み合わせなどによりバージョンの違いが原因で動作に不具合が発生する可能性もあるので、Webサイトの本番運用時には細かいバージョンまで明確にしておく事をお勧めいたします。

◆種類
 jQueryには「min」と付いたファイルと付いていないファイルがあります。最初にファイル名を見たときには「min」と付いているので、ライブラリの数が少ないのかと勘違いしてしまいましたが、両方とも同じライブラリであり、同じ動きをします。それでは、何が違うのでしょうか。以下にてご説明いたします。

 ▼uncompressed(例:jquery-2.0.3.js(237kb))
  開発者が読みやすいように、インデントや改行が記載され、コメントも多く含まれているために、開発時やトラブル発生時に調査(デバッグ)しやすいようになっています。
 
 ▼minified(例:jquery-2.0.3.min.js(82kb))
  コメントだけではなく、改行コード、インデントなどを全て削除し、できる限りファイルサイズを小さくしたものになります。そのため、開発者が読もうとしても読みにくいものとなっていますが、ファイル容量が小さくなっているために動作が軽くなり、本番運用時に適しているでしょう。

それでは、次にjQueryを読み込む方法について見てみましょう。jQueryを読み込む方法は大きく分けて2通りになります。

1.ダウンロードして使う
 jQueryのダウンロードサイトからダウンロードしたファイルを管理しているサーバ上に配置し、通常のJavascriptと同じように読み込むための設定をします。

 <script src="jquery.min.js" type="text/javascript"></script>

2.CDNを使う
 CDN(Contents Delivery Network)は、あらかじめプロバイダが用意したインターネットに公開されたサーバ上にjQueryのライブラリが配置されており、誰でも無料で利用可能です。
 
 jQueryはjQuery、Google、Microsoft、CDNJSといくつかのサイト(詳細はこちらをご覧ください。)で提供されています。Googleを例に挙げると、以下の書き方で読み込むための設定ができます。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

ダウンロードして使う方が良いのか、CDN上のファイルを読み込むのが良いのか迷うところですが、CDNには以下に挙げるメリットがあるため、何か特別な理由が無い限りは、CDNを利用する方が良いでしょう。

・作成するWebサイトと同じ場所に無いので、効率的にライブラリを呼び出せる。
・一度呼ばれるとローカルにキャッシュされるので、同じjQueryを使っているWebサイトを一度でも参照していれば、何度も読み込む必要が無い。
 

今回はjQueryを使うための準備についてご紹介いたしました。次回以降のコラムではjQueryを使って何ができるかご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

(担当:小口 真己

投稿日時:

当校ではHTMLやCSS、JavaScriptやjQuery、PHPとさまざまなWeb関連の講座を実施しております。
毎回、多くの受講者が上記の講座を学びにいらっしゃっているのですが、近頃「HTML5」に関する問い合わせが多くなってきました。

HTML5とは、Webの次世代技術になります。正式勧告は2014年頃となり、現在のWebブラウザでは完全対応していません。
この様な背景があるにも関わらず、これ程までに着目されることから、その期待度の高さが伺えます。

このような話題を耳にしただけで、誤解されている方、勘違いされている方が多いのですが、HTML5はただ単にHTML4.01やXHTML1.1のバージョンアップというワケではありません。
HTML5はHTML、CSS、JavaScript等、さまざまなWeb関連技術の次世代技術になります。

特に注目されているのがAPI関連です。
動画の制御、グラフィックの描画、Webストレージ、ファイルアクセス、Web Workers、スマホのハードウェアアクセス等、、、
これらのAPIをJavaScriptで利用できます。

HTML、CSSでも、新たな要素が加わり、古い要素は排除され、整理整頓され使いやすくなっているのは確かですが、HTML5の真骨頂はJavaScriptにあると言っても過言ではありません。

そのため、HTML5を学習するには、まずはJavaScriptを学習する必要があります。

現在、当校ではHTML5の講座開設に向けて準備を進めています。
HTML5の講座は、HTML、CSS、Webの基礎に加えて、JavaScriptができる事を受講のための前提条件として想定しています。

「インスタンスって何ですか?」ではHTML5の理解が難しいためです。

JavaScriptはプログラミング言語です。HTMLやCSSと比べて、修得するにはそれなりの時間と労力がかかります。
きちんと腰をすえてゆっくり学習して下さい。

JavaScriptの学習こそが、HTML5を学習する基礎土台となるのです。

(担当:奥田 英太郎