HTML+JavaScriptで作れる Windows 7デスクトップアプリの基礎知識:楽しいWindows 7アプリ作成入門(3) 「あんなこといいな」「できたらいいな」というアイデアをWindows 7の表現力で具体的な“アプリ”という形にするには、どうすればいいのだろうか? 具体的なコードやデモとともに一から教えます

こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは(未だに)誤解されがちな言語です。まずはJavaScriptの背景から解説していきます。 (広義の)JavaScriptとはEcma Internationalによって策定されているECMA-262という規格(ECMAScript)を実装した処理系で実行される言語を指します。遠回りな表現になっていますが、これはJavaScriptのややこしさの一端を表しています。つまり、JavaScriptそれ自体に仕様があるわけではない、ということです。ECMAScriptと呼ばれる言語の仕様があって、その仕様に準拠した言語を(広義の)Ja
HTML5/JavaScriptの遊べるゲームライブラリ「Akihabara」、iPhone/Androidにも対応 「Akihabara」と名付けられたWebサイトで、HTML5のCanvasタグとJavaScriptを用いて開発されたゲーム用ライブラリと、それによって開発されたゲームが公開されています。特にゲームは昔のアーケードゲームを再現したようなものばかりで楽しめます。 開発したのはKesieVと名乗る人物。主に以下のようなライブラリから構成されています。 Gamebox 同時に動く複数のオブジェクトグループを扱うライブライリ。キーボード、ダブルバッファリングなども扱う。現時点で音声には未対応。 Gamecycle オープニング、メニュー、ステージ間のクロスフェードなどのサイクル機能を提供。 Toys シューティングゲームやロールプレイングゲームでよく使う、画面のエフェクトやヘッド
気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。JSに慣れていたら当たり前なことばかりかもしらん。 追記のところはid:os0xさんより。ありがとうございます! undefined var a; alert(a) // undefined 宣言だけだとundefined。undefinedというのは、宣言している変数に値が入っていませんよ、ということ。 そしてオブジェクトには無いプロパティとか参照すると出てくる。 var a = 100; alert(a.length); // undefined さらに引数も。 function func(val) { alert(val); } func() // undefined 引数はCallオブジェクトってのに格納される。このオブジェクトはローカルの変数が格納されるオブジェクト
以前書いた「ラムダ計算基礎文法最速マスター」(以下「最速マスター」)は, 予想以上に多くの人に興味を持ってもらえたようですが, 同時に難しくてわからなかったという人も多かったようです. 反響から察するに, 構文を見慣れていない(と錯覚してしまう)ことが理解の妨げになっていたように思います. ラムダ計算の構文は, 実際には全く特殊なものではありません. このことがよくわかるように, 「最速マスター」のラムダ計算の簡約の例をすべてJavaScriptの構文で書いてみました. ......という内容になるはずでしたが, 気がついたらラムダ計算のインタプリタをJavaScriptで実装していました! 実際に動かせるものは下記URLにあります. https://tarao.github.io/LambdaJS/#js 動作確認と既知の問題 Firefox 3.6 Google Chrome 4.1
MiSPLi: http://mooz.github.com/mispli/ MiSPLi Emacs に出会ったのが三年前. それから一年程して elisp をいじり始めたので, 僕と Lisp との付き合いはかれこれ二年ほどになる. JavaScript を始めたのが一年前だから, 僕の中では C 言語に次いで付き合いの長い言語だ. 必要にかられたときにちょこちょこと elisp を書いて, 終わったらしばらく別れを告げる. そんな中途半端な付き合いを続けていた三月も終盤, 竹内先生の書かれた「初めての人のための LISP」を読み, その内容に深い感銘を受けた. Lisp を Lisp で実装する, といった章があり, これまで何となしに使っていた Lisp の中身を垣間見ることができたような, そんな気分になっていた. その時に, 「ひょっとしたら僕にも Lisp の処理系を実装でき
スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します(Safari 4、Opera 10.50でのみ表示可能) Flash Playerなどのプラグインがなくても、ブラウザー上で動画を再生できるHTML5 video。前回の記事では、HTML5 videoで動画を表示・再生する方法を解説しました。今回は、360度動画が撮影できるカメラ「bloggie(ブロギー)」で撮ったパノラマ動画を素材に、スライダー操作で視点を切り替えられるパノラマ動画サイトを完成させましょう。 HTML5 videoをJavaScriptで制御する ブロギーで撮った360度動画は、以下のような横長の1枚の動画になっています。 パノラマ動画サイトのサンプルは、360度ぐるりと見渡せる動画にするため、この横長の動画を2つ、水平に並べます(同じ内容のvideo要素を2つ用意する)。2つのvid
Windows Internet Explorer 6 Ajaxian ≫ jQuery one-line plugin to crash IE6において、IE6をクラッシュさせるプラグインが紹介されている。IE7やIE8ではクラッシュせず、IE6のみでクラッシュが発生する。紹介されているプラグインはjQuery Crash Plugin。プラグインのソースコードは次のとおり1行だけ。関数を定義しているのみ。 /** * jQuery Crash (http://mktgdept.com/jquery-crash) * A jQuery plugin to crash IE6. * * v0.0.2 - 5 March 2010 * * Copyright (c) 2009 Chad Smith (http://twitter.com/chadsmith) * Dual licensed
Robert’s talk Robert Nyman氏がUsing HTML5 Web Workers to have background computational power - Robert's talkにおいて、Web Workersの実装例を紹介している。短くてわかりやすいサンプルコードが掲載されておりWeb Workersを試してみたい場合の最初の取っ掛かりとして取り組みやすい。 Web WorkersはHTML5とともに策定が進められているJavaScript API。JavaScriptファイルをダイナミックに読み込みバックグラウンドで処理を実施する。UIとは別のスレッドで動作する。特徴的な動作や仕組みまとめると次のとおり。 Web Workersの特徴 JavaScriptファイルを読み込んでバックグラウンドで処理を実行する。 別スレッドで動作するため、マルチコアの性能
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome(WebKit)のWeb
1つ前の記事「JavaScriptをいかに高速化するか、IE9、Firefoxの取り組み」では、IE9とFirefoxにおけるJavaScriptの高速化について紹介しましたが、そもそもJavaScriptの実行速度はなぜ遅いのでしょう? その理由について、Mozilla Japanテクニカルマーケティング担当の浅井智也氏が、スライド「Trace Monkey」でポイントをまとめています(このスライドはタイトルから分かるとおり、Firefoxの当時の新しいJavaScriptエンジン「Trace Monkey」を紹介するために1年以上前に作成されたスライドですが、1つ前の記事を見ると、ここで示された課題はいまも変わっていないようです)。 全67枚のスライドの20枚目から24枚目の5枚を以下に紹介します。 JavaScriptが遅い原因は、以下の4点にまとめられています。 インタープリタ型言
こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください(間違いやすい、わかり難いと思われるところは適宜補足します)。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ
近年は生成AIが人間と遜色ない受け答えをすることが可能となっており、学校が生徒のカウンセリングにAIを活用する事例も報告されています。新たな研究では、「AIの回答は人間のメンタルヘルスの専門家による回答よりも思いやりがある」と見なされていることがわかりました。 Third-party evaluators perceive AI as more compassionate than expert humans | Communications Psychology https://www.nature.com/articles/s44271-024-00182-6 People find AI more compassionate than mental health experts, study finds. What could this mean for future counsel
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
(注):以下、一部、推測で書いた部分が間違っていて、詳しくはコメント欄をご覧ください。詳細は、JaegerMonkey - MozillaWikiに書いてありました。 Mozillaのオフィシャルブログの記事、improving JavaScript performance with JägerMonkey – Mozilla Hacks – the Web developer blog、によると、Firefox のJavaScriptのエンジンをAppleのWebKitのJavaScriptのエンジンをベースに作り直すそうです。僕が英語を読み間違えていないことを強く祈ります。名称は、JägerMonkeyと言うそうです。 元々、JavaScriptのJITコンパイラによる高速化は、FirefoxのTraceMonkeyから始まりました。まず、インタープリタで走らせてから、型を推測し、JI
言語やインタフェースの設計には「驚き最小の原則」というのがある。まつもとさん本人はそんなこと言っていないようだが、かつて、Rubyはその原則に沿った言語と言われていた。一方、JavaScriptはそれに反する言語と未だに見なされているようだ。多くの場合、よく理解していないのが原因である。理解した上でも、やっぱりおかしいよ、というのもあるかも知れないが、じゃ、その場合どう定義したらよいんだ、というのはいろいろ難しい問題がある。 wtfjs(http://wtfjs.com/)にはJavaScriptのそんな「変な挙動」が集められている。wtfなんてタイトルをつけているくらいなので、あまり真面目に見る必要はないのかも知れないけれど、主なものについて古い順から軽く解説してみた。ちなみに、wtfはWhat The F*ckの略。 typeof NaN === 'number' // true In
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く