このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

JavaScript

今回は、スマートフォンサイト、webビューApp(ハイブリッドApp)等HTML5、CSS3、JavaScript等を用いてコンテンツを制作する際によく使う(使うと便利)JavaScriptをまとめてみました。 ユーザーエージェント スマートフォンサイトを制作する際に、ユーザーエージェ…

続きを読む

ども。これまたお久しぶりな感じです。 お仕事がクッソ忙しく全く他のことができない今日この頃です。 が故に良い作品も出来ているので、まぁいいかぁと思う今日この頃です。 で、疲れもピークに来ているせいか、どうも基礎的なところも分かんなくなって来てしまっているのでまとめてみました。 …

続きを読む

Javascriptを用いたスマートフォンUIや、webアプリケーションなどを制作していく際、タッチスタートのイベントだったり、タッチムーブのイベントだったりと、domにイベントを色々と登録し、イベントを発生させていくかと思うのですが、その際、イベントを登録する為の関数、addEven…

続きを読む

JSONとは、「JavaScript Object Notation」の略で「ジェイソン」といいます。 JSON は、数値や文字列や配列やオブジェクトなどのデータを、文字列で表現できる軽量なフォーマットであり、XMLと比べると簡潔に構造化されたデータを記述することができるため、人間が理…

続きを読む

最近良くあるなと思うのが、「要素(DOM)を入れ替えたい」と言った要件だったりもします。 ソーシャルゲームなんかになるとカード画像を入替え。とかになりますかね。 以下の様な並びだとして、 タップ→タップで入替え。とか、タップ→スライドで入替え。 だったり。 そんなとき、Jav…

続きを読む

いやー。楽しいですね。enchant.jsは。 重力のあるボール挙動のscriptを書いてみました。ボールをドラッグ出来て、放り投げることも可能です。 何より便利だなと感じたのは、「touchstartでクリックスタート」「touchendでクリックエンド」などもカバーしてくれてい…

続きを読む

pjaxとは pjaxはpushStateとajaxを組み合わせた造語(pushState + ajax = pjax)となります。  pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメ…

続きを読む

enchant.js http://enchantjs.com/ja/ 記事を書こう書こうと思いましたら、色々と時は過ぎていくものですね。 もう、すっかり話題のenchant.jsについて書いていこうかと思います。 enchant.jsとは A simple JavaSc…

続きを読む

乱数について考えてみました。そもそも乱数とはなにか? 乱数とは、サイコロの出目のように規則性がなく予測不能な数値のこと。 と、書かれているところが多いかと思います。 Javascriptのなど言語ではMath.random();で乱数を生成することができます。 Math.ran…

続きを読む

document.querySelector 概要 与えられたクラスの最初の要素を返します。 [code]element = document.querySelector( selectors );[/code] element は element オブジェクト…

続きを読む

何気にここらへんについては書いていない感じでしたので、ざっとではありますがまとめさせて頂きました。 まず、ここが変だよJavaScriptといったところで挙げられるのは 「厳密な意味でのクラスという概念がない。」ということではないでしょうか。 ここで言う「クラス」とはCSSが参照…

続きを読む

前回の、サーバーサイドJavascript 『node.js』 macにインストール・使用方法の続きとなります。 node.jsをインストール完了したかと思いますので、 更に便利に使う為、「npm(Node Package Manager)」を利用し、 「express」をインストー…

続きを読む

インストールしたまま、かれこれ数年経った気が。w node.jsについて触れてみました。 node.js node.jsとはなんぞや?? サーバーサイドjavascriptと言われるもので、サーバーサイドjavascriptは 文字通りWebアプリケーションのサーバーサイドプログ…

続きを読む

css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 trans…

続きを読む

最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はgetElementByClassNameとquery…

続きを読む

ども。 最近、外はめっきり肌寒くなり、もう冬の気配さえも感じ始める今日この頃になってきましたね。 皆さんはどの様にclassを取得していますか? え?取得しない? そんな取得しない方々にも簡単に取得出来る世の中になりました。 今回はclassListについてです。 jQue…

続きを読む

AjaxはJesseJamesGarrettが発表した用語で、「Asynchronous JavaScript + XML」(非同期的なJavaScript + XML)の略ですが、Ajax とはそもそもなんなのか。 ってところですよね。 一般的に使われているAjaxという言葉はあいま…

続きを読む

前回書いた、 ActionScript ランダム関数 Math.random() まとめ をそっくりそのまま、JavaScriptにしてまとめてみました。 TweenerのアニメーションはCSS3で実装しておりますので、webkit系ブラウザ(safari,GoogleChome)等…

続きを読む

JavaScriptを用いたCSSのスタイル変更は通常、 [code]element.style.backgroundColor = "#ff00000";[/code] などのように element.style.attribute = value; で変更が…

続きを読む

2011.09.06

JavaScript

JavaScript 配列

配列 いくつものデータをまとめて扱う場合、配列がよく使用されます。 配列とは複数の変数に番号を振って並べたものです。 配列に含まれるそれぞれの変数は要素と呼ばれます。 「配列aの5番目の要素は55です。」「配列cの4番目の要素は33。」等のように1つの名前で扱えるので利便性が…

続きを読む

JavaScript 代入と参照 「book1 = new Object()」を説明したときは 「変数book1にObjectオブジェクトを代入」ではなく 「Objectオブジェクトのインスタンスを参照する」となります。 「代入 ではなく 参照」 [code] <…

続きを読む

プロパティの作成 JavaScriptのオブジェクトには、自分の好きなプロパティを加えることができます。 Objectオブジェクトは、特別な機能のないオブジェクトで、いわば白紙のオブジェクトです。 new Object()としてコンストラクタを呼び出すと 変数book01はObje…

続きを読む

オブジェクトの簡単な考え方 オブジェクトとは 簡単にまとめると「データを持っていて、操作の対象となるモノ」 そのオブジェクトに変数を持たせると、オブジェクトのデータとなり オブジェクトに関数を持たせると、オブジェクトを操作できます。 オブジェクトに変数→プロパティ オブジェクト…

続きを読む

JavaScriptの実行中には、記述ミスやブラウザーの種類によってエラーが発生することがあります。 エラー処理(例外処理)を記述する方法とJavaScriptのデバッグ方法を紹介します。 例外処理 JavaScriptでエラーが発生する場合は以下のとおりです。 エラーの種類 ■…

続きを読む

関数の中ではローカル変数(局所的な変数)を利用することができます。 ローカル変数は関数の中だけで通用する変数のことをいいます。 ローカル変数を使用すると、同じ名前の変数を関数の内外で使い分けたり、複数の関数で使い分けたりできます。 ローカル変数を作るのは、変数の前にvarを付けて変数…

続きを読む

2011.09.04

JavaScript

JavaScript 戻り値

関数が返す結果を戻り値と言います。 戻り値を使うと、引数を元に計算を行い、その結果に応じ様々な値を返す関数を作ることができます。 関数の中で戻り値を記述するには、return文を使います。 return 戻り値; 例: [code]<script type=&qu…

続きを読む

2011.09.04

JavaScript

JavaScript 引数

【引数】 関数には引数(ひきすう)を渡すことができます。 引数とは、関数に与える数値や文字列などの情報となります。 同じ関数でも引数の値を変えることによって、動作を変えることが可能となります。 2を渡したら4を表示、4を渡したら8を表示する。のような感じになります。 関数の定義で…

続きを読む

2011.08.29

JavaScript

JavaScript Ajax

Ajax Ajaxって何ですか? てとこからだったりしますよね? Ajaxとは 2006年2月18日、 Adaptive Path社のJesse James Garrettって方が発表した用語で、 「Asynchronous JavaScript + XML」(非同期的なJav…

続きを読む

while(ホワイル)文の主な使用方法 while(条件式){ 繰り返し実行するスクリプト.... } [code] <script type="text/javascript"> num = 1; while(num <= 4){ …

続きを読む

JavaScriptを用いて、「ユーザーエージェント」の振り分けの方法です。 ユーザーエージェントとはwebブラウザーや検索エンジンのクローラーといった webサイトへアクセスするプログラムのことをいうのですが、 web制作では一般的に「webブラウザーがHTTP通信時にサーバーへ送…

続きを読む

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。