{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/create-session-timer-of-builderscon/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"4e3d552b-fb13-51f9-a324-ef2c57d882b8","excerpt":"元 YAPC::Asia 主催の牧さん @lestrrat によるカンファレンス Builderscon のWeb版セッションタイマーを作りました。 ちなみに、Builderscon公式ブログでも紹介してくださっています。やったぜ。 Releasing Our Session Timers – builderscon…","html":"<p>元 YAPC::Asia 主催の牧さん <a href=\"https://twitter.com/lestrrat\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@lestrrat</a> によるカンファレンス <a href=\"http://builderscon.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Builderscon</a> の<a href=\"http://web.timer.builderscon.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web版セッションタイマー</a>を作りました。</p>\n<!--more-->\n<p>ちなみに、Builderscon公式ブログでも紹介してくださっています。やったぜ。</p>\n<blockquote>\n<p><span class=\"removed_link\" title=\"http://blog.builderscon.io/builderscon/2016/06/27/session-timer.html\">Releasing Our Session Timers – builderscon::blog</span></p>\n</blockquote>\n<p>タイマーの実物は<a href=\"http://web.timer.builderscon.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら</a>から試せます。</p>\n<p>画像で紹介すると、こんな感じです。<br>\n残り時間に応じて背景の色が代わり、数字を見なくてもだいたい分かるような作りになってます。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 668px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ab8bc26b94c665df1e6cb27b306f3fb0/471ef/099d91afa53de3892408d332de58ecbb.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 65.8682634730539%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'263\\'%20viewBox=\\'0%200%20400%20263\\'%20preserveAspectRatio=\\'none\\'%3e%3cpath%20d=\\'M0%20238v25h401v-51H0v26m142-2l2%203v1c-1%200-2%200-1%201%201%202%204%201%204-1s0-2%201%200c1%203%2010%203%2010%200l1-2%201%201c0%202%202%203%203%202v-2c1-2-1-4-2-3h-19\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/ab8bc26b94c665df1e6cb27b306f3fb0/5251b/099d91afa53de3892408d332de58ecbb.webp 167w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/7390e/099d91afa53de3892408d332de58ecbb.webp 334w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/7c056/099d91afa53de3892408d332de58ecbb.webp 668w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/0a92e/099d91afa53de3892408d332de58ecbb.webp 1002w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/81cb7/099d91afa53de3892408d332de58ecbb.webp 1185w\"\n              sizes=\"(max-width: 668px) 100vw, 668px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/ab8bc26b94c665df1e6cb27b306f3fb0/21521/099d91afa53de3892408d332de58ecbb.png 167w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/86d36/099d91afa53de3892408d332de58ecbb.png 334w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/74866/099d91afa53de3892408d332de58ecbb.png 668w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/d69c4/099d91afa53de3892408d332de58ecbb.png 1002w,\n/static/ab8bc26b94c665df1e6cb27b306f3fb0/471ef/099d91afa53de3892408d332de58ecbb.png 1185w\"\n            sizes=\"(max-width: 668px) 100vw, 668px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/ab8bc26b94c665df1e6cb27b306f3fb0/74866/099d91afa53de3892408d332de58ecbb.png\"\n            alt=\"スクリーンショッ\"\n            title=\"スクリーンショッ\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>実際にiPadにはめ込んでみた時の図(公式ブログから拝借)</p>\n<p>使用したものは素<a href=\"https://facebook.github.io/react/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React</a>。他にも<a href=\"http://riotjs.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Riot</a>や<a href=\"https://github.com/magnumjs/mag.js/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">MagJS</a>など色々試したかったんですが、<br>\nイベントに使用するものということで、メンテできる人が多そうな長いものに巻かれておきました。</p>\n<p>まだイベント本番へ向けて微調整が色々残ってますが、こんなのやりました報告です。<br>\nソースコードはGithubにあげているので、詳しい内容はそちらを御覧ください。</p>\n<blockquote>\n<p><a href=\"https://github.com/builderscon/session-timer\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">builderscon/session-timer</a></p>\n</blockquote>","timeToRead":1,"frontmatter":{"title":"Buildersconのセッションタイマーを作った","tags":["Builderscon"],"date":"July 06, 2016","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='183'%20viewBox='0%200%20400%20183'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2092v91h401V0H0v92m190-67l-9%206v24l9%205%2010%206%2010-6%2010-5V31l-9-6-11-5-10%205m5%206c-3%202-3%2018%200%2017l1%201c-1%201%200%201%201%202%203%201%2011-3%209-4v-1c4%200%202-5-2-8-4-2-5-3-5-5%200-4-1-4-4-2M92%2084c-13%204-20%2016-20%2033%200%2026%2020%2042%2038%2030%2018-13%2017-51-3-62-4-1-12-2-15-1m69%203c-2%204-7%208-13%209-4%200-5%201-5%202%200%202%201%202%208%202h7v49h15V84h-5c-5%200-5%200-7%203m74-3c-27%2010-24%2062%203%2067%2016%202%2029-13%2029-34%200-23-16-39-32-33m62%200c-23%207-27%2049-7%2063%2014%209%2031%202%2036-16%204-14%201-32-7-40-5-6-16-9-22-7M94%2091c-5%204-6%2011-6%2026%200%2018%204%2029%2010%2028%2010-2%2012-44%203-54-2-2-5-3-7%200m144%200c-5%205-8%2032-4%2044%203%209%208%2013%2012%208%207-8%207-45%200-52-3-3-6-2-8%200m61%200c-7%208-8%2043-1%2051%204%206%2010%202%2012-7%202-8%203-28%201-36-3-9-8-13-12-8m-104%2015c-3%203-3%206%200%209%204%204%2012%201%2012-4%200-3-4-7-7-7l-5%202m0%2034c-4%204-1%2010%205%2010%205%200%208-6%205-10s-7-4-10%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.183006535947712,"src":"/static/4d81045c0b2068f3627c81c83010b875/4b9ef/featured-image.png","srcSet":"/static/4d81045c0b2068f3627c81c83010b875/1ec58/featured-image.png 334w,\n/static/4d81045c0b2068f3627c81c83010b875/ccb4a/featured-image.png 668w,\n/static/4d81045c0b2068f3627c81c83010b875/4b9ef/featured-image.png 1093w","srcWebp":"/static/4d81045c0b2068f3627c81c83010b875/fd5ef/featured-image.webp","srcSetWebp":"/static/4d81045c0b2068f3627c81c83010b875/cd98f/featured-image.webp 334w,\n/static/4d81045c0b2068f3627c81c83010b875/7535d/featured-image.webp 668w,\n/static/4d81045c0b2068f3627c81c83010b875/fd5ef/featured-image.webp 1093w","sizes":"(max-width: 1093px) 100vw, 1093px"}}}}}},"pageContext":{"slug":"/create-session-timer-of-builderscon/","previous":{"fields":{"slug":"/learn-of-shebang/"},"frontmatter":{"title":"シバン(shebang)をやっと理解した","tags":["PHP","UNIX"]}},"next":{"fields":{"slug":"/how-to-customize-cache-settings-of-google-cloud-storage/"},"frontmatter":{"title":"Google Cloud Storageのキャッシュの設定を変更してみる","tags":null}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}