Hatena::Groupkwfsws

kiwofusiの作業ログ このページをアンテナに追加 RSSフィード

 | 

2011-11-28

第4回 フロント勉強会 きをふし

16:23 | はてなブックマーク - 第4回 フロント勉強会 きをふし - kiwofusiの作業ログ

書き足すかもしれないので発表の直前にリロードしてください。

2011-11-28 調整さん

課題

HTML5の最新機能を使ってページを作る

自分の発表まとめ

HTML5の最新機能って?

気になったやつ
  • Canvas:よく聞く
  • Local Storage:爆速Webアプリ作れそう
  • Drag & Drop:使い道が多そう
  • Web Sockets:リアルタイムっぽい何かができそう
  • Forms 2.0:スマホ向けかな?

やりたいこと

ドラッグ&ドロップやってみる

目標

<li>要素を並べ替える

調査
JS実装

HTML5じゃなくてよくね?

ブラウザの外からドラッグしてこないなら既存JSライブラリのほうがいまはらくそう。

やってみた

jQuery google api and other google hosted javascript libraries. - ScriptSrc.net

jQuery UI の Sortable を使いドラッグ&ドロップで並べ替え

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
<!--
$(function() {
    $( '#jquery-ui-sortable' ) . sortable();
    $( '#jquery-ui-sortable' ) . disableSelection();
});
// -->
</script>

<style>
<!--
#jquery-ui-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70%;
}
#jquery-ui-sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.3em;
    padding-left: 1em;
    font-size: 15px;
    font-weight: bold;
    cursor: move;
}
-->
</style>

</haed>
<body>

<ul id="jquery-ui-sortable">
    <li class="ui-state-default">項目 1</li>
    <li class="ui-state-default">項目 2</li>
    <li class="ui-state-default">項目 3</li>
    <li class="ui-state-default">項目 4</li>
    <li class="ui-state-default">項目 5</li>
    <li class="ui-state-default">項目 6</li>
    <li class="ui-state-default">項目 7</li>
</ul>

</body>
</html>

動きました。

これからやりたいこと

  • ニコ動のマイリス取ってきて並べ替えてオレオレランキングつくる
  • アウトラインエディタ的な
    • 自分のスキルセットを管理するサイトをつくりたい(身につけたこととか身につけたいことをリストで整理する)

宣伝

ゾンビ会 12月5日(月)18時~20時

明日、明後日にCode School祭をやるかも。(僕が黙々とCodeSchoolをやる会。一部実況プレイ可能。なにかしらツイートします)

 |