smart canvasで動くクリスマスカードを作ろう！
DESCRIPTION
HTML5のコンテンツが簡単に作れるツールSmart Canvasを使って動くWebのクリスマスカードを作ろう！TRANSCRIPT
2013年12月
株式会社ヒトクセ
取締役: 長尾 俊
Copyright © 2013 / HITOKUSE Inc.
プログラミング無しで動くクリスマスカードを作ろう！
presented by
長尾 俊
株式会社ヒトクセ 取締役 CTOアントレプレナー / エンジニア / リサーチャー / ライター
東京大学大学院情報理工学系研究科卒業未踏IT人材発掘プロジェクト採択SIGGRAPH Posters 採択SIGGRAPH ASIA E-tech 採択KDDI ムゲンラボ ベストエンジニア賞
主な実績・略歴スタンフォード大学 ハッカソン優勝GREE Idea Jam 準優勝TechTokyo 受賞多数TriHack ハッカソン優勝オールアバウトライター
趣味ヘヴィメタル、ブレイクダンス、旅行、アート、エレキギター
自己紹介
スマフォWebサイトでアニメーションを作ってみませんか？
PCサイトでの事例
PCではFlashコンテンツがとても多い
スマートフォンのWebアニメーション
スマフォではほとんど非対応！！
HTML5リッチコンテンツ
どんなところに使われているのか？
オンラインゲームリッチ広告 キャンペーンサイト
HTML5コンテンツを作ってみよう
#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; } } } }
<!doctype html><html lang="ja"><head> <meta charset="utf-8"> <title>スケジュール詳細</title>
<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"></head>
<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>
;(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":"最近使ったアプリ"};
packarray.push(tmpappdata); localStorage.setItem("packname", JSON.stringify(packarray)); }else{ var packarray=[]; packarray[0] = {"name":"recent","title":"最近使ったアプリ"};
localStorage.setItem("packname", JSON.stringify(packarray)); }
HTML CSS JavaScript
Smart Canvasについてプログラミングをすることなく、HTML5の動的なコンテンツを制作することができるツール（無料、ヒトクセ提供）
（現在β版公開中：http://smartcanvas.net）
ツール画面 出力コンテンツ
プログラミング無しで動くクリスマスカードを作ろう！
・好きな人へのメッセージとして使える！・ポートフォリオとして使える！・簡単に友達に送れる！
まずは登録
①ブラウザでhttp://smartcanvas.netにアクセス※是非「いいね」してください
②会員登録
新規作成
①マイページの「新規作成」ボタンを押して、新しいアプリを作る
Copyright © 2013 / HITOKUSE Inc
アイテムの配置
① 基本アイテムを選択② 基本アイテムをドラッグ&ドロップ
ドラッグ&ドロップ
プロパティの設定
① 位置・サイズを調節します
他の要素の設定
背景色 文字色
透明度
アニメーションの設定
① アニメーションタブを選択② アニメーション作成ボタンを押す
アニメーションの設定
アニメーション
条件 起動タップ
対象
変化値 x,y座標透明度・角度
変化量
アニメーションの設定 具体例
アニメーション
条件アイテム1をタップ
対象
変化値
x座標を90px
アイテム1
プレビュー
プレビューを選択
プレビュー確認
タップ(クリック)
アニメーション!
画像のアップロード
選択
ページの追加
ページ追加を選択
ページの追加
ページの追加を確認
アイテムにページのリンクを貼る
アイテムにリンクが張られている状態
リンクの確認
プレビューを選択
リンクの確認
タップ(クリック)
ページ遷移
I love you !
作品例http://appdata.smartcanvas.net/?user=8&app=1814