JavaScriptでstatic／private／publicなメンバ／メソッドをもったクラスのつくりかた | ALUMICAN.NET
JavaScriptを今更勉強している。 手始めに、任意のアカウントからVimeoとYouTubeのフィードを引っ張ってきて表示するだけの プチソーシャルストーキングサイトをつくってみた。 » You Like Good Things (β) が、JavaScriptがUNKO柔軟すぎる言語であるため、 結局自分のコーディングスタイルが最後まで定まらず、 上記サイトのソースコードは無茶苦茶になってしまった。 僕はこれまで「JavaScript = ステータスバーに無意味に時計を表示するもの（笑）」だと思って生きてきたが、 これからはちゃんと設計してコードを書けないとだめだと思った。 なので、とりあえずクラスの宣言から始めてみることにした。 クロージャを使ったりプロトタイプを拡張したり色々方法はあるものの、 JavaScriptに元々クラスという概念が存在しないせいか、どれも一長一短な感じは
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll
ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc
JavaScriptの正規表現
●任意の文字に一致 書式：/文字/ 例１："abcdefg".match(/a/) 結果：a 例２："abcdefg".match(/cde/) 結果：cde 例２："abcdefg".match(/xyz/) 結果：null ●改行文字を除く任意の１文字にマッチ 書式：/.文字/ 例１："abcdefg".match(/.f/) 結果：ef ●複数個の文字にマッチ 書式：/../ （.はマッチする個数並べる） 例１："abcdefg".match(/.f/) 結果：ef ●指定文字のいずれかにマッチ 書式：/[任意文字]/ 例１："abcdefg".match(/[ahg]/) 結果：a ●指定文字以外のいずれかにマッチ 書式：/[^任意文字]/ 例１："abcdefg".match(/[^ahg]/) 結果：b ●複数の文字列のいずれかにマッチ 書式：/任意文字列|任意文字列|...|
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
iPadやiPhoneなどのスワイプ操作にも対応の、シンプルなHTML製プレゼンテーションを作成する為のフレームワーク・slides - かちびと.net
シンプルなHTMLプレゼンテーションを作成 する為のフレームワークのご紹介です。最近 は変わった動きのするプレゼンツールをよく 見かけますが、シンプルなタイプはあまり 見かけませんので選択肢の一つとして。 スマフォのスワイプ操作にも対応しています。 パワポとかKeynote使いたくないから作ったらしいです。iPadやiPhoneのスワイプ操作にも対応しています。 PCでは矢印キーで、タッチデバイスはスワイプで操作出来ます。JavaScriptにDojoが使われています。 以下動作サンプルです。 Sample iPhoneはQRコードでGOです。 実機でテストしました。タッチデバイスで閲覧すると、PCでは「矢印で動かします」みたいなナビゲーションもタッチデバイス用に切り替えられます。 コード Dojoは殆ど触ったことが無いのであまり触れないでおきます。 <script type="text/
[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 正直話題としてはとっくに旬は過ぎていますがｗ 一度まとめておきたいと思い。 殆どのweb制作者達がこれまで頭を悩ませてきたであろうIE対応。web制作者の方々は「もうIE6対応なんかしなくていいじゃん」「対応するからいけないんだよ」という意見をお持ちの方も多いかと思います。 特にIE6に対するコーダーの方達の恨みつらみは相当なもの。一言言いたい場合はとりあえず「爆発しろ！」とでもこちらでぶつけてみてください☆ (´・ω・｀) ie6bot – 腐った牛乳と呼ばれたブラウザ が、しかし会社で制作をやっている方々はそうもいかないのが現実。私のブログでも今は対応が中途半端でしっかり出来ていないのですが…ｗこのブログにはなるべく早めに対策を施すつもりです。あと、これに関してはそのうち独自の対応をし
![[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5e28c757d14aa768526c879eb8c989dd43aa815/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F07%2Fjavascript-ie-correspondence-01-150x150.gif)
プロトタイプ（prototype）によるJavaScriptのオブジェクト指向
はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaやC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語（JScript、ActionScript）でも通じる内容になっています。 対象読者 プログラミングの基本的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をして
JavaScriptのprototypeプロパティに対する理解 - 犬も歩けば棒も歩く
prototypeに対する理解を深めるために少し考えてみた var obj = {}; var func = function(){}; alert(obj.prototype); //undefinedと出力 alert(func.prototype); //[object Object]と出力 まずprototypeプロパティを出力してみる。obj(普通のObject)の場合、undefinedと出力される。つまりprototypeというプロパティ自体もっていない。これに対してfunc(普通のfunction)の場合、prototypeはObjectになる。ここで、prototypeに指定されたオブジェクトはプロトタイプオブジェクトと深い関わりがある。順を追って説明する。 JavaScriptにはプロトタイプチェーンという仕組みがある。このプロトタイプチェーンの仕組みは全てのオブジェク
iPhone iPadで「position: fixed」を実現するiScroll « オモテメン（高山一登のブログ）
3日に書いたiPad readyの記事で紹介したNikeのサイトがヘッダーを固定していたのでてっきりiPadはiPhoneで使えなかったCSSの「position: fixed」が使えるのかなと思ったらやっぱりiPadでも「position: fixed」は使えなくて、代わりに「iScroll」というJavaScriptライブラリで実現していたと知ってびっくり。 これを使えばiPhoneでも「position: fixed」に相当するデザインを実現できそうです。デモはこちら ただしこれを使うと、逆に通常のブラウザではスクロールできなくなるので注意が必要です。上のデモもPCでは機能しません。 使い方は簡単で、JS読み込んでスクロールさせるdivにIDつけて、その親divにもIDつけてあとCSS指定するだけ。詳しくはデモのソースを見れば分かります。2つのdivの間に違う要素が入るとダメみた
CSS,JavaScript,PHPで使えるコメントアウト装飾
CSS,JavaScript,PHPで各ブロックごとに説明のコメントアウトをするかと思いますが、それを見やすくするための装飾をまとめてみました。 大ブロック用（大見出し） ※各記号によって長さが違うように見えますが、全て同じ文字数です。 /* 大ブロック ———————————–*/ /*———————————– 大ブロック ———————————–*/ /*================================== 大ブロック ==================================*/ /*:::::::::::::::::::::::::::::::::: 大ブロック :::::::::::::::::::::::::::::::::::*/ /*++++++++++++++++++++++++++++++++++ 大ブロック +++++++++++++++++
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
CSS3アニメーションとJavaScriptを組み合わせてみる | Technology-Gym
みなさんこんにちはこんばんは。イッシーですʕ￫ᴥ￩ʔ。iPhoneのブラウザではCSS3のアニメーションや3D効果が使用できます。そこで今回はCSS3を使って様々な効果を作ってみましょう。Google Chromeなどのブラウザでも見ることができますので様々な効果を楽しみつつ、様々な場で使ってみてください。 ■角丸 特に目新しくありませんが、見栄えが良くなるのでとりあえず角丸にしておきます。 .element{ border:1px solid #333333; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .element{ border:1px solid #333333; -moz-border-radius:10px; -webkit-border-radius:10px; bo
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
去年、ノリで数日で作り上げたJavaScript製のお絵描きアプリ、JSPaintのソースコードを公開してみた。 なんとなく勢いで。 Download 1週間で実装したわりには、指先ツールとかカラーピッカー、Undoまで完備されていて結構頑張ってるんじゃないかと。ただしIEでは（メンドイので）動きません。Twitter投稿のみphpを使っていてZendのフレームワークが必要です。この辺は @sumihiro さんのご助力に感謝です。 ソースの書きかたが、ちょっとクラシックでprototypeで疑似クラスを作っていますが、まぁ気にしない。本職JavaScripterでもないので割と突っ込みどころが満載です。 こまかい事はTwitterのfladdictで捕まえて聞いてください。
ktyr report [コトヨリリポート] - [javascript]iPhoneタッチイベント
iPhone,iPodTouch,iPadのSafariでは、javascriptでタッチしたかどうか取得することが出来ます。 ここにそのサンプルを記します。 iPhone,iPodTouch,iPadで下記アクセス。 http://ktyr.net/js/07/ html <div id="field" onSelectStart="return false;" onMouseDown="return false;"> <div id="output">touch me !</div> <div id="cross"></div> </div> CSS body{ padding:0; margin:0; } div#field{ padding:0; margin:0; width:320px; height:416px; border-bottom:1px solid; positi
![ktyr report [コトヨリリポート] - [javascript]iPhoneタッチイベント](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6df9002c5b6d41c3b6a9cdedff6bcccd8399236/height=288;version=1;width=512/http%3A%2F%2Fktyr.net%2Fblog%2Fimage%2Fshareimage.png)
【JavaScript】 要素を取得する - やまねこのWebメモ
ここ1～2年の間にDynamic HTMLが多くの場所で利用されるようになりました。 Dynamic HTMLは、ページをリロードすることなく要素の外観を変えたり中身の文字を 変えたりすることが出来ますが、変更したい要素を取得しないと始まりません。 そこで、まず最初は、要素(HTML内のタグ)を取得する方法について書きたいと思います。 １．IDを指定して取得する HTML内の要素にはIDを付けることが出来ますが、そのIDを指定して要素を取得する方法です。 まず、以下のようにタグにIDを付けます。 <div id="test">DIVタグです</div> そして、このDIV要素を取り出すJavaScriptは、以下のようになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
