WEBデータベースアプリケーション習得科<<2012-4月-5月>>

Department of Web Database Application

<<April / 2012>>

当サイトは、HITパソコンスクールによる求職者支援訓練、WEBデータベースアプリケーション習得科の携帯端末アプリケーション入門の内容です。WebKitを用いたブラウザでご覧ください。（講師：中野洋介）

スマートフォンプログラミングの基礎知識

  1. スマートフォンプログラミングの基礎知識

  2. HTMLの変遷

    Webサイト制作手法の変遷について知りましょう。

  3. HTML5の基礎知識

    HTML5で何が変わったか知りましょう。

  4. CSS3の基礎知識

    CSS3でできることを知りましょう。

  5. JavaScriptの基礎知識

    JavaScriptの役割の変化について知りましょう。

  6. スマートフォンアプリの形態

    Webアプリ、ネイティブアプリ、ハイブリッドアプリの違いを知りましょう。

  7. Javaと仮想マシン

    Java言語が動作する仕組みと中間言語について知りましょう。

  8. スマートフォンアプリの開発言語

    スマートフォンのネイティブアプリを開発できる言語を知りましょう。

  9. スマートフォンアプリの開発環境

    アンドロイドのネイティブアプリを開発できる環境やフレームワークについて知りましょう。

  10. Eclipseの種類

    Eclipseから派生したIDE（Integrated Development Environment：統合開発環境）について知りましょう。

  11. Eclipseのショートカットキー

    ショートカットキーを使って効率よく開発しましょう。

  12. viewportとは

    スマートフォン特有の解像度の仕組みを知りましょう。

  13. viewportの設定（固定幅：320pxの例）

    viewportの固定幅の設定と問題点を確認してみましょう。

  14. viewportの設定（固定幅：640pxの例）

    viewportの固定幅の設定と問題点を確認してみましょう。

  15. viewportの設定（可変幅の例）

    viewportの可変幅の設定と問題点を確認してみましょう。

  16. ブラウザ機能の有無を調べる

    #

    サンプル

Android開発環境

  1. Android開発環境

  2. JDKのインストール

    Java言語での開発に必要な開発キットをインストールします。

  3. Gitのインストール

    チーム開発時のバージョン管理に必要なツールです。インストールしていないと、Aptana Studioインストール時に聞かれます。

  4. Aptana Studioのインストール

    Web開発に特化されたEclipseです。多くのWeb開発言語のコード補完ができます。

  5. Aptana Studioの日本語化

    Aptana Studioを日本語化します。

  6. Aptana Studioに空白文字を表示する

    半角、全角スペース、タブ、改行を区別しやすくします。

  7. Aptana Studioのフォントサイズを変更する

    Aptana Studioの文字を大きくします。

  8. Aptana Studioのワークスペースを設定する

    プロジェクトエクスプローラーを自動的にリフレッシュします。

  9. Aptana StudioにWebブラウザを追加する

    Firefox以外のブラウザを使えるようにします。

  10. モバイルデバイスでプレビューする

    作成したhtmlファイルをモバイルデバイスでプレビューします。

  11. Aptana Studioに「モバイルおよびデバイス開発」を追加する

    Aptana Studioに「Android SDK Manager」と「AVD Manager」を組み込めるようにします。

  12. Aptana Studioに「Android SDK Manager」と「AVD Manager」を組み込む

    Aptana StudioにAndroid SDKを組み込み、エミュレーターの管理や起動できるようにします。

  13. Android SDKに必要項目を追加する

    Android SDKに開発に必要なバージョンのツールを追加します。

  14. Androidのエミュレーターを作る

    Androidのエミュレーターを作成方法を知りましょう。

  15. Androidのエミュレーターを日本語化する

    Androidのエミュレーターを日本語記述に切り替えましょう。

  16. Androidプロジェクトを作成する。

    Aptana StudioでAndroidのアプリを作成する初期設定をします。

  17. Androiidプロジェクトに署名をつける。

    keystoreファイルを作成し、マーケットに公開できるようにします。

  18. 実機のドライバーをインストールする。

    実機をパソコンに認識させます。

  19. 実機にUSBデバッグモードの設定をする

    ビルドしてapkファイルを実機にインストールできるようにします。

HTML5マークアップの基礎

  1. HTML5マークアップの基礎

  2. HTML5でコーディングしたサイト

    デジタルハリウッドの教材をHTML5でコーディングし直したものです。

    セマンティック構造

  3. マークアップするにあたって

    #

  4. 文書のアウトライン

    #

  5. セマンティックなマークアップをするための要素

    #

  6. HTML5で追加されたフォーム

    JavaScriptで作成していたフォーム機能がHTMLで実現可能になります。

  7. html5shiv

    バージョン8以下のIEにHTML5タグを認識させます。

  8. Wallaby

    flaファイル（Flash Professionで作成するファイル）をHTML5に変換します。

  9. Swiffy

    swfファイル（Flash Playerで読み込むファイル）をHTML5に変換します。

  10. Swiffy Extension for Flash Professional

    Adobe Flash Professionalを拡張してSwiffyでHTML5出力できるようにします。。

  11. CSSのCURSORプロパティ

    JavaScriptでDOM操作するときのマウスポインターのアイコンを変更します。

  12. はみ出すテキストを扱うCSS

    ボックスに収まらないコンテンツを処理する方法を知りましょう。

フロートレイアウト

  1. フロートレイアウト

  2. clearしない (NG)

    #

    サンプル

  3. 最後のボックスでclear

    #

    サンプル

  4. 最後のボックスでfloat (NG)

    #

    サンプル

  5. 最後のボックスでfloat、空div追加でclear

    #

    サンプル

  6. hr要素でclear

    #

    サンプル

  7. floatしている要素群に親要素を追加し、親要素でclear (NG)

    #

    サンプル

  8. 親要素を追加し、親要素でclear、最後だけ空divでclear

    #

    サンプル

  9. 1段ごとに大枠を用意しclearfix

    #

    サンプル

要素、属性、クラス、CSSの操作

  1. 要素、属性、クラス、CSSの操作

  2. IE8でローカル環境のActiveXコンテンツの実行を常に許可する

    インターネットエクスプローラでローカルでJavaScriptを実行したときの警告がでないようにします。

  3. AjaxとjQuery

    Ajaxの仕組みとjQueryの特徴を知りましょう。

  4. JavaScript簡易リファレンス

    JavaScriptの基本について知りましょう。

  5. DOMリファレンス

    JavaScriptでdocumentを操作するプロパティ、メソッドを知りましょう。

  6. jQueryのアコーディオンサンプル

    #

    サンプル

  7. HTML5のアコーディオンサンプル

    #

    サンプル

  8. CSS3のアコーディオンサンプル

    #

    サンプル

  9. jQuery日本語リファレンス

    #

  10. jQueryと他のライブラリの共存

    #

  11. jQueryの読み込み方法

    #

  12. jQueryの記述場所

    #

  13. JavaScriptが実行されるタイミング（loadイベントなし）

    #

    サンプル

  14. JavaScriptが実行されるタイミング（loadイベントあり）

    #

    サンプル

  15. JavaScriptのclickイベント

    #

    サンプル

  16. JavaScriptのclickイベント練習問題

    #

    解答例

  17. JavaScriptでテキストを変更する

    #

    サンプル

  18. JavaScriptでテキストを変更する練習問題

    #

    解答例

  19. JavaScriptでテキストを取得する

    #

    サンプル

  20. JavaScriptでテキストを取得する練習問題

    #

    解答例

  21. JavaScriptでHTMLを変更する

    #

    サンプル

  22. JavaScriptでHTMLを変更する練習問題

    #

    解答例

  23. JavaScriptでHTMLを取得する

    #

    サンプル

  24. JavaScriptでHTMLを取得する練習問題

    #

    解答例

  25. JavaScriptでHTMLを取得する参考問題

    #

    解答例

  26. JavaScriptでHTML属性値を変更する

    #

    サンプル

  27. JavaScriptで複数のHTML属性値を変更する

    #

    サンプル

  28. JavaScriptでHTML属性値を変更する練習問題

    #

    解答例

  29. JavaScriptでHTML属性値を取得する

    #

    サンプル

  30. JavaScriptでHTML属性値を取得する練習問題

    #

    解答例

  31. JavaScriptでHTML属性値を削除する

    #

    サンプル

  32. JavaScriptでHTML属性値を削除する練習問題

    #

    解答例

  33. JavaScriptでCSSプロパティを変更する

    #

    サンプル

  34. JavaScriptで複数のCSSプロパティを変更する

    #

    サンプル

  35. 識別子の命名規則

    プログラムで任意の識別子に名前を付ける法則を知りましょう。

  36. JavaScriptでCSSプロパティを変更する練習問題

    #

    解答例

  37. JavaScriptでCSSプロパティを取得する

    #

    サンプル

  38. JavaScriptでCSSプロパティを取得する練習問題

    #

    解答例

  39. JavaScriptでクラス属性を設定する

    #

    サンプル

  40. JavaScriptでクラス属性を設定する練習問題

    #

    解答例

  41. JavaScriptでクラス属性を削除する

    #

    サンプル

  42. JavaScriptでクラス属性を削除する練習問題

    #

    解答例

  43. JavaScriptでクラス属性を削除する参考問題

    #

    解答例

  44. JavaScriptで要素を置き換える

    #

    サンプル

  45. JavaScriptで要素を置き換える練習問題

    #

    解答例

  46. JavaScriptで要素を削除する

    #

    サンプル

  47. JavaScriptで要素を削除する練習問題

    #

    解答例

  48. jQueryのメソッドチェーン

    #

    サンプル

  49. jQueryのメソッドチェーン練習問題

    #

    解答例

  50. jQueryのthis

    #

    サンプル

  51. jQueryのthis練習問題

    #

    解答例

jQueryで要素を挿入、移動する

  1. jQueryで要素を挿入、移動する

  2. HTML要素内の先頭に挿入

    #

    サンプル

  3. HTML要素内の最後に挿入

    #

    サンプル

  4. HTML要素の前に挿入

    #

    サンプル

  5. HTML要素の後ろに挿入

    #

    サンプル

  6. HTML要素内の先頭に移動

    #

    サンプル

  7. HTML要素内の最後に移動

    #

    サンプル

  8. HTML要素の前に移動

    #

    サンプル

  9. HTML要素の後ろに移動

    #

    サンプル

  10. 他の要素で包む

    #

    サンプル

  11. 全要素を別の要素で包む

    #

    サンプル

  12. 指定した要素の子要素を別の要素で包む

    #

    サンプル

  13. prev、prevAll、next、nextAll、parentなど

    現在の要素から相対的な位置関係の要素を取得する

セレクターの扱い

  1. セレクターの扱い

  2. 要素セレクター

    #

    サンプル

  3. 要素セレクター練習問題

    #

    解答例

  4. IDセレクター

    #

    サンプル

  5. IDセレクター練習問題

    #

    解答例

  6. クラスセレクター

    #

    サンプル

  7. クラスセレクター練習問題

    #

    解答例

  8. 子孫セレクター

    #

    サンプル

  9. 子孫セレクター練習問題

    #

    解答例

  10. ユニバーサルセレクター

    #

    サンプル

  11. ユニバーサルセレクター練習問題

    #

    解答例

  12. グループセレクター

    #

    サンプル

  13. グループセレクター練習問題

    #

    解答例

  14. 子セレクター

    #

    サンプル

  15. 子セレクター練習問題

    #

    解答例

  16. 隣接セレクター

    #

    サンプル

  17. 隣接セレクター練習問題

    #

    解答例

  18. 隣接セレクター練習問題

    #

    解答例

  19. first-child疑似クラス

    #

    サンプル

  20. first-child疑似クラス練習問題

    #

    解答例

  21. first-of-type疑似クラス

    #

    サンプル

  22. first-of-type疑似クラス練習問題

    #

    解答例

  23. first-letter疑似クラス／first-line疑似クラス (CSS3のみ)

    #

    サンプル

  24. first-letter疑似クラス／first-line疑似クラ練習問題

    #

    解答例

  25. 間接セレクター

    #

    サンプル

  26. 間接セレクター練習問題

    #

    解答例

  27. 否定疑似クラス

    #

    サンプル

  28. 否定疑似クラス練習問題

    #

    解答例

  29. empty疑似クラス

    #

    サンプル

  30. empty疑似クラス練習問題

    #

    解答例

  31. last-child疑似クラス

    #

    サンプル

  32. last-child疑似クラス練習問題

    #

    解答例

  33. last-of-type疑似クラス

    #

    サンプル

  34. last-of-type疑似クラス練習問題

    #

    解答例

  35. nth-child疑似クラス

    #

    サンプル

  36. nth-child疑似クラス練習問題

    #

    解答例

  37. nth-of-type疑似クラス

    #

    サンプル

  38. nth-of-type疑似クラス練習問題

    #

    解答例

  39. nth-last-child疑似クラス

    #

    サンプル

  40. nth-last-child疑似クラス練習問題

    #

    解答例

  41. nth-last-of-type疑似クラス

    #

    サンプル

  42. nth-last-of-type疑似クラス練習問題

    #

    解答例

  43. only-child疑似クラス

    #

    サンプル

  44. only-child疑似クラス練習問題

    #

    解答例

  45. only-of-type疑似クラス

    #

    サンプル

  46. only-of-type疑似クラス練習問題

    #

    解答例

  47. 属性セレクタ[attribute]

    #

    サンプル

  48. 属性セレクタ[attribute]練習問題

    #

    解答例

  49. 属性セレクタ[attribute = 'value']

    #

    サンプル

  50. 属性セレクタ[attribute = 'value']練習問題

    #

    解答例

  51. 属性セレクタ[attribute != 'value'] (jQueryのみ)

    #

    サンプル

  52. 属性セレクタ[attribute != 'value']練習問題

    #

    解答例

  53. 属性セレクタ[attribute ^= 'value']

    #

    サンプル

  54. 属性セレクタ[attribute ^= 'value']練習問題

    #

    解答例

  55. 属性セレクタ[attribute $= 'value']

    #

    サンプル

  56. 属性セレクタ[attribute $= 'value']練習問題

    #

    解答例

  57. 属性セレクタ[attribute *= 'value']

    #

    サンプル

  58. 属性セレクタ[attribute *= 'value']練習問題

    #

    解答例

  59. 属性セレクタ[attributeFilter1][attributeFilter2]...

    #

    サンプル

  60. 属性セレクタ[attributeFilter1][attributeFilter2]...練習問題

    #

    解答例

  61. firstフィルター／lastフィルター (jQueryのみ)

    #

    サンプル

  62. firstフィルター／lastフィルター練習問題

    #

    解答例

  63. evenフィルター／oddフィルター (jQueryのみ)

    #

    サンプル

  64. evenフィルター／oddフィルター練習問題

    #

    解答例

  65. eqフィルター／gtフィルター／ltフィルター (jQueryのみ)

    #

    サンプル

  66. eqフィルター／gtフィルター／ltフィルター練習問題

    #

    解答例

  67. headerフィルター (jQueryのみ)

    #

    サンプル

  68. headerフィルター練習問題

    #

    解答例

  69. containsフィルター／hasフィルター (jQueryのみ)

    #

    サンプル

  70. containsフィルター／hasフィルター練習問題

    #

    解答例

  71. parentフィルター (jQueryのみ)

    #

    サンプル

  72. parentフィルター練習問題

    #

    解答例

jQueryのアニメーション効果

  1. jQueryのアニメーション効果

  2. show関数

    #

    サンプル

  3. show関数+コールバック関数

    #

    サンプル

  4. hide関数

    #

    サンプル

  5. :animatedフィルター

    #

    サンプル

  6. toggle関数

    #

    サンプル

  7. slideDown関数／slideUp関数

    #

    サンプル

  8. slideToggle関数

    #

    サンプル

  9. fadeIn関数／fadeOut関数

    #

    サンプル

  10. fadeToggle関数

    #

    サンプル

  11. fadeTo関数

    #

    サンプル

  12. fadeIn／fedeOut関数とfadeTo関数の違い

    #

    サンプル

  13. animate関数

    #

    サンプル

  14. jQuery UIを使ったアニメーション効果 (参考)

    #

    サンプル

イベントの処理

  1. イベントの処理

  2. a要素のclickイベント

    #

    サンプル

  3. a要素のclickイベント練習問題

    #

    解答例

  4. dblclickイベント

    #

    サンプル

  5. dblclickイベント練習問題

    #

    解答例

  6. a要素のdblclickイベント

    #

    サンプル

  7. a要素のdblclickイベント練習問題

    #

    解答例

  8. モーダルウィンドウ

    #

    サンプル

  9. モーダルウィンドウ (テキストの表示)

    #

    サンプル

  10. mouseover／mouseoutイベント

    #

    サンプル

  11. mouseover／mouseoutイベント (プリロード)

    #

    サンプル

  12. ロールオーバー (基本)

    #

    サンプル

  13. ロールオーバー (汎用)

    #

    サンプル

  14. ロールオーバー (プリロード処理)

    #

    サンプル

  15. ロールオーバー (プラグイン)

    #

    サンプル

  16. ロールオーバー練習問題

    #

    解答例

  17. each関数練習問題

    #

    解答例

  18. hoverイベント (jQueryのみ)

    #

    サンプル

  19. mouseover／mouseout／hoverの違い

    #

  20. hoverイベン練習問題

    #

    解答例

  21. ドロップダウンメニュー (基本)

    #

    サンプル

  22. ドロップダウンメニュー (多階層)

    #

    サンプル

  23. mousedown／mouseupイベント

    #

    サンプル

  24. mousedown／mouseupイベント練習問題

    #

    解答例

  25. mousemoveイベント (jQueryのみ)

    #

    サンプル

  26. mousemoveイベン練習問題

    #

    解答例

  27. フローティングウィンドウ

    #

    サンプル

  28. oneイベント (jQueryのみ)

    #

    サンプル

  29. oneイベン練習問題

    #

    解答例

  30. unbindイベント (jQueryのみ)

    #

    サンプル

  31. unbindイベン練習問題

    #

    解答例

  32. liveイベント (jQueryのみ)

    #

    サンプル

  33. liveイベン練習問題

    #

    解答例

  34. delegateイベント (jQueryのみ)

    #

    サンプル

  35. delegateイベン練習問題

    #

    解答例

  36. contextmenuイベント (jQueryのみ)

    #

    サンプル

  37. contextmenuイベン練習問題

    #

    解答例

  38. keyDownイベント／keyUpイベント (参考)

    #

    サンプル

  39. keyDownイベント／keyUpイベント参考問題

    #

    解答例

  40. HTML5フルスクリーンAPI (参考)

    #

    サンプル

  41. setInterval関数 (参考)

    #

    サンプル

  42. setInterval関数② (参考)

    #

    サンプル

  43. setTimeout関数 (参考)

    #

    サンプル

  44. カルーセルパネル

    #

    サンプル

jQueryのプラグイン

  1. jQueryのプラグイン

  2. jQuery Corner

    #

    サンプル

  3. tablesorter

    #

    サンプル

  4. tablesorter pagination plugin

    #

    サンプル

  5. Zoombox

    #

    サンプル

  6. Space gallery

    #

    サンプル

  7. Cycle

    #

    サンプル

  8. Infinite Carousel

    #

    サンプル

  9. jqueryrotate

    #

    サンプル

  10. かえラボ（slider.js）

    #

    サンプル

  11. かえラボ（floater.js）

    #

    サンプル

  12. jQuery Easing Plugin

    #

    サンプル

  13. Masonry

    #

    サンプル
  14. アーカイブ

  15. semooh plugin sample site

    #

  16. JavaScript Library Archive

    #

  17. jQuery List

    #

  18. 5509

    #

  19. kachibito

    #

  20. jQuery 540プラグイン

    #

フォームの扱い

  1. フォームの扱い

  2. value属性の値を取得する

    #

    サンプル

  3. value属性の値を変更する

    #

    サンプル

  4. フォーカスを感知する

    #

    サンプル

  5. フォーカスが外れたことを感知する

    #

    サンプル

  6. フォームの内容変更を感知する

    #

    サンプル

  7. フォームの送信を感知する

    #

    サンプル

  8. :inputフィルター

    #

    サンプル

  9. :textフィルター

    #

    サンプル

  10. :passwordフィルター

    #

    サンプル

  11. :radioフィルター

    #

    サンプル

  12. :checkboxフィルター

    #

    サンプル

  13. :submitフィルター

    #

    サンプル

  14. :imageフィルター

    #

    サンプル

  15. :resetフィルター

    #

    サンプル

  16. :buttonフィルター

    #

    サンプル

  17. :fileフィルター

    #

    サンプル

  18. :checkedフィルター

    #

    サンプル

  19. :selectedフィルター

    #

    サンプル

  20. バリデーション付きメールフォーム

    #

    サンプル

  21. メールフォーム練習問題

    #

    解答例

  22. フォーム練習問題

    JavaScriptでフォームから入力できる計算式を作りなさい。

  23. フォーム練習問題

    このソースを現代風ののコーディングに直しなさい

  24. おみくじ

    #

    サンプル

  25. 簡易電卓

    #

    サンプル

  26. アナログ時計

    #

    サンプル

jQuery UI

  1. jQuery UI

  2. jQuery UIに必要なファイル

    jQuery UIの各コンポーネントに必要なjsファイルの一覧です。

  3. テーマローラー

    jQuery UIの色を変えてみましょう。

  4. アンケートフォーム

    #

    サンプル
  5. resizable

  6. マウスのドラッグによる拡大／縮小

    #

    サンプル

  7. ボタン1つで拡大／縮小の有効／無効を切り替える

    #

    サンプル

  8. 拡大／縮小の動きを制御する

    #

    サンプル
  9. selectable

  10. マウス操作で要素を選択可能にする

    #

    サンプル

  11. 選択可能な要素を限定する

    #

    サンプル

  12. 選択状況の変化に合わせたイベント処理

    #

    サンプル
  13. sortable

  14. 要素の並べ替え

    #

    サンプル

  15. ドラッグ終了後に要素が配置される位置

    #

    サンプル

  16. 横並びに表示された要素の並べ替え

    #

    サンプル

  17. 特定の要素の並べ替え

    #

    サンプル
  18. draggable

  19. ドラッグ中のカーソルをmoveに変更

    #

    サンプル
  20. jQuer UIサンプル

  21. エフェクト

    #

    サンプル

  22. ビューワー

    #

    サンプル

  23. スライドショー

    #

    サンプル

  24. アコーディオンパネル

    #

    サンプル

  25. タブパネル

    #

    サンプル

Ajaxの処理

  1. Ajaxの処理

  2. jQueryのAjax関数

    #

  3. テキストを読み込む

    #

    サンプル

  4. HTMLを読み込む

    #

    サンプル

  5. HTMLの一部の要素を読み込む

    #

    サンプル

  6. Ajaxでページング

    #

    サンプル

  7. XMLとJSONの特徴

    XMLとJSONのデータ構造とクロスドメイン制限について理解しましょう。

  8. XMLデータを読み込む

    #

    サンプル

  9. XMLデータの属性地を取得する

    #

    サンプル

  10. XMLデータを読み込む参考問題

    #

    解答例

  11. XMLデータを読み込む参考問題

    #

    解答例

  12. XMLデータを読み込む参考問題

    #

    解答例

  13. JSONデータを読み込む

    #

    サンプル

  14. JSONLint

    JSONの整形と検証(Validate)をしてくれます。

  15. JSONデータを読み込む参考問題

    #

    解答例

  16. JSONデータを読み込む参考問題

    #

    解答例

PCサイトとスマートフォンサイトの振り分け

  1. PCサイトとスマートフォンサイトの振り分け

  2. スマートフォンのユーザーエージェント一覧

    スマートフォン扱いされる端末のユーザーエージェントの一覧表です。

  3. Safariでユーザーエージェントを偽装する

    Safariでユーザーエージェントを偽装し、スマートフォンサイトをPCで表示します。

  4. Google Chromeでユーザーエージェントを偽装する

    Google Chromeでユーザーエージェントを偽装し、スマートフォンサイトをPCで表示します。

  5. PHPでユーザーエージェントを表示する。

    PHPでのユーザーエージェントの取得方法です。

  6. JavaScriptでユーザーエージェントを表示する。

    JavaScriptでのユーザーエージェントの取得方法です。

  7. PHPを使ってユーザーエージェントで振り分ける

    #

  8. JavaScriptを使ってユーザーエージェントで振り分ける

    #

  9. PHPでCookieを扱う。

    PHPでCookieをセット、取得、破棄する方法です。

  10. JavaScriptでCookieを扱う。

    JavaScriptでCookieをセット、取得、破棄する方法です。

  11. PHPを使ってCookieで振り分ける

    #

  12. JavaScriptを使ってCookieで振り分ける

    #

  13. HTML5でWeb Storageを扱う。

    HTML5でWeb Storageをセット、取得、破棄する方法です。

  14. 画面の大きさを取得する。

    CSSやJavaScriptでブラウザの画面の大きさで処理を振り分ける方法です。

  15. 機能の有無を取得する。

    JavaScriptでブラウザの機能の有無で処理を振り分ける方法です。

jQuery Mobile

  1. jQuery Mobile

  2. jQuery Mobileのサイト

    本家jQuery Mobileのサイトです。

  3. jQuery Mobileドキュメントの日本語訳

    jQuery Mobileのドキュメントの日本語訳です。

  4. jQuery Mobile Gallery

    jQuery Mobileを使って作成されたWebサイトが紹介されています。

  5. jQuery Mobileのサンプル

    #

    サンプル

  6. 会社案内サイト

    #

    サンプル

  7. 個別ページ (会社案内サイトの続き)

    #

    サンプル

  8. セミカスタマイズ (HTML)

    #

    サンプル

  9. セミカスタマイズ (CSS)

    #

    サンプル

  10. フルカスタマイズ

    #

    サンプル

  11. テーマローラー（本家）

    jQuery Mobileの色を変えてみましょう。

  12. テーマローラー（サードパーティ）

    jQuery Mobileの色を変えてみましょう。

  13. Fireworks CSS3 Mobile Pack

    Adobe Fireworksを拡張すしてjQuery MobleのCSS3スウォッチを作成できます。

  14. codiqa

    jQuery Mobileの部品を並べてプロトタイプを制作できます。

  15. リンク

    #

  16. ダイアログ

    #

  17. レイアウト

    #

  18. ヘッダ

    #

  19. フッタ

    #

  20. ナビゲーションバー

    #

  21. ボタン

    #

  22. フォーム

    #

  23. テキスト入力ボックス

    #

  24. スライダー

    #

  25. トグルスイッチ

    #

  26. ラジオボタン

    #

  27. チェックボックス

    #

  28. セレクトメニュー

    #

  29. カスタムメニュー

    #

  30. リスト

    #

  31. グローバル設定

    #

  32. ページイベント

    #

  33. タッチイベント

    #

  34. 仮想マウスイベント

    #

  35. 端末回転イベント

    #

  36. スクロールイベント

    #

  37. レイアウトイベント

    #

  38. システム関数

    #

  39. ボタンアイコン一覧

    #

jQuery Mobileのプラグイン

  1. jQuery Mobileのプラグイン

  2. DateBox

    #

  3. mobiscroll

    #

  4. Pagenation

    #

  5. Photo Swipe

    #

  6. jquery-ui-map

    #

  7. Bartender

    #

  8. iScroll4

    #

  9. gShake (Android4以上)

    #

  10. GLYPHISH

    #

Web APIの活用 (マッシュアップ)

  1. Web APIの活用 (マッシュアップ)

  2. XML-RPC、SOAPとRESTの違い

    WEB APIでよく使われるSOAPとRESTについて知りましょう。

  3. JSONPの特徴

    クロスドメイン制限を解消する、JSONPの特徴を理解しましょう。

  4. JSON-P/JSONP Validator

    JSONPの検証(Validate)をしてくれます。

  5. XML、JSONをJSONPに変換する

    XMLやJSON形式しか使えないAPIのクロスドメイン制限を解消します。

  6. JSONPの概念①

    #。

    サンプル

  7. JSONPの概念②

    #。

    サンプル

  8. WEBサービスを提供するサイト一覧

    WEB APIとその利用方法を公開しているサイトの一覧です。

画像、図表生成系API

  1. 画像、図表生成系API

  2. QRコードを生成する

    Google Chart ToolsでQRコードを生成します。

    サンプル

  3. WEBのサムネイル画像を取得する

    HeartRails CapturのAPIでGETからWEBのサムネイル画像を生成します。

    サンプル

  4. 複数のWEBのサムネイル画像を取得する

    HeartRails CapturのAPIでGETから複数のWEBのサムネイル画像を生成します。

    サンプル

  5. Webのサムネイル画像にリンクをつける

    HeartRails CapturのAPIでGETから取得したWEBのサムネイルにリンクを貼ります。

    サンプル

  6. 円グラフを生成する

    Google Chart ToolsのAPIで円グラフを生成します。

    サンプル

  7. ボタンで円グラフを動かす

    Google Chart ToolsのAPIをボタンをクリックして変化させます。

    サンプル

  8. スライダーで円グラフを動かす

    Google Chart ToolsのAPIをスライダーを動かして変化させます。

    サンプル

  9. JSONデータを棒グラフで表示する

    JSONデータを取得しGoogle Chart ToolsのAPIでグラフ化する。

    サンプル

  10. Google Chart円グラフオプション

    #

    サンプル

  11. Google Chart分布図オプション

    #

    サンプル

データ取得系API

  1. データ取得系

  2. Twitterツイート取得 (固定)

    Twitterの特定のユーザのツイートを取得します。

    サンプル

  3. Twitterツイート取得 (検索)

    Twitterのユーザを検索してツイートを取得します。

    サンプル

  4. Twitterキーワード取得 (固定)

    Twitterの特定のキーワードの含まれたツイート取得します。

    サンプル

  5. Twitterキーワード取得 (検索)

    Twitterのキーワードを切り替えてツイート取得します。

    サンプル

  6. RSSの取得

    RSSをJSONPに変換しクライアントから取得します。

    サンプル

  7. RSSの取得 (スワイプで切り替える)

    スワイプして別のRSSを取得します。

    サンプル

  8. RSSの取得 (Bartender)

    Bartenderのプラグインのページ遷移でRSSを切り替えます。

    サンプル

  9. 2011年3月23日の東京電力・電力状況の取得

    #

    サンプル

  10. 東京電力・電力状況 (日付を選択)

    #

    サンプル

  11. 東京電力・電力状況 (グラフ表示)

    #

    サンプル

  12. Web API練習問題

    YahooのWeb APIを組み込んだモバイルサイトを作りましょう。アプリケーションIDの登録（無料）が必要です。

  13. URLの短縮

    bit.lyのAPIを使ってURLを短縮します。

    サンプル

  14. USTREAMの特定のユーザの動画を取得する (対応するブラウザが限られます)

    USTREAMの特定のユーザの動画を取得します。

    サンプル

  15. USTREAMの録画を検索する (対応するブラウザが限られます)

    USTREAMの録画を検索します。

    サンプル

  16. YouTubeの特定のチャンネルの録画を取得する (対応するブラウザが限られます)

    YouTubeの特定のチャンネルの録画を取得します。

    サンプル

地図、現在地取得系API

  1. 地図、現在地取得系API

  2. Google Map (jquery.gmap3.js)

    #

    サンプル

  3. jquery.gmap3.js

    #

  4. Geocoding

    #

  5. Styled Maps Wizard

    #

  6. 現在の位置情報を取得する

    #

    サンプル

  7. 位置取得時のエラーを取得する

    #

    サンプル

  8. 現在地情報から地図を表示する

    #

    サンプル

  9. 住所から緯度、経度を取得する

    #

    サンプル

  10. 住所から地図を取得する

    #

    サンプル

  11. 緯度、経度から住所を取得する

    #

    サンプル

  12. 現在の位置情報から住所を取得する

    #

    サンプル

  13. 連続して位置情報を取得する

    #

    サンプル

  14. 連続して位置情報の取得を停止する

    #

    サンプル

  15. 現在地からの目的地までの経路を取得

    #

    サンプル

  16. じゃらんのAPIから全国の温泉を検索する (住所)

    #

    サンプル

  17. じゃらんのAPIから全国の温泉を検索する (地図)

    #

    サンプル

  18. じゃらんのAPIから全国の温泉を検索する (経路)

    #

    サンプル

  19. 大阪ラーメンのデータ①

    制作にご利用ください

  20. 大阪ラーメンのデータ②

    制作にご利用ください

  21. 大阪ラーメンのデータ③

    制作にご利用ください

  22. 大阪ラーメンのデータ④

    制作にご利用ください
inserted by FC2 system