Training

公開講座

現在、以下の会社・組織等で講座を担当しています。スケジュールや申込みについては、主催者のサイトでご確認ください。

☆はレベルを表します。ひとつ(☆)が入門者、ふたつ(☆☆)は初級者、3つ(☆☆☆)が中・上級者向けの内容です。

JaGra PROFESSIONAL DTP & WEB SCHOOL

主催: 社団法人日本グラフィックサービス工業会
テキスト: オリジナル教材
10人までの少人数ハンズオン講座。基礎から学習したい方にお勧めします。中級者向けの内容も充実です。テキストは、講習料金に含まれています。

■jQueryではじめるJavaScript入門

(1日間5.5時間20,000円テキスト代込+消費税)☆
サンプルファイル(ZIP圧縮) *暫定アップロード

HTML5でインタラクティブなコンテンツをつくろうとしたとき、CSSだけでなくJavaScriptコードも書けると表現の幅は大きくひろがります。jQueryは応用しやすく、定評のあるライブラリです。標準のJavaScriptだけでは何行にもなってしまう処理も、jQueryを使うことで簡単に書けます。CSSの知識が活かせることも特長です。

本講座は、JavaScriptの基礎を身につけながら、jQueryも活用した効率のよいスクリプティングについて学ぶことを目的としています。実際にコードとして書く作例は、段階を踏んで解説します。できるだけ、目で見て結果が確かめられるサンプルを選びました。

受講対象者は、HTMLとCSSの基礎を学んだ方です。JavaScriptは書いたことがなくて構いません。

学習項目

JavaScriptの基本
script要素にJavaScriptを書く／変数を使う／ボタンクリックでランダムな数字を出す／関数を定義して呼出す
jQueryを使う
jQueryの書き方／CSSを定める／CSSを活用したプルダウンメニュー／img要素のランダムな差替え／ナビゲーションバーの固定
jQueryプラグイン
BigVideo／Particleground

■CSS3アニメーションでつくるインターフェイス表現

(1日間5.5時間24,000円テキスト代込+消費税)☆

新しいブラウザでCSS3の実装が進み、静的なデザインだけでなく、JavaScriptを使わなくても、ダイナミックでインタラクティブな表現ができるようになってきました。

この講座では、これまでの静的なCSSの基礎を学んだ方に、動きのあるインターフェイスを題材として、CSSの書き方・考え方を解説します。JavaScriptコードは書きません。

CSS3でつくったインターフェイスの作例をもとに、一歩一歩段階的につくり進めながら、視覚的な効果やアニメーションのテクニックについて解説します。要素に影をつけたり、変形したり、3Dの動きを加えるなど、アニメーションが引立つ表現の工夫も織り交ぜました。CSS3の構文はもちろん、その調べ方、注意すべきことがらにも触れます。

学習項目

プッシュボタンのアニメーション
ボタンの角に丸みを加える／影でボタンを立体的に見せる／マウスポインタを重ねたときのボタンの表現／ボタンに滑らかなアニメーションを定める
アコーディオンメニューのアニメーション
メニューに角の丸みと影を加える／メニューの開け閉じの動きを加える／メニュー項目の間に区切り線を入れる／サブメニュー項目にポインタを重ねたときハイライトさせる
3次元で垂直に回る立方体のメニュー
要素にポインタを重ねたら水平軸で回す／それぞれの項目に底面を加える
画像にポインタを重ねるとキャプションが表れる
画像にポインタが重なったらキャプションを示す／画像に色をかぶせる／画像に変形のアニメーションを加える／リンクボタンをアニメーションで加える

ロクナナワークショップ

主催: 株式会社ロクナナ
6人までのハンズオンワークショップ。少人数でテーマを絞った解説と実習を行います。充実した講師陣が特色です。イベントも適宜開催しています。

Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです。画面の表示（View）に絞った操作を扱います。jQueryでは手間がかかるようなインターフェイスも、簡単にわかりやすく組み立てられます。ECMAScript 6は、正規の名称をECMAScript 2015と呼び、JavaScriptがもとづく標準仕様の最新バージョンです。2009年に標準化されたECMAScript 5が2011年に 5.1に改訂されてから、はじめての重要なアップデートになります。

このコースはJavaScriptの文法の基礎を学んだ方が対象です。Vue.jsライブラリの設定と簡単なデータバインディングのやり方から始め、データや要素の動的な書き替え、ユーザーによるデータの操作などひとつずつ段階を踏んでコードを書き進めながら、Todoリストのアプリケーションをつくります。構文はECMAScript 6にもとづき、新しいキーワードや記述法、それらの利点などを具体的なJavaScriptコードで解説します。

Vue.jsは手軽に始められ、小回りが効くとともに、シングルページwebアプリケーション（SPA）をつくるときにも使える今注目の技術です。また、ECMAScript 6はモダンブラウザで実装が進み、これからの開発にはぜひ知っておきたい知識といえます。

学習項目

Vue.jsを始める
Vue.jsのインストールと設定／見出しと入力フィールドを加える／データを要素に表示する／データと要素の値をバインディングする／JavaScriptコードを<head>要素に書く
要素のclass属性を動的に変える
入力フィールドにバインディングを定める／バインディングでクラス属性を動的に変える
データから動的にリストをつくる
項目のデータを複数にする／テキスト入力フィールドのバインディングを改める
フィールドに入力したテキストを動的に項目として加える
入力フィールドに追加ボタンを加える／入力フィールドの項目をデータに加える／Vueの省略記法とECMAScript 6の構文を使う
項目を数えて表示する
項目の数を示す／条件に合ったデータを数えて返す／算出プロパティとメソッドの違い／forループに替えてArray.filter()メソッドとアロー関数式を使う
項目を調べてデータから削除する
ボタンを加える／条件にしたがってデータを除く／forループの処理をArray.filter()メソッドで書き替える
データを項目ごとに削除する
削除ボタンを加える／クリックした項目をデータから除く／Array.filter()メソッドで要素を除く

Training

公開講座

JaGra PROFESSIONAL DTP & WEB SCHOOL

■jQueryではじめるJavaScript入門

■CSS3アニメーションでつくるインターフェイス表現

ロクナナワークショップ

■Vue.js入門講座