Smart Canvasで動くクリスマスカードを作ろう!
-
Upload
shun-nagao -
Category
Design
-
view
5.177 -
download
3
description
Transcript of Smart Canvasで動くクリスマスカードを作ろう!
![Page 1: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/1.jpg)
2013年12月
株式会社ヒトクセ
取締役: 長尾 俊
Copyright © 2013 / HITOKUSE Inc.
プログラミング無しで動くクリスマスカードを作ろう!
presented by
![Page 2: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/2.jpg)
長尾 俊
株式会社ヒトクセ 取締役 CTOアントレプレナー / エンジニア / リサーチャー / ライター
東京大学大学院情報理工学系研究科卒業未踏IT人材発掘プロジェクト採択SIGGRAPH Posters 採択SIGGRAPH ASIA E-tech 採択KDDI ムゲンラボ ベストエンジニア賞
主な実績・略歴スタンフォード大学 ハッカソン優勝GREE Idea Jam 準優勝TechTokyo 受賞多数TriHack ハッカソン優勝オールアバウトライター
趣味ヘヴィメタル、ブレイクダンス、旅行、アート、エレキギター
自己紹介
![Page 3: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/3.jpg)
スマフォWebサイトでアニメーションを作ってみませんか?
![Page 4: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/4.jpg)
PCサイトでの事例
PCではFlashコンテンツがとても多い
![Page 5: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/5.jpg)
スマートフォンのWebアニメーション
スマフォではほとんど非対応!!
![Page 6: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/6.jpg)
![Page 7: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/7.jpg)
HTML5リッチコンテンツ
どんなところに使われているのか?
オンラインゲームリッチ広告 キャンペーンサイト
![Page 8: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/8.jpg)
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
![Page 9: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/9.jpg)
Smart Canvasについてプログラミングをすることなく、HTML5の動的なコンテンツを制作することができるツール(無料、ヒトクセ提供)
(現在β版公開中:http://smartcanvas.net)
ツール画面 出力コンテンツ
![Page 10: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/10.jpg)
プログラミング無しで動くクリスマスカードを作ろう!
・好きな人へのメッセージとして使える!・ポートフォリオとして使える!・簡単に友達に送れる!
![Page 11: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/11.jpg)
まずは登録
①ブラウザでhttp://smartcanvas.netにアクセス※是非「いいね」してください
②会員登録
![Page 12: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/12.jpg)
新規作成
①マイページの「新規作成」ボタンを押して、新しいアプリを作る
![Page 13: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/13.jpg)
Copyright © 2013 / HITOKUSE Inc
アイテムの配置
① 基本アイテムを選択② 基本アイテムをドラッグ&ドロップ
ドラッグ&ドロップ
![Page 14: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/14.jpg)
プロパティの設定
① 位置・サイズを調節します
![Page 15: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/15.jpg)
他の要素の設定
背景色 文字色
透明度
![Page 16: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/16.jpg)
アニメーションの設定
① アニメーションタブを選択② アニメーション作成ボタンを押す
![Page 17: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/17.jpg)
アニメーションの設定
アニメーション
条件 起動タップ
対象
変化値 x,y座標透明度・角度
変化量
![Page 18: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/18.jpg)
アニメーションの設定 具体例
アニメーション
条件アイテム1をタップ
対象
変化値
x座標を90px
アイテム1
![Page 19: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/19.jpg)
プレビュー
プレビューを選択
![Page 20: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/20.jpg)
プレビュー確認
タップ(クリック)
アニメーション!
![Page 21: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/21.jpg)
画像のアップロード
選択
![Page 22: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/22.jpg)
ページの追加
ページ追加を選択
![Page 23: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/23.jpg)
ページの追加
ページの追加を確認
![Page 24: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/24.jpg)
アイテムにページのリンクを貼る
アイテムにリンクが張られている状態
![Page 25: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/25.jpg)
リンクの確認
プレビューを選択
![Page 26: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/26.jpg)
リンクの確認
タップ(クリック)
ページ遷移
I love you !
![Page 27: Smart Canvasで動くクリスマスカードを作ろう!](https://reader034.fdocuments.net/reader034/viewer/2022052622/559634c51a28abbd068b45ac/html5/thumbnails/27.jpg)
作品例http://appdata.smartcanvas.net/?user=8&app=1814