Forked from: mash's koebu theme S5 presentation diff(340)

takimo presentation

takimo

2011-02-02 20:30:49

License: see code comments

Fork: 0

Fav: 2

View: 3100

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 13 lines
HTML 362 lines
CSS 290 lines

takimo presentation
S5 slides

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DeNA Technology Seminar #3 takimo - js do it</title>
<meta name="Description" content="" />
<meta name="Keywords"  content="" />

<div class="layout">
  <div id="currentSlide"></div>
  <div id="header"></div>
  <div id="footer">
    <div id="profile">
      <h2>Shinya Takimoto</h2>
      <h2><a href="http://takimo.net">takimo.net</a></h2>

</div>
    <div id="controls"></div>

</div>
    <div id="koebu_char">
    </div>
  </div>
</div>

<div class="slide">
    <h1>mixi Touchの裏側</h1>
    <h2>ShinyaTakimoto &lt;mixi&gt;</h2>
    <h3>Dec 15, 2010</h3>
</div>

<h2>アジェンダ</h2>
  <ul>
    <li>1. 自己紹介</li>
    <li>2. mixi Touchとは</li>
    <li>3. 全体像</li>
    <li>3. クライアントサイドの話</li>
    <li>4. mixiとデバイス</li>
  </ul>

</div>

<div class="slide">
  <h2>自己紹介</h2>
  <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/takimo.jpg" />
  <ul>
    <li>@takimo</li>
    <li>2008年度新卒</li>
  </ul>
</div>

<div class="slide">
  <h2>自己紹介</h2>
  <ul>
    <li>山梨県在住</li>
    <li>長距離通勤</li>
    <li>最近はB-1グランプリ覇者の甲府鳥モツで多くの観光客の方が訪れます</li>
  </ul>
</div>

<div class="slide">
  <h2>とりもっちゃん</h2>
  <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/enwotorimotu.png" height="60%"/>
</div>

<div class="slide">
  <p class="appeal">mixi Touchとは</p>
  <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/mixitouch.png" />
</div>

<div class="slide">
  <h2>巨大なWEBサイトとスマートフォンとの巡り逢い</h2>
  <ul>
    <li>PC並の機能を持っている</li>
    <li>限られた通信速度</li>
    <li>画面解像度</li>
    <li>touch端末</li>
  </ul>
</div>

<div class="slide">
  <h2>WEBサービスとしての標準プラットフォーム</h2>
  <ul>
    <li>クライアントアプリとWEBサービス</li>
    <li>すべての情報をAPIで提供するには多くのリソースが必要</li>
    <li>今ある資源を最大限活用PC側Controllerの再利しつつViewを最適化するプロジェクトへ</li>
  </ul>
</div>

<div class="slide">
  <h2>全体像</h2>
  <ul>
    <li>ビュー切り替え対応</li>
    <li>インターナルなAPIを使ったクライアントアプリケーション</li>
  </ul>
</div>

<div class="slide">
  <h2>対象端末</h2>
  <ul>
    <li>Webkitベースのブラウザ</li>
    <li>mobile Safari</li>
    <li>Androidの標準ブラウザ</li>
  </ul>
</div>

<div class="slide">
  <h2>切り替え</h2>
  <ul>
    <li>UserAgentで行っている</li>
    <li>この端末はPCを見せる等も行っている</li>
  </ul>
</div>

<div class="slide">
  <h2>工数&リソース</h2>
  <ul>
    <li>画面数100弱</li>
    <li>開発期間は3ヶ月</li>
    <li>開発リソースは数人</li>
  </ul>
</div>

<div class="slide">
  <p class="appeal">クライアントサイドの話</p>
  <img class="leader" src="http://image.blog.livedoor.jp/akiba_z/imgs/e/c/ec0e1a53.jpg" height="40%"/>
</div>

<div class="slide">
  <h2>Not prototype.js, Not JQuery</h2>
  <ul>
    <li>開発を始めた当初、体系だったスマートフォン向けライブラリがなかった</li>
    <li>HTML5 + JavaScript1.6, 1.7 + CSS3で大部分をカバーできる</li>
    <li>ユーティリティ的なものに関してはcommonライブラリとして独自実装</li>
  </ul>
</div>

<div class="slide">
  <h2>widget(ウィジェット)</h2>
  <ul>
    <li>HTMLElementに特定の記述をするだけで指定したネームスペースのインスタンスを作ることが出来る</li>
    <li>Flashでいう基本クラスみたいなものをHTMLに定義できる</li>
    <li>基礎ライブラリとしてはnamespace.jsとdataset.jsを使用(@hiroki_daichi作)</li>
  </ul>
</div>

<div class="slide">
  <h2>widget(ウィジェット)</h2>
<pre><code>&lt;a href=&quot;sample.pl&quot;
    class=&quot;widget&quot;
    data-widget-namespace=&quot;jp.co.mixi.ui.confirmlink&quot;
    data-message-text=&quot;デザインをPC版に切り替えます&quot;
&gt;PC版&lt;/a&gt;</code></pre>
</div>

<div class="slide">
  <h2>namespace.js</h2>
  <ul>
    <li><a href="https://github.com/hirokidaichi/namespace-js">https://github.com/hirokidaichi/namespace-js</a></li>
    <li>JavaScriptでnamespaceを使うことが出来るようになる</li>
  </ul>
<pre><code>Namespace
.use('jp.co.mixi.net.jsonrpc JSONRPC')
.use('jp.co.mixi.lang.string tuneForm')
.apply(function(ns){
    var html = "&lt;p&gt;テスト&lt;/p&gt;";
    ns.tuneForm(html);
});</code></pre>
</div>

<div class="slide">
  <h2>dataset.js</h2>
  <ul>
    <li>HTMLElementにデータを紐付けることが可能になる</li>
    <li>HTML5のスペックに載っているが実装したブラウザはまだない</li>
    <li>先日公開されたjQueryMobileはdatasetをライブラリベースで使用できるようになっている</li>
  </ul>
</div>

<div class="slide">
  <h2>dataset.js</h2><pre><code>&lt;ul&gt;
&lt;li data-height=&quot;195m&quot;&gt;スカイタワー西東京&lt;/li&gt;
&lt;li data-height=&quot;333m&quot;&gt;東京タワー&lt;/li&gt;
&lt;li data-height=&quot;634m&quot;&gt;東京スカイツリー&lt;/li&gt;
&lt;/ul&gt;
//javascript
elementList.forEach(function(element){
  var dataset = $D(element);
  console.log(dataset.height);
});
-> 195m 33m 634m</ul></code></pre>
</div>
    
<div class="slide">
  <h2>キャッシュ</h2>
  <ul>
    <li>アプリケーションキャッシュは検証が間に合わず&何かおかしいため使用せず</li>
    <li>LocalStorageは一部機能の設定値を保存するような形で利用</li>
  </ul>
</div>

<div class="slide">
  <h2>知っておきたい</h2>
  独断と偏見でmobileSafariやChromeが対応しているJavaScriptの機能の紹介をします
</div>

<div class="slide">
  <h2>知っておきたい JavaScript編</h2>
  <ul>
    <li>document.getElementsByTagName([tagName])[1]</li>
    <li>document.getElementsByClassName([className])[1]</li>
    <li>$(id)</li>
  </ul>
<br />
<pre><code>var element = document.querySelector('input[name=id]');
console.log(element.value);</code></pre>
</div>

<div class="slide">
  <h2>知っておきたい JavaScript編</h2>
  <ul>
    <li>document.getElementsByTagName([tagName])</li>
    <li>document.getElementsByClassName([className])</li>
    <li>$$([CSS Selector])</li>
  </ul>
<br />
<pre><code>var elements = Array.prototype.slice.call(
document.querySelectorAll('li.userProfile'), 0);
console.log(elements);</code></pre>
</div>

<div class="slide">
  <h2>知っておきたい JavaScript編</h2>
  <ul>
    <li>Array.prototype.each</li>
  </ul>
<br />
<pre><code>var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(value){
    console.log(value);
});
// 1, 2, 3, 4, 5</code></pre>
</div>

<div class="slide">
  <h2>知っておきたい JavaScript編</h2>
  <ul>
    <li>Element.prototype.classList</li>
    <li>http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#domtokenlist</li>
  </ul>
<br />
<pre><code>var element = querySelector('#popup');
element.classList.add('opened'); //addClassName
element.classList.contains('opened'); // hasClassName
element.classList.remove('opened'); // removeClassName</code></pre>
</div>

<div class="slide">
  <h2>type=emailの罠</h2>
  <ul>
    <li>type=emailを使うとiPhone(iPod)でパスワードを覚えてくれなくなります</li>
    <li>解決策としてはDOMの解釈が終わった後にこっそりtype=emailに変える</li>
    <li>(でも、iPhoneはデフォルトでパスワード保存機能がOFFなのです</li>
  </ul>
</div>
    
<div class="slide">
  <h2>Androidのブラウザがz-indexを無視してフォーカスを当てる</h2>
  <ul>
    <li>うしろに隠れているクリッカブルなElementも一緒にフォーカスがあたったように見える</li>
    <li>http://code.google.com/p/android/issues/detail?id=6721</li>
    <li>-webkit-tap-highlight-colorでフォーカスの色を白にするとか</li>
  </ul>
</div>
    
<div class="slide">
  <h2>Android1.6さような(ry</h2>
  <ul>
    <li>GeolocationAPIが使えない</li>
    <li>clickイベントのdispatchのタイミングがおかしい</li>
    <li>シェア7.9%</li>
  </ul>
</div>
    
<div class="slide">
  <h2>UIスレッドをロックしない</h2>
  <ul>
    <li>重い処理は分割しましょう</li>
    <li>jsdefferd.jsだったらloopとかを使う</li>
  </ul>
</div>

<div class="slide">
  <h2>i.softbankのiが大文字にならなくする</h2>
  <ul>
    <li>原因は自動補完です、私的なi</li>
    <li>文頭文字の大文字化を禁止</li>
  </ul>
  <pre><code><input type="email" name="email" value="" autocapitalize="off" autocorrect="off"></code></pre>
</div>

<div class="slide">
  <p class="appeal">mixiとデバイス</p>
</div>

<div class="slide">
  <h2>mixiとデバイス</h2>
  <ul>
    <li>iPhone、Android、GoogleTVだったりいろんなところからユーザーはくる</li>
    <li>それぞれのタッチポイントを最適にしていきます！</li>
    <li>ひとまずAndoirdアプリお楽しみに</li>
  </ul>
</div>

<div class="slide">
  <h2>NGD(Next Generation Device)サポートはじめました</h2>
  <ul>
    <li>iPhoneやAndroid携帯といったスマートフォンやタブレット端末の購入補助制度</li>
    <li>例えばDesireZとかKindle、Palm Pre 2もok</li>
    <li>全社員、端末の購入時、最大５万円を補助</li>
    <li>GoogleTVとかも補助していく方向</li>
  </ul>
</div>

<div class="slide">
  <h2>Thank you for listening!</h2>
</div>

takimo presentation

/* s5-core.css */
/* Do not edit or override these styles! The system will likely break if you do. */
div#header, div#footer, div.slide {position: absolute;}
html>body div#header, html>body div#footer, html>body div.slide {position: fixed;}
div.slide  { visibility: hidden;}
#slide0 {visibility: visible;}
div#controls {position: absolute;}
#footer>div#controls {position: fixed;}
.handout {display: none;}

/* framing.css */
/* The following styles size and place the slide components.
   Edit them if you want to change the overall slide layout.
   The commented lines can be uncommented (and modified, if necessary)
    to help you with the rearrangement process. */

div#header, div#footer, div.slide {width: 100%; top: 0; left: 0;}
div#header {top: 0; height: 1em;}
div#footer {top: auto; bottom: 0; height: 2.5em;}
div.slide {top: 0; width: 92%; padding: 1.2em 4% 110px 4%;}
/*div#controls {left: 50%; top: 0; width: 50%; height: 100%;}
#footer>*/
div#controls {bottom: 0; top: auto; height: auto;}

div#controls form {position: absolute; bottom: 0; right: 0; width: 100%;
  margin: 0;}
div#currentSlide {position: absolute; left: -500px; bottom: 1em; width: 130px; z-index: 10;}
/*html>body
#currentSlide {position: fixed;}*/

/*
div#header {background: #FCC;}
div#footer {background: #CCF;}
div#controls {background: #BBD;}
div#currentSlide {background: #FFC;}
*/

/* pretty.css */
/* Following are the presentation styles -- edit away!
   Note that the 'body' font size may have to be changed if the resolution is
    different than expected. */

body {background: #fff url(bodybg.gif) -16px 0 no-repeat; color: #000; font-size: 2em;}
:link, :visited {text-decoration: none;}
#controls :active {color: #88A !important;}
#controls :focus {outline: 1px dotted #227;}
h1, h2, h3, h4 {font-size: 100%; margin: 0; padding: 0; font-weight: inherit;}
ul, pre {margin: 0; line-height: 1em;}
html, body {margin: 0; padding: 0;}

blockquote, q {font-style: italic;}
blockquote {padding: 0 2em 0.5em; margin: 0 1.5em 0.5em; text-align: center; font-size: 1em;}
blockquote p {margin: 0;}
blockquote i {font-style: normal;}
blockquote b {display: block; margin-top: 0.5em; font-weight: normal; font-size: smaller; font-style: normal;}
blockquote b i {font-style: italic;}

kbd {font-weight: bold; font-size: 1em;}
sup {font-size: smaller; line-height: 1px;}

code {padding: 2px 0.25em; font-weight: bold; color: #533;}
code.bad, code del {color: red;}
code.old {color: silver;}
pre {padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%;}
pre code {display: block;}
ul {margin-left: 5%; margin-right: 7%; list-style: disc;}
li {margin-top: 0.75em; margin-right: 0;}
ul ul {line-height: 1;}
ul ul li {margin: .2em; font-size: 85%; list-style: square;}
img.leader {display: block; margin: 0 auto;}

div#header, div#footer {background: #005; color: #AAB;
  font-family: Verdana, Helvetica, sans-serif;}
div#header {background: #005 url(bodybg.gif) -16px 0 no-repeat;
  line-height: 1px;}
div#footer {font-size: 0.5em; font-weight: bold; padding: 1em 0;}
#footer h1, #footer h2 {display: block; padding: 0 1em;}
#footer h2 {font-style: italic;}

div.long {font-size: 0.75em;}
.slide h1 {position: absolute; top: 0.7em; left: 87px; z-index: 1;
  margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap;
  font: bold 150%/1em Helvetica, sans-serif; text-transform: capitalize;
  color: #DDE; background: #005;}
.slide h3 {font-size: 130%;}
h1 abbr {font-variant: small-caps;}

div#controls {position: absolute; z-index: 1; left: 50%; top: 0;
  width: 50%; height: 100%;
  text-align: right;}
#footer>div#controls {position: fixed; bottom: 0; padding: 1em 0;
  top: auto; height: auto;}
div#controls form {position: absolute; bottom: 0; right: 0; width: 100%;
  margin: 0; padding: 0;}
div#controls a {font-size: 2em; padding: 0; margin: 0 0.5em;
  background: #005; border: none; color: #779;
  cursor: pointer;}
div#controls select {visibility: hidden; background: #DDD; color: #227;}
div#controls div:hover select {visibility: visible;}

#currentSlide {text-align: center; font-size: 0.5em; color: #449;}

#slide0 {padding-top: 3.5em; font-size: 90%;}
#slide0 h1 {position: static; margin: 1em 0 1.33em; padding: 0;
   font: bold 2em Helvetica, sans-serif; white-space: normal;
   color: #000; background: transparent;}
#slide0 h3 {margin-top: 0.5em; font-size: 1.5em;}
#slide0 h4 {margin-top: 0; font-size: 1em;}

ul.urls {list-style: none; display: inline; margin: 0;}
.urls li {display: inline; margin: 0;}
.note {display: none;}

/* font.css */

/* ---------------------------------------------------------------------

Title:    hail2u.net default styles for screen
  Author:   Kyo Nagashima <kyo@hail2u.net>
  Modified: 2005-09-13T15:26:06+09:00
  License:  http://creativecommons.org/licenses/by-nc/2.1/jp/

--------------------------------------------------------------------- */

html, body, div, span, address, em, strong, dfn, cite, abbr, acronym,
blockquote, q, sub, sup, p, ins, del, ul, ol, li, dl, dt, dd, caption,
th, td, input, button, select, optgroup, option, textarea, label, legend {
  font-family: Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Trebuchet MS', sans-serif;
}

pre, code, samp, kbd, var {
  font-family: 'Andale Mono', monospace;
}

/* koebu.css */
body {
  background: #FFF;
  background-position: 0 1px;
  background-repeat: repeat-x;
  font-size: 2.4em;
}

div.layout {
    background: transparent;
}

div#container {
  background-image: url(logo.png);
  background-position: 0 0;
}

#controls {
    left: 35% !important;
}

#controls :active {
  color: #8a8 !important;
}
#controls :focus {
  outline: 1px dotted #272;
}
div#controls a {
/*  background: #2EC12F; */
    background: transparent;
  color: #fff;
}
div#controls select {
  color: #272;
}

div#header, div#footer {
    background: transparent;
/*  background: #2EC12F; */
}
div#header {
  height: 10px;
}
div#footer {
  height: 70px;
  background: url(bg_slide.png) #e6e6e6 repeat-x;
}

body div#footer div#profile {
  color: #333;
  font-style: normal;
  position: absolute;
  left: 580px;
  bottom: 15px;
}

div#footer a {
  color: #aaa;
}

div#footer a:hover {
  text-decoration: underline;
}

pre {
  border: 1px solid #ccc;
  font-family: Consolas, Monaco, monospace;
  font-size: 80%;
  padding: 15px;
  background-color: #333;
  color: #fefefe;
}

code {
  color: #fefefe;
}

div.slide {
  position: absolute !important;
  z-index: 1;
}

div.slide h1 {
  font: normal 2em 'Trebuchet MS', sans-serif;
  position: static;
  text-align: center;
  padding: 0;
  padding-top: 2em;
  color: #000;
  background: transparent;
  white-space: normal;
  text-transform: none;
}

div#slide0 h1 {
  font-family: 'Trebuchet MS', sans-serif;
  text-align: left;
  margin: 0 0 0.3em 0;
}

div#slide0 h2 {
    border: none;
    padding: 0;
    margin: 0;
}

div.slide h2 {
  font-size: 140%;
  /*border-bottom: 6px dotted #ccff33;*/
  border-bottom: 6px dotted #FFD18B;
  padding: 0 0.3em 0.2em;
  margin-bottom: 0.8em;
}

div.slide img {
  display: block;
  margin: 0 auto;
}

div.slide small {
  color: #ccc;
}

#koebu_box {
    position: absolute;
    bottom: 5px;
    left: 30px;
}

#koebu_copy {
    position: absolute;
    bottom: 10px;
    left: 260px;
}

#koebu_copy img {
    border: none;
}

#koebu_char {
    position: absolute;
    bottom: 10px;
    right: 30px;
}

/* takimo original */
div.slide p.appeal {
    font-size: 3em;
    margin: 0 auto;
}

// how to build a koebu theme presentation // 1. fork this // 2. fill AUTHOR, CONTACT, PRESENTATION TITLE, and others // 3. add div.slide // 4. view with /fullscreen // watch http://koebu.com/ , maybe // released under CC by-sa 2.0 license // direct links to images are as-is imgs = []; <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>DeNA Technology Seminar #3 takimo - js do it</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <link rel="stylesheet" type="text/css" media="screen,print" href="style.css" /> </head> <body>    <a id="slideProj" href="" rel="stylesheet"></a> <div class="layout"> <div id="currentSlide"></div> <div id="header"></div> <div id="footer"> <div id="profile"> <h2>Shinya Takimoto</h2> <h2><a href="http://takimo.net">takimo.net</a></h2> </div> <div id="controls"></div> <div id="koebu_box"> <img id="mixi_logo" src="http://dl.dropbox.com/u/193725/takimo-presentation/mixi_tate.png" /> <div id="koebu_copy"> </div> </div> <div id="koebu_char"> </div> </div> </div> <div class="slide"> <h1>mixi Touchの裏側</h1> <h2>ShinyaTakimoto <mixi></h2> <h3>Dec 15, 2010</h3> </div> <div class="slide"> <h2>アジェンダ</h2> <ul> <li>1. 自己紹介</li> <li>2. mixi Touchとは</li> <li>3. 全体像</li> <li>3. クライアントサイドの話</li> <li>4. mixiとデバイス</li> </ul> </div> <div class="slide"> <p class="appeal">自己紹介</p> <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/profile.png" /> </div> <div class="slide"> <h2>自己紹介</h2> <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/takimo.jpg" /> <ul> <li>@takimo</li> <li>2008年度新卒</li> </ul> </div> <div class="slide"> <h2>自己紹介</h2> <ul> <li>山梨県在住</li> <li>長距離通勤</li> <li>最近はB-1グランプリ覇者の甲府鳥モツで多くの観光客の方が訪れます</li> </ul> </div> <div class="slide"> <h2>とりもっちゃん</h2> <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/enwotorimotu.png" height="60%"/> </div> <div class="slide"> <p class="appeal">mixi Touchとは</p> <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/mixitouch.png" /> </div> <div class="slide"> <h2>巨大なWEBサイトとスマートフォンとの巡り逢い</h2> <ul> <li>PC並の機能を持っている</li> <li>限られた通信速度</li> <li>画面解像度</li> <li>touch端末</li> </ul> </div> <div class="slide"> <h2>WEBサービスとしての標準プラットフォーム</h2> <ul> <li>クライアントアプリとWEBサービス</li> <li>すべての情報をAPIで提供するには多くのリソースが必要</li> <li>今ある資源を最大限活用PC側Controllerの再利しつつViewを最適化するプロジェクトへ</li> </ul> </div> <div class="slide"> <p class="appeal">全体像</p> <img class="leader" src="http://dl.dropbox.com/u/193725/takimo-presentation/tenbou.jpg" height="40%"/> </div> <div class="slide"> <h2>全体像</h2> <ul> <li>ビュー切り替え対応</li> <li>インターナルなAPIを使ったクライアントアプリケーション</li> </ul> </div> <div class="slide"> <h2>対象端末</h2> <ul> <li>Webkitベースのブラウザ</li> <li>mobile Safari</li> <li>Androidの標準ブラウザ</li> </ul> </div> <div class="slide"> <h2>切り替え</h2> <ul> <li>UserAgentで行っている</li> <li>この端末はPCを見せる等も行っている</li> </ul> </div> <div class="slide"> <h2>工数&リソース</h2> <ul> <li>画面数100弱</li> <li>開発期間は3ヶ月</li> <li>開発リソースは数人</li> </ul> </div> <div class="slide"> <p class="appeal">クライアントサイドの話</p> <img class="leader" src="http://image.blog.livedoor.jp/akiba_z/imgs/e/c/ec0e1a53.jpg" height="40%"/> </div> <div class="slide"> <h2>Not prototype.js, Not JQuery</h2> <ul> <li>開発を始めた当初、体系だったスマートフォン向けライブラリがなかった</li> <li>HTML5 + JavaScript1.6, 1.7 + CSS3で大部分をカバーできる</li> <li>ユーティリティ的なものに関してはcommonライブラリとして独自実装</li> </ul> </div> <div class="slide"> <h2>widget(ウィジェット)</h2> <ul> <li>HTMLElementに特定の記述をするだけで指定したネームスペースのインスタンスを作ることが出来る</li> <li>Flashでいう基本クラスみたいなものをHTMLに定義できる</li> <li>基礎ライブラリとしてはnamespace.jsとdataset.jsを使用(@hiroki_daichi作)</li> </ul> </div> <div class="slide"> <h2>widget(ウィジェット)</h2> <pre><code><a href="sample.pl" class="widget" data-widget-namespace="jp.co.mixi.ui.confirmlink" data-message-text="デザインをPC版に切り替えます" >PC版</a></code></pre> </div> <div class="slide"> <h2>namespace.js</h2> <ul> <li><a href="https://github.com/hirokidaichi/namespace-js">https://github.com/hirokidaichi/namespace-js</a></li> <li>JavaScriptでnamespaceを使うことが出来るようになる</li> </ul> <pre><code>Namespace .use('jp.co.mixi.net.jsonrpc JSONRPC') .use('jp.co.mixi.lang.string tuneForm') .apply(function(ns){ var html = "<p>テスト</p>"; ns.tuneForm(html); });</code></pre> </div> <div class="slide"> <h2>dataset.js</h2> <ul> <li>HTMLElementにデータを紐付けることが可能になる</li> <li>HTML5のスペックに載っているが実装したブラウザはまだない</li> <li>先日公開されたjQueryMobileはdatasetをライブラリベースで使用できるようになっている</li> </ul> </div> <div class="slide"> <h2>dataset.js</h2><pre><code><ul> <li data-height="195m">スカイタワー西東京</li> <li data-height="333m">東京タワー</li> <li data-height="634m">東京スカイツリー</li> </ul> //javascript elementList.forEach(function(element){ var dataset = $D(element); console.log(dataset.height); }); -> 195m 33m 634m</ul></code></pre> </div> <div class="slide"> <h2>キャッシュ</h2> <ul> <li>アプリケーションキャッシュは検証が間に合わず&何かおかしいため使用せず</li> <li>LocalStorageは一部機能の設定値を保存するような形で利用</li> </ul> </div> <div class="slide"> <h2>知っておきたい</h2> 独断と偏見でmobileSafariやChromeが対応しているJavaScriptの機能の紹介をします </div> <div class="slide"> <h2>知っておきたい JavaScript編</h2> <ul> <li>document.getElementsByTagName([tagName])[1]</li> <li>document.getElementsByClassName([className])[1]</li> <li>$(id)</li> </ul> <br /> <pre><code>var element = document.querySelector('input[name=id]'); console.log(element.value);</code></pre> </div> <div class="slide"> <h2>知っておきたい JavaScript編</h2> <ul> <li>document.getElementsByTagName([tagName])</li> <li>document.getElementsByClassName([className])</li> <li>$$([CSS Selector])</li> </ul> <br /> <pre><code>var elements = Array.prototype.slice.call( document.querySelectorAll('li.userProfile'), 0); console.log(elements);</code></pre> </div> <div class="slide"> <h2>知っておきたい JavaScript編</h2> <ul> <li>Array.prototype.each</li> </ul> <br /> <pre><code>var numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(value){ console.log(value); }); // 1, 2, 3, 4, 5</code></pre> </div> <div class="slide"> <h2>知っておきたい JavaScript編</h2> <ul> <li>Element.prototype.classList</li> <li>http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#domtokenlist</li> </ul> <br /> <pre><code>var element = querySelector('#popup'); element.classList.add('opened'); //addClassName element.classList.contains('opened'); // hasClassName element.classList.remove('opened'); // removeClassName</code></pre> </div> <div class="slide"> <h2>type=emailの罠</h2> <ul> <li>type=emailを使うとiPhone(iPod)でパスワードを覚えてくれなくなります</li> <li>解決策としてはDOMの解釈が終わった後にこっそりtype=emailに変える</li> <li>(でも、iPhoneはデフォルトでパスワード保存機能がOFFなのです</li> </ul> </div> <div class="slide"> <h2>Androidのブラウザがz-indexを無視してフォーカスを当てる</h2> <ul> <li>うしろに隠れているクリッカブルなElementも一緒にフォーカスがあたったように見える</li> <li>http://code.google.com/p/android/issues/detail?id=6721</li> <li>-webkit-tap-highlight-colorでフォーカスの色を白にするとか</li> </ul> </div> <div class="slide"> <h2>Android1.6さような(ry</h2> <ul> <li>GeolocationAPIが使えない</li> <li>clickイベントのdispatchのタイミングがおかしい</li> <li>シェア7.9%</li> </ul> </div> <div class="slide"> <h2>UIスレッドをロックしない</h2> <ul> <li>重い処理は分割しましょう</li> <li>jsdefferd.jsだったらloopとかを使う</li> </ul> </div> <div class="slide"> <h2>i.softbankのiが大文字にならなくする</h2> <ul> <li>原因は自動補完です、私的なi</li> <li>文頭文字の大文字化を禁止</li> </ul> <pre><code><input type="email" name="email" value="" autocapitalize="off" autocorrect="off"></code></pre> </div> <div class="slide"> <p class="appeal">mixiとデバイス</p> </div> <div class="slide"> <h2>mixiとデバイス</h2> <ul> <li>iPhone、Android、GoogleTVだったりいろんなところからユーザーはくる</li> <li>それぞれのタッチポイントを最適にしていきます！</li> <li>ひとまずAndoirdアプリお楽しみに</li> </ul> </div> <div class="slide"> <h2>NGD(Next Generation Device)サポートはじめました</h2> <ul> <li>iPhoneやAndroid携帯といったスマートフォンやタブレット端末の購入補助制度</li> <li>例えばDesireZとかKindle、Palm Pre 2もok</li> <li>全社員、端末の購入時、最大５万円を補助</li> <li>GoogleTVとかも補助していく方向</li> </ul> </div> <div class="slide"> <h2>Thank you for listening!</h2> </div> <script type="text/javascript" src="s5slides.js"></script> <script type="text/javascript" src="index.js"></script> </body> </html> /* s5-core.css */ /* Do not edit or override these styles! The system will likely break if you do. */ div#header, div#footer, div.slide {position: absolute;} html>body div#header, html>body div#footer, html>body div.slide {position: fixed;} div.slide { visibility: hidden;} #slide0 {visibility: visible;} div#controls {position: absolute;} #footer>div#controls {position: fixed;} .handout {display: none;} /* framing.css */ /* The following styles size and place the slide components. Edit them if you want to change the overall slide layout. The commented lines can be uncommented (and modified, if necessary) to help you with the rearrangement process. */ div#header, div#footer, div.slide {width: 100%; top: 0; left: 0;} div#header {top: 0; height: 1em;} div#footer {top: auto; bottom: 0; height: 2.5em;} div.slide {top: 0; width: 92%; padding: 1.2em 4% 110px 4%;} /*div#controls {left: 50%; top: 0; width: 50%; height: 100%;} #footer>*/ div#controls {bottom: 0; top: auto; height: auto;} div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; margin: 0;} div#currentSlide {position: absolute; left: -500px; bottom: 1em; width: 130px; z-index: 10;} /*html>body #currentSlide {position: fixed;}*/ /* div#header {background: #FCC;} div#footer {background: #CCF;} div#controls {background: #BBD;} div#currentSlide {background: #FFC;} */ /* pretty.css */ /* Following are the presentation styles -- edit away! Note that the 'body' font size may have to be changed if the resolution is different than expected. */ body {background: #fff url(bodybg.gif) -16px 0 no-repeat; color: #000; font-size: 2em;} :link, :visited {text-decoration: none;} #controls :active {color: #88A !important;} #controls :focus {outline: 1px dotted #227;} h1, h2, h3, h4 {font-size: 100%; margin: 0; padding: 0; font-weight: inherit;} ul, pre {margin: 0; line-height: 1em;} html, body {margin: 0; padding: 0;} blockquote, q {font-style: italic;} blockquote {padding: 0 2em 0.5em; margin: 0 1.5em 0.5em; text-align: center; font-size: 1em;} blockquote p {margin: 0;} blockquote i {font-style: normal;} blockquote b {display: block; margin-top: 0.5em; font-weight: normal; font-size: smaller; font-style: normal;} blockquote b i {font-style: italic;} kbd {font-weight: bold; font-size: 1em;} sup {font-size: smaller; line-height: 1px;} code {padding: 2px 0.25em; font-weight: bold; color: #533;} code.bad, code del {color: red;} code.old {color: silver;} pre {padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%;} pre code {display: block;} ul {margin-left: 5%; margin-right: 7%; list-style: disc;} li {margin-top: 0.75em; margin-right: 0;} ul ul {line-height: 1;} ul ul li {margin: .2em; font-size: 85%; list-style: square;} img.leader {display: block; margin: 0 auto;} div#header, div#footer {background: #005; color: #AAB; font-family: Verdana, Helvetica, sans-serif;} div#header {background: #005 url(bodybg.gif) -16px 0 no-repeat; line-height: 1px;} div#footer {font-size: 0.5em; font-weight: bold; padding: 1em 0;} #footer h1, #footer h2 {display: block; padding: 0 1em;} #footer h2 {font-style: italic;} div.long {font-size: 0.75em;} .slide h1 {position: absolute; top: 0.7em; left: 87px; z-index: 1; margin: 0; padding: 0.3em 0 0 50px; white-space: nowrap; font: bold 150%/1em Helvetica, sans-serif; text-transform: capitalize; color: #DDE; background: #005;} .slide h3 {font-size: 130%;} h1 abbr {font-variant: small-caps;} div#controls {position: absolute; z-index: 1; left: 50%; top: 0; width: 50%; height: 100%; text-align: right;} #footer>div#controls {position: fixed; bottom: 0; padding: 1em 0; top: auto; height: auto;} div#controls form {position: absolute; bottom: 0; right: 0; width: 100%; margin: 0; padding: 0;} div#controls a {font-size: 2em; padding: 0; margin: 0 0.5em; background: #005; border: none; color: #779; cursor: pointer;} div#controls select {visibility: hidden; background: #DDD; color: #227;} div#controls div:hover select {visibility: visible;} #currentSlide {text-align: center; font-size: 0.5em; color: #449;} #slide0 {padding-top: 3.5em; font-size: 90%;} #slide0 h1 {position: static; margin: 1em 0 1.33em; padding: 0; font: bold 2em Helvetica, sans-serif; white-space: normal; color: #000; background: transparent;} #slide0 h3 {margin-top: 0.5em; font-size: 1.5em;} #slide0 h4 {margin-top: 0; font-size: 1em;} ul.urls {list-style: none; display: inline; margin: 0;} .urls li {display: inline; margin: 0;} .note {display: none;} /* font.css */ /* --------------------------------------------------------------------- Title: hail2u.net default styles for screen Author: Kyo Nagashima <kyo@hail2u.net> Modified: 2005-09-13T15:26:06+09:00 License: http://creativecommons.org/licenses/by-nc/2.1/jp/ --------------------------------------------------------------------- */ html, body, div, span, address, em, strong, dfn, cite, abbr, acronym, blockquote, q, sub, sup, p, ins, del, ul, ol, li, dl, dt, dd, caption, th, td, input, button, select, optgroup, option, textarea, label, legend { font-family: Verdana, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Trebuchet MS', sans-serif; } pre, code, samp, kbd, var { font-family: 'Andale Mono', monospace; } /* koebu.css */ body { background: #FFF; background-position: 0 1px; background-repeat: repeat-x; font-size: 2.4em; } div.layout { background: transparent; } div#container { background-image: url(logo.png); background-position: 0 0; } #controls { left: 35% !important; } #controls :active { color: #8a8 !important; } #controls :focus { outline: 1px dotted #272; } div#controls a { /* background: #2EC12F; */ background: transparent; color: #fff; } div#controls select { color: #272; } div#header, div#footer { background: transparent; /* background: #2EC12F; */ } div#header { height: 10px; } div#footer { height: 70px; background: url(bg_slide.png) #e6e6e6 repeat-x; } body div#footer div#profile { color: #333; font-style: normal; position: absolute; left: 580px; bottom: 15px; } div#footer a { color: #aaa; } div#footer a:hover { text-decoration: underline; } pre { border: 1px solid #ccc; font-family: Consolas, Monaco, monospace; font-size: 80%; padding: 15px; background-color: #333; color: #fefefe; } code { color: #fefefe; } div.slide { position: absolute !important; z-index: 1; } div.slide h1 { font: normal 2em 'Trebuchet MS', sans-serif; position: static; text-align: center; padding: 0; padding-top: 2em; color: #000; background: transparent; white-space: normal; text-transform: none; } div#slide0 h1 { font-family: 'Trebuchet MS', sans-serif; text-align: left; margin: 0 0 0.3em 0; } div#slide0 h2 { border: none; padding: 0; margin: 0; } div.slide h2 { font-size: 140%; /*border-bottom: 6px dotted #ccff33;*/ border-bottom: 6px dotted #FFD18B; padding: 0 0.3em 0.2em; margin-bottom: 0.8em; } div.slide img { display: block; margin: 0 auto; } div.slide small { color: #ccc; } #koebu_box { position: absolute; bottom: 5px; left: 30px; } #koebu_copy { position: absolute; bottom: 10px; left: 260px; } #koebu_copy img { border: none; } #koebu_char { position: absolute; bottom: 10px; right: 30px; } /* takimo original */ div.slide p.appeal { font-size: 3em; margin: 0 auto; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/41WG/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/takimo/41WG" title="takimo presentation">takimo presentation - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code