JavaScriptエンジニアなら知ってるよね？ エラー処理のいい書き方、悪い書き方
JavaScriptのエラー処理、ちゃんと書いていますか？ エラーを無視せず、どこに問題があるのか、きちんと確認できるコードの書き方をデモで紹介。 この記事はTim SeverienとMoritz Krögerが査読を担当しています。最良の記事を提供することができ、SitePointの査読担当者の皆さんに感謝します。 JavaScriptのエラー処理には危険が潜んでことを知っていますか？ もしマーフィーの法則を信頼しているとしたら、不具合が生じる可能性が本当に高いです！ この記事では、JavaScriptのエラー処理について考え、その落とし穴から便利な実践例までを説明します。さらに最後には、非同期コードとAjaxにも触れます。 JavaScriptはイベント駆動型プログラムで、プログラミングをより豊かなものにしてくれます。ブラウザーをイベント駆動型プログラムと考えると、発生するエラーは同一
GoogleアナリティクスをChromeで動作確認
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第5回は、 Web解析ツールとしてよく使われるGoogleアナリティクスについての悩みを解決します。 Googleアナリティクスのイベントが正しく送信されているのか確認したい Web解析ツール「Googleアナリティクス」の機能に、ボタンを押した時など任意のタイミングで独自の指標を取得できる「イベント トラッキング」があります。便利な反面、イベント トラッキングを利用するには、トラッキングコードのカスタマイズが必要です。 設定をしても、Googleアナリティクスのレポートで数値を確認するまでイベントデータが送出できているか確認できずストレスを感じたり、意図する数値がレポートに表示されない原因を特定できず、時間を無駄にしたりすることがあります。
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
静かな場所でも使えるぞ！ iPhoneのアラームをバイブだけに
富士見iPhoneクラブのメンバーが、iPhoneのちょっとした使いこなしテクを毎回紹介していく本連載。iPhone上級者なら「なにを今さら…」と思うかもしれないが、案外知らなかったり、使っていなかったりするネタもあるかもしれないぞ。 30分後、駅に着いたら起こしてね iPhoneのお役立ち機能の1つが「時計」アプリ。指定した時間に音を鳴らすアラームや、キッチンで役立つタイマーがもっぱらメインだ。目覚ましとして毎日使っているという人も少なくないはず。通勤電車を貴重な睡眠時間にあてている人なら、乗り過ごさないようにiPhoneを目覚ましにできたら便利だろう。 だが、このアプリには1個難点がある。マナーモードであっても、指定した時間がくれば音が鳴ってしまうことだ。サウンドから「なし」を選択することもできるが、これはバイブまでオフになってしまう。こんな「あちらを立てればこちらが立たず」を解消する
もうこれで迷わないHTML5新要素の使い方 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。今回から数回にわたって、HTML5で新たに登場する要素や、変更された要素について解説します。第6回は、一般的なWeb制作で使用頻度の高い要素と、ルビ関連の要素を取り上げます。 各要素の解説では、冒頭に「カテゴリー」
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
WindowsでIPv6の基本を試してみよう (1/2)
IPv6の開発がはじまってからおよそ20年が経過し、IPv6が本格的に普及する兆しが見えてきた。IPv4アドレスの枯渇が始まり、いやおうなしにIPv6を使わざるを得ない状況が目前に迫ってきたからだ。 この連載では、実際にWindows XP/Vista/7に実装されたIPv6スタックを使いながらIPv6の仕組みについて学んでいく。連載の途中からは、ヤマハの最新IPv6対応ルーター「NVR500」を用いたネットワークの構築にも触れていく予定だ。 Windows Vista/7ならIPv6環境がすぐ使える 「習うより慣れよ」という言葉がある。IPv6の勉強も、教科書を読むだけではなく、実際に使ってみたほうが理解が早いだろう。ここからの記述は、Windows 7でIPv6を操作することを想定して進めていく。Windows VistaのIPv6も、基本的にはWindows 7と同じである。また、W
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
ASCII.jp：絶対入れたいFirefoxアドオン最強50選
初心者から上級者まで、今使うべきアドオン50を徹底紹介 次世代ブラウザー、Firefoxの魅力は快適な動作速度（関連記事）だけではなく、ユーザーの好みに合わせて機能を拡張できる「アドオン」の存在だ。とはいえ5000以上もあふれるアドオンの海から自分に合ったものを選ぶのは至難のワザ。まずは鉄板の定番アドオンを導入し、そこから自分仕様にカスタマイズしていきたい。 そこで今回は使用シーンに合わせ、筆者が勧める50のアドオンを徹底的に紹介。インストールしたばかりのFirefox初心者はもちろん、Greasemonkey（グリースモンキー、詳しくは後述）を使いこなしている上級者にもぜひ使ってもらいたいものを集めてきた。
JavaScriptだけで表＜table＞を並び替え！ (1/2)
HTMLのtable（表組み）を使って、Webサイトにさまざまなデータを表示する機会は多くあります。たとえば、サークルのWebサイトを作った時に、メンバーの名前や年齢などをまとめたリストを公開するとしましょう。このとき、Webサイトを訪れたユーザーが、自分の見たい順番に行を並べ替えられたら便利なのに……といったことはありませんか？ そこで試してみたいのが、表の並び替え（ソート）を実現するJavaScriptライブラリです。並び替え機能を持つJavaScriptライブラリは数多くありますが、その中から高機能で使いやすい「DataTables」を紹介しましょう。DataTablesを使えば、サーバーサイド技術の力を借りずに、HTMLとJavaScriptだけでリッチな表を作れます。 並び替えを簡単に実現する「DataTables」 DataTablesは、並び替えをはじめとして、table要素
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
デザイナーにオススメ！JavaScript滑らかメニュー
サイトの構造を分かりやすく整理したグローバルナビゲーションを設置したい。カテゴリが細分化されているWebサイトで、遠回りせずに直接、目的のページに移動できるようにしたい――。そんなときに使えるJavaScriptライブラリが、Dynamic Driveで公開中の「Smooth Navigation Menu」だ。 Smooth Navigation Menuは、多階層のドロップダウンメニューを簡単に設置できるライブラリ。（X）HTML中のリストタグを読み込み、下の画面のようにドロップダウンメニューとして表示してくれる。しかも、メニューの展開時にはちょっとしたアニメーション付き。ライブラリ名にもなっているとおり、スムーズな動きがなかなか気持ちいい。 このSmooth Navigation Menuは、JavaScriptに詳しくないWebデザイナーでも扱いやすいように、スクリプト部分を一切い
Web素材作りを自動化！使えるPhotoshopアクション (1/3)
カッコいいWebサイトで見かけた画像加工の手法を真似したいときには、やっぱりPhotoshopの出番だ！ これまで手軽に使えるブラシやカスタムシェイプ、グラデーションライブラリと、Web画像の作成に使えるアイテムをいろいろと紹介してきたが、ある意味究極ともいえるのが「アクション」だ。 アクションとは、Photoshop上での一連の操作をあらかじめ記録しておき、ワンクリックで再現できるようにしたもの。たとえば、画像のカラーモードを変更して、決まったサイズに変更して、フチをぼかして、ドロップシャドウをかけて……といったいくつもの作業を繰り返す“お決まり”の画像を大量に作るのに、いちいち1枚ずつファイルを開いて、操作を繰り返す、というのはあまりにげんなりだ。「アクション」は、Excelで言うところのマクロのように、こうした反復作業に威力を発揮する便利機能なのだ。 アクションの作成は簡単で、Pho
Photoshopブラシを効率よく整理する5つの方法 (1/3)
Webデザインに便利なPhotoshopブラシ。ネット上に大量に公開されているブラシライブラリを使えば、カッコいい背景やロゴも手軽に作れる（関連記事1、関連記事2）。だが簡単に使えるだけに、新しいブラシをついつい追加しすぎてしまい、管理不能になってしまった――という方も少なくないだろう。 この記事では、大量のブラシを効率よく整理する方法を紹介する。ブラシの整理に困ったときにぜひ試してみよう（以降の操作は「Photoshop CS2」をもとにしています）。 1：やみ雲に追加してしまったブラシの“捨て方” 整理の基本は、身の回りの荷物と同じ。「これは使わない」と思ったものを思い切ってさっさと捨ててしまうことだ。 以前の記事で紹介したとおり関連記事、ネット上でダウンロードしたブラシファイル（ABRファイル）は、Photoshopのブラシパレット→[ブラシファイルの読み込み]で選ぶだけで追加できる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
