こちらで有意義な時間を過ごさせていただきました！「【ハイブリッドアプリ開発ハンズオン】クラウドワークス × Monaca × NCMB]」#ncmb

こんにちは。@ryorasppです。

今日は（2016年3月3日現在）こちらのセミナーに参加してきました！

(名古屋)【ハイブリッドアプリ開発ハンズオン】クラウドワークス × Monaca × NCMB – connpass

来れない人のために、無料レッスン動画もあるそうです。

そして、チュートリアルもあります。

チュートリアル : チュートリアルの一覧 | ニフティクラウド mobile backend

準備

※ 事前に Monaca、ニフティクラウド mobile backend のアカウントを取得しておいて貰えるとスムーズです。

事前に、Monacaとニフティクラウド mobile backendのアカウントを取得しておくといいらしいので、それをやっておきます。

mobile backend

会場に到着！

名古屋駅からすぐの井門名古屋ビルということろで行われるらしいです。

建物はこのような感じ。

看板のようなものを見ると、どうやら8Fで行われるそうなので、8Fに向かいます。

無事到着しました！

アジェンダ

三時間で終わるようです。

夜遅くなりすぎなくならなそうなので良かったです。

それでは、

講演1.クラウドワークスにおけるスマホアプリ開発案件の現状と今後（クラウドワークス 田中氏）
講演2.Monacaを使ったHTML5ハイブリッドアプリ開発について（アシアル 岡本氏）
講演3.ニフティクラウド mobile backendについて（ニフティクラウド mobile backend エヴァンジェリスト 中津川氏）

これらの講演で学んだことをできる限り記録して残していこうと思います。

講演1.クラウドワークスにおけるスマホアプリ開発案件の現状と今後（クラウドワークス 田中氏）

アプリ開発案件をクラウドソーシングで発注する企業、受注するワーカー双方の立場から、受発注においてよくある落とし穴と気をつけるべきポイント、クラウドワークスの今後の展開についてお話しいたします。

クラウドワークスを活用したアプリ開発促進のお話

田中さんは、クラウドワークスで事業企画、システムとの連携に使っており、
いろんな席で講演をさせてもらってるらしいです。

クラウドワークスとは

インターネット上で完結して、仕事の受注・発注をおこなえるサービス

サービス開始が2012年3月で、
利用者数　発注:12万社、受注83万人

仕事を探す→実装・設計作業→条件交渉/メッセージ・チャット、ビデオ会話/納品/報酬・評価
これら全てをインターネットのみで完結できるのがクラウドソーシングの大きな特徴

クラウドワークスの業態はクラウドソーシング

こちらの「クラウド」は@niftyさんがやっているような「クラウド」とはまた別の意味の「クラウド」

社会の変化

多くの群衆（たくさんの個人の方）が、オンライン上で仕事をできる状態で待っている
その中で、企業が個人と受発注できる世の中になってきている

クラウドワークスにおいても、大手の大企業や行政、中央官庁ということが最近クラウドワークスを使って個人の方に仕事を出している

今まで、個人の方に仕事を出すことはありえなかったのが、クラウドソーシングによってそうしたことが広まってきている。

受注する方からの目線

こんなところでも仕事ができるということで、

海の近くであったり、川の近くであったり、

インターネット環境があればどこでも仕事ができるという極端な例です。

海外の南の島で仕事をしている人もいますし、地方（地元）に戻って、仕事をしたり、
主婦の方で、子育てしながら、
また介護をしながらでも仕事ができるという、
様々な働き方が広がっている。

ということから、クラウドワークスは、日本ベンチャー大賞「ワークスタイル革新賞」を受賞されているようです。

以上のことから上場もされているということらしい。

アプリの話

アプリの開発の案件がクラウドワークスにどれぐらいあるのかというと、まだ5%や10%ぐらいなのが現状で大多数は、Webサイト制作らしいです。

一方で、アプリの報酬は高単価なものが多いい！と言うことらしいです。

なぜアプリ開発をクラウドソーシングで？

発注者側の思惑

発注者側の意図、思惑を見ていくと、

発注者側と受注者側で、意図や思惑がマッチしない場合がある

メリット

安くて早い！←ほぼほぼこれ

製品を「まるなげ」するには若干リスキー
だけど、工数の安さと早さは魅力←すぐにできる

どんな時に使われるか

• 人手が足りない時！（すぐに作らないといけないけど社内で手が回ってない時など）
• iPhone版は開発済み、同じ仕様でAndroidアプリをつくりたい（会社にAndroidエンジニアがいないなど）
• アプリのアイディアはある。アプリを具現化したい（まずはプロトタイプをつくりたいなど）

既存Webサービスのアプリ化

Webサイトは出来てるが、会員（新規会員登録）が伸び悩んでるので、会員数を増やしたい
ということで、iPhone・Androidアプリを作って底上げしたい

そこで、アプリの開発を発注、発注者と契約

受注者側の思惑

生活がかかっている

本当に稼ぎたい。実績がほしい。

副業。おこづかい稼ぎしたい。貢献やスキルアップがしたい

• 継続案件よりは「一発もの」
• 高額案件（=重大責任が伴う）は敬遠

受注者側と発注者側でのアンマッチ

QCD
“Quality”（品質）、“Cost”（費用）、“Delivery”（納期）
で見ていきますと、

発注者側

Q < C ≒ D

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”発注者側”]どんなモノ作るのにも時間がかかる。
どうせちゃんと評判UPにつながる
案件じゃないと、微妙だ
[/speech_bubble]

受注者側

Q > C ≒ D

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”受注者側”]どんなモノ作るのにも時間がかかる。
どうせならちゃんと貢献やスキルアップにつながるものを作りたい。
[/speech_bubble]

クオリティを重視する受注者とコストや納期を重視する発注者でアンマッチが起こってしまう。

そこで、mobile backendの登場

mobile backendを利用

発注者側にとっては、
ちゃんとプロセスを踏むことより「動くモノがある」ことが重要

そこで、mobile backendを利用し、

発注者側、受注者側、同じ環境を見ることができる。←実際の動きを見れて、おかしいところを発見しながら開発を進めていくことが可能

その結果、早く改善ができることが言える。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”発注者側”]無駄工数が省けて
Happy[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”受注者側”]ものが動いてるのが見えて
Happy[/speech_bubble]

CrowdWorksでのアプリ開発の今後

仕事の数自体は減ることはない

• 少しずつ増えていく
• 案件は高額化していく

アプリ開発者が「むちゃぶり」を受けないために

クラウドワークスのメニュー化

• 見積もり制度のUp
• 「発注側はお金を出すから偉い 受注者は下請け」の撲滅
• ↑→受注者側のできるアピールがすごく重要

リアルの世界では今までそういうことが起きていた、クラウドソーシングの世界は受注者自体が発注者を選べるという時代
受注者が営業をする必要がなくなった

選べられるかつ選べる支援

クラウドワークスで支援していきたいこと

発注者と受注者をつなぐツール

• 課題管理ツール（Redmine,Backlog 等）との連携
• コミュニケーションツール（SlackやChatwork 等）との連携

受注者の実績の可視化・定量化

• スキルマーケット
• プロクラウドワーカー/Facebook社認定/アシアルさん認定/niftyさん認定ワーカー
• 「Powerd by hogeWoker in CloudWorks」ウィジェット

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”受注者”]スキルアップ/お金稼ぎ
+
信用情報の蓄積
[/speech_bubble]

選べられる受注者になっていく

以上で、講演1終了しました。

講演2.Monacaを使ったHTML5ハイブリッドアプリ開発について（アシアル 岡本氏）

Monacaを使ったHTML5ハイブリッドアプリ開発について

Monacaについてのお話

Monacaというのは、HTML5ハイブリッドアプリ開発する環境のこと

その環境がブラウザで動く、クラウドで動くという特徴がある。

アシアル株式会社について

エンジニア主体の会社
社員は50人ぐらい
そのうちの８割はエンジニア、一部デザイナー

アシアルは、「エンジニアリングでインターネットの成長を牽引する」という事業コンセプトのもと、HTML5、JavaScliptなどのWeb技術を中心としたデベロッパー支援事業を行っております。

主な事業概要

• モバイルアプリ開発環境
• UI/UX設計
• システム構築・コンサル/li>
• PHP開発補助製品
• Webサービス運営
• セミナー・スクール

ハイブリッドアプリの概要

モバイルOSシェア

Kantar Worldpanelによると、
日本国内販売数（2015年9月時点）
iOSが38%
Androidが61%

今後低価格なAndroidが伸びていく模様

タブレットにおいても、WindowsがOS無料をやっていって広まってる中で、

複数のOSに対応するには、コストがかかる

ということで、HTML5という選択肢が出てくる。

モバイルアプリ開発に関する課題

開発言語がOS毎に異なるため、

1. 開発工数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難

例　iPhoneはObjective-C AndroidはJavaなど

ハイブリッドアプリの登場

Webアプリ ×　ネイティブアプリ

ハイブリッドアプリはWebの技術を使って開発しますが、生成されるアプリはネイティブアプリとほぼ同等のものになります。

ハイブリッドアプリの仕組み

ハイブリッドアプリ開発には、Cordova(PhoneGap)というライブラリを利用します。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”HTML5″]アプリケーション本体はHTML5技術で実装[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”ﾈｲﾃｨﾌﾞｺｰﾄﾞ”]APACHE CORDOVA TM
ハードウェア機能を利用可能
ネイティブアプリ形式で配布[/speech_bubble]

Cordovaを利用しているAndroidアプリ

• Skype
• LINE
• Amazon
• …etc

いつも使っている、スカイプやラインやアマゾンがCordovaを利用していたなんて、驚きです！

従来の開発手法とハイブリッドアプリの比較

特徴・性能	ネイティブ アプリ	Webアプリ	ハイブリッド アプリ
クロスプラットフォーム対応	×	○	○
端末へのインストール	○	×	○
マーケットでの配布	○	×	○
オフラインでの利用	○	×	○
端末固有の機能の利用	○	△	○
アプリ実行速度	○	△	△

Monacaとは

• ハイブリッドアプリに特化した統合開発環境
• iOS,Android,Windows,Chrome Apps対応
• 日本語サポート・ドキュメント
• Windowsマシンでも開発OK（MacじゃなくてもiOSアプリ開発ができる）
• 無料

Monacaの利用者数

プレゼンの絵には、テレ朝や、asicsのなどなど、大手の企業のアプリにもMonacaが採用されてるようで、
そんなに規模が大きい、統合開発環境だということを初めて知り、これはできるようにしておくべきだ！と思うようになりました。

• 120000ユーザー突破
• 200以上の法人アカウント
• 2000以上のアプリがリリース済

Monacaの仕組み

クラウド上でソースコードを預かっていて、皆さんがプログラミングしたものが、ビルドできる

Monacaの開発環境はクラウドサービスとして提供。
どんな環境でもアプリ開発を始められる。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”クラウド”]ソースコードはクラウド上に[/speech_bubble]
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”クラウド”]開発環境として提供（IDEやデバッガー）[/speech_bubble]
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”クラウド”]ターゲットOSに合わせた環境でアプリをビルド（ビルドシステム）[/speech_bubble]

Monacaによるアプリ開発

デバッグ専用アプリがネットワーク経由で変更箇所を取得するため、リアルタイムに動作検証できる。

1. ファイルを編集（推奨環境　Google Chrome）
2. 実機ですぐに動作確認（スマホやタブレット）

iOSアプリはこちら

Androidアプリはこちら

Monacaデバッガー – Google Play の Android アプリ

UIフレームワーク:Onsen UI

独自タグを記述することでモバイルライクなUIを簡単に構築することができるモバイルアプリ開発のためのUIフレムワーク

• フラットデザイン対応
• ネイティブと遜色ないアニメーション
• 豊富なUIパーツ
• SPAの構築が容易
• UIガイドラインに準拠

マテリアルデザイン対応verのOnsen UI 2.0をβ版として公開中

Onsen UIの使用例

<ons-toolbar></ons-toolbar>

<ons-list-item></ons-list-item>

<ons-tabbar></ons-tabbar>

 

Monacaによるアプリ開発まとめ

• Web標準技術のHTML5で開発ができる
• 多くの端末やOSに、ワンソースで対応出来る
• デバイス固有の機能を活用することが可能
• クラウドベース開発環境で手軽に開発・検証できる
• ハイブリッドアプリ専用のUIフレームワークも提供

 

以上で講演2が終了しました。

講演3.ニフティクラウド mobile backendについて（ニフティクラウド mobile backend エヴァンジェリスト 中津川氏）

ニフティクラウド mobile backendの概要説明と使い方について説明。

ニフティクラウド mobile backendって何？

例を出すと、Monacaなどでアプリを作る時に、ユーザー登録の機能や、カメラで写真を撮ったりそれを保存、

その時はサーバーを必要になる。

アプリを作るというと、アプリの中を作るのはもちろん、サーバー側も作らないといけない
↑開発本数が増える　セキュリティの問題　メンテナンス　ストレージがいっぱいになる　データベースがいっぱいになる　などなどの問題

そのサーバー側を丸ごとニフティクラウド mobile backendで代用できる。

NCMBについて

あなたのアプリ開発を高速化/低コスト化するサービス

• サーバサイドの開発が不要。アプリに開発集中&高速化
• 無料から使い始められる
• SDKを各種用意していて、iOS/Android/Unity/JavaScript(Monaca）に対応

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”NCMB”]メンテナンスフリー
スケールフリー
無料から利用できる[/speech_bubble]

データストア/ファイルストア

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”ﾃﾞｰﾀｽﾄｱ”]テキスト、数字、位置情報などを保存できるデータベース[/speech_bubble]

本日使うのはデータストアの方

[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”ﾌｧｲﾙｽﾄｱ”]写真、音楽、動画、CSV、HTMLファイルなどを保存[/speech_bubble]
ファイルストアはいわゆるクラウドストレージ
例:ゲームを起動した時にファイルストアからデータをもらってはじめるゲームを開始できる
例:英単語アプリ　声などのデータをファイルストアに保存

ユーザー管理

• 認証（メール/ユーザID）
• メールアドレス確認/パスワード　リマインダーメール
• ソーシャルサービスでのログイン（Twitter,Google+,Facebookなど）

プッシュ通知機能

本日は使わないが、興味がある方にということで説明されてました。

• Web管理画面から作成
• iOS/Android共通
• 位置情報で絞り込み
• 開封率グラフ（実際に実装すると結構面倒くさい）

以上で、講演3が終了し、次は資料をいただきながらのアプリ作成ハンズオンです。

ハンズオン

GitHub – NIFTYCloud-mbaas/CW_Monaca_NCMB_Handson: クラウドワークス×Monaca×ニフティクラウド mobile backendハンズオンの資料置き場です。

こちらに今回の資料がありますが、

なんとセミナーでは、作業しやすいように印刷された資料で、進めていくことができました！

RSSリーダーにお気に入り機能をつけるという、バリバリのJavaScliptを書く内容で、

↑Monacaでプロジェクトを作る

↑コードを書く場面

↑ニフティクラウド mobile backendの画面

↑iPhone6でMonacaアプリでデバッグ

 

僕にとっては非常に大変な時間でしたが、進めないことが出てくると、中津川さんなどに非常に丁寧に対応してもらい、進めることができました！

JavaScliptを書いて機能を追加していくというのは面白いんだなぁといい体験ができました！

懇親会

なんと今回のセミナーの懇親会は無料ということにまず驚きました。

このように式の立食パーティーのような感じでした。

当日、ちょっと体調が悪かったので、アルコールはちょっと・・・と思っていたら、オレンジジュースが出てきたので安心しました笑

美味しい料理でした。

そして、いろんな人と話してみると、会社で、WordPressは使ってないけど、「baser CMS」は使ってるというコアな人がいたり、

あと驚いたのが、SNSを使ってる人が少なかったこと、ITの業界にいる人はすべてSNS駆使してると思ってましたが、そうではないのですね。

ということで、いろいろ勉強になりつつ、料理も楽しめた時間でした。

二つの頂き物

その１:シール

「ニフティクラウド mobile backend」と「Monaca」、「Onsen UI」この三つの貴重なシールをいただきました！

MacbookAirに貼るかどうかは迷ってるところです。。

その2:ペーパープロトタイピングノート

アプリの設計するときに役立つペーパープロトタイピングノートというのをいただきました！

こちらは大変活用できそうなので、アプリ開発のみならずスマホ用のWebページ設計のときにも使おうと思います！

今回のセミナーの影響で買った本

Kindle版でこちらの二冊を買いました。

クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック)

こちらの本は、まさに今回のセミナーの本！といえるものですが、ニフティクラウド mobile backendの事は今回のセミナーで知れてよかったなぁと思いました。

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)[Kindle版]

こちらは、アプリを作る本ではなく、HTML5でゲームを作りながら、HTML5+CSS+JavaScriptを学ぼう！というもので、初心に帰って一から学べそうなので購入しました。

最後に

クラウドワークスができたばっかりの頃、僕は18歳で、登録していろいろやってみましたが、
なかなかプロフェッショナルな仕事ばかりで、いろんな受注者を見て回っても、業績がある方ばかりで、
いざ自分ができる仕事はデータ入力やグレーな仕事しかなく、5000円ほど稼いで、今はアカウントを消してしまったという
悲しい現実を突きつけられましたが、

今回改めて、クラウドワークスのお話を聞いて、もっと勉強してクラウドワークスで働けれるぐらいスキルを身につける努力をしていこうと思いました。

そして、スマートフォンが流行ったばっかりの頃に、アプリを作りたい！と思い、まずはAndroidアプリが作りたい！と思うも、Javaのオブジェクト指向な所がなかなか難しく、挫折した経験があり、

その後ブログに力を注いだのですが、

今回、そのブログに注いできた力、Web制作の力を生かして、アプリを作れてしまうという素晴らしさに、感動しました。

Monacaの存在は知ってはいましたが、後回しにして全く使おうとも、アカウントを取得しようともしてこなかった自分が、
今回のセミナーをきっかけに、アカウントを取得し、ハンズオンで実際にアプリを作るということをやってみることができたのは、

僕にとって大きな一歩となりそうです。

まずは、苦手なJavaScriptを勉強しながら、アプリを作る技術を身につけ、アイディアをアプリにできるようにして、
Google Playにアプリを公開できたらなと思います。

本音はまずiOSアプリが作りたいところですが、ディベロッパーになるのに費用がかかるので、

Androidアプリをいくつか出して、いいのが出来てきたら、Appleの方にも出していけたらなと思います。

MonacaでAndroidアプリ作っていき、その蓄積したのをポンとiOSアプリにビルドできてしまうのは、本当にすごいですよね。それを活用しようと思います。

あとは、今回初めて知った、ニフティクラウド mobile backendですが、
てっきり、アプリを作るには自前でサーバーを用意するサーバーサイドの技量が必要だと思ってましたが、
それもなしで、アプリを作れてしまうなんて、ニフティクラウド mobile backendは本当にすごいなぁと思いましたし、
今回のハンズオンで使ってみてもとても簡単なUIで驚きました。

それでは、いろいろとヒントをいただけたので、これから頑張っていろいろやってみて、何か成果を出せたいと思います。

セミナーの主催者の方々本当にありがとうございました。

また、今回の記事が何かの何かになれたら幸いです。

上京しないと、セミナーがないと思い込んでましたが、名古屋にいても今回のようなセミナーが受けれるのですね。
これから他にもチャンスがあれば参加していこうと思います。

最後の最後に、

知り合いになっていただいた、

MOONGIFT.jpの中津川さん
や、
Schooに出ていらしたり、PHPの本を出していらっしゃったり、WordFesの過去の写真を見て知った、アシアル株式会社の岡本さん

その他、の方々と直接お会いできて感激でした。
僕はまだ肩書きも学歴も能力もないので、きっと忘れ去られる側ですが、僕の方はしっかりと覚えておこうと思います。

僕にとってビックな存在の方々のセミナーで、参加してから驚きました。とても有意義な時間でした。

皆さんも是非このようなセミナーを見かけたら参加してみてください！刺激をもらえますし、パソコンの前一人で座ってるだけと随分変わっていくと思います。

今回のようなセミナーはryoraspp心からおすすすめします！