Wo e Tech akers
Kyoto 7 - IWD
見た目 入 制作
Hello!
I a Keiko I oue
Web 制作全般(HTML5, CSS3, Javascript)やっ WordPress構築 タ ン やっ
く 願い ＾＾
.
作った ＝
作った
里親 チン
各自治体 収容 い 保護犬 タ ン タ化 そ 利
用 里親希望者 保護犬 チン 行う 資料
https://drive.google.com/file/d/0B-Khx9mdGR4hbWtJUjJDdlFlb0E/vie w?usp=sharing
Code for Kyoto ベン 参加 た っ
ン タチ ン ン 応募 目標 制作
※ ン タチ ン
地域課題 解決 目的 地方自治体 中心 公共 タ 活用 た年間 ベン 開催 伴う一般参加型コン
http://urbandata-challenge.jp/
.
何 始 ＝
アプリ制作フロー
1.
見た目
2.
仕様
っく
固
3.
あえ
見た目
作
5.
実装
6.
ビ
4.
動 作
た 制作 8割 た う
1.
見た目
2.
仕様
っく
固
HTML CSS 静的 画面 作成
段階 動 く
＆ タン 押 た 画面
＇
使用
タ：Visual Studio Code
CSS ワ
Material-design-lite Animate.css
Javascript jQuery
3.
あえ
見た目
作
4.
動 作
Material design lite
Google 謹製 CSS ワ
名前 通 ン 概念 取 入 い
コン ネン 呼 多数用意
そ 利用 手軽 ン Web
作成
https://getmdl.io/
保護犬 タ JSON形式 作成
質問 答え タ チン 行う
作成
Javascript jQuery
HTML, CSS, Javascript 状態 っ
い動 作 た 最終的 ビ apk
生成
出来上 ったapk Android実機
ン
ビ
Apache Cordova
5.
実装
6.
ビ
Apache Cordova
HTML5, CSS3, Javascript いった Web 開発技術 開発
ョン開発 ワ
iOS, Andoroid 複数 対応 た 作成
API 利用 GPS ネ 機能
https://ja.wikipedia.org/wiki/Apache_Cordova
.
良い いく
今後 課題
◈ ionic 導入
AngularJS ベ た UI ワ
特化 た ionic 使用 ネ 近い
UI 備えた 開発
http://ionic.io/2
AngularJS 作法 則った 実装方法 学習 必
要 あ
今後 課題
◈ JSON タ 更新 管理
JSON 更新 Web 作成
上 JSON タ 取得 機
能 実装
上記 実現 た う た 良い ＝
Firebase 使う＝＝
https://firebase.google.com/
.
やっ
自分 た画面
ベタ 作っ そ
簡単
た
完成
度 50% く い＜＜
次 大変
完成度 上
ネ
近い 考え
上
必要 知識や学習コ
増え 独学 厳 い
ベン 開催求 ！
Apache Cordova +
A gularJS + io ic
あ Firebase
Credits
Special thanks to all the people who made and
released these awesome resources for free:
◈ Presentation template by SlidesCarnival
◈ Photographs by Unsplash
◈ Backgrounds by SubtlePatterns
Presentation design
This presentations uses the following typographies and colors:
◈ Titles: Playfair Display
◈ Body copy: Droid Sans
You can download the fonts on this page:
https://www.google.com/fonts#UsePlace:use/Collection:Droid+Sans:400,700|Playfair+Display:400,70 0,400italic,700italic
Click on the “arrow button” that appears on the top right
◈ Yellow #ffd900
◈ Light gray #f3f3f3
◈ Black #000000
You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®
SlidesCarnival icons are editable shapes. This means that you can:
● Resize them without losing quality.
● Change line color, width and style. Isn’t that nice? :)
Examples:
Now you can use any emoji as an icon!
And of course it resizes without losing quality and you can change the color. How? Follow Google instructions
https://twitter.com/googledocs/status/730087240156643328
