Yeomanを使ってみる
Yeomanがどういうものなのか詳しくは公式サイトを見ていただくとして、
要はWEBアプリを作る際の基本的な環境構築をパパっとやっちゃいますよ？というものです
気になっていたので、触ってみることにします
環境設定
Node.jsとnpmを入れていることが前提
Yeomanをインストール
$ sudo npm install --global yo bower grunt-cli
確認
$ yo --version && bower --version && grunt --version
Yeomanジェネレータをインストール
AngularJSGeneratorをインストール
$ sudo npm install --global generator-angular
プロジェクトフォルダ作成
$ mkdir yeoman
$ cd yeoman
実行すると今までインストールしたジェネレータのリストが出てくるので、必要な物をインストール
$ yo
? 'Allo XXXX! What would you like to do?
Run a generator
Angular
Karma
──────────────
Update your generators
Install a generator
❯ Find some help
Get me out of here!
──────────────
今回はAngular generatorを使いたいので、Angularを選択する。
$ yo
? 'Allo XXXX! What would you like to do? Angular
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo angular
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
? Would you like to use Sass (with Compass)? (Y/n)
Saas使う？Bootstrap使う？モジュール使う？等聞かれるので、適時好きなように。今回はこのように選択しました。
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
? Which modules would you like to include?
◉ angular-animate.js
❯◯ angular-aria.js
◉ angular-cookies.js
◉ angular-resource.js
◯ angular-messages.js
◉ angular-route.js
◉ angular-sanitize.js
◉ angular-touch.js
そしていつもどおりうまく行かない… 権限？
〜〜〜
npm WARN excluding symbolic link build/defs-config.json -> ../defs-config.json
npm ERR! Error: EACCES, mkdir '/Users/XXXX/.npm/debug/2.1.0'
npm ERR! { [Error: EACCES, mkdir '/Users/XXXX/.npm/debug/2.1.0']
npm ERR! errno: 3,
npm ERR! code: 'EACCES',
npm ERR! path: '/Users/XXXX/.npm/debug/2.1.0',
npm ERR! parent: 'grunt-usemin' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
色々トライしてみた結果キャッシュなくせばいいということだったらしい
$ npm cache clean
いけた！と思ったらこれ。npmが古いらしい。
〜〜〜
npm ERR! Error: ENOENT, open '/Users/XXXXX/Program/workspace/yeoman/node_modules/grunt/package.json'
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!
npm ERR! System Darwin 13.4.0
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/XXXXX/Program/workspace/yeoman
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! path /Users/XXXXX/Program/workspace/yeoman/node_modules/grunt/package.json
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! not ok code 0
npmをもう一度入れなおして実行したらいけました
〜〜〜
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
app/index.html modified.
_-----_
| | .---------------------------------------.
|--(o)--| | Bye from us! Chat soon. |
`---------´ | |
( _´U`_ ) | The Yeoman Team |
/___A___\ | https://github.com/yeoman/yeoman#team |
| ~ | '---------------------------------------'
__'.___.'__
´ ` |° ´ Y `
コレがファイル一覧
$ ls -al
total 88
drwxr-xr-x 15 XXXX staff 510 11 14 10:00 .
drwxr-xr-x 36 XXXX staff 1224 11 13 17:48 ..
-rw-r--r-- 1 XXXX staff 38 11 14 09:55 .bowerrc
-rw-r--r-- 1 XXXX staff 415 7 1 07:39 .editorconfig
-rw-r--r-- 1 XXXX staff 11 7 1 07:39 .gitattributes
-rw-r--r-- 1 XXXX staff 52 7 1 07:39 .gitignore
-rw-r--r-- 1 XXXX staff 394 7 1 07:39 .jshintrc
-rw-r--r-- 1 XXXX staff 110 5 15 2014 .travis.yml
-rw-r--r-- 1 XXXX staff 9815 11 14 09:55 Gruntfile.js
drwxr-xr-x 12 XXXX staff 408 11 14 09:55 app
-rw-r--r-- 1 XXXX staff 414 11 14 09:55 bower.json
drwxr-xr-x 13 XXXX staff 442 11 14 09:57 bower_components
drwxr-xr-x 29 XXXX staff 986 11 14 10:00 node_modules
-rw-r--r-- 1 XXXX staff 1066 11 14 10:00 package.json
drwxr-xr-x 5 XXXX staff 170 11 14 09:55 test
で、gruntを実行
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/Users/XXXX/yeoman/app/bower.json' Use --force to continue.
Aborted due to warnings.
Execution Time (2014-11-14 01:06:06 UTC)
loading tasks 6ms ▇▇▇ 1%
wiredep:app 528ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
Total 540ms
うーん・・・なんかbower.jsonのパスが違う
調べてみたところGruntfile.jsに少し編集をいれるといいらしい。
wiredepセクションのcwdを空にしました。
163 // Automatically inject Bower components into the app
164 wiredep: {
165 options: {
166 // cwd: '<%= yeoman.app %>'
167 cwd: ''
168 },
で、もう一回トライ
$ grunt serve
Running "serve" task
Running "clean:server" (clean) task
Running "wiredep:app" (wiredep) task
app/index.html modified.
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Copied 1 files
Done, without errors.
Execution Time (2014-11-14 01:16:24 UTC)
loading tasks 3ms ▇▇▇▇▇▇▇▇▇▇▇▇▇ 27%
copy:styles 7ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 64%
Total 11ms
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/main.css created.
Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000
Running "watch" task
Waiting...
いけた！！！
自動でブラウザが開かれます
pChart2でグラフを描く
ロウソクチャートが使えるライブラリを探してみたところ、
pChart2というライブラリを見つけましたので紹介したいと思います
もともとあったpChartから更に扱えるグラフの種類が増えました
addPointsに配列で値を入力することで、グラフに値が描画されます
今回はDBから値を抜き出して配列にしているのですが、そこは省略しています
// グラフ生成
$dir = dirname(__FILE__) .'/../../public/pChart/';
include($dir .'class//pData.class.php');
include($dir .'class/pDraw.class.php');
include($dir .'class/pImage.class.php');
include($dir .'class/pStock.class.php');
/* Create and populate the pData object */
$MyData = new pData();
$MyData->addPoints($addOpen,"Open");
$MyData->addPoints($addClose,"Close");
$MyData->addPoints($addMin,"Min");
$MyData->addPoints($addMax,"Max");
$MyData->addPoints($addDate,"Time");
$MyData->setAbscissa("Time");
$MyData->setAbscissaName("Date");
/* Create the pChart object */
$myPicture = new pImage(700,330,$MyData);
/* Turn of AAliasing */
$myPicture->Antialias = FALSE;
/* Draw the border */
$myPicture->drawRectangle(0,0,699,329,array("R"=>0,"G"=>0,"B"=>0));
$myPicture->setFontProperties(array("FontName"=>$dir ."fonts/pf_arma_five.ttf","FontSize"=>6));
/* Define the chart area */
$myPicture->setGraphArea(60,30,650,290);
/* Draw the scale */
$scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE);
$myPicture->drawScale($scaleSettings);
/* Create the pStock object */
$mystockChart = new pStock($myPicture,$MyData);
/* Draw the stock chart */
$stockSettings = array(
"BoxUpR"=>226,"BoxUpG"=>159,"BoxUpB"=>149,
"BoxDownR"=>180,"BoxDownG"=>188,"BoxDownB"=>201,
'BoxUpBorderR'=>220,'BoxUpBorderG'=>75,'BoxUpBorderB'=>66,
'BoxDownBorderR'=>127,'BoxDownBorderG'=>142,'BoxDownBorderB'=>166,
);
$mystockChart->drawStockChart($stockSettings);
/* Render the picture (choose the best way) */
$myPicture->Stroke();
$dir = dirname(__FILE__) .'/../../public/pChart/';
include($dir .'class/pData.class.php');
include($dir .'class/pDraw.class.php');
include($dir .'class/pImage.class.php');
$MyData = new pData();
$MyData->addPoints($addPoint,"Stock price");
$MyData->addPoints($addDate,"Labels");
$MyData->setSerieDescription("Labels","Months");
$MyData->setAbscissa("Labels");
/* Create the pChart object */
$myPicture = new pImage(700,330,$MyData);
/* Turn of Antialiasing */
$myPicture->Antialias = FALSE;
/* Add a border to the picture */
$myPicture->drawRectangle(0,0,699,329,array("R"=>0,"G"=>0,"B"=>0));
/* Set the default font */
$myPicture->setFontProperties(array("FontName"=>$dir ."fonts/pf_arma_five.ttf","FontSize"=>6));
/* Define the chart area */
$myPicture->setGraphArea(60,40,650,300);
/* Draw the scale */
$scaleSettings = array("XMargin"=>10,"YMargin"=>10,"Floating"=>TRUE,"GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE);
$myPicture->drawScale($scaleSettings);
/* Turn on Antialiasing */
$myPicture->Antialias = TRUE;
/* Draw the line chart */
$myPicture->drawLineChart();
/* Write the chart legend */
$myPicture->drawLegend(540,20,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));
$myPicture->Stroke();
JpGraghとくらべても見栄えが良く、カスタマイズ性にも富んでいます
ただこのpChart2、更新がだいぶ前からされていないようなので、
その辺を注意して使わないといけないようです
Nginxのリバースプロキシを設定していてlocationの優先順位で大ハマリ
社内システムを動かしていたApacheなサーバーが廃止されたのでNginxなサーバーに移行しました。
他の社内システムに相乗りして、URLに特定のサブディレクトリがついていたら動作を分けて背後のアプリケーション・サーバーにリバースプロキシで接続という構成です。
server {
#省略
#リバースプロキシの設定を追加
location /hoge/ {
proxy_pass http://127.0.0.1:3000/;
}
#省略
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
access_log off;
log_not_found off;
}
}
Nginxに上記のようなリバースプロキシの設定を入れたところプログラムは動作しているのに画像、css、jsが読み込めずに大ハマリしました。
勘がいい人は「他は省略しているのに残してある箇所」があやしいのに気づいてしまったと思いますが、その通り、アクセスログにも何も出ない、なぜだ？なぜなんだぜ？と調べていたらいらっしゃいましたよ、画像、css、jsの処理を全部もっていってるお方が。
location、正規表現の方が未指定の前方検索より強いので location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ に処理を全部もっていかれていたってわけです。Nginx で location の判定方法と優先順位を調べるがとても参考になりました。ありがとうございます。
正規表現よりも優先順位が高い書き方で指定すると解決しました。
server {
#省略
#リバースプロキシの設定を追加
location ^~ /hoge/ {
proxy_pass http://127.0.0.1:3000/;
}
#省略
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
access_log off;
log_not_found off;
}
}
一つのVagrantfileで複数VMを管理する際のメモ
下記のようなVagrantfileで複数VMを管理している際に「vagrant halt」を行うと…
# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure("2") do |config|
config.vm.define :first do |first|
first.vm.box = "centos6.5.3"
first.vm.network :forwarded_port, guest: 80, host: 8080
first.vm.network :private_network, ip: "192.168.33.10"
end
config.vm.define :second do |second|
second.vm.box = "centos6.5.3"
second.vm.network :forwarded_port, guest: 80, host: 8181
second.vm.network :private_network, ip: "192.168.33.11"
end
end
2つとも停止します。
~/w/vagrantTest ❯❯❯ vagrant halt
second: Attempting graceful shutdown of VM...
first: Attempting graceful shutdown of VM...
片方だけ停止したい場合には「vagrant halt first」のように引数にマシン名を指定すれば良いのですが
停止したくないマシンまで誤って停止させるのを避けたかったので、何か良い方法はないか調べました。
# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure("2") do |config|
if ARGV[1] == "first" # 追加
config.vm.define :first do |first|
first.vm.box = "centos6.5.3"
first.vm.network :forwarded_port, guest: 80, host: 8080
first.vm.network :private_network, ip: "192.168.33.10"
end
end # 追加
if ARGV[1] == "second" # 追加
config.vm.define :second do |second|
second.vm.box = "centos6.5.3"
second.vm.network :forwarded_port, guest: 80, host: 8181
second.vm.network :private_network, ip: "192.168.33.11"
end
end # 追加
end
このようにすると「vagrant halt」だけでは停止しなくなり、マシン名を指定することで停止出来るようになります。
雑用係、ハロウィンを楽しむ
- 2014/10/29
- Kumiko.S
私がハロウィンを認識したのは某ホラー映画で、ハロウィンといえば「ブギーマンだよね！」な状態でした。
それが激しく間違ってる！と知ったのは、高校生の頃。
おかげで、ハロウィンといえば「ジャック・オー・ランタン」と頭を変換させるのに苦労しました。
E.T.もちゃんと映画館まで行って観てたハズなのに‥‥‥(´д｀)
いいじゃん、ブギーマンで‥‥‥と、本気で思ってたですョ
もちろん、ジャック・オー・ランタンも可愛くて好きですけどね(笑)
我が家では、素焼きのジャック・オー・ランタンが大活躍しています。
そういえば、ここ数年は仮装やコスプレを楽しむのも普通になってきて嬉しいですね。
私もプチ仮装程度は楽しんだりしますが、田舎ではなかなか難しいのもあってガッツリコスプレは（衣装ありますがｗ）やったことがありません。
ハロウィンだからって派手にコスプレするのは恥ずかしいけど、ちょこっと楽しんでみたい気もする！なら、アプリで遊べばいいいじゃない！
（※私、iPhoneユーザーですので、iPhoneアプリしか分かりませんｗ）
てことで。
まずは、某(笑)有名お菓子メーカーの「グリコハロウィーン」
定番の、フレームタイプの写真が撮れ（加工）できます。
フレームは数種類あるんですけど、選べないのが残念かな‥‥‥
※モデルはにゃんこ。
次は「ハロウィンフェイス」
仮装させたい写真を選べば、勝手にやってくれる写真アプリ。簡単です。仮装変更もワンタップでOKなので気軽だし、集合写真で（たぶん）顔認識されれば衣装がポンっと乗るので面白い。
※ 写真はプリインストールされてたものです。
この程度の仮装じゃ物足りないなら、「ハッピーハロウィン Place My Funny Costume」
ガッツリそれっぽいコスプレさせてみるなら、コレ。
童話から有名アメコミキャラのコスプレまで「やった気になれる！(笑)」
顔入れするだけなので、体型も関係ないです！最高！(笑)
でも、ここまでやりたいなら、リアルにコスプレデビューお勧めします＼(^O^)／けどね！
※顔は私ｗ
そして、私のイチオシは「ゾンビブース」（たぶん、新しい版がでてます）
写真を選ぶと、目と口の位置を設定して、ほら貴方もゾンビの仲間入り♡
ぬぉー！っと動きます、指を与えるとガツガツ食べます♡
写真だけでなく、動画にもなります♡
屍系が苦手な方は、「呪顔」という幽霊系になれるタイプもあります♡（？）
※怖いので自粛(笑)
楽しもうと思えば、いくらでも楽しめます！
Trick or Treat！ Happy Halloween！！
「CEATEC JAPAN 2014」 5日目 最終日
CEATEC JAPAN 2014 in 幕張メッセ、5日目。
4日目は流石に疲れ過ぎてブログサボりました(‘A`；)
いよいよ最終日です、足腰の痛みも限界を超えました。
台風19号の接近を聞き、おいおいまた飛行機欠航か…と憂鬱な気持ちでいっぱいでしたが…
なんと！！例年の感じを考えると多いかな〜とすら思っていたEventAdapterのパンフレット200部が全てはけました！！
その他のパンフレットもそれぞれ200部ずつ用意したのですが、余り枚数ずつ。一ケタです！
CEATECの参加、私個人3年目にして初めてのこと(´∀｀*)
長崎県担当の方がEV&ITSの手提げ袋にまとめて入れて下さったり、がんばくんクリアファイルに挟んで下さったりなど、良くして下さって、本当に感謝です。
最後に、紹介し漏れていた（今更ですが）出展製品その2、「OpenVBX（オープンブイビーエックス）」は、電話機能をWebサービスとして国際的に事業展開しているTwilioをより簡単に活用する為に開発されたWebサービスプログラムです。
ざっくり説明すると、機能追加にAPI言語でのプログラミングが必要だったTwilioを、OpenVBXではPCなどのブラウザから通話転送、留守録、自動応答、グループ着信など、各種機能をドラック&ドロップで簡単に追加して設定できますよ〜という感じです。多分そうです、間違ってたら誰か助けて下さい(‘A`；)
キャプチャ画像を見ていただけたら何となくイメージは出来るかと思います。
興味のある方は、ぜひぜひお気軽にお問い合わせ下さい。
パンフレットはこちら
＜おまけ＞
周りに見せたら大変評判の良かった透明ディスプレイ。
めちゃくちゃカッコいいです！！
こんなのがバーにあったら、ついふらっと入りたくなりますね（＾ω＾）
「CEATEC JAPAN 2014」 3日目
CEATEC JAPAN 2014 in 幕張メッセ、3日目。
そろそろ休憩時に他の展示を見て回るのも疲れて来たなー、と思っていたところで
こんなスマホアプリを紹介してもらいました。
Spot Collection for CEATEC JAPAN 2014です！！
遊び方は、まずBluetoothをONにしてレーダーで会場内を探索します。
ドラゴンレーダーみたいですね。
そして会場内に設置されているスポットを発見すると
なんか豆？的な？物が先程のレーダーに表示されます。
豆？の画像が撮れなかったので遊び方から、こんな感じ。
豆？をクリックするとロボットっぽいキャラクターが豆？を
食べて頭の苗？（苗ですかねこれ？）が成長していきます。
全部のスポットを回ったらプレゼントが貰えるんです！
なんともグダグダな説明ですが、こういったアプリがあるだけで
散策するのが楽しいですね(´∀｀)
意外とスポットの範囲が狭くて、豆が出たり消えたり…。
一人で画面を見ながらウロウロしてると不審者感丸出しです。
長崎のような観光地にはこういったアプリがあると
楽しいんじゃないだろうか？なんて思ったりしました。
長崎さるくとかありますしね！
さるくちゃんには是非カステラとかちゃんぽん食べさせて
最後には女神大橋にトランスフォームしてもらいたいものです（＾ω＾）
＜おまけ＞
お待たせしました、チーバくん！！ぺろ〜〜〜〜〜〜！！！
発見した瞬間、ガクガクしていた足の痛みがフワッと消えました。
なんかもう、可愛すぎて。
弊社HP及びブログの検索キーワード上位に、意外にも
「チーバくん」がランクインしてたので、笑みがこぼれました。
「CEATEC JAPAN 2014」 2日目
CEATEC JAPAN 2014 in 幕張メッセ、2日目です！
今日も足が痛い痛いのkosugiです。
本日、目の前のブースに報道陣が殺到してたので、なんだろ〜と思っていたら…
なんと！ノーベル物理学賞を受賞された中村氏のお兄様が出展してるとのこと！！
タイムリーなだけに、次から次へと取材を受けている様子でした。
もしかしたら報道番組なんかで目にする方もいるかもしれません。
裸眼で見れる3D映像（人が多くて近づけないので憶測）を
出展されているらしく、モニターが3台並んでたのですが
その内の1台にカメラが設置されていて長崎県ブースが常時
ばっちり映り込んでました(笑)
TVに写るかは編集次第なのでなんとも言えませんが
チラっとでも映りこむことを期待してます(´∀｀)
＜おまけ＞
これはなんなんだろうか…イチゴどーもくん？？
なぜイチゴ？(‘A`；)
「CEATEC JAPAN 2014」 1日目
CEATEC JAPAN 2014 in 幕張メッセ！開幕しました！！
今年も引き続き長崎県のブースで共同出展させて頂いております。
出展製品の詳細については特設サイトをご覧下さい。
CEATEC JAPAN 2014 特集サイト (※別窓開きます)
今回はこんな感じですー。
思いのほかタペストリーが可愛くできたので嬉しいです(´∀｀)
アイキャッチになればいいのですが…。
出展製品その１、「EventAdapter（イベントアダプター）」は
今月12日から開催される「長崎がんばらんば国体・大会2014」の
公式スマートフォンアプリの開発に使用されています。
競技の情報や結果だけでなく、ジャンル別に周辺の飲食店が検索できたり
がんばくんと一緒に写真が撮れたりなど、様々な機能がございますので
スマホをお持ちの方は、ぜひぜひインストールして使ってみてください。
＜おまけ＞
幕張メッセ内にデイリーが出来ててビックリしたんですが、
こんなところにチーバくんがっ！さすが千葉！！
宿泊先の最寄り駅でも、早朝いきなり発見したので
興奮してバッシャバッシャ写真撮ってたら仁王立ちガン見（笑）
なんだかちょっと怖いけど…チーバくん愛は変わらないです。
雑用係のむかしばなし
- 2014/09/26
- Kumiko.S
むかーし、むかしの目がテン？(ﾟДﾟ)？なお話。
世の中は「ヘイヘイ！パソコンくらい扱えなきゃ、この世はもう暮らしていけないぜ！」政策で、無料で受講できるパソコン教室があっちにもこっちにもそっちにもどっちにも？開かれていた時代。
私、某所でPCインストラクターとして請負業務をやっておりました、ハイ。
もちろん、その某所には私の他にもPCインストラクターは20名近くが登録されていて、各市町村（その頃はまだ長崎にも村ありました）やらカルチャーセンター主催のパソコン教室へ派遣されていたわけです。
ほとんどの生徒はPC初心者。
教えるのは「電源の入れ方」から。
ぶっちゃけた話、初心者のコースを初心者（に毛が生えた）が教えていたんですよネー(´･ω･`)
噂だと、たった12時間のコースで最初の数時間はビデオを見せるだけ授業、とか。初心者コースを受講した生徒が、翌週にそのコースで教えてました？！ とか。
てことで、私が目（耳）にした、トンでもインストラクター事例(笑)
