こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume

こんにちは、太田です。前回はJavaScriptからみたHTMLの基本を中心に解説しました。今回はまず、イベントについて解説します。JavaScript、DOMにおいてイベントは極めて重要です。ブラウザ上のJavaScriptでは必ずといってよいほどイベントが絡んでいますし、ウェブアプリケーションをコントロールする根幹的な技術と言えるほどです。 JavaScriptとイベント ブラウザはscriptタグで指定されたJavaScriptを解釈して実行します。その時、関数などを定義するだけにして、実際にその処理が行われるのはユーザーがボタンをクリックした時や、何かを入力した時など、ユーザーの何らかのアクションに関連付けてJavaScriptを実行させることができます。さらには、ユーザーのアクションだけでなく、ページの読み込みや通信処理の完了後など、ブラウザ上で起こるあらゆるイベントについて処理

こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが

こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは（未だに）誤解されがちな言語です。まずはJavaScriptの背景から解説していきます。 （広義の）JavaScriptとはEcma Internationalによって策定されているECMA-262という規格（ECMAScript）を実装した処理系で実行される言語を指します。遠回りな表現になっていますが、これはJavaScriptのややこしさの一端を表しています。つまり、JavaScriptそれ自体に仕様があるわけではない、ということです。ECMAScriptと呼ばれる言語の仕様があって、その仕様に準拠した言語を（広義の）Ja

こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか？ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE（6/7/8⁠）⁠、Firefox（3.6⁠）⁠、Chrome（4.1⁠）⁠、Safari（4.0.5⁠）⁠、Opera（10.51）とします。カッコ内はフルサポートするバージョンで、それ

こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb

運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します⁠）⁠。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ

本連載では、現在執筆中の技評SE選書には掲載していない、オリジナルのコンテンツをお届けしています。IT技術者が勉強をする場合のゴールとして、技術を身につけて自由自在にその技術を使えるようにする、というものがあると思います。今回はそれとは別の到達点として「転職」を取り上げたいと思います。勉強会を通じて適職を見つけ、転職をした人が周りに何人もいます。彼らを見てみると、転職が成立した条件として、次の3項目の共通項がありました。 実力、もしくは将来のための勉強の習慣を身につけた 自分の実力や将来性をきちんとアピールできた 受け入れ側のニーズとマッチした 今回は、勉強会に参加し転職のチャンスを掴んだお二人と、その転職先の社長さんを加えた三人の方々に、勉強や勉強会について語っていただきました。話に夢中で写真を撮り忘れました。文字ばかりですみません。 佐藤治夫さん（twitter：@haru860）株式

こんにちはこんにちは！！ いよいよ寒くなってきましたね。温度の調節が難しいこの時期，風邪をひきやすいので気をつけていきたいところです！ ところでこんな季節には……やっぱりおでんですよね！ Web 黎明期の頃には，よくコーヒーメーカーをWebカメラで監視しつづけるサイトなどがありましたが，日本ならではのおでん監視システムなんかも良いんじゃないかなぁなどと思います！ おでん2.0 の予感…！

gihyo.jpでは，毎年新年のはじめに特別企画記事を公開しています。これまでに公開した特別企画記事を御覧いただけます。 2022年，カーボンニュートラルへの動きがソフトウェア/ITシステムの世界にやってくる IT分野におけるカーボンニュートラルの現状 ソフトウェアの電力測定に関する標準化は進んでいる？ ソフトウェアの工夫で消費電力を下げることが重要視される時代になる？ 開発時と運用時のソフトウェアによるCO2排出量について 開発者自身のサステナビリティは？ Green by ITのところで，2022年に向けてこれが注目だ！というのを挙げると？ 2022年が始まったいま，正月のうちにこれを見ておけ，これが注目だ！というオススメは？ 最後に 2022年1月5日：濱野賢一朗 Progressive Web Appsの振り返りとこれから 日本国内でのPWAの動向 PWA開発のスタンダード PWA

Twitterクライアントの進化 皆さま、あけましておめでとうございます。モバツイッターという日本の携帯電話向けにWebベースのTwitterクライアントを作っている藤川（えふしん / @fshin2000）と申します。 これまでTwitterクライアントは、Twitterユーザのニーズに合わせて発展してきました。最初は、TwitterのWebサイトでは使いにくかったメッセージの閲覧性や、日本語の送信、フォロワーの管理、発言のしやすさを改善したTwitterクライアントから始まり、その後、Retweetのしやすさやフォロワーの分類、リンクや画像の閲覧性や位置情報対応などTwiterの機能を拡張するクライアントが出てきました。 Twitterクライアントの差別化要素 現在の主なTwitterクライアントの差別化要素は以下に挙げられます。 Twitterの新しいapiへの追従、および追従速度

2010年のJavaScriptと題しまして、JavaScript周辺の「これまで」と「これから」についてまとめてみたいと思います。 2009年までのJavaScript JavaScriptは各ブラウザベンダなどが個別に実装するという特殊性から、ブラウザ（実装）ごとの非互換性の問題に悩まされ続けてきた言語です。まず、そのJavaScriptの歴史を簡単に振り返ってみます。 ECMA-262 3rd editionとスピードコンテスト JavaScriptはNetscape社によってLiveScriptという名前で誕生し、その後ECMAScriptとして標準化が進みました。1999年12月にECMA-262 3rd editionが策定されてから、Internet ExplorerのJScript、MozillaのSpiderMonkey（TraceMonkey⁠）⁠、SafariのJav

こんにちは、太田です。今回はChrome拡張の開発時のノウハウとして、開発ツールの解説をお送りします。Google ChromeにはWebKit由来のWeb Inspectorというデバッグツールが搭載されています。以前にも少しだけ紹介しましたが、今回は具体的な使い方まで掘り下げて解説します。なお、今回のWeb Inspectorの解説はChrome拡張だけでなく、JavaScriptを使ったウェブアプリケーションの開発に一般的に役立つノウハウとなっています。 WebKitのWeb Inspector Chrome拡張の開発の必需品であるWeb Inspectorですが、こちらは元々WebKit（Safari）で開発されたもので、Google Chrome（Chromium）に搭載されているものはさらに機能が追加されています。FirefoxにはFirebugという定番ツールがありますが、そ

日本のmovatwitter（モバツイ）が世界一に！―3rd annual Open Web AwardsにてBest Mobile Based Twitter Appを受賞 2009年12月17日（日本時間⁠）⁠、世界のソーシャルメディア情報を発信するMashable.comが表彰するコンテスト「3rd annual Open Web Awards: Social Media Edition!」の受賞アプリ／サービスが発表された。この中で、日本の携帯電話向けTwitterクライアントmovatwitterがモバイル部門の「Best Twitter App」に選ばれた。 Open Web Awardsとは 「Open Web Awards」とは、世界中にあるソーシャルメディア／アプリ／サービスを対象に、革新的な技術を使ったものや多くのユーザを獲得したものに対して、インターネット経由でユーザ

こんにちは、Google Chrome ExtensionsのAPI Expertになりました太田です。今回は、これまで使用していないAPIを中心に使った新しいExtensionを作成してみます。 が、その前に大きなニュースとして、Extensionsが有効になったbeta版とExtensionsギャラリーが公開されました。Macのbeta版も公開されましたが、こちらは拡張を使うことはできませんのでご注意ください。 Extensionsを作られた方はDeveloper DashboardからExtensionを登録できます。登録時の注意などはブログにまとめていますので、そちらをご参照いただければと思います。また、beta版のリリースに合わせて、Google Chrome拡張について日本語での情報交換ができるGoogle準公式コミュニティのChromium-Extensions-Japanも

今回の対談は、9 月10.11 日に開催されたYAPC::Asia 2009会場となった東京工業大学大岡山キャンパスにて実施。ゲストは、「⁠Twib」「⁠YourAVHost」（⁠注1⁠）⁠ などのサイトでお馴染みの、ゆーすけべーこと和田裕介さんです。袋綴（と）じこそ実施には至りませんでしたが、一部、いまだかつてないエロ度の対談になりました。 （撮影：武田康宏） Web開発に携わったきっかけ 弾：今回はWEB+DB PRESSで初めての袋綴じということで…（笑⁠）⁠。 ゆ：袋綴じって（笑⁠）⁠。 弾：さっそくですが、Web開発に携わったきっかけってなんですか？ ゆ：僕は大学院まで行ってるんですけど[2]⁠、そのときの研究は、コンピュータをいじることではあったんですが、インタフェースとかアート寄りで、コンピュータは専門じゃなかったんです。で、卒業と同時に父親と会社をやり始めて[3]⁠。Web

（⁠株⁠）ユビキタスは11月10日、組込みシステムの起動時間を大幅に短縮する新製品「Ubiquitous QuickBoot（クイックブート⁠）⁠」を発表した。同製品の発売開始は来年を予定している。 クイックブートは、同社が開発した新技術を採用したソリューション。システムの起動に必要なメモリ領域を優先的に不揮発性ストレージからRAMに復元することで瞬間起動を実現するもの。デモとして用意されているAndroidを搭載したARM評価ボードを使用した実装例では、電源投入から1秒台でアプリケーション実行状態まで復元可能となる。 同社のUbiquitous QuickBoot紹介Webページで、Androidを1秒で起動させるデモ動画を見ることができる。 現在の実装例はAndroidだが、Quikboot自体はOSやハードウェアには依存しない技術で、ハードウェアとOSの間にIRA（Intellige

はじめに 検索エンジンと聞くと、みなさんは何を思い浮かべるでしょうか？ GoogleやYahoo!などの検索ページを思い浮かべる方がほとんどだと思います。近年は、それら企業の努力によって検索エンジンというものが非常に身近になり、私たちの生活に欠かせないものとなりつつあります。 しかし、検索エンジンと一言で言っても、上記のような一般の方々へのUI（ユーザインターフェース）を指す場合もあれば、そのUIの裏側（バックエンド）にあるシステムを指す場合もあります。 本連載では、Google,Yahoo!などを代表とする検索エンジンの裏側のしくみに着目し、検索エンジンというシステムのアーキテクチャやその内部で使われているデータ構造やアルゴリズムを、近年の手法や研究事例などを交えて解説していきたいと思っています。 検索エンジンとは 検索エンジンには、さまざまな種類があります。GoogleのWeb検索のよ

今回の“⁠理系なおねえさん⁠”は、サイエンス・イラストレーターの菊谷詩子さん。幼い頃からとにかく絵を描くことと、生き物が好きだったという菊谷さんは、その2つを見事に融合させた職業に就いています。海外では一般的ですが、日本ではまだ珍しいサイエンス・イラストレーターの世界に、どのようにして踏み入れたのでしょうか。 菊谷詩子（きくたにうたこ）学生時代の専攻：動物学。幼少期を東アフリカのケニア、タンザニアで過ごしたことをきっかけに野生動物に興味を抱くようになる。帰国後、東京大学理学部生物学科動物学コース（旧東京大学理学部動物学科）に進学。修士号を取得後、米カリフォルニア大学サンタクルーズ校（当時※）へ留学、サイエンス・イラストレーションを専攻。アメリカ自然史博物館でのインターン期間を経てニューヨークを中心に活動。2001年以降は日本で教科書、図鑑、博物館の展示等のイラストを制作している。（⁠※現在