Smart Canvasで動くクリスマスカードを作ろう！
•
3 likes•6,583 views
HTML5のコンテンツが簡単に作れるツールSmart Canvasを使って動くWebのクリスマスカードを作ろう！
More Related Content
What's hot
What's hot (19)
Similar to Smart Canvasで動くクリスマスカードを作ろう！
Similar to Smart Canvasで動くクリスマスカードを作ろう！ (20)
Smart Canvasで動くクリスマスカードを作ろう！
- 1. プログラミング無しで 動くクリスマスカードを作ろう！ presented by 2013年12月 株式会社ヒトクセ 取締役: 長尾 俊 Copyright © 2013 / HITOKUSE Inc.
- 2. 自己紹介 長尾 俊 株式会社ヒトクセ 取締役 CTO アントレプレナー / エンジニア / リサーチャー / ライター 主な実績・略歴 東京大学大学院情報理工学系研究科卒業 未踏IT人材発掘プロジェクト採択 SIGGRAPH Posters 採択 SIGGRAPH ASIA E-tech 採択 KDDI ムゲンラボ ベストエンジニア賞 スタンフォード大学 ハッカソン優勝 GREE Idea Jam 準優勝 TechTokyo 受賞多数 TriHack ハッカソン優勝 オールアバウトライター 趣味 ヘヴィメタル、ブレイクダンス、旅行、アート、エレキギター
- 8. HTML5コンテンツを作ってみよう HTML <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>スケジュール詳細</title> </head> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cambo"> <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.3.css"> <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"> <body id="page-main"> <header> <h1 class="logo"><a href="#">焼肉部</a></h1> <a href="#" class="reload"><i class="icon-reload"></i></a> <a href="#" class="information"><i class="icon-information"></i>ここにインフォメー ションを表示</a> </header> <div class="container"> <section class="pair"> <dl class="pair-member"> <dt>現在のペア</dt> <dd><a href="#"><img src="img/temp/pht1_1.jpg" class="pht-small"></a><a href="#"><img src="img/temp/pht2_1.jpg" class="pht-small"></a></dd> </dl> <a href="#" class="btn yellow w-small">ペアの変更・追加</a> </section> <section class="offer line-bottom"> <div class="formed-member mb20"> <ul> <li><a href="#"><img src="img/temp/ pht5_3.jpg" class="pht-middle"></a></li> <li><a href="#"><img src="img/temp/ pht6_3.jpg" class="pht-middle"></a></li> </ul> <div class="formed-multi"><i class="icon-multi"></i></div> <ul> <li><a href="#"><img src="img/temp/ pht1_3.jpg" class="pht-middle"></a></li> <li><a href="#"><img src="img/temp/ pht2_3.jpg" class="pht-middle"></a></li> </ul> </div> <h2 class="hdl2 mt15">日程を入力し、日程追加をタップして登録し てください。</h2> <form> <input type="text" class="w-middle mt20 mb20 datepicker" placeholder="例）2013年12月12日 19:00∼"> <input type="submit" value="日程を新規追加" class="btn yellow w-middle mb20"> </form> </section> <section class="chat"> <h2 class="hdl2 mt20 mb20">みんなで焼肉会の日程について話しま しょう。</h2> CSS #top_page{ width: 100%; background-color: $bg-main-color; text-align: center; #top_footer { background-color: #FFF; padding-bottom: 10px; @media #{$media-small}{ display: none; } .explain { border-bottom: 4px solid $main-color; padding: 40px 10% 20px 10%; h2 { text-align: left; margin-bottom: 5px; } p{ width: 90%; text-align: left; } } .explain_headline { border-bottom: 4px solid $main-color; } h1 { position: relative; top: 18px; left: 10%; background-color: #FFF; font-size: 20px; width: 450px; } #footer_menu { border-top: 2px solid #999; margin: auto; margin-top: 30px; padding: 10px 0; ul { width: 80%; margin: auto; } li { width: 18%; float: left; font-size: 14px; border-right: 1px solid #999; } li.privacy{ width: 25%; float: left; font-size: 14px; border-right: 1px solid #999; } li.last { border: none; } } } } JavaScript ;(function($) { $.fn.registrecentapp = function() { var situation=0; $('#play,.icon-small').live('click', function(){ if(localStorage.getItem("deletemenuon")==0){ var tmpappdata = $(this).data('app'); var tmpapptype = $(this).data('type'); var app = JSON.parse(localStorage.getItem("myapp")); var tmpapparray=new Array(); $.ajax({ type: 'POST', url: '/countvisits?id='+tmpappdata.id, cache: true, dataType: 'json', }); var count=0; if(localStorage.getItem("myapp")){ if(app.recent){ tmpapparray = app.recent; console.log(tmpapparray); for(i=0;i<tmpapparray.length;i++){ if(tmpapparray[i].id==tmpappdata.id){count=1;console.log("yes");} } } } if(count==0){ tmpapparray.unshift(tmpappdata); if(tmpapparray.length>12){tmpapparray.pop();} if(localStorage.getItem("myapp")){ app["recent"]=tmpapparray; localStorage.setItem("myapp", JSON.stringify(app)); }else{ app=new Object; app["recent"]=tmpapparray; localStorage.setItem("myapp", JSON.stringify(app)); } } //パッケージの名前情報登録 if(localStorage.getItem("packname")){ var packarray=[]; packarray=JSON.parse(localStorage.getItem("packname")); var tmpappdata = {"name":"recent","title":"最近使ったアプリ"}; }else{ } packarray.push(tmpappdata); localStorage.setItem("packname", JSON.stringify(packarray)); var packarray=[]; packarray[0] = {"name":"recent","title":"最近使ったアプリ"}; localStorage.setItem("packname", JSON.stringify(packarray));
- 13. アイテムの配置 ① 基本アイテムを選択 ② 基本アイテムをドラッグ&ドロップ ドラッグ&ドロップ Copyright © 2013 / HITOKUSE Inc
- 19. プレビュー プレビューを選択
- 21. 画像のアップロード 選択
- 22. ページの追加 ページ追加を選択
- 23. ページの追加 ページの追加を確認
- 25. リンクの確認 プレビューを選択