SlideShare a Scribd company logo
1 of 113
✕

Web制作会社様向け ~Monaca & SPIRAL®~

サーバ構築不要!HTML5で始める
Android&iOSアプリ開発セミナー
2013年8月29日
アシアル株式会社
株式会社パイプドビッツ
© Asial Corporation. & PIPED BITS Co., Ltd.

1
セミナーのポイント1
• すべての開発がクラウド上で完結
– 開発環境はインターネットに接続できるPCだけ

フロントエンド

© Asial Corporation. & PIPED BITS Co., Ltd.

バックエンド

2
セミナーのポイント2
• Web技術(HTML5、CSS、JavaScript)だけで開発

– Objective-CやJavaの知識、サーバサイドの構築も不要
フロントエンド

Objective-C
Java

バックエンド
(サーバサイド)

MySQL
Apache
Linux

© Asial Corporation. & PIPED BITS Co., Ltd.

3
セミナーのポイント3
• サンプルアプリを題材にした開発講座
– 具体的な開発イメージがわかる
飲食店販促用アプリ

スパイラルバーガー with Monaca

© Asial Corporation. & PIPED BITS Co., Ltd.

4
セミナーのポイント4
• 「スパイラルバーガー」のソースコード等をご提供
– 明日からの開発にすぐ使える

ソースコード

© Asial Corporation. & PIPED BITS Co., Ltd.

設定情報

5
セミナーの内容
• セッション1
– 「Monacaで作るHTML5ハイブリッドアプリ開発」
• アシアル株式会社 エンジニア

生形可奈子

• セッション2
– 「バックエンドの開発工数を80%削減できるSPIRAL®」
• 株式会社パイプドビッツ プロダクトマーケティング部 部長

小西辰也

• セッション3
– 「Monaca & SPIRAL®で作るアプリ開発講座」
• アシアル株式会社 エンジニア

生形可奈子

• 株式会社パイプドビッツ SDP認定制度運営部 部長
© Asial Corporation. & PIPED BITS Co., Ltd.

小泉久美子
6
Monacaで作る

HTML5ハイブリッドアプリ開発
アシアル株式会社
生形 可奈子

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

8
自己紹介
生形 可奈子(うぶかた かなこ)
元々は業務系/制御系のSEをやっていましたが、
教育の楽しさに目覚めてプログラミング講師に転身。

現在はエバンジェリストとしてMonacaの普及活動
なども行っています。
著書:「スラスラわかるJavaScript」(翔泳社)

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

9
モバイルアプリ開発を取り巻く状況

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

10
様々なモバイルOSが混在
世界中で利用されているモバイル端末には、様々な種類のOSが
搭載されています。さらに、今後新しいOSも登場するといわれ
ています。

iOS
Android iOS18%
Android

Android
25%
75%
25%

URL : http://monaca.mobi/
Reserved.

62%

Copyright © Asial Corporation. All Right

11
モバイルアプリ開発に関する障害
複数OS対応 × 需要の増大
•

それぞれのOSに合わせてアプリを開発しないと
いけない(開発環境、言語はそれぞれ異なる)
 開発環境の構築が大変
 開発コストとエンジニアの確保に課題

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

12
HTML5という選択肢

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

13
ハイブリッドアプリの登場
Webアプリとネイティブアプリのいいとこどりアプリ

• HTML5+JavaScriptで開発
• デバイスの機能を使える
• 端末にインストールできる
URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

14
ハイブリッドアプリのメリット
クロスプラットフォーム性
iOS、Android、Windows 8・・・HTML5に対応したプラットフォーム
である程度は互換性を保ちながら動作可能

Webの技術でネイティブの機能を使える
JavaScriptから、ブラウザに実装されている機能以外に端末固有の機能
を利用することができる
技術の習得コストの低さ・Webアプリとの親和性が強み

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

15
ハイブリッドアプリの課題
実行速度の見劣りがある
フルネイティブで作成されたアプリと比較し、画面描画の速度低下
が大きい。

事例やノウハウ蓄積はこれから
海外と比較し、日本でのハイブリッドアプリに関する事例が少ない。
HTML5も本格利用が始まったばかり。

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

16
ハイブリッドアプリが担うニーズ
Webサイトのアプリ化や、複雑なネイティブ機能
を使わない場合は、ハイブリッドアプリで十分に
対応可能。

読み物系アプリ

業務アプリ

URL : http://monaca.mobi/
Reserved.

キャンペーン/プロモーション
向けアプリ

Copyright © Asial Corporation. All Right

17
Monacaの紹介

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

18
誰でも今日からアプリ開発。
2013年9月12日
正式リリースしました!
特徴1:ハイブリッドアプリ開発
特徴2:すべてをブラウザーで

特徴3:UIフレームワークも
http://monaca.mobi/

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

19
Monacaとは
• クラウドベースのハイブリッドアプリ開発環境
• ブラウザだけで開発~テスト~アプリの生成までの
すべての工程を行うことができる

1. ブラウザで開発

2. 実機でリアル
タイムに動作確認

URL : http://monaca.mobi/
Reserved.

3. ブラウザからビルド
して配布

Copyright © Asial Corporation. All Right

20
開発実績

auヘッドライン
KDDI株式会社

名刺管理: Eight
© 三三株式会社

テレ朝動画アプリ
© 株式会社テレビ朝日

URL : http://monaca.mobi/
Reserved.

シューズファインダー
© 株式会社アシックス

Copyright © Asial Corporation. All Right

21
Monaca IDE
ブラウザ上で動作するIDEで、アプリ開発からデバッ
グ、ビルドまで一貫して機能を提供します。

・コードハイライト
・シンタックスチェック

・zen-coding

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

22
Monacaデバッガー
Monaca上のプロジェクトをシミュレートして、実機
で動作検証を行うことができます。

・プロジェクトの内容を
即時反映
・エラーログやスクリーン
ショットをアップロード
Google Play, App Storeからダウンロードできます。
URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

23
Onsen UI
シンプルなコードでモバイル用UIを構築することがで
きるフレームワークです。

・モバイルアプリライクな
フラットデザイン
・ネイティブと遜色ない
アニメーション

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

24
Monaca IDE の開発機能

ファイルの編集
を行います

ファイルの管理
を行います

デバッグ情報
を表示します
URL : http://monaca.mobi/
Reserved.

ライブ
プレビューを
表示します

Copyright © Asial Corporation. All Right

25
Monacaデバッガーの使い方
ログイン

プロジェクト選択

URL : http://monaca.mobi/
Reserved.

プロジェクト起動

Copyright © Asial Corporation. All Right

26
デモ

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

27
充実したサポート体制
ユーザーコミュニティや有償のテクニカルサポート、
アプリ開発トレーニングなど、ユーザーのレベルに応
じた様々なサポートメニューが用意されています。

フォーラム

技術サポート

URL : http://monaca.mobi/
Reserved.

トレーニング

Copyright © Asial Corporation. All Right

28
料金プラン
おすすめ!
機能

Basic

Personal

Professional

Business

Enterprise

料金

無料

月980円

月5,000円

月8,000円

個別見積り

ストレージ
容量

250MB

1GB

10GB

制約なし

制約なし

PhoneGapプ
ラグイン組
込

×

×

○

○

○

チーム機能

△

△

○

○

○

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

29
もっと知りたい方のために

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

30
Monacaのサンプルアプリ
10を超えるサンプルアプリの解説。
データベースの利用や音楽ファイルの再生など、
個別のトピックもあります。
http://docs.monaca.mobi/sampleapp/

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

31
Monacaの記事を連載中です!

「ThinkIT Monaca」で検索

URL : http://monaca.mobi/
Reserved.

「ITPro Monaca」で検索

Copyright © Asial Corporation. All Right

32
ありがとうございました

URL : http://monaca.mobi/
Reserved.

Copyright © Asial Corporation. All Right

33
✕

サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー

バックエンドの開発工数を
80%削減できるSPIRAL®
2013年8月29日
株式会社パイプドビッツ
プロダクトマーケティング部
部長 小西辰也
© Asial Corporation. & PIPED BITS Co., Ltd.

35
ご紹介
• 会社概要
–
–
–
–
–
–
–

社名:株式会社パイプドビッツ
拠点:本社(東京)、札幌支店、大阪支店、福岡支店
代表者:佐谷 宣昭
設立:2000年4月3日
上場:2006年12月(東証マザーズ)
資本金:315百万円
従業員数:173名

• 自己紹介
– 氏名:小西辰也
– 所属:開発本部プロダクトマーケティング部
– 経歴:
• 大阪支店、インバウンド営業部門、パートナー営業部門の責任者
• スパイラル・デベロッパーズ・プログラム(SDP)の立上げ
• プロダクトマーケティング部門の責任者
© Asial Corporation. & PIPED BITS Co., Ltd.

36
事業コンセプト

※「情報資産の銀行」は当社の登録商標です。
© Asial Corporation. & PIPED BITS Co., Ltd.

37
提供サービス

企業と業界の課題を解決します

© Asial Corporation. & PIPED BITS Co., Ltd.

38
本題

© Asial Corporation. & PIPED BITS Co., Ltd.

39
App Storeでダウンロードされている
企業プロモーション用アプリは?

© Asial Corporation. & PIPED BITS Co., Ltd.

40
カテゴリー別で最上位に表示された
企業プロモーション用アプリ

(カタログカテゴリー)

(フード/ドリンクカテゴリー)

※2013年8月27日時点の調査による
© Asial Corporation. & PIPED BITS Co., Ltd.

41
UNIQLOアプリのメニュー構成
• STORES
–
–
–
–

•
•
•
•

店舗検索
商品バーコードスキャン
オンラインストア
ユニクロアプリシリーズ

CIRASHI (チラシ)
COUPONS (クーポン)
MY NEWS (お知らせ)
SETTING (マイページ)
– ユーザー情報の登録・編集
– マイストアの登録・編集など

• 通知

© Asial Corporation. & PIPED BITS Co., Ltd.

42
マクドナルドアプリのメニュー構成
•
•
•
•
•

店舗 (検索)
クーポン
週刊マック (お知らせ)
FUN (ゲームなど)
マイページ
– 会員情報の登録・編集など

• 通知

© Asial Corporation. & PIPED BITS Co., Ltd.

43
バックエンド(サーバサイド)開発が
必要なメニューは意外と多い
DB系
サーバ

店舗マス
タDB

商品マス
タDB

チラシ
管理DB

通信

会員マス
タDB

クーポン
管理DB

お知らせ
管理DB

配信系
サーバ

© Asial Corporation. & PIPED BITS Co., Ltd.

プッシュ

メール

通知

配信

44
バックエンド開発の
3つのボトルネック

人

納期

© Asial Corporation. & PIPED BITS Co., Ltd.

予算

45
ボトルネックを解消する
クラウドサービス

BaaS
© Asial Corporation. & PIPED BITS Co., Ltd.

46
BaaSって、なに?
・Backend as a Service
・モバイルアプリのバックエンド機能を備え、
APIで利用できるクラウドサービス

API

認証

DB
GPS

© Asial Corporation. & PIPED BITS Co., Ltd.

PUSH

ファイル
画像

47
BaaSのメリット
バックエンド開発のボトルネック解消
• インフラの構築・運用スキルは不要
– インフラエンジニアがいなくても開発ができ
る

• スピード開発
– インフラ設計・調達・構築の期間を短縮
– API・管理画面の開発の期間を短縮

• コスト圧縮
– 開発コスト
– 運用・保守コスト
© Asial Corporation. & PIPED BITS Co., Ltd.

48
はBaaS
なのか?

© Asial Corporation. & PIPED BITS Co., Ltd.

49
Webアプリを開発できて
BaaSとしても使える
クラウドサービス

© Asial Corporation. & PIPED BITS Co., Ltd.

50
SPIRALの仕組み
DBを中心としたアプリ開発プラットフォーム
・

Webアプリ

モバイルアプリ

組合せるだけ

カスタマイズ

Web&Mailコンポーネント
フォーム

一覧表

PHP

マイエリア
ID

連携

API

PW

認証

配信

出力
入力

DB

DBプラットフォーム
Copyright© PIPED BITS CO., LTD.

51
SPIRALを使うと
どんないいことがあるの?

© Asial Corporation. & PIPED BITS Co., Ltd.

52
モバイルアプリとWebアプリのDBを共通化
モバイルアプリ

会員管理

API連携

PC
サイト

会員管理
Webアプリ

スマホ
サイト

会員管理
Webアプリ

© Asial Corporation. & PIPED BITS Co., Ltd.

会員DB
共通化

53
DBを共通化するメリット
• クライアント企業
– データの一元管理による効率的な運用
– 会員ユーザのユーザビリティ向上

• Web制作会社
– Web制作案件とモバイルアプリ開発案件を受注しやすい
※会員DBを管理すると、コンペになりにくい

© Asial Corporation. & PIPED BITS Co., Ltd.

54
モバイルにも高速で多彩なメール配信

© Asial Corporation. & PIPED BITS Co., Ltd.

55
プッシュ通知があれば
十分じゃないの?

© Asial Corporation. & PIPED BITS Co., Ltd.

56
一長一短があるプッシュとメール
いいとこ取りができるSPIRAL
「デバイストークンだけでいい?会員情報を取得すべき?」は超重要
項目

プッシュ通知

メール配信

オプトインの
しやすさ

◯

△

プッシュ通知はアプリ起動時にワンクリックでオプ
トインできる。

通知の
視認性

◎

△

ポップアップするプッシュ通知の方が高い。メール
配信でもローカルプッシュ設定をしている場合は高
い。

メッセージの
文字数と表現

△

◯

プッシュ通知は画面表示できる文字数が尐ない。
メールはHTMLで表現力を高めることができる。

メッセージの
保存

×

◯

メールはメーラーにメッセージが保存できるため、
検索することができる。

セグメント
配信

△

◯

プッシュ通知は多様な属性を取得するにはアプリと
の連動が必要。メールは登録時にエントリーに取得
が可能。

◯

プッシュ通知は規約により信頼性を保証されていな
い。メール配信はキャリアブロックに対応できる仕
組みを実装していれば安定した配信が期待できる

信頼性

△

補足説明

© Asial Corporation. & PIPED BITS Co., Ltd.

57
プッシュとメールを組み込んだフロー
アプリストア
1)アプリを
ダウンロード

2)プッシュ
通知許可

App Store

Googleplay

プッシュサーバ
APNs
(Apple Push Notification Service)

UI開発が必要です。
※PHPであれば、SPIRAL上
に設置可

GCM

(Google Cloud Messaging)

A:deviceToken
G:Registration ID

6)通知依頼
3)デバイストー
クン発行

プッシュ通知
設定UI

7)プッシュ通知

5)通知設定

SPIRALにプッシュ通知等の
証明書の設定が必要

スパイラルAPI
4)デバイストークン
格納

デバイス
トークンDB
スパイラルAPI

スパイラルAPI

会員
DB

会員登録

メール配信UIは
SPIRALに標準実装

メール配信

© Asial Corporation. & PIPED BITS Co., Ltd.

58
Passbookを使ったプロモーション

© Asial Corporation. & PIPED BITS Co., Ltd.

59
Passbookとは?
Passbookはデジタルクーポン管理アプリです
(iOS6.0以降、MacOSX10.8.2以降の端末に対応/iPhone5にプリインストール)

デジタルクーポン(パス)
イベントの
入場券

搭乗券

店舗カード

すべてのパス
を1つのアプ
リで集約管理

クーポン

その他

ダウンロード

パス発行者のメリット
・スマホアプリがなくても、パスをダウンロード
した端末にプッシュ通知ができる。
(位置情報によるローカルプッシュにも対応)
・ユーザが1度ダウンロードしたパスを更新
することができる。

ユーザメリット
・多種多様なパスを1つのアプリにまとめて
管理できる。
・プッシュ通知によるお知らせを任意に設定
できる。

※Passbookは、米国Apple Inc.の米国およびその他の国における商標または登録商標で
す。
© Asial Corporation. & PIPED BITS Co., Ltd.

60
SPIRALのPassbook機能でできること
1)Passbook対応のパスを発行
イベントの
入場券

搭乗券

店舗カード

2)DB属性を付与したパスを生成
イベント受付
DB

その他

3)多彩な経路でパスを配布
SPIRAL
DB

認証エリア
(マイエリ
ア)

ID
PASS

スパイラルAPI連携
サンキュー
ページ

モバイル
アプリ内

会員証
NO,001
山田 太郎様

4)「SPIRALシャリーン」連携で
クーポンの利用状況などを把握

メール

Web一覧表

入場券
受付NO,007

会員
DB

クーポン

クーポン発行
DB

DL

クーポンの回
収情報を取得

DL

パス

クーポン
20%off

顧
客

シャリーン♪

店
員

SPIRALシャリーンはQRコードを読取り、情報を付加
してSPIRALのDBへ送信できるiPhoneアプリです。

© Asial Corporation. & PIPED BITS Co., Ltd.

61
安心のセキュリティ

© Asial Corporation. & PIPED BITS Co., Ltd.

62
第三者機関による高い評価と
セキュリティに厳格な企業への豊富な実績
• 業界最多のセキュリティ・品質マネジメント認証
※ISO/IEC 20000-1:2011/JIS Q 20000-1:2012 (ITMS 513019)認証の登録範囲は、
情報資産プラットフォーム事業における保守・サポート業務の提供をサポートする
ITサービスマネジメントシステムです。

• 最高ランクのセキュリティ診断評価
2013年
LAC社
★★★★★(優良)

2012年
NRI ST社
AAA

2011年
LAC社
AAA

2010年
三井物産SD社
S

2009年
LAC社
AAA

2008年
NRI ST社
AAA

• 100以上の金融機関への導入実績
セキュリティチェックシート対応 年間200件
© Asial Corporation. & PIPED BITS Co., Ltd.

63
SPIRALを使うメリット
(1)モバイルアプリと
WebアプリのDBを共通化

(2)プッシュとメー
ルの
いいとこ取り

Push&Mail

会員DB

(3)Passbookを使った
プロモーション

(4)安心のセキュリ
ティ

© Asial Corporation. & PIPED BITS Co., Ltd.

64
SPIRALでサンプルアプリを
作ってみました

© Asial Corporation. & PIPED BITS Co., Ltd.

65
サンプルアプリ
スパイラルバーガー with PhoneGap

・iOS版:App Storeで「スパイラルバーガー」で検索
https://itunes.apple.com/jp/app/supairarubaga/id643500327?mt=8

・Android版:GooglePlayで「スパイラルバーガー」で検索
https://play.google.com/store/apps/details?id=com.pipedbits.SpiralBurger&hl=ja

© Asial Corporation. & PIPED BITS Co., Ltd.

66
スパイラルバーガー with PhoneGapの構成
プッシュサーバ
APNs

デバイス
トークンDB

GCM

SPIRAL管理画面
本部

メール配信
ログイン

パス発行

スマホアプリ
会員管理(登録・変更・退会)
マイページ・会員証
(Passbook)

会員
DB

店舗責任者
SPIRALアプリ
DB
(Webアプリ)
9
プッシュ通知
設定UI
ログイン

店舗検索

店舗
DB

店舗管理
一覧

クーポン(Passbook)

クーポン
DB

クーポン管理
一覧

おすすめ・お知らせ

お知らせ
DB

お知らせ
管理一覧

本部・店
長

顧客

API連携

© Asial Corporation. & PIPED BITS Co., Ltd.

67
工数シミュレーション
バックエンドの開発工数を80%以上削減

80%以上の削減効果

◆シミュレーションの前提
1)API開発・・・DB関連(insert、update、select)とプッシュ通知関連のAPIを開発する。
2)管理I/F開発・・・データ操作関連(検索、登録、更新、削除、ダウンロード)、プッシュ通知、簡易なメール配信の管理I/Fを開発する。
3)DB開発・・・P14に記載のDB(クーポン画像、緯度経度を含む)を開発する。
4)H/Wコスト・・・Webサーバ(ユーザ用・管理者用I/F、API管理)、配信サーバ、DBサーバ、バックアップサーバ、N/W機器の調達コス
ト。
※Passbokのバックエンド開発コストは含めていない。
68
© Asial Corporation. & PIPED BITS Co., Ltd.
スパイラル・デベロッパーズ・プログラム
SDPはSPIRALを使ってアプリケーションを開発する
Web開発・制作会社、SIer様向けの年会費60,000円の
有料制プログラムです。

3つのプログラムと活用ステップ
1.まず自社利用で試す

2.独自サービスを開発

3.継続ビジネスへ

「開発環境として」だけではなく、自社
利用であれば「本番利用できる」アカウ
ント(年間760,000円相当)をご提供し
ます。ご提案前にSPIRALを徹底的に試
すことができます。

電話サポートと開発者向けセミナーを
活用して、SPIRALの仕様を理解し、得
意技術や他のサービスと組合せた付加
価値の高いサービスを作ることができま
す。

クライアント向けのSPIRALアカウント
のご契約には初期・月次費用を特別価格
でご提供しますので、継続ビジネスへシ
フトできます。

開発環境/自社用本番アカウント

電話サポート&開発者セミナー

クライアント契約の特別価格
月次
初期

初期  10 万円 月次 2 万5,000 円
    7 万円    1 万7,500 円
※
5,000レコードの場合

(導入実績により最大50%OFF)
3 0 %OFF

初月

© Asial Corporation. & PIPED BITS Co., Ltd.

翌月以降

69
4週間無料トライアル
20分で体験できる
スパイラルバーガー スタートアップマニュアルの
TOPページのURLからお申し込みください

Monaca版とPhoneGap版の
サンプルソースがダウンロードできます

© Asial Corporation. & PIPED BITS Co., Ltd.

70
ご清聴いただき、
ありがとうございました

© Asial Corporation. & PIPED BITS Co., Ltd.

71
✕

サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー

Monaca & SPIRAL® で作る
アプリ開発講座

アシアル株式会社 生形 可奈子
株式会社パイプドビッツ 小泉 久美子

© Asial Corporation. & PIPED BITS Co., Ltd.

73
アジェンダ
• 講師紹介
• 解説するアプリの紹介
• Monaca, SPIRALによるアプリ開発講座

© Asial Corporation. & PIPED BITS Co., Ltd.

74
講師紹介
• バックエンド SPIRAL 解説担当
– 小泉 久美子
• 株式会社パイプドビッツ 所属
• 略歴 / 職務内容
– スパイラル®ユーザーさま向け導入支援担当、
スパイラル®アカウント管理・ユーザーさま向けイベント運営担当
を経て、
現在はスパイラル®デベロッパーズプログラム(SDP)責任者

• フロントエンド Monaca 解説担当
– 生形 可奈子
• アシアル株式会社 所属

© Asial Corporation. & PIPED BITS Co., Ltd.

75
解説するアプリの紹介

© Asial Corporation. & PIPED BITS Co., Ltd.

76
本講座で解説する題材アプリ
飲食店販促用アプリ

スパイラルバーガー with Monaca

お知らせ

クーポン

店舗マップ

© Asial Corporation. & PIPED BITS Co., Ltd.

マイページ
77
このアプリを開発するのに必要なもの
• スキル
– HTML5
– CSS3
– jQuery, jQuery Mobile

• 開発環境
– MonacaとSPIRALのアカウントだけあればOK!
– 全てクラウド上で開発が完結

© Asial Corporation. & PIPED BITS Co., Ltd.

78
jQuery Mobileとは?

• jQueryの技術をベースに作られたモバイルアプリや
スマホ向けサイトのUIを構築可能なフレームワーク
• HTML5とjQueryだけでスマホらしいUIを表現可能
• iOS, Android, WindowsPhoneなど様々なモバイルプラ
ットフォームに対応

© Asial Corporation. & PIPED BITS Co., Ltd.

79
Monaca, SPIRALによるアプリ開発講座

© Asial Corporation. & PIPED BITS Co., Ltd.

80
本講座ではクーポンとマイページを解説

お知らせ

クーポン

店舗マップ

© Asial Corporation. & PIPED BITS Co., Ltd.

マイページ

81
解説の流れ
1. スクリーンショットを元に画面構成を説明
2. 各画面ごとにアプリにおけるバックエンド、フロ
ントエンドそれぞれの役割を説明
3. SPIRAL上で行うバックエンドの設定を解説
4. Monaca上で行うフロントエンドの実装を解説

© Asial Corporation. & PIPED BITS Co., Ltd.

82
「クーポン」画面の解説

© Asial Corporation. & PIPED BITS Co., Ltd.

83
クーポンの画面構成

© Asial Corporation. & PIPED BITS Co., Ltd.

84
クーポン画面でのバックエンド・フロントエンド

クーポンDB

クーポン一覧

© Asial Corporation. & PIPED BITS Co., Ltd.

85
SPIRAL標準機能「一覧表・単票」とは?
• SPIRALで作成したDB内のデータを一覧形式でウェブ
ページを表示させる機能
– 単票と呼ばれる各項目の詳細情報を表示するためのペー
ジも作成でき、一覧表から単票にリンクさせることも可
能

© Asial Corporation. & PIPED BITS Co., Ltd.

86
画面に当てはめると…

一覧表

単票

© Asial Corporation. & PIPED BITS Co., Ltd.

87
クーポン画面の構成オブジェクト

DB

クーポンDB

一覧表

クーポン一覧(一般公開)

© Asial Corporation. & PIPED BITS Co., Ltd.

88
クーポン画面のバックエンドを構築
1. クーポンDBを作成
– DBの基本情報を設定
– DBのフィールド(テーブルのカラムに相当)を決める
– 必要に応じてフィールド属性を設定

2. クーポンDBにクーポンデータを追加
3. クーポンDB用の一覧表を作成
– HTMLソースの編集をしてjQuery Mobileを利用した見た目
に変更

© Asial Corporation. & PIPED BITS Co., Ltd.

89
jQuery Mobile流の画面定義
• jQuery Mobileでは、1つのHTMLファイルに複数の
ページを定義する
– data-role属性でページの構造を定義する
– 画面遷移はページのidをアンカーで指定する
index.html
お知らせ
クーポン
店舗マップ
マイページ
© Asial Corporation. & PIPED BITS Co., Ltd.

90
index.htmlの定義
<div data-role="page" id="page-info">
</div>

お知らせページ

<div data-role="page" id="page-coupon">
<div data-role="header">
<!--ヘッダーの定義-->
#page-coupon
</div>
がURLになる
<div data-role="content">
<!--コンテンツの定義-->
</div>
<div data-role="footer">
<!--フッターの定義-->
</div>
</div>

クーポンページ

<div data-role="page" id="page-map">
</div>

店舗マップページ
「マイページ」画面の解説

© Asial Corporation. & PIPED BITS Co., Ltd.

92
マイページ画面構成

© Asial Corporation. & PIPED BITS Co., Ltd.

93
マイページ画面でのバックエンド・フロントエンド
クーポンDB

会員DB

会員限定
クーポン一覧

認証エリア

スパイラル
API

JS

© Asial Corporation. & PIPED BITS Co., Ltd.

94
SPIRAL標準機能「マイエリア」とは?
• ログイン認証が必要な会員向けコンテンツを構築できる機
能
– 通常のWebアプリケーションで必要なセッションを操作するプログ
ラムを一切書くことなく設定だけで認証機構を実現
– マイエリア内には、SPIRAL上で作成した会員ページ(カスタムマイ
ページ)・Webフォーム・一覧表などのWebパーツを設置可能
– マイエリアの作成にはユーザIDやパスワードが含まれる会員DBが必
須

© Asial Corporation. & PIPED BITS Co., Ltd.

95
マイエリアのイメージ
ログイン

会員
DB

**
**

会員DBに登録された
ID,PWでログイン

公開エリア(誰でも閲覧可能)

認証DB

一般公開
クーポン

会員登録
フォーム

一覧表

××フォーム
**
**
********
********

マイエリア(認証エリア)
会員情報変更
フォーム
××フォーム
**
**
********
********

会員情報表示
カスタム
マイペー
ジ

会員限定
クーポン
一覧表

クーポン
DB

© Asial Corporation. & PIPED BITS Co., Ltd.

96
マイページ画面の構成オブジェクト

API

DB
会員DB

一覧表

クーポン一覧
(会員限定)

マイエリア

××フォーム
**
**
********
********

APIトークン

××フォーム
**
**
********
********

××フォーム
**
**
********
********

会員新規登録 / 会員情報変更 / 会員退会

© Asial Corporation. & PIPED BITS Co., Ltd.

97
マイページ画面のバックエンドを構築
1.
2.
3.
4.
5.

会員マスタDBを作成
新規会員登録フォームを作成
既存会員向け情報変更・退会フォームを作成
会員用の認証ページ(マイエリア)を作成
会員限定クーポン用の一覧表を作成
– 一覧表のアクセス権限を認証エリア内に限定

6. クーポンDB(一般公開・会員用で共用)に会員ク
ーポンのデータを追加
7. スパイラルAPIのAPIトークンを発行

© Asial Corporation. & PIPED BITS Co., Ltd.

98
スパイラルAPIとは?
• SPIRALで設定したDB内のデータやWebコンテンツを外部システムに出力
したり、外部システムからメール配信操作を実行可能なAPI
• SPIRAL内の会員情報を元にした認証関連(マイエリア)のAPIも完備

• 利用するには、あらかじめSPIRAL側でAPIトークン・トークンシークレッ
トを発行しておく必要がある
© Asial Corporation. & PIPED BITS Co., Ltd.

99
スパイラルAPIの利用の前に
• ロケータサービス
– スパイラルのAPIサーバは複数存在するため、APIの利用者側がどのAPIサーバ
を使うべきなのかを特定する必要がある
– 全システム共通のロケータサービス(https://www.pi-pe.co.jp/api/locator)に
対してlocator/apiserverメソッドのAPIを実行することで、自分のアカウント
がどのAPIサーバにリクエストすれば良いかを特定することができる
ロケータ
サービス

スパイラルAPI
サーバA

API

API
スパイラルAPI
サーバB

サーバB
サーバA

API
開発者X

開発者Y
© Asial Corporation. & PIPED BITS Co., Ltd.

100
スパイラルAPIの利用方法
1. HTTPヘッダにはX-SPIRAL-APIを渡す
Content-Type: application/json; charset=UTF-8
X-SPIRAL-API: area/login/request

2. APIへのリクエストはJSONデータをPOSTする
(応答データもJSON形式で返却される)

3. パラメータにはAPIトークン・パスキー・署名を付与する
POSTデータとして spiral_api_token, passkey, signature を渡す
{'spiral_api_token':'00123abc...987','passkey':'123def...012','signature':'789
023...a5f','jsessionid':'5678ab...90f', ...
spiral_api_token

管理画面から取得したAPIトークン

passkey

呼出時刻のエポック秒

signature

"APIトークン&passkey"の文字列をAPIシークレットを使って
hmac-sha1で生成した署名。署名の有効期間は発行(passkey
のエポック秒)から15分間です。
© Asial Corporation. & PIPED BITS Co., Ltd.

101
マイページで利用するスパイラルAPI
分類
ロケータ

APIメソッド名

内容
マイエリアにログインし、そのセッションIDを返す

area/logout

マイエリアからログアウトし、セッションIDを無効にする

area/status

セッションIDを引数として、セッションが有効かを確認す
る

area/mypage
一覧表

APIトークンに対応するAPIサーバのURLを返す

area/login
認証
(マイエリア)

locator/apiserver

引数として指定されたマイページのURLを返す

table/data

一覧表の出力データを返す

各APIごとにリクエスする際に必要となる送信パラメータやレスポンスのデータ
形式等の詳細に関しては以下のドキュメントを参照
・スパイラルAPI 設定資料・データ
http://www.pi-pe.co.jp/help/manual/api_data.pdf
© Asial Corporation. & PIPED BITS Co., Ltd.

102
スパイラルAPIの実行手順
• マイエリアを利用するには、以下の手順でAPIを実
行
以降、取得したURL
に対してAPIを発行

APIサーバのURLを
取得

ログイン
(セッションIDの取得)

以降、APIのパラメータに
セッションIDを含める

セッションの有効確認

一覧表取得
マイページ取得
ログアウト
© Asial Corporation. & PIPED BITS Co., Ltd.

103
JavaScriptによるWeb APIの利用方法
• APIの呼び出しは、Ajaxという非同期通信を行う技
術を利用する
– Ajax通信はjQueryの$.ajax()メソッドを使う

スパイラルAPI

index.html
AjaxでAPIをコール

© Asial Corporation. & PIPED BITS Co., Ltd.

104
ajaxメソッドの利用方法
$.ajax({
type: HTTP通信の種類 (GET/POST),
url: 通信先のURL,
headers: HTTPヘッダをオブジェクト形式で設定,
data: 送信するパラメータ,
async: 同期的に通信する場合にfalseを設定
}).done(function(data) {
// 通信成功時の処理(dataにはAPIから返却されたデータが入る)
}).fail(function(data) {
// 通信失敗時の処理
}).always(function(data) {
// 通信完了後に必ず実行する処理
});
APIサーバのURLの取得
var params = {'spiral_api_token': app.token};
$.ajax({
ロケータのURL
type: 'POST',
url: 'https://www.pi-pe.co.jp/api/locator',
headers: {
'content-type': 'application/json; charset=utf-8',
'x-spiral-api': 'locator/apiserver/request'
},
HTTPヘッダに
APIメソッドを指定
data: JSON.stringify(params),
async: false,
パラメータに
}).done(function(data) {
APIトークンを指定
app.apiUrl = data.location;
});
マイエリアAPIの呼び出し
var params = app.signParams({
my_area_title: 'MSmemberLogin',
id: loginId,
password: $('#memberPassword').val()
});

my_area_title は必須

ログイン後はセッションIDを含める

$.ajax({
APIサーバのURLを指定
type: 'POST',
url: app.apiUrl,
headers: {
'content-type': 'application/json; charset=utf-8',
'x-spiral-api': 'area/login/request'
},
data: JSON.stringify(params)
}).done(…
署名の設定方法
signParams: function(params)
{
// APIトークン
params['spiral_api_token'] = app.token;

パスキーは
現在日時を元に計算

// パスキー
var passkey = Math.floor((new Date()).getTime() / 1000).toString();
params['passkey'] = passkey;

// 署名
var message = app.token + '&' + passkey;
params['signature'] = CryptoJS.HmacSHA1(message, app.tokenSecret).toString();
return params;
}

トークンシークレットを
SHA1で暗号化
まとめ:クーポン画面

クーポンDB

クーポン一覧

© Asial Corporation. & PIPED BITS Co., Ltd.

109
まとめ:マイページ画面
クーポンDB

会員DB

会員限定
クーポン一覧

認証エリア

スパイラル
API

JS

© Asial Corporation. & PIPED BITS Co., Ltd.

110
ソースコードのご提供

✕

アカウントの作成

https://monaca.mobi/register/start

4週間トライアルアカウントの作成

http://bit.ly/spiralm

なお、Monaca上に展開するHTML,JSなどのソースコードや本スライド、
スタートアップマニュアル等はトライアルアカウント内のSPIRALアプリに同梱
ソースコードのご提供

✕

SDPにご加入の方で、お持ちのアカウントにアプリをインポー
トしたい場合は、以下からご依頼ください。

http://bit.ly/sdp-m
ご清聴いただき、
ありがとうございました

© Asial Corporation. & PIPED BITS Co., Ltd.

113

More Related Content

What's hot

モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップStaffnet_Inc
 
Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案gdays
 
Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介Maho Takara
 
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜gree_tech
 
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザインNaoki Aoyama
 
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLTVue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLTLINE Corporation
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割Recruit Lifestyle Co., Ltd.
 
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジー
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジーデブサミ2013 【15-A-1】「爆速」を支えるテクノロジー
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジーDevelopers Summit
 
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -de:code 2017
 
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発Developers Summit
 
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜gree_tech
 
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechconDebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechconDeNA
 
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門PIXTA Inc.
 
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SREIida Yukako
 
DevOps 概要 - インフラ革命、今起きていること
DevOps 概要 - インフラ革命、今起きていることDevOps 概要 - インフラ革命、今起きていること
DevOps 概要 - インフラ革命、今起きていることHiro Fukami
 
革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術Toru Yamaguchi
 
DIVE INTO WORK 就業説明会のご案内
DIVE INTO WORK 就業説明会のご案内DIVE INTO WORK 就業説明会のご案内
DIVE INTO WORK 就業説明会のご案内DIVE INTO CODE Corp.
 
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化gree_tech
 
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーターLaravel管理画面ジェネレーター
Laravel管理画面ジェネレーターTakuya Tejima
 

What's hot (20)

モダンWeb開発ワークショップ
モダンWeb開発ワークショップモダンWeb開発ワークショップ
モダンWeb開発ワークショップ
 
Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案Unityアバターアプリ開発パッケージのご提案
Unityアバターアプリ開発パッケージのご提案
 
Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介Sl勉強会 ソフトレイヤー活用ガイド紹介
Sl勉強会 ソフトレイヤー活用ガイド紹介
 
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜
アナザーエデンを支える技術〜効率的なコンテンツ制作のための開発基盤〜
 
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン
 
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLTVue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
 
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
 
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジー
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジーデブサミ2013 【15-A-1】「爆速」を支えるテクノロジー
デブサミ2013 【15-A-1】「爆速」を支えるテクノロジー
 
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
 
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
【16-E-4】残業ゼロで開発スピードが10倍に!もう元の開発体制には戻れないデンソー流のアジャイル開発
 
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
 
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechconDebugHeadを使ったiOSアプリ開発手法 #denatechcon
DebugHeadを使ったiOSアプリ開発手法 #denatechcon
 
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
 
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
 
DevOps 概要 - インフラ革命、今起きていること
DevOps 概要 - インフラ革命、今起きていることDevOps 概要 - インフラ革命、今起きていること
DevOps 概要 - インフラ革命、今起きていること
 
革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術
 
DIVE INTO WORK 就業説明会のご案内
DIVE INTO WORK 就業説明会のご案内DIVE INTO WORK 就業説明会のご案内
DIVE INTO WORK 就業説明会のご案内
 
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
 
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーターLaravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
 
DevOps at ChatWork
DevOps at ChatWorkDevOps at ChatWork
DevOps at ChatWork
 

Similar to サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー

IBM STARTUP MEETUP!(スタートアップカフェ大阪)
IBM STARTUP MEETUP!(スタートアップカフェ大阪)IBM STARTUP MEETUP!(スタートアップカフェ大阪)
IBM STARTUP MEETUP!(スタートアップカフェ大阪)Hiromichi Kano
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験アシアル株式会社
 
はじめての UWP アプリ開発
はじめての UWP アプリ開発はじめての UWP アプリ開発
はじめての UWP アプリ開発hiyohiyo
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望についてKen Azuma
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」アシアル株式会社
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshopYoichiro Sakurai
 
Sharoid Service Menu
Sharoid Service MenuSharoid Service Menu
Sharoid Service Menusharoid
 
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)TIS Inc.
 
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏kintone papers
 
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!CData Software Japan
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monaca
 
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作Tsuyoshi Nakao
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望についてKen Azuma
 
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014Tsuyoshi Nakao
 
2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~Takeshi Shinmura
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編Monaca
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development Shotaro Suzuki
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』Ryohei Sogo
 
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオサイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオCRI Japan, Inc.
 

Similar to サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー (20)

IBM STARTUP MEETUP!(スタートアップカフェ大阪)
IBM STARTUP MEETUP!(スタートアップカフェ大阪)IBM STARTUP MEETUP!(スタートアップカフェ大阪)
IBM STARTUP MEETUP!(スタートアップカフェ大阪)
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
 
はじめての UWP アプリ開発
はじめての UWP アプリ開発はじめての UWP アプリ開発
はじめての UWP アプリ開発
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
 
Sharoid Service Menu
Sharoid Service MenuSharoid Service Menu
Sharoid Service Menu
 
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
Scalable Generator: Using Scala in SIer Business (ScalaMatsuri)
 
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
 
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
 
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
 
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
 
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
Adobe セッション for Enterprise x HTML5 Web Application Conference 2014
 
2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~2011年マイクロソフト テクノロジー振り返り~開発編~
2011年マイクロソフト テクノロジー振り返り~開発編~
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
 
サイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオサイネージを使う顧客創出のシナリオ
サイネージを使う顧客創出のシナリオ
 

More from SPIRAL Inc.

会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介
会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介
会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介SPIRAL Inc.
 
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) formSPIRAL Inc.
 
SPIRAL活用イメージ集(製造業)
SPIRAL活用イメージ集(製造業)SPIRAL活用イメージ集(製造業)
SPIRAL活用イメージ集(製造業)SPIRAL Inc.
 
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)SPIRAL Inc.
 
LINEの導入事例とパイプドビッツのLINE連携
LINEの導入事例とパイプドビッツのLINE連携LINEの導入事例とパイプドビッツのLINE連携
LINEの導入事例とパイプドビッツのLINE連携SPIRAL Inc.
 
災害時にこそ役立つLINE
災害時にこそ役立つLINE災害時にこそ役立つLINE
災害時にこそ役立つLINESPIRAL Inc.
 
回転率UPの秘訣!LINEを使ったセルフオーダーシステム
回転率UPの秘訣!LINEを使ったセルフオーダーシステム回転率UPの秘訣!LINEを使ったセルフオーダーシステム
回転率UPの秘訣!LINEを使ったセルフオーダーシステムSPIRAL Inc.
 
観光業界のLINE活用事例
観光業界のLINE活用事例観光業界のLINE活用事例
観光業界のLINE活用事例SPIRAL Inc.
 
知らないと怖い!メール大量配信の落とし穴と対策
知らないと怖い!メール大量配信の落とし穴と対策知らないと怖い!メール大量配信の落とし穴と対策
知らないと怖い!メール大量配信の落とし穴と対策SPIRAL Inc.
 
意外とできていない!展示会のアフターフォロー3つの鉄則
意外とできていない!展示会のアフターフォロー3つの鉄則意外とできていない!展示会のアフターフォロー3つの鉄則
意外とできていない!展示会のアフターフォロー3つの鉄則SPIRAL Inc.
 
今さら誰にも聞けない!企業がLINEを活用する3つの理由
今さら誰にも聞けない!企業がLINEを活用する3つの理由今さら誰にも聞けない!企業がLINEを活用する3つの理由
今さら誰にも聞けない!企業がLINEを活用する3つの理由SPIRAL Inc.
 
最初が肝心!会員サイト構築で失敗しないための3つのポイント
最初が肝心!会員サイト構築で失敗しないための3つのポイント最初が肝心!会員サイト構築で失敗しないための3つのポイント
最初が肝心!会員サイト構築で失敗しないための3つのポイントSPIRAL Inc.
 
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイント
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイントちゃんと準備できてる?イベント・セミナー開催時のチェックポイント
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイントSPIRAL Inc.
 
少しの工夫で成果に直結!アンケート調査To Do リスト
少しの工夫で成果に直結!アンケート調査To Do リスト少しの工夫で成果に直結!アンケート調査To Do リスト
少しの工夫で成果に直結!アンケート調査To Do リストSPIRAL Inc.
 
紙・Web・スマホ・lineなど スマホ時代のアンケート手法
紙・Web・スマホ・lineなど スマホ時代のアンケート手法紙・Web・スマホ・lineなど スマホ時代のアンケート手法
紙・Web・スマホ・lineなど スマホ時代のアンケート手法SPIRAL Inc.
 
セミナー・イベント管理システム「Spiral seminar」
セミナー・イベント管理システム「Spiral seminar」セミナー・イベント管理システム「Spiral seminar」
セミナー・イベント管理システム「Spiral seminar」SPIRAL Inc.
 
定額でWebフォーム作り放題「SPIRAL(R) form」
定額でWebフォーム作り放題「SPIRAL(R) form」定額でWebフォーム作り放題「SPIRAL(R) form」
定額でWebフォーム作り放題「SPIRAL(R) form」SPIRAL Inc.
 
LINE連携ソリューション「SPIRAL(R) + LINE」
LINE連携ソリューション「SPIRAL(R) + LINE」LINE連携ソリューション「SPIRAL(R) + LINE」
LINE連携ソリューション「SPIRAL(R) + LINE」SPIRAL Inc.
 
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」SPIRAL Inc.
 
メルマガ配信システム SPIRAL(R)
メルマガ配信システム SPIRAL(R) メルマガ配信システム SPIRAL(R)
メルマガ配信システム SPIRAL(R) SPIRAL Inc.
 

More from SPIRAL Inc. (20)

会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介
会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介
会員サイト・マイページを構築するならSPIRAL®︎ー会員サイトの開発方法・事例もご紹介
 
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form
柔軟なカスタマイズとセキュリティ万全なWebフォーム作成ならSPIRAL(R) form
 
SPIRAL活用イメージ集(製造業)
SPIRAL活用イメージ集(製造業)SPIRAL活用イメージ集(製造業)
SPIRAL活用イメージ集(製造業)
 
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)
【抜粋】ハイブリッド出席型バーチャル株主総会開催報告会(パイプドビッツ)
 
LINEの導入事例とパイプドビッツのLINE連携
LINEの導入事例とパイプドビッツのLINE連携LINEの導入事例とパイプドビッツのLINE連携
LINEの導入事例とパイプドビッツのLINE連携
 
災害時にこそ役立つLINE
災害時にこそ役立つLINE災害時にこそ役立つLINE
災害時にこそ役立つLINE
 
回転率UPの秘訣!LINEを使ったセルフオーダーシステム
回転率UPの秘訣!LINEを使ったセルフオーダーシステム回転率UPの秘訣!LINEを使ったセルフオーダーシステム
回転率UPの秘訣!LINEを使ったセルフオーダーシステム
 
観光業界のLINE活用事例
観光業界のLINE活用事例観光業界のLINE活用事例
観光業界のLINE活用事例
 
知らないと怖い!メール大量配信の落とし穴と対策
知らないと怖い!メール大量配信の落とし穴と対策知らないと怖い!メール大量配信の落とし穴と対策
知らないと怖い!メール大量配信の落とし穴と対策
 
意外とできていない!展示会のアフターフォロー3つの鉄則
意外とできていない!展示会のアフターフォロー3つの鉄則意外とできていない!展示会のアフターフォロー3つの鉄則
意外とできていない!展示会のアフターフォロー3つの鉄則
 
今さら誰にも聞けない!企業がLINEを活用する3つの理由
今さら誰にも聞けない!企業がLINEを活用する3つの理由今さら誰にも聞けない!企業がLINEを活用する3つの理由
今さら誰にも聞けない!企業がLINEを活用する3つの理由
 
最初が肝心!会員サイト構築で失敗しないための3つのポイント
最初が肝心!会員サイト構築で失敗しないための3つのポイント最初が肝心!会員サイト構築で失敗しないための3つのポイント
最初が肝心!会員サイト構築で失敗しないための3つのポイント
 
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイント
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイントちゃんと準備できてる?イベント・セミナー開催時のチェックポイント
ちゃんと準備できてる?イベント・セミナー開催時のチェックポイント
 
少しの工夫で成果に直結!アンケート調査To Do リスト
少しの工夫で成果に直結!アンケート調査To Do リスト少しの工夫で成果に直結!アンケート調査To Do リスト
少しの工夫で成果に直結!アンケート調査To Do リスト
 
紙・Web・スマホ・lineなど スマホ時代のアンケート手法
紙・Web・スマホ・lineなど スマホ時代のアンケート手法紙・Web・スマホ・lineなど スマホ時代のアンケート手法
紙・Web・スマホ・lineなど スマホ時代のアンケート手法
 
セミナー・イベント管理システム「Spiral seminar」
セミナー・イベント管理システム「Spiral seminar」セミナー・イベント管理システム「Spiral seminar」
セミナー・イベント管理システム「Spiral seminar」
 
定額でWebフォーム作り放題「SPIRAL(R) form」
定額でWebフォーム作り放題「SPIRAL(R) form」定額でWebフォーム作り放題「SPIRAL(R) form」
定額でWebフォーム作り放題「SPIRAL(R) form」
 
LINE連携ソリューション「SPIRAL(R) + LINE」
LINE連携ソリューション「SPIRAL(R) + LINE」LINE連携ソリューション「SPIRAL(R) + LINE」
LINE連携ソリューション「SPIRAL(R) + LINE」
 
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」
簡単、手軽に優良顧客を見つけ出す「SPIRAL(R) マーケティングオートメーションシステム」
 
メルマガ配信システム SPIRAL(R)
メルマガ配信システム SPIRAL(R) メルマガ配信システム SPIRAL(R)
メルマガ配信システム SPIRAL(R)
 

Recently uploaded

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」Tetsuya Nihonmatsu
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 

Recently uploaded (7)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」
OWASP Hardning Privacy セッション 「セキュリティの守るべきものとは情報とプライバシーへ」
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
U-22プログラミング・コンテスト2024 作品説明動画を制作するポイントを紹介
U-22プログラミング・コンテスト2024 作品説明動画を制作するポイントを紹介U-22プログラミング・コンテスト2024 作品説明動画を制作するポイントを紹介
U-22プログラミング・コンテスト2024 作品説明動画を制作するポイントを紹介
 

サーバ構築不要!HTML5で始めるAndroid&iOSアプリ開発セミナー