2-2_スマートフォン対応Webシステム_本文.indd

(1)

!

スマートフォン対応Webシステム・ 

アプリケーション開発基礎

女性学び直し事業 2014年度テキスト

!

2014.11

!

1 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト

女性学び直し事業テキスト

スマートフォン対応Webシステム・アプリケーション開発基礎

(2)

目的

クラウドシステムを用いたスマートフォンにも対応したシステムの 

基礎技術要素を習得

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、 

基礎的なクラウドツールの概要と、一般的に利用される技術要素・

構成要素等についての理解

システム開発を外部業者へ委託・依頼するうえでの要素知識を理解

!

達成目標

Webベースコンテンツ・スマートフォン対応と 

そのシステムの基礎要素の理解

サンプルに習いながら参加者が手元で組み習得をすすめます。 

その後、講習後も各自のコンテンツをもち、自作・習熟をすすめて

いけるところまでを目標

!

改訂・更新

2014.11 作成 2015.2.1 改訂  2 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト

テーマとターゲット

!

テーマ

ＩＴ分野の発展により女性の能力がＩＴ分野でさらに求められる。

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、 

応用・活用するそのきっかけとなるものを提供する。

!

どのような方へ

• これから取り組んでいこうと考えている

若い女性

• 異業種・専門外からＩＴシステムに 

チャレンジされる方

• いちど現場を離れられた女性エンジニア

!

3 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストスマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(3)

目的

クラウドシステムを用いたスマートフォンにも対応したシステムの 

基礎技術要素を習得

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、 

基礎的なクラウドツールの概要と、一般的に利用される技術要素・

構成要素等についての理解

システム開発を外部業者へ委託・依頼するうえでの要素知識を理解

!

達成目標

Webベースコンテンツ・スマートフォン対応と 

そのシステムの基礎要素の理解

サンプルに習いながら参加者が手元で組み習得をすすめます。 

その後、講習後も各自のコンテンツをもち、自作・習熟をすすめて

いけるところまでを目標

!

改訂・更新

2014.11 作成 2015.2.1 改訂  2 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト

テーマとターゲット

!

テーマ

ＩＴ分野の発展により女性の能力がＩＴ分野でさらに求められる。

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、 

応用・活用するそのきっかけとなるものを提供する。

!

どのような方へ

• これから取り組んでいこうと考えている

若い女性

• 異業種・専門外からＩＴシステムに 

チャレンジされる方

• いちど現場を離れられた女性エンジニア

!

(4)

目標

・スマートフォン対応のＷｅｂベースアプリケーション

・誰でも自力で実用域まで到達できる範囲

・専門の技術者でなくても「できる」ことを体感

・外部発注のための基礎知識を習得

!

講習

簡易ＥＣサイトの構築（スマートフォン対応）

３日間

実際に受講者自身で作成しながら進行

!

基礎知識・前提

ＰＣの一般的な操作

テキストエディタ・画像編集ツール

ＨＴＭＬ言語の基礎知識

!

システム開発の要素

システム開発・運用には多くの要素

→ 技術的障壁が高い

→ 時間の少ない人には困難

→ どう発注依頼・交渉していくべきかイメージ出来ない

（現場の実情） 

結局業者に丸投げでうまくいかない・高額予算で手が出ない

!

5 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト ��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

�� スマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(5)

目標

・スマートフォン対応のＷｅｂベースアプリケーション

・誰でも自力で実用域まで到達できる範囲

・専門の技術者でなくても「できる」ことを体感

・外部発注のための基礎知識を習得

!

講習

簡易ＥＣサイトの構築（スマートフォン対応）

３日間

実際に受講者自身で作成しながら進行

!

基礎知識・前提

ＰＣの一般的な操作

テキストエディタ・画像編集ツール

ＨＴＭＬ言語の基礎知識

!

システム開発の要素

システム開発・運用には多くの要素

→ 技術的障壁が高い

→ 時間の少ない人には困難

→ どう発注依頼・交渉していくべきかイメージ出来ない

（現場の実情） 

結局業者に丸投げでうまくいかない・高額予算で手が出ない

!

5 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト ��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

��

!

�� スマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(6)

簡易のサイトを開発

!

いったん自力で簡易試作してみる

!

��

!

その後

��

!

��

!

��

!

��

!

Jimdoの利用

!

今回はJimdo「ジンドゥー」というサービスを活用

!

主な特徴とメリット

��

!

��

!

��

!

��

!

��

!

��

!

(7)

簡易のサイトを開発

!

いったん自力で簡易試作してみる

!

��

!

その後

��

!

��

!

��

!

��

!

Jimdoの利用

!

今回はJimdo「ジンドゥー」というサービスを活用

!

主な特徴とメリット

��

!

��

!

��

!

��

!

��

!

��

!

(8)

Jimdoへ登録

・ユーザー登録

��

!

最初のサイト表示

確認メールが届いているので、確認をクリック

��

!!

(9)

Jimdoへ登録

・ユーザー登録

��

!

最初のサイト表示

確認メールが届いているので、確認をクリック

��

!!

(10)

Jimdoの基本操作

ログイン・ログアウト

��

!

プレビューと編集画面

��

!

��

!!

��

!

10 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストレイアウトデザインブログ設定ショップヘルプ

編集操作基本

レイアウト選択

各種の標準的なレイアウト（画面の並びや配置）を簡単に変更

��

!

(11)

Jimdoの基本操作

ログイン・ログアウト

��

!

プレビューと編集画面

��

!

��

!!

��

!

10 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストレイアウトデザインブログ設定ショップヘルプ

編集操作基本

レイアウト選択

各種の標準的なレイアウト（画面の並びや配置）を簡単に変更

��

!

(12)

!

スマートフォン向け画面確認

��

!

��

!

背景画像

��

!

��

!

(13)

!

スマートフォン向け画面確認

��

!

��

!

背景画像

��

!

��

!

(14)

!

��

!

�� 14 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト

!

��

!!

��

!!

��

!

(15)

!

��

!

�� 14 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト

!

��

!!

��

!!

��

!

(16)

!!

��

!!

��

!!

ページ編集

コンテンツの追加・編集

��

!!

��

!!

��

!

(17)

!!

��

!!

��

!!

ページ編集

コンテンツの追加・編集

��

!!

��

!!

��

!

(18)

!

見出し

��

!!

文章・写真

��

!!

!

水平線・余白

��

!!

カラム

!

(19)

!

見出し

��

!!

文章・写真

��

!!

!

水平線・余白

��

!!

カラム

!

(20)

!

フォトギャラリー・動画

!

��

!

商品の追加

��

!

��

!

�� 21 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストスマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(21)

!

フォトギャラリー・動画

!

��

!

商品の追加

��

!

��

!

�� 21 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストスマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(22)

フォーム

!

��

!!

��

!

ページ追加

　ナビゲーション編集

��

!

��

!

(23)

フォーム

!

��

!!

��

!

ページ追加

　ナビゲーション編集

��

!

��

!

(24)

独自カスタマイズ

　独自レイアウト

��

!

��

!

��

!

システム構成要素について

システム全体はどのようになっているか（基本的な構成）

��

!

� �

!!

�

!!

�

!!

!

� �

!

�

!

  25 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト利用者インターネット Webサーバ等アプリケーションサーバ・データベース等企業等 PCやスマホに渡す表示やデータはネットの向こうのシステムやサーバが作っている。 →　バックエンド／サーバーサイドユーザはWebブラウザや  PC・スマホのアプリケーションを操作 →　フロントエンド／クライアントサイドスマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(25)

独自カスタマイズ

　独自レイアウト

��

!

��

!

��

!

システム構成要素について

システム全体はどのようになっているか（基本的な構成）

��

!

� �

!!

�

!!

�

!!

!

� �

!

�

!

  25 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキスト利用者インターネット Webサーバ等アプリケーションサーバ・データベース等企業等 PCやスマホに渡す表示やデータはネットの向こうのシステムやサーバが作っている。 →　バックエンド／サーバーサイドユーザはWebブラウザや  PC・スマホのアプリケーションを操作 →　フロントエンド／クライアントサイド利用者 Webサーバ等アプリケーションサーバ・データベース等企業等企業等スマートフォン対応Webシステム・アプリケーション開発基礎スマートフォン対応Webシステム・アプリケーション開発基礎

(26)

技術担当要素について

どのシステム要素に対し、どのような技術者や事業者があるか

フロントエンド（クライアントサイド）

!

��

!

��

� � ��

!

��

!

��

!

��

!!

��

!!

!

��

!

HTML

JS

!

バックエンド（サーバーサイド）

�

!

��

!

��

!

��

!

��

!

その他

!

��

!!

!

(27)

技術担当要素について

どのシステム要素に対し、どのような技術者や事業者があるか

フロントエンド（クライアントサイド）

!

��

!

��

� � ��

!

��

!

��

!

��

!!

��

!!

!

��

!

HTML

JS

!

バックエンド（サーバーサイド）

�

!

��

!

��

!

��

!

��

!

その他

!

��

!!

!

(28)

制作・開発手段

今回はJimdoを利用　→　試作やデモンストレーションに有効

!

簡易的に制作する他の手段は

・ブログサービス

・facebookの中でコンテンツ・サービスを作る

・Wordpress等のコンテンツ開発支援システム（CMS）

!

独自のシステム開発

・Ruby on Rails等のソフトウェア開発フレームワーク

・PHP、Javaベースの開発

・各種プログラミング言語で開発されたシステムのカスタマイズ 

　（EC Cubeなど)

・フルスクラッチ（全て自分で組んでいく）

!

自分のコンテンツをもつ

!

Ｗｅｂシステムを手がけてみよう

!

facebookで持つのは誰でも簡単にできる

Webシステム全体を知った上で自分のサイトを持つ事は有意義

自分のコンテンツを持つといつでもアピールできる

!

(29)

制作・開発手段

今回はJimdoを利用　→　試作やデモンストレーションに有効

!

簡易的に制作する他の手段は

・ブログサービス

・facebookの中でコンテンツ・サービスを作る

・Wordpress等のコンテンツ開発支援システム（CMS）

!

独自のシステム開発

・Ruby on Rails等のソフトウェア開発フレームワーク

・PHP、Javaベースの開発

・各種プログラミング言語で開発されたシステムのカスタマイズ 

　（EC Cubeなど)

・フルスクラッチ（全て自分で組んでいく）

!

自分のコンテンツをもつ

!

Ｗｅｂシステムを手がけてみよう

!

facebookで持つのは誰でも簡単にできる

Webシステム全体を知った上で自分のサイトを持つ事は有意義

自分のコンテンツを持つといつでもアピールできる

!

(30)

その先のステップのすすめ

!

システム開発、プログラミングを手がけみよう

!

→ Wordpressなど（PHP言語での開発、サーバー構築・管理）

→ PHP、Ruby on RailsでのWeb開発（全て自分で組んでいく）

→ スマートフォン専用アプリケーション

!

��

!

��

!!

30 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストスマートフォン対応Webシステム・アプリケーション開発基礎

(31)

その先のステップのすすめ

!

システム開発、プログラミングを手がけみよう

!

→ Wordpressなど（PHP言語での開発、サーバー構築・管理）

→ PHP、Ruby on RailsでのWeb開発（全て自分で組んでいく）

→ スマートフォン専用アプリケーション

!

��

!

��

!!

30 モバイル対応Webシステム開発基礎女性学び直し事業 2014年度テキストスマートフォン対応Webシステム・アプリケーション開発基礎

(32)

平成年度文部科学省「成長分野等における中核的専門人材養成等の戦略的推進事業」クラウド・スマートデバイス時代に対応したＩＴビジネスクリエータの地域版社会人・女性学び直し教育プログラム開発と実践 ■実施委員会 ◎吉田松雄学校法人吉田学園理事長黒木亮谷学校法人黒木学園理事長武田結幸学校法人武田学園理事長山本匡学校法人小山学園理事長栗原寛隆学校法人栗原学園理事長高橋秀也大阪市立大学教授山本哲男株式会社八雲ソフトウェア代表取締役渡部薫株式会社ジー・クラウド代表取締役社長岡山保美株式会社ＫＥＩアドバンス取締役会長飯塚正成一般社団法人全国専門学校情報教育協会専務理事 ■社会人研修分科会 ◎岡山保美株式会社ＫＥＩアドバンス取締役会長村岡好久名古屋工学院専門学校統括アドバイザー谷口英司日本電子専門学校情報ビジネスライセンス科科長吉田進一吉田通信企画代表山本哲男株式会社八雲ソフトウェア代表取締役冨田慎一 (VWRP\ 6\VWHPV 代表吉岡正勝株式会社日本教育ネットワークコンソシアム事業開発部マネージャー ■女性学び直し分科会 ◎岡山保美株式会社ＫＥＩアドバンス取締役会長菅野崇行吉田学園情報ビジネス専門学校情報システム学科スマートフォン・クラウド学科谷口英司日本電子専門学校情報ビジネスライセンス科科長大礒洋明コーデトーイズ株式会社代表取締役大園博美有限会社Ａｒｉｅｓ代表戸田雅人レインボーアップス株式会社我妻幸長レインボーアップス株式会社吉岡正勝株式会社日本教育ネットワークコンソシアム事業開発部マネージャー ■教員育成分科会 ◎岡山保美株式会社ＫＥＩアドバンス取締役会長菅野崇行吉田学園情報ビジネス専門学校情報システム学科スマートフォン・クラウド学科村岡好久名古屋工学院専門学校統括アドバイザー谷口英司日本電子専門学校情報ビジネスライセンス科科長坂田拡光株式会社ＫＥＩアドバンス教育事業戦略推進部部長野吾教行学校法人河合塾教育研究開発本部教育研究部吉岡正勝株式会社日本教育ネットワークコンソシアム事業開発部マネージャー平成年度文部科学省委託「成長分野等における中核的専門人材養成等の戦略的推進事業」クラウド・スマートデバイス時代に対応したＩＴビジネスクリエータの地域版社会人・女性学び直し教育プログラム開発と実践平成年月学校法人吉田学園（吉田学園情報ビジネス専門学校）〒北海道札幌市中央区南条西丁目 7(/ )$; ●本書の内容を無断で転記､掲載することは禁じます。

スマートフォン対応 Web システム・アプリケーション開発基礎

2-2_スマートフォン対応Webシステム_本文.indd

!

!

!

!

!

!

スマートフォン対応Webシステム・

アプリケーション開発基礎

女性学び直し事業 2014年度 テキスト

!

!

2014.11

!

女性学び直し事業テキスト

目的

クラウドシステムを用いたスマートフォンにも対応したシステムの

基礎技術要素を習得

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、

基礎的なクラウドツールの概要と、一般的に利用される技術要素・

構成要素等についての理解

システム開発を外部業者へ委託・依頼するうえでの要素知識を理解

!

達成目標

Webベースコンテンツ・スマートフォン対応と

そのシステムの基礎要素の理解

サンプルに習いながら参加者が手元で組み習得をすすめます。

その後、講習後も各自のコンテンツをもち、自作・習熟をすすめて

いけるところまでを目標

!

!

!

改訂・更新

テーマとターゲット

!

テーマ

ＩＴ分野の発展により女性の能力がＩＴ分野でさらに求められる。

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、

応用・活用するそのきっかけとなるものを提供する。

!

どのような方へ

•

これから取り組んでいこうと考えている

若い女性

•

異業種・専門外からＩＴシステムに

チャレンジされる方

•

いちど現場を離れられた女性エンジニア

!

目的

クラウドシステムを用いたスマートフォンにも対応したシステムの

基礎技術要素を習得

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、

基礎的なクラウドツールの概要と、一般的に利用される技術要素・

構成要素等についての理解

システム開発を外部業者へ委託・依頼するうえでの要素知識を理解

!

達成目標

Webベースコンテンツ・スマートフォン対応と

そのシステムの基礎要素の理解

サンプルに習いながら参加者が手元で組み習得をすすめます。

その後、講習後も各自のコンテンツをもち、自作・習熟をすすめて

いけるところまでを目標

!

!

!

改訂・更新

テーマとターゲット

!

テーマ

ＩＴ分野の発展により女性の能力がＩＴ分野でさらに求められる。

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、

応用・活用するそのきっかけとなるものを提供する。

!

どのような方へ

•

これから取り組んでいこうと考えている

若い女性

•

スマートフォン対応Webシステム・ 

女性学び直し事業 2014年度テキスト

クラウドシステムを用いたスマートフォンにも対応したシステムの 

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、 

Webベースコンテンツ・スマートフォン対応と 

サンプルに習いながら参加者が手元で組み習得をすすめます。 

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、 

異業種・専門外からＩＴシステムに 

クラウドシステムを用いたスマートフォンにも対応したシステムの 

Webベースのモバイル対応の簡単なコンテンツを作成しつつ、 

Webベースコンテンツ・スマートフォン対応と 

サンプルに習いながら参加者が手元で組み習得をすすめます。 

今後活躍される女性の方がたにＷｅｂ・ＩＴ技術知識を習得、 

異業種・専門外からＩＴシステムに 

（現場の実情） 

（現場の実情） 