イベントについて

Ionicはモバイルフレームワークのひとつで、これを使うとiTunesストアやGoogle Play Storeで配信することのできるアプリをHTML5でつくることができます。C++やSwift、Javaを覚えなくてもアプリをつくることができるWeb制作者向けのフレームワークです。

この度、2018年1月16日に「Ionicで作る モバイルアプリ制作入門」が出版されます！
本イベントでは、この出版を機により多くの人にIonicの楽しさを知ってもらうことを目的としております。

著者の榊原氏を招いた発表、および、Ionicを用いたモバイルアプリ開発（ハンズオン）を企画しております。

近日他エリアのIonicのイベント

東京

「Ionicで作る モバイルアプリ制作入門」刊行記念 Ionic Meetup Tokyo #3 - 2018/01/28(日)

博多

ng-fukuoka Angular Meetup #2 - 2018/01/20(土)

参加条件

書籍当日購入枠は、当日に書籍をその場でご購入頂けます（参加費に書籍代が含まれています）。
書籍持ち込み枠は、書籍が参加チケットとなります（書籍がなくても一般枠同様に参加費500円で参加できます）。
一般枠の方は、参加費が500円となります。

内容

著者の榊原さんによる発表、その後にIonicを用いたモバイルアプリ開発（ハンズオン）を行います。
ハンズオンとしては、次のようなものを考えています。

• Ionicを用いたWebアプリの雛形作成
• 外部API連携
• Storageを用いてローカルデータを保存

会場

株式会社リアズ

地図

https://reas.jp/company/map/

会場までの案内事項

地下鉄御堂筋線「新大阪駅」より徒歩1分、JR新大阪駅から徒歩3分です。
地下鉄御堂筋線「新大阪駅」の場合、南口から出るとすぐです。

タイムスケジュール

発表者、内容、時間は予告なく変更する可能性があります。

Ionicの概要と、Web制作者がIonicでアプリつくって変わったこと、得たもの

jQueryチョットワカルだったWeb制作者が、Ionicをつかって女性が女友だちをつくるためのソーシャルサービスをひとりで開発し、立ち上げ・運用で得た知見をお話します。課金周り（実際の収益についてお話します！）とUIをどのように成長させていったかあたりをお話する予定です。

• 榊原さん@rdlabo)
• 30分

Ionicを用いたモバイルアプリ開発（ハンズオン）

• こざけさん(@s_kozake)
• 120分

事前準備

ハンズオンは、Git、Node、Ionic、Visual Studio Codeのインストール、およびGithubもしくはBitBucketの登録が必要です。 事前準備方法は次の通りです。

なお、書籍『Ionicで作る モバイルアプリ制作入門』をお持ちの方は、『CHAPTER01 HTML5アプリ開発フレームワーク「Ionic」』の内容を実施して頂ければ、事前準備は完了となります。事前準備後の確認のみを行ってください。

Gitのインストール

ターミナル、もしくはコマンドプロンプトで次のコマンドを実行してください。

git --version

gitのバージョン表示がされた場合は、すでにGitがインストール済みのため、インストールは必要ありません。
インストールされていない場合、次のサイトにアクセスしてインストールをお願いします。

https://git-scm.com/downloads

Nodeのインストール

ターミナル、もしくはコマンドプロンプトで次のコマンドを実行してください。

node -v

バージョンが表示された場合は、、すでにNodeがインストール済みのため、インストールは必要ありません。
インストールされていない場合、次のサイトにアクセスしてインストールをお願いします。
サイトのLTSと表記されたバージョンをインストールして頂ければ、問題ありません。

https://nodejs.org/ja/

Ionicのインストール

ターミナル、もしくはコマンドプロンプトで次のコマンドを実行してください。

ionic -v

バージョンが表示された場合は、Ionicはすでにインストール済みです。
インストールされていない場合、次のコマンドを実行してインストールをお願いします。

(Mac OSの場合)

sudo npm install ionic cordova -g

(Windowsの場合)

npm install ionic cordova -g

Visual Studio Codeのインストール

ハンズオンではVisual Studio Codeを用いて開発を行います。
インストールされていない場合、次のサイトにアクセスしてインストールをお願いします。

https://code.visualstudio.com/

※ VSCodeの拡張機能で「Ionic Extension Pack」をインストールすると便利です。ハンズオンでは必須ではありませんが、興味のある方はインストールしてください。

GithubもしくはBitBucketの登録

ハンズオンでは、GithubもしくはBitBucketへ作成したIonicプロジェクトをPushして、Netlifyへリリースする予定です。
アカウントをお持ちでない方は、GithubもしくはBitBucketへのアカウント登録をお願いします。
なお、特にリリースまで行う必要ない方は、この作業は必要ありません。

(Github) https://github.com/

(Bitbucket) https://bitbucket.org/

事前準備後の確認

事前準備後の確認として、Ionicのサンプルプロジェクトが作成します。 任意のディレクトリで次のコマンドを実行してください。

ionic start handson-check

What starter would you like to use:という問い合わせがされますので、superを選んでください。

Would you like to integrate your new app with Cordova to target native iOS and Android?の問い合わせは、Nを選択してください。

Install the free Ionic Pro SDK and connect your app?という問い合わせが表示された場合は、Nで構いません。

成功した場合、Welcome to the IONIC SUPER STARTER!が表示されます。

次のコマンドを続けて実行してください。

 cd ./handson-check

ionic serve

Ionicのサンプル画面が起動したら、事前準備後の確認は完了です。
Ionicで作成された綺麗なサンプル画面をお試してください。