グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル(Model)の部分とユーザーインターフェイスの部分(View)、そしてビューとモデルのあいだで制御する部分(Controller)に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular. Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resu
Set Text on a Circle | CSS-Tricks テキストを円形に描画するチュートリアル。 次のようにテキストを円形に描画するJavaScriptとCSSのチュートリアルです。 テキストをLettering.jsで1個1個の文字に分割して、Sassのループを使い、1個1個rotateさせていくという方法で実現されているようです。 アニメーションとかを組み合わせて、より面白いことができそうですね。 関連エントリ PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でシャレオツなリストを作るチュートリアル WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル CSS3で出来たクールなLightBox実装チュートリアル
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
Detecting Mobile Devices with JavaScript | A Beautiful Blog スマホを判別するのに便利なJSスニペットが公開されています。 JavaScriptによってAndroid, iOSの差を吸収する際に使えそうです。 iOSかどうかの判別は、以下のように超シンプル if( isMobile.iOS() ) alert('iOS'); Android のタブレットの場合は Mobile が入らないので、タブレットも考慮する場合はそのへんのコードを追加するとよさそうです。 関連エントリ iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」
音楽データを連続再生した際に出る遅延についての解決策について書きました. 以前 「HTML5 Audio と JavaScript でピアノ制作」という内容の記事を書いたのですが, たまに音ズレが起きるという指摘を何人かの方から頂きました. たしかに, どうしても音楽ファイルの読み込みにはコストがかかるのでバンバン鍵盤を叩いているとどうしても音ズレが起きます. 今ネット上で公開されている HTML5 Auido についてのサンプルのほとんどに同じような現象が起きています. そこで解決法はないかと色々探したところ, Data URI scheme ってやつで遅延を解消することができました!! 画像ではお馴染みの, URL にリソースのデータも埋め込んじゃおうってやつですね. 詳しく知りたい方はこちら. 画像では読み込み速度を上げるために最近よく使われてたりするのですが, 今回はそれを音楽デー
公開日:2012年1月10日 カテゴリ:Web制作に役立つネタ 前回リニューアルしたのは東日本大震災のすぐ後ぐらいなので1年経たずに更新となりました!('A')ノ 相変わらず2chまとめサイト??っと勘違いされる当ブログですが、今回は見やすさ&使いやすさ&スマホ対応を重視して作りました。 【2012.2.19】追記しました。各ページごとのスマホ転送について リニューアルしたきっかけ 去年の今頃はこんなブログだったのか・・・(ひどすぎワロタ) あまり見かけなくなった3カラム構成となってます。ブログパーツも多々追加していたので非常に重たかったですね。 前回のブログデザインはこちら。 2カラムにしてスッキリ。おかげでアクセス数もアフィリエイトも大きく伸びました。が、色々なサービス(サイト)を作っていくうちにソースもサイドメニューもごちゃごちゃしてきたのですね。 それで、今回のリニューアルとなりま
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか? あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか? ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境(静的スコープ)において解決する関数のことである。 理解できないですよね? 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5&CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エントリ 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer
Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル&サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル
Auto Scroll News Ticker with jQuery | rolling news,news ticker,text effect,text scroller 良い感じで動作するニュースティッカー実装jQueryサンプル。 ulリストでニュースを定義しておいて掲載されているコードを実装すれば小気味よくアニメーションしながら切り替わるニュースティッカーを実装できます。 1行ニュース 3行ニュースにも出来ます デモページはこちら うっとうしくないぐらいの動作がいいですね 関連エントリ 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」 コンパクトでクールなニュース表示ウィジェット実装デモ&サンプル
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように1行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
jQueryでGETパラメータを取得する 例)http://*****.com?date=20100721&id=777 の場合 var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } var DATE = vars.date; var ID = vars.id;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く