Submit Search
Upload
ブラウザだけで学ぶWebアプリ開発【デザイン編】
•
15 likes
•
2,348 views
schoowebcampus
Follow
schoo WEB-campus http://schoo.jp/class/381
Read less
Read more
Business
Report
Share
Report
Share
1 of 223
Download now
Download to read offline
Recommended
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
Recommended
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
Shogo Iwano
2016 02-25-crawler-study-01
2016 02-25-crawler-study-01
Hiroshi Oyamada
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
2015 12-19-ruby rails
2015 12-19-ruby rails
Hiroshi Oyamada
2015 07-04-ruby rails
2015 07-04-ruby rails
Hiroshi Oyamada
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
Web design
Web design
kazuko kaneuchi
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
Scotty + Aeson + Persistentで作るJSON Web API
Scotty + Aeson + Persistentで作るJSON Web API
Daisuke Fujimura
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
DIVE INTO CODE Corp.
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
WordBench京都9月号
WordBench京都9月号
Koji Asaga
2016 02-09-co-edo lt
2016 02-09-co-edo lt
Hiroshi Oyamada
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
Ruby on Rails でつくるアタシ好みの愛され Web サービス
Ruby on Rails でつくるアタシ好みの愛され Web サービス
Yoji Shidara
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
The future of community based services and education
The future of community based services and education
Traci Jones
Yolanda (3) (1)
Yolanda (3) (1)
gustavo lopez ramirez
More Related Content
What's hot
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
Shogo Iwano
2016 02-25-crawler-study-01
2016 02-25-crawler-study-01
Hiroshi Oyamada
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
2015 12-19-ruby rails
2015 12-19-ruby rails
Hiroshi Oyamada
2015 07-04-ruby rails
2015 07-04-ruby rails
Hiroshi Oyamada
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
Web design
Web design
kazuko kaneuchi
Aiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
Scotty + Aeson + Persistentで作るJSON Web API
Scotty + Aeson + Persistentで作るJSON Web API
Daisuke Fujimura
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
DIVE INTO CODE Corp.
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
Hidekazu Ishikawa
WordBench京都9月号
WordBench京都9月号
Koji Asaga
2016 02-09-co-edo lt
2016 02-09-co-edo lt
Hiroshi Oyamada
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
Ruby on Rails でつくるアタシ好みの愛され Web サービス
Ruby on Rails でつくるアタシ好みの愛され Web サービス
Yoji Shidara
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
What's hot
(20)
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
短期間+大規模ゲーム開発でも破綻しないHTML・SCSS
2016 02-25-crawler-study-01
2016 02-25-crawler-study-01
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
2015 12-19-ruby rails
2015 12-19-ruby rails
2015 07-04-ruby rails
2015 07-04-ruby rails
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Web design
Web design
Aiming study#6pdf
Aiming study#6pdf
Scotty + Aeson + Persistentで作るJSON Web API
Scotty + Aeson + Persistentで作るJSON Web API
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordBench京都9月号
WordBench京都9月号
2016 02-09-co-edo lt
2016 02-09-co-edo lt
WordPressってこんなCMS
WordPressってこんなCMS
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Ruby on Rails でつくるアタシ好みの愛され Web サービス
Ruby on Rails でつくるアタシ好みの愛され Web サービス
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Viewers also liked
The future of community based services and education
The future of community based services and education
Traci Jones
Yolanda (3) (1)
Yolanda (3) (1)
gustavo lopez ramirez
KHParisA4-16rev2
KHParisA4-16rev2
Maria Prasetyo
Vms
Vms
ArcherCarrillo
The Tradeshow Ecosystem presented at Exhibitor Show
The Tradeshow Ecosystem presented at Exhibitor Show
Christopher Kappes
ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6
ไทเลอ ฟิม
Union league club presentation Friday March 7, 2014
Union league club presentation Friday March 7, 2014
Jeffrey R. Carter
BB044 H3
BB044 H3
Bernard Sng
Las virtudes
Las virtudes
smendoza18
Simple law assignment help
Simple law assignment help
cheapcouk
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
schoowebcampus
The Revolutionary War
The Revolutionary War
Donald Southerland
Good_Governance_and_National_Social_Deve
Good_Governance_and_National_Social_Deve
Ndangwa Noyoo
Presentation about China Exhibition Industry
Presentation about China Exhibition Industry
Christopher Kappes
Viewers also liked
(14)
The future of community based services and education
The future of community based services and education
Yolanda (3) (1)
Yolanda (3) (1)
KHParisA4-16rev2
KHParisA4-16rev2
Vms
Vms
The Tradeshow Ecosystem presented at Exhibitor Show
The Tradeshow Ecosystem presented at Exhibitor Show
ใบงานสำรวจตนเอง M6
ใบงานสำรวจตนเอง M6
Union league club presentation Friday March 7, 2014
Union league club presentation Friday March 7, 2014
BB044 H3
BB044 H3
Las virtudes
Las virtudes
Simple law assignment help
Simple law assignment help
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
The Revolutionary War
The Revolutionary War
Good_Governance_and_National_Social_Deve
Good_Governance_and_National_Social_Deve
Presentation about China Exhibition Industry
Presentation about China Exhibition Industry
Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】
論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10
Noritada Shimizu
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
うちの開発におけるXD利用法
うちの開発におけるXD利用法
Kazuma Sekiguchi
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Kohei Kakudo
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
Ishikawa Yuya
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
Yusuke Kojima
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
Yusuke Kojima
遅いクエリと向き合う仕組み #CybozuMeetup
遅いクエリと向き合う仕組み #CybozuMeetup
S Akai
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
DevLOVE iPhoneアプリ勉強会
DevLOVE iPhoneアプリ勉強会
Toshimitsu Takahashi
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
DIVE INTO CODE Corp.
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
Masaru Gushiken
【デブサミ夏A5】LINE開発におけるGitHub Enterprise導入
【デブサミ夏A5】LINE開発におけるGitHub Enterprise導入
Developers Summit
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】
(20)
論理思考とプログラミング 2013f#10
論理思考とプログラミング 2013f#10
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
うちの開発におけるXD利用法
うちの開発におけるXD利用法
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
遅いクエリと向き合う仕組み #CybozuMeetup
遅いクエリと向き合う仕組み #CybozuMeetup
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
DevLOVE iPhoneアプリ勉強会
DevLOVE iPhoneアプリ勉強会
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
【デブサミ夏A5】LINE開発におけるGitHub Enterprise導入
【デブサミ夏A5】LINE開発におけるGitHub Enterprise導入
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
More from schoowebcampus
Compl exxx after
Compl exxx after
schoowebcampus
Compl exxx before
Compl exxx before
schoowebcampus
ビジネスプラン概要資料 New
ビジネスプラン概要資料 New
schoowebcampus
2479
2479
schoowebcampus
schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内
schoowebcampus
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
schoowebcampus
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...
schoowebcampus
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
schoowebcampus
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
schoowebcampus
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...
schoowebcampus
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
schoowebcampus
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法
schoowebcampus
1840
1840
schoowebcampus
授業資料(スクー)
授業資料(スクー)
schoowebcampus
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~
schoowebcampus
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
schoowebcampus
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
schoowebcampus
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
schoowebcampus
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
schoowebcampus
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
More from schoowebcampus
(20)
Compl exxx after
Compl exxx after
Compl exxx before
Compl exxx before
ビジネスプラン概要資料 New
ビジネスプラン概要資料 New
2479
2479
schoo法人利用-ビジネスプランのご案内
schoo法人利用-ビジネスプランのご案内
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法
1840
1840
授業資料(スクー)
授業資料(スクー)
個人事業主・フリーランスのための確定申告 ~白色申告編~
個人事業主・フリーランスのための確定申告 ~白色申告編~
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Recently uploaded
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
masakisaito12
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
masakisaito12
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
KayaSuetake1
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
ssuserfb441f
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
ユニパー株式会社
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ 株式会社
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
ssuser80a51f
Recently uploaded
(8)
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
ブラウザだけで学ぶWebアプリ開発【デザイン編】
1.
ブラウザだけで学ぶWebアプリ開発【デザイン編】
2.
自己紹介
3.
自己紹介 • 町田哲平と申します • 合同会社フィヨルドという会社で デザイナーをやっています •
Twitter アカウントは @machida • Facebookは 町田哲平 で検索 • Ruby on Rails で作られた怖い話が読める サービス「怖話」を運営しています
4.
自己紹介 • 怖い話のサービスだけではなく 企業が使う、メールや Fax
や封書 を送るサービス開発のお手伝いも しています
5.
授業でやること • 前回の復習 • なんでデザイナーが
Webアプリ開発? • 書籍アプリの HTML を変更 • 書籍アプリの CSS を変更 • 本番環境(Heroku)に送る
6.
前回の復習 1月20日(月)放送「ブラウザだけで学ぶWebアプリ開発【開発編】」
7.
前回のやったこと
8.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf
9.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf • bookshelf ディレクトリに移動 cd bookshelf
10.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer
11.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate
12.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate • サーバを立ち上げて確認 rails s
13.
前回のやったこと • Rails のプロジェクトを作成 rails
new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate • サーバを立ち上げて確認 rails s • 本番環境(Heroku)に送る
14.
今回も Nitrous.IO でサーバを立ちあげます chrome
で https://www.nitrous.io/ を開く nitrous.io と入力して Enterキー
15.
今回も Nitrous.IO でサーバを立ちあげます https://www.nitrous.io/
16.
今回も Nitrous.IO でサーバを立ちあげます メール パスワード メールアドレスとパスワードを入力
17.
今回も Nitrous.IO でサーバを立ちあげます クリック bookshelf
をクリック
18.
今回も Nitrous.IO でサーバを立ちあげます クリック Start
をクリック
19.
今回も Nitrous.IO でサーバを立ちあげます クリック IDE
をクリック
20.
今回も Nitrous.IO でサーバを立ちあげます クリック Chat
は使わないので閉じる
21.
今回も Nitrous.IO でサーバを立ちあげます コンソールに
cd bookshelf と入力し、Enter bookshelf ディレクトリに移動
22.
今回も Nitrous.IO でサーバを立ちあげます コンソールに
rails s と入力し、Enter サーバを起動
23.
今回も Nitrous.IO でサーバを立ちあげます Preview
をクリック、Port 3000 を選択
24.
今回も Nitrous.IO でサーバを立ちあげます xxxxx.nitrousbox.com/books
にアクセス
25.
今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview Chrome
のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
26.
今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview 準備完了! Chrome
のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
27.
今回も Nitrous.IO でサーバを立ちあげます お願い 前回作った書籍登録アプリに
書籍を10冊 登録しておいてください 登録するデータは、 Nitrouns.IO Preview title : あああああああ price :準備完了! 100 みたいな感じで適当でOKです Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
28.
なんでデザイナーが Webアプリ開発?
29.
よくあるWebアプリ開発での面倒なこと
30.
よくあるWebアプリ開発での面倒なこと デザインを発注 プログラマー デザイナー
31.
よくあるWebアプリ開発での面倒なこと デザインを発注 プログラマー • ワイヤフレーム • 仕様書 •
(プロトタイプ) ドキュメント中心 デザイナー
32.
よくあるWebアプリ開発での面倒なこと デザインを制作 プログラマー デザイナー
33.
よくあるWebアプリ開発での面倒なこと デザインを制作 プログラマー zip • HTML • CSS •
Javascript 静的ファイル デザイナー
34.
よくあるWebアプリ開発での面倒なこと デザインを制作 zip納品 プログラマー zip • HTML • CSS •
Javascript 静的ファイル デザイナー
35.
よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット デザインを制作 プログラマー zip •
HTML • CSS • Javascript zip納品 デザイナー
36.
よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット •
プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
37.
よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット •
プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
38.
よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット •
プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい • システムと納品された静的な HTML の名前(classなど)が一致し • HTML プログラマー ていないのでわかりづらい • CSS zip • Javascript zip納品 デザイナー
39.
よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット •
プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい • システムと納品された静的な HTML の名前(classなど)が一致し • HTML プログラマー ていないのでわかりづらい • CSS zip デザイナー • Javascript • ドキュメントを用意したり、要望を伝えたり、デザイナーとのやり とりに時間がかかる zip納品
40.
よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット デザインを制作 プログラマー zip •
HTML • CSS • Javascript zip納品 デザイナー
41.
よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット •
実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) プログラマー zip • HTML • CSS • Javascript zip納品 デザインを制作 デザイナー
42.
よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット •
実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
43.
よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット •
実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS (CSSいじった?勝手なことしないで!) zip • Javascript zip納品 デザイナー
44.
よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット •
実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS (CSSいじった?勝手なことしないで!) zip • Javascript • プログラマーとのやりとりに時間がかかる (この仕様書意味わかんない…) zip納品 デザイナー
45.
これらのデメリットを解消するには?
46.
これらのデメリットを解消するには? デザイナーが直接システムに デザインを入れればいい
47.
これらのデメリットを解消するには? デザイナーが直接システムに デザインを入れればいい 脱zip納品
48.
さきほどの例で挙げた開発 デザイナー システム開発チーム デザインを発注 デザイナーはシステム開発チームの外
49.
デザイナーも開発チームの一員に システム開発チーム デザイナーもシステム開発チームの中へ
50.
デザイナーが開発チームに入ったら
51.
デザイナーが開発チームに入ったら 会員登録機能できましたー
52.
デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利!
53.
デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー
54.
デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます
55.
デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
56.
デザイナーが開発チームに入ったら 開発がこのようになる 会員登録機能できましたー お疲れ様ですー 見てみます うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
57.
デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る お疲れ様ですー 見てみます お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん…
会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
58.
デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる うーん… 会員登録ページへ遷移するの面倒っすね、 うーん…
会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
59.
デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる なるほどー、確かに… では、トップページから登録できるようにしておきます トップページから登録できるにしたいですねー ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
60.
デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる • なるほどー、確かに… では、トップページから登録できるようにしておきます システムとデザインを同時進行で開発できる ありがとうございます!では、先にトップページに会員登録の ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます 見た目を作っておきます
61.
デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる さっき挙げたデメリットは解消される • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる • なるほどー、確かに… では、トップページから登録できるようにしておきます システムとデザインを同時進行で開発できる ありがとうございます!では、先にトップページに会員登録の ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます 見た目を作っておきます
62.
開発チームに入るのに必要な3つのスキル
63.
開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面)
64.
開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面) •
バージョン管理 … Git、Subversionなど
65.
開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面) •
バージョン管理 … Git、Subversionなど • 言語とフレームワーク … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
66.
開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル … 手元でシステムを立ち上げる •
バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
67.
開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 • バージョン管理のスキル …
Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
68.
開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル …
Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
69.
開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル …
Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど 実際はこんな感じの場合が多いので、 そこまで詳しくならなくてもOK
70.
今回の授業のテーマ
71.
今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います
72.
今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー!
73.
今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー! ありがとうございます!では、これからデザインを入れる作業を 開始します!
74.
今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー! ありがとうございます!では、これからデザインを入れる作業を 開始します! デザイナーのターン!
75.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… 前回までの作業をエンジニアが行った仕事として、 それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
76.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
77.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
78.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
79.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 言語:Ruby 機能を作りましたー では、これにデザインを 入れていきますー フレームワーク:Ruby
on Rails
80.
今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 前回の授業で Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを すでにやってるので バーチャル体験してみよう、という授業を行います バージョン管理 • ご安心を Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 言語:Ruby 機能を作りましたー では、これにデザインを 入れていきますー フレームワーク:Ruby
on Rails
81.
前回つくった画面を見てみよう
82.
前回つくった画面を見てみよう 書籍一覧( /books )
83.
前回つくった画面を見てみよう 書籍個別( /books/1 )
84.
前回つくった画面を見てみよう 書籍編集( /books/1/edit )
85.
前回つくった画面を見てみよう 書籍登録( /books/new )
86.
前回つくった画面を見てみよう これらのページの HTML と
CSS をカスタマイズ 書籍登録( /books/new )
87.
いよいよ実践 前回作ったアプリにデザインを入れていきます。
88.
HTMLを変更する
89.
どのファイルを変更する? • 書籍一覧 • 書籍個別 •
書籍編集 • 書籍登録
90.
どのファイルを変更する? • 書籍一覧 app/views/books/index.html.erb • 書籍個別 app/views/books/show.html.erb •
書籍編集 app/views/books/edit.html.erb • 書籍登録 app/views/books/new.html.erb
91.
前回つくった画面を見てみよう 該当するファイルの探しかた まずは app/views ディレクトリへ •
書籍一覧 app/views/books/index.html.erb URL [xxx.nitrousbox.com/books/] に注目 • URLにある [/books] と同じ名前のディレクトリを • 書籍個別 の中から探す app/views app/views/books/show.html.erb • 一覧は index.html.erb • 書籍編集 show.html.erb • 詳細は app/views/books/edit.html.erb • 編集は edit.html.erb • 書籍登録 new.html.erb • 登録は app/views/books/new.html.erb
92.
践 実 書籍一覧のHTMLを 変更してみよう app/views/books/index.html.erb を編集
93.
践 実 app/views/books/index.html.erb を開く
94.
践 実 このマークアップを変更します
95.
践 実 チームで開発するときはマークアップの ルールがあると便利 このマークアップを変更します
96.
践 実 チームで開発するときはマークアップの ルールがあると便利 • ルールがあれば、チームメンバーの誰が書いても同じマークア ップになる • 新しくチームに入ったメンバーも、そのルールを理解すれば 同じようにマークアップができるようになる このマークアップを変更します
97.
践 実 チームで開発するときはマークアップの ルールがあると便利 • ルールがあれば、チームメンバーの誰が書いても同じマークア ップになる • 新しくチームに入ったメンバーも、そのルールを理解すれば 同じようにマークアップができるようになる •
ルールを作るだけでなく、チーム内でルールを共有するために ドキュメントを用意しなくてはいけない手間が発生 • すでに誰かが作ったルールを採用すると、すでにドキュメント が用意されてるので、手間が解消されることも このマークアップを変更します
98.
マークアップのルールがあると…
99.
マークアップのルールがあると… 書籍登録機能できましたー
100.
マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から…
101.
マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる!
102.
マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! はいー、ルール通りにマークアップしておきました
103.
マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! はいー、ルール通りにマークアップしておきました ありがとうございます! マークアップの作業をしなくて済んだ
104.
マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! こういうこともあるので、ルールがあるとお得! はいー、ルール通りにマークアップしておきました ありがとうございます! マークアップの作業をしなくて済んだ
105.
今回はルールの例として BEM を紹介
106.
今回はルールの例として BEM を紹介 •
B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M
107.
今回はルールの例として BEM を紹介 •
B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M エレメントの前はアンダースコア2つ モディファイアの前はハイフン2つ
108.
今回はルールの例として BEM を紹介 •
B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M エレメントの前はアンダースコア2つ モディファイアの前はハイフン2つ • ブロック → 範囲 • エレメント → その範囲内でのそれが果たす 役割、要素 • モディファイア → そのブロックや要素の 修飾、XXX版
109.
今回はルールの例として BEM を紹介 /books
書籍一覧
110.
今回はルールの例として BEM を紹介 bookというブロック class
= book
111.
今回はルールの例として BEM を紹介 book
というブロック内の title という要素 class = book _ _ title
112.
今回はルールの例として BEM を紹介 book
というブロック内の action という要素の edit 版 class = book _ _ action - - edit
113.
今回はルールの例として BEM を紹介 book
というブロック内の action という要素の edit 版 っていうのが BEM class = book _ _ action - - edit
114.
践 実 実際にBEMでマークアップしてみます
115.
践 実 こうなったら正解
116.
書籍編集と書籍登録の 共通部分 app/views/books/edit.html.erb と app/views/books/new.html.erb
117.
書籍編集( /books/1/edit )
118.
書籍登録( /books/new )
119.
フォームの部分はほとんど同じ 書籍編集 書籍登録
120.
フォームの部分はほとんど同じ 書籍編集 app/views/books/edit.html.erb 書籍登録 app/views/books/new.html.erb
121.
フォームの部分はほとんど同じ 書籍編集 app/views/books/edit.html.erb 書籍登録 app/views/books/new.html.erb <%= render form
%>
122.
フォームの部分はほとんど同じ 編集と登録の共通部分 • edit.html.erb 、new.html.erb
両方のファイルに <%= render 'form' %> と書かれている部分がある • <%= render 'form' %> の「 form 」に注目 edit.html.erb 、new.html.erb があるディレクトリに _form.html.erb があり、それがその部分の該当するファイル • フォームの部分を編集するには _form.html.erb を編集する • 共通部分ファイルはファイル名の先頭に 「_(アンダースコア)」が付いている 書籍編集 書籍登録
123.
践 実 フォームの部分を編集するには このファイルを編集する app/views/books/_form.html.erb このファイルを編集してフォームの部分が 変わったかを確認してみます
124.
サイト全体の共通部分 app/views/layouts/application.html.erb
125.
<%= yield %>
に注目 app/views/layouts/application.html.erb
126.
<%= yield %>
に注目 index.html.erb show.html.erb edit.html.erb new.html.erb <%= yield %> の中に表示されている
127.
books/index.html.erb application.html.erb
128.
books/index.html.erb application.html.erb 全ページ共通部品は layouts/application.html.erb に書く •
ヘッダー • フッター • サイドナビ
129.
践 実 ヘッダを追加してみよう app/views/layouts/application.html.erb
130.
践 実 ここにヘッダの HTML を書く app/views/layouts/application.html.erb
131.
践 実 ヘッダの HTML 実際にヘッダを追加してみます
132.
践 実 こうなったら正解
133.
CSSを変更する
134.
Rails の CSS
の特長
135.
Rails の CSS
の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss )
136.
Rails の CSS
の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) Sass って何? CSSが便利に書けるもの
137.
Rails の CSS
の特長 Sass って何? • CSSプリプロセッサの Sass(SCSS記法)が採用されている Sass って何? くわしくは、 便利にCSSが書けるもの 石本光司先生の授業で http://schoo.jp/class/228
138.
Rails の CSS
の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる
139.
Rails の CSS
の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる • scssファイルを追加する場合は app/assets/stylesheets の 中に入れる
140.
Rails の CSS
の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる • scssファイルを追加する場合は app/assets/stylesheets の 中に入れる • app/assets/stylesheets の中に入れられた scssファイルは 設定なしで画面に反映される
141.
践 実 Railsにデザインを 入れる準備 app/assets/stylesheets/scaffold.css.scss を削除
142.
践 実 scaffolds.css.scss app/assets/styledheets/scaffolds.css.scss
143.
践 実 scaffolds.css.scss scaffolds.css.scss app/assets/styledheets/scaffolds.css.scss
144.
践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails
が自動で生成してくれた最低 限のスタイルが入った scssファイル app/assets/styledheets/scaffolds.css.scss
145.
践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails
が自動で生成してくれた最低 限のスタイルが入った scssファイル • 自分でデザインを入れる際、 scaffolds.css.scss で設定され たスタイルが邪魔になるので削除 app/assets/styledheets/scaffolds.css.scss
146.
践 実 scaffolds.css.scss 削除 app/assets/styledheets/scaffolds.css.scss の上で右クリック
147.
践 実 scaffolds.css.scss 削除 Delete scaffolds.css.scss
を選択
148.
践 実 scaffolds.css.scss 削除 こうなったら正解
149.
践 実 ヘッダ用のscssファイル を追加してみよう app/assets/stylesheets/ の中にファイルを追加
150.
践 実 ヘッダ用の SCSS を追加 app/assets/styledheets
の上で右クリック
151.
践 実 ヘッダ用の SCSS を追加 New
File をクリック
152.
践 実 ヘッダ用の SCSS を追加 header.css.scss
という名前を入力
153.
践 実 ヘッダ用の SCSS を追加 app/assets/styledheets/header.css.scss
を編集
154.
践 実 こうなったら正解
155.
践 実 こうなったら正解 ディレクトリに追加するだけで header.css.scss を反映してくれた
156.
践 実 books用のSCSSを 編集してみよう すでに用意されてる app/assets/stylesheets/books.css.scss を変更
157.
践 実 books用 の scss
を用意しました http://bit.ly/s-0130 chrome のタブを一つ開いてここにアクセス
158.
践 実 http://bit.ly/s-0130
159.
践 実 http://bit.ly/s-0130 全部コピー
160.
践 実 app/assets/stylesheets/books.css.scss 開く
161.
践 実 app/assets/stylesheets/books.css.scss 貼り付け
162.
践 実 こうなったら正解
163.
践 実 こうなったら正解 今回はコピペでしたが、自分で books.css.scss をいじって デザインに挑戦してみてください
164.
書籍一覧のデザインができた
165.
書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー
166.
書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー お疲れ様ですー デザイン超楽しみです!
167.
書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー お疲れ様ですー デザイン超楽しみです! ぬおー
プレッシャーかけてきた!!
168.
践 実 ここまで作業したものを 本番環境に送る ここまで作業したRailsプロジェクトを Heroku に送ります
169.
践 実 コンソールで作業 コンソールをクリック
170.
践 実 コンソールで作業 ここがアクティブになっているのを確認 (白い四角)
171.
践 実 コンソールで作業 ここがアクティブになっているのを確認 (白い四角) control + c
を押してサーバをストップ
172.
践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git
add --all git commit -m“Design” git push heroku master heroku info • URLが表示される
173.
践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git
add . ブラウザで Heroku 上の bookshelf を確認 git commit -m“Design” git push heroku master heroku info • URLが表示される
174.
以上で終了です ブラウザだけで学ぶWebアプリ開発【デザイン編】
175.
補足説明
176.
トップページを作りたい
177.
トップページを作りたい • app/views/ の中に
home というディレクトリを作成 • そのディレクトリの中に index.html.erb というファイルを作成 • app/controllers の中に home_ controllers.rb というファイルを作成
178.
トップページを作りたい home_controller.rb にこう書く
179.
トップページを作りたい config/routes.rb の root
の部分をこう書き換える
180.
フォームのラベルを日本語にしたい
181.
フォームのラベルを日本語にしたい • app/views/books/_form.html.erb を開く
182.
フォームのラベルを日本語にしたい • app/views/books/_form.html.erb をこう編集する
183.
フォームのボタンを日本語にしたい
184.
フォームのボタンを日本語にしたい • config/locales/ に
ja.yaml というファイルを作成し、追加
185.
フォームのボタンを日本語にしたい • config/locales/ に
ja.yaml にこう書く
186.
フォームのボタンを日本語にしたい • config/application.rb にこう書く ここまでやったら
rails サーバを再起動
187.
リンクの書きかた
188.
リンクの書きかた • 本の登録ページ(/new)へのリンク <%= link_to
'本の登録', new_book_path %> • 本個別ページ(/books/4)ヘのリンク ※eachの中でだけ有効 <%= link_to '詳細', book %> • 本編集ページ(/books/4/edit)ヘのリンク ※eachの中でだけ有効 <%= link_to '詳細', edit_book_path(book) %> • トップページ(/)へのリンク <%= link_to 'トップページ', root_path %>
189.
リンクに id class
をつけたい
190.
リンクに id class
をつけたい • こう書く <%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %> class id
191.
リンクの中にタグを入れたい
192.
リンクの中にタグを入れたい • こう書く <%= link_to
root_path do %> <span>トップページ</span> <% end %>
193.
画像の追加方法
194.
画像の追加方法 • app/assets/images ディレクトリの上で右クリック Upload
File to images を選択
195.
画像の追加方法 • ここに画像をドラッグ アンド
ドロップ
196.
画像の追加方法 • こう書く <%= image_tag('koshikawa.jpg',
:alt => "越川さんの写真") %> 画像へのパス assets/images/画像ファイル の場合は、画像名のみ書く asstes/images/user-photos/画像ファイル の場合は、user-photos/画像ファイル と書く alt タグ
197.
画像に class id
をつけたい
198.
画像に class id
をつけたい • こう書く <%= image_tag('k.jpg', :alt => "越川さん", :class => kossy , :id => kossy ) %> class id
199.
画像をリンクにしたい
200.
画像をリンクにしたい • こう書く <%= link_to
image_tag('koshikawa.jpg', :alt => '越川さん'), root_path %> 画像ファイル alt リンク先
201.
リンク付き画像のリンク、画像に id class をつけたい
202.
リンク付き画像のリンク、画像に id class をつけたい •
こう書く 画像のclass <%= link_to image_tag('koshikawa.jpg', :alt => '越川さん', :class => "kossy", :id => "kossy"), root_path, :class => "kossy-link", :id => "kossy-link" %> 画像のid リンクのclass リンクのid
203.
勝手にcssを読み込まれると困るんですけど
204.
勝手にcssを読み込まれると困るんですけど • assets/stylesheets の中に
scssファイルを入れれば、何の設定もせず に画面に反映されてくれて便利ですが、reset のためのファイルなど、 こちらの意図した順番で scssファイルを読み込んでくれないと困る場合 があります • 順番を指定して scssファイルを読み込ます方法はいくつかあります
205.
勝手にcssを読み込まれると困るんですけど • 対策1 :
ファイル名で対応する方法
206.
勝手にcssを読み込まれると困るんですけど • 対策1 :
ファイル名で対応する方法 Rails はアルファベット順に scssファイルを読み込みます。 なので、例えば reset.css.scss は一番始めに読み込ませたいのに、 後のほうに読み込んでしまいます。 アルファベット順に scssファイルを読み込む、というのを利用し て、 0reset.css.scss と、ファイル名の先頭に数字の「0」を付け ると一番始めに読み込むようになります。
207.
勝手にcssを読み込まれると困るんですけど • 対策2 :
自分で一つ一つファイルを読み込む設定を書く
208.
勝手にcssを読み込まれると困るんですけど • 対策2 :
自分で一つ一つファイルを読み込む設定を書く app/assets/stylesheets/application.css を開く
209.
勝手にcssを読み込まれると困るんですけど • 対策2 :
自分で一つ一つファイルを読み込む設定を書く 「 *= require_tree . 」 を削除
210.
勝手にcssを読み込まれると困るんですけど • 対策2 :
自分で一つ一つファイルを読み込む設定を書く *= require ファイル名 を任意の順番で書く(拡張子は不要)
211.
scss の変数や mixin
を別ファイルにしたら エラーが出たのですが…
212.
scss の変数や mixin
を別ファイルにしたら エラーが出たのですが… • assets/stylesheets の中に scssファイルを入れれば、 何の設定もせずに画面に反映されてくれて便利ですが、 ある scssファイルが、別の scssファイルに書かれた変数やmixinを呼び 出すときにエラーが出てしまいます。
213.
scss の変数や mixin
を別ファイルにしたら エラーが出たのですが… app/assets/stylesheets/application.css を application.css.scss にファイル名を変更
214.
scss の変数や mixin
を別ファイルにしたら エラーが出たのですが… application.css.scss の中身を削除 scssファイルを追加したら自動で画面に反映される機能はなくなります
215.
scss の変数や mixin
を別ファイルにしたら エラーが出たのですが… application.css.scss に @import ファイル名 (拡張子なし)と、 scssファイルの import の設定を任意の順番で書いていきます。 変数や mixin が書かれた scssファイルは、それらを呼び出す scssファイル の前に import する必要があります。
216.
compass を使いたい
217.
compass を使いたい Gemfileに gem
'compass-rails' と書き足します。 書き足したら、コンソールで bundle コマンドを入力。 サーバを再起動。
218.
compass を使いたい application.css.scss に
compass の import の設定を書きます。 (application.css を scss に変更する手順は「scss の変数や mixin を 別ファイルにしたら エラーが出たのですが…」参照)
219.
Heroku にアップするための設定
220.
Heroku にアップするための設定 ruby '2.0.0' group
:development, :test do gem 'sqlite3' end group :production do gem 'pg' gem 'rails_12factor' end Gemfile の 7行目を消して これをコピペ
221.
Heroku にアップするための設定 git config
--global user.email xxx@xxx.jp git config --global user.name name コンソールに一行ずつ入力
222.
Heroku にアップするための設定 git init git
add --all git commit -m“作業内容メモ” コンソールに一行ずつ入力
223.
Heroku にアップするための設定 heroku login メールアドレスとパスワードを入力 heroku
keys:add ~/.ssh/id_rsa.pub heroku create git push heroku master heroku run rake db:migrate コンソールに一行ずつ入力
Download now