Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5+CSS3アニメーション        勉強会   CSSでアニメーション!
はじめに•  CSSのアニメーションを覚えよう!
注意事項•  現時点では、HTML5を始めもろもろの仕様は確定していません。   なるべく新しい仕様を見ているつもりですが、情報古かったらすみ   ません。•  ざっくり説明するために、簡単に説明しています。厳密にいうと   ちょっと違う部分も...
アニメーションの特徴•    GIFアニメ•    FLASH•    CSS(transition、animation)•    javascript
GIFアニメ•  ○スクリプト不要•  長時間のアニメーションには不向き•  大きいサイズは苦手•  動的なアニメーションはできない•  色数が少ない
FLASH•  ○スクリプト不要/プログラムも可能•  プラグインが必要•  対応していないブラウザがある
CSS(transition、animation)•  ○スクリプト不要•  ○システム負荷が少ない(レンダリングエ   ンジン、ブラウザによる制御ができるた   め)
javascript•  ○CSSを制御できる•  ○canvasを制御できる•  プログラムが必要
まとめ•  簡単なアニメーションは、アニメGIFや   CSSでスクリプトいらず!•  複雑なアニメーションは、javascriptで!   CSSを制御して効率良く動かそう!
CSS3のアニメーション•  transform•  transitions•  animations
CSSの記述①transform:translate(20px, 20px);-webkit-transform:translate(20px, 20px);-moz-transform:translate(20px, 20px);-ms-tr...
CSSの記述②-moz-transform:translate(20px, 20px);とりあえず、これ以降は、firefoxのやつだけを書いていきます!たるいから!
ベースになるhtml①<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title><style>.sample{         positi...
ベースになるhtml②.sample div{      position:absolute;      width:100px;      height:100px;}.bg{      background:#ddd;}.ex{      ...
ベースになるhtml③<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>$(function(){})...
transform•  要素に対して拡大、縮小、移動などの変形が   できる•  Transforms 2DとTransforms 3Dがある•  transitionsやanimationsと組み合わせるこ   とで表現度の高いアニメーション...
移動•  translate(tx, ty)で要素を移動できます。•  他にもtranslateX(tx)とかもあるけど、説   明を省略します。以降も同じです。
サンプル#ex01{    -moz-transform:translate(20px,20px);}<div class="sample">     <div class="bg"></div>     <div id="ex01" clas...
できた•  いどうした!
TIPS•  右クリックメニュー→要素の調査•  画面右下の3Dビュー•  立体で要素が確認できるよ!
拡大縮小•  scale(sx, sy)で要素を拡大縮小できます。
サンプル#ex02{    -moz-transform:scale(1.2, 0.8);}
できた•  へんけいした!
回転•  rotate(angle)で要素を回転できます。•  angleは、css3で定義されている<angle>   形式で指定します。•  時計回りで、マイナスを指定すると逆に回   転します。
<angle>•  deg  –  360で一周•  grad  –  400で一周•  rad  –  2πで一周•  turn  –  1で一周
サンプル#ex03{    -moz-transform:rotate(30deg);}#ex04{    -moz-transform:rotate(-30deg);}
できた•  かいてんした!
変形の原点•  変形の原点は、要素の中央•  transform-origin(percentage,   percentage)で、原点を変更できる
サンプル#ex05{    -moz-transform:rotate(-30deg);    -moz-transform-origin: 100% 0%;}
できた•  ちゅうしんがずれた!
傾斜•  skew(ax, ay)で、要素を傾斜させる•  ax,ayは<angle>形式
サンプル#ex06{    -moz-transform:skew(30deg,0deg);}
できた•  へんなかたち!
行列変換•  matrix(a, c, b, d, tx, ty)で、行列変換がで   きる!•  なんかむずかしいからよくわかんないけ   ど!!•  ちなみに、javascriptからtransformの値   を取るとrotateとかしか...
サンプル#ex07{    -moz-transform: matrix(1, 0, 0.6, 1,20px, 0);}
できた•  ふーん
おまけ<script>$(function(){     $(.ex).each(function(index, element) {     console.log($(this).css(-moz-transform));     });}...
できた•  全部matrixになってる><
3d•  2Dの関数と同じような奴が3Dにもあるの   で、まずはそれをやってみよう!•  3Dの場合は、x,yの他に奥行きを表すzが   加わります。•  zは、プラスになると近づいて、マイナス   になると遠くになります。
ベースになるhtml.sample3d{    -moz-transform:rotateX(-20deg) rotateY(-20deg);}<div class="sample sample3d">     <div class="bg">...
サンプル①#ex08{     -moz-transform:translate3d(20px, 0,20px);}#ex09{     -moz-transform:translate3d(20px, 0,-20px);}#ex10{    ...
サンプル②#ex11{    -moz-transform:rotate3d(0, 1, 0, 45deg);}#ex12{    -moz-transform:rotate3d(0, 0, 1, 45deg);}#ex13{    -moz-...
サンプル③#ex14{      -moz-transform:scale3d(1, 1.5, 1);}#ex15{      -moz-transform:scale3d(1, 1, 1.5);}#ex16{      -moz-transf...
せつめい•  translate3d(tx, ty, tz)と、scale3d(sx,   sy, sz)はz座標の指定が増えた!•  rotate3d(x, y, z, angle)は、回転軸と角度   を指定できるように!•  skew(a...
できた•  なんにもかわらない場所がある・・・?
Perspective•  Perspective(d)で、遠近法みたいな感じ   にできる
やってみよう#ex18{          -moz-transform:perspective(100px) translate3d(0, 0, 0);}#ex19{          -moz-transform:perspective(1...
できた•  なるほど!
matrix3d•  matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3,   b3, c3, d3, a4, b4, c4, d4)で行列演算ができる•  他にも色いろある!けど、各ブラウザの実装   待ち...
まとめ•  transformをつかうと、いままでになかっ   た形に変形できる!•  他にもいろいろあるけど、未実装だった   りまだまだこれからの予感!
transitions•  時間と変更したいプロパティを指定すると、   アニメーションしながら値が変わる!•  設定できるプロパティは、以下のとおり  –  http://www.w3.org/TR/css3-transitions/    ...
せつめい•  transition-property   –  トランジションを適用するプロパティの名前を指定します。all      とすると、全てのプロパティに影響します   –  指定しなかったプロパティの変更は即座に反映されます。•  ...
開始トリガー•  :hoverやjavascriptを使って、トランジ   ションを開始しよう!
サンプル①#ex01{      -moz-transition-property:background-color;      -moz-transition-duration:2s;      -moz-transition-timing-...
できた•  マウスをのせると背景色がトランジショ   ンしながら色が変わる!(文字色は変わ   らない!)•  画面読み込み時にはトランジションしな   い!
サンプル②#ex02{      -moz-transition-property:background-color color;      -moz-transition-duration:2s;      -moz-transition-t...
できた•  マウスをのせると背景色と文字色がトラ   ンジションしながら色が変わる!
イージング•  transition-timing-functionに指定するこ   とで、いろいろ変更できる!•  自分でも作れるから作ってみよう!•  CSS transition function manipulator  –  http...
イベント•  transition終了時に、javascriptでイベン   トを拾うことができる!•  webkitTransitionEnd,transitionend,MS   TransitionEnd,oTransitionEnd,w...
サンプル$(function(){     $(".sample").bind("transitionend",function(){     console.log(this);     });});
できた•  トランジションが終わるとイベントが発生   してログが出る!
できた•  たくさんログが出た・・・•  変化するプロパティの数だけ、イベントが   発生してログが出る!•  その割には、数が多い・・・。よくわか   んない><
まとめ•  手軽にアニメーションできたり、イージン   グまで出来るのは便利!
animations•  キーフレームを定義してアニメーションで   きる!•  CSS animations  –  https://developer.mozilla.org/ja/CSS/     CSS_animations•  CSS...
せつめい1•  animation-delay  –  開始までの遅延時間•  animation-direction  –  アニメーションするたびに、もどるか最初からす     るかなどを設定(normal, alternate, reve...
せつめい2•  animation-name  –  キーフレームの名前•  animation-play-state  –  アニメーションの状態を指定できる(paused、     running )。今後なくなるかもしれない。•  ani...
サンプル1#ex01{    -moz-animation-delay:0;    -moz-animation-duration:2s;    -moz-animation-iteration-count:infinite;    -moz-a...
サンプル2@-moz-keyframes ex01{      from{      background-color:rgba(0, 255, 0,0.5);   }   to{      background-color:rgba(255,...
できた•  ページのよみこみがおわると、てんめつ   する!
イベント•  アニメーションの開始、終了、繰り返し   の開始時にanimationstart,   animationend, animationiterationを拾   うことができる!•  これもブラウザごとに名前が違うのでたる   い...
やってみよう$(function(){     $(".sample").bind("animationstart", function(e){     console.log("animationstart", this);     }); ...
できた•  てんめつしたらログが出る!•  startのログは出ない!(スタートのタイ   ミングでは、jQueryが実行されてないの   で)
おうよう•  キーフレームはたくさん指定できる!•  fromが0%,toが100%なので、そのあい   だのキーフレームを指定できる!
サンプル1#ex02{    -moz-animation-delay:0;    -moz-animation-duration:2s;    -moz-animation-iteration-count:infinite;    -moz-a...
サンプル2@-moz-keyframes ex02{      from{      background-color:rgba(0, 255, 0, 0.5);  }  50%{      background-color:rgba(0, 0...
できた•  いろがかわる!
まとめ•  ホバーなど簡単なアニメーションなら   CSSでやったほうがいいかも!•  スマフォなどブラウザが固定の場合は積   極的に採用を検討しよう!
とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい!   勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.face...
おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/...
Upcoming SlideShare
Loading in …5
×

㉘HTML5+CSS3でアニメーション!

3,426 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

㉘HTML5+CSS3でアニメーション!

  1. 1. HTML5+CSS3アニメーション 勉強会 CSSでアニメーション!
  2. 2. はじめに•  CSSのアニメーションを覚えよう!
  3. 3. 注意事項•  現時点では、HTML5を始めもろもろの仕様は確定していません。 なるべく新しい仕様を見ているつもりですが、情報古かったらすみ ません。•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. アニメーションの特徴•  GIFアニメ•  FLASH•  CSS(transition、animation)•  javascript
  5. 5. GIFアニメ•  ○スクリプト不要•  長時間のアニメーションには不向き•  大きいサイズは苦手•  動的なアニメーションはできない•  色数が少ない
  6. 6. FLASH•  ○スクリプト不要/プログラムも可能•  プラグインが必要•  対応していないブラウザがある
  7. 7. CSS(transition、animation)•  ○スクリプト不要•  ○システム負荷が少ない(レンダリングエ ンジン、ブラウザによる制御ができるた め)
  8. 8. javascript•  ○CSSを制御できる•  ○canvasを制御できる•  プログラムが必要
  9. 9. まとめ•  簡単なアニメーションは、アニメGIFや CSSでスクリプトいらず!•  複雑なアニメーションは、javascriptで! CSSを制御して効率良く動かそう!
  10. 10. CSS3のアニメーション•  transform•  transitions•  animations
  11. 11. CSSの記述①transform:translate(20px, 20px);-webkit-transform:translate(20px, 20px);-moz-transform:translate(20px, 20px);-ms-transform:translate(20px, 20px);-o-transform:translate(20px, 20px);この5行は同じ意味なんだけど、上からCSS3準拠、safariとかのやつ、firefoxのやつ、IEのやつ、operaのやつこんな感じでブラウザごとに書いていかなくてはいけないので大変><
  12. 12. CSSの記述②-moz-transform:translate(20px, 20px);とりあえず、これ以降は、firefoxのやつだけを書いていきます!たるいから!
  13. 13. ベースになるhtml①<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title><style>.sample{ position:relative; float:left; margin:40px; width:100px; height:100px; line-height:100px; text-align:center; font-size:24px;}
  14. 14. ベースになるhtml②.sample div{ position:absolute; width:100px; height:100px;}.bg{ background:#ddd;}.ex{ background-color:rgba(0, 255, 0, 0.5);}</style>
  15. 15. ベースになるhtml③<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>$(function(){});</script></head><body></body></html>
  16. 16. transform•  要素に対して拡大、縮小、移動などの変形が できる•  Transforms 2DとTransforms 3Dがある•  transitionsやanimationsと組み合わせるこ とで表現度の高いアニメーションが可能•  CSS Transforms –  http://www.w3.org/TR/css3-transforms/•  -moz-transform –  https://developer.mozilla.org/ja/CSS/-moz- transform
  17. 17. 移動•  translate(tx, ty)で要素を移動できます。•  他にもtranslateX(tx)とかもあるけど、説 明を省略します。以降も同じです。
  18. 18. サンプル#ex01{ -moz-transform:translate(20px,20px);}<div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div></div>
  19. 19. できた•  いどうした!
  20. 20. TIPS•  右クリックメニュー→要素の調査•  画面右下の3Dビュー•  立体で要素が確認できるよ!
  21. 21. 拡大縮小•  scale(sx, sy)で要素を拡大縮小できます。
  22. 22. サンプル#ex02{ -moz-transform:scale(1.2, 0.8);}
  23. 23. できた•  へんけいした!
  24. 24. 回転•  rotate(angle)で要素を回転できます。•  angleは、css3で定義されている<angle> 形式で指定します。•  時計回りで、マイナスを指定すると逆に回 転します。
  25. 25. <angle>•  deg –  360で一周•  grad –  400で一周•  rad –  2πで一周•  turn –  1で一周
  26. 26. サンプル#ex03{ -moz-transform:rotate(30deg);}#ex04{ -moz-transform:rotate(-30deg);}
  27. 27. できた•  かいてんした!
  28. 28. 変形の原点•  変形の原点は、要素の中央•  transform-origin(percentage, percentage)で、原点を変更できる
  29. 29. サンプル#ex05{ -moz-transform:rotate(-30deg); -moz-transform-origin: 100% 0%;}
  30. 30. できた•  ちゅうしんがずれた!
  31. 31. 傾斜•  skew(ax, ay)で、要素を傾斜させる•  ax,ayは<angle>形式
  32. 32. サンプル#ex06{ -moz-transform:skew(30deg,0deg);}
  33. 33. できた•  へんなかたち!
  34. 34. 行列変換•  matrix(a, c, b, d, tx, ty)で、行列変換がで きる!•  なんかむずかしいからよくわかんないけ ど!!•  ちなみに、javascriptからtransformの値 を取るとrotateとかしか指定してなくても、 matrixしか取得できないからめんどくさ い!
  35. 35. サンプル#ex07{ -moz-transform: matrix(1, 0, 0.6, 1,20px, 0);}
  36. 36. できた•  ふーん
  37. 37. おまけ<script>$(function(){ $(.ex).each(function(index, element) { console.log($(this).css(-moz-transform)); });});</script>
  38. 38. できた•  全部matrixになってる><
  39. 39. 3d•  2Dの関数と同じような奴が3Dにもあるの で、まずはそれをやってみよう!•  3Dの場合は、x,yの他に奥行きを表すzが 加わります。•  zは、プラスになると近づいて、マイナス になると遠くになります。
  40. 40. ベースになるhtml.sample3d{ -moz-transform:rotateX(-20deg) rotateY(-20deg);}<div class="sample sample3d"> <div class="bg"></div> <div id="ex08" class="ex">ex08</div></div>
  41. 41. サンプル①#ex08{ -moz-transform:translate3d(20px, 0,20px);}#ex09{ -moz-transform:translate3d(20px, 0,-20px);}#ex10{ -moz-transform:rotate3d(1, 0, 0, 45deg);}
  42. 42. サンプル②#ex11{ -moz-transform:rotate3d(0, 1, 0, 45deg);}#ex12{ -moz-transform:rotate3d(0, 0, 1, 45deg);}#ex13{ -moz-transform:scale3d(1.5, 1, 1);}
  43. 43. サンプル③#ex14{ -moz-transform:scale3d(1, 1.5, 1);}#ex15{ -moz-transform:scale3d(1, 1, 1.5);}#ex16{ -moz-transform:skew(30deg, 0deg);}#ex17{ -moz-transform:skew(0deg, 30deg);}
  44. 44. せつめい•  translate3d(tx, ty, tz)と、scale3d(sx, sy, sz)はz座標の指定が増えた!•  rotate3d(x, y, z, angle)は、回転軸と角度 を指定できるように!•  skew(ax, ay)はそのまま!平面なのでzの 傾きはないため。
  45. 45. できた•  なんにもかわらない場所がある・・・?
  46. 46. Perspective•  Perspective(d)で、遠近法みたいな感じ にできる
  47. 47. やってみよう#ex18{ -moz-transform:perspective(100px) translate3d(0, 0, 0);}#ex19{ -moz-transform:perspective(100px) translate3d(0, 0,20px);}#ex20{ -moz-transform:perspective(100px) translate3d(0, 0,-20px);}
  48. 48. できた•  なるほど!
  49. 49. matrix3d•  matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)で行列演算ができる•  他にも色いろある!けど、各ブラウザの実装 待ちみたいな感じ。•  参考 –  http://blogs.msdn.com/b/ie_ja/archive/ 2012/02/07/ie10-css3-3d-transforms.aspx
  50. 50. まとめ•  transformをつかうと、いままでになかっ た形に変形できる!•  他にもいろいろあるけど、未実装だった りまだまだこれからの予感!
  51. 51. transitions•  時間と変更したいプロパティを指定すると、 アニメーションしながら値が変わる!•  設定できるプロパティは、以下のとおり –  http://www.w3.org/TR/css3-transitions/ #animatable-properties•  CSS transitions –  https://developer.mozilla.org/ja/CSS/ CSS_transitions•  CSS transitions W3C Working Draft –  http://www.w3.org/TR/css3-transitions/
  52. 52. せつめい•  transition-property –  トランジションを適用するプロパティの名前を指定します。all とすると、全てのプロパティに影響します –  指定しなかったプロパティの変更は即座に反映されます。•  transition-duration –  所要時間を指定します。複数の値を指定すると、プロパティご とに時間を指定できます•  transition-timing-function –  イージングを指定します –  ease,linear,ease-in,ease-out,ease-in-outおよび、ベジェ曲線 で指定できるcubic-bezier(p0,p1,p2,p3)があります•  transition-delay –  実行が開始されるまでの待ち時間を指定します。マイナスを指定 すると、アニメを途中から開始できます。
  53. 53. 開始トリガー•  :hoverやjavascriptを使って、トランジ ションを開始しよう!
  54. 54. サンプル①#ex01{ -moz-transition-property:background-color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000;}#ex01:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff;}
  55. 55. できた•  マウスをのせると背景色がトランジショ ンしながら色が変わる!(文字色は変わ らない!)•  画面読み込み時にはトランジションしな い!
  56. 56. サンプル②#ex02{ -moz-transition-property:background-color color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000;}#ex02:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff;}
  57. 57. できた•  マウスをのせると背景色と文字色がトラ ンジションしながら色が変わる!
  58. 58. イージング•  transition-timing-functionに指定するこ とで、いろいろ変更できる!•  自分でも作れるから作ってみよう!•  CSS transition function manipulator –  http://cssglue.com/cubic
  59. 59. イベント•  transition終了時に、javascriptでイベン トを拾うことができる!•  webkitTransitionEnd,transitionend,MS TransitionEnd,oTransitionEnd,webkitTr ansitionEndなどブラウザごとに名前が違 うのでたるい・・・。•  開始時のイベントはブラウザごとに実装が わかれてる!firefoxは実装されてないみ たい><
  60. 60. サンプル$(function(){ $(".sample").bind("transitionend",function(){ console.log(this); });});
  61. 61. できた•  トランジションが終わるとイベントが発生 してログが出る!
  62. 62. できた•  たくさんログが出た・・・•  変化するプロパティの数だけ、イベントが 発生してログが出る!•  その割には、数が多い・・・。よくわか んない><
  63. 63. まとめ•  手軽にアニメーションできたり、イージン グまで出来るのは便利!
  64. 64. animations•  キーフレームを定義してアニメーションで きる!•  CSS animations –  https://developer.mozilla.org/ja/CSS/ CSS_animations•  CSS Animations Editor s Draft –  http://dev.w3.org/csswg/css3- animations/
  65. 65. せつめい1•  animation-delay –  開始までの遅延時間•  animation-direction –  アニメーションするたびに、もどるか最初からす るかなどを設定(normal, alternate, reverse, alternate-reverse)•  animation-duration –  アニメーションの長さ•  animation-iteration-count –  繰り返し回数。infiniteで無限
  66. 66. せつめい2•  animation-name –  キーフレームの名前•  animation-play-state –  アニメーションの状態を指定できる(paused、 running )。今後なくなるかもしれない。•  animation-timing-function –  イージング•  animation-fill-mode –  アニメーションの実行前後に、指定したスタイル を適用するかどうか
  67. 67. サンプル1#ex01{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex01; -moz-animation-direction:alternate; -moz-animation-timing-function:linear;}
  68. 68. サンプル2@-moz-keyframes ex01{ from{ background-color:rgba(0, 255, 0,0.5); } to{ background-color:rgba(255, 0, 0, 0.5); }}
  69. 69. できた•  ページのよみこみがおわると、てんめつ する!
  70. 70. イベント•  アニメーションの開始、終了、繰り返し の開始時にanimationstart, animationend, animationiterationを拾 うことができる!•  これもブラウザごとに名前が違うのでたる い・・・。
  71. 71. やってみよう$(function(){ $(".sample").bind("animationstart", function(e){ console.log("animationstart", this); }); $(".sample").bind("animationend", function(e){ console.log("animationend", this); }); $(".sample").bind("animationiteration", function(e){ console.log("animationiteration", this); });});
  72. 72. できた•  てんめつしたらログが出る!•  startのログは出ない!(スタートのタイ ミングでは、jQueryが実行されてないの で)
  73. 73. おうよう•  キーフレームはたくさん指定できる!•  fromが0%,toが100%なので、そのあい だのキーフレームを指定できる!
  74. 74. サンプル1#ex02{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex02; -moz-animation-direction:alternate; -moz-animation-timing-function:linear;}
  75. 75. サンプル2@-moz-keyframes ex02{ from{ background-color:rgba(0, 255, 0, 0.5); } 50%{ background-color:rgba(0, 0, 255, 0.5); } to{ background-color:rgba(255, 0, 0, 0.5); }}
  76. 76. できた•  いろがかわる!
  77. 77. まとめ•  ホバーなど簡単なアニメーションなら CSSでやったほうがいいかも!•  スマフォなどブラウザが固定の場合は積 極的に採用を検討しよう!
  78. 78. とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.facebook.com/TonosamaLabo  
  79. 79. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×