AdobeEdge系アプリ触ってみた
•
4 likes•1,643 views
こちらの勉強会で発表させていただいた資料です http://connpass.com/event/7493/
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to AdobeEdge系アプリ触ってみた
Similar to AdobeEdge系アプリ触ってみた (20)
AdobeEdge系アプリ触ってみた
- 1. 2014.07.24 SONICJAM 八木 貴之 Adobe Edge 系 アプリ触ってみた
- 2. 自己紹介 ・名前：八木 貴之（やぎ たかゆき） ・Facebook： https://www.facebook.com/jamesyagi ・twitter: @tarrkn ・所属： 株式会社SONICJAM Markup Engineer ・趣味： 登山、ノイズ音楽、電子顕微鏡 ・マイブーム： ロードバイク
- 5. なんぞや モバイルサイトのリモート検証ツール 【公式詳細】 ! Edge Inspect は、複数のモバイルデバイスでコンテンツを プレビューする必要のある Web 開発者やデザイナーに不可欠なアプリケーションです。 ! 複数の iOS と Android デバイスをワイヤレスでコンピューターと組み合わせ、 接続しているどのデバイスからでもスクリーンショットを作成したり、 HTML、CSS、JavaScript への変更をリアルタイムで確認することができます。
- 6. 特徴
- 9. ・PCからリモートでスクリーンショット撮影 特徴 .3 ついでなのか端末スペックが記された テキストファイルも生成される。便利！ device_model = iPhone device_res = 640x1136 orientation = portrait os_name = iOS os_version = 6.1.2 pixel_density = 326 ppi request_id = 337fb2f0-9134-4f6c- ae33-cea60aed42d8 status = Viewport url = https://www.google.co.jp/ 画像は即座にPCへ
- 12. まとめ・感想
- 15. なんぞや HTML/CSS/JS コードエディタ 【公式詳細】 ! Edge Code は、HTML、CSS、JavaScript を扱う Web デベロッパー、 デザイナー向けの軽量コードエディターです。 Edge Code はブラウザーと連携し、コードへの変更を 直接画面に表示することで開発時間を短縮します。
- 16. 特徴
- 24. Brackets Extension Registry ToGist エディタ上の選択したソースをシームレスに Github Gist へアップ https://github.com/davidderaedt/togist
- 25. Brackets Extension Registry ToDo コメントの行頭に TODO / NOTE / FIXME / CHANGES / FUTURE 等の 各キーワードを付記するだけで、TODOリスト化して一覧してくれるプラグイン。 とても管理しやすく、カラーリングも見やすい。 https://github.com/mikaeljorhult/brackets-todo
- 26. ・ちょっとした修正/検証作業であれば、xampp, mamp, grunt(connect), Vagrantなど 別途ローカルサーバの立ち上げを必要とせずエディタ内で完結するのでお手軽 ・プリプロセッサを通過しないピュアなコードのみの対象となってしまうが、 クイック編集" ＆ ライブプレビュー" がわりと高速かも ・CSS Shapesでテキストの回り込みに対してシェイプを定義したい時使える ・webフォントをシームレスに適応しながら吟味したい時使える メリット デメリッ ト ・ クイック編集"、"ライブプレビュー" はけっこう魅力的だが、 タスクランナー等で各言語コンパイルする必要がある場合に活用できなくなってしまう ・コードビュー分割が不可
- 27. まとめ・感想
- 30. なんぞや レスポンシブWebデザインツール 【公式詳細】 ! メディアクエリーブレークポイント、正確な CSS レイアウト、 グループ化などを使用して、レスポンシブデザインを素早く開始し、 正確なプロトタイプを作成できます。 Edge Reflow は Photoshop CC と連係しているため、クリック1つで 固定デザインをレスポンシブ Web デザインに変換できます。
- 31. 特徴
- 38. ・保存するとreflowファイル(.rflw)を生成されて、 いつでも再編集可能 ・psd上からEdge Reflowプロジェクトファイル生成可能 ・PhoneGap Build (割愛) に移行してアプリの プロトタイプ作成 ・作成したモックのソースコード一式をパブリッシュ可能 特徴 .etc
- 39. / Projectname ┣ / assets ┃ ┣ / img / ** … アセット画像格納 ┃ ┣ boilerplate.css … normalize、ヘルパークラス、プリント用スタイル定義ファイル ┃ ┣ hoge.css … 作成したhogeページのcss定義ファイル ┃ ┣ hoge.html … 作成したhogeページのhtml (ビュー用html内でiframe表示) ┃ ┣ fuga.css … 作成したfugaページのcss定義ファイル ┃ ┣ fuga.html … 作成したfugaページのhtml (ビュー用html内でiframe表示) ┃ ┗ Project_Previewer.html … ビュー用html ┗━━ Projectname.rflw … EdgeReflowプロジェクトファイル
- 41. まとめ・感想
- 44. なんぞや HTML5アニメーションツール 【公式詳細】 ! Edge Animate を使用すれば、Web デザイナーはデスクトップおよび モバイルの両方を対象とした、Web、デジタルパブリッシング、 リッチメディア広告などで使用できる、インタラクティブな HTML アニメーションを簡単に作成できます。
- 45. 特徴
- 49. / 任意作成dir ┣ / edge_includes / … 外部読み込みしたvendor格納 ┃ ┣ edge.4.0.0.min.js … コアライブラリ(自動で生成) ┃ ┗ jquery-2.0.3.min.js … これもデフォルト(自動で生成) ┣ / images / ** … アセット画像格納 ┣ hoge.html … 処理が描画されるhtml ┣ hoge_edge.js … 画像やシンボルのプロパティ定義用 ┣ hoge_edgeActions.js … トリガーなどのアクション定義用 ┗ hoge_edgePreload.js … 必要なjsファイル一式の定義用 <script type="text/javascript" charset="utf-8" src="keyframe_animation_finished_edgePreload.js"></script> <style> .edgeLoad-EDGE-109228010 { visibility:hidden; }</style> <div id="Stage" class= EDGE-109228010"></div> ・必要なライブラリと以下コードだけ抜き取れば、取り急ぎ移植できるっぽい
- 51. まとめ・感想
- 53. 以上。
- 54. ご清聴ありがとうございました。