URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 1
Monacaを使って
モバイルアプリを作ろう
アシアル株式会社
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 2
自己紹介
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 3
自己紹介
• 名前
– 岡本雄樹 (ジャスティス岡本)
• 職業
– アシアルという会社で教育事業を営んでおります
• ブログ
– ジャスティス岡本
– http://j801.com/
• 著書
– 「イラストでよくわかるPHP
はじめてのWebプログラミング入門」
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 4
最近やったお仕事
最近やったお仕事
– 春の12日間連続新人研修
– アプリ開発セミナー全国キャラバン
– スクーで外部API(Web API)入門講座
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 5
アプリ開発セミナー全国キャラバン
• 北は北海道から南は沖縄まで実施
– 会社の経費で全国をまわってきました!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 6
沖縄!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 7
名古屋!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 8
京都!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 9
こちらはスクー 4月1日
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 10
ジャスティス岡本ブログ
• 活動報告はブログでチェック
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 11
Monacaを紹介します
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 12
Monacaとは?
• JSでモバイルアプリを開発するためのツール
• アプリ開発に必要なことを色々やってくれる
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 13
基本的な事はクラウドで全部やってくれる
WebベースのIDE デバッガー ビルドシステム
クラウド
ソースコードは
クラウド上に ターゲットOSに
合わせた環境で
アプリをビルド
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 14
最近、公式ガイドブックも出ました
第1章 HTML5ハイブリッドアプリ開発とMonaca
第2章 Monacaの使い方
第3章 はじめてのMonacaアプリ
第4章 CSSアニメーションと描画機能
第5章 Onsen UIの基本
第6章 イベントとインタラクション
第7章 画面のパターンと構成
第8章 Cordovaとデバイス機能
第9章 AngularJS入門
第10章 本格的なアプリ開発
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 15
Monacaを使う理由
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 16
Monacaを使う理由
• JSでモバイルアプリを開発できる!
– iOS/Android/Windows/Chrome Apps対応
• ユーザーが多い!
– 9万人ぐらい
• すぐに始められる!
– MacでもWindowsでもLinuxでもOK
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 17
アプリの仕組み
• OSのWebView機能でアプリを動かす
ネイティブコード
HTML
コンテンツ
アプリケーション本体は
HTML5技術で実装
ハードウェア機能を利用可能
ネイティブアプリ形式で配布
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 18
Monaca三種の神器
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 19
Monaca IDE
ファイルの管理を
行います
ファイルの編集を
行います
プレビューを
表示します
デバッグ情報を表示します
ダッシュボードを
開きます
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 20
Monacaデバッガー
• リアルタイムにアプリの動作確認!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 21
Onsen UI
• SPAに対応したUI フレームワーク
http://ja.onsen.io/
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 22
詳しくは、別スライドを参照してください
• AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
– http://www.slideshare.net/AsialCorp/angularonsen-uihtml5
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 23
最近のMonaca動向
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 24
Crosswalkを利用したビルドに対応
• Crosswalkとは
– Intel社が開発した超高速なWebViewです
• Androidアプリの速度が倍速ぐらいになります
Androidアプリ
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 25
Monaca for Visual Studio
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 26
Monacaエンタープライズ
• エンタープライズ向けの有料プラン
– ソースコードの暗号化
– セキュアストレージ
– アプリの自動更新機能
– SAP等の既存システムとの連携
– サポートチームによる開発支援
– トレーニング
https://ja.monaca.io/enterprise.html
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 27
お知らせ
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. | 28
エンジニア募集中!
• シリコンバレーの連中とガチで戦いたい人歓迎!
• エンジニアの天国???社員の7割以上がエンジニア

JavaScript祭りLTでmonacaを紹介

  • 1.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 1 Monacaを使って モバイルアプリを作ろう アシアル株式会社
  • 2.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 2 自己紹介
  • 3.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 3 自己紹介 • 名前 – 岡本雄樹 (ジャスティス岡本) • 職業 – アシアルという会社で教育事業を営んでおります • ブログ – ジャスティス岡本 – http://j801.com/ • 著書 – 「イラストでよくわかるPHP はじめてのWebプログラミング入門」
  • 4.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 4 最近やったお仕事 最近やったお仕事 – 春の12日間連続新人研修 – アプリ開発セミナー全国キャラバン – スクーで外部API(Web API)入門講座
  • 5.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 5 アプリ開発セミナー全国キャラバン • 北は北海道から南は沖縄まで実施 – 会社の経費で全国をまわってきました!
  • 6.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 6 沖縄!
  • 7.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 7 名古屋!
  • 8.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 8 京都!
  • 9.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 9 こちらはスクー 4月1日
  • 10.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 10 ジャスティス岡本ブログ • 活動報告はブログでチェック
  • 11.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 11 Monacaを紹介します
  • 12.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 12 Monacaとは? • JSでモバイルアプリを開発するためのツール • アプリ開発に必要なことを色々やってくれる
  • 13.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 13 基本的な事はクラウドで全部やってくれる WebベースのIDE デバッガー ビルドシステム クラウド ソースコードは クラウド上に ターゲットOSに 合わせた環境で アプリをビルド
  • 14.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 14 最近、公式ガイドブックも出ました 第1章 HTML5ハイブリッドアプリ開発とMonaca 第2章 Monacaの使い方 第3章 はじめてのMonacaアプリ 第4章 CSSアニメーションと描画機能 第5章 Onsen UIの基本 第6章 イベントとインタラクション 第7章 画面のパターンと構成 第8章 Cordovaとデバイス機能 第9章 AngularJS入門 第10章 本格的なアプリ開発
  • 15.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 15 Monacaを使う理由
  • 16.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 16 Monacaを使う理由 • JSでモバイルアプリを開発できる! – iOS/Android/Windows/Chrome Apps対応 • ユーザーが多い! – 9万人ぐらい • すぐに始められる! – MacでもWindowsでもLinuxでもOK
  • 17.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 17 アプリの仕組み • OSのWebView機能でアプリを動かす ネイティブコード HTML コンテンツ アプリケーション本体は HTML5技術で実装 ハードウェア機能を利用可能 ネイティブアプリ形式で配布
  • 18.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 18 Monaca三種の神器
  • 19.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 19 Monaca IDE ファイルの管理を 行います ファイルの編集を 行います プレビューを 表示します デバッグ情報を表示します ダッシュボードを 開きます
  • 20.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 20 Monacaデバッガー • リアルタイムにアプリの動作確認!
  • 21.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 21 Onsen UI • SPAに対応したUI フレームワーク http://ja.onsen.io/
  • 22.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 22 詳しくは、別スライドを参照してください • AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ – http://www.slideshare.net/AsialCorp/angularonsen-uihtml5
  • 23.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 23 最近のMonaca動向
  • 24.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 24 Crosswalkを利用したビルドに対応 • Crosswalkとは – Intel社が開発した超高速なWebViewです • Androidアプリの速度が倍速ぐらいになります Androidアプリ
  • 25.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 25 Monaca for Visual Studio
  • 26.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 26 Monacaエンタープライズ • エンタープライズ向けの有料プラン – ソースコードの暗号化 – セキュアストレージ – アプリの自動更新機能 – SAP等の既存システムとの連携 – サポートチームによる開発支援 – トレーニング https://ja.monaca.io/enterprise.html
  • 27.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 27 お知らせ
  • 28.
    URL : http://www.asial.co.jp/│ Copyright © Asial Corporation. All Rights Reserved. | 28 エンジニア募集中! • シリコンバレーの連中とガチで戦いたい人歓迎! • エンジニアの天国???社員の7割以上がエンジニア