このサイトは、中野洋介によるWEBアプリ制作講座の授業用に公開されています。WebKitを用いたブラウザ以外は対応が遅れますのでご了承ください。
このサイトは、中野洋介によるWEBアプリ制作講座の授業用に公開されています。WebKitを用いたブラウザ以外は対応が遅れますのでご了承ください。
2011年以前
2011/11-2012/03
2011/11-2012/05
#
プロバイダと家庭、団体の大まかなネットワークを理解しましょう。
組織ごとに割り当てられるIPアドレスの範囲を理解しましょう
2進数から10進数、10進数から2進数への変換方法を復習しましょう。
全てのネットワーク、コンピュータにはIPアドレスが割り振られます。
IPv4で予約されたIPアドレスと、団体に割り振られたIPアドレス帯域があります。
サブネットマスクによるセグメント分けを理解しましょう。
DNS、ネットワークアドレス、デフォルトゲートウェイ、ブロードキャストアドレスを整理しましょう。
教室の回線を使い、動的IPをipconfigで確認したら、固定IPにTCP/IPの設定を変えて、インターネットに接続できるか確認しましょう。
一般的に設定でのサブネットマスクによるセグメント分けの設定例です。
セグメントを大きくする設定例です。
セグメントを細かくする設定例です。
ダイアルアップのもとのなった一般アナログ電話回線。
コンピュータを識別するIPアドレスに対し、アプリケーションを区別するポート番号です。
TCP/IPレイヤー構造から「SMTP over SSL」「PPPoE」「VoIP」などに使われるoverの意味を理解しましょう。
ドメインをDNSで解決してWEBサイトがブラウザに表示される流れを理解しましょう。
DNSサーバーによるIPアドレス解決と管理の仕組みを理解しましょう。
図解#
#
サーバーサイド技術を使わない一般的なWEBサイトの仕組みを理解しましょう。
サーバーサイド技術を使って実現可能なサービスを理解しましょう。
共用サーバー、専用サーバー、VPSサーバー、クラウドサーバーの違いを理解しましょう。
Windowsでローカル環境での開発に使われるインターネットサーバーのパッケージです。
WEBサーバー内のファイルシステムのうちWEBに公開される最上位のディレクトリです。
図解URLを/(スラッシュ)終了した時に、指定したディレクトリ内で一番最初に開かれるファイルの設定です。
図解ローカル内のインターネットサーバーに仮想のドメインを割り当てます。
最新のXAMPPはセキュリティの初期設定でLAN内の他のパソコンからアクセスできないようになっています。
ドキュメントルートのサブディレクトリにドメインを割り当てます。
#
#
#
#
#
#
#
秀丸エディタをインストールしたら、プログラムで扱いやすい設定にします。
#
ミラー#
#
#
#
#
#
#
#
#
Webサイト制作手法の変遷について知りましょう。
WebサイトからCSSを無効化するクロームアプリです。
#
#
#
#
サンプル#
サンプル#
#
デザイナーから素材を渡されるまでの流れを知りましょう。
①②をおなじディレクトリに保存して、image_hollywood_cafe.part1.rarを解凍してください。
①②をおなじディレクトリに保存して、image_hollywood_cafe.part1.rarを解凍してください。
#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルTOPページのHTML/XHTMLが有効かどうか検証してみましょう。
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルHOLLYWOOD CAFEをCSSを使わずにテーブルレイアウトで製作したサンプルです
CSSを使わないテーブルレイアウトで作成されたサイトの画像を見てみましょう
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルブラウザ上をドラッグしてドラッグ範囲のピクセルを計測するクロームアプリです。
ブラウザ上の色コートを抽出するクロームアプリです。
#
#
#
ChromeでオルタネイトCSSを切り替えられるようにするクロームアプリです。
#
英語#
#
#
#
#
#
#
#
サンプル#
サンプル#
#
#
#
サンプル#
#
#
サンプル#
#
#
#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
#
#
#
サンプル#
#
サンプル#
サンプル#
#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
#
#
#
#
サンプル#
サンプル#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルこのサイトで紹介されているレイアウトを練習しましょう。
このサイトで紹介されているレイアウトを練習しましょう。
#
サンプル#
サンプル#
サンプル#
#
#
#
#
#
#
#
#
#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
#
#
#
#
#
#
#
JavaScriptでDOM操作するときのマウスポインターのアイコンを変更します。
ボックスに収まらないコンテンツを処理する方法を知りましょう。
完成例を参考にしてCSSでレイアウト以下のページのを組みましょう。マークアップをしてもかまいません。
①②をおなじディレクトリに保存して、image_hollywood_cafe.part1.rarを解凍してください。
①②をおなじディレクトリに保存して、image_hollywood_cafe.part1.rarを解凍してください。
#
#
#
#
#
#
HTML5で追加された属性、廃止された属性、新しい概念についての一覧です。
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
ダウンロード#
#
ダウンロード#
#
ダウンロード#
サンプル#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
HTML5のアウトラインを確認できるサイトです。
ChromeアプリのHTML5アウトライン表示ツールです。
検索エンジンにメタデータが取得されるか確認するサイトです。
#
#
#
#
#
#
#
#
#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
#
#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
#
サンプル#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
サンプル#
#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルJava言語での開発に必要な開発キットをインストールします。
チーム開発時のバージョン管理に必要なツールです。インストールしていないと、Aptana Studioインストール時に聞かれます。
Web開発に特化されたEclipseです。多くのWeb開発言語のコード補完ができます。
Aptana Studioを日本語化します。
半角、全角スペース、タブ、改行を区別しやすくします。
Aptana Studioの文字を大きくします。
プロジェクトエクスプローラーを自動的にリフレッシュします。
Firefox以外のブラウザを使えるようにします。
作成したhtmlファイルをモバイルデバイスでプレビューします。
Zen Codingをインストールして、コーディング速度をアップします。
#
Aptana Studioに「Android SDK Manager」と「AVD Manager」を組み込めるようにします。
Aptana StudioにAndroid SDKを組み込み、エミュレーターの管理や起動できるようにします。
Android SDKに開発に必要なバージョンのツールを追加します。
Androidのエミュレーターを作成方法を知りましょう。
Androidのエミュレーターを日本語記述に切り替えましょう。
Aptana StudioでAndroidのアプリを作成する初期設定をします。
keystoreファイルを作成し、マーケットに公開できるようにします。
実機をパソコンに認識させます。
ビルドしてapkファイルを実機にインストールできるようにします。
サーバーサイド技術を使わない一般的なWEBサイトの仕組みを理解しましょう。
サーバーサイド技術を使って実現可能なサービスを理解しましょう。
Ajaxの仕組みとデータの流れを理解しましょう。
インターネットエクスプローラでローカルでJavaScriptを実行したときの警告がでないようにします。
#
#
JavaScriptでdocumentを操作するプロパティ、メソッドを知りましょう。
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
電話番号のフォーマットをつかって数値計算されるか、文字列出力されるか試してみましょう。
#
電話番号のフォーマットをつかって数値と文字列の変換をおこなう練習をしてみましょう。
#
#
#
#
変数を独自に用意し、値渡しと参照渡しの動きを確認しましょう。
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
解答例#
解答例#
解答例#
#
解答例#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
解答例#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
#
#
#
#
#
#
正規表現のテストをするクロームアプリです。
#
#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
解答例#
解答例#
解答例#
解答例#
解答例#
#
#
#
#
#
#
#
#
JavaScriptでdocumentを操作するプロパティ、メソッドを知りましょう。
#
#
#
#
#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
PHPでCookieをセット、取得、破棄する方法です。
JavaScriptでCookieをセット、取得、破棄する方法です。
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
ダウンロード#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
インターネットエクスプローラでローカルでJavaScriptを実行したときの警告がでないようにします。
Ajaxの仕組みとjQueryの特徴を知りましょう。
#
サンプル#
サンプル#
サンプル#
#
#
#
#
サンプル#
サンプル#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
解答例#
サンプル#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
サンプルプログラムで任意の識別子に名前を付ける法則を知りましょう。
#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
解答例#
解答例#
サンプル#
#
解答例#
サンプル#
サンプル#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
解答例#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
#
#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
解答例JavaScriptでフォームから入力できる計算式を作りなさい。
このソースを現代風ののコーディングに直しなさい
#
サンプル#
サンプル#
サンプルjQuery UIの各コンポーネントに必要なjsファイルの一覧です。
jQuery UIの色を変えてみましょう。
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
#
サンプル#
サンプル#
サンプル#
サンプルXMLとJSONのデータ構造とクロスドメイン制限について理解しましょう。
#
サンプル#
サンプル#
解答例#
解答例#
解答例#
サンプルJSONの整形と検証(Validate)をしてくれます。
#
解答例#
解答例HTML5で何が変わったか知りましょう。
CSS3でできることを知りましょう。
JavaScriptの役割の変化について知りましょう。
Webアプリ、ネイティブアプリ、ハイブリッドアプリの違いを知りましょう。
Java言語が動作する仕組みと中間言語について知りましょう。
スマートフォンのネイティブアプリを開発できる言語を知りましょう。
アンドロイドのネイティブアプリを開発できる環境やフレームワークについて知りましょう。
Eclipseから派生したIDE(Integrated Development Environment:統合開発環境)について知りましょう。
ショートカットキーを使って効率よく開発しましょう。
スマートフォン特有の解像度の仕組みを知りましょう。
viewportの固定幅の設定と問題点を確認してみましょう。
viewportの固定幅の設定と問題点を確認してみましょう。
viewportの可変幅の設定と問題点を確認してみましょう。
#
サンプルスマートフォン扱いされる端末のユーザーエージェントの一覧表です。
Safariでユーザーエージェントを偽装し、スマートフォンサイトをPCで表示します。
Google Chromeでユーザーエージェントを偽装し、スマートフォンサイトをPCで表示します。
PHPでのユーザーエージェントの取得方法です。
JavaScriptでのユーザーエージェントの取得方法です。
#
#
PHPでCookieをセット、取得、破棄する方法です。
JavaScriptでCookieをセット、取得、破棄する方法です。
#
#
HTML5でWeb Storageをセット、取得、破棄する方法です。
CSSやJavaScriptでブラウザの画面の大きさで処理を振り分ける方法です。
JavaScriptでブラウザの機能の有無で処理を振り分ける方法です。
本家jQuery Mobileのサイトです。
jQuery Mobileのドキュメントの日本語訳です。
jQuery Mobileを使って作成されたWebサイトが紹介されています。
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプルjQuery Mobileの色を変えてみましょう。
jQuery Mobileの色を変えてみましょう。
Adobe Fireworksを拡張すしてjQuery MobleのCSS3スウォッチを作成できます。
jQuery Mobileの部品を並べてプロトタイプを制作できます。
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
WEB APIでよく使われるSOAPとRESTについて知りましょう。
クロスドメイン制限を解消する、JSONPの特徴を理解しましょう。
JSONPの検証(Validate)をしてくれます。
XMLやJSON形式しか使えないAPIのクロスドメイン制限を解消します。
#。
サンプル#。
サンプルWEB APIとその利用方法を公開しているサイトの一覧です。
Google Chart ToolsでQRコードを生成します。
サンプルHeartRails CapturのAPIでGETからWEBのサムネイル画像を生成します。
サンプルHeartRails CapturのAPIでGETから複数のWEBのサムネイル画像を生成します。
サンプルHeartRails CapturのAPIでGETから取得したWEBのサムネイルにリンクを貼ります。
サンプルGoogle Chart ToolsのAPIで円グラフを生成します。
サンプルGoogle Chart ToolsのAPIをボタンをクリックして変化させます。
サンプルGoogle Chart ToolsのAPIをスライダーを動かして変化させます。
サンプルJSONデータを取得しGoogle Chart ToolsのAPIでグラフ化する。
サンプル#
サンプル#
サンプルTwitterの特定のユーザのツイートを取得します。
サンプルTwitterのユーザを検索してツイートを取得します。
サンプルTwitterの特定のキーワードの含まれたツイート取得します。
サンプルTwitterのキーワードを切り替えてツイート取得します。
サンプルRSSをJSONPに変換しクライアントから取得します。
サンプルスワイプして別のRSSを取得します。
サンプルBartenderのプラグインのページ遷移でRSSを切り替えます。
サンプル#
サンプル#
サンプル#
サンプルYahooのWeb APIを組み込んだモバイルサイトを作りましょう。アプリケーションIDの登録(無料)が必要です。
bit.lyのAPIを使ってURLを短縮します。
サンプルUSTREAMの特定のユーザの動画を取得します。
サンプルUSTREAMの録画を検索します。
サンプルYouTubeの特定のチャンネルの録画を取得します。
サンプル#
サンプル#
#
#
#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル#
サンプル制作にご利用ください
制作にご利用ください
制作にご利用ください
制作にご利用ください
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#