はじめてのBootStrapインストール(導入)手順

css

CSSフレームワークのBootStrapの導入手順を紹介します。
CSSのデザインは、非デザイナのエンジニアの方が一番悩んでいることではないでしょうか。
BootStrapを使うことで、今風のカッコイイUIが簡単につくれます。
非デザイナには敷居の高いwebレスポンシブもBootStrapを使うことで簡単に実現出来ます。
UIのデザインであれこれ悩んでいるかたは是非導入しましょう!
続きを読む

追加した要素(class)にclickイベントを設定する(.on編)

jquery

jQueryで追加した要素に対して、clickイベントを追加する方法を紹介します。
具体的には、jQueryの「append」で追加した要素(aタグやpタグ)にclickイベントを追加する方法と言えば、イメージしやすいかと思います。
イベントを追加する方法は、jQueryには「.live()」や「.bind()」が用意されていますが、今後はjQuery1.7で登場した「.on()」を使用することが推奨されています。
続きを読む

Ajaxで値を複数送信する方法

ajax

AjaxでAPI(サーバサイド)へ複数個の値を送信する方法を紹介します。
AjaxでAPI(サーバサイド)へ値を渡す方法は、以前「AjaxでAPIにJSON形式の値を送信する方法」「Ajaxで文字列配列を送信する方法」を紹介しました。
今回は、複数個の値をAPI(サーバサイド)へ渡す方法を紹介します。
実際の開発では、1つの値を渡す場面よりも複数個の値を渡す場面の方が多いと思います。
続きを読む

Ajaxで文字列配列を送信する方法

ajax

AjaxでAPIにJSON形式の値を送信する方法を紹介しました。
今回は文字列配列をAPI(サーバサイド側)に渡す方法を紹介します。
チェックボックスの値等は、文字列ではなく、配列でAPI(サーバサイド側)に渡すことがほとんどです。
本格的なAPIをつくるうえで、パラメータの受け渡しは重要です。本ブログを参考して頂けると幸いです。
続きを読む

Ajax通信時にログを画面表示するデバッグ方法を紹介します

ajax

1つの画面で複数のAPIへ通信していると、どんな操作でAPIが呼ばれるのかがわかりにくくなってきます。
特に開発途中であれば、Ajaxのリクエストとレスポンスは常に表示しておいた方がバグの早期発見につながります。
alertをいれてデバッグする手法も多いと思いますが、alertをいれるとボタンクリックなど余計な動作が入ったり、alertウィンドウを閉じると出力している内容が消えたりと不便です。
今回は、画面上にAjaxのリクエストとレスポンスを表示する方法を紹介します。
続きを読む

AjaxでAPIにJSON形式の値を送信する方法

ajax

Ajaxで引数をAPI側(サーバサイド側)に渡す場面も多いと思います。
渡すパラメータが単純な「key=value」形式であれば、URLの後ろに「key&value」とURLパラメータ形式でつけておけば問題ありません。
特にJSON等の複雑な形式であれば、単純なURLパラメータではなく、ajaxのdataを使うことによって、どんなパラメータを送信しているのかが一目でわかり、ソースの可読性があがります。
続きを読む

Ajaxの通信エラー情報を表示する方法

ajax

HTTP通信でエラーになったのか、サーバサイドでエラーになったのか、原因を切り分けをしていくには、エラー情報をきちんと取ることからはじまると思います。
Ajaxを使い始めたころは、HTTP通信のエラー情報の取得がうまくいかなくて試行錯誤していました。
今回は非同期通信中にエラーが発生した時のエラー情報参照方法について解説します。
続きを読む