Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal - かちびと.netこの記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
JavaScriptのライブラリを沢山集めてカタログ化しているWebサイト・Jster - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。（気がするだけかも 困ったら覗いてみようと思います。 Jster
new msgpack.js with ArrayBuffer - latest log
リクエストを頂いたので、 ArrayBuffer を使った msgpack.js を書きました。 とりあえずコードを書いた段階で、識者の意見を取り入れて I/F の改善や、妥当性のチェックとテストケースの作成、ベンチマークなどはこれからの作業になります。 https://gist.github.com/4106426 MobileSafari と Android 4.0 での DataView のサポート具合が良くわからなかったので、ArrayBuffer + Uint8Array だけで実装しています。 // encode a = msgpack.pack({ a: [1,2,3, { b: 4, c: "hoge" }, "abc"] }); // -> [129, 161, 97, 149, 1, 2, 3, 130, 161, // 98, 4, 161, 99, 164, 104
CoffeeScriptでjQuery使うときのメモ
CoffeeScriptでjQuery使うときのメモ CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 投稿日2012年11月19日 更新日2012年12月24日 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p')
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
小さなツールだけど便利。Photoshopを自動操作するJavaScript集·Photoshop Javascript Tools MOONGIFT
Photoshop Javascript ToolsはPhotoshopの自動操作を行うためのJavaScriptライブラリ集です。 知らなかったのですが、Photoshopの自動操作を行うスクリプトはJavaScriptで記述可能です。今回はそのためのツール集とも言えるPhotoshop Javascript Toolsを紹介します。 インストールします。PhotoshopのScriptsディレクトリ内にコピーします。 スクリプトメニューに取り込まれました。 一例です。ガイド作成します。 こんな感じにラインが引かれました。 エラーを見るとJavaScriptっぽいのが分かります。 主な機能は二つで、ガイドラインを引くライブラリとフォント名を表示したり変更できるライブラリになります。また、その他プログレスバーのUIやカレンダーを作成する、JPEGへのエクスポートを行うライブラリなど小さなツ
[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl
Stairway Hover Nav
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
最近のJavaScriptのテンプレ - Qiita
最近下のように書いてる。変遷としては、若干サーバーサイドJavaScriptを意識しつつ徐々に離れていった感じ。 即時関数を2重にして、トップには何も書かない 外側の即時関数の中には、'use strict'を書く 非strictモードのコードが含まれているとどっちのモードになるかわからないため。負の遺産が含まれ(ry だいたいjQuery使うので、外側の即時関数の書き方はjQuery boilerplateのを参考にしている(jQuery使わない場合は、第二引数を抜かす) 内側の即時関数に実際の宣言を書く app.jsか何か設定用のスクリプトでアプリケーション用名前空間としてグローバルオブジェクトを宣言しておく(window.App = {};など) 即時関数内で宣言されたプロパティやメソッド、関数などを返り値にして、グローバルオブジェクトに展開する /** * functions.js
典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
一口にJSerといっても、色々な分野の人がいます。あなたはどんなJSerになりたいですか？ 方向性により学ぶべき事も変わってきます。目標を明確にしましょう。 というわけで、独断と偏見……というか主に偏見で三種類にまとめてみました。 追記: 「勉強法」とかタイトルに付けておきながら勉強法に触れてませんでしたので「勉強範囲」に修正しました。ひー。 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flasherさんがシフトしてくる位置。 発注側が想定するJavaScripter。最近の携帯ゲームで需要がある。 お仕事 JSだけでなくCSSや画像を駆使して画面を描く。 UIだけならいなくても困る事はないけれど、UXま
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
「ユーザー志向」のスマートフォン向けUI/UXの作り方
近年、Webおよびアプリケーションの制作においてUI/UXという言葉が広く意識されるようになってきましたが、具体的にどのように取り組めばよいのでしょうか。本稿では、実際に運用しているスマートフォン向けソーシャルゲームを題材に、ユーザーにとって本当に「使いやすい」UI/UXデザインを行うポイントをいくつか紹介します。 はじめに 近年、Webおよびアプリケーションの制作においてUI（ユーザー・インターフェース）・UX（ユーザー・エクスペリエンス）という言葉をデザイナーだけではなく、企画者やエンジニアも使用し、意識するようになりました。中でもPCよりも画面サイズや通信スピードが劣るスマートフォンでは、UI/UXの必要性は高まり続けています。 ではスマートフォン向けソーシャルゲームにおける良いUI/UXとはどのようなものでしょうか。ボタンサイズや位置、タップ領域の大きさ、画像容量など、スムーズに操
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
レスポンシブ ウェブ デザイン 提案の提案 World of granshe.
HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。 レスポンシブウェブデザインとかスマートフォン系の記事を書くときにどこのカテゴリに書くか迷ってしまい、そろそろブログのカテゴリ分けの限界を感じてきました。 というか、早くブログを独自ドメインのサーバに移行したい･･･！ ということでさっそく本題ですが、 最近、レスポンシブウェブデザイン（以下、RWDと表記）の案件を2つほどやってみて、思うところがあったので書いてみました。今回は技術的なところというよりも、提案というか、案件の取り方というか、案件の流れについて書きたいと思います。 思いのほか長くなってしまいました･･･。 きっかけ 自分が関わった2つの案件のうち、一つは1ページもののキャンペーンサイト、もう一つは既存のデザインを変えずRWDにするという
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ccchart
in the looop | Looops communications
