positionpaper_17.html

<!DOCTYPE html>
<!--
  Copyright 2010 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  Original slides: Marcin Wichary (mwichary@google.com)
  Modifications: Ernest Delgado (ernestd@google.com)
                 Alex Russell (slightlyoff@chromium.org)
                 Brad Neuberg
-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title> 第17回ぽじぺ </title>
    <meta name="generator" content="Org-mode"/>
    <meta name="author" content=" yuji okazawa (id:yujiorama) "/>
    <style>
      .notes { display: none; }
      .stroke {
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 1px;
        -moz-text-stroke-color: red;
        -moz-text-stroke-width: 1px;
      }

      body {
        font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        background: #778;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }

      div.presentation {
        position: absolute;
        width: 100%;
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        background: inherit;
      }

      div.slides {
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0;
        top: 0;
        position: absolute;
        display: block;
        -webkit-transition: -webkit-transform 1s ease-in-out;
        -moz-transition: -moz-transform 1s ease-in-out;
        -o-transition: -o-transform 1s ease-in-out;
      }

      div.slide {
        display: none;
        position: absolute;
        overflow: hidden;
        width: 900px;
        height: 700px;
        left: 50%;
        top: 50%;
        margin-top: -350px;
        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
        -webkit-transition: margin 0.25s ease-in-out;
        background-color: #eee;
        background: -moz-linear-gradient(bottom, #bbd, #fff);
        -moz-transition: margin 0.25s ease-in-out;
        -o-transition: margin 0.25s ease-in-out;
      }

      div.slide:nth-child(even) {
        border-top-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -webkit-border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        -moz-border-radius-bottomright: 20px;
        -webkit-border-bottom-right-radius: 20px;
      }

      div.slide:nth-child(odd) {
        border-top-right-radius: 20px;
        -moz-border-radius-topright: 20px;
        -webkit-border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-radius-bottomleft: 20px;
        -webkit-border-bottom-left-radius: 20px;
      }

      div.slide p {
        font-size: 30px;
      }

      section.intro p {
        font-size: 35px;
      }

      button {
        font-size: 20px;
      }

      .summary {
       font-size: 30px;
      }

      .sub-summary {
       font-size: 25px;
      }

      .sub-summary li {
       padding: 5px 0;
      }

      .bullets {
       font-size: 40px;
      }

      .slide.far-past {
        display: block;
        margin-left: -2400px;
      }

      .slide.past {
        display: block;
        margin-left: -1400px;
      }

      .slide.current {
        display: block;
        margin-left: -450px;
      }

      .slide.future {
        display: block;
        margin-left: 500px;
      }

      .slide.far-future {
        display: block;
        margin-left: 1500px;
      }

      body.three-d div.presentation {
        /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
      }

      body.three-d div.slides {
        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
      }


      /* Content */

      @font-face { font-family: 'Junction'; src: url(./Junction02.otf); }
      @font-face { font-family: 'LeagueGothic'; src: url(./LeagueGothic.otf); }

      header {
        font-family: 'Junction';
        font-weight: normal;
        font-size: 50px;
        letter-spacing: -.05em;
        color: white;
        color: black;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
        position: absolute;
        left: 30px;
        top: 25px;
        margin: 0;
        padding: 0;
      }

      .intro h1 {
        color: black;
        padding: 0;
        margin: 0;
        letter-spacing: -2px;
        font-size: 96px;
      }

      .intro h2 {
        color: black;
        font-family: 'LeagueGothic';
        padding: 0;
        margin: 0;
        margin-top: -5px;
        font-size: 68px;
        letter-spacing: -1px;
      }

      h1 {
        display: inline;
        font-size: 100%;
        font-weight: normal;
        padding: 0;
        margin: 0;
      }

      h2 {
        font-family: 'Junction';
        color: black;
        font-size: 20px;
        margin-left: 20px;
        margin-top: 50px;
      }

      h2:first-child {
        margin-top: 0;
      }

      section {
        font-family: 'Junction';
        font-size: 50px;
        color: #3f3f3f;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 100px;
        display: block;
        overflow: hidden;
      }

      section.no-heading {
        margin-top: 20px;
      }

      a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
        line-height: 110%;
        border-bottom: 2px solid #3f3f3f;
      }

      #wmap a {
        line-height: 100%;
        border-bottom: none;
      }

      section.left {
        float: left;
        width: 390px;
      }

      section.small {
        font-size: 24px;
      }

      section.small ul {
        margin: 0 0 0 15px;
        padding: 0;
      }

      section.small li {
        padding-bottom: 0;
      }

      h2 {
        padding: 0;
        margin: 15px 0 5px 0;
/*        font-family: GG240;*/
      }

      section.center {
        line-height: 180%;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 700px;
        width: 900px;
      }

      pre {
        text-align: left;
        font-size: 16px;
        font-family: Monaco, Courier;
        padding-bottom: 10px;

        padding: 10px 20px;
        background: rgba(255, 0, 0, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 0, 0, 0.2);
      }
      .two-column {
        -webkit-column-count: 2;
        -moz-column-count: 2;
      }

      pre select {
        font-size: 16px;
        font-family: Monaco, Courier;
        border: 1px solid #c61800;
      }

      input {
        font-size: 16px;
        font-family: Helvetica;
        padding: 3px;
      }
      input[type="range"] {
        width: 100%;
      }

      button {
        font-family: Verdana;
      }

      button.large {
        font-size: 32px;
      }

      pre b {
        font-weight: normal;
        color: #c61800;
        text-shadow: #c61800 0 0 1px;
        /*letter-spacing: -1px;*/
      }
      pre em {
        font-weight: normal;
        font-style: normal;
        color: #18a600;
        text-shadow: #18a600 0 0 1px;
      }
      pre input[type="range"] {
        height: 6px;
        cursor: pointer;
        width: auto;
      }
      example {
        font-size: 16px;
        display: block;
        padding: 10px 20px;
        color: black;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
      video {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .css,
      .js,
      .html,
      .key {
        font-family: 'Junction';
        color: black;
        display: inline-block;
        padding: 6px 10px 3px 10px;
        font-size: 25px;
        line-height: 30px;
        text-shadow: none;
        letter-spacing: 0;
        bottom: 10px;
        position: relative;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
      }

      .key { font-family: Arial; }

      :not(header) > .css,
      :not(header) > .js,
      :not(header) > .html,
      :not(header) > .key {
        margin: 0 5px;
        bottom: 4px;
      }

      .css {
        background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
        background-color: #ff4;
        background: -moz-linear-gradient(left top, #ff4, #ffa);
      }
      .js {
        background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
        background-color: #4f4;
        background: -moz-linear-gradient(left top, #4f4, #afa);
      }
      .html {
        background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
        background-color: #e88;
        background: -moz-linear-gradient(left top, #e88, #fee);
      }

      li {
        list-style: none;
        padding: 10px 0;
      }

      .summary li::before, .sub-summary li::before, .bullets li::before {
        content: '· ';
      }

      info {
        display: block;
        font-size: 50%;
        text-align: center;
      }

    </style>
  </head><body>
    <div class="presentation"><div class="slides">

<div class="slide">
  <section class="center intro">
    <style>
      span.strike { text-decoration:line-through;}
    </style>
    <h2>
      第17回ぽじぺ
    </h2>
    <p style="margin-top:100px">
      yuji okazawa (id:yujiorama)<br/>(yujiorama at gmail.com)
    </p>
    <p style="margin-top:100px">
      2011/02/20
    </p>
  </section>
</div>

<div class="slide">
<header><h1><img src="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg"  alt="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg" />最近の活動 </h1></header>

<section>
<ul>
<li id="sec-1_1">主に管理面でプロジェクトが佳境 <br/>




<pre class="example">コードに変更開始とか変更終了とかのコメント入れたり、削除した箇所を
コメントアウトとして戻す作業、泣きそう。なんというか縁日で買ってき
たひよこが鶏になったらそれを殺して食えと言われた感じ
http://twitter.com/yujiorama/status/35554445496565760
</pre>




<pre class="example">一行のコードを直すために5個くらいのxlsを直さないといけないとか、オー
バーヘッド大きすぎるだろう
http://twitter.com/yujiorama/status/38029501015265280
</pre>



</li>
<li id="sec-1_2">予断を許さない状況なので TDDBC 福岡への参加は自重 <br/>

</li>
</ul>
</section>

</div>

<div class="slide">
<header><h1><img src="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg"  alt="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg" />参加経験 </h1></header>

<section>
<ul>
<li id="sec-2_1">2010/03 くらいから参加 <br/>
</li>
<li id="sec-2_2">とりまとめお疲れさまでした (setoazusa さん) <br/>
</li>
<li id="sec-2_3">チームラボ様にもとても感謝 <br/>

</li>
</ul>
</section>

</div>

<div class="slide">
<header><h1><img src="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg"  alt="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg" />関心領域 </h1></header>

<section>
<ul>
<li id="sec-3_1">10 年後に生き残る受託開発の方法論 <br/>
</li>
<li id="sec-3_2">凡人開発者の生きる道 <br/>

</li>
</ul>
</section>

</div>

<div class="slide">
<header><h1><img src="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg"  alt="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg" />担当箇所 </h1></header>

<section>
<ul>
<li id="sec-4_1">「97きのこ本」の査読をさせていただけたのは 2010 年の最良の出来事 <br/>
</li>
<li id="sec-4_2">Chapter 21.Result Verification Patterns <br/>
</li>
<li id="sec-4_3">Chapter 24.Test Organization Patterns <br/>
</li>
<li id="sec-4_4">Chapter 25.Database Patterns <br/>

</li>
</ul>
</section>

</div>

<div class="slide">
<header><h1><img src="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg"  alt="http://a2.twimg.com/profile_images/691214238/relative-jet_bigger.jpg" />今後の希望 </h1></header>

<section>
<ol class="summary">
<li>
WEwLC (独りでは読めそうもない orz)
</li>
<li>
データベースリファクタリング (地豆の思想そのままに見える)
</li>
</ol>
<ul>
<li id="sec-5_1">独りでも読みたいもの/読んでるもの <br/>
<ul>
<li id="sec-5_1_1">Fowler の DSL は今のところ 1/4 くらい <br/>
</li>
</ul>
</li>
</ul>
</section>
</div>

</div>
<script>
  (function() {
    // Since we don't have the fallback of attachEvent and
    // other IE only stuff we won't try to run JS for IE.
    // It will run though when using Google Chrome Frame
    if (document.all) { return; }

    var currentSlideNo;
    var notesOn = false;
    var slides = document.getElementsByClassName('slide');
    var touchStartX = 0;

    // var slide_hash = window.location.hash.replace(/#/, '');
    // if (slide_hash) {
    //   for (var i = 0, len = slides.length; i < len; i++) {
    //     if (slides[i].id == slide_hash) {
    //       currentSlideNo = i;
    //       updateSlideClasses();
    //     }
    //   }
    // }

    var spaces = /\s+/, a1 = [""];

    var str2array = function(s) {
      if (typeof s == "string" || s instanceof String) {
        if (s.indexOf(" ") < 0) {
          a1[0] = s;
          return a1;
        } else {
          return s.split(spaces);
        }
      }
      return s;
    };

    var trim = function(str) {
      return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    };

    var addClass = function(node, classStr) {
      classStr = str2array(classStr);
      var cls = " " + node.className + " ";
      for (var i = 0, len = classStr.length, c; i < len; ++i) {
        c = classStr[i];
        if (c && cls.indexOf(" " + c + " ") < 0) {
          cls += c + " ";
        }
      }
      node.className = trim(cls);
    };

    var removeClass = function(node, classStr) {
      var cls;
      if (classStr !== undefined) {
        classStr = str2array(classStr);
        cls = " " + node.className + " ";
        for (var i = 0, len = classStr.length; i < len; ++i) {
          cls = cls.replace(" " + classStr[i] + " ", " ");
        }
        cls = trim(cls);
      } else {
        cls = "";
      }
      if (node.className != cls) {
        node.className = cls;
      }
    };

    var getSlideEl = function(slideNo) {
      if (slideNo > 0) {
        return slides[slideNo - 1];
      } else {
        return null;
      }
    };

    var getSlideTitle = function(slideNo) {
      var el = getSlideEl(slideNo);

      if (el) {
        return el.getElementsByTagName('header')[0].innerHTML;
      } else {
        return null;
      }
    };

    var changeSlideElClass = function(slideNo, className) {
      var el = getSlideEl(slideNo);

      if (el) {
        removeClass(el, 'far-past past current future far-future');
        addClass(el, className);
      }
    };

    var updateSlideClasses = function() {
      window.location.hash = "slide" + currentSlideNo;
      changeSlideElClass(currentSlideNo - 2, 'far-past');
      changeSlideElClass(currentSlideNo - 1, 'past');
      changeSlideElClass(currentSlideNo, 'current');
      changeSlideElClass(currentSlideNo + 1, 'future');
      changeSlideElClass(currentSlideNo + 2, 'far-future');
    };

    var nextSlide = function() {
      if (currentSlideNo < slides.length) {
        currentSlideNo++;
      }

      updateSlideClasses();
    };

    var prevSlide = function() {
      if (currentSlideNo > 1) {
        currentSlideNo--;
      }
      updateSlideClasses();
    };

    var showNotes = function() {
      var notes = document.querySelectorAll('.notes');
      for (var i = 0, len = notes.length; i < len; i++) {
        notes[i].style.display = (notesOn) ? 'none':'block';
      }
      notesOn = (notesOn) ? false:true;
    };

    var switch3D = function() {
      if (document.body.className.indexOf('three-d') == -1) {
        document.getElementsByClassName('presentation')[0].style.webkitPerspective = '1000px';
        document.body.className += ' three-d';
      } else {
        window.setTimeout("document.getElementsByClassName('presentation')[0].style.webkitPerspective = '0';", 2000);
        document.body.className = document.body.className.replace(/three-d/, '');
      }
    };

    var handleBodyKeyDown = function(event) {
      // console.log(event.keyCode);
      switch (event.keyCode) {
        case 37: // left arrow
          prevSlide();
          break;
        case 39: // right arrow
        // case 32: // space
          nextSlide();
          break;
        case 50: // 2
          showNotes();
          break;
        case 51: // 3
          switch3D();
          break;
      }
    };

    var addTouchListeners = function() {
      document.addEventListener('touchstart', function(e) {
        touchStartX = e.touches[0].pageX;
      }, false);
      document.addEventListener('touchend', function(e) {
        var pixelsMoved = touchStartX - e.changedTouches[0].pageX;
        var SWIPE_SIZE = 150;
        if (pixelsMoved > SWIPE_SIZE) {
          nextSlide();
        }
        else if (pixelsMoved < -SWIPE_SIZE) {
         prevSlide();
        }
      }, false);
    };

    // initialize

    (function() {
      if (window.location.hash != "") {
        currentSlideNo = Number(window.location.hash.replace('#slide', ''));
      } else {
        currentSlideNo = 1;
      }

      document.addEventListener('keydown', handleBodyKeyDown, false);

      var els = slides;
      for (var i = 0, el; el = els[i]; i++) {
        addClass(el, 'slide far-future');
      }
      updateSlideClasses();

      // add support for finger events (filter it by property detection?)
      addTouchListeners();
    })();
  })();
</script>
</body>
</html>