HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
nodejsでjQueryスクレイピング - エウレカ技術部
node社内ネットウォッチャーの @mizchi です。今日はnode.jsでスクレイピングします。 一般的に言うスクレイピングとは、HTMLから自分がほしい箇所だけ抜き出すことです。それを自動更新でブン回して差分を確認したり、グラフにしたりするわけです。 node.jsでスクレイピングすると何が嬉しいんでしょうか？ それはベースがjavascriptだから、みんなが大好きなjQueryが使える！ってこと ライブラリのインストール今回使うのは、request、jsdom。 URLをリクエストするrequest、htmlをブラウザと同じDOMエレメントのように扱えるjsdomという役回りです。 npm install request npm install jsdom jsdomでjQueryを読み込んで、そのjQuery化されたオブジェクトを返します。 実行指定したURLのjQueryオ
少しのコードで実装可能な15のスマートフォンサイト用小技集
少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ
iPhone Memo » 画面読込時にアドレスバーを隠す
iPhoneサイト作成のTipsを備忘録としてメモしておきます。サイトを表示させる際に、自動でアドレスバーを隠します。 ＜使用しているTIPS＞ ・読込み時にアドレスバー分スクロール。 ・bodyの高さを最低416pxに指定する。 ・画面の縦横が変わった場合の対応 （再度アドレスバーを隠す・文字サイズ固定） ●アドレスバーをスクロールさせるScript <script type=”text/javascript”> function hideAdBar(){ setTimeout(“scrollTo(0,1)”, 100); } </script>
Aptana Studio IDE Dark Color Theme « NightLion
Aptana Studio is currently my IDE of choice. It’s fast, flexible and built on Eclipse. Using it day in and day out, I’ve decided to create a custom, light on dark color theme. Supported Aptana Editors Custom color themes have been created for all of the current Aptana Studio editors, including: CSS HTML Javascript jSON PHP PHP Doc PHP Smarty PHP Smarty Config ScriptDoc XML Sample Screens [View wit
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
ふだんのJavaScript開発環境 (Community Open Day 2012)
PowerPointのファイル: http://sdrv.ms/JV2DbO
JSONをparseする - はてなダイアリー大好き日記
適当にJSON.parse(hoge)とやると、 たまに変なのが返ったときに undefined:1 ^^ SyntaxError: Unexpected token ILLEGAL とでるので、やむを得ず使っている変換コード var parse = function(body){ if(typeof body == 'string'){ try { return JSON.parse(body); } catch(e) { return {}; } } else { return body; } };
require('events').EventEmitter.call(this) の意味 - Block Rockin’ Codes
[修正] コメントで指摘されたように、回答4の訳が間違っていたので訂正しました。 Node の ML に以下のような質問が投稿されました。 What is the meaning of require('events').EventEmitter.call(this) 内容としては。 「以下のようなコードがあったんだけど、これってどういう意味？」 var util = require("util"); var events = require("events"); function MyStream() { // ここの意味がよくわからん、これは `new MyStream` と同じに見えるんだけど違うの？ events.EventEmitter.call(this); } util.inherits(MyStream, events.EventEmitter); var steam =
Node書くならEventEmitterについて知っとくべし - Qiita
Nodeの組み込みモジュール・サードパーティモジュール問わず広く使われるのが EventEmitter オブジェクト。 これはNodeで使われるデザインパターンの筆頭みたいなものなので、知っておかねばならない。 ドキュメント: Events ブラウザ上のJavaScriptで addEventListener を使ってイベントドリブンの開発を行うが、Node上でそれを行うのための機能を提供するのが EventEmitter。 例えば次のように使う var EventEmitter = require('events').EventEmitter; function asyncFunc() { var ev = new EventEmitter; console.log('in asyncFunc'); setTimeout(function () { ev.emit('done', 'fo
MVC Framework for Node — Matador
An Obvious MVC Framework for Node.js About Sane defaults and a simple structure, scaling as your application grows. Matador is a clean, organized framework for Node.js architected to suit MVC enthusiasts. It gives you a well-defined development environment with flexible routing, easy controller mappings, and basic request filtering. It’s built on open source libraries such as Hogan.js for view ren
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
Node.js + Express + OAuth で Tumblr にログインする | wd.layer13.com
Tumblr使ってます。ついつい無心でリブログしてます。API も v2 が出たことだし、自作の Tumblr ダッシュボードビューワーを作りなおそうかなーっと、ぼちぼちいじっています。あとで見返してわからなくなりそうなので、メモメモ。 まずは、Tumblr APIをざーっと流し読みです。 最初の目標は OAuth でログインできることと、dashboard のデータを取得すること、にします。http://localhost:3000/callback にアクセスすると、Tumblr の認証画面に飛び、その画面で "Allow" を押すと認証ができる。認証後に http://localhost:3000/dashb/fetch にアクセスすると、ダッシュボードの JSON が取得できる。という、本当に、OAuth でログインして、一つ情報をとってみましょう〜 という簡単なものです。Tumb
Twitter社のOBがつくったnode.js用のMVCフレームワーク「Matador」のインストール
[sudo] npm install matador -g これでmatadorのインストールは完了です。確認のためmatadorコマンドが何処に入ったか見てみます。 $ which matador /usr/local/bin/matador Matadorを使ったプロジェクトの作成 matadorコマンドを使って、プロジェクトのスケルトンを作成します。 ここでは、~/codes/nodeディレクトリ以下にmatador1という名前のプロジェクトを作成してみます。 foo:~ $ cd codes/node/ foo:~/codes/node $ matador init matador1 installing Matador into matador1 Success! foo:~/codes/node $ ls -l matador1/ total 8 drwxr-xr-x 6 fo
Twitter生まれの軽量なMVCフレームワーク「Matador」を試してみた
Matadorは、TwitterのOBが開発したNode.jsのMVCフレームワークです。ExpressにMVCの手法を取り入れたような、シンプルで軽量なフレームワークになっています。 インストールからアプリの雛形作成、起動まで。 $ npm install -g matador $ npm init sample $ cd sample $ npm install $ node server.js matador running on port 3000 と、まあ、ここまでは簡単です。 少し構造を見てみます。 依存パッケージ $ npm ls /Users/inouetomoyuki/Dropbox/Projects/node/sample └─┬ matador@1.0.11-beta ├── colors@0.6.0-1 ├─┬ express@2.5.8 │ ├─┬ connect
JavaScriptのMVCフレームワークと仲間たち ｜ Classmethod.dev()
JavaScriptのMVCフレームワークと仲間たち JavaScriptでイイ感じに開発をしたいという欲求が高まってきたため、自分でフレームワークを作らずに世界の賢者たちから学びたいと思います。今回は、JavaScriptでMVCフレームワーク等を実現しているフレームワークや周辺のライブラリ、さらにはツールやユーティリティまで幅広くご紹介します。 (2012/1/17 updated) Backbone.js Spine.js JavaScriptMVC AngularJS SproutCore Ember.js YUI App Framework Broke.js Fidel.js Sammy.js KnockoutJS eyeballs.js The M Project Knockback Batman.js Shipyard.js Agility.js ベース jQuery Doj
Backbone.js -JavaScriptのMVCフレームワーク- | DevelopersIO
Backbone.jsとは？ Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事
2012年に使いたいJavaScriptのMVCフレームワーク14選 - memo.yomukaku.net
1億総スマホが近づいたこの頃に、JavaScriptのMVCフレームワークに何を使うか？ node.jsと使ってみたいウェブアプリのフレームワークの候補を14選んでみました。 MVCフレームワークといっても、純粋なMVCだけではなく、MVVM、MVC2、MVPなど広義のMVCフレームワークを含みます。成熟したフレームワーク backbone.jsのように一定の歴史のあるものや、express.jsのようにnode.jsでのデファクト・スタンダードになっているようなものを含め、今すぐプロダクション環境で使用できる成熟度があると思われるフレームワークをまとめます。 Backbone.js http://documentcloud.github.com/backbone/ 古参のフロントエンド向けMVCフレームワーク。 node.jsに限らず、Rails等のフレームワークでもフロントエンド側の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Node in Nodes
iPhone ＆ iPad用のWebサイト・シミュレーター「Electric Mobile Simulator for Windows」
