様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード <script type='text/javascrip
Pinterestっぽいレイアウトを作ってみる - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 以前、レンガ風に要素を配列するレイ アウトを凄くよく見かけるようになり、 それから一種のブームのように様々な リソースが出回りました。最近はあま り見かけなかったのですが、Pinterest の登場で、また似たようなレイアウト のリソースが出てきている印象です。 Pinterestのように時系列を崩さず、ボックスを配置するスクリプトにjquery masonryっていうプラグインがあるのですが、同じようなプラグインでWookmark-jQueryというのを昨日見かけましたので、空いた時間になんとなくPinterestっぽいレイアウトを作ってみる事にしてみました。 Sample ソース調べるほど真面目な記事でもないので見た目を勘に頼って似せただけ。 ※あくまで「っぽい
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。 CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。 ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。 以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。 Sample ※responsivepxで簡単に確認出来ます。
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
「第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表」に行って来ました - 強火で進め
【即日満員／増員400名】第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表 : ATND http://atnd.org/events/25251 ソーシャル時代に見るWeb系エンジニア生き残り戦略 - mochrom クロカワ リュートさん なぜ戦略が必要なのか ターゲットユーザを明確にし ターゲットユーザーに響く方法で告知をし 長く愛されるサービス/アプリを目指す 集客の方法・事例 「MacBook Airは中華包丁としてつかえるのか。」 「これ、中華包丁みたいだ。」から始まった 関連動画も含めた総再生数は100万再生超 国内ではGIZMODO JAPAN、デイリーポータルZ、ねとらぼ、秒刊サンデー。海外ではGIZMODO、CNN、Yahoo!香港、ディスカバリーチャンネルなどで取り上げられた 気をつけている事 ティザーは打たない
テスト駆動JavaScriptの第2章をメモ - あおうさ＠日記
Node塾 講義その６に行くのでメモった Node塾で下記の読書会をする。 テスト駆動JavaScript 作者: Christian Johansen,長尾高弘出版社/メーカー: アスキー・メディアワークス発売日: 2011/11/25メディア: 大型本購入: 19人 クリック: 331回この商品を含むブログを見る Node塾 http://partake.in/events/5890aef3-7449-4ccb-a059-68faf9ce3af1 以下は第2章を抜粋したメモ。これを読んで頂ければわかるがテスト駆動JavaScriptはJavaScriptでTDDをするにはどうすればいいかだけに答えるものではなく、TDD未経験者でもTDDとは何なのか？どうやってTDDを身に付けるのかを記載した本になっている。興味があれば買うといいよ。そしてNode塾に参加すればいいと思いますよ。 第２章
Post by @hamalog
それ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、
Post by @hamalog
このサンプルでは、一個クリックすると他のがactiveじゃなくなる。作ったViewのインスタンスを、Managerにぴょこぴょこ追加し、追加されたviewらをまとめてアクティブにしたりしなかったりするようなことをやるだけのクラスを作る。 # ============================================ # Abstract things # ============================================ class Manager _.extend @::, Backbone.Events add: (item) -> @items ?= [] @items.push item deactivateAll: -> _.each @items, (item) -> item.deactivate() @trigger 'deactivat
Post by @hamalog
# Template manager # //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck deck = $.TmplDeck 'templates.html' # ============================================ # API wrapper # ============================================ api = getTweets: (query) -> $.Deferred (defer) -> $.ajax url: 'http://search.twitter.com/search.json' dataType: 'jsonp' data: result_type: 'recent' rpp: 10 page: 1 q: query .pipe (re
クックパッドのレシピで分量を自由に変更できるブックマークレット - P A R A G R A P H S
Cookpad Recipe Scalable - Hatena::Let 最近よくクックパッドのレシピを見て料理を作っているんだけど、作りたい分量が合わないとき頭で分量を計算しなおすのが面倒くさいので作りました。 ブックマークレットを起動すると「操作」エリアが追加され、テキストエリアに数字を入れて「倍」ボタンを押すと分量を変更してくれます。あと、おまけで「ヘルシーに」を押すと肉と油を減らしたり「うまそうに」を押すとその逆をやってくれたりする機能もつけてみました。 豚汁 100 人分とか巨大なケーキの分量を知ることができて便利だと思う (もちろん 0.5 とか入力して 4 人分を 2 人分に減らすこともできる)。ただ、レシピ掲載者のひとたちの表記ゆれを全部カバーできている自信が全然なくてうまく動かないことが多いかもです。 (サンプル画像としてプロの味！の豚汁 by Fumiaを使わせていた
フルAjaxで動くRailsアプリを作ってみたよ。 | Ginpen.com
scaffoldを使うとCRUDが揃った「土台」を一発で作れるわけですが、それをアレコレして全ての操作をAjax化してみたので、手順をまとめました。 記事を読むのがだりぃって方はソースコードをGitHubで公開してるので、そちらをご覧ください。 RubyもRailsもあんまり触った事がないので、識者によるツッコミ歓迎します。 (｀・ω・´) 概要 やること indexの画面だけでCRUD、つまり新規作成 (Create)、表示 (Read)、編集 (Update)、削除 (Delete)を行えるよう、scaffoldで作成したファイルをいじります。 結論 form_for()にremote: trueを与えるだけで、とりあえずAjax化します。あとはサーバー側のレスポンスの内容を整えて、クライアント側で適切に処理してやればOKです。 作業 下準備（scaffoldとか） indexに編集フ
JavaScript おれおれ Advent Calendar 2011やります。ひとりで。 | Ginpen.com
はい、やります。ひとりで。 JavaScript Advent Calendar 2011というのもあるんですが、すげー人ばっかで怖いし語れる程の技量（JSについても文章についても）がないので、ひとりで小ネタを24日連続で挙げてみようかなと思います。 ちなみにクリスマスリースの画像はソザイングの素材を使用しています。 一覧 1日目 めっちゃスマートなゼロフィル 2日目 カリー化を駆使して空も飛べるはず 3日目 記号じゃない演算子 4日目 parseInt()の甘い罠 5日目 基数変換ボンバイエ 6日目 2文字で何でも整数にするコード 7日目 実数を整数に丸める4パターン 8日目 カラーコードを素敵に扱うビット演算 9日目 任意の倍数に丸める 10日目 配列の .lengthは代入できる 11日目 5種類の .length 12日目 JavaScriptで123.toString()はエラー
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
JavaScriptでオブジェクト志向的に、MVC的に書く - 憧れ駆動開発
完全に手続き的に書くというより、すこしMVCというかMVVC的な構造に切り分けてかいたらいいのではという内容。チラ裏に移動させた
Sinatra ライクな JavaScript フレームワーク『Sammy.js』 - present
はじめに 前に「Knockout.js は画面を切り替える手段を提供していない」っていうことをブログに書いたら id:iakio tutorialの中にはsammy.jsと連携してブラウザの履歴を使う例がありますね http://learn.knockoutjs.com/#/?tutorial=webmail っていうブクマコメントがありました。 Sammy って何？ Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript location.hash を使ったルーティング機能を提供する、Sinatra ライクな JavaScript フレームワークとのこと。 README に書かれているサンプルコードがこちら。 $.sammy(function() { this.get('#/', function(
「JavaScriptグラフィックス――ゲーム・スマートフォン・ウェブで使う最新テクニック」 - 強火で進め
3月16日発売予定みたいです。 自分としては以下の辺りが書かれてるが良いなと思いました。 ExtJSを用いた強力なUI CanvasとSVGの比較 CanvasとFlashの違い CanvasとWebSocketを使ったグラフィカルなチャットアプリ ベクトル計算 大砲シミュレーション 衝突処理 PhoneGapの使い方 JavaScriptグラフィックス ―ゲーム・スマートフォン・ウェブで使う最新テクニック 作者: Raffaele Cecco,相川愛三出版社/メーカー: オライリージャパン発売日: 2012/03/16メディア: 大型本購入: 5人 クリック: 341回この商品を含むブログ (9件) を見る 目次 1章 コードの再利用と最適化 1.1 高速化 1.2 何をいつ最適化するか 1.3 自家製コードプロファイリング 1.4 JavaScriptの最適化 1.4.1 ルックアップ
デブサミ2012で大規模JS開発について発表してきました - yo_waka's blog
「Developers Summit 2012 - 10年後も世界で通じるエンジニアであるために」で発表してきました。 デブサミ2012 kintoneの表と裏 - 表編 View more presentations from yo_waka イマドキのJSの話とかではなくて、UIをJSで作る際の設計ノウハウみたいな話にしたので、つまらなかったら申し訳ないなと思ってたのだけど、終わったあとも何人か質問しにきてくれた方がいたのでホッとしました。 10年後も・・というテーマとして、激しく進化するJSの最新動向に左右されず使えるネタを選んだつもりではあります。 普段からJSでもパフォーマンス意識して設計してる方には当たり前のことばかりだったかも。 jQueryは甘えってのは書いてみたかっただけですすいません。。 けど、適材適所というかSinatraで100画面近くあるようなWebアプリは作らな
JavaScriptをやり始めた人が理解したほうが良いJSONパーサのコード - sifue's blog
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chikathreesix.com - このウェブサイトは販売用です！ - chikathreesix リソースおよび情報
はじめてのjQuery