jQuery逆引きリファレンス
親要素を削除するには?(unwrap)
現在の要素の親に当たる要素を削除するunwrapメソッドの基本的な使い方を説明。これ以外の要素削除系メソッドとの違いも簡単にまとめる。
jQuery逆引きリファレンス
要素セットに、指定された条件に合致する要素が含まれるかを判定するには?(is)
isメソッドを使って、指定した条件に合致する要素が、現在の要素セットに1つ以上含まれているかどうかを判定する方法を説明。また、jQuery 1.7前後で発生した挙動の変化についても言及する。
jQuery逆引きリファレンス
現在利用しているjQueryのバージョンを確認するには?
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
jQuery逆引きリファレンス
要素セットから特定の子要素を持つ要素だけを取得するには?(has)
jQueryオブジェクトで保持している要素セットから、特定の子要素を持つ要素のみを取得できるhasメソッドの基本的な使い方を説明する。
jQuery逆引きリファレンス
要素セットからn番目の要素を取得するには?(eq)
jQueryオブジェクトで保持している要素セットから、指定したインデックス番号の要素のみを取得できるeqメソッドの基本的な使い方を説明する。
jQuery逆引きリファレンス
現在の要素セットからm~n番目の要素を取得するには?(slice)
jQueryオブジェクトで保持している要素セットから、指定したm~n番目の要素のみを取得できるsliceメソッドの基本的な使い方を説明する。
jQuery逆引きリファレンス
要素セットから指定の条件に合致したものを取り除くには?(not)
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
jQuery逆引きリファレンス
要素セットの内容を順に処理するには?(map)
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
jQuery逆引きリファレンス
親子/兄弟関係にある要素を行き来するには?(parents/parent/prev/prevAll/next/nextAll/siblings/children)
parents/parent/prev/prevAll/next/nextAll/siblings/children/endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子/兄弟関係にある要素を取得する方法を説明する。
jQuery逆引きリファレンス
要素セットを指定の条件で絞り込むには?(filter)
filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明する。
jQuery逆引きリファレンス
異なるバージョンのjQueryを共存させるには?(jQuery.noConflict)
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
jQuery逆引きリファレンス
jQueryを他のライブラリと共存させるには?(jQuery.noConflict)
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
jQuery逆引きリファレンス
特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])
Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
Electronデスクトップアプリ開発入門(5)
Electronアプリのデバッグと、パッケージ化
本格的にElectronアプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。
Electronデスクトップアプリ開発入門(4)
Electron APIデモから学ぶ実装テクニック ― システムとメディア
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はシステムとメディアの実装方法を基礎から説明する。
jQuery逆引きリファレンス
イベントリスナーをそのままに、要素を削除するには?(detach)
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除/再生成ではなく、非表示/表示の利用推奨についても言及する。
GrapeCity GARAGE: SpreadJS機能概説(3)[PR]
ExcelライクなスプレッドシートUIを持つWebアプリの開発に挑戦してみた(SpreadJS活用)[PR]
JSONデータを活用した表とグラフの作成や、Excel互換関数による計算、印刷・CSVファイル出力といった機能を持つシングルページWebアプリの開発を体験してみよう。
Electronデスクトップアプリ開発入門(3)
Electron APIデモから学ぶ実装テクニック ― ネイティブUIと通信
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はネイティブUIと通信の実装方法を基礎から説明する。
SpreadJS機能概説(2)[PR]
SpreadJSで何が開発できるのか? 主要機能とコードをまとめて知ろう[PR]
Web向けスプレッドシートUIが簡単に作れるSpreadJS。具体的には何が実現できるのか? スクリーンキャプチャ画像とシンプルなコードで、主要機能と開発のイメージを手っ取り早くつかもう。
Electronデスクトップアプリ開発入門(2)
Electron APIデモから学ぶ実装テクニック ― ウィンドウ管理とメニュー
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はウィンドウ管理とメニューの実装方法を基礎から説明する。
jQuery逆引きリファレンス
アニメーションを一時停止するには?(delay)
実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。
SpreadJS機能概説(1)[PR]
Excelライクなグリッド表示(スプレッドシート、表計算)を簡単に作れるJavaScriptライブラリ「SpreadJS」の機能概要[PR]
Web上でもExcel形式の表計算型のデータ入力やデータ表示を実現したい?! それならJavaScript UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。
Electronデスクトップアプリ開発入門(1)
Electronとは? アーキテクチャ/API/インストール方法/初期設定
Windows/macOS/Linuxで実行できるデスクトップアプリをWeb技術で作ろう! Electronの概要から開発を始めて動かすところまでを解説する。
jQuery逆引きリファレンス
Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
特集:続・UIコンポーネント「Wijmo」の魅力[PR]
「5年後も使い続けたい」JavaScript UIコンポーネントを目指す「Wijmo」とは?[PR]
jQuery、Angular 2、React……。時代とともに次々と登場する新しいJavaScriptライブラリのいずれにも対応してきた実績を持つUIコンポーネントがWijmo。そのカギは、特定のフレームワークに依存しない、徹底したWeb標準への準拠だ。
jQuery逆引きリファレンス
Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
jQuery逆引きリファレンス
Ajax通信の前に処理を実行するには?($.ajax[beforeSend])
Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。
jQuery逆引きリファレンス
非同期通信のキャッシュを無効化するには?($.ajax[cache])
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
jQuery逆引きリファレンス
一般的なAjax通信を実装するには?($.ajax)
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。
jQuery逆引きリファレンス
既存の要素をコピーするには? ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
jQuery逆引きリファレンス
現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド
現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできる。
Windows 10 Anniversary Updateの新機能【開発者編】
Microsoft Edge: HTML5/JavaScript最新標準仕様への新応とF12開発者ツールの新機能
Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況/オープンソース化/追加されたHTML5標準/F12開発ツールの新機能」をWeb開発者向けに概説する。
AngularJS TIPS
AngularJSのディレクティブを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「ディレクティブ」の単体テストを記述し、それを実行する方法を解説する。
AngularJS TIPS
自作ディレクティブの挙動を定義するには?(controller/controllerAs/bindToControllerプロパティ)
テンプレートに基づき出力されるHTMLコードの内容を、イベントハンドラーなどを活用して動的に切り替えるために、コントローラー付きの独自ディレクティブを作成する方法を説明する。
AngularJS TIPS
自作ディレクティブの属性にAngular式や関数を設定するには?(scopeプロパティ)
自作ディレクティブ呼び出し側で指定した「属性の値(Angular式や関数)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
AngularJS TIPS
ディレクティブで属性を設定するには?(scopeプロパティ)
自作ディレクティブ呼び出し側で指定した「属性の値(文字列)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
AngularJS TIPS
ディレクティブ配下のコンテンツをテンプレートに反映させるには?(transcludeプロパティ)
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
jQuery逆引きリファレンス
既存の要素を別の要素で置き換えるには? ― replaceWith/replaceAllメソッド
既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。
AngularJS TIPS
ディレクティブで利用するテンプレートを外部ファイル化するには?(templateUrlプロパティ)
ビューの操作/生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で<script>要素としてテンプレートを宣言する方法も説明する。
AngularJS TIPS
ディレクティブを自作するには?(directiveメソッド)
AngularJSで、ビューの操作/生成を独立させて独自ディレクティブを作成する基本的な定義方法と使用例を説明する。
jQuery逆引きリファレンス
既存の要素を別の場所に移動するには? ― insertBefore/insertAfter/prependTo/appendToメソッド
既存の要素を、指定した要素の直前/直後/子要素先頭/子要素末尾の位置に移動する方法を説明する。
特集:UIコンポーネント「Wijmo」の魅力[PR]
JavaScript製UIライブラリ選定の裏事情と、実用サービスでの使いこなしテクニック(弥生会計 オンライン+Wijmoの場合)[PR]
数が多すぎて選定が難しいWeb用のUIライブラリ。PC向け会計ソフトの「弥生」の場合、クラウドサービス開発に当たってどう考えて選定したのか。UIライブラリ選定の参考とするため、その理由・背景と活用ノウハウを聞いた。
AngularJS TIPS
AngularJSのコントローラーを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「コントローラー」の単体テストを記述し、それを実行する方法を解説する。
jQuery逆引きリファレンス
ページに新たな要素を挿入するには? ― insertBefore/insertAfter/prependTo/appendTo/before/after/prepend/appendメソッド
HTML文字列で要素を作成してから、指定した場所にそれを挿入する方法を解説。また結果は同じになるが少し手順を変えて、指定した場所にHTML文字列で要素を生成する方法を説明する。
AngularJS TIPS
AngularJSのサービスを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「サービス」の単体テストを記述し、それを実行する方法を解説する。
AngularJS TIPS
AngularJSアプリの単体テストを実施するには?(実行編)
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSアプリの単体テストを記述して、それをテスト実行するまでの手順を説明する。
jQuery逆引きリファレンス
jQuery1.x/2.xで作成したアプリをjQuery 3に対応させるには?
2016年6月、jQuery 3.0が正式リリースされた。今後は、従来バージョンのjQueryを使った既存のサイト/ページを、最新のバージョン3に徐々に移行していこう。移行ライブラリ「jQuery Migration」を使った方法を解説する。
AngularJS TIPS
AngularJSアプリの単体テストを実施するには?(準備編)
AngularJSで一般的に採用されているテスティングフレームワーク「Karma+Jasmin」による単体テスト環境を構築する手順を説明する。
AngularJS TIPS
パラメーター付きのサービスを定義するには?(providerメソッド)
value/service/factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。
Build Insider Survey【2016年6月実施】
2016年、ReactがAngularを抜いて1番人気に! JSライブラリの利用意向はますます高まっている
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2016年度はこれらを押さえよう。
jQuery逆引きリファレンス
フォーム要素に対して値を設定するには?(val)
valメソッドを使ってフォーム要素の値を設定する方法を説明。また、利用上の注意点や、値をクリアする方法、応用例として全てのチェックボックスを選択/解除する方法も示す。
AngularJS TIPS
アプリ内でよく利用するビジネスロジックを定義するには?(factoryメソッド)
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
jQuery逆引きリファレンス
ラジオボタン/チェックボックス/選択ボックスの選択テキストを取得するには?(val)
valメソッドを使って選択テキストを取得する方法を、ラジオボタン/チェックボックス/選択ボックス/リストボックスなどフォーム要素ごとに説明する。
AngularJS TIPS
複数のコントローラー間で共有すべき値を管理するには?(constantメソッド)
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はconstantメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
複数のコントローラー間で共有すべき値を管理するには?(valueメソッド)
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はvalueメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。
jQuery逆引きリファレンス
フォーム要素からの入力値を取得するには?(val)
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も示す。
AngularJS TIPS
日付/時刻値を入力する際にタイムゾーンを加味するには?(ng-model-options)
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を<input>要素から取得する方法を説明する。
AngularJS TIPS
モデルへの入出力に際して処理を介するには?(ng-model-options)
入力フォームとモデルをバインドした際に、独自のゲッター/セッター関数を仲介させることで、そのモデルに出し入れする値を検証/加工する方法を説明する。
jQuery逆引きリファレンス
親要素に対する相対的な表示位置を取得するには?(position)
positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。
AngularJS TIPS
不正な入力値もモデルに反映させるには?(ng-model-options)
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
AngularJS TIPS
画像を動的に生成するには?(ng-src/ng-srcset)
<img>タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
AngularJS TIPS
モデルをバインドするテンプレートを指定するには?(ng-bind-template)
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
AngularJS TIPS
$injectorサービスでサービスの取得/存在確認を行うには?($injector)
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has/get/instantiateメソッドを解説する。
jQuery逆引きリファレンス
ページのスクロール位置を設定/取得するには?(scrollTop/scrollLeft)
scrollTop/scrollLeftメソッドを使ってページスクロールの垂直位置/水平位置を設定もしくは取得するための基本的な方法を説明する。
AngularJS TIPS
AngularJSの管理外でサービスを注入するには?($injector)
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できる。その基本的な利用方法を説明する。
AngularJS TIPS
複数のオブジェクトを結合するには?(extend/merge)
angular.extendメソッドを利用して、既存の複数のオブジェクトを結合する方法と注意事項を解説。また、入れ子になったオブジェクトを再帰的にマージする方法も説明する。
jQuery逆引きリファレンス
URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。
AngularJS TIPS
コンテンツ・セキュリティ・ポリシーを利用する(ng-csp)
セキュリティフレームワーク「CSP」による制限ポリシーを有効にした場合に、AngularJSでは特定のケースでエラーとなる。そのケースの内容と回避方法を解説する。
AngularJS TIPS
配列/オブジェクトをコピーするには?(copy)
配列のコピーで、JavaScript標準のconcatメソッドを使う場合とAngularJSのcopyメソッドを使う場合の違いを説明。シャローコピーとディープコピーとは?
jQuery逆引きリファレンス
指定された言語に対応する要素を取得するには? ― :langフィルター
:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。
AngularJS TIPS
ルーティングの挙動/設定をカスタマイズするには?($routeProviderプロバイダー)
「テンプレートを文字列で指定(templateパラメーター)」「リダイレクト時の規則をカスタマイズ(redirectToパラメーター)」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。
AngularJS TIPS
URL経由でパラメーター情報を引き渡すには?($routeProviderプロバイダー)
ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説する。
jQuery逆引きリファレンス
子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター
:first-of-type/:last-of-typeフィルターにより同じ要素の中で先頭/末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type/nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。
AngularJS TIPS
ルーティング機能を実装するには?($routeProviderプロバイダー)
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法(ルーティングの定義/コントローラー/テンプレートなど)について解説する。
AngularJS TIPS
AngularJSを手動で起動するには?(bootstrap)
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
jQuery逆引きリファレンス
子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター
:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説。
AngularJS TIPS
thisキーワードの参照先を固定するには?(bindメソッド)
分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。
AngularJS TIPS
既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
jQuery逆引きリファレンス
子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター
:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できる。
AngularJS TIPS
パラメーターを持ったフィルターを定義するには?(filter/identity/noopメソッド)
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
AngularJS TIPS
フィルターを自作するには?(filterメソッド)
独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。
jQuery逆引きリファレンス
登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明する。
AngularJS TIPS
AngularJSアプリでjQueryを利用するには?(element/ng-jq)
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
AngularJS TIPS
AngularJSで文書ツリーを操作するには?(element)
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
jQuery逆引きリファレンス
親子/兄弟関係にある要素を取り出すには? ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。
AngularJS TIPS
アプリ共通の例外処理を実装するには?($exceptionHandler)
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
AngularJS TIPS
$cookiesサービスを利用する際の注意点とは?($cookies)
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
jQuery逆引きリファレンス
属性値で目的の要素を絞り込むには? ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。
AngularJS TIPS
クッキーを読み書きするには?($cookies)
AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
jQuery逆引きリファレンス
id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
AngularJS TIPS
指定された時間の経過で処理を実行するには?($interval/$timeout)
ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。
AngularJS TIPS
JSON形式のWeb APIにアクセスするには?($http)
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。
AngularJS TIPS
サーバーサイドとHTTP POSTで非同期通信するには?($http)
AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。
jQuery逆引きリファレンス
JSON形式のWeb APIにアクセスするには?($.getJSON)
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
AngularJS TIPS
サーバーサイドと非同期通信するには?($http)
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。
jQuery逆引きリファレンス
HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)
$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。
AngularJS TIPS
ログをコンソールに出力するには?($log)
AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。
AngularJS TIPS
ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。
Vorlon.js入門
Vorlon.jsとは? ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか? このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。
AngularJS TIPS
交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)
ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
HTML TIPS
最新のHTML5/CSS/JavaScript API/CSS機能が使えるかを判断するには?
HTML5.1などの最新仕様を使いたい場合、それが対象ブラウザーでも使えるかどうかを判断する方法を説明。実際に試す前に「Can I use」の情報を確認しよう。
AngularJS TIPS
要素のスタイルクラスを操作するには?(ng-class)
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
AngularJS TIPS
配列からm~n件目の要素を取り出すには?(limitTo)
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。
jQuery逆引きリファレンス
JavaScriptとHTMLを明確に分離するには?(data)
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。
jQuery逆引きリファレンス
要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)
focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
AngularJS TIPS
数値(単数/複数)によって表示を切り替えるには?(ng-plurlize)
ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。
プロ生ちゃんと学ぶ! TypeScript入門(3)
TypeScriptの機能と文法、まずはこの3つを押さえよう! 構造的部分型、ジェネリクス、アロー関数式
TypeScriptには多くの機能や文法があり、最新の1.5~1.6でさらに追加された。開発の実践を始める前に、数ある機能の中から最低限、「構造的部分型」「ジェネリクス」「アロー関数式」の3つを押さえておこう。
AngularJS TIPS
式の値によって表示を切り替えるには?(ng-switch)
ng-switchディレクティブを使って、与えられた式の値に応じて、表示すべきコンテンツを切り替える方法を説明する。
jQuery逆引きリファレンス
アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)
各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
AngularJS TIPS
JavaScriptオブジェクトをJSON形式に変換するには?(json)
jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明する。
AngularJS TIPS
自作の検索条件/比較ルールで配列を検索するには?(filter)
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。
jQuery逆引きリファレンス
自作のアニメーションを実行するには?(animate)
animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。
AngularJS TIPS
配列の内容をフィルターするには?(filter)
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。
jQuery逆引きリファレンス
実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
AngularJS TIPS
独自の規則で配列をソートするには?(orderBy)
独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。
TypeScriptの基礎と文法
TypeScript早わかりチートシート【1.5.3対応】
TypeScript 1.5正式リリース。最新言語仕様を速習しよう! TypeScriptを使うときに役立つ情報がまとまったチートシート(1クリックで試せるサンプル付き)。
jQuery逆引きリファレンス
あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。
AngularJS TIPS
数値データに桁区切り文字を付けるには?(number/currency)
数値データを、ロケール別の桁区切り文字列に整形したり、ロケール別の通貨記号を付加したりして出力する方法を説明する。
AngularJS TIPS
文字列を大文字/小文字に変換するには?(lowercase/uppercase)
lowercase/uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase/angular.uppercaseメソッドについても紹介する。
jQuery逆引きリファレンス
非同期通信で取得したコンテンツをページに反映させるには?(load)
loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。
AngularJS TIPS
入力値のモデルへの反映タイミングを変更するには?(ng-model-options)
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
AngularJS TIPS
別ファイルやJavaScriptでメッセージを管理するには?(ng-message-include/ng-message-exp)
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明する。
jQuery逆引きリファレンス
イベント処理を中断するには?(preventDefault/stopPropagation/stopImmediatePropagation)
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
AngularJS TIPS
式の真偽に応じて表示を切り替えるには?(ng-messages/ng-message)
条件式の値に応じてメッセージの表示/非表示を切り替えるために(例えばエラー時にメッセージ表示するなど)、ng-messages/ng-message属性を使用する方法を解説する。
jQuery逆引きリファレンス
イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト)
クリックした位置の座標や、押されたマウスボタンの種類といったマウス情報を、イベントオブジェクトの各種プロパティを使って取得する方法を説明する。
AngularJS TIPS
URL/メールアドレスからハイパーリンクを生成するには?(linky)
URL/メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
AngularJS TIPS
入力された区切り文字を配列に変換するには?(ng-list)
テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。
Build Insider Survey【2015年4月実施】
2015年、人気の「JavaScriptライブラリ&ツール」はどれ? Angular vs. Reactの行方
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2015年度はこれらを押さえよう。
AngularJS TIPS
要素の表示/非表示を切り替えるには?(ng-show/ng-hide/ng-open)
真偽条件に応じて要素の表示/非表示を切り替えるために、ng-show/ng-hide属性を使用する方法を解説する。また、<details>要素の表示/非表示を切り替えるng-open属性の使い方も紹介する。
プロ生ちゃんと学ぶ! TypeScript入門(2)
TypeScriptの基本のキ。JavaScriptをベースに「TypeScriptをつまみ食い」しよう!
TypeScriptの基本中の基本である「型」「クラス」「インターフェース」をプロ生ちゃんと学ぼう。「今、TypeScriptやって損しない?」という疑問・不安についても回答する。
jQuery逆引きリファレンス
マウスポインターが要素に出入りした時の処理を実装するには?(mouseover、mouseout、mouseenter、mouseleave、hover)
違いが分かりにくい「mouseover/mouseout」と「mouseenter/mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。
AngularJS TIPS
ハイパーリンクを動的に生成するには?(ng-href)
スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。
jQuery逆引きリファレンス
文書ツリー上に存在しない要素に対してイベントリスナーを追加するには?(on)
onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind/live/delegateメソッドをonメソッドに置き換える方法も説明する。
プロ生ちゃんと学ぶ! TypeScript入門(1)
TypeScriptってどんなもの? プロ生ちゃんと始めてみよう!
TypeScriptが気になる人は、本連載で楽しく優しく学ぼう。TypeScriptの特徴から、Atomエディター開発環境の構築まで紹介。
AngularJS TIPS
イベントリスナーを登録するには?(ng-clickなど)
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
jQuery逆引きリファレンス
イベントメソッドで提供されないイベントを処理するには?(on)
onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明する。
AngularJS TIPS
ビューにHTML文書をバインドするには?(ng-bind-html)
文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。
AngularJS TIPS
モデルをビューにバインドするには?(ng-bind/ng-cloak)
エクスプレッションが一瞬表示されてしまう不具合を解消して、AngularJSの双方向データバインディングを実現する方法を説明する。
jQuery逆引きリファレンス
配列の内容を検索するには?($.inArray)
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
AngularJS TIPS
モデルをテキストボックスなどのフォーム要素にバインドするには?(ng-model)
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。
jQuery逆引きリファレンス
配列から特定の条件で要素を取り出すには?($.grep)
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
jQuery逆引きリファレンス
配列の内容を順番に加工するには?($.map)
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
AngularJS TIPS
AngularJSでコントローラーを定義するには?
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
jQuery逆引きリファレンス
配列の内容を順番に処理するには?($.each)
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明する。
jQuery逆引きリファレンス
変数の型情報を判定するには?($.isXxxxx/$.type)
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
AngularJS TIPS
AngularJSを利用するには?
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
jQuery逆引きリファレンス
要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)
任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。
エッジなWebエンジニアのためのブラウザー情報源
Chrome 39で追加されたGenerators機能とは
11月18日に公開されたChrome 39安定版の新機能を紹介。C#やRubyでおなじみのyieldキーワードが使えるようになった。
jQuery逆引きリファレンス
要素のプロパティを取得/設定するには?(prop)
任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。
書籍転載:ASP.NET MVC 5 実践プログラミング
開発者に人気のCSSフレームワーク「Bootstrap」入門
「レスポンシブデザインに対応したグリッドシステム」などの特長で、特に開発者に人気のCSSフレームワーク「Bootstrap」について解説する。書籍転載の27本目(応用編「8-2-5」)。転載は今回で終了。
jQuery逆引きリファレンス
要素の属性を操作するには?(attr/removeAttr)
任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。
jQuery逆引きリファレンス
要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)
要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(6)
AngularJSの方法でMonacaアプリを作ってみよう(後編)
Monacaアプリ開発実践編の第3弾(連載最終回)。路線名を選択して、時刻表を表示するアプリの作成方法を説明する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
AngularJSの方法でMonacaアプリを作ってみよう(中編)
Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(4)
AngularJSの方法でMonacaアプリを作ってみよう(前編)
実践的なMonacaアプリ開発の一例として、オープンデータのWebサービスを使ったアプリの作成方法を説明する。Monacaアプリ開発実践編の第1弾。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(3)
Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ/コントローラー/表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。
jQuery逆引きリファレンス
要素のスタイルプロパティを変更するには?(css)
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
jQuery逆引きリファレンス
要素配下のテキストを取得/設定するには?(text/html)
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(2)
Monacaで作る、初めてのOnsen UIアプリ
新規作成した“初めてのOnsen UIアプリ”プロジェクトの各ファイルをAngularJS流に書き換える。そのアプリをデバッグビルドし、デバイスに実際にインストールする。
jQuery逆引きリファレンス
以前のバージョンで開発したアプリを最新のjQueryで動作させるには?
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
Build Insider Survey【2014年10月実施】
2015年に向けて人気が高まっている、JavaScriptライブラリ/スマートフォン/次世代デバイスなどの開発技術
開発者が「今後、使いたい」と考えている開発技術を、ランキング形式で発表。2014年度後半はこれらに注目しよう。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(1)
Onsen UI+AngularJSで効率的にモバイルアプリが作れるMonaca
HTML+CSS+JavaScriptを使ってスマホやタブレットで動作するアプリが簡単に作成できる「Monaca」を基礎から解説する入門者向け連載(改訂版)がスタート。今回はMonaca/Onsen UI/AngularJSの概要とMonaca IDE、Monacaデバッガーを紹介。
jQuery Mobile逆引きリファレンス
スクロール時に追加的にコンテンツを読み込むには?
スクロールの開始/終了のタイミングで発生するscrollstart/scrollstopイベントの基本的な使い方を説明。また、画面を縦方向にスクロールするためのsilentScrollメソッドについても紹介する。
jQuery Mobile逆引きリファレンス
data-defaults/data-enhanced属性でページの描画を高速化するには?
jQuery Mobileでパフォーマンスを改善する方法を解説。ウィジェットの動作パラメーターをデフォルト設定して解釈処理をスキップする方法と、文書ツリーの一部を手書きして自動生成をスキップする方法について紹介する。
jQuery Mobile逆引きリファレンス
ページレイアウトが変更したときに処理を実行するには?
ウィジェットのレイアウト状態が変化したとき(例えば開閉パネルが開いた/閉じたときなどに)、処理を実行する方法を説明する。
jQuery Mobile逆引きリファレンス
ページのロード/切り替え時に初期化/後処理を実行するには?
ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。
jQuery Mobile逆引きリファレンス
JavaScriptからjQuery Mobileページ間の移動を制御するには?
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
jQuery Mobile逆引きリファレンス
JavaScriptからフォーム要素を操作するには?
フォーム関連を自前で記述する場合、jQueryの知識を生かせるが、jQuery Mobile固有の注意点もある。その注意点を解説する。
jQuery Mobile逆引きリファレンス
$.mobile.pathオブジェクトでパス/URLの情報を取得/操作するには?
パスやURLを取得/操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
jQuery Mobile逆引きリファレンス
jQuery Mobileの動作パラメーターを設定するには?
jQuery Mobileやウィジェットの動作を変更できる「動作パラメーター」の基本的な使い方を解説する。
jQuery Mobile逆引きリファレンス
Sliderウィジェットで、スライダーを作成するには?
つまみをスライドして値を簡単に選択できるスライダーを作成するためのSliderウィジェットの基本的な使い方を説明する。
jQuery Mobile逆引きリファレンス
Filterableウィジェットによる検索ルールをカスタマイズするには?
リスト/テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。
jQuery Mobile逆引きリファレンス
Filterableウィジェットでリスト/テーブルなどに検索機能を付与するには?
リストやテーブル、ボタングループ/選択ボックスなど、任意の要素グループに対して検索機能を付与できるFilterableウィジェットの基本的な使い方を解説。
jQuery Mobile逆引きリファレンス
ListViewウィジェットで、アイコン付き、カウントバブル付きのリストビューを生成するには?
ListViewウィジェットを使って作成したリストに対して、サムネイル/アイコン画像やカウントバブル、見出し/補足情報を追加する方法を説明する。
いまさら聞けない最新Microsoft Azure
ここまで進化した、Azure Webサイトの世界観(2014年7月版)
IaaSからPaaSまで多様なサービスを提供するAzureの中でも特に重要性が増してきている「Webサイト」とは? その世界観を特徴付ける主要な機能を解説する。
jQuery Mobile逆引きリファレンス
ListViewウィジェットで作成したリストに区切り線を追加するには?
リスト項目をある固まりごとに区分けして視認性を高めたい場合にはデバイダー(=区切り線)を使用する。その追加方法を説明する。
連載:Visual StudioユーザーのためのTypeScript入門(2)
Visual StudioとTypeScriptでJavaScriptライブラリを活用する
TypeScriptでは大半のJavaScriptライブラリをすぐにそのまま活用できる。Visual Studioで手軽に使う方法や、独自のJavaScriptライブラリを使えるようにする方法を説明する。
jQuery Mobile逆引きリファレンス
ListViewウィジェットで階層型リストを作成するには?
初期状態では最上位の項目だけを表示して、そこから下位階層の項目にドリルダウンできる、階層化リストを作成するには、NestedListプラグインを使う。その利用方法を解説。
jQuery Mobile逆引きリファレンス
ListViewウィジェットで、ネイティブアプリ・ライクなリストビューを作成するには?
<ul>/<li>要素や<ol>/<li>要素をネイティブアプリで見かけるようなリッチなリストに整形できるListViewウィジェットの基本的な使い方を解説。
jQuery Mobile逆引きリファレンス
Textinputウィジェットでテキスト入力ボックスを設置するには?
jQuery Mobileでテキスト入力ボックスを設置するのは通常のフォームの場合と変わらない。それだけで角丸やシャドウ効果の効いた、ネイティブアプリ・ライクなテキストボックスへと整形してくれる。その内容を解説する。
jQuery Mobile逆引きリファレンス
jQuery Mobileで入力フォームを設置するには?
jQuery Mobileでフォームを設置する際の、よりjQuery Mobileらしいフォームを実装するために知っておきたいポイントと特性方法を説明する。
jQuery Mobile逆引きリファレンス
Selectmenuウィジェットで選択メニューを作成するには?
複数の選択肢から1つもしくは複数をページ閲覧者に選択させたいときに、通常の「ラジオボタン/チェックボックス」ではなく、タップして初めて選択オプションが表示される「選択メニュー」を使いたい場合がある。これを手軽に作成する方法を説明する。
jQuery Mobile逆引きリファレンス
Flipswitchウィジェットでオン/オフ選択のためのフリップスイッチを作成するには?
オン/オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。
jQuery Mobile逆引きリファレンス
Checkboxradioでラジオボタン/チェックボックスを作成するには?
標準のラジオボタン/チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。
jQuery Mobile逆引きリファレンス
jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには?
標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。
jQuery Mobile逆引きリファレンス
Collapsiblesetウィジェットで開閉可能なパネルを作成するには?
コンテンツ本体の表示/非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。
Build Insider Survey【2014年4月実施】
今、本当に人気がある「JavaScriptライブラリ&ツール」を調べてみた
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2014年度前半はこれらを押さえよう。
Build Insider Survey【2014年4月実施】
今後ますます勢いを増す「開発技術&ツール」を調べてみた
開発者が「今後、使いたい」と考えている開発技術を、ランキング形式で発表。2014年度前半はこれらに注目しよう。
Build Insider Survey (in April 2014)
We surveyed the most popular developer technology in Japan
The popularity rankings of development-technologies which developers want to use in the future.
jQuery Mobile逆引きリファレンス
Collapsibleウィジェットで開閉可能なパネルを作成するには?
タイトル領域をクリックすることでコンテンツ本体の表示/非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。
jQuery Mobile逆引きリファレンス
Tableウィジェットでレスポンシブルなテーブルを作成するには?(Reflow編)
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(テーブル/連票と表示形式そのものを切り替えるReflowモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。
Universal Windows Apps概説
Universal Windows Apps(ユニバーサルアプリ)とは? コードを共有しよう
コードを共有できる新しいプロジェクトタイプ「ユニバーサルアプリ」の概要と、基本的な開発方法を紹介。「UIコントロールで何が共通化でき、できないか」「プラットフォーム個別の実装方法」についても説明する。
jQuery Mobile逆引きリファレンス
Tableウィジェットでレスポンシブルなテーブルを作成するには?(Column toggle編)
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(列を選択的に表示するColumn toggleモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(10)
JavaScriptとネイティブの通信の仕組み ― JsAlert方式/ローカルHTTPサーバ方式
ついに書籍転載最終回。Apache Cordova/Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブの通信の仕組みの解説が完結する。
Visual StudioユーザーのためのTypeScript入門(1)
TypeScriptとは? Visual Studioを使って開発してみよう
1.0正式版がリリース。TypeScriptは、Visual Studio上でも開発できる。C#などでコードを書いているVisual Studioユーザー向けに、その利用手順や特徴を解説。
jQuery Mobile逆引きリファレンス
Popupウィジェットで画像ボックスやダイアログなどを作成するには?
ダイアログ/画像ボックス/ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(9)
カスタムURLスキーム方式/iOSで特定のページの読み込みを制限する
JavaScriptからネイティブ側へ命令を投げる方法(Android&iOS対応)を紹介。またiOSでセキュリティのために、特定のドメインのページの読み込みを制限する方法も紹介。書籍転載の9本目。
jQuery Mobile逆引きリファレンス
Popupウィジェットでポップアップを表示するには?
ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(8)
addJavascriptInterface方式(後編)/ネイティブからJavaScriptへ値を渡す
Apache Cordova/Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブとの通信の仕組みを解説。書籍転載の8本目。
jQuery Mobile逆引きリファレンス
Panelウィジェットで左右からスライド表示するには?
左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(7)
JavaScriptからネイティブの機能を呼び出す方法 ― addJavascriptInterface方式(前編)
Apache Cordova/Adobe PhoneGapによるハイブリッドアプリ内での、JavaScriptとネイティブとの通信の仕組みを解説する。書籍転載の7本目(「Part 2《実践編》 第11章 JavaScriptとネイティブとのブリッジ」より)。
jQuery Mobile逆引きリファレンス
Tabsウィジェットでタブパネルを作成するには?
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(6)
Android向けのCordovaプラグインを実装する
アプリの一部をネイティブで記述するには、プラグインの実装が必要。そこでAndroid向けにCordovaプラグインを実装する方法を解説。今回で「Cordovaアプリ開発の基礎」に関する部分の転載完了。
jQuery Mobile逆引きリファレンス
Navbarウィジェットでナビゲーションバーを作成するには?
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(5)
Cordovaプラグインを利用する
Cordovaで提供されているプラグインの概要と、実際にアプリのプロジェクトへプラグインを導入する方法を説明する。書籍転載の5本目。
jQuery Mobile逆引きリファレンス
jQuery Mobileページでアイコン付きのボタンを配置するには?
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(4)
Cordova:プラットフォームごとにカスタマイズする
アプリをクロスプラットフォーム対応にする際に、プラットフォームごとに少し違った挙動にする方法を解説。書籍転載の4本目。
jQuery Mobile逆引きリファレンス
jQuery Mobileページにボタンを配置するには?
jQuery Mobileページでボタンを設置するには、<button>/<a>/<input>要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(3)
Cordova: アプリの設定
Apache Cordovaアプリの開発準備が整ったら、そのアプリや、iOS/Androidなど特定のプラットフォームでの挙動の詳細を設定しよう。書籍転載の3本目。
jQuery Mobile逆引きリファレンス
jQuery Mobileページでローディング表示をカスタマイズするには?
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門(2)
Cordovaを用いてアプリを開発する
Cordovaアプリケーションを開発する手順を説明。書籍転載の2本目(「Part 1《基礎編》 第4章 Cordovaを用いたアプリ開発の流れ」より)。
jQuery Mobile逆引きリファレンス
jQuery Mobileページでハイパーリンクを設置するには?
jQuery Mobileにおけるリンクの挙動を解説。また、ページ遷移時のエフェクトやプリフェッチ機能についても説明する。
jQuery Mobile逆引きリファレンス
jQuery Mobileページでヘッダー/フッターの表示をカスタマイズするには?
ヘッダー/フッターを作成する方法を解説。また、ヘッダー/フッターの位置を固定したり、タップで非表示にしたりする方法なども紹介。
jQuery Mobile逆引きリファレンス
jQuery Mobileのテーマを設定(&ThemeRollerによる自作テーマ作成)するには?
サイトデザインを管理できる「テーマ」と「スウォッチ」の基本的な利用法を解説。
jQuery Mobile逆引きリファレンス
jQuery Mobileで基本的なページを定義するには?
基本的なページを作成する方法を解説。要素のid値を振る際の注意点と、1つのファイルで複数ページを管理する方法についても説明。
今、人気のJSライブラリ【2014年版】
人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較]
2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。
jQuery Mobile逆引きリファレンス
jQuery Mobileを利用するには?
jQuery Mobileの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery Mobileが動作するスマホ/タブレット環境と、jQuery Mobileページの基本構造を説明する。
jQuery UI逆引きリファレンス
ツールチップへの表示内容をカスタマイズするには?
画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。
Visual Studio Online “Monaco”入門(5)
Visual Studio Online “Monaco”のコードスニペット(Code Snippets)
Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」のIntelliSenseから利用可能な「コードスニペット」についてまとめる。
Visual Studio Online “Monaco”入門(1)
開発環境までもWeb化?! Visual Studio Online “Monaco”機能徹底解説(Win&Mac対応)
Visual Studioのオンライン版?! Webブラウザー上で動作する開発環境“Monaco”で開発はどう変わるのか? その全機能をさまざまなブラウザーで徹底的に試してみる。さらにデスクトップアプリ開発も実験してみる。
jQuery UI逆引きリファレンス
Tooltipウィジェットでツールチップを表示するには?
対象要素にマウス・ポインターを当てるとポップアップするツールチップを実装できるTooltipウィジェットの基本的な使い方を解説。
jQuery UI逆引きリファレンス
Progressbarウィジェットでプログレスバーを作成するには?
時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。
jQuery UI逆引きリファレンス
Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?
ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。
jQuery UI逆引きリファレンス
Selectableウィジェットで選択可能なリストを作成するには?
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
連載:Microsoft技術におけるアイデンティティ連携開発のいま(4)
Azureの認証におけるその他サービス ~ Azureモバイルサービス、多要素認証
最終回。Azureモバイルサービスや、多要素認証など、これまでの連載で取り上げなかった、認証に関わる先進的な技術を簡単に紹介する。
jQuery UI逆引きリファレンス
AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには?
AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。
jQuery UI逆引きリファレンス
AutoCompleteウィジェットの検索/表示方法をカスタマイズするには?
AutoCompleteウィジェットのイベントやメソッドを利用しながら、候補リストの検索/選択時の処理をカスタマイズする方法について説明。
jQuery UI逆引きリファレンス
AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには?
テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示するオートコンプリート機能を実現できる、AutoCompleteウィジェットの基本的な実装方法を紹介。
jQuery UI逆引きリファレンス
jQuery UIで拡張されたエフェクト機能を利用するには?(effect/xxxxxClass編)
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。
Breeze入門
データ管理JavaScriptライブラリ「Breeze」とは
クライアントサイドのJavaScriptでのデータ処理を簡単にするライブラリ「Breeze」を紹介。JSONデータをキャッシュしたり、ODataのクエリ文字列などを利用したデータのソートやページング処理をしたりできる。
jQuery UI逆引きリファレンス
jQuery UIの拡張されたエフェクトを利用するには?(show/hide/toggle/effect編)
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
jQuery UI逆引きリファレンス
Sliderウィジェットでスライダーを生成するには?
ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。
jQuery UI逆引きリファレンス
JavaScriptからダイアログ・ボックスを動的に操作するには?
Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。
jQuery UI逆引きリファレンス
Dialogウィジェットでダイアログ・ボックスを生成するには?
Dialogウィジェットで、テキストやボタン、フォーム要素などを配置できるダイアログ・ボックスを作成する方法を紹介。
jQuery UI逆引きリファレンス
アコーディオン・パネルの内容を外部ファイル化するには?
Accordionウィジェットのイベントやメソッドを利用しながら、アコーディオン・パネルの内容を外部ファイル化する方法を紹介。
jQuery UI逆引きリファレンス
Accordionウィジェットでアコーディオン・パネルを生成するには?
タイトル部分をクリックすることでコンテンツが開閉するアコーディオン・パネルを実装できる「Accordionウィジェット」の基本的な使い方を説明する。
jQuery UI逆引きリファレンス
リサイズ可能なパネルを生成するには?
指定の要素を(画像、テキストにかかわらず)マウスのドラッグ操作でリサイズできるようにするResizableウィジェットの基本的な使い方を説明する。
jQuery UI逆引きリファレンス
Buttonウィジェットでさまざまなボタンを生成するには?
<button>、<input type=”radio”>、<input type=”checkbox”>、<input type=”submit”>、<a>といった要素を、一様にボタンに整形できるButtonウィジェットの基本的な使い方を説明する。
jQuery UI逆引きリファレンス
Sortableウィジェットで並べ替え可能なリストを生成するには?
指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。
jQuery UI逆引きリファレンス
Tabsウィジェットでタブ・パネルを作成するには?
パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。
jQuery UI逆引きリファレンス
DatePickerウィジェットで日付選択ボックスを作成するには?
日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。
jQuery UI逆引きリファレンス
jQuery UIを利用するには?
jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
JavaScriptベースのデータベース[TaffyDB]
書籍転載の18本目(書籍内の番号は「69」)。JavaScriptのJSON形式のデータに対して、データベースのような感覚でアクセスするためのライブラリ「TaffyDB」の基礎と、基本的な使い方を解説する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
HTML5+JavaScriptベースでゲームを作る[enchant.js]
書籍転載の17本目(書籍内の番号は「65」)。HTML5+JavaScriptで作られたゲーム・エンジン「enchant.js」の基礎と、基本的な使い方を解説する。
第1回 Build Insider OFFLINE
データバインディングによるインタラクティブなUIの効率的な表現 [スライド&動画]
近年注目を浴びるJavaScriptフレームワークの多くで採用されるデータ・バインディング。そこにはよりインタラクティブなUIがWebアプリにも求められている背景があります。このセッションでは、DOM操作を主体とした伝統的な手法と比較しつつ、データ・バインディングがインタラクティブなUIをどのように効率よく表現するのかを説明します。
特集:JavaScriptライブラリ「Modernizr」入門
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5/CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
JavaScriptでクッキーを簡単に操作する[jquery.cookie]
書籍転載の16本目(書籍内の番号は「61」)。JavaScriptでのクッキー操作をごくシンプルなコードで実装できる「jquery.cookieプラグイン」の基本的な使い方を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
処理を短く記述する[CoffeeScript]
書籍転載の15本目(書籍内の番号は「64」)。CoffeeScriptの基本構文のうち、数値や文字列表現、配列、for~in、unless/untilの記述方法を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
オブジェクト指向でコードを記述する[CoffeeScript]
書籍転載の14本目(書籍内の番号は「63」)。CoffeeScriptを使用すると、クラスベースのオブジェクト指向で記述できる。その内容を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
短くかつ安全で高性能なコードを書く[CoffeeScript]
書籍転載の13本目(書籍内の番号は「62」)。短い記述で、安全かつ高性能なJavaScriptコードを生成できる「CoffeeScript」の基本的な使い方を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
JasmineのSpy機能でテストダブルを作成する
書籍転載の12本目(書籍内の番号は「109」)。Jasmineでテスト対象オブジェクトが持つメソッドの戻り値を固定値に変更したり、そのメソッドが実行されたかどうかを検証したりするために、Spy機能を使用する方法を解説。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
RSpec風の構文でBDD用のテスト・コードを記述する[Jasmine]
書籍転載の11本目(書籍内の番号は「108」)。RSpec風のテスト・コードが書けるBDD(ビヘイビア駆動開発)テスティング・フレームワーク「Jasmine」の基本的な使い方を説明する。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[Underscore.js]テンプレートとオブジェクトから文字列を生成する
書籍転載の10本目(書籍内の番号は「101」)。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[Underscore.js]さなざまなコレクション操作を行う
書籍転載の9本目(書籍内の番号は「100」)。ユーティリティ・ライブラリ「Underscore.js」の基礎として、さまざまなコレクション操作する方法を説明。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[QUnit]テストコードを実行し、ブラウザで結果を確認する
書籍転載の8本目(書籍内の番号は「111」)。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[Knockout]MVVMパターンでアプリケーションを構築する
書籍転載の7本目(書籍内の番号は「89」)。MVVM(Model-View-ViewModel)パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[Sammy.js]URLによって処理を分割する
書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
Backbone.jsのCollectionを操作し、イベントを購読する
書籍転載の3本目(書籍内の番号は「88」)。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd/change/remove/resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
Backbone.jsのModelを操作し、イベントを購読する
書籍転載の2本目(書籍内の番号は「87」)。Backbone.jsのModelの内部状態を変更するメソッドが呼ばれた際に発生するchangeイベントを購読することで、Modelの状態変更を監視する方法を説明。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
MVCパターンでアプリケーションを構築する(Backbone.js)
書籍転載の1本目(書籍内の番号は「86」)。クライアントサイドMVCフレームワークの定番ライブラリの1つ「Backbone.js」の基本的な使い方を解説。
特集:最新技術を活用したWebアプリとは?
ASP.NET SignalRとknockout.jsで実現する次世代Webアプリ
SignalRとknockout.jsは相性がよく、これらの最新技術を組み合わせることで、リアルタイムに更新されるWebアプリを簡単に構築できる。その方法を紹介する。