タッチデバイスに適したMetro UIのスタイルを使ったTwitter Bootstrapベースのフレームワーク -BootMetro
…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ!面白いものつくろうぜ! ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方もそうでない方も、ぜひ触ってみてください。 iOSプログラマへ。HTML5 Canvasがおもしろい! from cocopon 練習用の「HTML5 Canvas スターターキット」はこちらから。 マウス・タッチイベント両対応のInputManagerが付属していますので、ぜひご活用ください :) CanvasStarterKit_100.zip
ReView. The Responsive Viewport. レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」。 viewportを設定してサイトの幅を調整し、レスポンシブなレイアウトをスマホでON/OFFできます。 PC版にスイッチできるサイトが多い中、単にレスポンシブで作ったはいいけどPC版にスイッチする機能も作らなきゃという時に使ってみてもよいかも。 こうしてJavaScriptで出来るのは本当に便利ですね。 セッション中は設定は保存されるため、リロードしてもそのままです。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル 使えそうなレスポンシブ対応のWordPressテーマ30 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」
はじめてのau版iPhone、いろいろと良くわからず苦戦してます。ぁのんびりひとつづつクリアしていこうと思っていますが、せっかくなので自分の備忘録を兼ねて設定したこととか記事にしておこうと思います。まず最初はau IDの取得について。 詳しくは続きをどうぞ。 au IDとはauのいろいろな関連サービスを利用するのに必要となるIDみたいですね。 とりあえずauユーザーになったなら取得しておくにこしたことはなさそうです。もともとauの方は不要かもですが、MNPした方は最初に手続きしておきましょう。 設定方法Safariを起動してブックマークから「auお客さまサポート」を選択。 開いたページの中にある「iPhone設定ガイド」をタップ。 「カンタン初期設定はこちら」をタップして、メニューの中から「au ID」を選択。 「今すぐ設定する」をタップ。 iPhoneの電話番号と契約時に設定した暗証番号
インベーダーゲームは、画面の上部から迫ってくる多数の敵キャラクター(インベーダー)を打ち倒すゲームです。敵を全滅させるとゲームクリアになり、逆に、敵が画面下まで到達するか、自機が撃たれるとゲームオーバーになります。インベーダーゲームの成功を受けて、ナムコの「ギャラクシアン」「ギャラガ」「ギャプラス」など、インベーダーゲームをベースにしたゲームが数多く登場しました。インベーダーゲームの成功により、今日のゲームの基礎が築かれたといってもよいかもしれません。 今回のJavaScriptラボは、前回に引き続き「enchant.js」を使って、インベーダータイプのゲームを作ります。インベーダーと同じように最初にすべての敵が画面に表示され、敵をすべて撃てばクリアになります。クリアすると再度敵が出現し、自機が撃たれるまで延々とゲームを繰り返します。 ブロック崩しからインベーダーゲームへ インベーダーゲー
にょい~ん、ぐい~んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
エレメントの高さ(height)、幅(width)だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ:幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。
Javascriptでオブジェクト指向Javascriptはプロトタイプベース(インスタンスベース、委譲による継承)なOOP。 JavaなどはクラスベースなOOP。 関数はクラス function Foobar() {}; // 関数に new でインスタンスを生成できる。 // この関数はコンストラクタとして働く var foobar = new Foobar(); alert( foobar.constructor ); // function Foobar() {} alert( foobar instanceof Foobar ); // true var Foobar = function(arg) { // このような定義にすると new した全てのインスタンス // 対してここで代入している内容が別々に作られてしまう。 this.var = arg; this.method
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
この記事は、日経SYSTEMS 8月号に掲載された連載「新野淳一の技術インパクト」第5回のオリジナル原稿をPublickey掲載用に編集したものです。Publickeyでは日経SYSTEMS編集部との合意を得て、雑誌発行から一定期間後に記事をPublickeyに掲載しています。 JavaScriptは1995年の登場から何年にもわたって、Webページにちょっとした動きを与えるための簡易なプログラミング言語とみなされてきた。しかしいまやJavaScriptはモバイル向けアプリケーションの開発、業務アプリケーションのフロントエンド開発、そして大規模なWebアプリケーションのサーバサイドプログラミングなど、あらゆる分野での活用が始まりつつある。最も注目を集め、急速に適用分野を広げて進化しているプログラミング言語だ。 業務システム開発の視点で見れば、今後の開発言語としてJavaScriptが有力候
ナビゲーションを抽出 ページ内の移動は、アニメーションを伴ってスクロールします。 MagicNav.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script> Step 2: HTML デモではdl要素でFAQが実装されています。 dl, ulなどに限らず、hxの見出しなどでも構いません。 <h3>FAQ</h3> <dl> <div id="commercial" title="commercial"><dt><strong>よくある質問</strong></dt> <dd><p>回答</p></dd
flipCounter 1.2 a jQuery plugin by BloggingSquared.ca ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 中心に折り目がついててめくれる時計がありますが、アレをカウンターにしたものが登場。アニメーションさせることもでき、なかなかいい味が出せます 必要なライブラリを読込後、$("#counter").flipCounter(); と書くだけで実装できるのは素晴らしい。 各種豊富なオプションで動作をカスタマイズ可能ですし、使われている画像を変えればオリジナルのUIのカウンターが実装できます。 フォーマット指定なんかも可能 アクセスカウンターレンタルサービスなんていうのが昔はよく使っていましたが、こういうカウンターのレンタルがあったら使いたいかもしれませんね。 関連エントリ jQueryでフリップエフェクトを使った
Demo 3 BookBlockの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.bookblock.js"></script> Step 2: HTML 各ページはdiv要素で実装し、それらをdiv要素で内包します。 <div id="b
※image via 003 FREE WEB GRAPHICSデバイスの多様化に伴い、拡張性の高いWebアプリの重要性が見直されています。サイバーエージェントのデカグラフを構成するサービスも基本的にはWebベースで作られていますが、これはアプリの改善スピードを上げたり、各サービス間の回遊性を高めるという狙いもあるようです。 ただし、スマートフォンユーザーはネイティブアプリ先行でサービスに触れているため、これまでのWebアプリでは当たり前だったことが、今ではストレスに感じてしまうことも多いです。HTML5の登場やJavascriptのライブラリの充実などにより、最近ではリッチなWebアプリを作る環境が急速に整ってきてはいますが、それでもスマートフォン向けに満足度の高いWebアプリを提供するハードルは非常に高いと言えると思います。 そこで、「もっさり&カクカク」な印象のあるWebアプリの操作
以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード<script type='text/javascript' src='http://ajax.googleapis.co
関数を呼び出す時、呼び出し側から関数へ値を渡すときに使うのが引数です。関数は渡されてきた値を受け取り引数のところに記述した変数に格納したあと、関数のブロック内で利用することができます。ここでは JavaScript で引数を使って関数へ値を渡す方法について解説します。
HOME JavaScript入門 引数 このページでは、引数(ひきすう)について解説します。 引数を使うと、関数に様々な値を渡して、柔軟に活用することができます。 では実際にどのように引数を使うのか、見てみましょう。 引数を使ったサンプル 以下のサンプルでは、引数を使って関数に数字を渡しています。 関数内でそれを2乗して、計算結果を呼び出し元に返しています。 <script> function sqr(a){ return a + "の2乗は" + a*a + "です。"; } document.write( sqr(2) + "<br>" ); document.write( sqr(5) + "<br>" ); document.write( sqr(123) + "<br>" ); </script> サンプル(別窓) サンプルページを見ると、2,5,123をそれぞれ2乗した計算
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く